diff --git a/.gitignore b/.gitignore
index 5bdfc11f..a3d94e0b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,6 @@ logs
 .env.*
 !.env.example
 
-.vscode
\ No newline at end of file
+# editor
+.vscode
+*.swp
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 17502027..a25bddcb 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -16,8 +16,8 @@
   --primary-hover: 26, 92%, 65%;
 
   /* Secondary - Clean Blue */
-  --secondary: 210 50% 96%;
-  --secondary-foreground: 210 20% 20%;
+  --secondary: 40 70% 60%;
+  --secondary-foreground: 210 20% 100%;
   --muted: 210 25% 95%;
   --muted-foreground: 210 15% 50%;
 
diff --git a/app/components/app/encounter/check-in-entry.vue b/app/components/app/encounter/check-in-entry.vue
new file mode 100644
index 00000000..ad7de5d6
--- /dev/null
+++ b/app/components/app/encounter/check-in-entry.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+//
+import { LucideCheck } from 'lucide-vue-next';
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+// Components
+import type z from 'zod'
+import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { CheckInFormData } from '~/schemas/encounter.schema'
+import type { Encounter } from '~/models/encounter'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  doctors: { value: string; label: string }[]
+  employees: { value: string; label: string }[]
+  encounter: Encounter
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  submit: [values: CheckInFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    responsible_doctor_id: 0,
+    adm_employee_id: 0,
+    registeredAt: props.values.values?.registeredAt || '',
+  } as Partial<CheckInFormData>,
+})
+
+const [responsible_doctor_id, responsible_doctor_idAttrs] = defineField('responsible_doctor_id')
+const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
+const [registeredAt, registeredAtAttrs] = defineField('registeredAt')
+
+function submitForm() {
+  const formData: CheckInFormData = {
+    responsible_doctor_id: responsible_doctor_id.value,
+    adm_employee_id: adm_employee_id.value,
+    // registeredAt: registeredAt.value || '',
+  }
+  emit('submit', formData)
+}
+</script>
+
+<template>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Dokter</DE.Label>
+      <DE.Field>
+        <ComboBox
+          id="doctor"
+          v-model="responsible_doctor_id"
+          v-bind="responsible_doctor_idAttrs"
+          :items="doctors"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter DPJP"
+          search-placeholder="Pilih DPJP"
+          empty-message="DPJP tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>PJ Berkas</DE.Label>
+      <DE.Field>
+        <ComboBox
+          id="doctor"
+          v-model="adm_employee_id"
+          v-bind="adm_employee_idAttrs"
+          :items="employees"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter DPJP"
+          search-placeholder="Pilih petugas"
+          empty-message="Petugas tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Waktu Masuk</DE.Label>
+      <DE.Field>
+        <Input
+            id="name"
+            v-model="registeredAt"
+            v-bind="registeredAtAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="submitForm">
+      <LucideCheck />
+      Simpan
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/check-in-view.vue b/app/components/app/encounter/check-in-view.vue
new file mode 100644
index 00000000..a3b6ab53
--- /dev/null
+++ b/app/components/app/encounter/check-in-view.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+// Components
+import { LucidePen } from 'lucide-vue-next';
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Input from '~/components/pub/ui/input/Input.vue';
+import type { Encounter } from '~/models/encounter'
+
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const doctor = ref('-belum dipilih-')
+const adm = ref('-belum dipilih-')
+
+const emit = defineEmits<{
+  edit: []
+}>()
+
+watch(props.encounter, () => {
+  doctor.value = props.encounter.responsible_doctor?.employee?.person?.name ?? props.encounter.appointment_doctor?.employee?.person?.name ?? '-belum dipilih-'
+  adm.value = props.encounter.adm_employee?.person?.name ?? '-belum dipilih-'
+})
+</script>
+
+<template>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Dokter</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ adm }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="() => emit('edit')">
+      <LucidePen />
+      Edit
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/check-out-entry.vue b/app/components/app/encounter/check-out-entry.vue
new file mode 100644
index 00000000..fb8b4333
--- /dev/null
+++ b/app/components/app/encounter/check-out-entry.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+//
+import { LucideCheck } from 'lucide-vue-next';
+import { useForm, useFieldArray } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+//
+import type z from 'zod'
+import * as CB from '~/components/pub/my-ui/combobox'
+import { dischargeMethodCodes } from '~/lib/constants';
+import type {
+  CheckOutFormData,
+  CheckOutDeathFormData,
+  CheckOutInternalReferenceFormData
+} from '~/schemas/encounter.schema'
+
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { InternalReference, CreateDto as InternalReferenceCreateDto } from '~/models/internal-reference';
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  units: any[]
+  doctors: any[]
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
+
+const emit = defineEmits<{
+  submit: [values: CheckOutFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    discharge_method_code: '',
+    discharge_date: '',
+    internalReferences: [{ unit_id: 0, doctor_id: 0 }],
+    deathCauses: [""],
+  } as Partial<CheckOutFormData>,
+})
+const [ discharge_method_code, discharge_method_codeAttrs ] = defineField('discharge_method_code')
+const [ discharge_date, discharge_dateAttrs ] = defineField('discharge_date') 
+const { fields, push, remove } = useFieldArray<InternalReferenceCreateDto>('internalReferences');
+
+function submitForm(values: any) {
+  if (['consul-poly', 'consul-executive'].includes(discharge_method_code.value)) {
+    const formData: CheckOutInternalReferenceFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+      internalReferences: [{ unit_id: 0, doctor_id: 0 }],
+    }
+    emit('submit', formData)
+  } else if (discharge_method_code.value === 'death') {
+    const formData: CheckOutDeathFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+      death_cause: [""],
+    }
+    emit('submit', formData)
+  } else {
+    const formData: CheckOutFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+    }
+    emit('submit', formData)
+  }
+}
+
+const resetForm = () => {
+  discharge_method_code.value = ''
+  discharge_date.value = ''
+}
+</script>
+
+<template>
+  <DE.Block :cellFlex="false">
+    <DE.Cell>
+      <DE.Label>Alasan Keluar</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          id="dischargeMethodItems"
+          v-model="discharge_method_code"
+          v-bind="discharge_method_codeAttrs"
+          :items="dischargeMethodItems"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Cara Keluar"
+          search-placeholder="Cari Cara Keluar"
+          empty-message="Cara Keluar tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+
+    <DE.Cell>
+      <DE.Label>Waktu Keluar</DE.Label>
+      <DE.Cell>
+        <Input
+          id="discharge_date"
+          v-model="discharge_date"
+          v-bind="discharge_dateAttrs"
+          :disabled="isLoading || isReadonly"
+        />
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="'death' == discharge_method_code">
+      <DE.Label>Sebab Meninggal</DE.Label>
+      <DE.Cell>
+        <div class="mb-3">
+          <Input />
+        </div>
+        <div>
+          <Button
+            v-if="!isReadonly"
+              type="button"
+              :disabled="isLoading || !meta.valid"
+              @click="submitForm"
+          >
+            Tambah Sebab meninggal
+          </Button>
+        </div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="['consul-poly', 'consul-executive'].includes(discharge_method_code)">
+      <DE.Label>Tujuan</DE.Label>
+      <DE.Field>
+        <Table.Table class="border mb-3">
+          <Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
+            <Table.TableCell class="text-center">Poly</Table.TableCell>
+            <Table.TableCell class="text-center">DPJP</Table.TableCell>
+            <Table.TableCell class="text-center !w-10"></Table.TableCell>
+          </Table.TableHeader>
+          <Table.TableBody>
+            <Table.TableRow v-for="(item, index) in fields" :key="index">
+              <Table.TableCell class="!p-0.5">
+                <CB.Combobox
+                  id="dischargeMethodItems"
+                  :v-model.number="item.value.unit_id"
+                  :items="units"
+                  :disabled="isLoading || isReadonly"
+                  placeholder="Pilih Poly"
+                  search-placeholder="Cari Poly"
+                  empty-message="Poly tidak ditemukan"
+                />
+              </Table.TableCell>
+              <Table.TableCell class="!p-0.5">
+                <CB.Combobox
+                  id="dischargeMethodItems"
+                  :v-model.number="item.value.doctor_id"
+                  :items="units"
+                  :disabled="isLoading || isReadonly"
+                  placeholder="Pilih Dokter"
+                  search-placeholder="Pilih Dokter"
+                  empty-message="Dokter tidak ditemukan"
+                />
+              </Table.TableCell>
+              <Table.TableCell>
+                <Button variant="destructive" size="xs" @click="remove(index)" class="w-6 h-6 rounded-full">
+                  X
+                </Button>
+              </Table.TableCell>
+            </Table.TableRow>
+          </Table.TableBody>
+        </Table.Table>
+        <div>
+          <Button @click="push({ encounter_id: 0, unit_id: 0, doctor_id: 0 })">Tambah</Button>
+        </div>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="submitForm">>
+      <LucideCheck />
+      Simpan
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/check-out-view.vue b/app/components/app/encounter/check-out-view.vue
new file mode 100644
index 00000000..37cd2bbe
--- /dev/null
+++ b/app/components/app/encounter/check-out-view.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+//
+import { LucidePen, LucideCheck } from 'lucide-vue-next';
+
+//
+import * as CB from '~/components/pub/my-ui/combobox'
+import { dischargeMethodCodes } from '~/lib/constants';
+
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Encounter } from '~/models/encounter';
+
+interface Props {
+  encounter: Encounter
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
+
+const emit = defineEmits<{
+  edit: [],
+  finish: []
+}>()
+</script>
+
+<template>
+  <DE.Block :cellFlex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Alasan Keluar</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_method_code || '-belum ditentukan-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Keluar</DE.Label>
+      <DE.Cell>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date || '-belum ditentukan-' }}</div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="'death' == encounter.discharge_method_code">
+      <DE.Label class="font-semibold">Sebab Meninggal</DE.Label>
+      <DE.Cell>
+        <div class="mb-3">
+          <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date }}</div>
+        </div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="['consul-poly', 'consul-executive'].includes(encounter.discharge_method_code || '')">
+      <DE.Label class="font-semibold">Tujuan</DE.Label>
+      <DE.Field>
+        <Table.Table class="border mb-3">
+          <Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
+            <Table.TableCell class="text-center">Poly</Table.TableCell>
+            <Table.TableCell class="text-center">DPJP</Table.TableCell>
+            <Table.TableCell class="text-center !w-10"></Table.TableCell>
+          </Table.TableHeader>
+          <Table.TableBody>
+            <Table.TableRow v-for="(item, index) in encounter.internalReferences" :key="index">
+              <Table.TableCell class="!p-0.5">
+              </Table.TableCell>
+              <Table.TableCell class="!p-0.5">
+              </Table.TableCell>
+              <Table.TableCell>
+              </Table.TableCell>
+            </Table.TableRow>
+          </Table.TableBody>
+        </Table.Table>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center [&>*]:mx-1">
+    <Button @click="() => emit('edit')">
+      <LucidePen />
+      Edit
+    </Button>
+    <Button @click="() => emit('finish')">
+      <LucideCheck />
+      Selesai
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/status.vue b/app/components/app/encounter/status.vue
deleted file mode 100644
index e45c0a78..00000000
--- a/app/components/app/encounter/status.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <div class="p-10 text-center">Hello World!!!</div>
-</template>
\ No newline at end of file
diff --git a/app/components/app/icd/list-cfg.ts b/app/components/app/icd/list-cfg.ts
index c413e737..44a43eb4 100644
--- a/app/components/app/icd/list-cfg.ts
+++ b/app/components/app/icd/list-cfg.ts
@@ -7,94 +7,18 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const config: Config = {
-  cols: [
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 120 },
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 100 },
-    {},
-    { width: 50 },
-  ],
+  cols: [{}, {}, {}, {}],
 
-  headers: [
-    [
-      { label: 'Nama' },
-      { label: 'Rekam Medis' },
-      { label: 'KTP' },
-      { label: 'Tgl Lahir' },
-      { label: 'Umur' },
-      { label: 'JK' },
-      { label: 'Pendidikan' },
-      { label: 'Status' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
 
-  keys: [
-    'name',
-    'medicalRecord_number',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'status',
-    'action',
-  ],
+  keys: ['code', 'name', 'indName', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
   ],
 
-  parses: {
-    name: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-    },
-    identity_number: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
-      }
-      return recX.identity_number
-    },
-    birth_date: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.birth_date == 'object' && recX.birth_date) {
-        return (recX.birth_date as Date).toLocaleDateString()
-      } else if (typeof recX.birth_date == 'string') {
-        return (recX.birth_date as string).substring(0, 10)
-      }
-      return recX.birth_date
-    },
-    patient_age: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.birth_date?.split('T')[0]
-    },
-    gender: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-        return 'Tidak Diketahui'
-      }
-      return recX.gender_code
-    },
-    education: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-        return recX.education_code
-      } else if (typeof recX.education_code) {
-        return recX.education_code
-      }
-      return '-'
-    },
-  },
+  parses: {},
 
   components: {
     action(rec, idx) {
diff --git a/app/components/app/icd/multiselect-picker.vue b/app/components/app/icd/multiselect-picker.vue
index ce4dbd80..e8f03084 100644
--- a/app/components/app/icd/multiselect-picker.vue
+++ b/app/components/app/icd/multiselect-picker.vue
@@ -2,7 +2,7 @@
 import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
-const modelValue = defineModel<any | null>()
+const modelValue = defineModel<any[]>('modelValue', { default: [] })
 </script>
 
 <template>
diff --git a/app/components/app/icd/preview.vue b/app/components/app/icd/preview.vue
index 36bb193c..3c3d7d1f 100644
--- a/app/components/app/icd/preview.vue
+++ b/app/components/app/icd/preview.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Trash2 } from 'lucide-vue-next'
-// import { Button } from '@/components/ui/button'
-// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 
 interface Diagnosa {
   id: number
@@ -10,10 +7,10 @@ interface Diagnosa {
   icd: string
 }
 
-const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])
+const modelValue = defineModel<Diagnosa[]>({ default: [] })
 
 function removeItem(id: number) {
-  list.value = list.value.filter((item) => item.id !== id)
+  modelValue.value = modelValue.value.filter((item) => item.id !== id)
 }
 </script>
 
@@ -30,12 +27,19 @@ function removeItem(id: number) {
       </TableHeader>
 
       <TableBody>
-        <TableRow v-for="(item, i) in list" :key="item.id">
+        <TableRow
+          v-for="(item, i) in modelValue"
+          :key="item.id"
+        >
           <TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
-          <TableCell>{{ item.diagnosa }}</TableCell>
-          <TableCell>{{ item.icd }}</TableCell>
+          <TableCell>{{ item.code }}</TableCell>
+          <TableCell>{{ item.name }}</TableCell>
           <TableCell class="text-center">
-            <Button variant="ghost" size="icon" @click="removeItem(item.id)">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="removeItem(item.id)"
+            >
               <Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
             </Button>
           </TableCell>
diff --git a/app/components/app/soapi/early-entry.vue b/app/components/app/soapi/early-entry.vue
index 146a25d4..4d2367be 100644
--- a/app/components/app/soapi/early-entry.vue
+++ b/app/components/app/soapi/early-entry.vue
@@ -63,13 +63,13 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
 
 <template>
   <form id="entry-form">
-    {{ errors }}
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
         <Cell>
@@ -285,7 +285,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'diagnosa')"
+              @click="emit('modal', 'diagnosa')"
             >
               + Pilih Diagnosa
             </Button>
@@ -298,7 +298,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'prosedur')"
+              @click="emit('modal', 'prosedur')"
             >
               + Pilih Prosedur
             </Button>
@@ -307,8 +307,8 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
       </Block>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
+        <AppIcdPreview v-model="icdPreview.procedures" />
       </div>
 
       <Block :colCount="3">
diff --git a/app/components/app/soapi/early-rehab-entry.vue b/app/components/app/soapi/early-rehab-entry.vue
index 2cafbcac..e4ec3114 100644
--- a/app/components/app/soapi/early-rehab-entry.vue
+++ b/app/components/app/soapi/early-rehab-entry.vue
@@ -85,6 +85,7 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
@@ -452,10 +453,18 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 
       <div class="my-2">
         <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+
+        <Button
+          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+          type="button"
+          @click="emit('click', 'fungsional')"
+        >
+          + Pilih Prosedur
+        </Button>
       </div>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
       </div>
 
       <div class="my-2">
diff --git a/app/components/app/soapi/entry.vue b/app/components/app/soapi/entry.vue
index 2ee2cefb..e7eecf32 100644
--- a/app/components/app/soapi/entry.vue
+++ b/app/components/app/soapi/entry.vue
@@ -43,5 +43,6 @@ defineExpose({ validate })
     @click="$emit('click', $event)"
     @submit="$emit('submit', $event)"
     @cancel="$emit('cancel', $event)"
+    @modal="$emit('modal', $event)"
   />
 </template>
diff --git a/app/components/app/soapi/function-entry.vue b/app/components/app/soapi/function-entry.vue
index 3e192c47..01276c03 100644
--- a/app/components/app/soapi/function-entry.vue
+++ b/app/components/app/soapi/function-entry.vue
@@ -86,6 +86,8 @@ const validate = async () => {
 
 defineExpose({ validate })
 
+const icdPreview = inject('icdPreview')
+
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 const disorders = ref<string[]>([])
 const therapies = ref<string[]>([])
@@ -558,33 +560,33 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
           <Button
             class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
             type="button"
-            @click="emits('click', 'prosedur')"
+            @click="emit('click', 'diagnosa')"
           >
             + Pilih Prosedur
           </Button>
-          <AppIcdPreview />
+          <AppIcdPreview v-model="icdPreview.diagnoses" />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Fungsional (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emit('click', 'fungsional')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview v-model="icdPreview.fungsional" />
         </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')"
+            @click="emit('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 />
+          <AppIcdPreview v-model="icdPreview.procedures" />
         </div>
       </div>
 
diff --git a/app/components/app/soapi/list-cfg.ts b/app/components/app/soapi/list-cfg.ts
index 6fa11bda..648297c4 100644
--- a/app/components/app/soapi/list-cfg.ts
+++ b/app/components/app/soapi/list-cfg.ts
@@ -6,46 +6,21 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
-  cols: [
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 120 },
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 100 },
-    {},
-    { width: 50 },
-  ],
+  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
 
   headers: [
     [
-      { label: 'Nama' },
-      { label: 'Rekam Medis' },
-      { label: 'KTP' },
-      { label: 'Tgl Lahir' },
-      { label: 'Umur' },
-      { label: 'JK' },
-      { label: 'Pendidikan' },
+      { label: 'Tanggal' },
+      { label: 'DPJP' },
+      { label: 'Keluhan & Riwayat' },
+      { label: 'Pemeriksaan' },
+      { label: 'Diagnosa' },
       { label: 'Status' },
-      { label: '' },
+      { label: 'Aksi' },
     ],
   ],
 
-  keys: [
-    'name',
-    'medicalRecord_number',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'status',
-    'action',
-  ],
+  keys: ['time', 'employee_id', 'main_complaint', 'encounter_id', 'diagnose', 'status', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -53,45 +28,34 @@ export const config: Config = {
   ],
 
   parses: {
-    name: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    time(rec: any) {
+      return rec.time ? new Date(rec.time).toLocaleDateString() : ''
     },
-    identity_number: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
+    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 '-'
       }
-      return recX.identity_number
     },
-    birth_date: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.birth_date === 'object' && recX.birth_date) {
-        return (recX.birth_date as Date).toLocaleDateString()
-      } else if (typeof recX.birth_date === 'string') {
-        return recX.birth_date.substring(0, 10)
+    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 '-'
       }
-      return recX.birth_date
-    },
-    patient_age: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.birth_date?.split('T')[0]
-    },
-    gender: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-        return 'Tidak Diketahui'
-      }
-      return recX.gender_code
-    },
-    education: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
-        return recX.education_code
-      } else if (typeof recX.education_code !== 'undefined') {
-        return recX.education_code
-      }
-      return '-'
     },
   },
 
diff --git a/app/components/content/encounter/assesment-function/add.vue b/app/components/content/encounter/assesment-function/add.vue
deleted file mode 100644
index 128cf74a..00000000
--- a/app/components/content/encounter/assesment-function/add.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>halo</div>
-</template>
diff --git a/app/components/content/encounter/assesment-function/list.vue b/app/components/content/encounter/assesment-function/list.vue
deleted file mode 100644
index 48d50bc9..00000000
--- a/app/components/content/encounter/assesment-function/list.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import AssesmentFunctionList from '~/components/app/encounter/assesment-function/list.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-
-const props = defineProps<{
-  label: string
-}>()
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: props.label,
-  icon: 'i-lucide-users',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
-  },
-}
-
-async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
-</script>
-
-<template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AssesmentFunctionList :data="data" />
-  </div>
-</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index ecca42ba..5093c66e 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -5,15 +5,16 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { getDetail } from '~/services/encounter.service'
 
-// Components
-import type { Encounter } from '~/models/encounter'
+//
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
 import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
 import PrescriptionList from '~/components/content/prescription/list.vue'
-import Status from '~/components/app/encounter/status.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 import EncounterList from '~/components/content/outpatient/encounter/list.vue'
 
@@ -38,13 +39,24 @@ const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
-  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    component: EarlyMedicalAssesmentList,
+    props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
+  },
   {
     value: 'rehab-medical-assessment',
     label: 'Pengkajian Awal Medis Rehabilitasi Medis',
     component: EarlyMedicalRehabList,
+    props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    component: AssesmentFunctionList,
+    props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
   },
-  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'consent', label: 'General Consent' },
diff --git a/app/components/content/encounter/status.vue b/app/components/content/encounter/status.vue
new file mode 100644
index 00000000..513a7ab5
--- /dev/null
+++ b/app/components/content/encounter/status.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+//
+import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
+import { getValueLabelList as getEmployeeValueLabelList } from '~/services/employee.service'
+import { getValueLabelList as getUnitValueLabelList } from '~/services/unit.service'
+import type { CheckInFormData, CheckOutFormData } from '~/schemas/encounter.schema'
+import { CheckInSchema, CheckOutSchema } from '~/schemas/encounter.schema'
+
+//
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import CheckInView from '~/components/app/encounter/check-in-view.vue'
+import CheckInEntry from '~/components/app/encounter/check-in-entry.vue'
+import CheckOutView from '~/components/app/encounter/check-out-view.vue'
+import CheckOutEntry from '~/components/app/encounter/check-out-entry.vue'
+import type { Encounter } from '~/models/encounter'
+import { checkIn } from '~/services/encounter.service'
+
+//
+const props = defineProps<{
+  encounter: Encounter
+}>()
+
+// doctors
+const doctors = await getDoctorValueLabelList({'includes': 'employee,employee-person'})
+const employees = await getEmployeeValueLabelList({'includes': 'person', 'position-code': 'reg'})
+const units = await getUnitValueLabelList()
+
+// check in
+const checkInValues = ref<any>({
+  discharge_method_code: '',
+  responsible_doctor_id: 0,
+  // registeredAt: '',
+})
+const checkInIsLoading = ref(false)
+const checkInIsReadonly = ref(false)
+const checkInDialogOpen = ref(false)
+
+// check out
+const checkOutValues = ref<any>({
+  dischargeMethod_code: '',
+  unit_id: 0,
+  responsibleDoctor_id: 0,
+})
+const checkOutIsLoading = ref(false)
+const checkOutIsReadonly = ref(false)
+const checkOutDialogOpen = ref(false)
+
+function editCheckIn() {
+  checkInDialogOpen.value = true
+}
+
+function submitCheckIn(values: CheckInFormData) {
+  checkIn(props.encounter.id, values)
+}
+
+function editCheckOut() {
+  checkOutDialogOpen.value = true
+}
+
+function submitCheckOut(values: CheckOutFormData) {
+  console.log(values)
+}
+</script>
+
+<template>
+  <div class="lg:grid grid-cols-2">
+    <div class="border-r lg:pe-4 xl:pe-5 mb-10">
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Masuk</div>
+      <CheckInView
+        :encounter="encounter"
+        :is-loading="checkInIsLoading"
+        :is-readonly="checkInIsReadonly"
+        @edit="editCheckIn"
+      />
+    </div>
+    <div class="lg:ps-4 xl:ps-5">
+      <Separator class="lg:hidden my-4 xl:my-5" />
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Keluar</div>
+      <CheckOutView
+        :encounter="encounter"
+        :is-loading="checkOutIsLoading"
+        :is-readonly="checkOutIsReadonly"
+        @edit="editCheckOut"
+      />
+    </div>
+  </div>
+
+  <Dialog
+    v-model:open="checkInDialogOpen"
+    title="Ubah Informasi Masuk"
+    size="md"
+    prevent-outside
+  >
+    <CheckInEntry
+      :schema="CheckInSchema"
+      :values="checkInValues"
+      :encounter="encounter"
+      :doctors="doctors"
+      :employees="employees"
+      :is-loading="checkInIsLoading"
+      :is-readonly="checkInIsReadonly"
+      @submit="submitCheckIn"
+      @cancel="checkInDialogOpen = false"
+    />
+  </Dialog>
+
+  <Dialog
+    v-model:open="checkOutDialogOpen"
+    title="Ubah Informasi Keluar"
+    size="lg"
+    prevent-outside
+  >
+    <CheckOutEntry
+      :schema="CheckOutSchema"
+      :values="checkOutValues"
+      :encounter="encounter"
+      :units="units"
+      :doctors="doctors"
+      :is-loading="checkInIsLoading"
+      :is-readonly="checkInIsReadonly"
+      @submit="submitCheckOut"
+      @cancel="checkInDialogOpen = false"
+    />
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/content/soapi/entry.vue b/app/components/content/soapi/entry.vue
index 7b4ab9d4..ee3c7c32 100644
--- a/app/components/content/soapi/entry.vue
+++ b/app/components/content/soapi/entry.vue
@@ -11,7 +11,7 @@ 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 { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
 
 const formMap = {
   'early-medical-assessment': EarlyForm,
@@ -26,7 +26,8 @@ const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
   <div>
     <SoapiList
       v-if="mode === 'list'"
-      @add="openForm"
+      @add="goToEntry"
+      @edit="goToEntry"
     />
 
     <component
diff --git a/app/components/content/soapi/form-function.vue b/app/components/content/soapi/form-function.vue
index ade9e4d1..9f281d86 100644
--- a/app/components/content/soapi/form-function.vue
+++ b/app/components/content/soapi/form-function.vue
@@ -2,14 +2,23 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.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 { FunctionSoapiSchema } 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 isOpen = ref(false)
-const data = ref([])
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const isOpenFungsional = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const fungsional = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const selectedFungsional = ref<any>(null)
 const schema = FunctionSoapiSchema
 const payload = ref({
   encounter_id: 0,
@@ -60,29 +69,55 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    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(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
-function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+function handleClick(type: string) {
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  } else if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
 }
-
 const entryRehabRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
+    if (
+      selectedProcedure.value?.length > 0 ||
+      selectedDiagnose.value?.length > 0 ||
+      selectedFungsional.value?.length > 0
+    ) {
+      result.data.procedure = selectedProcedure.value || []
+      result.data.diagnose = selectedDiagnose.value || []
+      result.data.fungsional = selectedFungsional.value || []
+    }
     console.log('data', result.data)
     handleActionSave(
       {
@@ -99,7 +134,23 @@ async function actionHandler(type: string) {
   }
 }
 
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+    icdPreview.value.fungsional = selectedFungsional.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
 provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
 </script>
 <template>
   <Entry
@@ -107,17 +158,52 @@ provide('table_data_loader', isLoading)
     v-model="model"
     :schema="schema"
     type="function"
-    @modal="handleOpen"
+    @click="handleClick"
   />
   <div class="my-2 flex justify-end py-2">
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
+    v-model:open="isOpenProcedure"
     title="Pilih Prosedur"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedProcedure"
+      :data="procedures"
+    />
+
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Diagnosa"
+    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>
+  <Dialog
+    v-model:open="isOpenFungsional"
+    title="Pilih Fungsional"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedFungsional"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
   </Dialog>
 </template>
diff --git a/app/components/content/soapi/form-rehab.vue b/app/components/content/soapi/form-rehab.vue
index 655063f9..4130f562 100644
--- a/app/components/content/soapi/form-rehab.vue
+++ b/app/components/content/soapi/form-rehab.vue
@@ -2,14 +2,20 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.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 { EarlyRehabSchema } 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 isOpen = ref(false)
-const data = ref([])
+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 = EarlyRehabSchema
 const payload = ref({
   encounter_id: 0,
@@ -65,29 +71,46 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    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(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
 function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+  if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
 }
 
 const entryRehabRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  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(
       {
@@ -104,7 +127,22 @@ async function actionHandler(type: string) {
   }
 }
 
+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
@@ -112,17 +150,23 @@ provide('table_data_loader', isLoading)
     v-model="model"
     :schema="schema"
     type="early-rehab"
-    @modal="handleOpen"
+    @click="handleOpen"
   />
   <div class="my-2 flex justify-end py-2">
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
-    title="Pilih Prosedur"
+    v-model:open="isOpenDiagnose"
+    title="Pilih Fungsional"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <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/soapi/form.vue b/app/components/content/soapi/form.vue
index 794daef9..c963a091 100644
--- a/app/components/content/soapi/form.vue
+++ b/app/components/content/soapi/form.vue
@@ -2,14 +2,20 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.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 { EarlySchema } 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 isOpen = ref(false)
-const data = ref([])
+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 = EarlySchema
 const payload = ref({
   encounter_id: 0,
@@ -38,29 +44,50 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    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(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
 function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  }
 }
 
 const entryRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
   const result = await entryRef.value?.validate()
   if (result?.valid) {
+    if (selectedProcedure.value?.length > 0 || selectedDiagnose.value?.length > 0) {
+      result.data.procedure = selectedProcedure.value || []
+      result.data.diagnose = selectedDiagnose.value || []
+    }
+
     console.log('data', result.data)
     handleActionSave(
       {
@@ -77,7 +104,22 @@ async function actionHandler(type: string) {
   }
 }
 
+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
@@ -91,11 +133,32 @@ provide('table_data_loader', isLoading)
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
+    v-model:open="isOpenProcedure"
     title="Pilih Prosedur"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedProcedure"
+      :data="procedures"
+    />
+
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Diagnosa"
+    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/soapi/list.vue b/app/components/content/soapi/list.vue
index a240a65f..5a960d5d 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -1,16 +1,41 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/soapi/list.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 
-const props = defineProps<{
-  label: string
-}>()
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
+import { handleActionRemove } from '~/handlers/soapi-early.handler'
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+  label: string
+}
+const route = useRoute()
+const props = defineProps<Props>()
 const emits = defineEmits(['add', 'edit'])
 
 const data = ref([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isLoading = ref(false)
+const isReadonly = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const paginationMeta = ref<PaginationMeta>(null)
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -24,13 +49,7 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+const typeCode = ref('')
 
 const hreaderPrep: HeaderPrep = {
   title: props.label,
@@ -41,15 +60,86 @@ const hreaderPrep: HeaderPrep = {
   },
 }
 
-async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
+const { recordId } = useQueryCRUDRecordId()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
+
+onMounted(async () => {
+  await getMyList()
+})
+
+async function getMyList() {
+  const url = `/api/v1/soapi?type-code=${typeCode.value}?includes=encounter`
+  const resp = await xfetch(url)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
 }
 
-onMounted(() => {
-  getPatientList()
+function handlePageChange(page: number) {
+  emits('pageChange', page)
+}
+
+function handleBack() {
+  recordId.value = ''
+  backToList()
+}
+
+watch(
+  () => type.value,
+  (val) => {
+    if (val) {
+      if (val === 'early-medical-assessment') {
+        typeCode.value = 'early-medic'
+      } else if (val === 'rehab-medical-assessment') {
+        typeCode.value = 'early-rehab'
+      } else if (val === 'function-assessment') {
+        typeCode.value = 'function'
+      }
+      getMyList()
+    }
+  },
+)
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      emits('edit')
+      isReadonly.value = false
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          mode: 'entry',
+          'record-id': recId.value,
+        },
+      })
+      break
+
+    case ActionEvents.showDetail:
+      emits('edit')
+      isReadonly.value = true
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          mode: 'entry',
+          'record-id': recId.value,
+        },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+
+    case ActionEvents.showAdd:
+      recordId.value = ''
+      goToEntry()
+      emits('add')
+      break
+  }
 })
 
 provide('rec_id', recId)
@@ -59,7 +149,39 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    :prep="{ ...hreaderPrep }"
+    :ref-search-nav="refSearchNav"
+  />
+  <List :data="data" />
 
-  <AssesmentFunctionList :data="data" />
+  <PaginationView
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <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/components/pub/my-ui/comp-tab/comp-tab.vue b/app/components/pub/my-ui/comp-tab/comp-tab.vue
index de045bce..69a47ef2 100644
--- a/app/components/pub/my-ui/comp-tab/comp-tab.vue
+++ b/app/components/pub/my-ui/comp-tab/comp-tab.vue
@@ -12,14 +12,14 @@ const emit = defineEmits<{
 }>()
 
 function changeTab(value: string) {
-  activeTab.value = value;
-  emit('changeTab', value);
+  activeTab.value = value
+  emit('changeTab', value)
 }
 </script>
 
 <template>
   <!-- Tabs -->
-  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
     <Button
       v-for="tab in data"
       :key="tab.value"
@@ -34,10 +34,12 @@ function changeTab(value: string) {
   <!-- Active Tab Content -->
   <div class="mt-4 rounded-md border p-4">
     <component
-      v-if="data.find((t) => t.value === activeTab)?.component"
       :is="data.find((t) => t.value === activeTab)?.component"
-      :label="data.find((t) => t.value === activeTab)?.label"
-      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+      v-bind="data.find((t) => t.value === activeTab)?.props"
     />
+    <!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- :is="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
+    <!-- :label="data.find((t) => t.value === activeTab)?.label" -->
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/pub/my-ui/confirmation/record-confirmation.vue b/app/components/pub/my-ui/confirmation/record-confirmation.vue
index a0455066..cff54b2b 100644
--- a/app/components/pub/my-ui/confirmation/record-confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/record-confirmation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import Confirmation from './confirmation.vue'
 
 interface RecordData {
   id: number | string
diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index 9d88ffee..f3e2ef43 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isRef } from 'vue';
+import { isRef } from 'vue'
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -19,14 +19,21 @@ const loader = inject('table_data_loader') as DataTableLoader
 // local state utk selection
 const selected = ref<any[]>([])
 
-function toggleSelection(row: any) {
-  if (props.selectMode === 'single') {
+function toggleSelection(row: any, event?: Event) {
+  if (event) event.stopPropagation() // cegah event bubble ke TableRow
+
+  const isMultiple = props.selectMode === 'multi' || props.selectMode === 'multiple'
+
+  // gunakan pembanding berdasarkan id atau stringify data
+  const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
+
+  if (!isMultiple) {
+    // mode single
     selected.value = [row]
     emit('update:modelValue', row)
   } else {
-    const idx = selected.value.findIndex((r) => r === row)
-    if (idx >= 0) {
-      selected.value.splice(idx, 1)
+    if (findIndex >= 0) {
+      selected.value.splice(findIndex, 1)
     } else {
       selected.value.push(row)
     }
@@ -35,23 +42,22 @@ function toggleSelection(row: any) {
 }
 
 function deepFetch(data: Record<string, any>, key: string): string {
-  let result = '';
+  let result = ''
   const keys = key.split('.')
-  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
   for (let i = 0; i < keys.length; i++) {
     let idx = keys[i] || ''
     if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
       if (i == keys.length - 1) {
-        return lastVal[idx];
+        return lastVal[idx]
       } else {
-        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+        lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
       }
     }
   }
-  return result;
+  return result
 }
 
-
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -70,7 +76,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
+    <TableHeader
+      v-if="headers"
+      class="bg-gray-50 dark:bg-gray-800"
+    >
       <TableRow v-for="(hr, hrIdx) in headers">
         <TableHead
           v-for="(th, idx) in headers[hrIdx]"
@@ -85,15 +94,25 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
     <TableBody v-if="loader?.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
+      <TableRow
+        v-for="n in getSkeletonSize"
+        :key="`skeleton-${n}`"
+      >
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-skel-${n}-${cellIndex}`"
+          class="border"
+        >
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground dark:bg-gray-700" />
         </TableCell>
       </TableRow>
     </TableBody>
     <TableBody v-else-if="rows.length === 0">
       <TableRow>
-        <TableCell :colspan="keys.length" class="py-8 text-center">
+        <TableCell
+          :colspan="keys.length"
+          class="py-8 text-center"
+        >
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />
             <span class="ml-2">Tidak ada data tersedia</span>
@@ -106,8 +125,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
         v-for="(row, rowIndex) in rows"
         :key="`row-${rowIndex}`"
         :class="{
-          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
-          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
+          'bg-green-50':
+            props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
+          'bg-blue-50':
+            (props.selectMode === 'multi' || props.selectMode === 'multiple') &&
+            selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"
       >
@@ -116,14 +138,23 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           <input
             v-if="props.selectMode === 'single'"
             type="radio"
-            :checked="selected.includes(row)"
-            @change="toggleSelection(row)"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
+          />
+          <input
+            v-else
+            type="checkbox"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
           />
-          <input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
         </TableCell>
 
         <!-- lanjut render cell normal -->
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+        >
           <!-- existing cell renderer -->
           <component
             :is="components?.[key]?.(row, rowIndex).component"
@@ -133,9 +164,12 @@ function handleActionCellClick(event: Event, _cellRef: string) {
             v-bind="components[key]?.(row, rowIndex).props"
           />
           <template v-else>
-            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
+            <div
+              v-if="htmls?.[key]"
+              v-html="htmls?.[key]?.(row, rowIndex)"
+            ></div>
             <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch(row as any, key) }}
             </template>
           </template>
         </TableCell>
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index 4ff05d4c..bf76c327 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -60,7 +60,7 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' gap-y-4 2xl:gap-y-5 [&_.label]:pb-1 [&_.label]:!pt-0 ';
+    cls += ' gap-y-2 2xl:gap-y-3 [&_.label]:pb-1 [&_.label]:!pt-0 ';
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
diff --git a/app/components/pub/my-ui/modal/dialog.vue b/app/components/pub/my-ui/modal/dialog.vue
index 822991d4..974013a2 100644
--- a/app/components/pub/my-ui/modal/dialog.vue
+++ b/app/components/pub/my-ui/modal/dialog.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { Dialog } from '~/components/pub/ui/dialog'
+import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
+import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
 
 interface DialogProps {
   title: string
+  titleIcon?: string
+  titleClass?: string
   description?: string
   preventOutside?: boolean
   open?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
@@ -24,8 +28,9 @@ const sizeClass = computed(() => {
   const sizeMap = {
     sm: 'sm:max-w-[350px]',
     md: 'sm:max-w-[425px]',
-    lg: 'sm:max-w-[600px]',
-    xl: 'sm:max-w-[800px]',
+    lg: 'sm:max-w-[720px]',
+    xl: 'sm:max-w-[960px]',
+    '2xl': 'sm:max-w-[1200px]',
     full: 'sm:max-w-[95vw]',
   }
   return sizeMap[props.size]
@@ -46,10 +51,19 @@ const isOpen = computed({
       @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
     >
       <DialogHeader>
-        <DialogTitle class="text-[20px]">{{ props.title }}</DialogTitle>
+        <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
+          <div class="me-2 pt-0.5">
+            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
+          </div>
+          <div>
+            {{ props.title }}
+          </div>
+        </DialogTitle>
         <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
       </DialogHeader>
-      <slot />
+      <DialogDescription :class="sizeClass">
+        <slot />
+      </DialogDescription>
     </DialogContent>
   </Dialog>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue
new file mode 100644
index 00000000..a4df2da3
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-x" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue b/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue
new file mode 100644
index 00000000..0d8fcfb2
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete' | 'print'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-su.vue b/app/components/pub/my-ui/nav-footer/ba-de-su.vue
new file mode 100644
index 00000000..47246c4c
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-su.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
index 78034463..67d5aec5 100644
--- a/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit' | 'print'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,22 +21,30 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Draf
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('submit')">
-      <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Submit
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">``
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button  variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Draf
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="me-2 align-middle" />
+        Submit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
index e5bbc8f1..8ea3f5ba 100644
--- a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
@@ -1,5 +1,17 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+const props = defineProps<{
+  enableDraft?: boolean
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const enableDraft = props.enableDraft ?? true
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit'
 
 const props = defineProps({
   enableDraft: {
@@ -19,18 +31,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button v-show="enableDraft" class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Draft
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('submit')">
-      <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Submit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left"  />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check"  />
+        Submit
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue b/app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue
deleted file mode 100644
index 4a9d5268..00000000
--- a/app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'delete' | 'print'
-
-const emit = defineEmits<{
-  (e: 'click', type: ClickType): void
-}>()
-
-function onClick(type: ClickType) {
-  emit('click', type)
-}
-</script>
-
-<template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('delete')">
-      <Icon name="i-lucide-trash" class="me-2 align-middle" />
-      Delete
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
-  </div>
-</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-de.vue b/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
index fabaa425..cc607ac0 100644
--- a/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'delete'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('delete')">
-      <Icon name="i-lucide-trash" class="me-2 align-middle" />
-      Delete
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-red-500" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue b/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
index 97bf62de..331c30af 100644
--- a/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'print'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed.vue b/app/components/pub/my-ui/nav-footer/ba-ed.vue
index ae455a81..aebd4296 100644
--- a/app/components/pub/my-ui/nav-footer/ba-ed.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-ed.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'edit'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'edit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,29 +21,18 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button
-      class="bg-gray-400"
-      type="button"
-      @click="onClick('cancel')"
-    >
-      <Icon
-        name="i-lucide-arrow-left"
-        class="me-2 align-middle"
-      />
-      Back
-    </Button>
-    <Button
-      class="bg-orange-500"
-      variant="outline"
-      type="button"
-      @click="onClick('edit')"
-    >
-      <Icon
-        name="i-lucide-file"
-        class="me-2 align-middle"
-      />
-      Edit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('edit')">
+        <Icon name="i-lucide-file" class="me-2 align-middle" />
+        Edit
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-su.vue b/app/components/pub/my-ui/nav-footer/ba-su.vue
index 9db66bb4..613cac85 100644
--- a/app/components/pub/my-ui/nav-footer/ba-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-su.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'submit'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'submit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,26 +21,18 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button
-      class="bg-gray-400"
-      @click="onClick('cancel')"
-    >
-      <Icon
-        name="i-lucide-arrow-left"
-        class="me-2 align-middle"
-      />
-      Back
-    </Button>
-    <Button
-      class="bg-primary"
-      @click="onClick('submit')"
-    >
-      <Icon
-        name="i-lucide-check"
-        class="me-2 align-middle"
-      />
-      Submit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost"@click="onClick('back')" >
+        <Icon name="i-lucide-arrow-left" class="" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="" />
+        Submit
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ca-ed-su.vue b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
new file mode 100644
index 00000000..1f0f5915
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'edit' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button
+        variant="destructive"
+        type="button"
+        @click="onClick('cancel')"
+        >
+        <Icon name="i-lucide-x"  />
+        {{ smallMode ? '' : 'Batal' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        variant="secondary"
+        type="button"
+        @click="onClick('edit')"
+      >
+        <Icon name="i-lucide-pencil" />
+        {{ smallMode ? '' : 'Edit' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        type="button"
+        @click="onClick('submit')"
+      >
+        <Icon name="i-lucide-check"  />
+        {{ smallMode ? '' : 'Submit' }}
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ca-sa.vue b/app/components/pub/my-ui/nav-footer/ca-sa.vue
new file mode 100644
index 00000000..cbd5ef7f
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ca-sa.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('cancel')">
+        <Icon name="i-lucide-x"  />
+        Batal
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/cl-sa.vue b/app/components/pub/my-ui/nav-footer/cl-sa.vue
new file mode 100644
index 00000000..fea6fc56
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/cl-sa.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('close')">
+        <Icon name="i-lucide-x"  />
+        Tutup
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ok.vue b/app/components/pub/my-ui/nav-footer/ok.vue
new file mode 100644
index 00000000..da2f69ea
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ok.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'ok'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button type="button" @click="onClick('ok')">
+        <Icon name="i-lucide-x"  />
+        OK
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index c1aa89a8..c4063089 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-slate-300 dark:border-slate-600 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
diff --git a/app/components/pub/ui/dialog/DialogContent.vue b/app/components/pub/ui/dialog/DialogContent.vue
index 5e9e8538..0c0fbf6b 100644
--- a/app/components/pub/ui/dialog/DialogContent.vue
+++ b/app/components/pub/ui/dialog/DialogContent.vue
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-2 2x:gap-3 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )"
     >
diff --git a/app/components/pub/ui/dialog/DialogDescription.vue b/app/components/pub/ui/dialog/DialogDescription.vue
index 3444c492..c7ac62d1 100644
--- a/app/components/pub/ui/dialog/DialogDescription.vue
+++ b/app/components/pub/ui/dialog/DialogDescription.vue
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DialogDescription
     v-bind="forwardedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
+    :class="cn('text-sm', props.class)"
   >
     <slot />
   </DialogDescription>
diff --git a/app/composables/useQueryParam.ts b/app/composables/useQueryParam.ts
new file mode 100644
index 00000000..29674b88
--- /dev/null
+++ b/app/composables/useQueryParam.ts
@@ -0,0 +1,32 @@
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryParam(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const getQueryParam = (key: string) => {
+    return route.query[key]
+  }
+
+  const setQueryParam = (key: string, val: string) => {
+    router.replace({
+      path: route.path,
+      query: {
+        ...route.query,
+        [key]: val === 'list' ? undefined : val,
+      },
+    })
+  }
+
+  const setQueryParams = (keyVal: Record<string, string>) => {
+    router.replace({
+      path: route.path,
+      query: {
+        ...route.query,
+        ...keyVal,
+      },
+    })
+  }
+
+  return { getQueryParam, setQueryParam, setQueryParams}
+}
diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
index 543c3b90..ced57e3e 100644
--- a/app/composables/useRBAC.ts
+++ b/app/composables/useRBAC.ts
@@ -9,13 +9,12 @@ export function useRBAC() {
 
   const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
     const roles = authStore.userRole
-    return roles.some((role: string) => role in roleAccess)
+    return roles.some((role: string) => (role in roleAccess) || role === 'system') // system by-passes this check
   }
 
   const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
     const roles = authStore.userRole
-    // const roles = ['admisi']
-    return roles.some((role: string) => roleAccess[role]?.includes(permission))
+    return roles.some((role: string) => roleAccess[role]?.includes(permission) || role === 'system') // system by-passes this check
   }
 
   const getUserPermissions = (roleAccess: RoleAccess, _userRoles?: string[]): Permission[] => {
@@ -23,7 +22,7 @@ export function useRBAC() {
     // const roles = ['admisi']
     const permissions = new Set<Permission>()
 
-    roles.forEach((role) => {
+    roles.forEach((role: string) => {
       if (roleAccess[role]) {
         roleAccess[role].forEach((permission) => permissions.add(permission))
       }
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 59dd9bf5..3a52b22e 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -66,9 +66,26 @@ export const timeUnitCodes: Record<string, string> = {
   year: 'Tahun',
 }
 
+export const bigTimeUnitCodes: Record<string, string> = {
+  day: 'Hari',
+  week: 'Minggu',
+  month: 'Bulan',
+  year: 'Tahun',
+}
+
 export const dischargeMethodCodes: Record<string, string> = {
-  home: 'Home',
-  'home-request': 'Home Request',
+  home: "Pulang",
+  "home-request": "Pulang Atas Permintaan Sendiri",
+  "consul-back": "Konsultasi Balik / Lanjutan",
+  "consul-poly": "Konsultasi Poliklinik Lain",
+  "consul-executive": "Konsultasi Antar Dokter Eksekutif",
+  "consul-ch-day": "Konsultasi Hari Lain",
+  emergency: "Rujuk IGD",
+  "emergency-covid": "Rujuk IGD Covid",
+  inpatient: "Rujuk Rawat Inap",
+  external: "Rujuk Faskes Lain",
+  death: "Meninggal",
+  "death-on-arrival": "Meninggal Saat Tiba"
 }
 
 export const genderCodes: Record<string, string> = {
diff --git a/app/models/death-cause.ts b/app/models/death-cause.ts
new file mode 100644
index 00000000..0f04609a
--- /dev/null
+++ b/app/models/death-cause.ts
@@ -0,0 +1,6 @@
+export interface DeathCause {
+  id: bigint;
+  encounter_id: bigint;
+  value: any; // json mapped to 'any' type
+}
+  
\ No newline at end of file
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index 681a2ac9..fb2c0b04 100644
--- a/app/models/encounter.ts
+++ b/app/models/encounter.ts
@@ -1,5 +1,7 @@
+import type { DeathCause } from "./death-cause"
 import { type Doctor, genDoctor } from "./doctor"
 import { genEmployee, type Employee } from "./employee"
+import type { InternalReference } from "./internal-reference"
 import { type Patient, genPatient } from "./patient"
 import type { Specialist } from "./specialist"
 import type { Subspecialist } from "./subspecialist"
@@ -29,8 +31,11 @@ export interface Encounter {
     earlyEducation?: string
     medicalDischargeEducation: string
     admDischargeEducation?: string
-    dischargeMethod_code?: string
+    discharge_method_code?: string
     discharge_reason?: string
+    discharge_date?: string
+    internalReferences?: InternalReference[]
+    deathCause?: DeathCause
     status_code: string
 }
 
diff --git a/app/models/internal-reference.ts b/app/models/internal-reference.ts
new file mode 100644
index 00000000..8af315a8
--- /dev/null
+++ b/app/models/internal-reference.ts
@@ -0,0 +1,12 @@
+export interface InternalReference {
+  id: number;
+  encounter_id: number;
+  unit_id: number;     // smallint mapped to number
+  doctor_id: number;   // int mapped to number
+}
+
+export interface CreateDto {
+  encounter_id: number;
+  unit_id: number;     // smallint mapped to number
+  doctor_id: number;   // int mapped to number
+}
\ No newline at end of file
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
index 81d919ea..9deaeb1f 100644
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -5,7 +5,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
diff --git a/app/schemas/encounter.schema.ts b/app/schemas/encounter.schema.ts
new file mode 100644
index 00000000..e3c9affc
--- /dev/null
+++ b/app/schemas/encounter.schema.ts
@@ -0,0 +1,48 @@
+import { z } from 'zod'
+import { InternalReferenceSchema } from './internal-reference.schema'
+
+// Check In
+const CheckInSchema = z.object({
+  // registeredAt: z.string({ required_error: 'Tanggal masuk harus diisi' }),
+  responsible_doctor_id: z.number({ required_error: 'Dokter harus diisi' }).gt(0, 'Dokter harus diisi'),
+  adm_employee_id: z.number({ required_error: 'PJA harus diisi' }).gt(0, 'PJA harus diisi'),
+})
+type CheckInFormData = z.infer<typeof CheckInSchema>
+
+// Checkout
+const CheckOutSchema = z.object({
+  discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
+  discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
+})
+type CheckOutFormData = z.infer<typeof CheckOutSchema>
+
+// CheckoutDeath
+const CheckOutDeathSchema = z.object({
+  discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
+  discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
+  death_cause: z.array(z.string()).nonempty(),
+})
+type CheckOutDeathFormData = z.infer<typeof CheckOutDeathSchema>
+
+// CheckoutDeath
+const CheckOutInternalReferenceSchema = z.object({
+  discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
+  discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
+  internalReferences: z.array(InternalReferenceSchema).nonempty(),
+})
+type CheckOutInternalReferenceFormData = z.infer<typeof CheckOutInternalReferenceSchema>
+
+
+// Exports
+export {
+  CheckInSchema,
+  CheckOutSchema,
+  CheckOutDeathSchema,
+  CheckOutInternalReferenceSchema
+}
+export type {
+  CheckInFormData,
+  CheckOutFormData,
+  CheckOutDeathFormData,
+  CheckOutInternalReferenceFormData
+}
diff --git a/app/schemas/internal-reference.schema.ts b/app/schemas/internal-reference.schema.ts
new file mode 100644
index 00000000..eae75319
--- /dev/null
+++ b/app/schemas/internal-reference.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { InternalReference } from '~/models/internal-reference'
+
+const InternalReferenceSchema = z.object({
+  'unit_id': z.number({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  'doctor_id': z.number({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+})
+
+type InternalReferenceFormData = z.infer<typeof InternalReferenceSchema> & Partial<InternalReference>
+
+export { InternalReferenceSchema }
+export type { InternalReferenceFormData }
diff --git a/app/services/employee.service.ts b/app/services/employee.service.ts
index d3691c83..366ef71e 100644
--- a/app/services/employee.service.ts
+++ b/app/services/employee.service.ts
@@ -31,7 +31,7 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
     const resultData = result.body?.data || []
     data = resultData.map((item: any) => ({
       value: item.id ? Number(item.id) : item.code,
-      label: item.name,
+      label: item.person.name,
     }))
   }
   return data
diff --git a/app/services/encounter.service.ts b/app/services/encounter.service.ts
index cd7c28ed..6e42fd41 100644
--- a/app/services/encounter.service.ts
+++ b/app/services/encounter.service.ts
@@ -1,4 +1,5 @@
 // Base
+import type { CheckInFormData } from '~/schemas/encounter.schema'
 import * as base from './_crud-base'
 
 // Constants
@@ -46,3 +47,16 @@ export function getValueLabelListConstants() {
     .filter(([key]) => allowed.includes(key))
     .map(([key, value]) => ({ value: key, label: value }))
 }
+
+export async function checkIn(id: number, data: CheckInFormData) {
+  try {
+    const resp = await xfetch(`${path}/${id}/check-in`, 'PATCH', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
+  }
+}
\ No newline at end of file
diff --git a/app/stores/user.ts b/app/stores/user.ts
index cbe92a69..14ab7134 100644
--- a/app/stores/user.ts
+++ b/app/stores/user.ts
@@ -7,7 +7,10 @@ export const useUserStore = defineStore(
     const isAuthenticated = computed(() => !!user.value)
     const userRole = computed(() => {
       const roles = user.value?.roles || []
-      return roles.map((v) => v.split('-')[1])
+      return roles.map((input: string) => {
+        const parts = input.split('-')
+        return parts.length > 1 ? parts[1]: parts[0]
+      })
     })
 
     const login = async (userData: any) => {