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/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>

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>