fix wallet ui

src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue

@@ -50,30 +50,7 @@
         </BaseButton>
       </div>
 
-      <div class="space-y-2">
-        <MobileStatCard
-          v-for="entry in metalBalanceEntries(row)"
-          :key="entry.metal_id"
-          bordered
-          variant="success"
-          :label="customerWalletMetalBalanceTitle(entry.metal_id, entry.label)"
-          :value="entry.value"
-        >
-          <template #prefix>
-            <BaseIcon icon="vuesax-linear:coin" size="18" color="#15803d" />
-          </template>
-        </MobileStatCard>
-        <MobileStatCard
-          bordered
-          variant="success"
-          label="موجودی ریالی"
-          :value="usePrice(cashBalance(row), true, '')"
-        >
-          <template #prefix>
-            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
-          </template>
-        </MobileStatCard>
-      </div>
+      <CustomerWalletBalancePanel :customer-id="row?.id" />
 
       <MobileInfoGrid>
         <MobileDetailRow label="وضعیت کاربر" full-width :value-class="row.active ? 'text-green-700' : 'text-red-600'">
@@ -101,20 +78,15 @@ import { Modal } from 'ant-design-vue'
 import type { Customer } from '@/model/customer'
 import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
 import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
-import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
 import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
 import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
-import { getCashBalance } from '@/components/mobile/utils/wallet'
+import CustomerWalletBalancePanel from '@/components/customer/CustomerWalletBalancePanel.vue'
 import { toJalali } from '@core/utils/useDataTime'
-import { usePrice } from '@core/utils/usePrice'
-import { customerWalletMetalBalanceTitle, metalLabel } from '@/utils/adminMetalLabels'
-import type { CustomerMetalColumn } from '../hooks/customerColumns'
-import { formatMetalDisplayValue, metalCellValue, metalDisplayUnit } from '@/utils/metalWeight'
+import { metalLabel } from '@/utils/adminMetalLabels'
 
 const props = defineProps<{
   visible: boolean
   item: Customer | null
-  metals?: CustomerMetalColumn[]
 }>()
 
 const emit = defineEmits<{
@@ -163,30 +135,6 @@ function confirmToggleTrade(row: Customer) {
   })
 }
 
-function cashBalance(row: Customer) {
-  return getCashBalance(row.wallet)
-}
-
-function metalBalanceEntries(row: Customer) {
-  const metals = props.metals?.length
-    ? props.metals
-    : [{ metal_id: 1, label: 'طلا' }]
-
-  return metals
-    .map((metal) => {
-      const value = metalCellValue(row as Record<string, unknown>, metal.metal_id, 'wallet_metal_gold')
-      return {
-        metal_id: metal.metal_id,
-        label: metal.label,
-        value: formatMetalDisplayValue(value, metal.metal_id)
-      }
-    })
-    .filter((entry) => {
-      const numeric = metalCellValue(row as Record<string, unknown>, entry.metal_id, 'wallet_metal_gold')
-      return numeric !== 0
-    })
-}
-
 function lastSeen(row: Customer) {
   return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
 }