From bf5109c457a42b8f353bd64e23a5ffa3f826bbeb Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sat, 11 Oct 2025 21:33:08 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat=20(soapi):=20introduce=20early?=
 =?UTF-8?q?=20rehab=20and=20function=20forms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/soapi/early-rehab-entry.vue           | 385 +++++++++--
 app/components/app/soapi/function-entry.vue   | 628 +++++++++++++-----
 app/components/content/encounter/process.vue  |  16 +-
 app/components/content/soapi/entry.vue        |  32 +-
 .../content/soapi/form-function.vue           |  45 ++
 app/components/content/soapi/form-rehab.vue   |  45 ++
 6 files changed, 920 insertions(+), 231 deletions(-)
 create mode 100644 app/components/content/soapi/form-function.vue
 create mode 100644 app/components/content/soapi/form-rehab.vue

diff --git a/app/components/app/soapi/early-rehab-entry.vue b/app/components/app/soapi/early-rehab-entry.vue
index 991a7c73..61beb0f3 100644
--- a/app/components/app/soapi/early-rehab-entry.vue
+++ b/app/components/app/soapi/early-rehab-entry.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 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'
@@ -9,6 +8,8 @@ const props = defineProps<{
   excludeFields?: string[]
 }>()
 
+const emits = defineEmits(['click'])
+
 const subject = ref({
   'prim-compl': '',
   'sec-compl': '',
@@ -25,77 +26,329 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Keluhan Utama -->
-    <Cell v-if="!isExcluded('prim-compl')">
-      <Label dynamic>Keluhan Utama</Label>
-      <Field>
-        <Textarea placeholder="Masukkan anamnesa pasien" v-model="subject['prim-compl']" />
-      </Field>
-    </Cell>
+  <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">Pemeriksaan Fisiatrik</h1>
+        <span class="text-sm font-semibold">Anamnesa</span>
+      </div>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Keluhan Utama</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
 
-    <!-- Keluhan Tambahan -->
-    <Cell v-if="!isExcluded('sec-compl')">
-      <Label dynamic>Keluhan Tambahan</Label>
-      <Field>
-        <Textarea placeholder="Masukkan keluhan tambahan" v-model="subject['sec-compl']" />
-      </Field>
-    </Cell>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Diagnosa Medis</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
 
-    <!-- Riwayat Penyakit Sekarang -->
-    <Cell v-if="!isExcluded('cur-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Sekarang</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit sekarang" v-model="subject['cur-disea-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Rencana Awal Medis</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
 
-    <!-- Riwayat Penyakit Dahulu -->
-    <Cell v-if="!isExcluded('pas-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Dahulu</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit dahulu" v-model="subject['pas-disea-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Terapi</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <Separator class="mt-8" />
 
-    <!-- Riwayat Penyakit Keluarga -->
-    <Cell v-if="!isExcluded('fam-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Keluarga</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit keluarga" v-model="subject['fam-disea-hist']" />
-      </Field>
-    </Cell>
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+        <span class="text-sm font-semibold">Status Generalis</span>
+      </div>
 
-    <!-- Riwayat Alergi -->
-    <Cell v-if="!isExcluded('alg-hist')">
-      <Label dynamic>Riwayat Alergi</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat alergi" v-model="subject['alg-hist']" />
-      </Field>
-    </Cell>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Tekanan Darah</Label>
+            <Field>
+              <Input placeholder="Sistolik" />
+              <Input placeholder="Diastolik" />
+            </Field>
+          </Cell>
 
-    <!-- Reaksi Alergi -->
-    <Cell v-if="!isExcluded('alg-react')">
-      <Label dynamic>Reaksi Alergi</Label>
-      <Field>
-        <Textarea placeholder="Masukkan reaksi alergi" v-model="subject['alg-react']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
 
-    <!-- Pengobatan yang Sedang Dijalani -->
-    <Cell v-if="!isExcluded('med-hist')">
-      <Label dynamic>Riwayat Pengobatan</Label>
-      <Field>
-        <Textarea placeholder="Masukkan pengobatan yang sedang dijalani" v-model="subject['med-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>GCS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>RR</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
 
-    <!-- Golongan Darah -->
-    <Cell v-if="!isExcluded('blood-type')">
-      <Label dynamic>Golongan Darah</Label>
-      <Field>
-        <Input type="text" placeholder="Masukkan golongan darah" v-model="subject['blood-type']" />
-      </Field>
-    </Cell>
-  </div>
+          <Cell>
+            <Label dynamic>Ambulasi</Label>
+            <Field>
+              <RadioGroup class="flex gap-4">
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-yes"
+                    value="yes"
+                  />
+                  <Label for="vaksin-yes">Dependent</Label>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-no"
+                    value="no"
+                  />
+                  <Label for="vaksin-no">Independen</Label>
+                </div>
+              </RadioGroup>
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Gait</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Neurologis</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>N. Cranialis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sensoris</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reflek Fisilogis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Reflek Patologis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Saraf Otonom</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - ROM</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - MMT</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Statu Lokalis</span>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Deskripsi Temuan Fisik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Catatan Pemeriksaan Penunjang</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Daftar Masalah</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Masalah Medik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Masalah Rehabilitasi Medik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+      </div>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <AppIcdPreview />
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Program Rehabilitasi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Modalitas Fisik</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Latihan</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Ortesa Protesa</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Edukasi</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>
diff --git a/app/components/app/soapi/function-entry.vue b/app/components/app/soapi/function-entry.vue
index a2fad36a..98d35663 100644
--- a/app/components/app/soapi/function-entry.vue
+++ b/app/components/app/soapi/function-entry.vue
@@ -1,172 +1,486 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
+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'
+
+const props = defineProps<{
+  excludeFields?: string[]
+}>()
+
+const emits = defineEmits(['click'])
+
+const subject = ref({
+  'prim-compl': '',
+  'sec-compl': '',
+  'cur-disea-hist': '',
+  'pas-disea-hist': '',
+  'fam-disea-hist': '',
+  'alg-hist': '',
+  'alg-react': '',
+  'med-hist': '',
+  'blood-type': '',
+})
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+const disorders = ref<string[]>([])
+const therapies = ref<string[]>([])
+const summary = ref('')
+
+const disorderOptions = [
+  'Fungsi Otot',
+  'Fungsi Sendi',
+  'Fungsi Jalan',
+  'Fungsi Syaraf',
+  'Fungsi Koordinasi',
+  'Jantung',
+  'Fungsi Respirasi',
+  'Fungsi Menelan',
+  'Fungsi Bladder',
+  'Fungsi Bowel',
+  'Fungsi Luhur',
+  'Fungsi Kontrol Postur',
+  'Fungsi Eksekusi',
+  'Fungsi Ortosa/Protesa',
+  'Gangguan Aktivitas Sehari-hari',
+  'Lainnya',
+]
+
+const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
 </script>
 
 <template>
   <form id="entry-form">
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
-        <FieldGroup>
-          <Label dynamic>Sudah Vaksin</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Sudah', value: 'yes' },
-                { label: 'Belum', value: 'no' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup>
-          <Label dynamic>Kasus</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Baru', value: 'baru' },
-                { label: 'Lama', value: 'lama' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup>
-          <Label dynamic>Kunjungan</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Baru', value: 'baru' },
-                { label: 'Lama', value: 'lama' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <!-- Riwayat Penyakit -->
-        <FieldGroup :column="2">
+        <Cell>
           <Label dynamic>Keluhan Utama</Label>
-          <Field>
-            <Textarea placeholder="Masukkan anamnesa pasien" />
-          </Field>
-        </FieldGroup>
-        <FieldGroup :column="2">
-          <Label dynamic>Riwayat Penyakit</Label>
-          <Field>
-            <Textarea
-              placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>SpO₂</Label>
-          <Field>
-            <Input type="number" placeholder="%" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tekanan Darah Sistol</Label>
-          <Field>
-            <Input type="number" placeholder="mmHg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tekanan Darah Diastol</Label>
-          <Field>
-            <Input type="number" placeholder="mmHg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Respirasi</Label>
-          <Field>
-            <Input type="number" placeholder="kali/menit" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Nadi</Label>
-          <Field>
-            <Input type="number" placeholder="kali/menit" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Temperatur</Label>
-          <Field>
-            <Input type="number" placeholder="℃" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Berat Badan</Label>
-          <Field>
-            <Input type="number" placeholder="Kg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tinggi Badan</Label>
-          <Field>
-            <Input type="number" placeholder="Cm" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Golongan Darah</Label>
-          <Field>
-            <Select :options="bloodGroups" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
-          <Field>
-            <Textarea placeholder="Masukkan pemeriksaan fisik" />
-          </Field>
-        </FieldGroup>
-
-        <!-- Prosedur -->
-        <FieldGroup :column="2">
-          <Label dynamic>Diagnosa (ICD-X)</Label>
-          <Field>
-            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
-          </Field>
-        </FieldGroup>
-        <!-- Diagnosa -->
-        <FieldGroup :column="2">
-          <Label dynamic>Diagnosa (ICD-X)</Label>
-          <Field>
-            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Diagnosa Medis</Label>
           <Field>
             <Textarea />
           </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Rencana Awal Medis</Label>
-          <Field>
-            <Textarea />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Terapi</Label>
-          <Field>
-            <Textarea />
-          </Field>
-        </FieldGroup>
+        </Cell>
       </Block>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Dahulu</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Sekarang</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Umum</Label>
+          <Field>
+            <Input placeholder="Sistolik" />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Tanda Vital</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kesadaran (GCS)</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Pernapasan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kanan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kiri</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Suhu Aksila</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Suhu Rektal</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Badan</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kulit</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Kepala</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Telinga</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hidung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Rongga Mulut/Tenggorokan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Mata</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelenjar Tiroid</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Thorax</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jantung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Paru-Paru</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Abdomen</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hati</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lien</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Punggung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Ekstremitas</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelamin</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Rectum</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>System Syaraf</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Neuromoskuloskeletal</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Kardiorespirasi</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Pencitraan</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Laboratorium</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+      </div>
+
+      <div class="space-y-8">
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Gangguan Fungsi</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in disorderOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="disorders"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+
+          <div class="mt-4 space-y-2">
+            <Label
+              for="summary"
+              class="font-medium"
+            >
+              Kesimpulan Didapatkan Gangguan Fungsi
+              <span class="text-red-500">*</span>
+            </Label>
+            <Textarea
+              id="summary"
+              v-model="summary"
+              placeholder="Masukkan kesimpulan gangguan fungsi"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- REKOMENDASI TERAPI -->
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Rekomendasi Terapi Tindakan Yang Diperlukan</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in therapyOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="therapies"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </form>
 </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index e7c0ffc4..acd88473 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -8,8 +8,10 @@ import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
 
 import Status from '~/components/app/encounter/status.vue'
-import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+// import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -38,7 +40,11 @@ const data = {
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status },
   { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
-  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    component: EarlyMedicalRehabList,
+  },
   { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
@@ -66,6 +72,10 @@ const tabs: TabItem[] = [
       <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
     <AppEncounterQuickInfo :data="data" />
-    <CompTab :data="tabs" :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
   </div>
 </template>
diff --git a/app/components/content/soapi/entry.vue b/app/components/content/soapi/entry.vue
index 05c25ec7..42800d8f 100644
--- a/app/components/content/soapi/entry.vue
+++ b/app/components/content/soapi/entry.vue
@@ -1,16 +1,38 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode' // asumsikan ini ada
 
-import EarlyMedicalAssesmentList from './list.vue'
-import EarlyMedicalAssesmentForm from './form.vue'
+import SoapiList from './list.vue'
+import EarlyForm from './form.vue'
+import RehabForm from './form-rehab.vue'
+import FunctionForm from './form-function.vue'
+
+const route = useRoute()
+const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
 
 const { mode, openForm, backToList } = useQueryMode('mode')
+
+const formMap = {
+  'early-medical-assessment': EarlyForm,
+  'rehab-medical-assessment': RehabForm,
+  'function-assessment': FunctionForm,
+}
+
+const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
 </script>
 
 <template>
   <div>
-    <EarlyMedicalAssesmentList v-if="mode === 'list'" @add="openForm" />
-    <EarlyMedicalAssesmentForm v-else @back="backToList" />
+    <SoapiList
+      v-if="mode === 'list'"
+      @add="openForm"
+    />
+
+    <component
+      v-else
+      :is="ActiveForm"
+      @back="backToList"
+    />
   </div>
 </template>
diff --git a/app/components/content/soapi/form-function.vue b/app/components/content/soapi/form-function.vue
new file mode 100644
index 00000000..d76e192f
--- /dev/null
+++ b/app/components/content/soapi/form-function.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    type="function"
+    :exclude-fields="['prim-compl', 'sec-compl']"
+    @click="handleClick"
+  />
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>
diff --git a/app/components/content/soapi/form-rehab.vue b/app/components/content/soapi/form-rehab.vue
new file mode 100644
index 00000000..f0255022
--- /dev/null
+++ b/app/components/content/soapi/form-rehab.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    type="early-rehab"
+    :exclude-fields="['prim-compl', 'sec-compl']"
+    @click="handleClick"
+  />
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>