revert

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

@@ -21,14 +21,13 @@
   <CustomerMobileDetailSheet
     v-model:visible="sheetVisible"
     :item="selectedItem"
-    @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)"
+    @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)"
   />
 </template>
 
@@ -41,7 +40,7 @@ import { useMobileTableList } from '@/components/mobile/composables/useMobileTab
 import CustomerMobileListItem from './CustomerMobileListItem.vue'
 import CustomerMobileDetailSheet from './CustomerMobileDetailSheet.vue'
 
-const emit = defineEmits<{
+defineEmits<{
   (e: 'info', item: Customer): void
   (e: 'edit', item: Customer): void
   (e: 'archive', item: Customer): void
@@ -54,17 +53,6 @@ const emit = 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)

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

@@ -1,84 +1,35 @@
 <template>
-  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" title="">
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
     <template #default="{ item: row }">
-      <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>
+      <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>
 
       <div class="space-y-2">
         <MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
@@ -105,9 +56,9 @@
         <MobileDetailRow
           label="وضعیت سفارش دهی"
           full-width
-          :value-class="row.trade_active === 1 ? 'text-green-700' : 'text-red-600'"
+          :value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
         >
-          {{ row.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
+          {{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
         </MobileDetailRow>
         <MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
         <MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
@@ -125,8 +76,11 @@ 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'
 
@@ -138,7 +92,6 @@ 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
@@ -164,19 +117,3 @@ 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>

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

@@ -1,55 +1,25 @@
 <template>
   <MobileCard clickable @click="$emit('open', item)">
-    <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"
-      >
+    <div class="flex items-center gap-3">
+      <div class="flex min-w-0 flex-1 items-center gap-2">
         <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="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="shrink-0 text-sm text-gray-600">{{ item.mobile || '-' }}</div>
 
-        <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 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>
     </div>
   </MobileCard>
@@ -58,6 +28,7 @@
 <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

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

@@ -105,8 +105,7 @@
 
       <BasicModal
         v-model:visible="confirmVisible"
-        :width="isMobile ? '92vw' : '50vw'"
-        wrap-class-name="customer-stack-modal"
+        width="50vw"
         title="تایید مشتری"
         @ok="confirmUserFunction"
         ok-text="تایید"
@@ -193,7 +192,6 @@ function handleArchive(customer: Customer) {
     okText: 'تایید',
     cancelText: 'رد',
     centered: true,
-    zIndex: 1100,
     onOk: () => archiveFunction(customer.id)
   })
 }
@@ -244,9 +242,3 @@ async function changeCustomerOrderActivationFunction(id: number) {
   z-index: 1001 !important;
 }
 </style>
-
-<style>
-.customer-stack-modal {
-  z-index: 1100 !important;
-}
-</style>

src/pages/menuPages/customers/base/index.vue

@@ -215,41 +215,10 @@
         </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"
@@ -264,44 +233,16 @@
             معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
           </div>
         </a-form-item>
-        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
+        <a-form-item label="علت شارژ " name="value" :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"
@@ -313,7 +254,7 @@
         <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()">
+        <a-form-item label="علت شارژ " name="value" :rules="inputRules()">
           <BasicInput v-model:value="formCharge.note" />
         </a-form-item>
       </a-form>
@@ -684,9 +625,3 @@ const userStatus = (status: number) => {
   color: #008000 !important;
 }
 </style>
-
-<style>
-.customer-stack-modal {
-  z-index: 1100 !important;
-}
-</style>