handle mobile user

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

@@ -1,36 +1,54 @@
 <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="closeAndEmit('archive', row)" />
-          <MobileIconButton
-            plain
-            :icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
-            :color="row.active ? '#54AD06' : '#ad0627'"
-            :size="22"
-            @click="confirmToggleActive(row)"
-          />
-          <MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="closeAndEmit('chargeMoney', row)" />
-          <MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="closeAndEmit('chargeGold', row)" />
-          <MobileIconButton plain icon="vuesax-linear:stickynote" color="#10913A" :size="22" @click="closeAndEmit('info', row)" />
-          <MobileIconButton
-            plain
-            :icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
-            :color="row.trade_active ? '#54AD06' : '#ad0627'"
-            :size="22"
-            @click="confirmToggleTrade(row)"
-          />
-          <MobileIconButton
-            v-if="!(row as any).is_legal"
-            plain
-            icon="vuesax-linear:user-search"
-            color="#0d9488"
-            :size="22"
-            @click="closeAndEmit('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="grid grid-cols-2 gap-2">
+        <BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-add" @click="closeAndEmit('chargeMoney', row)">
+          شارژ ریالی
+        </BaseButton>
+        <BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-money" @click="closeAndEmit('chargeGold', row)">
+          شارژ طلایی
+        </BaseButton>
+        <BaseButton
+          v-if="!row.is_legal"
+          class="w-full"
+          size="middle"
+          type="default"
+          icon="vuesax-linear:user-search"
+          @click="closeAndEmit('confirmUser', row)"
+        >
+          تایید کاربر
+        </BaseButton>
+        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:stickynote" @click="closeAndEmit('info', row)">
+          مشخصات کامل
+        </BaseButton>
+        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:edit" @click="closeAndEmit('edit', row)">
+          ویرایش
+        </BaseButton>
+        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:archive-tick" @click="closeAndEmit('archive', row)">
+          بایگانی
+        </BaseButton>
+        <BaseButton
+          class="w-full"
+          size="middle"
+          :type="row.active ? 'default' : 'primary'"
+          :icon="row.active ? 'vuesax-linear:user-remove' : 'vuesax-linear:user-tick'"
+          @click="confirmToggleActive(row)"
+        >
+          {{ row.active ? 'غیرفعال کردن' : 'فعال کردن' }}
+        </BaseButton>
+        <BaseButton
+          class="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="confirmToggleTrade(row)"
+        >
+          {{ row.trade_active === 1 ? 'ممنوعیت سفارش' : 'مجاز کردن سفارش' }}
+        </BaseButton>
+      </div>
 
       <div class="space-y-2">
         <MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
@@ -57,9 +75,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 || '-'" />
@@ -79,11 +97,8 @@ 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 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'
 
@@ -95,6 +110,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
@@ -108,24 +124,7 @@ const visibleProxy = computed({
   set: (value: boolean) => emit('update:visible', value)
 })
 
-function cashBalance(row: Customer) {
-  return getCashBalance(row.wallet)
-}
-
-function goldBalance(row: Customer) {
-  return getGoldBalance(row.wallet)
-}
-
-function lastSeen(row: Customer) {
-  return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
-}
-
-type SheetEmit =
-  | 'archive'
-  | 'chargeMoney'
-  | 'chargeGold'
-  | 'info'
-  | 'confirmUser'
+type SheetEmit = 'archive' | 'chargeMoney' | 'chargeGold' | 'info' | 'confirmUser' | 'edit'
 
 function closeAndEmit(event: SheetEmit, row: Customer) {
   visibleProxy.value = false
@@ -145,9 +144,7 @@ function confirmToggleActive(row: Customer) {
 
 function confirmToggleTrade(row: Customer) {
   Modal.confirm({
-    title: row.trade_active
-      ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟'
-      : 'آیا سفارش دهی را مجاز می‌کنید؟',
+    title: row.trade_active === 1 ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟' : 'آیا سفارش دهی را مجاز می‌کنید؟',
     okText: 'تایید',
     cancelText: 'رد',
     centered: true,
@@ -155,4 +152,16 @@ function confirmToggleTrade(row: Customer) {
     onOk: () => emit('toggleTrade', row)
   })
 }
+
+function cashBalance(row: Customer) {
+  return getCashBalance(row.wallet)
+}
+
+function goldBalance(row: Customer) {
+  return getGoldBalance(row.wallet)
+}
+
+function lastSeen(row: Customer) {
+  return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
+}
 </script>