change responsive]

src/pages/menuPages/transactions/components/TransactionMobileListItem.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">
+        <div class="flex min-w-0 items-center gap-2">
+          <span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="typeTagClass">
+            {{ typeLabel }}
+          </span>
+          <span class="truncate text-sm font-700 text-gray-900">{{ item.type_str || '-' }}</span>
+        </div>
+        <span class="shrink-0 text-xs text-gray-400">{{ dateLabel }}</span>
+      </div>
+
+      <div v-if="!hideCustomer" class="truncate text-xs text-gray-600">{{ customerName }}</div>
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Transaction } from '@/model/transaction'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import { toJalaliNoTime } from '@core/utils/useDataTime'
+
+const props = defineProps<{
+  item: Transaction
+  hideCustomer?: boolean
+}>()
+
+defineEmits<{
+  (e: 'open', item: Transaction): void
+}>()
+
+const isMoneyType = computed(() => props.item.type === 4 || props.item.type === 3)
+const typeLabel = computed(() => (isMoneyType.value ? 'پول' : 'طلا'))
+const typeTagClass = computed(() =>
+  isMoneyType.value
+    ? 'border-green-300 bg-green-50 text-green-700'
+    : 'border-amber-300 bg-amber-50 text-amber-700'
+)
+
+const customerName = computed(() => props.item.customer?.name || '-')
+const dateLabel = computed(() => (props.item.created_at ? toJalaliNoTime(props.item.created_at) : '-'))
+</script>