fixed card display &...

src/utils/bankBranding.ts

@@ -56,6 +56,11 @@ export function getBankMonogram(bankName?: string): string {
     return 'بانک'
   }
 
-  const normalized = bankName.replace(/^بانک\s+/u, '').trim()
+  const trimmed = bankName.trim()
+  if (/^[A-Za-z]/u.test(trimmed)) {
+    return trimmed.replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase() || 'BN'
+  }
+
+  const normalized = trimmed.replace(/^بانک\s+/u, '').trim()
   return normalized.slice(0, 2) || 'بانک'
 }

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

@@ -13,8 +13,16 @@
         ریال
       </div>
     </div>
-    <div v-if="item.order" :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+    <div
-      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+      v-if="item.order"
+      :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between items-start mb-3'"
+    >
+      <div
+        :class="[
+          variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary',
+          'tx-detail-wrap-label',
+        ]"
+      >
         {{ getTransactionTradePriceLabel(tradeProduct) }} حین معامله:
       </div>
       <div :class="['flex text-xs items-center number-ltr', variant === 'desktop' ? 'dtxn-detail__value' : '']">
@@ -22,8 +30,13 @@
         ریال
       </div>
     </div>
-    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between items-start mb-3'">
-      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+      <div
+        :class="[
+          variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary',
+          'tx-detail-wrap-label',
+        ]"
+      >
         مقدار {{ tradeProductLabel }} مبادله شده:
       </div>
       <div
@@ -33,8 +46,13 @@
           variant === 'desktop' ? 'dtxn-detail__value' : '',
         ]"
       >
-        <div class="flex items-center">
+        <div class="flex items-center gap-1">
-          <div class="text-base ml-1">{{ formatGoldAmount(item.gold) }}</div>
+          <img
+              :src="tradeProductImage"
+              :alt="tradeProductLabel"
+              class="tx-detail-product-thumb"
+          />
+          <div class="text-base">{{ formatGoldAmount(item.gold) }}</div>
           {{ item.unit }}
         </div>
         <div
@@ -115,6 +133,7 @@ import {
   resolveTransactionTradeProduct,
   shouldShowTransactionTotalWeightLine,
 } from '@/utils/productDealMethod'
+import { getProductDisplayImage } from '@/utils/productAssets'
 import { toJalaliNotime, toTime } from '@/utils/useDateTime'
 
 const props = withDefaults(
@@ -129,6 +148,9 @@ const tradeProduct = computed(() => resolveTransactionTradeProduct(props.item))
 const tradeProductLabel = computed(
   () => (tradeProduct.value?.title ?? '').trim() || getMeltedGoldTradeLabel(),
 )
+const tradeProductImage = computed(() =>
+  getProductDisplayImage(props.item.product ?? tradeProduct.value ?? props.item.wallet?.product ?? null),
+)
 const metalWalletProduct = computed(() => {
   if (props.item.order && tradeProduct.value?.title) {
     return tradeProduct.value
@@ -145,3 +167,20 @@ const showMetalWalletBalance = computed(
     || Math.abs(Number(props.item.balance_gold) || 0) > 0,
 )
 </script>
+
+<style scoped lang="less">
+.tx-detail-wrap-label {
+  flex: 1 1 42%;
+  min-width: 0;
+  max-width: 9.5rem;
+  line-height: 1.45;
+}
+
+.tx-detail-product-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+</style>

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

@@ -1,5 +1,6 @@
 <template>
-  <div ref="rootRef" class="boursecu-bank-picker">
+  <div ref="rootRef" class="boursecu-bank-picker" :class="`boursecu-bank-picker--${variant}`">
+    <template v-if="variant === 'mobile'">
       <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')">
@@ -25,32 +26,65 @@
         <span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
       </button>
 
-    <div v-if="isOpen && items.length" class="boursecu-bank-picker__dropdown">
+      <Teleport to="body">
+        <div v-if="isOpen && items.length" class="boursecu-bank-picker__overlay" @click="close">
+          <div class="boursecu-bank-picker__sheet" @click.stop>
             <button
               v-for="card in items"
               :key="card.id"
               type="button"
-        class="boursecu-bank-picker__option"
+              class="boursecu-bank-picker__sheet-item"
-        :class="{ 'boursecu-bank-picker__option--active': card.id === selectedId }"
+              :class="{ 'boursecu-bank-picker__sheet-item--active': card.id === selectedId }"
               @click="selectCard(card.id)"
             >
               <BoursecuBankAccountOption :card="card" />
             </button>
           </div>
         </div>
+      </Teleport>
+    </template>
+
+    <template v-else>
+      <div v-if="!items.length" class="boursecu-bank-picker__empty boursecu-bank-picker__empty--desktop">
+        حساب بانکی ثبت نشده است
+      </div>
+      <div v-else class="boursecu-bank-picker__list">
+        <button
+          v-for="card in items"
+          :key="card.id"
+          type="button"
+          class="boursecu-bank-picker__list-item"
+          :class="{ 'boursecu-bank-picker__list-item--active': card.id === selectedId }"
+          @click="selectCard(card.id)"
+        >
+          <BoursecuBankAccountOption :card="card" />
+          <BasicIcon
+            v-if="card.id === selectedId"
+            icon="vuesax-linear:arrow-up-2"
+            size="18"
+            class="boursecu-bank-picker__list-chevron"
+          />
+        </button>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } 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<{
+const props = withDefaults(
+  defineProps<{
     items: Card[]
     id?: number | string
-}>()
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
 
 const emit = defineEmits<{
   'update:id': [value: number | string | undefined]
@@ -69,6 +103,20 @@ const selectedCard = computed(() =>
   props.items.find((item) => item.id === selectedId.value) ?? props.items[0],
 )
 
+watch(
+  () => props.items,
+  (items) => {
+    if (!items.length) {
+      selectedId.value = undefined
+      return
+    }
+    if (!items.some((item) => item.id === selectedId.value)) {
+      selectedId.value = items[0]?.id
+    }
+  },
+  { immediate: true },
+)
+
 function toggleOpen() {
   if (!props.items.length) {
     return
@@ -76,13 +124,22 @@ function toggleOpen() {
   isOpen.value = !isOpen.value
 }
 
+function close() {
+  isOpen.value = false
+}
+
 function selectCard(cardId?: number) {
   selectedId.value = cardId
   isOpen.value = false
 }
 
-onClickOutside(rootRef, () => {
+if (props.variant === 'mobile') {
-  isOpen.value = false
+  onClickOutside(rootRef, close)
+}
+
+watch(isOpen, (open) => {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = open ? 'hidden' : ''
 })
 </script>
 
@@ -153,24 +210,38 @@ onClickOutside(rootRef, () => {
   text-align: center;
   font-size: 0.875rem;
   color: #6b7280;
+
+  &--desktop {
+    padding: 24px 0;
+  }
 }
 
-.boursecu-bank-picker__dropdown {
+.boursecu-bank-picker__overlay {
-  position: absolute;
+  position: fixed;
-  top: calc(100% + 8px);
+  inset: 0;
-  right: 0;
+  z-index: 5200;
-  left: 0;
+  display: flex;
-  z-index: 30;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  background: rgba(15, 23, 42, 0.28);
+  backdrop-filter: blur(2px);
+}
+
+.boursecu-bank-picker__sheet {
+  width: min(100%, 22rem);
+  max-height: min(70vh, 28rem);
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
-  padding: 8px;
+  padding: 10px;
   border-radius: 16px;
   background: #fff;
-  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
 }
 
-.boursecu-bank-picker__option {
+.boursecu-bank-picker__sheet-item {
   appearance: none;
   width: 100%;
   border: none;
@@ -180,10 +251,54 @@ onClickOutside(rootRef, () => {
   cursor: pointer;
   text-align: right;
   transition: background-color 0.15s ease;
-}
 
-.boursecu-bank-picker__option--active,
+  &--active,
-.boursecu-bank-picker__option:hover {
+  &:hover {
     background: #eceff1;
   }
+}
+
+.boursecu-bank-picker--desktop {
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+}
+
+.boursecu-bank-picker__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 24px 24px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.boursecu-bank-picker__list-item {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: right;
+  transition: background-color 0.15s ease;
+
+  &--active {
+    background: #eceff1;
+  }
+
+  &:hover:not(&--active) {
+    background: #f8fafc;
+  }
+}
+
+.boursecu-bank-picker__list-chevron {
+  flex-shrink: 0;
+  color: #6b7280;
+}
 </style>

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

@@ -131,7 +131,15 @@
             <div class="dwallet-side__header">
               <h3 class="dwallet-side__title">{{ isBoursecu ? 'حساب‌های بانکی' : 'کارت‌های بانکی' }}</h3>
               <button
-                v-if="!isBoursecu"
+                v-if="isBoursecu"
+                type="button"
+                class="dwallet-side__add-link"
+                @click="showAddCard = true"
+              >
+                + افزودن شبا
+              </button>
+              <button
+                v-else
                 type="button"
                 class="dwallet-side__add-btn"
                 @click="showAddCard = true"
@@ -141,6 +149,8 @@
               </button>
             </div>
 
+            <p v-if="isBoursecu && cardItems.length > 0" class="dwallet-side__subtitle">واریز به</p>
+
             <div v-if="!loading && cardItems.length === 0" class="dwallet-side__empty dwallet-side__empty--cards">
               <BasicIcon icon="vuesax-linear:card" size="32" />
               <p>هیچ کارتی یافت نشد</p>
@@ -152,6 +162,7 @@
             <BoursecuBankAccountPicker
               v-else-if="isBoursecu"
               v-model:id="form.card_id"
+              variant="desktop"
               :items="cardItems"
               @add-account="showAddCard = true"
             />

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

@@ -210,6 +210,27 @@
     margin: 0;
   }
 
+  &__subtitle {
+    margin: 0;
+    padding: 0 24px 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #6b7280;
+    text-align: right;
+  }
+
+  &__add-link {
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: #2563eb;
+    cursor: pointer;
+    font-family: inherit;
+  }
+
   &__scroll {
     flex: 1;
     overflow-y: auto;

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

@@ -32,6 +32,7 @@
         <BoursecuBankAccountPicker
           v-if="!isDeposit && isBoursecu"
           v-model:id="form.card_id"
+          variant="mobile"
           :items="cardItems"
           class="mb-4"
           @add-account="showAddCard = true"