From e8c394d71a58dc527d89bf05ccf55bc7468c5fb0 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Wed, 1 Jul 2026 12:22:43 +0200
Subject: [PATCH] fixed card display &...

---
 src/utils/bankBranding.ts                     |   7 +-
 src/utils/productAssets.ts                    |   6 +-
 .../components/TransactionDetailPanel.vue     |  51 +++-
 .../components/BoursecuBankAccountPicker.vue  | 221 +++++++++++++-----
 .../base/wallet/desktop/DesktopWalletView.vue |  13 +-
 .../wallet/desktop/styles/desktop-wallet.less |  21 ++
 .../base/wallet/mobile/MobileWalletView.vue   |   1 +
 7 files changed, 256 insertions(+), 64 deletions(-)

diff --git a/src/utils/bankBranding.ts b/src/utils/bankBranding.ts
index c4b1b78..4d223a8 100644
--- a/src/utils/bankBranding.ts
+++ b/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) || 'بانک'
 }
diff --git a/src/utils/productAssets.ts b/src/utils/productAssets.ts
index 605a8ca..e617968 100644
--- a/src/utils/productAssets.ts
+++ b/src/utils/productAssets.ts
@@ -524,14 +524,14 @@ export function enrichInventoryCardsWithCatalog<T extends { product_id?: number;
   cards: T[],
   catalog: Product[]
 ): T[] {
-  return cards.map((card) => {
+    return cards.map((card) => {
     const fromCatalog = catalog.find((product) => product.id === card.product_id)
     if (!fromCatalog) {
       return card
     }
 
-    return {
-      ...card,
+        return {
+            ...card,
       file: card.file ?? fromCatalog.file ?? null,
     }
   })
diff --git a/src/views/base/transactions/components/TransactionDetailPanel.vue b/src/views/base/transactions/components/TransactionDetailPanel.vue
index aeecf6d..351fc70 100644
--- a/src/views/base/transactions/components/TransactionDetailPanel.vue
+++ b/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 :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+    <div
+      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__label' : 'text-primary'">
+    <div :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',
+        ]"
+      >
         مقدار {{ tradeProductLabel }} مبادله شده:
       </div>
       <div
@@ -33,8 +46,13 @@
           variant === 'desktop' ? 'dtxn-detail__value' : '',
         ]"
       >
-        <div class="flex items-center">
-          <div class="text-base ml-1">{{ formatGoldAmount(item.gold) }}</div>
+        <div class="flex items-center gap-1">
+          <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>
diff --git a/src/views/base/wallet/components/BoursecuBankAccountPicker.vue b/src/views/base/wallet/components/BoursecuBankAccountPicker.vue
index 9c04c8c..e6b12f7 100644
--- a/src/views/base/wallet/components/BoursecuBankAccountPicker.vue
+++ b/src/views/base/wallet/components/BoursecuBankAccountPicker.vue
@@ -1,56 +1,90 @@
 <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>
+  <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')">
+          + افزودن شبا
+        </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)"
+        class="boursecu-bank-picker__trigger"
+        :disabled="!items.length"
+        @click="toggleOpen"
       >
-        <BoursecuBankAccountOption :card="card" />
+        <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>
+
+      <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__sheet-item"
+              :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<{
-  items: Card[]
-  id?: number | string
-}>()
+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, () => {
-  isOpen.value = false
+if (props.variant === 'mobile') {
+  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 {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  left: 0;
-  z-index: 30;
+.boursecu-bank-picker__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 5200;
+  display: flex;
+  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;
-  padding: 8px;
+  gap: 6px;
+  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;
+
+  &--active,
+  &:hover {
+    background: #eceff1;
+  }
 }
 
-.boursecu-bank-picker__option--active,
-.boursecu-bank-picker__option: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>
diff --git a/src/views/base/wallet/desktop/DesktopWalletView.vue b/src/views/base/wallet/desktop/DesktopWalletView.vue
index 1a74021..2ee6eaa 100644
--- a/src/views/base/wallet/desktop/DesktopWalletView.vue
+++ b/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"
             />
diff --git a/src/views/base/wallet/desktop/styles/desktop-wallet.less b/src/views/base/wallet/desktop/styles/desktop-wallet.less
index a19ae73..881ba23 100644
--- a/src/views/base/wallet/desktop/styles/desktop-wallet.less
+++ b/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;
diff --git a/src/views/base/wallet/mobile/MobileWalletView.vue b/src/views/base/wallet/mobile/MobileWalletView.vue
index 88cf978..c26e261 100644
--- a/src/views/base/wallet/mobile/MobileWalletView.vue
+++ b/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"