changes of boursecu

src/assets/css/main.less

@@ -35,6 +35,11 @@ body {
   //color:#555 !important;
 }
 
+.odometer.odometer-auto-theme,
+.odometer.odometer-theme-default {
+  font-family: var(--App-font-family) !important;
+}
+
 html.font-dana,
 html.font-dana body,
 html.font-dana .ant-btn,

src/utils/bankBranding.ts

@@ -0,0 +1,61 @@
+const BANK_ACCENT_COLORS: Record<string, string> = {
+  'بانک پاسارگاد': '#1f7a54',
+  'پاسارگاد': '#1f7a54',
+  'بانک سامان': '#2f63d8',
+  'سامان': '#2f63d8',
+  'SAMAN': '#2f63d8',
+  'بانک پارسیان': '#c9a227',
+  'پارسیان': '#c9a227',
+  'بانک ملی': '#4b5e96',
+  'ملی': '#4b5e96',
+  'بانک ملت': '#c0392b',
+  'ملت': '#c0392b',
+  'بانک صادرات': '#1a6fb3',
+  'صادرات': '#1a6fb3',
+}
+
+export function formatShebaForDisplay(value?: string | number | null): string {
+  if (value == null || value === '') {
+    return ''
+  }
+
+  const normalized = String(value).replace(/\s/g, '').toUpperCase()
+  const digits = normalized.startsWith('IR') ? normalized.slice(2) : normalized
+
+  if (digits.length < 24) {
+    return normalized.startsWith('IR') ? normalized : `IR${normalized}`
+  }
+
+  return [
+    'IR',
+    digits.slice(0, 4),
+    digits.slice(4, 8),
+    digits.slice(8, 12),
+    digits.slice(12, 16),
+    digits.slice(16, 20),
+    digits.slice(20, 24),
+  ].join(' ')
+}
+
+export function getBankAccentColor(bankName?: string): string {
+  if (!bankName) {
+    return '#64748b'
+  }
+
+  const trimmed = bankName.trim()
+  if (BANK_ACCENT_COLORS[trimmed]) {
+    return BANK_ACCENT_COLORS[trimmed]
+  }
+
+  const matched = Object.entries(BANK_ACCENT_COLORS).find(([name]) => trimmed.includes(name))
+  return matched?.[1] ?? '#64748b'
+}
+
+export function getBankMonogram(bankName?: string): string {
+  if (!bankName?.trim()) {
+    return 'بانک'
+  }
+
+  const normalized = bankName.replace(/^بانک\s+/u, '').trim()
+  return normalized.slice(0, 2) || 'بانک'
+}

src/views/base/home/components/AssetsSection.vue

@@ -121,9 +121,3 @@ function formatMetalTotal(metal: WalletMetalTotal) {
   return `${formatWeightAmount(resolveSummaryMetalWeight(metal, inventoryCards.value))}${metal.unit}`
 }
 </script>
-
-<style scoped lang="less">
-.assets-section--boursecu {
-  background-color: #eff5f3;
-}
-</style>

src/views/base/home/components/BoursecuAssetsSummary.vue

@@ -173,7 +173,6 @@ onClickOutside(rootRef, () => {
   margin-bottom: 16px;
   padding: 16px 18px;
   border-radius: 12px;
-  background-color: #eff5f3;
 
   .boursecu-assets__row {
     justify-content: flex-start;

src/views/base/home/components/CurrentPrice.vue

@@ -40,7 +40,7 @@
             :value="displayGoldVal"
             class="o-text !text-xl font-bold"
             :class="isBoursecu ? 'price-odometer--boursecu' : ''"
-            style="font-family: iran-sans; direction: ltr"
+            style="direction: ltr"
           />
           <span :class="isBoursecu ? 'price-unit--boursecu' : ''">ریال</span>
         </div>

src/views/base/home/desktop/components/DesktopLivePrice.vue

@@ -41,7 +41,6 @@
           :value="displayGoldVal"
           class="dhome-hero-price__odometer o-text"
           :class="{ 'dhome-hero-price__odometer--boursecu': isBoursecu }"
-          style="font-family: iran-sans"
         />
         <span class="dhome-hero-price__unit" :class="{ 'dhome-hero-price__unit--boursecu': isBoursecu }">ریال</span>
       </div>

src/views/base/home/desktop/layouts/BoursecuDesktopHome.vue

@@ -34,16 +34,16 @@ const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
     <HomeSkeleton v-if="showSkeleton" />
 
     <template v-if="showContent">
-      <section class="dhome-hero-row">
-        <DesktopLivePrice />
-        <DesktopPriceRange />
-      </section>
-
       <DesktopAssetsMetrics
         @open-gold-modal="ctx.openGoldModal"
         @open-rial-modal="ctx.openRialModal"
       />
 
+      <section class="dhome-hero-row">
+        <DesktopLivePrice />
+        <DesktopPriceRange />
+      </section>
+
       <section class="dhome-main-grid">
         <DesktopChartSection />
         <DesktopQuickActionsPanel />

src/views/base/home/layouts/configs/boursecu.ts

@@ -9,12 +9,12 @@ export const boursecuHomeLayoutConfig: HomeLayoutConfig = {
   wrapperClass: 'rounded-lg mt-5',
   outerSections: [
     { id: 'assets' },
+    { id: 'currentPrice' },
     { id: 'boursecuQuickActions' },
     { id: 'limitedPriceAlert' },
   ],
   sections: [
     { id: 'marketClosed' },
-    { id: 'currentPrice' },
     { id: 'priceChart' },
     { id: 'priceStats' },
   ],

src/views/base/transactions/BoursecuTransactionsPage.vue

@@ -2,103 +2,64 @@
   <div class="boursecu-transactions pb-[calc(var(--app-bottom-chrome-height)+1rem)]">
     <MobilePageHeader title="تراکنش ها" />
 
-    <div class="mpage-content">
+    <div class="mpage-content px-4">
-    <div class="boursecu-transactions__tabs px-4">
+      <div class="dtxn-toolbar boursecu-transactions__toolbar">
-      <div class="flex gap-5 overflow-x-auto whitespace-nowrap pb-1">
+        <div class="dtxn-tabs">
-        <button
+          <button
-          v-for="tab in BOURSECU_TRANSACTION_TABS"
+            v-for="tab in BOURSECU_TRANSACTION_TABS"
-          :key="tab.id"
+            :key="tab.id"
-          type="button"
+            type="button"
-          class="boursecu-transactions__tab shrink-0"
+            class="dtxn-tabs__btn"
-          :class="{ 'boursecu-transactions__tab--active': activeTabId === tab.id }"
+            :class="{ 'dtxn-tabs__btn--active': activeTabId === tab.id }"
-          @click="setActiveTab(tab.id)"
+            @click="setActiveTab(tab.id)"
-        >
+          >
-          {{ tab.label }}
+            {{ tab.label }}
-        </button>
+          </button>
-      </div>
-    </div>
-
-    <div v-if="activeTab.showTradeToggle" class="px-4 mt-4 flex justify-end">
-      <div class="boursecu-transactions__trade-toggle">
-        <button
-          type="button"
-          class="boursecu-transactions__trade-toggle-item"
-          :class="{ 'boursecu-transactions__trade-toggle-item--active': tradeSide === 'buy' }"
-          @click="setTradeSide('buy')"
-        >
-          خرید
-        </button>
-        <button
-          type="button"
-          class="boursecu-transactions__trade-toggle-item"
-          :class="{ 'boursecu-transactions__trade-toggle-item--active': tradeSide === 'sell' }"
-          @click="setTradeSide('sell')"
-        >
-          فروش
-        </button>
-      </div>
-    </div>
-
-    <div v-if="activeTab.showAdvancedFilters" class="boursecu-transactions__filters px-4 mt-4">
-      <div class="boursecu-transactions__filters-label">
-        <BasicIcon icon="vuesax-linear:filter" size="16" />
-        <span>فیلترها:</span>
-      </div>
-      <a-select
-        v-model:value="statusFilter"
-        allow-clear
-        class="boursecu-transactions__filter-select"
-        placeholder="وضعیت"
-        size="large"
-        @change="applyInlineFilters"
-      >
-        <a-select-option
-          v-for="option in statusOptions"
-          :key="option.value"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </a-select-option>
-      </a-select>
-      <div class="boursecu-transactions__filter-dates">
-        <BaseDatePicker
-          v-model:value="dateFromFilter"
-          class="boursecu-transactions__filter-date"
-          placeholder="تاریخ از"
-          size="large"
-          @onchange="applyInlineFilters"
-        />
-        <BaseDatePicker
-          v-model:value="dateToFilter"
-          class="boursecu-transactions__filter-date"
-          placeholder="تاریخ تا"
-          size="large"
-          @onchange="applyInlineFilters"
-        />
-      </div>
-    </div>
-
-    <div ref="listRef" :class="loading ? 'min-h-[50vh]' : ''" class="px-4 mt-5">
-      <list-anim v-if="!loading">
-        <Item v-for="item in items" :key="item.id" :item="item" />
-        <div :ref="bindMobileObserver" class="w-full opacity-0 relative">
-          در حال بارگذاری
         </div>
-        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
-      </list-anim>
 
-      <template v-else>
+        <div v-if="activeTab.showTradeToggle" class="dtxn-toggle">
-        <TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
+          <button
-      </template>
+            type="button"
-
+            class="dtxn-toggle__btn"
-      <div
+            :class="{ 'dtxn-toggle__btn--active': tradeSide === 'buy' }"
-        v-if="!loading && items.length === 0"
+            @click="setTradeSide('buy')"
-        class="boursecu-transactions__empty"
+          >
-      >
+            خرید
-        <img :src="emptyImage" alt="" class="boursecu-transactions__empty-image" />
+          </button>
-        <p class="boursecu-transactions__empty-text">{{ emptyText }}</p>
+          <button
+            type="button"
+            class="dtxn-toggle__btn"
+            :class="{ 'dtxn-toggle__btn--active': tradeSide === 'sell' }"
+            @click="setTradeSide('sell')"
+          >
+            فروش
+          </button>
+        </div>
+      </div>
+
+      <BoursecuTransactionFilters
+        v-if="activeTab.showAdvancedFilters"
+        mobile-layout
+      />
+
+      <div ref="listRef" :class="loading ? 'min-h-[50vh]' : ''" class="mt-5">
+        <list-anim v-if="!loading">
+          <Item v-for="item in items" :key="item.id" :item="item" />
+          <div :ref="bindMobileObserver" class="w-full opacity-0 relative">
+            در حال بارگذاری
+          </div>
+          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+        </list-anim>
+
+        <template v-else>
+          <TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
+        </template>
+
+        <div v-if="!loading && items.length === 0" class="dtxn-empty">
+          <img :src="emptyImage" alt="" class="dtxn-empty__image" />
+          <p class="dtxn-empty__text">{{ emptyText }}</p>
+        </div>
       </div>
-    </div>
     </div>
   </div>
 </template>
@@ -106,13 +67,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { loading, loadingMore } from '@/utils'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
 import ListAnim from '@/components/ListAnim.vue'
 import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import emptyImage from '@/assets/img/cash_empty.svg'
 import Item from './components/Item.vue'
+import BoursecuTransactionFilters from './components/BoursecuTransactionFilters.vue'
 import { BOURSECU_TRANSACTION_TABS } from './config/boursecuTabs'
 import { useTransactionsPageContext } from './composables/useTransactionsPage'
 
@@ -120,123 +80,45 @@ const listRef = ref<HTMLElement | null>(null)
 
 const {
   items,
-  dateFromFilter,
-  dateToFilter,
-  statusFilter,
-  statusOptions,
   activeTabId,
   tradeSide,
   activeTab,
   emptyText,
   setActiveTab,
   setTradeSide,
-  applyInlineFilters,
   bindMobileObserver,
 } = useTransactionsPageContext()
 </script>
 
-<style scoped lang="less">
+<style lang="less">
+@import './desktop/styles/desktop-transactions.less';
+
 .boursecu-transactions {
   background: #fff;
   min-height: 100%;
 }
 
-.boursecu-transactions__tab {
+.boursecu-transactions__toolbar {
-  appearance: none;
+  margin-top: 4px;
-  cursor: pointer;
+  margin-bottom: 16px;
-  border: none;
-  background: transparent;
-  padding: 0 0 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #8b9490;
-  border-bottom: 2px solid transparent;
-  transition: color 0.2s ease, border-color 0.2s ease;
-}
-
-.boursecu-transactions__tab--active {
-  color: #1f2937;
-  border-bottom-color: #e8b923;
-}
-
-.boursecu-transactions__trade-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  padding: 3px;
-  border-radius: 10px;
-  background: #eceff1;
-}
-
-.boursecu-transactions__trade-toggle-item {
-  appearance: none;
-  cursor: pointer;
-  min-width: 5.5rem;
-  padding: 0.45rem 1rem;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  background: transparent;
-  color: #6b7280;
-  font-size: 0.875rem;
-  font-weight: 600;
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
-}
-
-.boursecu-transactions__trade-toggle-item--active {
-  background: #fff;
-  border-color: #d4e3de;
-  color: #1f2937;
 }
 
 .boursecu-transactions__filters {
-  display: flex;
   flex-direction: column;
-  gap: 10px;
+  align-items: stretch;
-}
 
-.boursecu-transactions__filters-label {
+  .dtxn-filters__product {
-  display: flex;
+    max-width: none;
-  align-items: center;
+  }
-  gap: 4px;
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-
-.boursecu-transactions__filter-select {
-  width: 100%;
-}
-
-.boursecu-transactions__filter-dates {
-  display: flex;
-  gap: 10px;
-  width: 100%;
 }
 
+.boursecu-transactions__filter-select,
 .boursecu-transactions__filter-date {
-  flex: 1;
+  width: 100%;
   min-width: 0;
 }
 
-.boursecu-transactions__empty {
+.boursecu-transactions__filter-dates {
-  display: flex;
+  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 1rem 4rem;
-  text-align: center;
-}
-
-.boursecu-transactions__empty-image {
-  width: 11rem;
-  max-width: 60vw;
-  height: auto;
-  object-fit: contain;
-}
-
-.boursecu-transactions__empty-text {
-  margin-top: 1rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #6b7280;
 }
 </style>

src/views/base/transactions/components/BoursecuTransactionFilters.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="dtxn-filters" :class="mobileLayout ? 'boursecu-transactions__filters' : undefined">
+    <div class="dtxn-filters__header">
+      <div class="dtxn-filters__label">
+        <BasicIcon icon="vuesax-linear:filter" size="16" />
+        <span>فیلترها:</span>
+      </div>
+      <a-select
+        v-if="showProductFilter"
+        v-model:value="productFilter"
+        allow-clear
+        class="dtxn-filters__product"
+        :class="mobileLayout ? 'boursecu-transactions__filter-select' : undefined"
+        placeholder="محصول"
+        size="large"
+        @change="applyInlineFilters"
+      >
+        <a-select-option
+          v-for="option in productOptions"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </a-select-option>
+      </a-select>
+    </div>
+
+    <a-select
+      v-model:value="statusFilter"
+      allow-clear
+      class="dtxn-filters__select"
+      :class="mobileLayout ? 'boursecu-transactions__filter-select' : undefined"
+      placeholder="وضعیت"
+      size="large"
+      @change="applyInlineFilters"
+    >
+      <a-select-option
+        v-for="option in statusOptions"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </a-select-option>
+    </a-select>
+
+    <div
+      class="dtxn-filters__dates"
+      :class="mobileLayout ? 'boursecu-transactions__filter-dates' : undefined"
+    >
+      <BaseDatePicker
+        v-model:value="dateFromFilter"
+        class="dtxn-filters__date"
+        :class="mobileLayout ? 'boursecu-transactions__filter-date' : undefined"
+        placeholder="تاریخ از"
+        size="large"
+        @onchange="applyInlineFilters"
+      />
+      <BaseDatePicker
+        v-model:value="dateToFilter"
+        class="dtxn-filters__date"
+        :class="mobileLayout ? 'boursecu-transactions__filter-date' : undefined"
+        placeholder="تاریخ تا"
+        size="large"
+        @onchange="applyInlineFilters"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
+import { useTransactionsPageContext } from '../composables/useTransactionsPage'
+
+withDefaults(
+  defineProps<{
+    mobileLayout?: boolean
+  }>(),
+  { mobileLayout: false },
+)
+
+const {
+  dateFromFilter,
+  dateToFilter,
+  statusFilter,
+  productFilter,
+  productOptions,
+  showProductFilter,
+  statusOptions,
+  applyInlineFilters,
+} = useTransactionsPageContext()
+</script>

src/views/base/transactions/composables/useTransactionsPage.ts

@@ -1,6 +1,7 @@
 import { computed, inject, onMounted, provide, ref, type ComponentPublicInstance, type InjectionKey } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { getProductsCatalog, getProductsCatalogRef } from '@/composables/useProductsCatalog'
 import { loading, loadingMore } from '@/utils'
 import {
   BOURSECU_TRANSACTION_TABS,
@@ -23,6 +24,7 @@ import {
   transactionItems,
   transactionPagination,
   transactionStatusFilter,
+  transactionProductFilter,
   transactionTableOutput,
   transactionTradeSide,
   transactionsBoursecuMode,
@@ -37,6 +39,9 @@ export interface TransactionsPageContext {
   dateFromFilter: typeof transactionDateFromFilter
   dateToFilter: typeof transactionDateToFilter
   statusFilter: typeof transactionStatusFilter
+  productFilter: typeof transactionProductFilter
+  productOptions: ReturnType<typeof computed<{ value: number; label: string }[]>>
+  showProductFilter: ReturnType<typeof computed<boolean>>
   mobileObserverEl: ReturnType<typeof ref<HTMLElement | null>>
   desktopObserverEl: ReturnType<typeof ref<HTMLElement | null>>
   activeTabId: typeof transactionActiveTabId
@@ -77,6 +82,19 @@ export function useTransactionsPageProvider(options?: { boursecu?: boolean }) {
 
   const statusOptions = computed(() => getBoursecuStatusOptionsForTab(activeTab.value))
 
+  const productOptions = computed(() =>
+    getProductsCatalogRef().value
+      .filter((product) => product.active && product.show)
+      .map((product) => ({
+        value: product.id,
+        label: product.title,
+      })),
+  )
+
+  const showProductFilter = computed(
+    () => transactionsBoursecuMode.value && activeTab.value.id !== 'deposit',
+  )
+
   const emptyText = computed(() => {
     if (!transactionsBoursecuMode.value) {
       return 'تراکنشی موجود نیست'
@@ -160,6 +178,9 @@ export function useTransactionsPageProvider(options?: { boursecu?: boolean }) {
   )
 
   onMounted(async () => {
+    if (isBoursecu) {
+      await getProductsCatalog()
+    }
     await initTransactionsPageData(isBoursecu)
   })
 
@@ -172,6 +193,9 @@ export function useTransactionsPageProvider(options?: { boursecu?: boolean }) {
     dateFromFilter: transactionDateFromFilter,
     dateToFilter: transactionDateToFilter,
     statusFilter: transactionStatusFilter,
+    productFilter: transactionProductFilter,
+    productOptions,
+    showProductFilter,
     mobileObserverEl,
     desktopObserverEl,
     activeTabId: transactionActiveTabId,

src/views/base/transactions/composables/useTransactionsPageData.ts

@@ -23,6 +23,7 @@ export const transactionDateFilter = ref<string>()
 export const transactionDateFromFilter = ref<string>()
 export const transactionDateToFilter = ref<string>()
 export const transactionStatusFilter = ref<string>()
+export const transactionProductFilter = ref<number>()
 export const transactionActiveTabId = ref<BoursecuTransactionTabId>('trades')
 export const transactionTradeSide = ref<BoursecuTradeSide>('buy')
 
@@ -45,6 +46,7 @@ export function resetTransactionsPagination() {
       transactionDateFromFilter.value,
       transactionDateToFilter.value,
       transactionStatusFilter.value,
+      transactionProductFilter.value,
     )
     return
   }
@@ -157,6 +159,7 @@ export function resetTransactionsPageData() {
   transactionDateFromFilter.value = undefined
   transactionDateToFilter.value = undefined
   transactionStatusFilter.value = undefined
+  transactionProductFilter.value = undefined
   transactionActiveTabId.value = 'trades'
   transactionTradeSide.value = 'buy'
 }

src/views/base/transactions/config/boursecuTabs.ts

@@ -50,7 +50,7 @@ export const BOURSECU_TRANSACTION_STATUS_OPTIONS = BOURSECU_TRADE_STATUS_OPTIONS
 export const BOURSECU_TRANSACTION_TABS: BoursecuTransactionTab[] = [
   {
     id: 'trades',
-    label: 'همه',
+    label: 'معاملات',
     emptyText: 'معامله‌ای برای شما به ثبت نرسیده است',
     showTradeToggle: true,
     showAdvancedFilters: true,
@@ -121,6 +121,7 @@ export function buildBoursecuTransactionPagination(
   dateFrom?: string,
   dateTo?: string,
   statusFilter?: BoursecuTransactionStatusFilter | string,
+  productId?: number,
 ): TableEngineInput {
   const filters: TableEngineInput['filters'] = []
 
@@ -170,6 +171,16 @@ export function buildBoursecuTransactionPagination(
         value: statusSts,
       })
     }
+
+    if (productId != null && tab.id !== 'deposit') {
+      filters.push({
+        field: 'wallet.product_id',
+        cr: 'and',
+        type: 'number',
+        op: 'eq',
+        value: productId,
+      })
+    }
   }
 
   return {

src/views/base/transactions/desktop/DesktopBoursecuTransactionsView.vue

@@ -37,44 +37,7 @@
         </div>
       </div>
 
-      <div v-if="activeTab.showAdvancedFilters" class="dtxn-filters">
+      <BoursecuTransactionFilters v-if="activeTab.showAdvancedFilters" />
-        <div class="dtxn-filters__label">
-          <BasicIcon icon="vuesax-linear:filter" size="16" />
-          <span>فیلترها:</span>
-        </div>
-        <a-select
-          v-model:value="statusFilter"
-          allow-clear
-          class="dtxn-filters__select"
-          placeholder="وضعیت"
-          size="large"
-          @change="applyInlineFilters"
-        >
-          <a-select-option
-            v-for="option in statusOptions"
-            :key="option.value"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </a-select-option>
-        </a-select>
-        <div class="dtxn-filters__dates">
-          <BaseDatePicker
-            v-model:value="dateFromFilter"
-            class="dtxn-filters__date"
-            placeholder="تاریخ از"
-            size="large"
-            @onchange="applyInlineFilters"
-          />
-          <BaseDatePicker
-            v-model:value="dateToFilter"
-            class="dtxn-filters__date"
-            placeholder="تاریخ تا"
-            size="large"
-            @onchange="applyInlineFilters"
-          />
-        </div>
-      </div>
 
       <div ref="listRef" :class="loading ? 'min-h-[40vh]' : ''" class="mt-5">
         <div v-if="!loading" class="dtxn-list">
@@ -108,13 +71,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { loading, loadingMore } from '@/utils'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import DesktopPageTopbar from '@/layouts/components/DesktopPageTopbar.vue'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
 import ListAnim from '@/components/ListAnim.vue'
 import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import emptyImage from '@/assets/img/cash_empty.svg'
 import Item from '../components/Item.vue'
+import BoursecuTransactionFilters from '../components/BoursecuTransactionFilters.vue'
 import { BOURSECU_TRANSACTION_TABS } from '../config/boursecuTabs'
 import { useTransactionsPageContext } from '../composables/useTransactionsPage'
 
@@ -122,17 +84,12 @@ const listRef = ref<HTMLElement | null>(null)
 
 const {
   items,
-  dateFromFilter,
-  dateToFilter,
-  statusFilter,
-  statusOptions,
   activeTabId,
   tradeSide,
   activeTab,
   emptyText,
   setActiveTab,
   setTradeSide,
-  applyInlineFilters,
   bindDesktopObserver,
 } = useTransactionsPageContext()
 </script>

src/views/base/transactions/desktop/styles/desktop-transactions.less

@@ -84,6 +84,15 @@
   align-items: center;
   gap: 10px;
 
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex: 1 1 100%;
+    min-width: 100%;
+  }
+
   &__label {
     display: inline-flex;
     align-items: center;
@@ -91,6 +100,13 @@
     font-size: 13px;
     font-weight: 500;
     color: #6b7280;
+    flex-shrink: 0;
+  }
+
+  &__product {
+    flex: 1;
+    min-width: 140px;
+    max-width: 240px;
   }
 
   &__select,

src/views/base/wallet/components/BoursecuBankAccountOption.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="boursecu-bank-option" :class="{ 'boursecu-bank-option--compact': compact }">
+    <div class="boursecu-bank-option__logo" :style="{ backgroundColor: accentColor }">
+      <span>{{ monogram }}</span>
+    </div>
+    <div class="boursecu-bank-option__content">
+      <div class="boursecu-bank-option__title">{{ card.bank_name || 'بانک' }}</div>
+      <div class="boursecu-bank-option__sheba">{{ shebaText }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Card } from '@/models/wallet'
+import {
+  formatShebaForDisplay,
+  getBankAccentColor,
+  getBankMonogram,
+} from '@/utils/bankBranding'
+
+const props = withDefaults(
+  defineProps<{
+    card: Card
+    compact?: boolean
+  }>(),
+  { compact: false },
+)
+
+const accentColor = computed(() => getBankAccentColor(props.card.bank_name))
+const monogram = computed(() => getBankMonogram(props.card.bank_name))
+const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
+</script>
+
+<style scoped lang="less">
+.boursecu-bank-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+.boursecu-bank-option__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  color: #fff;
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1.1;
+  text-align: center;
+  padding: 4px;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__logo {
+  width: 38px;
+  height: 38px;
+}
+
+.boursecu-bank-option__content {
+  min-width: 0;
+  flex: 1;
+  text-align: right;
+}
+
+.boursecu-bank-option__title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__title {
+  font-size: 0.875rem;
+}
+
+.boursecu-bank-option__sheba {
+  margin-top: 4px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111827;
+  direction: ltr;
+  text-align: right;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__sheba {
+  font-size: 0.92rem;
+}
+</style>

src/views/base/wallet/components/BoursecuBankAccountPicker.vue

@@ -0,0 +1,189 @@
+<template>
+  <div ref="rootRef" class="boursecu-bank-picker">
+    <div class="boursecu-bank-picker__header">
+      <span class="boursecu-bank-picker__heading">واریز به</span>
+      <button type="button" class="boursecu-bank-picker__add" @click="$emit('add-account')">
+        + افزودن شبا
+      </button>
+    </div>
+
+    <button
+      type="button"
+      class="boursecu-bank-picker__trigger"
+      :disabled="!items.length"
+      @click="toggleOpen"
+    >
+      <template v-if="selectedCard">
+        <BoursecuBankAccountOption :card="selectedCard" compact />
+        <BasicIcon
+          icon="vuesax-linear:arrow-down"
+          size="18"
+          class="boursecu-bank-picker__chevron"
+          :class="{ 'boursecu-bank-picker__chevron--open': isOpen }"
+        />
+      </template>
+      <span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
+    </button>
+
+    <div v-if="isOpen && items.length" class="boursecu-bank-picker__dropdown">
+      <button
+        v-for="card in items"
+        :key="card.id"
+        type="button"
+        class="boursecu-bank-picker__option"
+        :class="{ 'boursecu-bank-picker__option--active': card.id === selectedId }"
+        @click="selectCard(card.id)"
+      >
+        <BoursecuBankAccountOption :card="card" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import type { Card } from '@/models/wallet'
+import BoursecuBankAccountOption from './BoursecuBankAccountOption.vue'
+
+const props = defineProps<{
+  items: Card[]
+  id?: number | string
+}>()
+
+const emit = defineEmits<{
+  'update:id': [value: number | string | undefined]
+  'add-account': []
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+
+const selectedId = computed({
+  get: () => props.id,
+  set: (value) => emit('update:id', value),
+})
+
+const selectedCard = computed(() =>
+  props.items.find((item) => item.id === selectedId.value) ?? props.items[0],
+)
+
+function toggleOpen() {
+  if (!props.items.length) {
+    return
+  }
+  isOpen.value = !isOpen.value
+}
+
+function selectCard(cardId?: number) {
+  selectedId.value = cardId
+  isOpen.value = false
+}
+
+onClickOutside(rootRef, () => {
+  isOpen.value = false
+})
+</script>
+
+<style scoped lang="less">
+.boursecu-bank-picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 1;
+}
+
+.boursecu-bank-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.boursecu-bank-picker__heading {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.boursecu-bank-picker__add {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #2563eb;
+  cursor: pointer;
+}
+
+.boursecu-bank-picker__trigger {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: none;
+  border-radius: 14px;
+  background: #eceff1;
+  cursor: pointer;
+  text-align: right;
+}
+
+.boursecu-bank-picker__trigger:disabled {
+  cursor: default;
+}
+
+.boursecu-bank-picker__chevron {
+  flex-shrink: 0;
+  color: #6b7280;
+  transition: transform 0.2s ease;
+}
+
+.boursecu-bank-picker__chevron--open {
+  transform: rotate(180deg);
+}
+
+.boursecu-bank-picker__empty {
+  width: 100%;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.boursecu-bank-picker__dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  left: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
+}
+
+.boursecu-bank-picker__option {
+  appearance: none;
+  width: 100%;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: right;
+  transition: background-color 0.15s ease;
+}
+
+.boursecu-bank-picker__option--active,
+.boursecu-bank-picker__option:hover {
+  background: #eceff1;
+}
+</style>

src/views/base/wallet/components/BoursecuWithdrawGuide.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="boursecu-withdraw-guide">
+    <div class="boursecu-withdraw-guide__minimum">
+      <span class="boursecu-withdraw-guide__minimum-label">حداقل مقدار برداشت</span>
+      <div class="boursecu-withdraw-guide__minimum-value">
+        <span class="boursecu-withdraw-guide__minimum-amount">20,000</span>
+        <span class="boursecu-withdraw-guide__minimum-unit">تومان</span>
+      </div>
+    </div>
+
+    <p class="boursecu-withdraw-guide__intro">
+      درخواست‌های برداشت ثبت‌شده، وارد صف سیکل‌های پایا شده و در اولین سیکل یا در برخی موارد تا ۴۸ ساعت تسویه خواهد شد.
+    </p>
+
+    <div class="boursecu-withdraw-guide__section">
+      <h3 class="boursecu-withdraw-guide__section-title">سیکل‌های پایا (روزهای غیر تعطیل)</h3>
+      <ul class="boursecu-withdraw-guide__list">
+        <li>ثبت پیش از ۱۲ ظهر ----&gt; ساعت ۱۲:۴۵ همان روز</li>
+        <li>ثبت پیش از ۱۸ عصر ----&gt; ساعت ۱۸:۴۵ همان روز</li>
+        <li>ثبت پس از ساعت ۱۸ عصر ----&gt; ساعت ۱۲:۴۵ روز کاری بعد</li>
+      </ul>
+    </div>
+
+    <div class="boursecu-withdraw-guide__section">
+      <h3 class="boursecu-withdraw-guide__section-title">سیکل‌های پایا (روزهای تعطیل)</h3>
+      <p class="boursecu-withdraw-guide__holiday">ساعت ۱۲:۴۵ روز کاری بعد</p>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+.boursecu-withdraw-guide {
+  margin-top: 0;
+  color: #4b5563;
+  line-height: 1.8;
+}
+
+.boursecu-withdraw-guide__minimum {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.boursecu-withdraw-guide__minimum-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.boursecu-withdraw-guide__minimum-value {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.35rem;
+}
+
+.boursecu-withdraw-guide__minimum-amount {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: #111827;
+  direction: ltr;
+  font-variant-numeric: tabular-nums;
+}
+
+.boursecu-withdraw-guide__minimum-unit {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.boursecu-withdraw-guide__intro {
+  margin: 0 0 1rem;
+  font-size: 0.8125rem;
+  text-align: justify;
+}
+
+.boursecu-withdraw-guide__section {
+  margin-bottom: 0.85rem;
+}
+
+.boursecu-withdraw-guide__section-title {
+  margin: 0 0 0.35rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: #374151;
+}
+
+.boursecu-withdraw-guide__list {
+  margin: 0;
+  padding: 0 1rem 0 0;
+  font-size: 0.8125rem;
+}
+
+.boursecu-withdraw-guide__list li + li {
+  margin-top: 0.15rem;
+}
+
+.boursecu-withdraw-guide__holiday {
+  margin: 0;
+  padding-right: 0.25rem;
+  font-size: 0.8125rem;
+}
+</style>

src/views/base/wallet/composables/useWalletPage.ts

@@ -12,7 +12,7 @@ import { message } from 'ant-design-vue'
 import type { Card } from '@/models/wallet'
 import { useUserStore } from '@/store/userStore'
 import { useConfigStore } from '@/store/configStore'
-import { getProjectBaleContactLink, isBazretalaProject } from '@/utils/config'
+import { getProjectBaleContactLink, isBazretalaProject, isBoursecuProject } from '@/utils/config'
 import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import {
   buildDepositSmsUrl,
@@ -124,6 +124,9 @@ export function useWalletPage() {
   })
 
   const disableButton = computed(() => {
+    const minWithdrawAmount = isBoursecuProject() ? 200_000 : 1_000_000
+    const minDepositAmount = 1_000_000
+
     if (!loading.value) {
       if (walletStore?.walletInfo?.cash && !isDeposit.value) {
         if (walletCardItems.value.length > 0) {
@@ -131,13 +134,13 @@ export function useWalletPage() {
             walletStore?.walletInfo?.cash <= 0
             || walletStore?.walletInfo?.cash < parseInt(form.value?.value)
             || isNaN(parseInt(form.value?.value))
-            || parseInt(form.value?.value) < 1000000
+            || parseInt(form.value?.value) < minWithdrawAmount
           )
         }
         return true
       }
       if (isDeposit.value) {
-        return isNaN(parseInt(form.value?.value)) || parseInt(form.value?.value) < 1000000
+        return isNaN(parseInt(form.value?.value)) || parseInt(form.value?.value) < minDepositAmount
       }
       return false
     }

src/views/base/wallet/desktop/DesktopWalletView.vue

@@ -55,7 +55,7 @@
 
             <Transition mode="out-in" name="fade">
               <div v-if="!isDeposit" key="withdraw" class="dwallet-form__extras">
-                <p class="dwallet-form__hint dwallet-form__hint--warn">
+                <p v-if="!isBoursecu" class="dwallet-form__hint dwallet-form__hint--warn">
                   حداقل مبلغ برداشتی 100 هزار تومان می باشد.
                 </p>
                 <p class="dwallet-form__balance-text">
@@ -100,6 +100,8 @@
               <a-spin v-if="loading" size="small" />
               <span v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</span>
             </BasicButton>
+
+            <BoursecuWithdrawGuide v-if="!isDeposit && isBoursecu" />
           </a-form>
         </section>
 
@@ -127,8 +129,13 @@
 
           <template v-else>
             <div class="dwallet-side__header">
-              <h3 class="dwallet-side__title">کارت‌های بانکی</h3>
+              <h3 class="dwallet-side__title">{{ isBoursecu ? 'حساب‌های بانکی' : 'کارت‌های بانکی' }}</h3>
-              <button type="button" class="dwallet-side__add-btn" @click="showAddCard = true">
+              <button
+                v-if="!isBoursecu"
+                type="button"
+                class="dwallet-side__add-btn"
+                @click="showAddCard = true"
+              >
                 <BasicIcon icon="vuesax-linear:add" size="16" />
                 <span>افزودن کارت</span>
               </button>
@@ -138,10 +145,17 @@
               <BasicIcon icon="vuesax-linear:card" size="32" />
               <p>هیچ کارتی یافت نشد</p>
               <button type="button" class="dwallet-side__add-btn dwallet-side__add-btn--primary" @click="showAddCard = true">
-                افزودن کارت جدید
+                {{ isBoursecu ? 'افزودن شبا' : 'افزودن کارت جدید' }}
               </button>
             </div>
 
+            <BoursecuBankAccountPicker
+              v-else-if="isBoursecu"
+              v-model:id="form.card_id"
+              :items="cardItems"
+              @add-account="showAddCard = true"
+            />
+
             <div v-else-if="cardItems.length > 0" class="dwallet-cards">
               <CardSlider
                 v-model:id="form.card_id"
@@ -167,9 +181,14 @@ import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import { useConfigStore } from '@/store/configStore'
 import { required } from '@/utils/inputRules'
 import CardSlider from '../components/UISlider/index.vue'
+import BoursecuBankAccountPicker from '../components/BoursecuBankAccountPicker.vue'
+import BoursecuWithdrawGuide from '../components/BoursecuWithdrawGuide.vue'
 import Item from '../components/Item.vue'
+import { isBoursecuProject } from '@/utils/config'
 import { useWalletPageContext } from '../composables/useWalletPage'
 
+const isBoursecu = isBoursecuProject()
+
 const {
   isDeposit,
   walletStore,

src/views/base/wallet/mobile/MobileWalletView.vue

@@ -26,9 +26,17 @@
     </div>
     <div
       class="px-5 mpage-content mpage-content--with-subheader"
-      :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'"
+      :class="isDeposit ? 'pb-2' : isBoursecu ? 'pb-[calc(var(--app-bottom-chrome-height)+1rem)]' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'"
     >
       <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
+        <BoursecuBankAccountPicker
+          v-if="!isDeposit && isBoursecu"
+          v-model:id="form.card_id"
+          :items="cardItems"
+          class="mb-4"
+          @add-account="showAddCard = true"
+        />
+
         <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
           <bg_main />
           <div class="z-100 relative">
@@ -45,7 +53,9 @@
             </a-form-item>
             <Transition mode="out-in" name="fade">
               <div v-if="!isDeposit">
-                <div class="text-red text-xs font-bold mb-2">حداقل مبلغ برداشتی 100 هزار تومان می باشد.</div>
+                <div v-if="!isBoursecu" class="text-red text-xs font-bold mb-2">
+                  حداقل مبلغ برداشتی 100 هزار تومان می باشد.
+                </div>
                 <div class="font-bold text-xs">
                   {{ formatCashWalletBalanceText(usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0)) }}
                 </div>
@@ -94,6 +104,14 @@
           </BasicButton>
         </a-form-item>
       </a-form>
+
+      <div
+        v-if="!isDeposit && isBoursecu"
+        class="wallet-withdraw-guide-panel relative z-10"
+      >
+        <BoursecuWithdrawGuide />
+      </div>
+
       <div
         v-if="isDeposit"
         :ref="(node) => { mobileDepositScrollEl = (node as HTMLElement | null) }"
@@ -110,7 +128,7 @@
       <Transition mode="out-in" name="fade">
         <template v-if="!isDeposit">
           <div
-            v-if="!loading && cardItems.length === 0"
+            v-if="!loading && cardItems.length === 0 && !isBoursecu"
             class="h-30 flex items-center justify-center"
           >
             هیچ کارتی یافت نشد
@@ -121,7 +139,7 @@
 
     <Teleport to="body">
       <CardSlider
-        v-if="!isDeposit && cardItems.length > 0 && !showAddCard"
+        v-if="!isDeposit && !isBoursecu && cardItems.length > 0 && !showAddCard"
         v-model:id="form.card_id"
         :items="cardItems"
         class="card-slider-wrap wallet-card-slider"
@@ -131,7 +149,7 @@
 
     <Teleport to="body">
       <div
-        v-if="!isDeposit && !showAddCard"
+        v-if="!isDeposit && !isBoursecu && !showAddCard"
         class="add-card app-dock-add-bar"
         @click="showAddCard = true"
       >
@@ -154,9 +172,14 @@ import { useConfigStore } from '@/store/configStore'
 import { required } from '@/utils/inputRules'
 import img from '@/assets/img/user_ly1.svg'
 import CardSlider from '../components/UISlider/index.vue'
+import BoursecuBankAccountPicker from '../components/BoursecuBankAccountPicker.vue'
+import BoursecuWithdrawGuide from '../components/BoursecuWithdrawGuide.vue'
 import Item from '../components/Item.vue'
+import { isBoursecuProject } from '@/utils/config'
 import { useWalletPageContext } from '../composables/useWalletPage'
 
+const isBoursecu = isBoursecuProject()
+
 const {
   isDeposit,
   walletStore,
@@ -185,6 +208,11 @@ const {
   right: 0;
 }
 
+.wallet-withdraw-guide-panel {
+  margin-top: 1.25rem;
+  padding-bottom: 1rem;
+}
+
 @media screen and (min-width: 426px) {
   .card-slider-wrap {
     width: 426px;