added charge for all products

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;
 }

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')

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 {