change responsive]

2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
@@ -0,0 +1,101 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :title="sheetTitle" :subtitle="dateLabel(row)" :show-title="isMobile" />
+
+      <div class="flex items-center gap-2">
+        <span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass(row)">
+          {{ typeLabel(row) }}
+        </span>
+      </div>
+
+      <div class="space-y-2">
+        <MobileStatCard
+          bordered
+          :variant="(row.gold ?? 0) > 0 ? 'success' : 'danger'"
+          label="مقدار طلا (گرم)"
+          :value="goldLabel(row)"
+        >
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:coin" size="18" :color="(row.gold ?? 0) > 0 ? '#15803d' : '#dc2626'" />
+          </template>
+        </MobileStatCard>
+        <MobileStatCard
+          bordered
+          :variant="(row.cash ?? 0) > 0 ? 'success' : 'danger'"
+          label="مقدار پول (ریال)"
+          :value="usePrice(row.cash ?? 0, true, '')"
+        >
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" :color="(row.cash ?? 0) > 0 ? '#15803d' : '#dc2626'" />
+          </template>
+        </MobileStatCard>
+      </div>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="کد تراکنش" :value="row.id ?? '-'" />
+        <MobileDetailRow label="نام تراکنش" :value="row.type_str || '-'" />
+        <MobileDetailRow label="علت تراکنش" full-width :value="noteLabel(row)" />
+        <MobileDetailRow label="نام مشتری" full-width :value="row.customer?.name || '-'" />
+        <MobileDetailRow label="تاریخ تراکنش" :value="dateLabel(row)" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { Transaction } from '@/model/transaction'
+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 { toJalaliNoTime } from '@core/utils/useDataTime'
+import { usePrice } from '@core/utils/usePrice'
+
+const props = defineProps<{
+  visible: boolean
+  item: Transaction | 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?.type_str || `تراکنش #${props.item?.id ?? '-'}`)
+
+function isMoneyType(row: Transaction) {
+  return row.type === 4 || row.type === 3
+}
+
+function typeLabel(row: Transaction) {
+  return isMoneyType(row) ? 'پول' : 'طلا'
+}
+
+function typeTagClass(row: Transaction) {
+  return isMoneyType(row)
+    ? 'border-green-300 bg-green-50 text-green-700'
+    : 'border-amber-300 bg-amber-50 text-amber-700'
+}
+
+function dateLabel(row: Transaction) {
+  return row.created_at ? toJalaliNoTime(row.created_at) : '-'
+}
+
+function goldLabel(row: Transaction) {
+  const gold = row.gold
+  if (gold == null) return '-'
+  return `${Number(Number(gold).toFixed(3))} گرم`
+}
+
+function noteLabel(row: Transaction) {
+  if (row.note == null) return '-'
+  return String(row.note)
+}
+</script>