From 703909825312cfb1e06f2d5ab59ee04e13623853 Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Sat, 11 Jul 2026 17:59:30 +0330
Subject: [PATCH] added charge for all products

---
 .../customer/CustomerWalletBalancePanel.vue   | 269 +++++++++++++++++-
 src/model/wallet.ts                           |   1 +
 .../base/components/WalletChargeForm.vue      |  24 +-
 .../base/components/WalletChargeModal.vue     |   3 +-
 .../base/components/WalletChargeModalBody.vue |  20 +-
 5 files changed, 294 insertions(+), 23 deletions(-)

diff --git a/src/components/customer/CustomerWalletBalancePanel.vue b/src/components/customer/CustomerWalletBalancePanel.vue
index 550885d..f2c44e0 100644
--- a/src/components/customer/CustomerWalletBalancePanel.vue
+++ b/src/components/customer/CustomerWalletBalancePanel.vue
@@ -1,13 +1,57 @@
 <template>
-  <div class="customer-wallet-balance space-y-3">
-    <div v-if="loading" class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-6 text-center text-sm text-gray-500">
+  <div class="customer-wallet-balance" :class="compact ? 'space-y-1.5' : 'space-y-3'">
+    <div
+      v-if="loading"
+      class="rounded-xl border border-gray-200 bg-gray-50 text-center text-sm text-gray-500"
+      :class="compact ? 'px-3 py-3' : 'px-4 py-6'"
+    >
       در حال بارگذاری موجودی…
     </div>
 
-    <div v-else-if="error" class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+    <div
+      v-else-if="error"
+      class="rounded-xl border border-red-200 bg-red-50 text-sm text-red-700"
+      :class="compact ? 'px-3 py-2' : 'px-4 py-3'"
+    >
       {{ error }}
     </div>
 
+    <div v-else-if="summary && compact" class="customer-wallet-balance__minimal">
+      <template v-if="chargeTargets.length">
+        <button
+          v-for="target in chargeTargets"
+          :key="target.key"
+          type="button"
+          class="customer-wallet-balance__minimal-item"
+          :class="[
+            targetToneClass(target),
+            { 'customer-wallet-balance__minimal-item--inactive': target.active === false },
+            { 'customer-wallet-balance__minimal-item--selected': target.key === selectedChargeKey },
+          ]"
+          :title="target.label"
+          @click="emit('selectChargeTarget', target.key)"
+        >
+          <span class="customer-wallet-balance__minimal-label">{{ minimalTargetLabel(target) }}</span>
+          <span class="customer-wallet-balance__minimal-value">{{ balanceForTarget(target) }}</span>
+        </button>
+      </template>
+      <template v-else>
+        <div
+          v-for="metal in summary.metal_totals"
+          :key="metal.metal_id"
+          class="customer-wallet-balance__minimal-item"
+          :class="minimalMetalToneClass(metal)"
+        >
+          <span class="customer-wallet-balance__minimal-label">{{ minimalMetalLabel(metal) }}</span>
+          <span class="customer-wallet-balance__minimal-value">{{ formatMetalTotal(metal) }}</span>
+        </div>
+        <div class="customer-wallet-balance__minimal-item customer-wallet-balance__minimal-item--cash">
+          <span class="customer-wallet-balance__minimal-label">نقدی</span>
+          <span class="customer-wallet-balance__minimal-value">{{ usePrice(summary.cash_wallet ?? 0, true, '') }}</span>
+        </div>
+      </template>
+    </div>
+
     <template v-else-if="summary">
       <div
         v-for="metal in summary.metal_totals"
@@ -68,14 +112,101 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { getCustomerAssetsSummary } from '@/api/customer'
+import type { ChargeTarget } from '@/model/wallet'
 import type { WalletAssetsSummary, WalletInventoryCard, WalletMetalTotal } from '@/model/walletAssets'
 import { usePrice } from '@core/utils/usePrice'
 import { formatMetalDisplayValue } from '@/utils/metalWeight'
 
-const props = defineProps<{
-  customerId?: number | null
+const props = withDefaults(
+  defineProps<{
+    customerId?: number | null
+    /** نمایش مینیمال برای مودال‌ها */
+    compact?: boolean
+    /** گزینه‌های شارژ — برای نمایش موجودی هر محصول */
+    chargeTargets?: ChargeTarget[]
+    selectedChargeKey?: string
+  }>(),
+  {
+    compact: false,
+    chargeTargets: () => [],
+    selectedChargeKey: '',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'selectChargeTarget', key: string): void
 }>()
 
+function minimalMetalLabel(metal: WalletMetalTotal) {
+  switch (Number(metal.metal_id)) {
+    case 1:
+      return 'طلا'
+    case 2:
+      return 'نقره'
+    case 3:
+      return 'مس'
+    default: {
+      const raw = (metal.metal_label || metal.label || '').trim()
+      return raw.replace(/^کل\s*دارایی\s*/u, '') || raw || 'فلز'
+    }
+  }
+}
+
+function minimalMetalToneClass(metal: WalletMetalTotal) {
+  switch (Number(metal.metal_id)) {
+    case 1:
+      return 'customer-wallet-balance__minimal-item--gold'
+    case 2:
+      return 'customer-wallet-balance__minimal-item--silver'
+    case 3:
+      return 'customer-wallet-balance__minimal-item--copper'
+    default:
+      return ''
+  }
+}
+
+function minimalTargetLabel(target: ChargeTarget) {
+  if (target.kind === 'money') return 'نقدی'
+  const label = target.label.replace(/\s*\(کیف اصلی\)\s*$/u, '').trim()
+  if (label.length <= 14) return label
+  return `${label.slice(0, 13)}…`
+}
+
+function targetToneClass(target: ChargeTarget) {
+  if (target.kind === 'money') return 'customer-wallet-balance__minimal-item--cash'
+  switch (Number(target.metal_id)) {
+    case 1:
+      return 'customer-wallet-balance__minimal-item--gold'
+    case 2:
+      return 'customer-wallet-balance__minimal-item--silver'
+    case 3:
+      return 'customer-wallet-balance__minimal-item--copper'
+    default:
+      return 'customer-wallet-balance__minimal-item--product'
+  }
+}
+
+function inventoryCards() {
+  if (!summary.value) return [] as WalletInventoryCard[]
+  return [...(summary.value.inventory_cards ?? []), ...(summary.value.count_products ?? [])]
+}
+
+function balanceForTarget(target: ChargeTarget) {
+  if (!summary.value) return '—'
+  if (target.kind === 'money') {
+    return usePrice(summary.value.cash_wallet ?? 0, true, '')
+  }
+
+  const card = inventoryCards().find((row) => Number(row.product_id) === Number(target.product_id))
+  if (card) return formatCard(card)
+
+  const unit = target.unit || (target.trade_by_quantity ? 'عدد' : 'گرم')
+  if (target.trade_by_quantity) {
+    return `۰ ${unit}`
+  }
+  return formatMetalDisplayValue(0, target.metal_id ?? 1)
+}
+
 const loading = ref(false)
 const error = ref<string | null>(null)
 const summary = ref<WalletAssetsSummary | null>(null)
@@ -154,3 +285,131 @@ function linesForMetal(metalId: number) {
 
 defineExpose({ reload: () => props.customerId && load(props.customerId) })
 </script>
+
+<style scoped>
+.customer-wallet-balance__minimal {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
+  gap: 0.35rem;
+  padding: 0.45rem;
+  border-radius: 0.6rem;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  max-height: 14rem;
+  overflow-y: auto;
+}
+
+.customer-wallet-balance__minimal-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+  min-width: 0;
+  padding: 0.35rem 0.25rem;
+  border-radius: 0.45rem;
+  background: #fff;
+  text-align: center;
+  border: 1px solid transparent;
+  cursor: default;
+}
+
+button.customer-wallet-balance__minimal-item {
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+button.customer-wallet-balance__minimal-item:hover {
+  transform: translateY(-1px);
+}
+
+.customer-wallet-balance__minimal-item--selected {
+  box-shadow: 0 0 0 2px #2563eb;
+}
+
+.customer-wallet-balance__minimal-item--inactive {
+  opacity: 0.72;
+}
+
+.customer-wallet-balance__minimal-item--gold {
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.customer-wallet-balance__minimal-item--silver {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.customer-wallet-balance__minimal-item--copper {
+  background: #fff7ed;
+  border-color: #fdba74;
+}
+
+.customer-wallet-balance__minimal-item--cash {
+  background: #eff6ff;
+  border-color: #93c5fd;
+}
+
+.customer-wallet-balance__minimal-item--product {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+.customer-wallet-balance__minimal-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: #64748b;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.customer-wallet-balance__minimal-value {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #0f172a;
+  white-space: nowrap;
+}
+
+.customer-wallet-balance__minimal-item--gold .customer-wallet-balance__minimal-label {
+  color: #92400e;
+}
+
+.customer-wallet-balance__minimal-item--gold .customer-wallet-balance__minimal-value {
+  color: #b45309;
+}
+
+.customer-wallet-balance__minimal-item--silver .customer-wallet-balance__minimal-label {
+  color: #64748b;
+}
+
+.customer-wallet-balance__minimal-item--silver .customer-wallet-balance__minimal-value {
+  color: #334155;
+}
+
+.customer-wallet-balance__minimal-item--copper .customer-wallet-balance__minimal-label {
+  color: #c2410c;
+}
+
+.customer-wallet-balance__minimal-item--copper .customer-wallet-balance__minimal-value {
+  color: #9a3412;
+}
+
+.customer-wallet-balance__minimal-item--cash .customer-wallet-balance__minimal-label {
+  color: #0369a1;
+}
+
+.customer-wallet-balance__minimal-item--cash .customer-wallet-balance__minimal-value {
+  color: #0284c7;
+}
+
+.customer-wallet-balance__minimal-item--product .customer-wallet-balance__minimal-label {
+  color: #475569;
+}
+
+.customer-wallet-balance__minimal-item--product .customer-wallet-balance__minimal-value {
+  color: #1e293b;
+}
+</style>
diff --git a/src/model/wallet.ts b/src/model/wallet.ts
index 7fe283c..c57780a 100644
--- a/src/model/wallet.ts
+++ b/src/model/wallet.ts
@@ -116,6 +116,7 @@ export interface ChargeTarget {
   uses_main_wallet?: boolean
   trade_by_quantity?: boolean
   group_type?: string
+  active?: boolean
 }
 
 export interface ChargeTargetsResponse {
diff --git a/src/pages/menuPages/customers/base/components/WalletChargeForm.vue b/src/pages/menuPages/customers/base/components/WalletChargeForm.vue
index 009c231..f25fc71 100644
--- a/src/pages/menuPages/customers/base/components/WalletChargeForm.vue
+++ b/src/pages/menuPages/customers/base/components/WalletChargeForm.vue
@@ -134,11 +134,15 @@ defineExpose({
 </script>
 
 <style scoped>
+.wallet-charge-form :deep(.ant-form-item) {
+  margin-bottom: 0.65rem;
+}
+
 .wallet-charge-form__direction :deep(.ant-radio-button-wrapper) {
   width: 50%;
   text-align: center;
-  height: 2.75rem;
-  line-height: 2.65rem;
+  height: 2.35rem;
+  line-height: 2.25rem;
   font-weight: 700;
 }
 
@@ -152,12 +156,12 @@ defineExpose({
 .wallet-charge-form__preview {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-  padding: 0.85rem 1rem;
-  border-radius: 0.75rem;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.6rem;
   border: 1px solid transparent;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
   font-weight: 600;
 }
 
@@ -165,10 +169,10 @@ defineExpose({
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.45rem;
+  height: 1.45rem;
   border-radius: 9999px;
-  font-size: 1.15rem;
+  font-size: 1rem;
   font-weight: 800;
   flex-shrink: 0;
 }
diff --git a/src/pages/menuPages/customers/base/components/WalletChargeModal.vue b/src/pages/menuPages/customers/base/components/WalletChargeModal.vue
index ad2725d..9185f38 100644
--- a/src/pages/menuPages/customers/base/components/WalletChargeModal.vue
+++ b/src/pages/menuPages/customers/base/components/WalletChargeModal.vue
@@ -153,12 +153,11 @@ async function submit() {
   }
 
   const target = selectedTarget.value
-  const productId = target?.kind === 'metal' ? target.product_id : undefined
 
   submitting.value = true
   try {
     await chargeWalletUnified({
-      ...buildChargePayload({ ...formCharge.value, customer_id: customerId }, productId),
+      ...buildChargePayload({ ...formCharge.value, customer_id: customerId }, target?.product_id ?? null),
     })
     message.success(walletChargeSuccessMessage(formCharge.value.direction))
     emit('success')
diff --git a/src/pages/menuPages/customers/base/components/WalletChargeModalBody.vue b/src/pages/menuPages/customers/base/components/WalletChargeModalBody.vue
index ac3dbaf..393a321 100644
--- a/src/pages/menuPages/customers/base/components/WalletChargeModalBody.vue
+++ b/src/pages/menuPages/customers/base/components/WalletChargeModalBody.vue
@@ -8,7 +8,7 @@
         allow-clear
         placeholder="انتخاب کنید"
         class="w-full"
-        size="large"
+        size="middle"
         :options="customerOptions"
         :loading="customersLoading"
         :filter-option="filterCustomer"
@@ -16,9 +16,12 @@
     </div>
 
     <CustomerWalletBalancePanel
-      v-if="resolvedCustomerId"
+      v-if="resolvedCustomerId && !targetsLoading"
       :customer-id="resolvedCustomerId"
-      class="mb-3"
+      :charge-targets="targets"
+      :selected-charge-key="selectedTargetKey"
+      compact
+      @select-charge-target="selectedTargetKeyProxy = $event"
     />
 
     <div class="wallet-charge-modal-body__section">
@@ -26,10 +29,11 @@
       <a-spin :spinning="targetsLoading">
         <a-select
           v-model:value="selectedTargetKeyProxy"
+          show-search
           class="w-full"
-          size="large"
           :options="targetOptions"
           placeholder="انتخاب کنید"
+          :filter-option="filterTarget"
         />
       </a-spin>
     </div>
@@ -110,6 +114,10 @@ function filterCustomer(input: string, option?: { label?: string }) {
   return String(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
 }
 
+function filterTarget(input: string, option?: { label?: string }) {
+  return String(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+}
+
 async function loadCustomers() {
   if (!props.showCustomerSelect) return
   customersLoading.value = true
@@ -139,8 +147,8 @@ defineExpose({
 .wallet-charge-modal-body {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding: 0.25rem 1rem 0.5rem;
+  gap: 0.5rem;
+  padding: 0 0.75rem 0.25rem;
 }
 
 .wallet-charge-modal-body__section {