DONE: layout letter with letterhead and footer, notification for newly...

fe/src/modules/user/pages/UserHeirTab.vue

@@ -0,0 +1,45 @@
+<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">Pewaris</h3>
+        <p class="mt-1 text-sm text-slate-500">Senarai pewaris 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 pewaris direkodkan.
+      </div>
+    </Box>
+  </div>
+</template>