All files / src/components/feature StatementList.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { formatHkd } from '@/utils/money'
import type { Statement } from '@/api/types'
 
defineProps<{
  statements: Statement[]
}>()
 
const emit = defineEmits<{
  (e: 'select', id: string): void
}>()
 
const { t } = useI18n()
</script>
 
<template>
  <div class="space-y-3">
    <button
      v-for="statement in statements"
      :key="statement.id"
      class="flex w-full items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 text-left shadow-card transition-all hover:border-silver-300 hover:shadow-soft active:scale-[0.99]"
      @click="emit('select', statement.id)"
    >
      <div>
        <div class="text-sm font-medium tracking-tight">{{ statement.month }}</div>
        <div class="mt-1 text-xs text-slate-500">{{ t('statement.payDate') }} {{ statement.payDate }}</div>
      </div>
      <div class="text-right">
        <div class="tnum text-sm font-semibold">{{ formatHkd(statement.netAmount) }}</div>
        <div class="mt-1 text-xs text-slate-400">{{ t('statement.net') }}</div>
      </div>
    </button>
  </div>
</template>