feat(user): papar Penama anggota pada halaman Edit User admin

src/modules/user/pages/UserEdit.vue

@@ -24,6 +24,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
+import type { Heir } from '@/modules/profile/types/heir.types'
 import type { Employment, EmploymentPayload } from '@/modules/profile/types/employment.types'
 import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import {
@@ -131,6 +132,7 @@ const employmentTypeInitial = ref<string[]>([])
 const companyNameValue = ref<string[]>([])
 const companyNameInitial = ref<string[]>([])
 
+const heirs = ref<Heir[]>([])
 const employments = ref<Employment[]>([])
 const savingEmployment = ref(false)
 const deletingEmploymentId = ref<string | null>(null)
@@ -276,6 +278,7 @@ function syncFormFromUser(user: Awaited<ReturnType<typeof getUser>>['data']) {
   genderInitial.value = [...genderValue.value]
   marriageStatusInitial.value = [...marriageStatusValue.value]
   memberTypeInitial.value = [...memberTypeValue.value]
+  heirs.value = user.heirs ?? []
   employments.value = user.employments ?? []
 }
 
@@ -746,6 +749,44 @@ onMounted(() => {
       </form>
     </Box>
 
+    <Box>
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
+          <p class="mt-1 text-sm text-slate-500">Paparan maklumat penama anggota (baca sahaja).</p>
+        </div>
+
+        <div v-if="loading" class="text-sm text-slate-500">Memuatkan penama...</div>
+        <div v-else-if="error" class="text-sm text-slate-500">Maklumat penama tidak dapat dimuatkan.</div>
+        <div v-else-if="heirs.length" class="space-y-3">
+          <div v-for="heir in 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>
+            <dl class="mt-3 grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
+              <div>
+                <dt class="text-slate-500">No. Kad Pengenalan</dt>
+                <dd class="text-slate-700">{{ heir.ic_number || '-' }}</dd>
+              </div>
+              <div>
+                <dt class="text-slate-500">No. Telefon</dt>
+                <dd class="text-slate-700">{{ heir.phone_number || '-' }}</dd>
+              </div>
+              <div class="md:col-span-2">
+                <dt class="text-slate-500">Alamat</dt>
+                <dd class="whitespace-pre-line text-slate-700">{{ heir.address || '-' }}</dd>
+              </div>
+            </dl>
+          </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>
+      </div>
+    </Box>
+
     <Box>
       <div class="space-y-6">
         <div>