✨ feat (initial-nursing): add initial nursing entry form and preview

app/components/app/initial-nursing/entry-form.vue

@@ -12,10 +12,10 @@ import { genBase } from '~/models/_base'
 
 interface Masalah {
   id: number
-  tanggalMuncul: string
+  date: string
   diagnosa: string
-  tanggalTeratasi: string
+  finishDate: string
-  petugas: string
+  staff: string
 }
 
 const props = defineProps<{
@@ -84,10 +84,10 @@ const validate = async () => {
 
 const form = ref<Masalah>({
   id: 0,
-  tanggalMuncul: '',
+  date: '',
   diagnosa: '',
-  tanggalTeratasi: '',
+  finishDate: '',
-  petugas: '',
+  staff: '',
 })
 
 const list = ref<Masalah[]>([])
@@ -97,10 +97,10 @@ const showForm = ref(false)
 const resetForm = () => {
   form.value = {
     id: 0,
-    tanggalMuncul: '',
+    date: '',
     diagnosa: '',
-    tanggalTeratasi: '',
+    finishDate: '',
-    petugas: '',
+    staff: '',
   }
   isEditing.value = false
 }
@@ -112,15 +112,14 @@ const openAdd = () => {
 
 const submitForm = () => {
   if (isEditing.value) {
-    // update
     const index = list.value.findIndex((v) => v.id === form.value.id)
     if (index !== -1) list.value[index] = { ...form.value }
   } else {
-    // tambah baru
     list.value.push({
       ...form.value,
       id: Date.now(),
     })
+    emit('click', { type: 'add-problem', data: list.value })
   }
 
   showForm.value = false
@@ -431,7 +430,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
         <div>
           <Label>Tanggal Muncul</Label>
           <Input
-            v-model="form.tanggalMuncul"
+            v-model="form.date"
             type="date"
           />
         </div>
@@ -444,14 +443,14 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
         <div>
           <Label class="font-medium">Tanggal Teratasi</Label>
           <Input
-            v-model="form.tanggalTeratasi"
+            v-model="form.finishDate"
             type="date"
           />
         </div>
 
         <div>
           <Label class="font-medium">Nama Petugas</Label>
-          <Input v-model="form.petugas" />
+          <Input v-model="form.staff" />
         </div>
 
         <div class="mt-2 flex gap-2">
@@ -490,10 +489,10 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
               :key="item.id"
               class="border"
             >
-              <td class="border p-2">{{ item.tanggalMuncul }}</td>
+              <td class="border p-2">{{ item.date }}</td>
               <td class="border p-2">{{ item.diagnosa }}</td>
-              <td class="border p-2">{{ item.tanggalTeratasi }}</td>
+              <td class="border p-2">{{ item.finishDate }}</td>
-              <td class="border p-2">{{ item.petugas }}</td>
+              <td class="border p-2">{{ item.staff }}</td>
               <td class="flex justify-center gap-4 border p-2">
                 <Icon
                   @click="editItem(item)"

app/components/app/initial-nursing/list-cfg.ts

@@ -6,21 +6,13 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
 export const config: Config = {
-  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
+  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 50 }],
 
   headers: [
-    [
+    [{ label: 'Tanggal' }, { label: 'Diagnosa' }, { label: 'Tanggal Selesai' }, { label: 'Staff' }, { label: 'Aksi' }],
-      { label: 'Tanggal' },
-      { label: 'DPJP' },
-      { label: 'Keluhan & Riwayat' },
-      { label: 'Pemeriksaan' },
-      { label: 'Diagnosa' },
-      { label: 'Status' },
-      { label: 'Aksi' },
-    ],
   ],
 
-  keys: ['time', 'employee_id', 'main_complaint', 'encounter', 'diagnose', 'status', 'action'],
+  keys: ['date', 'diagnosa', 'finishDate', 'staff', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },

app/components/app/initial-nursing/preview.vue

@@ -1,177 +1,127 @@
 <script setup lang="ts">
-const data = {
+const props = defineProps<{
-  jamTanggal: '14 Desember 2025, 12.00',
+  preview: any
-  keluhan:
+}>()
-    'Pasien mengeluh nyeri perut bagian kanan bawah sejak 2 hari yang lalu, disertai mual dan penurunan nafsu makan.',
-  alergiObat: {
-    nama: 'antibiotik',
-    sebutkan: 'Amoxicilin, Sulfametoksazol, Gentamicin sulfate',
-    reaksi: 'gatal-gatal dan ruam di kulit',
-  },
-  alergiMakanan: {
-    nama: 'Seafood',
-    sebutkan: 'Udang, Cumi',
-    reaksi: 'gatal dan bengkak',
-  },
-  alergiLain: {
-    nama: '-',
-    sebutkan: '-',
-    reaksi: '-',
-  },
-  kajianNyeri: {
-    ada: 'Ya',
-    skala: 'Ringan',
-    waktu: 'Hilang Timbul',
-    durasi: '5 - 15 menit',
-    frekuensi: 'sekitar 3–4 kali dalam sehari',
-    lokasi: 'Tangan',
-  },
-  skriningNutrisi:
-    'Nafsu makan menurun 3 hari terakhir, asupan makan hanya setengah porsi biasa. Berat badan turun 1 kg dalam 1 minggu terakhir.',
-  psikoSosial:
-    'Pasien tampak cemas terhadap kondisi penyakitnya. Didampingi oleh suami. Komunikasi baik dan kooperatif. Tidak ada pantangan budaya khusus. Pasien rutin berdoa dan merasa lebih tenang setelah ibadah.',
-
-  objektif: {
-    keadaanUmum:
-      'Pasien tampak sadar, compos mentis, tampak lemas, dengan ekspresi nyeri ringan. TTV: TD 110/70 mmHg, Nadi 84x/menit, RR 20x/menit, Suhu 37.8°C.',
-    penunjang:
-      'Hasil lab: Leukosit meningkat (12.500/µL), Hb 13 g/dL. USG abdomen menunjukkan tanda-tanda apendisitis ringan. Tidak ada kelainan pada organ lain.',
-    risikoJatuh: 'Ya',
-    gelangRisikoJatuh: 'Ya',
-    gelangAlergi: 'Ya',
-  },
-}
 </script>
 
 <template>
   <div class="p-1 text-sm">
-    <!-- JAM TANGGAL -->
     <div class="mb-4 flex gap-3">
       <span class="w-40 font-semibold">Jam Tanggal</span>
-      <span>: {{ data.jamTanggal }}</span>
+      <span>: {{ '-' }}</span>
     </div>
 
     <hr class="my-4" />
 
-    <!-- A. DATA SUBYEKTIF -->
     <h2 class="mb-3 font-semibold">A. Data Subyektif</h2>
 
     <div class="space-y-3">
-      <!-- Keluhan -->
       <div class="flex">
         <span class="w-40 font-medium">Keluhan Pasien</span>
-        <span>: {{ data.keluhan }}</span>
+        <span>: {{ preview?.['pri-complain'] || '-' }}</span>
       </div>
 
-      <!-- Riwayat Alergi -->
       <div>
         <div class="flex">
           <span class="w-40 font-medium">Riwayat Alergi dan Reaksi</span>
           <span>:</span>
         </div>
 
-        <!-- Alergi Obat -->
         <div class="mt-1 space-y-1 pl-10">
           <div class="flex">
             <span class="w-28">a. Obat</span>
-            <span>: {{ data.alergiObat.nama }}</span>
+            <span>: {{ preview?.['med-type'] || '-' }}</span>
             <span class="ml-6 w-20">Sebutkan</span>
-            <span>: {{ data.alergiObat.sebutkan }}</span>
+            <span>: {{ preview?.['med-name'] || '-' }}</span>
             <span class="ml-6 w-16">Reaksi</span>
-            <span>: {{ data.alergiObat.reaksi }}</span>
+            <span>: {{ preview?.['med-reaction'] || '-' }}</span>
           </div>
 
-          <!-- Alergi makanan -->
           <div class="flex">
             <span class="w-28">b. Makanan</span>
-            <span>: {{ data.alergiMakanan.nama }}</span>
+            <span>: {{ preview?.['food-type'] || '-' }}</span>
             <span class="ml-6 w-20">Sebutkan</span>
-            <span>: {{ data.alergiMakanan.sebutkan }}</span>
+            <span>: {{ preview?.['food-name'] || '-' }}</span>
             <span class="ml-6 w-16">Reaksi</span>
-            <span>: {{ data.alergiMakanan.reaksi }}</span>
+            <span>: {{ preview?.['food-reaction'] || '-' }}</span>
           </div>
 
-          <!-- Alergi lain -->
           <div class="flex">
             <span class="w-28">c. Lain-lain</span>
-            <span>: {{ data.alergiLain.nama }}</span>
+            <span>: {{ preview?.['other-type'] || '-' }}</span>
             <span class="ml-6 w-20">Sebutkan</span>
-            <span>: {{ data.alergiLain.sebutkan }}</span>
+            <span>: {{ preview?.['other-name'] || '-' }}</span>
             <span class="ml-6 w-16">Reaksi</span>
-            <span>: {{ data.alergiLain.reaksi }}</span>
+            <span>: {{ preview?.['other-reaction'] || '-' }}</span>
           </div>
         </div>
       </div>
 
-      <!-- Kajian Nyeri -->
       <div class="flex">
         <span class="w-40 font-medium">Kajian Nyeri</span>
-        <span>: {{ data.kajianNyeri.ada }}</span>
+        <span>: {{ preview?.['pain-asst'] || '-' }}</span>
       </div>
 
       <div class="flex">
         <span class="w-40">Skala Nyeri</span>
-        <span>: {{ data.kajianNyeri.skala }}</span>
+        <span>: {{ preview?.['pain-scale'] || '-' }}</span>
       </div>
       <div class="flex">
         <span class="w-40">Waktu Nyeri</span>
-        <span>: {{ data.kajianNyeri.waktu }}</span>
+        <span>: {{ preview?.['pain-time'] || '-' }}</span>
       </div>
       <div class="flex">
         <span class="w-40">Durasi Nyeri</span>
-        <span>: {{ data.kajianNyeri.durasi }}</span>
+        <span>: {{ preview?.['pain-duration'] || '-' }}</span>
       </div>
       <div class="flex">
         <span class="w-40">Frekwensi Nyeri</span>
-        <span>: {{ data.kajianNyeri.frekuensi }}</span>
+        <span>: {{ preview?.['pain-freq'] || '-' }}</span>
       </div>
       <div class="flex">
         <span class="w-40">Lokasi</span>
-        <span>: {{ data.kajianNyeri.lokasi }}</span>
+        <span>: {{ preview?.['pain-loc'] || '-' }}</span>
       </div>
 
-      <!-- Skrining Nutrisi -->
       <div class="flex">
         <span class="w-40 font-medium">Skrining Nutrisi</span>
-        <span>: {{ data.skriningNutrisi }}</span>
+        <span>: {{ preview?.['nut-screening'] || '-' }}</span>
       </div>
 
-      <!-- Psiko Sosio -->
       <div class="flex">
         <span class="w-40 font-medium">Kajian psiko-sosio-kultural-spiritual</span>
-        <span>: {{ data.psikoSosial }}</span>
+        <span>: {{ preview?.['spiritual-asst'] || '-' }}</span>
       </div>
     </div>
 
     <hr class="my-4" />
 
-    <!-- B. DATA OBYEKTIF -->
     <h2 class="mb-3 font-semibold">B. Data Obyektif</h2>
 
     <div class="space-y-3">
       <div class="flex">
         <span class="w-40 font-medium">Keadaan Umum</span>
-        <span>: {{ data.objektif.keadaanUmum }}</span>
+        <span>: {{ preview?.['general-condition'] || '-' }}</span>
       </div>
 
       <div class="flex">
         <span class="w-40 font-medium">Pemeriksaan Penunjang</span>
-        <span>: {{ data.objektif.penunjang }}</span>
+        <span>: {{ preview?.['support-exam'] || '-' }}</span>
       </div>
 
       <div class="flex">
         <span class="w-40 font-medium">Risiko Jatuh</span>
-        <span>: {{ data.objektif.risikoJatuh }}</span>
+        <span>: {{ preview?.['risk-fall'] || '-' }}</span>
       </div>
 
       <div class="flex">
         <span class="w-40 font-medium">Pemakaian Gelang Risiko Jatuh</span>
-        <span>: {{ data.objektif.gelangRisikoJatuh }}</span>
+        <span>: {{ preview?.['bracelet'] || '-' }}</span>
       </div>
 
       <div class="flex">
         <span class="w-40 font-medium">Pasang Gelang Alergi</span>
-        <span>: {{ data.objektif.gelangAlergi }}</span>
+        <span>: {{ preview?.['bracelet-alg'] || '-' }}</span>
       </div>
     </div>
   </div>

app/components/content/initial-nursing/form.vue

@@ -23,6 +23,7 @@ const payload = ref({
   typeCode: 'early-nursery',
   value: '',
 })
+const listProblem = ref([])
 
 const model = ref({
   'pri-complain': '',
@@ -54,9 +55,11 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-function handleOpen(type: string) {
+function handleOpen(event: any) {
-  if (type === 'fungsional') {
+  console.log('handleOpen', event.type)
-    isOpenDiagnose.value = true
+  const type = event.type
+  if (type === 'add-problem') {
+    listProblem.value = event.data
   }
 }
 
@@ -68,8 +71,8 @@ async function actionHandler(type: string) {
   }
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
-    if (selectedDiagnose.value?.length > 0) {
+    if (listProblem.value?.length > 0) {
-      result.data.diagnose = selectedDiagnose.value || []
+      result.data.listProblem = listProblem.value || []
     }
     console.log('data', result.data)
     handleActionSave(
@@ -79,7 +82,8 @@ async function actionHandler(type: string) {
         encounter_id: +route.params.id,
         time: new Date().toISOString(),
       },
-      {},
+      () => {},
+      () => {},
       toast,
     )
 

app/components/content/initial-nursing/list.vue

@@ -50,6 +50,7 @@ let units = ref<{ value: string; label: string }[]>([])
 const encounterId = ref<number>(props?.encounter?.id || 0)
 const title = ref('')
 const id = route.params.id
+const descData = ref({})
 
 const {
   data,
@@ -68,6 +69,7 @@ const {
       search,
       page,
     })
+    console.log('masukkk', result)
     if (result.success) {
       data.value = result.body.data
     }
@@ -116,6 +118,30 @@ const getMyDetail = async (id: number | string) => {
   }
 }
 
+const mappedData = computed(() => {
+  if (!data.value || data.value.length === 0) return []
+
+  const raw = data.value[0]
+
+  // Pastikan raw.value adalah string JSON
+  let parsed: any = {}
+  try {
+    parsed = JSON.parse(raw.value || '{}')
+  } catch (err) {
+    console.error('JSON parse error:', err)
+    return []
+  }
+
+  // Ambil listProblem
+  const list = parsed.listProblem || []
+  const textData = parsed
+
+  // Untuk keamanan: pastikan selalu array
+  if (!Array.isArray(list)) return []
+
+  return { list, textData }
+})
+
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -149,14 +175,12 @@ onMounted(async () => {
     class="mb-4 xl:mb-5"
   />
 
-  <Preview />
+  <Preview :preview="mappedData.textData" />
 
   <h2 class="my-3 p-1 font-semibold">C. Daftar Masalah Keperawatan</h2>
-  <List
+  <List :data="mappedData.list || []" />
-    :data="data"
+  <!-- :pagination-meta="paginationMeta" -->
-    :pagination-meta="paginationMeta"
+  <!-- @page-change="handlePageChange" -->
-    @page-change="handlePageChange"
-  />
 
   <!-- Record Confirmation Modal -->
   <RecordConfirmation