All files / src/components/feature StatementDetail.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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { formatDetailMoney, formatHkd } from '@/utils/money'
import type { StatementDetail as StatementDetailType } from '@/api/types'
 
defineProps<{
  detail: StatementDetailType
}>()
 
const { t } = useI18n()
</script>
 
<template>
  <div class="space-y-4">
    <section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
      <div class="grid grid-cols-2 gap-3 text-sm">
        <div>
          <div class="text-xs text-silver-500">{{ t('statement.gross') }}</div>
          <div class="tnum mt-1 font-medium">{{ formatHkd(detail.grossAmount) }}</div>
        </div>
        <div>
          <div class="text-xs text-silver-500">{{ t('statement.mpf') }}</div>
          <div class="tnum mt-1 font-medium">{{ formatHkd(detail.mpfAmount) }}</div>
        </div>
        <div>
          <div class="text-xs text-silver-500">{{ t('statement.adjustment') }}</div>
          <div class="tnum mt-1 font-medium">{{ formatHkd(detail.adjustmentAmount) }}</div>
        </div>
        <div>
          <div class="text-xs text-silver-500">{{ t('statement.net') }}</div>
          <div class="tnum mt-1 font-semibold text-brand-700">{{ formatHkd(detail.netAmount) }}</div>
        </div>
        <div>
          <div class="text-xs text-silver-500">{{ t('statement.payDate') }}</div>
          <div class="mt-1">{{ detail.payDate }}</div>
        </div>
        <div>
          <div class="text-xs text-silver-500">{{ t('statement.bankTail') }}</div>
          <div class="mt-1">{{ detail.bankTail }}</div>
        </div>
      </div>
    </section>
 
    <section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
      <div class="mb-3 text-sm font-medium">{{ t('statement.amount') }}</div>
      <div v-for="item in detail.items" :key="item.id" class="border-b border-silver-100 py-3 last:border-0">
        <div class="flex items-center justify-between text-sm">
          <span>{{ item.customerName }}</span>
          <span class="tnum font-medium">{{ formatDetailMoney(item.originalAmount, item.originalCurrency) }}</span>
        </div>
        <div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
          <span>{{ t('statement.policy') }} {{ item.policyNo }}</span>
          <span>{{ item.companyName }}</span>
          <span>{{ item.productName }}</span>
        </div>
        <div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
          <span>{{ item.commissionYearType }}</span>
          <span>{{ t('statement.ratio') }} {{ item.myRatio }}</span>
          <span>@{{ item.exchangeRate }}</span>
          <span class="tnum">{{ formatHkd(item.hkdAmount) }}</span>
        </div>
      </div>
    </section>
  </div>
</template>