Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | <script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import type { TodoItem, TodoType } from '@/api/types'
const props = defineProps<{
todo: TodoItem
}>()
const { t } = useI18n()
const typeLabel = computed(() => {
const map: Record<TodoType, string> = {
renewal: 'todo.renewal',
lapse: 'todo.lapse',
birthday: 'todo.birthday'
}
return t(map[props.todo.type])
})
const done = ref(false)
const doneDate = ref('')
const actionLabel = computed(() =>
done.value ? t('todo.doneAt', { date: doneDate.value }) : t('todo.markDone')
)
function markDone() {
if (done.value) return
done.value = true
doneDate.value = new Date().toISOString().slice(0, 10)
}
</script>
<template>
<div class="flex items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div>
<div class="text-sm font-medium tracking-tight">{{ typeLabel }}</div>
<div class="mt-1 text-xs text-slate-500">{{ todo.customerName }} ยท {{ todo.policyNo }}</div>
</div>
<button
class="rounded-full px-3.5 py-1.5 text-xs font-medium transition-all active:scale-95"
:class="done ? 'bg-emerald-50 text-emerald-700' : 'bg-brand-600 text-white hover:bg-brand-700 shadow-sm'"
@click="markDone"
>
{{ actionLabel }}
</button>
</div>
</template> |