From ec3440d4b371fa9cb7ac119d0f1e648ecd14669f Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Thu, 4 Jun 2026 22:29:28 +0330
Subject: [PATCH] handle mobile user

---
 src/components/BasicActionSheet.vue           |  30 +++-
 src/components/mobile/MobileDetailSheet.vue   |   3 +-
 src/components/mobile/MobileIconButton.vue    |   3 +-
 src/components/mobile/MobileSheetHeader.vue   |  18 ++-
 .../components/CustomerMobileCardList.vue     |  28 ++--
 .../components/CustomerMobileDetailSheet.vue  | 133 +++++++++++++-----
 .../components/CustomerMobileListItem.vue     |  63 ++++++---
 .../customers/base/components/table.vue       |  10 +-
 src/pages/menuPages/customers/base/index.vue  |  72 +++++++++-
 9 files changed, 285 insertions(+), 75 deletions(-)

diff --git a/src/components/BasicActionSheet.vue b/src/components/BasicActionSheet.vue
index a73e2a9..17719e9 100644
--- a/src/components/BasicActionSheet.vue
+++ b/src/components/BasicActionSheet.vue
@@ -50,9 +50,9 @@
     :closable="false"
     :destroy-on-close="true"
     :height="drawerHeight"
-    class="basic-action-sheet"
+    :class="['basic-action-sheet', { 'basic-action-sheet--compact': compact }]"
   >
-    <div class="basic-action-sheet__container">
+    <div class="basic-action-sheet__container" :class="{ 'basic-action-sheet__container--compact': compact }">
       <div class="flex cursor-pointer justify-center pt-2" @click="visibleProxy = false">
         <span class="w-12 rounded-sm border-t-2 border-t-solid border-t-gray-500"></span>
       </div>
@@ -103,6 +103,8 @@ interface Props {
   modalWidth?: string
   loading?: boolean
   drawerHeight?: string
+  /** When true, drawer height follows content (no empty flex gap). */
+  compact?: boolean
   cancelText?: string
   showButton?: boolean
   showCancel?: boolean
@@ -116,6 +118,7 @@ const props = withDefaults(defineProps<Props>(), {
   modalWidth: '36rem',
   loading: false,
   drawerHeight: ACTION_SHEET_HEIGHT,
+  compact: false,
   cancelText: 'بازگشت',
   showButton: false,
   showCancel: true,
@@ -175,6 +178,29 @@ function handleCancel() {
   padding: 0 16px 12px;
 }
 
+.basic-action-sheet--compact {
+  .ant-drawer-content-wrapper {
+    height: auto !important;
+    max-height: 88vh;
+  }
+
+  .ant-drawer-content {
+    height: auto !important;
+    max-height: 88vh;
+  }
+}
+
+.basic-action-sheet__container--compact {
+  height: auto;
+  min-height: 0;
+  max-height: 88vh;
+}
+
+.basic-action-sheet__container--compact .basic-action-sheet__content {
+  flex: 0 1 auto;
+  max-height: calc(88vh - 40px);
+}
+
 .basic-action-sheet__footer {
   position: sticky;
   bottom: 0;
diff --git a/src/components/mobile/MobileDetailSheet.vue b/src/components/mobile/MobileDetailSheet.vue
index acb78d9..4a0f8a5 100644
--- a/src/components/mobile/MobileDetailSheet.vue
+++ b/src/components/mobile/MobileDetailSheet.vue
@@ -1,8 +1,9 @@
 <template>
   <BasicActionSheet
     v-model:visible="visibleModel"
-    :title="title"
+    :title="''"
     :showButton="false"
+    :compact="true"
     :drawerHeight="drawerHeight"
   >
     <div v-if="item" class="space-y-3 pb-2">
diff --git a/src/components/mobile/MobileIconButton.vue b/src/components/mobile/MobileIconButton.vue
index c58ceb7..ca801af 100644
--- a/src/components/mobile/MobileIconButton.vue
+++ b/src/components/mobile/MobileIconButton.vue
@@ -5,8 +5,9 @@
     :class="
       plain
         ? 'h-auto w-auto border-none bg-transparent p-0'
-        : 'h-9 w-9 rounded-full border-none bg-white active:bg-gray-50'
+        : 'h-10 min-h-[40px] w-10 min-w-[40px] rounded-full border-none bg-white active:bg-gray-50'
     "
+    style="touch-action: manipulation"
     @click.stop="$emit('click')"
   >
     <BaseIcon :icon="icon" :size="size" :color="color" />
diff --git a/src/components/mobile/MobileSheetHeader.vue b/src/components/mobile/MobileSheetHeader.vue
index a1459d2..df23faa 100644
--- a/src/components/mobile/MobileSheetHeader.vue
+++ b/src/components/mobile/MobileSheetHeader.vue
@@ -1,11 +1,19 @@
 <template>
   <div class="space-y-3">
-    <div class="min-w-0 space-y-1">
-      <div v-if="showTitle" class="text-lg font-700 text-gray-900">
-        <slot name="title">{{ title }}</slot>
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0 flex-1 space-y-1">
+        <div v-if="showTitle" class="text-lg font-700 text-gray-900">
+          <slot name="title">{{ title }}</slot>
+        </div>
+        <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
+          <slot name="subtitle">{{ subtitle }}</slot>
+        </div>
       </div>
-      <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
-        <slot name="subtitle">{{ subtitle }}</slot>
+      <div
+        v-if="$slots.actions"
+        class="flex shrink-0 flex-wrap items-center justify-end gap-1"
+      >
+        <slot name="actions" />
       </div>
     </div>
   </div>
diff --git a/src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue b/src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue
index 4e5b897..5e2ae2a 100644
--- a/src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue
+++ b/src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue
@@ -21,13 +21,14 @@
   <CustomerMobileDetailSheet
     v-model:visible="sheetVisible"
     :item="selectedItem"
-    @info="$emit('info', $event)"
-    @archive="$emit('archive', $event)"
-    @toggleActive="$emit('toggleActive', $event)"
-    @chargeMoney="$emit('chargeMoney', $event)"
-    @chargeGold="$emit('chargeGold', $event)"
-    @toggleTrade="$emit('toggleTrade', $event)"
-    @confirmUser="$emit('confirmUser', $event)"
+    @info="forwardAndClose('info', $event)"
+    @edit="forwardAndClose('edit', $event)"
+    @archive="forwardAndClose('archive', $event)"
+    @toggleActive="forward('toggleActive', $event)"
+    @chargeMoney="forwardAndClose('chargeMoney', $event)"
+    @chargeGold="forwardAndClose('chargeGold', $event)"
+    @toggleTrade="forward('toggleTrade', $event)"
+    @confirmUser="forwardAndClose('confirmUser', $event)"
   />
 </template>
 
@@ -40,7 +41,7 @@ import { useMobileTableList } from '@/components/mobile/composables/useMobileTab
 import CustomerMobileListItem from './CustomerMobileListItem.vue'
 import CustomerMobileDetailSheet from './CustomerMobileDetailSheet.vue'
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'info', item: Customer): void
   (e: 'edit', item: Customer): void
   (e: 'archive', item: Customer): void
@@ -53,6 +54,17 @@ defineEmits<{
 
 const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Customer>()
 
+type SheetAction = 'info' | 'edit' | 'archive' | 'toggleActive' | 'chargeMoney' | 'chargeGold' | 'toggleTrade' | 'confirmUser'
+
+function forward(action: SheetAction, item: Customer) {
+  emit(action, item)
+}
+
+function forwardAndClose(action: SheetAction, item: Customer) {
+  sheetVisible.value = false
+  emit(action, item)
+}
+
 const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Customer>({
   fetchApi: getCustomerTable,
   onFetched: (rows) => syncSelectedItem(rows)
diff --git a/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue b/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue
index a5b4d93..c407ff0 100644
--- a/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue
+++ b/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue
@@ -1,35 +1,84 @@
 <template>
-  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" title="">
     <template #default="{ item: row }">
-      <MobileSheetHeader :title="row.name || '-'" :show-title="isMobile">
-        <template #actions>
-          <MobileIconButton plain icon="vuesax-linear:archive-tick" color="#e3bf00" :size="22" @click="$emit('archive', row)" />
-          <MobileIconButton
-            plain
-            :icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
-            :color="row.active ? '#54AD06' : '#ad0627'"
-            :size="22"
-            @click="$emit('toggleActive', row)"
-          />
-          <MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="$emit('chargeMoney', row)" />
-          <MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="$emit('chargeGold', row)" />
-          <MobileIconButton
-            plain
-            :icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
-            :color="row.trade_active ? '#54AD06' : '#ad0627'"
-            :size="22"
-            @click="$emit('toggleTrade', row)"
-          />
-          <MobileIconButton
-            v-if="!(row as any).is_legal"
-            plain
-            icon="vuesax-linear:user-search"
-            color="#0d9488"
-            :size="22"
-            @click="$emit('confirmUser', row)"
-          />
-        </template>
-      </MobileSheetHeader>
+      <h2 class="text-base font-700 leading-relaxed text-gray-900">{{ row.name || '-' }}</h2>
+      <p v-if="row.mobile" class="text-sm text-gray-500" dir="ltr">{{ row.mobile }}</p>
+
+      <div class="customer-sheet-actions grid grid-cols-2 gap-2">
+        <BaseButton
+          class="customer-sheet-btn w-full"
+          size="middle"
+          type="primary"
+          icon="vuesax-linear:wallet-add"
+          @click="$emit('chargeMoney', row)"
+        >
+          شارژ ریالی
+        </BaseButton>
+        <BaseButton
+          class="customer-sheet-btn w-full"
+          size="middle"
+          type="primary"
+          icon="vuesax-linear:wallet-money"
+          @click="$emit('chargeGold', row)"
+        >
+          شارژ طلایی
+        </BaseButton>
+        <BaseButton
+          v-if="!row.is_legal"
+          class="customer-sheet-btn w-full"
+          size="middle"
+          type="default"
+          icon="vuesax-linear:user-search"
+          @click="$emit('confirmUser', row)"
+        >
+          تایید کاربر
+        </BaseButton>
+        <BaseButton
+          class="customer-sheet-btn w-full"
+          size="middle"
+          type="default"
+          icon="vuesax-linear:stickynote"
+          @click="$emit('info', row)"
+        >
+          مشخصات کامل
+        </BaseButton>
+        <BaseButton
+          class="customer-sheet-btn w-full"
+          size="middle"
+          type="default"
+          icon="vuesax-linear:edit"
+          @click="$emit('edit', row)"
+        >
+          ویرایش
+        </BaseButton>
+        <BaseButton
+          class="customer-sheet-btn w-full"
+          size="middle"
+          type="default"
+          icon="vuesax-linear:archive-tick"
+          @click="$emit('archive', row)"
+        >
+          بایگانی
+        </BaseButton>
+        <BaseButton
+          class="customer-sheet-btn w-full"
+          size="middle"
+          :type="row.active ? 'default' : 'primary'"
+          :icon="row.active ? 'vuesax-linear:user-remove' : 'vuesax-linear:user-tick'"
+          @click="$emit('toggleActive', row)"
+        >
+          {{ row.active ? 'غیرفعال کردن' : 'فعال کردن' }}
+        </BaseButton>
+        <BaseButton
+          class="customer-sheet-btn w-full"
+          size="middle"
+          :type="row.trade_active === 1 ? 'default' : 'primary'"
+          :icon="row.trade_active === 1 ? 'vuesax-linear:box-remove' : 'vuesax-linear:box-tick'"
+          @click="$emit('toggleTrade', row)"
+        >
+          {{ row.trade_active === 1 ? 'ممنوعیت سفارش' : 'مجاز کردن سفارش' }}
+        </BaseButton>
+      </div>
 
       <div class="space-y-2">
         <MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
@@ -56,9 +105,9 @@
         <MobileDetailRow
           label="وضعیت سفارش دهی"
           full-width
-          :value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
+          :value-class="row.trade_active === 1 ? 'text-green-700' : 'text-red-600'"
         >
-          {{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
+          {{ row.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
         </MobileDetailRow>
         <MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
         <MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
@@ -76,11 +125,8 @@ import type { Customer } from '@/model/customer'
 import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
 import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
 import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
-import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
 import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
-import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
 import { getCashBalance, getGoldBalance } from '@/components/mobile/utils/wallet'
-import { isMobile } from '@core/utils/is'
 import { toJalali } from '@core/utils/useDataTime'
 import { usePrice } from '@core/utils/usePrice'
 
@@ -92,6 +138,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'update:visible', value: boolean): void
   (e: 'info', item: Customer): void
+  (e: 'edit', item: Customer): void
   (e: 'archive', item: Customer): void
   (e: 'toggleActive', item: Customer): void
   (e: 'chargeMoney', item: Customer): void
@@ -117,3 +164,19 @@ function lastSeen(row: Customer) {
   return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
 }
 </script>
+
+<style scoped lang="less">
+.customer-sheet-actions {
+  :deep(.customer-sheet-btn.ant-btn) {
+    display: inline-flex;
+    width: 100%;
+    justify-content: right;
+    text-align: right;
+  }
+
+  :deep(.customer-sheet-btn.ant-btn > div) {
+    width: 100%;
+    justify-content: right !important;
+  }
+}
+</style>
diff --git a/src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue b/src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue
index 08f85e8..355a9ce 100644
--- a/src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue
+++ b/src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue
@@ -1,25 +1,55 @@
 <template>
   <MobileCard clickable @click="$emit('open', item)">
-    <div class="flex items-center gap-3">
-      <div class="flex min-w-0 flex-1 items-center gap-2">
+    <div class="flex items-start gap-3">
+      <div
+        class="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100"
+      >
         <BaseIcon icon="vuesax-linear:user" size="20" color="#6b7280" />
-        <button
-          type="button"
-          class="truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900 cursor-pointer"
-          @click.stop="$emit('info', item)"
-        >
-          {{ item.name || '-' }}
-        </button>
       </div>
 
-      <div class="shrink-0 text-sm text-gray-600">{{ item.mobile || '-' }}</div>
+      <div class="min-w-0 flex-1 space-y-1.5">
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="min-w-0 flex-1 truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900"
+            @click.stop="$emit('info', item)"
+          >
+            {{ item.name || '-' }}
+          </button>
+          <span
+            class="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+            :class="item.active ? 'bg-green-500' : 'bg-red-500'"
+            :title="item.active ? 'فعال' : 'غیرفعال'"
+          />
+        </div>
 
-      <div class="flex shrink-0 items-center gap-2">
-        <span class="whitespace-nowrap rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass">
-          {{ item.type_str || 'کاربر' }}
-        </span>
-        <MobileIconButton icon="vuesax-linear:edit" color="#4572E9" :size="20" @click="$emit('edit', item)" />
-        <span class="inline-block h-2.5 w-2.5 rounded-full" :class="item.active ? 'bg-green-500' : 'bg-red-500'" />
+        <div class="flex flex-wrap items-center gap-2 text-xs text-gray-600">
+          <span dir="ltr" class="font-mono">{{ item.mobile || '-' }}</span>
+          <span class="whitespace-nowrap rounded-lg border px-2 py-0.5 font-600" :class="typeTagClass">
+            {{ item.type_str || 'کاربر' }}
+          </span>
+        </div>
+      </div>
+
+      <div class="flex shrink-0 flex-col items-stretch gap-1">
+        <BaseButton
+          type="primary"
+          size="small"
+          class="w-full min-w-[4.5rem]"
+          icon="vuesax-linear:setting-4"
+          @click.stop="$emit('open', item)"
+        >
+          عملیات
+        </BaseButton>
+        <BaseButton
+          type="default"
+          size="small"
+          class="w-full min-w-[4.5rem]"
+          icon="vuesax-linear:edit"
+          @click.stop="$emit('edit', item)"
+        >
+          ویرایش
+        </BaseButton>
       </div>
     </div>
   </MobileCard>
@@ -28,7 +58,6 @@
 <script setup lang="ts">
 import type { Customer } from '@/model/customer'
 import MobileCard from '@/components/mobile/MobileCard.vue'
-import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
 
 const props = defineProps<{
   item: Customer
diff --git a/src/pages/menuPages/customers/base/components/table.vue b/src/pages/menuPages/customers/base/components/table.vue
index 1541f5b..a4d39ff 100644
--- a/src/pages/menuPages/customers/base/components/table.vue
+++ b/src/pages/menuPages/customers/base/components/table.vue
@@ -105,7 +105,8 @@
 
       <BasicModal
         v-model:visible="confirmVisible"
-        width="50vw"
+        :width="isMobile ? '92vw' : '50vw'"
+        wrap-class-name="customer-stack-modal"
         title="تایید مشتری"
         @ok="confirmUserFunction"
         ok-text="تایید"
@@ -192,6 +193,7 @@ function handleArchive(customer: Customer) {
     okText: 'تایید',
     cancelText: 'رد',
     centered: true,
+    zIndex: 1100,
     onOk: () => archiveFunction(customer.id)
   })
 }
@@ -242,3 +244,9 @@ async function changeCustomerOrderActivationFunction(id: number) {
   z-index: 1001 !important;
 }
 </style>
+
+<style>
+.customer-stack-modal {
+  z-index: 1100 !important;
+}
+</style>
diff --git a/src/pages/menuPages/customers/base/index.vue b/src/pages/menuPages/customers/base/index.vue
index cdac4fa..2f91b0d 100644
--- a/src/pages/menuPages/customers/base/index.vue
+++ b/src/pages/menuPages/customers/base/index.vue
@@ -215,10 +215,41 @@
         </a-tab-pane>
       </a-tabs>
     </BasicActionSheet>
+    <BasicActionSheet
+      v-if="isMobile"
+      v-model:visible="showMoneyWalletCharge"
+      title="شارژ کیف پول ریالی"
+      modal-width="24rem"
+      :loading="loading"
+      :show-button="true"
+      :show-cancel="true"
+      :show-ok="true"
+      ok-text="ثبت"
+      cancel-text="انصراف"
+      @ok="chargeMoneyWallet"
+      @close="showMoneyWalletCharge = false"
+    >
+      <a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
+        <a-form-item name="talabBedehi">
+          <a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
+        </a-form-item>
+        <a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
+          <BasicInput addon-before="ریال" v-model:value="formCharge.value" type="price" />
+          <div v-show="formCharge.value > 10">
+            معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
+          </div>
+        </a-form-item>
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
+          <BasicInput v-model:value="formCharge.note" />
+        </a-form-item>
+      </a-form>
+    </BasicActionSheet>
     <BasicModal
+      v-else
       v-model:visible="showMoneyWalletCharge"
       width="20rem"
       title="شارژ کیف پول ریالی"
+      wrap-class-name="customer-stack-modal"
       @ok="chargeMoneyWallet"
       :loading="loading"
       @close="showMoneyWalletCharge = false"
@@ -233,16 +264,44 @@
             معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
           </div>
         </a-form-item>
-        <a-form-item label="علت شارژ " name="value" :rules="inputRules()">
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
           <BasicInput v-model:value="formCharge.note" />
         </a-form-item>
       </a-form>
     </BasicModal>
 
+    <BasicActionSheet
+      v-if="isMobile"
+      v-model:visible="showGoldWalletCharge"
+      title="شارژ کیف پول طلایی"
+      modal-width="24rem"
+      :loading="loading"
+      :show-button="true"
+      :show-cancel="true"
+      :show-ok="true"
+      ok-text="ثبت"
+      cancel-text="انصراف"
+      @ok="chargeGoldWallet"
+      @close="showGoldWalletCharge = false"
+    >
+      <a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
+        <a-form-item name="talabBedehi">
+          <a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
+        </a-form-item>
+        <a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
+          <BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
+        </a-form-item>
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
+          <BasicInput v-model:value="formCharge.note" />
+        </a-form-item>
+      </a-form>
+    </BasicActionSheet>
     <BasicModal
+      v-else
       v-model:visible="showGoldWalletCharge"
       width="20rem"
       title="شارژ کیف پول طلایی"
+      wrap-class-name="customer-stack-modal"
       @ok="chargeGoldWallet"
       :loading="loading"
       @close="showGoldWalletCharge = false"
@@ -253,11 +312,8 @@
         </a-form-item>
         <a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
           <BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
-          <!--          <div v-show="formCharge.value > 10">
-            معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
-          </div>-->
         </a-form-item>
-        <a-form-item label="علت شارژ " name="value" :rules="inputRules()">
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
           <BasicInput v-model:value="formCharge.note" />
         </a-form-item>
       </a-form>
@@ -628,3 +684,9 @@ const userStatus = (status: number) => {
   color: #008000 !important;
 }
 </style>
+
+<style>
+.customer-stack-modal {
+  z-index: 1100 !important;
+}
+</style>