From d78ad28607a2662a9ebabb332eb9353b790384dd Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 11 Dec 2025 15:49:56 +0700
Subject: [PATCH] adjust detail preview

feat(patient): add disability field and centralize disability codes

Move disability options to constants file and implement in both select component and patient preview

feat(patient-preview): add document section with skeleton loading

Add a new "Dokumen" section to the patient preview component that displays skeleton placeholders for KTP and KK documents. This improves the UI by showing loading states for document previews.
---
 .../app/patient/fields/select-disability.vue  |  17 ++-
 app/components/app/patient/preview.vue        |  33 +++++-
 app/lib/constants.ts                          | 104 +++++++++++-------
 3 files changed, 102 insertions(+), 52 deletions(-)

diff --git a/app/components/app/patient/fields/select-disability.vue b/app/components/app/patient/fields/select-disability.vue
index 6058773a..46f6231d 100644
--- a/app/components/app/patient/fields/select-disability.vue
+++ b/app/components/app/patient/fields/select-disability.vue
@@ -5,6 +5,9 @@ import { cn } from '~/lib/utils'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
+import { disabilityCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -26,16 +29,10 @@ const {
   fieldGroupClass,
 } = props
 
-const disabilityOptions = [
-  { label: 'Tuna Daksa', value: 'daksa' },
-  { label: 'Tuna Netra', value: 'netra' },
-  { label: 'Tuna Rungu', value: 'rungu' },
-  { label: 'Tuna Wicara', value: 'wicara' },
-  { label: 'Tuna Rungu-Wicara', value: 'rungu_wicara' },
-  { label: 'Tuna Grahita', value: 'grahita' },
-  { label: 'Tuna Laras', value: 'laras' },
-  { label: 'Lainnya', value: 'other', priority: -100 },
-]
+const disabilityOptions = mapToComboboxOptList(disabilityCodes).map(({ label, value }) => ({
+  label,
+  value,
+}))
 </script>
 
 <template>
diff --git a/app/components/app/patient/preview.vue b/app/components/app/patient/preview.vue
index e94cb395..123de9cf 100644
--- a/app/components/app/patient/preview.vue
+++ b/app/components/app/patient/preview.vue
@@ -11,6 +11,7 @@ import type { ClickType } from '~/components/pub/my-ui/nav-footer'
 import { formatAddress } from '~/models/person-address'
 import {
   addressLocationTypeCode,
+  disabilityCodes,
   educationCodes,
   genderCodes,
   occupationCodes,
@@ -26,6 +27,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/
 import { Fragment } from '~/components/pub/my-ui/form/'
 import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
 import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue'
+import { Skeleton } from '~/components/pub/ui/skeleton'
 import { toZoned } from '@internationalized/date'
 
 // #region Props & Emits
@@ -47,6 +49,7 @@ const educationOptions = mapToComboboxOptList(educationCodes)
 const occupationOptions = mapToComboboxOptList(occupationCodes)
 const relationshipOptions = mapToComboboxOptList(relationshipCodes)
 const personContactTypeOptions = mapToComboboxOptList(personContactTypes)
+const disabilityOptions = mapToComboboxOptList(disabilityCodes)
 
 // Computed addresses from nested data
 const domicileAddress = computed(() => {
@@ -92,7 +95,7 @@ function onNavigate(type: ClickType) {
     type="multiple"
     class="w-full"
     collapsible
-    :defaultValue="['item-patient', 'item-address', 'item-contact', 'item-parents', 'item-relative']"
+    :defaultValue="['item-patient', 'item-document', 'item-address', 'item-contact', 'item-parents', 'item-relative']"
   >
     <Fragment
       v-slot="{ section }"
@@ -144,6 +147,34 @@ function onNavigate(type: ClickType) {
               '-'
             }}
           </DetailRow>
+          <DetailRow label="Pasien Bayi">{{ patient.newBornStatus ? 'Ya' : 'Tidak' }}</DetailRow>
+          <DetailRow label="Hambatan Komunikasi">
+            {{ patient.person.communicationIssueStatus ? 'Ya' : 'Tidak' }}
+          </DetailRow>
+          <DetailRow label="Disabilitas">
+            {{ disabilityOptions.find((item) => item.code === patient.person.disability)?.label || 'Tidak' }}
+          </DetailRow>
+        </AccordionContent>
+      </AccordionItem>
+    </Fragment>
+
+    <Fragment
+      v-slot="{ section }"
+      title="Dokumen"
+    >
+      <AccordionItem value="item-document">
+        <AccordionTrigger>{{ section }}</AccordionTrigger>
+        <AccordionContent>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-foreground">Dokumen KTP</span>
+              <Skeleton class="h-32 w-64 rounded-md" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-foreground">Dokumen KK</span>
+              <Skeleton class="h-32 w-64 rounded-md" />
+            </div>
+          </div>
         </AccordionContent>
       </AccordionItem>
     </Fragment>
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index b827ef40..2167847d 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -74,18 +74,18 @@ export const bigTimeUnitCodes: Record<string, string> = {
 }
 
 export const dischargeMethodCodes: Record<string, string> = {
-  home: "Pulang",
-  "home-request": "Pulang Atas Permintaan Sendiri",
-  "consul-back": "Konsultasi Balik / Lanjutan",
-  "consul-poly": "Konsultasi Poliklinik Lain",
-  "consul-executive": "Konsultasi Antar Dokter Eksekutif",
-  "consul-ch-day": "Konsultasi Hari Lain",
-  emergency: "Rujuk IGD",
-  "emergency-covid": "Rujuk IGD Covid",
-  inpatient: "Rujuk Rawat Inap",
-  external: "Rujuk Faskes Lain",
-  death: "Meninggal",
-  "death-on-arrival": "Meninggal Saat Tiba"
+  home: 'Pulang',
+  'home-request': 'Pulang Atas Permintaan Sendiri',
+  'consul-back': 'Konsultasi Balik / Lanjutan',
+  'consul-poly': 'Konsultasi Poliklinik Lain',
+  'consul-executive': 'Konsultasi Antar Dokter Eksekutif',
+  'consul-ch-day': 'Konsultasi Hari Lain',
+  emergency: 'Rujuk IGD',
+  'emergency-covid': 'Rujuk IGD Covid',
+  inpatient: 'Rujuk Rawat Inap',
+  external: 'Rujuk Faskes Lain',
+  death: 'Meninggal',
+  'death-on-arrival': 'Meninggal Saat Tiba',
 }
 
 export const genderCodes: Record<string, string> = {
@@ -387,13 +387,13 @@ export const medicalActionTypeCode: Record<string, string> = {
 export type medicalActionTypeCodeKey = keyof typeof medicalActionTypeCode
 
 export const encounterDocTypeCode: Record<string, string> = {
-  "person-resident-number": 'person-resident-number',
-  "person-driving-license": 'person-driving-license',
-  "person-passport": 'person-passport',
-  "person-family-card": 'person-family-card',
-  "mcu-item-result": 'mcu-item-result',
-  "vclaim-sep": 'vclaim-sep',
-  "vclaim-sipp": 'vclaim-sipp',
+  'person-resident-number': 'person-resident-number',
+  'person-driving-license': 'person-driving-license',
+  'person-passport': 'person-passport',
+  'person-family-card': 'person-family-card',
+  'mcu-item-result': 'mcu-item-result',
+  'vclaim-sep': 'vclaim-sep',
+  'vclaim-sipp': 'vclaim-sipp',
 } as const
 export type encounterDocTypeCodeKey = keyof typeof encounterDocTypeCode
 export const encounterDocOpt: { label: string; value: encounterDocTypeCodeKey }[] = [
@@ -406,20 +406,19 @@ export const encounterDocOpt: { label: string; value: encounterDocTypeCodeKey }[
   { label: 'Klaim SIPP', value: 'vclaim-sipp' },
 ]
 
-
 export const docTypeCode = {
-  "encounter-patient": 'encounter-patient',
-  "encounter-support": 'encounter-support',
-  "encounter-other": 'encounter-other',
-  "vclaim-sep": 'vclaim-sep',
-  "vclaim-sipp": 'vclaim-sipp',
+  'encounter-patient': 'encounter-patient',
+  'encounter-support': 'encounter-support',
+  'encounter-other': 'encounter-other',
+  'vclaim-sep': 'vclaim-sep',
+  'vclaim-sipp': 'vclaim-sipp',
 } as const
 export const docTypeLabel = {
-  "encounter-patient": 'Data Pasien',
-  "encounter-support": 'Data Penunjang',
-  "encounter-other": 'Lain - Lain',
-  "vclaim-sep": 'SEP',
-  "vclaim-sipp": 'SIPP',
+  'encounter-patient': 'Data Pasien',
+  'encounter-support': 'Data Penunjang',
+  'encounter-other': 'Lain - Lain',
+  'vclaim-sep': 'SEP',
+  'vclaim-sipp': 'SIPP',
 } as const
 export type docTypeCodeKey = keyof typeof docTypeCode
 export const supportingDocOpt = [
@@ -428,8 +427,7 @@ export const supportingDocOpt = [
   { label: 'Lain - Lain', value: 'encounter-other' },
 ]
 
-
-export type SurgeryType = "kecil" | "sedang" | "besar" | "khusus"
+export type SurgeryType = 'kecil' | 'sedang' | 'besar' | 'khusus'
 export const SurgeryTypeOptList: { label: string; value: SurgeryType }[] = [
   { label: 'Kecil', value: 'kecil' },
   { label: 'Sedang', value: 'sedang' },
@@ -437,14 +435,14 @@ export const SurgeryTypeOptList: { label: string; value: SurgeryType }[] = [
   { label: 'Khusus', value: 'khusus' },
 ]
 
-export type BillingCodeType = "general" | "regional" | "local"
+export type BillingCodeType = 'general' | 'regional' | 'local'
 export const BillingCodeTypeOptList: { label: string; value: BillingCodeType }[] = [
   { label: 'General', value: 'general' },
   { label: 'Regional', value: 'regional' },
   { label: 'Local', value: 'local' },
 ]
 
-export type SurgerySystemType = "cito" | "urgent" | "efektif" | "khusus"
+export type SurgerySystemType = 'cito' | 'urgent' | 'efektif' | 'khusus'
 export const SurgerySystemTypeOptList: { label: string; value: SurgerySystemType }[] = [
   { label: 'Cito', value: 'cito' },
   { label: 'Urgent', value: 'urgent' },
@@ -452,7 +450,7 @@ export const SurgerySystemTypeOptList: { label: string; value: SurgerySystemType
   { label: 'Khusus', value: 'khusus' },
 ]
 
-export type DissectionType = "bersih" | "bersih terkontaminasi" | "terkontaminasi kotor" | "kotor"
+export type DissectionType = 'bersih' | 'bersih terkontaminasi' | 'terkontaminasi kotor' | 'kotor'
 export const DissectionTypeOptList: { label: string; value: DissectionType }[] = [
   { label: 'Bersih', value: 'bersih' },
   { label: 'Bersih terkontaminasi', value: 'bersih terkontaminasi' },
@@ -460,19 +458,25 @@ export const DissectionTypeOptList: { label: string; value: DissectionType }[] =
   { label: 'Kotor', value: 'kotor' },
 ]
 
-export type SurgeryOrderType = "satu" | "ulangan"
+export type SurgeryOrderType = 'satu' | 'ulangan'
 export const SurgeryOrderTypeOptList: { label: string; value: SurgeryOrderType }[] = [
   { label: 'Satu', value: 'satu' },
   { label: 'Ulangan', value: 'ulangan' },
 ]
 
-export type BirthDescriptionType = "lahir hidup" | "lahir mati"
+export type BirthDescriptionType = 'lahir hidup' | 'lahir mati'
 export const BirthDescriptionTypeOptList: { label: string; value: BirthDescriptionType }[] = [
   { label: 'Lahir Hidup', value: 'lahir hidup' },
   { label: 'Lahir Mati', value: 'lahir mati' },
 ]
 
-export type BirthPlaceDescriptionType = "rssa" | "bidan luar" | "dokter luar" | "dukun bayi" | "puskesmas" | "paramedis luar"
+export type BirthPlaceDescriptionType =
+  | 'rssa'
+  | 'bidan luar'
+  | 'dokter luar'
+  | 'dukun bayi'
+  | 'puskesmas'
+  | 'paramedis luar'
 export const BirthPlaceDescriptionTypeOptList: { label: string; value: BirthPlaceDescriptionType }[] = [
   { label: 'RSSA', value: 'rssa' },
   { label: 'Bidan luar', value: 'bidan luar' },
@@ -482,7 +486,7 @@ export const BirthPlaceDescriptionTypeOptList: { label: string; value: BirthPlac
   { label: 'Paramedis luar', value: 'paramedis luar' },
 ]
 
-export type SpecimenType = "pa" | "mikrobiologi" | "laborat" | "tidak perlu"
+export type SpecimenType = 'pa' | 'mikrobiologi' | 'laborat' | 'tidak perlu'
 export const SpecimenTypeOptList: { label: string; value: SpecimenType }[] = [
   { label: 'PA', value: 'pa' },
   { label: 'Mikrobiologi', value: 'mikrobiologi' },
@@ -490,7 +494,15 @@ export const SpecimenTypeOptList: { label: string; value: SpecimenType }[] = [
   { label: 'Tidak perlu', value: 'tidak perlu' },
 ]
 
-export type PrbProgramType = "ashma" | "diabetes mellitus" | "hipertensi" | "penyakit jantung" | "ppok" | "schizopherenia" | "stroke" | "systemic lupus erythematosus"
+export type PrbProgramType =
+  | 'ashma'
+  | 'diabetes mellitus'
+  | 'hipertensi'
+  | 'penyakit jantung'
+  | 'ppok'
+  | 'schizopherenia'
+  | 'stroke'
+  | 'systemic lupus erythematosus'
 export const PrbProgramTypeOptList: { label: string; value: PrbProgramType }[] = [
   { label: 'ASHMA', value: 'ashma' },
   { label: 'Diabetes Mellitus', value: 'diabetes mellitus' },
@@ -500,4 +512,14 @@ export const PrbProgramTypeOptList: { label: string; value: PrbProgramType }[] =
   { label: 'Schizopherenia', value: 'schizopherenia' },
   { label: 'Stroke', value: 'stroke' },
   { label: 'Systemic Lupus Erythematosus', value: 'systemic lupus erythematosus' },
-]
\ No newline at end of file
+]
+export const disabilityCodes: Record<string, string> = {
+  daksa: 'Tuna Daksa',
+  netra: 'Tuna Netra',
+  rungu: 'Tuna Rungu',
+  wicara: 'Tuna Wicara',
+  rungu_wicara: 'Tuna Rungu-Wicara',
+  grahita: 'Tuna Grahita',
+  laras: 'Tuna Laras',
+  other: 'Lainnya',
+}