ismailmasseran
d06c4701a4
Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local> Reviewed-on: #4
39 lines
1.4 KiB
Vue
39 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Box } from '@/components/ui/box'
|
|
import type { UserDetail } from '../types/user.types'
|
|
|
|
defineProps<{
|
|
user: UserDetail
|
|
embedded?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="embedded ? '' : 'mt-5'">
|
|
<Box raised="single" class="p-6">
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-slate-900">Penama</h3>
|
|
<p class="mt-1 text-sm text-slate-500">Senarai penama pengguna.</p>
|
|
</div>
|
|
|
|
<div v-if="user.heirs?.length" class="space-y-3">
|
|
<div v-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="font-medium text-slate-900">{{ heir.name }}</span>
|
|
<Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
|
|
<Badge look="outline">{{ heir.relationship }}</Badge>
|
|
</div>
|
|
<p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
|
|
<p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
|
|
<p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500">
|
|
Tiada penama direkodkan.
|
|
</div>
|
|
</Box>
|
|
</div>
|
|
</template>
|