change responsive]

src/pages/menuPages/giftCards/components/GiftCardCodeMobileListItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="space-y-1">
+      <div class="flex items-center justify-between gap-2">
+        <span class="truncate font-mono text-sm font-700 text-gray-900">{{ item.code || '-' }}</span>
+        <span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="statusClass">
+          {{ statusLabel }}
+        </span>
+      </div>
+
+      <div class="flex items-center justify-between gap-2 text-xs text-gray-600">
+        <span class="rounded-md border px-1.5 py-0.5 font-600" :class="unitTagClass">{{ unitLabel }}</span>
+        <span class="font-600 text-gray-900">{{ amountLabel }}</span>
+      </div>
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Giftcardcode } from '@/model/giftCard'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+
+const props = defineProps<{
+  item: Giftcardcode
+}>()
+
+defineEmits<{
+  (e: 'open', item: Giftcardcode): void
+}>()
+
+const statusLabel = computed(() => {
+  switch (props.item.sts) {
+    case 1:
+      return 'فعال'
+    case 2:
+      return 'استفاده شده'
+    default:
+      return 'غیرفعال'
+  }
+})
+
+const statusClass = computed(() => {
+  switch (props.item.sts) {
+    case 1:
+      return 'border-amber-300 bg-amber-50 text-amber-700'
+    case 2:
+      return 'border-green-300 bg-green-50 text-green-700'
+    default:
+      return 'border-red-300 bg-red-50 text-red-600'
+  }
+})
+
+const unitLabel = computed(() => (props.item.unit === 2 ? 'طلایی' : 'ریالی'))
+const unitTagClass = computed(() =>
+  props.item.unit === 2
+    ? 'border-amber-300 bg-amber-50 text-amber-700'
+    : 'border-green-300 bg-green-50 text-green-700'
+)
+
+const amountLabel = computed(() => `${props.item.amount ?? 0} ${props.item.unit === 2 ? 'گرم' : 'ریال'}`)
+</script>