boursecu_admin/src/pages/menuPages/accounting/components/AccountingMobileDetailSheet.vue

<template>
  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
    <template #default="{ item: row }">
      <MobileSheetHeader :title="sheetTitle" :show-title="isMobile">
        <template #actions>
          <MobileIconButton plain icon="vuesax-linear:stickynote" color="#10913A" :size="22" @click="$emit('info', row)" />
          <MobileIconButton plain icon="vuesax-linear:receipt-item" color="#10913A" :size="22" @click="$emit('orders', row)" />
        </template>
      </MobileSheetHeader>

      <div class="space-y-2">
        <MobileStatCard bordered variant="success" label="موجودی ریالی" :value="usePrice(row.balance_cash ?? 0, true, '')">
          <template #prefix>
            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
          </template>
        </MobileStatCard>
        <MobileStatCard bordered variant="success" :label="metalLabel.goldInventory()" :value="`${row.balance_gold ?? 0} گرم`">
          <template #prefix>
            <BaseIcon icon="vuesax-linear:coin" size="18" color="#15803d" />
          </template>
        </MobileStatCard>
      </div>

      <MobileInfoGrid>
        <MobileDetailRow label="نام مشتری" :value="row.customer_to?.name || '-'" />
        <MobileDetailRow label="نام مشتری دعوت شده" :value="row.customer?.name || '-'" />
        <MobileDetailRow label="زمان ثبت" :value="row.created_at ? toJalali(row.created_at) : '-'" />
        <MobileDetailRow label="نقد (ریال)" :value="usePrice(row.cash ?? 0, true, '')" />
        <MobileDetailRow :label="m('طلا (گرم)')" :value="`${row.gold ?? 0}`" />
        <MobileDetailRow label="توضیحات" full-width :value="row.note || '-'" />
      </MobileInfoGrid>
    </template>
  </MobileDetailSheet>
</template>

<script setup lang="ts">
import type { TotalAccounting } from '@/model/accounting'
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 { isMobile } from '@core/utils/is'
import { toJalali } from '@core/utils/useDataTime'
import { usePrice } from '@core/utils/usePrice'
import { metalLabel } from '@/utils/adminMetalLabels'
import { m } from '@/utils/metalLabels'

const props = defineProps<{
  visible: boolean
  item: TotalAccounting | null
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'info', item: TotalAccounting): void
  (e: 'orders', item: TotalAccounting): void
}>()

const visibleProxy = computed({
  get: () => props.visible,
  set: (value: boolean) => emit('update:visible', value)
})

const sheetTitle = computed(() => props.item?.customer_to?.name || props.item?.customer?.name || 'حسابداری')
</script>