change responsive]

src/pages/menuPages/wallet/components/WalletMobileCardList.vue

@@ -0,0 +1,67 @@
+<template>
+  <MobileCardList
+    v-model:search="search"
+    :loading="loading"
+    :has-more="hasMore"
+    :show-empty="!loading && items.length === 0"
+    empty-text="کیف پولی یافت نشد"
+    search-placeholder="جستجو کیف پول"
+    show-refresh
+    @search="reload"
+    @refresh="reload"
+    @load-more="loadMore"
+  >
+    <WalletMobileListItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      @open="openSheet"
+    />
+  </MobileCardList>
+
+  <WalletMobileDetailSheet
+    v-model:visible="sheetVisible"
+    :item="selectedItem"
+  />
+</template>
+
+<script setup lang="ts">
+import { getWalletTable } from '@/api/wallet'
+import type { Wallet } from '@/model/wallet'
+import MobileCardList from '@/components/mobile/MobileCardList.vue'
+import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
+import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
+import type { TableInput, TableOutput } from '@core/type/baseTable'
+import WalletMobileDetailSheet from './WalletMobileDetailSheet.vue'
+import WalletMobileListItem from './WalletMobileListItem.vue'
+
+type WalletTableResponse = TableOutput<Wallet> & {
+  sums?: {
+    cash?: number
+    gold?: number
+    cashToGold?: number
+    goldToCash?: number
+  }
+}
+
+const emit = defineEmits<{
+  (e: 'sums', sums: WalletTableResponse['sums']): void
+}>()
+
+const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Wallet>()
+
+async function fetchWallet(params: TableInput) {
+  const data = (await getWalletTable(params)) as WalletTableResponse
+  emit('sums', data?.sums)
+  return data
+}
+
+const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Wallet>({
+  fetchApi: fetchWallet,
+  onFetched: (rows) => syncSelectedItem(rows)
+})
+
+onMounted(() => reload())
+
+defineExpose({ fetch, openSheet })
+</script>

src/pages/menuPages/wallet/components/WalletMobileDetailSheet.vue

@@ -0,0 +1,59 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :title="sheetTitle" :show-title="isMobile" />
+
+      <div class="space-y-2">
+        <MobileStatCard bordered variant="success" label="موجودی ریالی" :value="usePrice(row.cash ?? 0, true, '')">
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
+          </template>
+        </MobileStatCard>
+        <MobileStatCard bordered variant="warning" label="موجودی طلایی" :value="goldLabel(row)">
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:coin" size="18" color="#b45309" />
+          </template>
+        </MobileStatCard>
+      </div>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="کد کیف پول" :value="row.id ?? '-'" />
+        <MobileDetailRow label="نام مشتری" :value="row.customer?.name || '-'" />
+        <MobileDetailRow label="شماره موبایل" :value="row.customer?.mobile ?? '-'" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { Wallet } from '@/model/wallet'
+import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
+import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
+import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
+import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
+import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
+import { isMobile } from '@core/utils/is'
+import { usePrice } from '@core/utils/usePrice'
+
+const props = defineProps<{
+  visible: boolean
+  item: Wallet | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+
+const visibleProxy = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value)
+})
+
+const sheetTitle = computed(() => props.item?.customer?.name || `کیف پول #${props.item?.id ?? '-'}`)
+
+function goldLabel(row: Wallet) {
+  const gold = row.gold
+  if (gold == null) return '-'
+  return `${Number(Number(gold).toFixed(3))} گرم`
+}
+</script>

src/pages/menuPages/wallet/components/WalletMobileListItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="space-y-1">
+      <div class="flex items-center justify-between gap-2">
+        <span class="min-w-0 truncate text-sm font-700 text-gray-900">{{ customerName }}</span>
+        <span class="shrink-0 text-xs text-gray-400">#{{ item.id ?? '-' }}</span>
+      </div>
+
+      <div class="flex items-center justify-between gap-2 text-xs text-gray-600">
+        <span>
+          <span class="text-gray-500">ریال:</span>
+          <span class="font-600 text-gray-900">{{ cashLabel }}</span>
+        </span>
+        <span>
+          <span class="text-gray-500">طلا:</span>
+          <span class="font-700 text-gray-900">{{ goldLabel }}</span>
+        </span>
+      </div>
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Wallet } from '@/model/wallet'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import { usePrice } from '@core/utils/usePrice'
+
+const props = defineProps<{
+  item: Wallet
+}>()
+
+defineEmits<{
+  (e: 'open', item: Wallet): void
+}>()
+
+const customerName = computed(() => props.item.customer?.name || '-')
+const cashLabel = computed(() => usePrice(props.item.cash ?? 0, true, ''))
+const goldLabel = computed(() => {
+  const gold = props.item.gold
+  if (gold == null) return '-'
+  return `${Number(Number(gold).toFixed(3))} گرم`
+})
+</script>

src/pages/menuPages/wallet/components/table.vue

@@ -1,110 +1,73 @@
 <template>
-  <div>
+  <div class="h-full min-h-0">
     <BasicShowContext title="لیست کیف پول">
-      <BaseTable v-bind="tblProps" @register="submit" ref="tbl">
-        <!--        <template #extraHeader>
-          <BaseButton type="primary" size="small" class="flex" @click="emits('add')">
-            <div>افزودن کیف پول</div>
-            <BaseIcon icon="vuesax-linear:wallet-add" Size="16px" />
-          </BaseButton>
-        </template>-->
-        <template #extraHeader>
-          <div class="w-60vw hidden md:block">
-            <div class="grid grid-cols-2 gap-3 w-full py-2 px-5">
-              <div
-                :class="
-                  sums?.cash >= 0
-                    ? sums?.cash === 0
-                      ? 'bg-amber-100'
-                      : 'bg-green-100'
-                    : 'bg-red-100'
-                "
-                class="rounded-lg p-2"
-              >
-                <div class="mb-1">مجموع موجودی کیف پول:</div>
-                <div class="flex gap-2">
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">{{ usePrice(sums?.cash ?? 0) }}</div>
-                  </div>
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">
-                      {{ usePrice(sums?.cashToGold.toFixed(2) ?? 0, true, 'گرم') }}
-                    </div>
-                  </div>
-                </div>
+      <div class="flex h-full min-h-0 flex-col gap-3">
+        <div class="hidden shrink-0 md:grid md:grid-cols-1 md:gap-3 lg:grid-cols-2">
+          <div
+            class="rounded-lg p-2.5 text-sm"
+            :class="walletSumTone(sums?.cash)"
+          >
+            <div class="mb-2 font-medium">مجموع موجودی کیف پول</div>
+            <div class="grid grid-cols-2 gap-2">
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">ریال</div>
+                <div class="mt-1 font-bold break-all">{{ usePrice(sums?.cash ?? 0) }}</div>
               </div>
-              <div
-                :class="
-                  sums?.gold >= 0
-                    ? sums?.gold === 0
-                      ? 'bg-amber-100'
-                      : 'bg-green-100'
-                    : 'bg-red-100'
-                "
-                class="rounded-lg p-2"
-              >
-                <div class="mb-1">مجموع موجودی کیف طلا:</div>
-                <div class="flex gap-2">
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">{{ usePrice(sums?.gold ?? 0, true, 'گرم') }}</div>
-                  </div>
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">{{ usePrice(sums?.goldToCash ?? 0) }}</div>
-                  </div>
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">گرم</div>
+                <div class="mt-1 font-bold">
+                  {{ usePrice(Number(sums?.cashToGold ?? 0).toFixed(2), true, 'گرم') }}
                 </div>
               </div>
             </div>
           </div>
-        </template>
-        <template #action="{ column, record }">
-          <div class="gap-2 flex justify-center">
-            <!--            <a-tooltip
-              :key="record.active"
-              placement="bottom"
-              class="cursor-pointer"
-              @click="changeCustomerActivationFunction(record.id)"
-            >
-              <template #title>
-                <span>{{ record.active ? 'غیرفعال کردن' : 'فعال کردن' }}</span>
-              </template>
-              <Icon
-                :icon="record.active ? 'vuesax-linear:tick-circle' : 'vuesax-linear:close-circle'"
-                :color="record.active ? '#54AD06' : '#ad0627'"
-              />
-            </a-tooltip>-->
-            <a-tooltip placement="bottom" class="cursor-pointer" @click="emits('info', record)">
-              <template #title>
-                <span>مشخصات</span>
-              </template>
-              <Icon icon="vuesax-linear:stickynote" color="#10913A" />
-            </a-tooltip>
-            <a-tooltip placement="bottom" class="cursor-pointer" @click="emits('edit', record)">
-              <template #title>
-                <span>ویرایش</span>
-              </template>
-              <Icon icon="vuesax-linear:edit" color="#4572E9" />
-            </a-tooltip>
-            <!--            <a-tooltip
-              placement="bottom"
-              class="cursor-pointer"
-              @click="emits('delete', record.id)"
-            >
-              <template #title>
-                <span>حذف</span>
-              </template>
-              <Icon icon="vuesax-linear:trash" color="#EB3535" />
-            </a-tooltip>-->
+
+          <div
+            class="rounded-lg p-2.5 text-sm"
+            :class="walletSumTone(sums?.gold)"
+          >
+            <div class="mb-2 font-medium">مجموع موجودی کیف طلا</div>
+            <div class="grid grid-cols-2 gap-2">
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">گرم</div>
+                <div class="mt-1 font-bold">
+                  {{ usePrice(sums?.gold ?? 0, true, 'گرم') }}
+                </div>
+              </div>
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">ریال</div>
+                <div class="mt-1 font-bold break-all">{{ usePrice(sums?.goldToCash ?? 0) }}</div>
+              </div>
+            </div>
           </div>
-        </template>
-      </BaseTable>
+        </div>
+
+        <BaseTable v-if="!isMobile" class="min-h-0 min-w-0 flex-1" v-bind="tblProps" @register="submit" ref="tbl">
+          <template #action="{ column, record }">
+            <div class="gap-2 flex justify-center">
+              <a-tooltip placement="bottom" class="cursor-pointer" @click="emits('info', record)">
+                <template #title>
+                  <span>مشخصات</span>
+                </template>
+                <Icon icon="vuesax-linear:stickynote" color="#10913A" />
+              </a-tooltip>
+              <a-tooltip placement="bottom" class="cursor-pointer" @click="emits('edit', record)">
+                <template #title>
+                  <span>ویرایش</span>
+                </template>
+                <Icon icon="vuesax-linear:edit" color="#4572E9" />
+              </a-tooltip>
+            </div>
+          </template>
+        </BaseTable>
+
+        <WalletMobileCardList
+          v-else
+          ref="mobileListRef"
+          class="min-h-0 flex-1"
+          @sums="onMobileSums"
+        />
+      </div>
     </BasicShowContext>
   </div>
 </template>
@@ -113,30 +76,21 @@
 import type { TableInput } from '@core/type/baseTable'
 import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
 import Icon from '@core/components/BaseIcon/src/Icon.vue'
-import { changeCustomerActivation, getCustomerTable } from '@/api/customer'
+import { changeCustomerActivation } from '@/api/customer'
 import { cols } from '../hooks/walletColumns'
-import { useUserStore } from '@/store/userStore'
 import { usePrefix } from '@core/composable/usePrefix'
 import { message } from 'ant-design-vue'
 import { getWalletTable } from '@/api/wallet'
 import { usePrice } from '../../../../core/utils/usePrice'
+import WalletMobileCardList from './WalletMobileCardList.vue'
+import { isMobile } from '@core/utils/is'
 
 const [submit, reload] = useBaseTable()
-/*const select = (val) => {
-  val.sts === 1 ? return ['1'] : ['2']
-}*/
-//emits
+const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
 const emits = defineEmits(['delete', 'edit', 'add', 'info', 'sums'])
 
 const { prefixCls } = usePrefix('pophoverstatus')
 
-//permission
-/*function checkPermission(temp: string) {
-  const store = useUserStore()
-  return store.canAccess(temp)
-}*/
-
-//define table
 const table = ref(null)
 const sums = ref<any>()
 
@@ -146,13 +100,23 @@ const tblProps = ref<any>({
     const data = await getWalletTable(params)
     sums.value = data?.sums
     emits('sums', data?.sums)
-    console.log(sums.value)
     return data
   }
-  //bordered: true
 })
 const loading = ref<boolean>(false)
 
+function walletSumTone(value?: number) {
+  if (value == null || value >= 0) {
+    return value === 0 ? 'bg-amber-100' : 'bg-green-100'
+  }
+  return 'bg-red-100'
+}
+
+function onMobileSums(payload: unknown) {
+  sums.value = payload
+  emits('sums', payload)
+}
+
 async function changeCustomerActivationFunction(id: number) {
   try {
     loading.value = true
@@ -166,17 +130,12 @@ async function changeCustomerActivationFunction(id: number) {
   }
 }
 
-const fetch = () => {
-  // console.log('sss')
-  reload()
+async function fetch() {
+  await Promise.allSettled([reload(), mobileListRef.value?.fetch?.() as Promise<void>])
 }
-// const spinTable = (val: boolean) => {
-//   // console.log('sss')
-//   table?.value?.loading.value = val
-// }
+
 defineExpose({
   fetch
-  // spinTable
 })
 </script>
 
@@ -192,11 +151,5 @@ defineExpose({
   .ant-menu-item-only-child {
     border-radius: @border-radius-base;
   }
-
-  //bor
-  /*  .ant-input-group-addon:first-child {
-  !*    border: #d9d9d9 1px solid;
-  border-radius: 0 6px 6px 0;*!
-}*/
 }
 </style>

src/pages/menuPages/wallet/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="h-full min-h-0">
     <BasicMainCard>
-      <div class="md:hidden">
+      <div class="flex h-full min-h-0 flex-col">
+      <div class="shrink-0 md:hidden">
         <!--        <div class="bg-gray-100 grid grid-cols-2 gap-3 w-full py-2 px-5">
           <div class="gap-5 text-xs">
             <div>مجموع موجودی کیف پول:</div>
@@ -70,10 +71,10 @@
           </div>
         </div>
       </div>
-      <div class="flex w-full h-full">
+      <div class="flex min-h-0 flex-1 flex-col">
         <tbl
           ref="table"
-          class="w-full h-full"
+          class="h-full min-h-0 w-full"
           @info="info"
           @edit="edit"
           @sums="setSums"
@@ -85,6 +86,7 @@
         <component :is="selectedComponent" class="mr-5" />-->
         <!--        <BasicShowContext title="پروژه ها"> <Search /> </BasicShowContext>-->
       </div>
+      </div>
     </BasicMainCard>
     <BasicModal
       v-model:visible="addUserVisible"