From 3d403d61ca4609091dd4fcfd0ec848781377f981 Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Thu, 4 Jun 2026 22:33:33 +0330
Subject: [PATCH] revert

---
 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  |  69 +--------
 9 files changed, 72 insertions(+), 285 deletions(-)

diff --git a/src/components/BasicActionSheet.vue b/src/components/BasicActionSheet.vue
index 17719e9..a73e2a9 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', { 'basic-action-sheet--compact': compact }]"
+    class="basic-action-sheet"
   >
-    <div class="basic-action-sheet__container" :class="{ 'basic-action-sheet__container--compact': compact }">
+    <div class="basic-action-sheet__container">
       <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,8 +103,6 @@ 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
@@ -118,7 +116,6 @@ const props = withDefaults(defineProps<Props>(), {
   modalWidth: '36rem',
   loading: false,
   drawerHeight: ACTION_SHEET_HEIGHT,
-  compact: false,
   cancelText: 'بازگشت',
   showButton: false,
   showCancel: true,
@@ -178,29 +175,6 @@ 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 4a0f8a5..acb78d9 100644
--- a/src/components/mobile/MobileDetailSheet.vue
+++ b/src/components/mobile/MobileDetailSheet.vue
@@ -1,9 +1,8 @@
 <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 ca801af..c58ceb7 100644
--- a/src/components/mobile/MobileIconButton.vue
+++ b/src/components/mobile/MobileIconButton.vue
@@ -5,9 +5,8 @@
     :class="
       plain
         ? 'h-auto w-auto border-none bg-transparent p-0'
-        : 'h-10 min-h-[40px] w-10 min-w-[40px] rounded-full border-none bg-white active:bg-gray-50'
+        : 'h-9 w-9 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 df23faa..a1459d2 100644
--- a/src/components/mobile/MobileSheetHeader.vue
+++ b/src/components/mobile/MobileSheetHeader.vue
@@ -1,19 +1,11 @@
 <template>
   <div class="space-y-3">
-    <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 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>
-      <div
-        v-if="$slots.actions"
-        class="flex shrink-0 flex-wrap items-center justify-end gap-1"
-      >
-        <slot name="actions" />
+      <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
+        <slot name="subtitle">{{ subtitle }}</slot>
       </div>
     </div>
   </div>
diff --git a/src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue b/src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue
index 5e2ae2a..4e5b897 100644
--- a/src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue
+++ b/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)
diff --git a/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue b/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue
index c407ff0..a5b4d93 100644
--- a/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue
+++ b/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>
diff --git a/src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue b/src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue
index 355a9ce..08f85e8 100644
--- a/src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue
+++ b/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
diff --git a/src/pages/menuPages/customers/base/components/table.vue b/src/pages/menuPages/customers/base/components/table.vue
index a4d39ff..1541f5b 100644
--- a/src/pages/menuPages/customers/base/components/table.vue
+++ b/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>
diff --git a/src/pages/menuPages/customers/base/index.vue b/src/pages/menuPages/customers/base/index.vue
index 2f91b0d..5039d43 100644
--- a/src/pages/menuPages/customers/base/index.vue
+++ b/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>