fix: improves encounter detail rendering and data mapping

app/components/content/encounter/home.vue

@@ -6,6 +6,7 @@ import { getDetail } from '~/services/encounter.service'
 import { getPositionAs } from '~/lib/roles'
 
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
 import CompMenu from '~/components/pub/my-ui/comp-menu/comp-menu.vue'
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 
@@ -43,32 +44,80 @@ const activeTab = computed({
 })
 
 const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-// const dataRes = await getDetail(id, {
-//   includes:
-//     'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
-// })
-// const dataResBody = dataRes.body ?? null
-// const data = dataResBody?.data ?? null
 
-// Dummy data so AppEncounterQuickInfo can render in development/storybook
-// Replace with real API result when available (see commented fetch below)
-const data = ref<any>({
-  patient: {
-    number: 'RM-2025-0001',
-    person: {
-      name: 'John Doe',
-      birthDate: '1980-01-01T00:00:00Z',
-      gender_code: 'M',
-      addresses: [{ address: 'Jl. Contoh No.1, Jakarta' }],
-      frontTitle: '',
-      endTitle: '',
+const data = ref<any>(null)
+
+// Function to check if date is invalid (like "0001-01-01T00:00:00Z")
+function isValidDate(dateString: string | null | undefined): boolean {
+  if (!dateString) return false
+  // Check for invalid date patterns
+  if (dateString.startsWith('0001-01-01')) return false
+  try {
+    const date = new Date(dateString)
+    return !isNaN(date.getTime())
+  } catch {
+    return false
+  }
+}
+
+// Function to map API response to Encounter structure
+function mapApiResponseToEncounter(apiResponse: any): any {
+  if (!apiResponse) return null
+
+  // Check if patient and patient.person exist (minimal validation)
+  if (!apiResponse.patient || !apiResponse.patient.person) {
+    return null
+  }
+
+  const mapped: any = {
+    id: apiResponse.id || 0,
+    patient_id: apiResponse.patient_id || apiResponse.patient?.id || 0,
+    patient: {
+      id: apiResponse.patient?.id || 0,
+      number: apiResponse.patient?.number || '',
+      person: {
+        id: apiResponse.patient?.person?.id || 0,
+        name: apiResponse.patient?.person?.name || '',
+        birthDate: apiResponse.patient?.person?.birthDate || null,
+        gender_code: apiResponse.patient?.person?.gender_code || '',
+        residentIdentityNumber: apiResponse.patient?.person?.residentIdentityNumber || null,
+        frontTitle: apiResponse.patient?.person?.frontTitle || '',
+        endTitle: apiResponse.patient?.person?.endTitle || '',
+        addresses: apiResponse.patient?.person?.addresses || [],
+      },
     },
-  },
-  visitDate: new Date().toISOString(),
-  unit: { name: 'Onkologi' },
-  responsible_doctor: null,
-  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } },
-})
+    registeredAt: apiResponse.registeredAt || apiResponse.patient?.registeredAt || null,
+    class_code: apiResponse.class_code || '',
+    unit_id: apiResponse.unit_id || 0,
+    unit: apiResponse.unit || null,
+    specialist_id: apiResponse.specialist_id || null,
+    subspecialist_id: apiResponse.subspecialist_id || null,
+    visitDate: isValidDate(apiResponse.visitDate) ? apiResponse.visitDate : (apiResponse.registeredAt || apiResponse.patient?.registeredAt || null),
+    adm_employee_id: apiResponse.adm_employee_id || 0,
+    appointment_doctor_id: apiResponse.appointment_doctor_id || null,
+    responsible_doctor_id: apiResponse.responsible_doctor_id || null,
+    appointment_doctor: apiResponse.appointment_doctor || null,
+    responsible_doctor: apiResponse.responsible_doctor || null,
+    refSource_name: apiResponse.refSource_name || null,
+    appointment_id: apiResponse.appointment_id || null,
+    earlyEducation: apiResponse.earlyEducation || null,
+    medicalDischargeEducation: apiResponse.medicalDischargeEducation || '',
+    admDischargeEducation: apiResponse.admDischargeEducation || null,
+    discharge_method_code: apiResponse.discharge_method_code || null,
+    discharge_reason: apiResponse.dischargeReason || apiResponse.discharge_reason || null,
+    discharge_date: apiResponse.discharge_date || null,
+    status_code: apiResponse.status_code || '',
+    // Payment related fields
+    paymentMethod_code: apiResponse.paymentMethod_code && apiResponse.paymentMethod_code.trim() !== '' 
+      ? apiResponse.paymentMethod_code 
+      : null,
+    trx_number: apiResponse.trx_number || null,
+    member_number: apiResponse.member_number || null,
+    ref_number: apiResponse.ref_number || null,
+  }
+
+  return mapped
+}
 
 // Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
 const protocolRows = [
@@ -289,6 +338,31 @@ const tabsRaws: TabItem[] = [
   },
 ]
 
+async function getData() {
+  try {
+    const dataRes = await getDetail(id, {
+      includes:
+        'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person',
+    })
+    const dataResBody = dataRes.body ?? null
+    const result = dataResBody?.data ?? null
+    
+    if (result) {
+      const mappedData = mapApiResponseToEncounter(result)
+      if (mappedData) {
+        data.value = mappedData
+      } else {
+        data.value = null
+      }
+    } else {
+      data.value = null
+    }
+  } catch (error) {
+    console.error('Error fetching encounter data:', error)
+    data.value = null
+  }
+}
+
 function getMenus() {
   return tabsRaws
     .filter((tab: TabItem) => (tab.groups ? tab.groups.some((group: string) => group === activePosition.value) : false))
@@ -307,7 +381,8 @@ watch(getActiveRole, () => {
   tabs.value = getMenus()
 })
 
-onMounted(() => {
+onMounted(async () => {
+  await getData()
   tabs.value = getMenus()
 })
 </script>
@@ -317,7 +392,10 @@ onMounted(() => {
     <div class="mb-4">
       <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
-    <AppEncounterQuickInfo :data="data" />
+    <EncounterQuickInfoFull
+      v-if="data && data.patient && data.patient.person"
+      :data="data"
+    />
     <CompTab
       v-if="currentDisplay === 'tab'"
       :data="tabs"