changes of boursemes &...

src/views/base/physicalReceive/components/RequestItem.vue

@@ -1,47 +1,45 @@
 <template>
   <div
-    class="rounded-lg shadow-md mx-2 bg-gradient-to-l from-primary rounded-lg p-[2px] to-transparent"
-    :class="{ 'dpr-item': variant === 'desktop' }"
+    class="physical-receive-item"
+    :class="{ 'physical-receive-item--desktop': variant === 'desktop' }"
   >
-    <div class="rounded-lg flex flex-col gap-2 bg-white p-2">
-      <div class="flex justify-between">
-        <div class="font-bold">شماره سند: {{ props.item.id }}</div>
-        <div class="font-bold">{{ toJalali(props.item.created_at) }}</div>
-      </div>
-      <div class="flex justify-between">
-        <div class="flex flex-col w-full gap-1">
-          <div
-            v-for="tx in props.item.transaction"
-            :key="tx.id ?? tx.title"
-            class="w-full flex justify-between"
-          >
-            <div class="flex items-center gap-1">
-              <div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100">
-                <img
-                  width="30"
-                  class="p-1 object-contain"
-                  :src="getProductDisplayImage(tx.product)"
-                  alt=""
-                />
-              </div>
-              <div>{{ tx.title }}</div>
+    <div class="flex justify-between">
+      <div class="font-bold">شماره سند: {{ props.item.id }}</div>
+      <div class="font-bold">{{ toJalali(props.item.created_at) }}</div>
+    </div>
+    <div class="flex justify-between">
+      <div class="flex flex-col w-full gap-1">
+        <div
+          v-for="tx in props.item.transaction"
+          :key="tx.id ?? tx.title"
+          class="w-full flex justify-between"
+        >
+          <div class="flex items-center gap-1">
+            <div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100">
+              <img
+                width="30"
+                class="p-1 object-contain"
+                :src="getProductDisplayImage(tx.product)"
+                alt=""
+              />
             </div>
-            <div>{{ tx.gold * -1 }} عدد</div>
+            <div>{{ tx.title }}</div>
           </div>
+          <div>{{ tx.gold * -1 }} عدد</div>
         </div>
       </div>
-      <div class="flex justify-between">
-        <div class="font-bold">وضعیت:</div>
-        <ATag color="blue" class="!py-1 !px-2 !ml-0">
-          {{ props.item.sts_str }}
-        </ATag>
-      </div>
-      <ADivider class="!m-1" />
-      <div class="flex flex-col justify-between">
-        <div class="font-bold">آدرس:</div>
-        <div>
-          {{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}
-        </div>
+    </div>
+    <div class="flex justify-between">
+      <div class="font-bold">وضعیت:</div>
+      <ATag color="blue" class="!py-1 !px-2 !ml-0">
+        {{ props.item.sts_str }}
+      </ATag>
+    </div>
+    <ADivider class="!m-1" />
+    <div class="flex flex-col justify-between">
+      <div class="font-bold">آدرس:</div>
+      <div>
+        {{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}
       </div>
     </div>
   </div>
@@ -61,3 +59,26 @@ const props = withDefaults(defineProps<Prop>(), {
   variant: 'mobile',
 })
 </script>
+
+<style scoped lang="less">
+.physical-receive-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-inline: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+}
+
+.physical-receive-item--desktop {
+  margin: 0;
+  padding: 16px;
+  border-radius: 16px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+</style>

src/views/base/physicalReceive/desktop/styles/desktop-physical-receive.less

@@ -151,11 +151,6 @@
   }
 }
 
-.dpr-item {
-  margin: 0 !important;
-  border-radius: 16px !important;
-}
-
 .dpr-new {
   &__grid {
     display: grid;

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

@@ -47,11 +47,6 @@
         ]"
       >
         <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>
@@ -133,7 +128,6 @@ import {
   resolveTransactionTradeProduct,
   shouldShowTransactionTotalWeightLine,
 } from '@/utils/productDealMethod'
-import { getProductDisplayImage } from '@/utils/productAssets'
 import { toJalaliNotime, toTime } from '@/utils/useDateTime'
 
 const props = withDefaults(
@@ -148,9 +142,6 @@ 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
@@ -175,12 +166,4 @@ const showMetalWalletBalance = computed(
   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/BoursecuBankAccountOption.vue

@@ -1,10 +1,15 @@
 <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
+      class="boursecu-bank-option__logo"
+      :class="{ 'boursecu-bank-option__logo--image': !!logoUrl }"
+      :style="logoUrl ? undefined : { backgroundColor: accentColor }"
+    >
+      <img v-if="logoUrl" :src="logoUrl" :alt="displayName" />
+      <span v-else>{{ monogram }}</span>
     </div>
     <div class="boursecu-bank-option__content">
-      <div class="boursecu-bank-option__title">{{ card.bank_name || 'بانک' }}</div>
+      <div class="boursecu-bank-option__title">{{ displayName }}</div>
       <div class="boursecu-bank-option__sheba">{{ shebaText }}</div>
     </div>
   </div>
@@ -16,6 +21,8 @@ import type { Card } from '@/models/wallet'
 import {
   formatShebaForDisplay,
   getBankAccentColor,
+  getBankDisplayName,
+  getBankLogoUrl,
   getBankMonogram,
 } from '@/utils/bankBranding'
 
@@ -28,6 +35,8 @@ const props = withDefaults(
 )
 
 const accentColor = computed(() => getBankAccentColor(props.card.bank_name))
+const displayName = computed(() => getBankDisplayName(props.card.bank_name))
+const logoUrl = computed(() => getBankLogoUrl(props.card.bank_name))
 const monogram = computed(() => getBankMonogram(props.card.bank_name))
 const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
 </script>
@@ -55,6 +64,19 @@ const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
   line-height: 1.1;
   text-align: center;
   padding: 4px;
+  overflow: hidden;
+}
+
+.boursecu-bank-option__logo--image {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  padding: 6px;
+}
+
+.boursecu-bank-option__logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .boursecu-bank-option--compact .boursecu-bank-option__logo {

src/views/base/wallet/components/UISlider/index.vue

@@ -3,7 +3,7 @@
     <div ref="el" class="w-full flex flex-col relative h-full test">
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
                 :color="colors[i%3]"
-                :self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2" :id="item?.id"
+                :self-index="i" :shaba="item?.shaba_number" :title="getBankDisplayName(item?.bank_name)" :active="item.sts === 2" :id="item?.id"
                 @cardDeleted="handleCardDeleted"
       />
       <div class="absolute bottom-1 right-0 left-0 z-100 flex justify-center items-center opacity-70 pointer-events-none">
@@ -26,6 +26,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useSwipe } from '@vueuse/core'
 import CardItem from './CardItem.vue'
 import type { Card } from '@/models/wallet'
+import { getBankDisplayName } from '@/utils/bankBranding'
 
 const el = ref(null)
 const container = ref<HTMLElement | null>(null)