change responsive]

src/pages/menuPages/cards/components/AccountMobileListItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="flex items-center gap-2">
+      <div class="min-w-0 flex-1 space-y-1">
+        <div class="flex items-center justify-between gap-2">
+          <span class="truncate text-sm font-700 text-gray-900">{{ customerName }}</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="truncate">{{ item.bank_name || '-' }}</span>
+          <span class="shrink-0 text-gray-400">#{{ item.id ?? '-' }}</span>
+        </div>
+      </div>
+
+      <MobileIconButton
+        :icon="item.sts === 2 ? 'vuesax-linear:card-tick' : 'vuesax-linear:card-remove'"
+        :color="item.sts === 2 ? '#16A34A' : '#DC2626'"
+        :size="20"
+        @click="$emit('toggleSts', item)"
+      />
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '@/model/card'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
+
+type AccountRow = Card & { sts_str?: string; created_at?: string; customer_id?: number }
+
+const props = defineProps<{
+  item: AccountRow
+}>()
+
+defineEmits<{
+  (e: 'open', item: AccountRow): void
+  (e: 'toggleSts', item: AccountRow): void
+}>()
+
+const customerName = computed(() => props.item.customer?.name || '-')
+const statusLabel = computed(() => props.item.sts_str || '-')
+
+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'
+  }
+})
+</script>