From e5a227989bc53b3f4f602fdc51f5b516d02d66ae Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Mon, 1 Dec 2025 22:53:42 +0700
Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat=20(encounter):=20add=20ini?=
 =?UTF-8?q?tial=20nursing=20study=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/initial-nursing/entry-form.vue        | 525 ++++++++++++++++++
 .../app/initial-nursing/list-cfg.ts           |  81 +++
 app/components/app/initial-nursing/list.vue   |  14 +
 .../app/initial-nursing/preview.vue           | 178 ++++++
 app/components/content/encounter/process.vue  |   7 +
 .../content/initial-nursing/entry.vue         |  36 ++
 .../content/initial-nursing/form.vue          | 155 ++++++
 .../content/initial-nursing/list.vue          | 186 +++++++
 app/schemas/soapi.schema.ts                   |  26 +
 9 files changed, 1208 insertions(+)
 create mode 100644 app/components/app/initial-nursing/entry-form.vue
 create mode 100644 app/components/app/initial-nursing/list-cfg.ts
 create mode 100644 app/components/app/initial-nursing/list.vue
 create mode 100644 app/components/app/initial-nursing/preview.vue
 create mode 100644 app/components/content/initial-nursing/entry.vue
 create mode 100644 app/components/content/initial-nursing/form.vue
 create mode 100644 app/components/content/initial-nursing/list.vue

diff --git a/app/components/app/initial-nursing/entry-form.vue b/app/components/app/initial-nursing/entry-form.vue
new file mode 100644
index 00000000..55b65228
--- /dev/null
+++ b/app/components/app/initial-nursing/entry-form.vue
@@ -0,0 +1,525 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+interface Masalah {
+  id: number
+  tanggalMuncul: string
+  diagnosa: string
+  tanggalTeratasi: string
+  petugas: string
+}
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+// Subjective
+const [primaryComplaint, primaryComplaintAttrs] = defineField('pri-complain')
+const [medType, medTypeAttrs] = defineField('med-type')
+const [medName, medNameAttrs] = defineField('med-name')
+const [medReaction, medReactionAttrs] = defineField('med-reaction')
+const [foodType, foodTypeAttrs] = defineField('food-type')
+const [foodName, foodNameAttrs] = defineField('food-name')
+const [foodReaction, foodReactionAttrs] = defineField('food-reaction')
+const [otherType, otherTypeAttrs] = defineField('other-type')
+const [otherName, otherNameAttrs] = defineField('other-name')
+const [otherReaction, otherReactionAttrs] = defineField('other-reaction')
+const [painAsst, painAsstAttrs] = defineField('pain-asst')
+const [painScale, painScaleAttrs] = defineField('pain-scale')
+const [painTime, painTimeAttrs] = defineField('pain-time')
+const [painDuration, painDurationAttrs] = defineField('pain-duration')
+const [painFreq, painFreqAttrs] = defineField('pain-freq')
+const [painLoc, painLocAttrs] = defineField('pain-loc')
+const [nutScreening, nutScreeningAttrs] = defineField('nut-screening')
+const [spiritualAsst, spiritualAsstAttrs] = defineField('spiritual-asst')
+
+// Objective
+const [generalCondition, generalConditionAttrs] = defineField('general-condition')
+const [supportExam, supportExamAttrs] = defineField('support-exam')
+const [riskFall, riskFallAttrs] = defineField('risk-fall')
+const [bracelet, braceletAttrs] = defineField('bracelet')
+const [braceletAlg, braceletAlgAttrs] = defineField('bracelet-alg')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+const form = ref<Masalah>({
+  id: 0,
+  tanggalMuncul: '',
+  diagnosa: '',
+  tanggalTeratasi: '',
+  petugas: '',
+})
+
+const list = ref<Masalah[]>([])
+const isEditing = ref(false)
+const showForm = ref(false)
+
+const resetForm = () => {
+  form.value = {
+    id: 0,
+    tanggalMuncul: '',
+    diagnosa: '',
+    tanggalTeratasi: '',
+    petugas: '',
+  }
+  isEditing.value = false
+}
+
+const openAdd = () => {
+  resetForm()
+  showForm.value = true
+}
+
+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(),
+    })
+  }
+
+  showForm.value = false
+  resetForm()
+}
+
+const editItem = (item: Masalah) => {
+  form.value = { ...item }
+  isEditing.value = true
+  showForm.value = true
+}
+
+const deleteItem = (id: number) => {
+  list.value = list.value.filter((v) => v.id !== id)
+}
+
+defineExpose({ validate })
+const icdPreview = inject('icdPreview')
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div>
+        <h1 class="font-semibold">A. Data Subyektif</h1>
+      </div>
+
+      <div class="my-2">
+        <Block>
+          <Cell>
+            <Label dynamic>Keluhan Pasien</Label>
+            <Field :errMessage="errors['pri-complain']">
+              <Textarea
+                v-model="primaryComplaint"
+                v-bind="primaryComplaintAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <span class="mb-4 text-sm font-semibold">Riwayat Alergi dan Reaksi Alergi</span>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>a. Obat</Label>
+            <Field>
+              <Input
+                v-model="medType"
+                v-bind="medTypeAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="medName"
+                v-bind="medNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="medReaction"
+                v-bind="medReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>b. Makanan</Label>
+            <Field>
+              <Input
+                v-model="foodType"
+                v-bind="foodTypeAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="foodName"
+                v-bind="foodNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="foodReaction"
+                v-bind="foodReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>c. Lain-Lain</Label>
+            <Field>
+              <Input
+                v-model="otherType"
+                v-bind="otherTypeAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="otherName"
+                v-bind="otherNameAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="otherReaction"
+                v-bind="otherReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <div class="my-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Kajian Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painAsst"
+                v-bind="painAsstAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Skala Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painScale"
+                v-bind="painScaleAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Waktu Nyeri</Label>
+            <Field>
+              <Input
+                v-model="paintTime"
+                v-bind="painTimeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Durasi Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painDuration"
+                v-bind="painDurationAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Frequensi Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painFreq"
+                v-bind="painFreqAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lokasi</Label>
+            <Field>
+              <Input
+                v-model="painLoc"
+                v-bind="painLocAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Skrining Nutrisi</Label>
+            <Field>
+              <Textarea
+                v-model="nutScreening"
+                v-bind="nutScreeningAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kajian Spiritual</Label>
+            <Field>
+              <Textarea
+                v-model="spiritualAsst"
+                v-bind="spiritualAsstAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">B. Data Obyektif</h1>
+      </div>
+
+      <div class="my-2">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Keadaan Umum</Label>
+            <Field>
+              <Textarea
+                v-model="generalCondition"
+                v-bind="generalConditionAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Pemeriksaan Penunjang</Label>
+            <Field>
+              <Input
+                v-model="supportExam"
+                v-bind="supportExamAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Risiko Jatuh</Label>
+            <Field>
+              <Input
+                v-model="riskFall"
+                v-bind="riskFallAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Pemakaian Gelang</Label>
+            <Field>
+              <Input
+                v-model="bracelet"
+                v-bind="braceletAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Pasang Gelang Alergi</Label>
+            <Field>
+              <Input
+                v-model="braceletAlg"
+                v-bind="braceletAlgAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="my-3 font-semibold">C. Daftar Masalah Keperawatan</h1>
+
+        <Button
+          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+          type="button"
+          @click="showForm = true"
+        >
+          + Tambah
+        </Button>
+      </div>
+
+      <div
+        v-if="showForm"
+        class="mb-4 space-y-3 rounded border bg-gray-50 p-4 shadow-sm"
+      >
+        <div>
+          <Label>Tanggal Muncul</Label>
+          <Input
+            v-model="form.tanggalMuncul"
+            type="date"
+          />
+        </div>
+
+        <div>
+          <Label class="font-medium">Diagnosa Keperawatan</Label>
+          <Input v-model="form.diagnosa" />
+        </div>
+
+        <div>
+          <Label class="font-medium">Tanggal Teratasi</Label>
+          <Input
+            v-model="form.tanggalTeratasi"
+            type="date"
+          />
+        </div>
+
+        <div>
+          <Label class="font-medium">Nama Petugas</Label>
+          <Input v-model="form.petugas" />
+        </div>
+
+        <div class="mt-2 flex gap-2">
+          <Button
+            @click="submitForm"
+            type="button"
+          >
+            {{ isEditing ? 'Update' : 'Tambah' }}
+          </Button>
+
+          <Button
+            @click="showForm = false"
+            type="button"
+            class="rounded bg-gray-300 px-3 py-1"
+          >
+            Batal
+          </Button>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <table class="w-full border text-sm">
+          <thead class="bg-gray-100">
+            <tr>
+              <th class="border p-2">Tanggal Muncul</th>
+              <th class="border p-2">Diagnosa</th>
+              <th class="border p-2">Tanggal Teratasi</th>
+              <th class="border p-2">Petugas</th>
+              <th class="w-28 border p-2">Aksi</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="item in list"
+              :key="item.id"
+              class="border"
+            >
+              <td class="border p-2">{{ item.tanggalMuncul }}</td>
+              <td class="border p-2">{{ item.diagnosa }}</td>
+              <td class="border p-2">{{ item.tanggalTeratasi }}</td>
+              <td class="border p-2">{{ item.petugas }}</td>
+              <td class="flex justify-center gap-4 border p-2">
+                <Icon
+                  @click="editItem(item)"
+                  name="i-lucide-pencil"
+                  class="h-4 w-4 cursor-pointer"
+                />
+
+                <Icon
+                  @click="deleteItem(item.id)"
+                  name="i-lucide-trash"
+                  class="h-4 w-4 cursor-pointer"
+                />
+              </td>
+            </tr>
+
+            <tr v-if="list.length === 0">
+              <td
+                colspan="5"
+                class="p-4 text-center text-gray-500"
+              >
+                Belum ada data
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/initial-nursing/list-cfg.ts b/app/components/app/initial-nursing/list-cfg.ts
new file mode 100644
index 00000000..3db1b24a
--- /dev/null
+++ b/app/components/app/initial-nursing/list-cfg.ts
@@ -0,0 +1,81 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+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 }],
+
+  headers: [
+    [
+      { 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'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    time(rec: any) {
+      return rec.time ? new Date(rec.time).toLocaleDateString() : ''
+    },
+    main_complaint(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        console.log('parsed', parsed)
+        return parsed?.['prim-compl'] || '-'
+      } catch {
+        return '-'
+      }
+    },
+    encounter(rec: any) {
+      const data = rec?.encounter ?? {}
+      return data?.class_code || '-'
+    },
+    diagnose(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        const diagnose = parsed?.diagnose || []
+        return diagnose.map((d: any) => d.name).join(', ')
+      } catch {
+        return '-'
+      }
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/initial-nursing/list.vue b/app/components/app/initial-nursing/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/initial-nursing/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/initial-nursing/preview.vue b/app/components/app/initial-nursing/preview.vue
new file mode 100644
index 00000000..cce6debf
--- /dev/null
+++ b/app/components/app/initial-nursing/preview.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+const data = {
+  jamTanggal: '14 Desember 2025, 12.00',
+  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>
+    </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>
+      </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 class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ data.alergiObat.sebutkan }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ data.alergiObat.reaksi }}</span>
+          </div>
+
+          <!-- Alergi makanan -->
+          <div class="flex">
+            <span class="w-28">b. Makanan</span>
+            <span>: {{ data.alergiMakanan.nama }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ data.alergiMakanan.sebutkan }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ data.alergiMakanan.reaksi }}</span>
+          </div>
+
+          <!-- Alergi lain -->
+          <div class="flex">
+            <span class="w-28">c. Lain-lain</span>
+            <span>: {{ data.alergiLain.nama }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ data.alergiLain.sebutkan }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ data.alergiLain.reaksi }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Kajian Nyeri -->
+      <div class="flex">
+        <span class="w-40 font-medium">Kajian Nyeri</span>
+        <span>: {{ data.kajianNyeri.ada }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40">Skala Nyeri</span>
+        <span>: {{ data.kajianNyeri.skala }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Waktu Nyeri</span>
+        <span>: {{ data.kajianNyeri.waktu }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Durasi Nyeri</span>
+        <span>: {{ data.kajianNyeri.durasi }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Frekwensi Nyeri</span>
+        <span>: {{ data.kajianNyeri.frekuensi }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Lokasi</span>
+        <span>: {{ data.kajianNyeri.lokasi }}</span>
+      </div>
+
+      <!-- Skrining Nutrisi -->
+      <div class="flex">
+        <span class="w-40 font-medium">Skrining Nutrisi</span>
+        <span>: {{ data.skriningNutrisi }}</span>
+      </div>
+
+      <!-- Psiko Sosio -->
+      <div class="flex">
+        <span class="w-40 font-medium">Kajian psiko-sosio-kultural-spiritual</span>
+        <span>: {{ data.psikoSosial }}</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>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pemeriksaan Penunjang</span>
+        <span>: {{ data.objektif.penunjang }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Risiko Jatuh</span>
+        <span>: {{ data.objektif.risikoJatuh }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pemakaian Gelang Risiko Jatuh</span>
+        <span>: {{ data.objektif.gelangRisikoJatuh }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pasang Gelang Alergi</span>
+        <span>: {{ data.objektif.gelangAlergi }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 02fc7495..32590183 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -26,6 +26,7 @@ import DocUploadList from '~/components/content/document-upload/list.vue'
 import GeneralConsentList from '~/components/content/general-consent/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
 import ControlLetterList from '~/components/content/control-letter/list.vue'
+import InitialNursingStudy from '~/components/content/initial-nursing/entry.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -77,6 +78,12 @@ const tabs: TabItem[] = [
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
   { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
+  {
+    value: 'initial-nursing-study',
+    label: 'Kajian Awal Keperawatan',
+    component: InitialNursingStudy,
+    props: { encounter: data },
+  },
   { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
   { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
   { value: 'device', label: 'Order Alkes' },
diff --git a/app/components/content/initial-nursing/entry.vue b/app/components/content/initial-nursing/entry.vue
new file mode 100644
index 00000000..5769e967
--- /dev/null
+++ b/app/components/content/initial-nursing/entry.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode'
+
+import List from './list.vue'
+import Form from './form.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+const route = useRoute()
+
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry"
+    />
+    <Form
+      v-else
+      @back="backToList"
+    />
+  </div>
+</template>
diff --git a/app/components/content/initial-nursing/form.vue b/app/components/content/initial-nursing/form.vue
new file mode 100644
index 00000000..64ddf1dc
--- /dev/null
+++ b/app/components/content/initial-nursing/form.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/initial-nursing/entry-form.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { InitialNursingSchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+const { backToList } = useQueryMode('mode')
+
+const route = useRoute()
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const schema = InitialNursingSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'initial-nursing',
+  value: '',
+})
+
+const model = ref({
+  'pri-complain': '',
+  'med-type': '',
+  'med-name': '',
+  'med-reaction': '',
+  'food-type': '',
+  'food-name': '',
+  'food-reaction': '',
+  'other-type': '',
+  'other-name': '',
+  'other-reaction': '',
+  'pain-asst': '',
+  'pain-scale': '',
+  'pain-time': '',
+  'pain-duration': '',
+  'pain-freq': '',
+  'pain-loc': '',
+  'nut-screening': '',
+  'spiritual-asst': '',
+  'general-condition': '',
+  'support-exam': '',
+  'risk-fall': '',
+  bracelet: '',
+  'bracelet-alg': '',
+})
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getDiagnoses() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/diagnose-src')
+  if (resp.success) {
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getProcedures()
+  getDiagnoses()
+})
+
+function handleOpen(type: string) {
+  if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
+}
+
+const entryRehabRef = ref()
+async function actionHandler(type: string) {
+  if (type === 'back') {
+    backToList()
+    return
+  }
+  const result = await entryRehabRef.value?.validate()
+  if (result?.valid) {
+    if (selectedDiagnose.value?.length > 0) {
+      result.data.diagnose = selectedDiagnose.value || []
+    }
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
+provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
+</script>
+<template>
+  <Entry
+    ref="entryRehabRef"
+    v-model="model"
+    :schema="schema"
+    type="early-rehab"
+    @click="handleOpen"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Fungsional"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+</template>
diff --git a/app/components/content/initial-nursing/list.vue b/app/components/content/initial-nursing/list.vue
new file mode 100644
index 00000000..31cbac96
--- /dev/null
+++ b/app/components/content/initial-nursing/list.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/initial-nursing/list.vue'
+import Preview from '~/components/app/initial-nursing/preview.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/consultation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+const route = useRoute()
+
+const { recordId } = useQueryCRUDRecordId()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+const id = route.params.id
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      'encounter-id': id,
+      typeCode: 'dev-record',
+      includes: 'encounter',
+      search,
+      page,
+    })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'initial-nursing',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kajian Awal Keperawatan',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      goToEntry()
+      emits('add')
+    },
+  },
+}
+
+const today = new Date()
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      emits('edit')
+      recordId.value = recId.value
+      console.log('recordId', recId.value)
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Preview />
+
+  <h2 class="my-3 p-1 font-semibold">C. Daftar Masalah Keperawatan</h2>
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/schemas/soapi.schema.ts b/app/schemas/soapi.schema.ts
index 2f5f8667..1d4faaba 100644
--- a/app/schemas/soapi.schema.ts
+++ b/app/schemas/soapi.schema.ts
@@ -153,6 +153,32 @@ export const ObjectSchema = z.object({
   'head-to-toe': z.record(z.string()).default({}),
 })
 
+export const InitialNursingSchema = z.object({
+  'pri-complain': z.string().default(''),
+  'med-type': z.string().default(''),
+  'med-name': z.string().default(''),
+  'med-reaction': z.string().default(''),
+  'food-type': z.string().default(''),
+  'food-name': z.string().default(''),
+  'food-reaction': z.string().default(''),
+  'other-type': z.string().default(''),
+  'other-name': z.string().default(''),
+  'other-reaction': z.string().default(''),
+  'pain-asst': z.string().default(''),
+  'pain-scale': z.string().default(''),
+  'pain-time': z.string().default(''),
+  'pain-duration': z.string().default(''),
+  'pain-freq': z.string().default(''),
+  'pain-loc': z.string().default(''),
+  'nut-screening': z.string().default(''),
+  'spiritual-asst': z.string().default(''),
+  'general-condition': z.string().default(''),
+  'support-exam': z.string().default(''),
+  'risk-fall': z.string().default(''),
+  bracelet: z.string().default(''),
+  'bracelet-alg': z.string().default(''),
+})
+
 const AssessmentSchema = z.object({
   'early-diag': AssessmentSectionSchema,
   'late-diag': AssessmentSectionSchema,

From b24a33c802e7bba7126ae63d3f091d7bfc492134 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 2 Dec 2025 14:27:41 +0700
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=90=9B=20fix=20(initial-nursing):=20c?=
 =?UTF-8?q?orrect=20typecode=20value?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/content/initial-nursing/form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/content/initial-nursing/form.vue b/app/components/content/initial-nursing/form.vue
index 64ddf1dc..71dae2b8 100644
--- a/app/components/content/initial-nursing/form.vue
+++ b/app/components/content/initial-nursing/form.vue
@@ -20,7 +20,7 @@ const schema = InitialNursingSchema
 const payload = ref({
   encounter_id: 0,
   time: '',
-  typeCode: 'initial-nursing',
+  typeCode: 'early-nursery',
   value: '',
 })
 

From a1a2a92ebd01c94a785e59640dd2d49b5eb220aa Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 2 Dec 2025 14:45:51 +0700
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20chore=20(initial-nursi?=
 =?UTF-8?q?ng):=20remove=20unused=20functions=20and=20adjust=20type=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../content/initial-nursing/form.vue          | 25 ++-----------------
 .../content/initial-nursing/list.vue          |  4 +--
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/app/components/content/initial-nursing/form.vue b/app/components/content/initial-nursing/form.vue
index 71dae2b8..33f23dcb 100644
--- a/app/components/content/initial-nursing/form.vue
+++ b/app/components/content/initial-nursing/form.vue
@@ -54,29 +54,6 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getDiagnoses() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/diagnose-src')
-  if (resp.success) {
-    diagnoses.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-async function getProcedures() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/procedure-src')
-  if (resp.success) {
-    procedures.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getProcedures()
-  getDiagnoses()
-})
-
 function handleOpen(type: string) {
   if (type === 'fungsional') {
     isOpenDiagnose.value = true
@@ -105,6 +82,8 @@ async function actionHandler(type: string) {
       {},
       toast,
     )
+
+    backToList()
   } else {
     console.log('Ada error di form', result)
   }
diff --git a/app/components/content/initial-nursing/list.vue b/app/components/content/initial-nursing/list.vue
index 31cbac96..2e783337 100644
--- a/app/components/content/initial-nursing/list.vue
+++ b/app/components/content/initial-nursing/list.vue
@@ -27,7 +27,7 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/consultation.handler'
+} from '~/handlers/soapi-early.handler'
 
 // Services
 import { getList, getDetail } from '~/services/soapi-early.service'
@@ -63,7 +63,7 @@ const {
   fetchFn: async ({ page, search }) => {
     const result = await getList({
       'encounter-id': id,
-      typeCode: 'dev-record',
+      'type-code': 'early-nursery',
       includes: 'encounter',
       search,
       page,

From ff4aefa593768227be21b2eabe53355960572f06 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 2 Dec 2025 14:46:53 +0700
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20fix=20(api):=20correct=20typ?=
 =?UTF-8?q?e=20code=20parameter=20name=20in=20api=20requests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/content/cprj/list.vue  | 2 +-
 app/components/content/soapi/list.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/content/cprj/list.vue b/app/components/content/cprj/list.vue
index 109bea6b..6da61716 100644
--- a/app/components/content/cprj/list.vue
+++ b/app/components/content/cprj/list.vue
@@ -63,7 +63,7 @@ const {
   fetchFn: async ({ page, search }) => {
     const result = await getList({
       'encounter-id': id,
-      typeCode: 'dev-record',
+      'type-code': 'dev-record',
       includes: 'encounter',
       search,
       page,
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
index a23d8434..6980871c 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -71,7 +71,7 @@ onMounted(async () => {
 })
 
 async function getMyList() {
-  const url = `/api/v1/soapi?typeCode=${typeCode.value}&includes=encounter,employee&encounter-id=${route.params.id}`
+  const url = `/api/v1/soapi?type-code=${typeCode.value}&includes=encounter,employee&encounter-id=${route.params.id}`
   const resp = await xfetch(url)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data

From 3038448f4ac64fa5f4e2c5ca3a948565d501c871 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 2 Dec 2025 16:48:24 +0700
Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20feat=20(initial-nursing):=20add?=
 =?UTF-8?q?=20initial=20nursing=20entry=20form=20and=20preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/initial-nursing/entry-form.vue        |  33 +++---
 .../app/initial-nursing/list-cfg.ts           |  14 +--
 .../app/initial-nursing/preview.vue           | 104 +++++-------------
 .../content/initial-nursing/form.vue          |  16 ++-
 .../content/initial-nursing/list.vue          |  36 +++++-
 5 files changed, 86 insertions(+), 117 deletions(-)

diff --git a/app/components/app/initial-nursing/entry-form.vue b/app/components/app/initial-nursing/entry-form.vue
index 55b65228..acca54fb 100644
--- a/app/components/app/initial-nursing/entry-form.vue
+++ b/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
-  petugas: string
+  finishDate: string
+  staff: string
 }
 
 const props = defineProps<{
@@ -84,10 +84,10 @@ const validate = async () => {
 
 const form = ref<Masalah>({
   id: 0,
-  tanggalMuncul: '',
+  date: '',
   diagnosa: '',
-  tanggalTeratasi: '',
-  petugas: '',
+  finishDate: '',
+  staff: '',
 })
 
 const list = ref<Masalah[]>([])
@@ -97,10 +97,10 @@ const showForm = ref(false)
 const resetForm = () => {
   form.value = {
     id: 0,
-    tanggalMuncul: '',
+    date: '',
     diagnosa: '',
-    tanggalTeratasi: '',
-    petugas: '',
+    finishDate: '',
+    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.petugas }}</td>
+              <td class="border p-2">{{ item.finishDate }}</td>
+              <td class="border p-2">{{ item.staff }}</td>
               <td class="flex justify-center gap-4 border p-2">
                 <Icon
                   @click="editItem(item)"
diff --git a/app/components/app/initial-nursing/list-cfg.ts b/app/components/app/initial-nursing/list-cfg.ts
index 3db1b24a..4461a35b 100644
--- a/app/components/app/initial-nursing/list-cfg.ts
+++ b/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: 'DPJP' },
-      { label: 'Keluhan & Riwayat' },
-      { label: 'Pemeriksaan' },
-      { label: 'Diagnosa' },
-      { label: 'Status' },
-      { label: 'Aksi' },
-    ],
+    [{ label: 'Tanggal' }, { label: 'Diagnosa' }, { label: 'Tanggal Selesai' }, { label: 'Staff' }, { label: 'Aksi' }],
   ],
 
-  keys: ['time', 'employee_id', 'main_complaint', 'encounter', 'diagnose', 'status', 'action'],
+  keys: ['date', 'diagnosa', 'finishDate', 'staff', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/app/initial-nursing/preview.vue b/app/components/app/initial-nursing/preview.vue
index cce6debf..501969f0 100644
--- a/app/components/app/initial-nursing/preview.vue
+++ b/app/components/app/initial-nursing/preview.vue
@@ -1,177 +1,127 @@
 <script setup lang="ts">
-const data = {
-  jamTanggal: '14 Desember 2025, 12.00',
-  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',
-  },
-}
+const props = defineProps<{
+  preview: any
+}>()
 </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>
diff --git a/app/components/content/initial-nursing/form.vue b/app/components/content/initial-nursing/form.vue
index 33f23dcb..006b1dc0 100644
--- a/app/components/content/initial-nursing/form.vue
+++ b/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) {
-  if (type === 'fungsional') {
-    isOpenDiagnose.value = true
+function handleOpen(event: any) {
+  console.log('handleOpen', event.type)
+  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) {
-      result.data.diagnose = selectedDiagnose.value || []
+    if (listProblem.value?.length > 0) {
+      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,
     )
 
diff --git a/app/components/content/initial-nursing/list.vue b/app/components/content/initial-nursing/list.vue
index 2e783337..0c867b96 100644
--- a/app/components/content/initial-nursing/list.vue
+++ b/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
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @page-change="handlePageChange"
-  />
+  <List :data="mappedData.list || []" />
+  <!-- :pagination-meta="paginationMeta" -->
+  <!-- @page-change="handlePageChange" -->
 
   <!-- Record Confirmation Modal -->
   <RecordConfirmation