diff --git a/.env.example b/.env.example
index b6721291..562f601c 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,3 @@
-API_ORIGIN=
+NUXT_MAIN_API_ORIGIN=
+NUXT_BPJS_API_ORIGIN=
+NUXT_SYNC_API_ORIGIN=
diff --git a/.gitignore b/.gitignore
index 4a7f73a2..5bdfc11f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+.vscode
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index 4b1147d4..00000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
-    }
-  ]
-}
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index cab62d6e..17502027 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -174,7 +174,7 @@ body {
 }
 
 body, table, label {
-  @apply md:!text-xs 2xl:!text-sm; 
+  @apply md:!text-xs 2xl:!text-sm;
 }
 
 /* Container */
diff --git a/app/components/app/assesment-function/list-cfg.ts b/app/components/app/assesment-function/list-cfg.ts
index 460cacd9..a11537a7 100644
--- a/app/components/app/assesment-function/list-cfg.ts
+++ b/app/components/app/assesment-function/list-cfg.ts
@@ -1,119 +1,114 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
 import { defineAsyncComponent } from 'vue'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  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 '-'
-  },
-}
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  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 '-'
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec: unknown, idx: number) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
+
+  htmls: {
+    patient_address(rec: unknown) {
+      return '-'
+    },
+  },
+}
\ No newline at end of file
diff --git a/app/components/app/assesment-function/list.vue b/app/components/app/assesment-function/list.vue
index b9a74929..58b4f1bd 100644
--- a/app/components/app/assesment-function/list.vue
+++ b/app/components/app/assesment-function/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -7,13 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <PubMyUiDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <PubMyUiDataTable v-bind="config" :rows="data" />
 </template>
diff --git a/app/components/app/bed/list-cfg.ts b/app/components/app/bed/list-cfg.ts
index 8e940723..825db939 100644
--- a/app/components/app/bed/list-cfg.ts
+++ b/app/components/app/bed/list-cfg.ts
@@ -1,44 +1,44 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Kamar' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Kamar' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/bed/list.vue b/app/components/app/bed/list.vue
index f8b4bf29..19642581 100644
--- a/app/components/app/bed/list.vue
+++ b/app/components/app/bed/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/building/list-cfg.ts b/app/components/app/building/list-cfg.ts
index 905ec837..016caa03 100644
--- a/app/components/app/building/list-cfg.ts
+++ b/app/components/app/building/list-cfg.ts
@@ -1,37 +1,36 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/building/list.vue b/app/components/app/building/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/building/list.vue
+++ b/app/components/app/building/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/chamber/list-cfg.ts b/app/components/app/chamber/list-cfg.ts
index 0669b99b..7f10fe7a 100644
--- a/app/components/app/chamber/list-cfg.ts
+++ b/app/components/app/chamber/list-cfg.ts
@@ -1,44 +1,44 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Lantai' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/chamber/list.vue b/app/components/app/chamber/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/chamber/list.vue
+++ b/app/components/app/chamber/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/consultation/entry.vue b/app/components/app/consultation/entry.vue
index db983ef1..bff12bfb 100644
--- a/app/components/app/consultation/entry.vue
+++ b/app/components/app/consultation/entry.vue
@@ -10,10 +10,12 @@ import type z from 'zod'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import Textarea from '~/components/pub/ui/textarea/Textarea.vue'
+import type { CreateDto } from '~/models/consultation'
 
 interface Props {
   schema: z.ZodSchema<any>
-  values: any
+  values: CreateDto
+  encounter_id: number
   units: { value: string; label: string }[]
   isLoading?: boolean
   isReadonly?: boolean
@@ -27,26 +29,29 @@ const emit = defineEmits<{
   cancel: [resetForm: () => void]
 }>()
 
+const today = new Date()
 const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
   initialValues: {
-    id: 0,
-    encounter_id: 0,
+    date: props.values.date || today.toISOString().slice(0, 10),
     problem: '',
-    unit_id: 0,
+    dstUnit_id: 0,
   } as Partial<ConsultationFormData>,
 })
 
+const [date, dateAttrs] = defineField('date')
 const [unit_id, unitAttrs] = defineField('unit_id')
 const [problem, problemAttrs] = defineField('problem')
 
 // Fill fields from props.values if provided
 if (props.values) {
-  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id
-  if (props.values.code !== undefined) problem.value = props.values.problem
+  if (props.values.date !== undefined) date.value = props.values.date.substring(0, 10)
+  if (props.values.dstUnit_id !== undefined) unit_id.value = props.values.dstUnit_id
+  if (props.values.problem !== undefined) problem.value = props.values.problem
 }
 
 const resetForm = () => {
+  date.value = date.value ?? today.toISOString().slice(0, 10)
   unit_id.value = 0
   problem.value = ''
 }
@@ -54,10 +59,10 @@ const resetForm = () => {
 // Form submission handler
 function onSubmitForm(values: any) {
   const formData: ConsultationFormData = {
-    id: 0,
-    encounter_id: 0,
+    encounter_id: props.encounter_id,
+    date: date.value ? `${date.value}T00:00:00Z` : '',
     problem: problem.value || '',
-    unit_id: unit_id.value || 0,
+    dstUnit_id: unit_id.value || 0,
   }
   emit('submit', formData, resetForm)
 }
@@ -71,16 +76,15 @@ function onCancelForm() {
 <template>
   <form id="form-division" @submit.prevent>
     <DE.Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="3" :cellFlex="false">
-      <DE.Cell>
-        <DE.Label>Dokter Asal</DE.Label>
-        <DE.Field :errMessage="errors.code">
-          <Input readonly />
-        </DE.Field>
-      </DE.Cell>
       <DE.Cell>
         <DE.Label>Tanggal</DE.Label>
         <DE.Field :errMessage="errors.code">
-          <Input readonly />
+          <Input
+            v-model.number="date"
+            icon-name="i-lucide-chevron-down"
+            v-bind="dateAttrs"
+            readonly
+          />
         </DE.Field>
       </DE.Cell>
       <DE.Cell>
@@ -91,7 +95,7 @@ function onCancelForm() {
             id="strUnit_id"
             v-model.number="unit_id"
             icon-name="i-lucide-chevron-down"
-            placeholder="Pilih kelompok obat"
+            placeholder="Pilih poliklinik tujuan"
             v-bind="unitAttrs"
             :items="props.units || []"
             :disabled="isLoading || isReadonly"
diff --git a/app/components/app/consultation/list.cfg.ts b/app/components/app/consultation/list.cfg.ts
new file mode 100644
index 00000000..587ec0f8
--- /dev/null
+++ b/app/components/app/consultation/list.cfg.ts
@@ -0,0 +1,54 @@
+import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { Consultation } from '~/models/consultation'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+export const config: Config = {
+  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  headers: [[
+    { label: 'Tanggal' },
+    { label: 'Tujuan' },
+    { label: 'Dokter' },
+    { label: 'Pertanyaan' },
+    { label: 'Jawaban' },
+    { label: '' },
+  ]],
+  keys: ['date', 'dstUnit.name', 'dstDoctor.name', 'problem', 'solution', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+    date(rec) {
+      const recX = rec as Consultation
+      return recX.date?.substring(0, 10) || '-'
+    }
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  } as RecStrFuncComponent,
+  htmls: {} as RecStrFuncUnknown,
+}
diff --git a/app/components/app/consultation/list.vue b/app/components/app/consultation/list.vue
index b68ea6dd..19c6a9f9 100644
--- a/app/components/app/consultation/list.vue
+++ b/app/components/app/consultation/list.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
-import { cols, funcComponent, funcHtml, header, keys } from './list'
+import { config } from './list.cfg'
 
 interface Props {
   data: any[]
   paginationMeta: PaginationMeta
 }
-
-defineProps<Props>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -21,13 +20,9 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <!-- FIXME: pindahkan ke content/division/list.vue   -->
diff --git a/app/components/app/counter/list-cfg.ts b/app/components/app/counter/list-cfg.ts
index 905ec837..016caa03 100644
--- a/app/components/app/counter/list-cfg.ts
+++ b/app/components/app/counter/list-cfg.ts
@@ -1,37 +1,36 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/counter/list.vue b/app/components/app/counter/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/counter/list.vue
+++ b/app/components/app/counter/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/device-order-item/list-entry.config.ts b/app/components/app/device-order-item/list-entry.config.ts
new file mode 100644
index 00000000..f2f3ef86
--- /dev/null
+++ b/app/components/app/device-order-item/list-entry.config.ts
@@ -0,0 +1,36 @@
+import { defineAsyncComponent } from 'vue'
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+  headers: [[{ label: 'Nama' }, { label: 'Jumlah' }, { label: '' }]],
+  keys: ['name', 'count', 'action'],
+  delKeyNames: [
+    { key: 'name', label: 'Nama' },
+    { key: 'count', label: 'Jumlah' },
+  ],
+  skeletonSize: 10
+  // funcParsed: {
+  //   parent: (rec: unknown): unknown => {
+  //     const recX = rec as SmallDetailDto
+  //     return recX.parent?.name || '-'
+  //   },
+  // },
+  // funcComponent: {
+  //   action(rec: object, idx: any) {
+  //     const res: RecComponent = {
+  //       idx,
+  //       rec: rec as object,
+  //       component: action,
+  //       props: {
+  //         size: 'sm',
+  //       },
+  //     }
+  //     return res
+  //   },
+  // }
+}
+
diff --git a/app/components/app/device-order-item/list-entry.vue b/app/components/app/device-order-item/list-entry.vue
new file mode 100644
index 00000000..26f6691d
--- /dev/null
+++ b/app/components/app/device-order-item/list-entry.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import { config } from './list-entry.config'
+</script>
+
+<template>
+  <DataTable v-bind="config" :rows="[]" class="border mb-3 2xl:mb-4" />
+  <div>
+    <Button>
+      Tambah
+    </Button>
+  </div>
+</template>
diff --git a/app/components/app/device-order/entry-form.vue b/app/components/app/device-order/entry-form.vue
new file mode 100644
index 00000000..bea2b6eb
--- /dev/null
+++ b/app/components/app/device-order/entry-form.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    Test
+</template>
diff --git a/app/components/app/device-order/list.config.ts b/app/components/app/device-order/list.config.ts
new file mode 100644
index 00000000..7580c576
--- /dev/null
+++ b/app/components/app/device-order/list.config.ts
@@ -0,0 +1,42 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { DeviceOrder } from '~/models/device-order'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { }, { }, { width: 50 }],
+  headers: [[{ label: 'Tanggal' }, { label: 'DPJP' }, { label: 'Alat Kesehatan' }, { label: '' }]],
+  keys: ['createdAt', 'encounter.doctor.person.name', 'items', 'action'],
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+  skeletonSize: 10,
+  htmls: {
+    items: (rec: unknown): unknown => {
+      const recX = rec as DeviceOrder
+      return recX.items?.length || 0
+    },
+  }
+  // funcParsed: {
+  //   parent: (rec: unknown): unknown => {
+  //     const recX = rec as SmallDetailDto
+  //     return recX.parent?.name || '-'
+  //   },
+  // },
+  // funcComponent: {
+  //   action(rec: object, idx: any) {
+  //     const res: RecComponent = {
+  //       idx,
+  //       rec: rec as object,
+  //       component: action,
+  //       props: {
+  //         size: 'sm',
+  //       },
+  //     }
+  //     return res
+  //   },
+  // }
+}
+
diff --git a/app/components/app/device-order/list.vue b/app/components/app/device-order/list.vue
new file mode 100644
index 00000000..37b24ea3
--- /dev/null
+++ b/app/components/app/device-order/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.config'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="[]"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/diagnose-src/entry-form.vue b/app/components/app/diagnose-src/entry-form.vue
new file mode 100644
index 00000000..3f84b2a2
--- /dev/null
+++ b/app/components/app/diagnose-src/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DiagnoseSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<DiagnoseSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: DiagnoseSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-diagnose-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/diagnose-src/list-cfg.ts b/app/components/app/diagnose-src/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/diagnose-src/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/diagnose-src/list.vue b/app/components/app/diagnose-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/diagnose-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/division-position/list-cfg.ts b/app/components/app/division-position/list-cfg.ts
index e5a9944e..e35627d2 100644
--- a/app/components/app/division-position/list-cfg.ts
+++ b/app/components/app/division-position/list-cfg.ts
@@ -1,64 +1,59 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Nama' },
-    { label: 'Divisi Induk' },
-    { label: 'Karyawan' },
-    { label: 'Status Kepala' },
-    { label: '' },
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Divisi Induk' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
   ],
-]
 
-export const keys = ['code', 'name', 'division', 'employee', 'head', 'action']
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  division: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.division?.name || '-'
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.employee?.name || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
   },
-  employee: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.employee?.name || '-'
-  },
-  head: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.headStatus ? 'Ya' : 'Tidak'
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/division-position/list.vue b/app/components/app/division-position/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/division-position/list.vue
+++ b/app/components/app/division-position/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/division/entry-form-prev.vue b/app/components/app/division/entry-form-prev.vue
new file mode 100644
index 00000000..0684fc55
--- /dev/null
+++ b/app/components/app/division/entry-form-prev.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Form } from '~/components/pub/ui/form'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+    }[]
+  }
+  divisionTree?: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    data: TreeItem[]
+    onFetchChildren: (parentId: string) => Promise<void>
+  }
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: DivisionFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
+            <Field id="name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama divisi" autocomplete="off"
+                      v-bind="componentField"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
+            <Field id="code" :errors="errors">
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input id="code" type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="parentId">Divisi Induk</Label>
+            <Field id="parentId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="parentId">
+                <FormItem>
+                  <FormControl>
+                    <!-- Gunakan TreeSelect jika divisionTree tersedia, fallback ke Combobox -->
+                    <TreeSelect
+                      v-if="props.divisionTree"
+                      id="parentId"
+                      :model-value="componentField.modelValue"
+                      :data="props.divisionTree.data"
+                      :on-fetch-children="props.divisionTree.onFetchChildren"
+                      @update:model-value="componentField.onChange"
+                    />
+                    <Combobox
+                      v-else
+                      id="parentId" v-bind="componentField" :items="props.division.items"
+                      :placeholder="props.division.msg.placeholder" :search-placeholder="props.division.msg.search"
+                      :empty-message="props.division.msg.empty"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/division/list-cfg.ts b/app/components/app/division/list-cfg.ts
index d5479579..54ed06a6 100644
--- a/app/components/app/division/list-cfg.ts
+++ b/app/components/app/division/list-cfg.ts
@@ -1,47 +1,47 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Divisi Induk' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
\ No newline at end of file
diff --git a/app/components/app/division/list.vue b/app/components/app/division/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/division/list.vue
+++ b/app/components/app/division/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/division/tree.vue b/app/components/app/division/tree.vue
new file mode 100644
index 00000000..a6f66eff
--- /dev/null
+++ b/app/components/app/division/tree.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+
+/**
+ * DEMO COMPONENT - Tree Select dengan Lazy Loading
+ *
+ * Komponen ini adalah contoh penggunaan TreeSelect dengan data teknologi.
+ * Untuk penggunaan dalam aplikasi nyata, lihat komponen content/division/entry.vue
+ * yang menggunakan tree select untuk data divisi rumah sakit.
+ */
+
+// Tipe data untuk konsistensi
+interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
+
+// State untuk data pohon demo - data teknologi sebagai contoh
+const treeData = ref<TreeItem[]>([
+  { value: 'frontend', label: 'Frontend Development', hasChildren: true },
+  { value: 'backend', label: 'Backend Development', hasChildren: true },
+  { value: 'mobile', label: 'Mobile Development', hasChildren: true },
+  { value: 'devops', label: 'DevOps & Infrastructure', hasChildren: false },
+])
+
+// State untuk menampung nilai yang dipilih
+const selectedValue = ref<string>()
+
+// --- DEMO LOGIC: SIMULASI API DAN MANIPULASI DATA ---
+
+// Helper: Fungsi rekursif untuk mencari dan menyisipkan data anak ke dalam state
+function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]): boolean {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    if (node && node.value === parentId) {
+      // Gunakan Vue.set equivalent untuk memastikan reactivity
+      node.children = [...newChildren]
+      console.log(`[findAndInsertChildren] Updated children for ${parentId}:`, node.children)
+      return true
+    }
+    if (node && node.children && findAndInsertChildren(node.children, parentId, newChildren)) {
+      return true
+    }
+  }
+  return false
+}
+
+// Fungsi demo untuk simulasi fetch data dari API
+async function handleFetchChildren(parentId: string): Promise<void> {
+  console.log(`[DEMO] Mengambil data anak untuk parent: ${parentId}`)
+
+  // Simulasi delay API call
+  await new Promise(resolve => setTimeout(resolve, 600))
+
+  let childrenData: TreeItem[] = []
+
+  // Sample data berdasarkan parent ID
+  switch (parentId) {
+    case 'frontend':
+      childrenData = [
+        { value: 'vue', label: 'Vue.js', hasChildren: true },
+        { value: 'react', label: 'React.js', hasChildren: true },
+        { value: 'angular', label: 'Angular', hasChildren: false },
+        { value: 'svelte', label: 'Svelte', hasChildren: false },
+      ]
+      break
+    case 'backend':
+      childrenData = [
+        { value: 'nodejs', label: 'Node.js', hasChildren: true },
+        { value: 'python', label: 'Python', hasChildren: true },
+        { value: 'golang', label: 'Go', hasChildren: false },
+        { value: 'rust', label: 'Rust', hasChildren: false },
+      ]
+      break
+    case 'mobile':
+      childrenData = [
+        { value: 'flutter', label: 'Flutter', hasChildren: false },
+        { value: 'react-native', label: 'React Native', hasChildren: false },
+        { value: 'ionic', label: 'Ionic', hasChildren: false },
+      ]
+      break
+    case 'vue':
+      childrenData = [
+        { value: 'nuxt', label: 'Nuxt.js', hasChildren: false },
+        { value: 'quasar', label: 'Quasar', hasChildren: false },
+      ]
+      break
+    case 'react':
+      childrenData = [
+        { value: 'nextjs', label: 'Next.js', hasChildren: false },
+        { value: 'gatsby', label: 'Gatsby', hasChildren: false },
+      ]
+      break
+    case 'nodejs':
+      childrenData = [
+        { value: 'express', label: 'Express.js', hasChildren: false },
+        { value: 'nestjs', label: 'NestJS', hasChildren: false },
+        { value: 'fastify', label: 'Fastify', hasChildren: false },
+      ]
+      break
+    case 'python':
+      childrenData = [
+        { value: 'django', label: 'Django', hasChildren: false },
+        { value: 'fastapi', label: 'FastAPI', hasChildren: false },
+        { value: 'flask', label: 'Flask', hasChildren: false },
+      ]
+      break
+  }
+
+  // Insert data ke dalam tree state
+  const success = findAndInsertChildren(treeData.value, parentId, childrenData)
+  console.log(`[DEMO] Insert children result:`, success)
+
+  // Force trigger reactivity
+  triggerRef(treeData)
+  console.log(`[DEMO] Current tree data:`, JSON.stringify(treeData.value, null, 2))
+}
+</script>
+
+<template>
+  <div class="p-10 max-w-2xl mx-auto">
+    <div class="mb-6">
+      <h1 class="mb-2 text-3xl font-bold text-slate-800">Demo: Tree Select dengan Lazy Loading</h1>
+      <p class="text-slate-600">
+        Contoh penggunaan komponen TreeSelect dengan data teknologi.
+        Pilih item untuk melihat sub-kategori yang dimuat secara lazy.
+      </p>
+    </div>
+
+    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+      <h3 class="font-semibold text-blue-800 mb-2">💡 Catatan untuk Developer:</h3>
+      <p class="text-sm text-blue-700">
+        Untuk implementasi nyata dengan data divisi rumah sakit,
+        lihat komponen <code class="px-1 bg-blue-100 rounded">content/division/entry.vue</code>
+      </p>
+    </div>
+
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-slate-700 mb-2">
+          Pilih Teknologi:
+        </label>
+        <TreeSelect
+          v-model="selectedValue"
+          :data="treeData"
+          :on-fetch-children="handleFetchChildren"
+        />
+      </div>
+
+      <div class="p-4 bg-slate-50 rounded-lg">
+        <p class="text-sm text-slate-600 mb-1">Value yang terpilih:</p>
+        <span class="px-3 py-1 font-mono text-sm bg-white border rounded-md">
+          {{ selectedValue || 'Belum ada yang dipilih' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="mt-8 text-xs text-slate-500">
+      <p>🔄 Data dimuat secara lazy saat node parent dibuka</p>
+      <p>⏱️ Simulasi delay 600ms untuk menampilkan loading state</p>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/doctor/list-cfg.ts b/app/components/app/doctor/list-cfg.ts
index 14c9cf0d..52111fc7 100644
--- a/app/components/app/doctor/list-cfg.ts
+++ b/app/components/app/doctor/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  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
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    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
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-}
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
\ No newline at end of file
diff --git a/app/components/app/doctor/list.vue b/app/components/app/doctor/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/doctor/list.vue
+++ b/app/components/app/doctor/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/employee/list-cfg.ts b/app/components/app/employee/list-cfg.ts
index 69ee9962..4c6f691c 100644
--- a/app/components/app/employee/list-cfg.ts
+++ b/app/components/app/employee/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -17,93 +10,95 @@ const doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    console.log(rec)
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    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
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    status: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return doctorStatus[recX.status_code as keyof typeof doctorStatus]
     }
-    return recX.identity_number
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  status: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
-  },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
     }
-    return res
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/employee/list.vue b/app/components/app/employee/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/employee/list.vue
+++ b/app/components/app/employee/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index fd6c8da9..25bdf9d8 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -108,248 +108,246 @@ function onAddSep() {
     :initial-values="initialValues"
   >
     <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
-      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-        <div class="flex flex-col justify-between">
-          <div class="p-2">
-            <h2 class="text-md font-semibold">Data Pasien</h2>
-          </div>
-          <div class="my-2 flex gap-6 p-2 text-sm">
-            <span>
-              Sudah pernah terdaftar sebagai pasien?
-              <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
-                <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
-              </Button>
-            </span>
-            <span>
-              Belum pernah terdaftar sebagai pasien?
-              <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
-                <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
-              </Button>
-            </span>
-          </div>
-          <Block :colCount="3">
-            <Cell>
-              <Label label-for="patient_name">Nama Pasien</Label>
-              <Field id="patient_name" :errors="errors">
-                <FormField v-slot="{ componentField }" name="patient_name">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="patient_name"
-                        v-bind="componentField"
-                        disabled
-                        placeholder="Tambah data pasien terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- NIK -->
-            <Cell :cosSpan="3">
-              <Label label-for="nik">NIK</Label>
-              <Field id="nik" :errors="errors">
-                <FormField v-slot="{ componentField }" name="nik">
-                  <FormItem>
-                    <FormControl>
-                      <Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-            <Cell>
-              <Label label-for="rm">No. RM</Label>
-              <Field id="rm" :errors="errors">
-                <FormField v-slot="{ componentField }" name="rm">
-                  <FormItem>
-                    <FormControl>
-                      <Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
-          <Separator />
-
-          <div class="p-2">
-            <h2 class="text-md font-semibold">Data Kunjungan</h2>
-          </div>
-
-          <Block :colCount="3">
-            <!-- Dokter (Combobox) -->
-            <Cell :cosSpan="3">
-              <Label label-for="doctor_id">Dokter</Label>
-              <Field id="doctor_id" :errors="errors">
-                <FormField v-slot="{ componentField }" name="doctor_id">
-                  <FormItem>
-                    <FormControl>
-                      <Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Tanggal Daftar (DatePicker) -->
-            <Cell :cosSpan="3">
-              <Label label-for="register_date">Tanggal Daftar</Label>
-              <Field id="register_date" :errors="errors">
-                <FormField v-slot="{ componentField }" name="register_date">
-                  <FormItem>
-                    <FormControl>
-                      <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Jenis Pembayaran (Combobox) -->
-            <Cell :cosSpan="3">
-              <Label label-for="payment_type">Jenis Pembayaran</Label>
-              <Field id="payment_type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="payment_type">
-                  <FormItem>
-                    <FormControl>
-                      <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
-                      <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
-
-          <Block :colCount="3">
-            <Cell :cosSpan="3">
-              <Label label-for="bpjs_number">Kelompok Peserta</Label>
-              <Field id="bpjs_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="bpjs_number">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="bpjs_number"
-                        v-bind="componentField"
-                        placeholder="Pilih jenis pembayaran terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- No. Kartu BPJS -->
-            <Cell :cosSpan="3">
-              <Label label-for="bpjs_number">No. Kartu BPJS</Label>
-              <Field id="bpjs_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="bpjs_number">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="bpjs_number"
-                        v-bind="componentField"
-                        placeholder="Pilih jenis pembayaran terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Jenis SEP -->
-            <Cell :cosSpan="3">
-              <Label label-for="sep_type">Jenis SEP</Label>
-              <Field id="sep_type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_type">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
-
-          <Block :colCount="3">
-            <!-- No. SEP (input + tombol +) -->
-            <Cell :cosSpan="3">
-              <Label label-for="sep_number">No. SEP</Label>
-              <Field id="sep_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_number">
-                  <FormItem>
-                    <FormControl>
-                      <div class="flex gap-2">
-                        <Input
-                          id="sep_number"
-                          v-bind="componentField"
-                          placeholder="Tambah SEP terlebih dahulu"
-                          class="flex-1"
-                        />
-                        <Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Dokumen SEP (file) -->
-            <Cell :cosSpan="3">
-              <Label label-for="sep_file">Dokumen SEP</Label>
-              <Field id="sep_file" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_file">
-                  <FormItem>
-                    <FormControl>
-                      <div class="flex items-center gap-2">
-                        <input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
-                        <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
-                          >Pilih Berkas</Button
-                        >
-                        <Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Dokumen SIPP (file) -->
-            <Cell :cosSpan="3" labelSize="thin">
-              <Label label-for="sipp_file">Dokumen SIPP</Label>
-              <Field id="sipp_file" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sipp_file">
-                  <FormItem>
-                    <FormControl>
-                      <div class="flex items-center gap-2">
-                        <input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
-                        <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
-                          >Pilih Berkas</Button
-                        >
-                        <Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
+      <div class="flex flex-col justify-between">
+        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
+          Data Pasien
         </div>
+        <div class="flex gap-6 mb-2 2xl:mb-2">
+          <span>
+            Sudah pernah terdaftar sebagai pasien?
+            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
+              <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
+            </Button>
+          </span>
+          <span>
+            Belum pernah terdaftar sebagai pasien?
+            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
+              <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
+            </Button>
+          </span>
+        </div>
+        <Block :colCount="3">
+          <Cell>
+            <Label label-for="patient_name">Nama Pasien</Label>
+            <Field id="patient_name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="patient_name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="patient_name"
+                      v-bind="componentField"
+                      disabled
+                      placeholder="Tambah data pasien terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- NIK -->
+          <Cell :cosSpan="3">
+            <Label label-for="nik">NIK</Label>
+            <Field id="nik" :errors="errors">
+              <FormField v-slot="{ componentField }" name="nik">
+                <FormItem>
+                  <FormControl>
+                    <Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+          <Cell>
+            <Label label-for="rm">No. RM</Label>
+            <Field id="rm" :errors="errors">
+              <FormField v-slot="{ componentField }" name="rm">
+                <FormItem>
+                  <FormControl>
+                    <Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Separator class="my-4 2xl:my-5" />
+
+        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
+          Data Kunjungan
+        </div>
+        <Block :colCount="3">
+          <!-- Dokter (Combobox) -->
+          <Cell :cosSpan="3">
+            <Label label-for="doctor_id">Dokter</Label>
+            <Field id="doctor_id" :errors="errors">
+              <FormField v-slot="{ componentField }" name="doctor_id">
+                <FormItem>
+                  <FormControl>
+                    <Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Tanggal Daftar (DatePicker) -->
+          <Cell :cosSpan="3">
+            <Label label-for="register_date">Tanggal Daftar</Label>
+            <Field id="register_date" :errors="errors">
+              <FormField v-slot="{ componentField }" name="register_date">
+                <FormItem>
+                  <FormControl>
+                    <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Jenis Pembayaran (Combobox) -->
+          <Cell :cosSpan="3">
+            <Label label-for="payment_type">Jenis Pembayaran</Label>
+            <Field id="payment_type" :errors="errors">
+              <FormField v-slot="{ componentField }" name="payment_type">
+                <FormItem>
+                  <FormControl>
+                    <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
+                    <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell :cosSpan="3">
+            <Label label-for="bpjs_number">Kelompok Peserta</Label>
+            <Field id="bpjs_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="bpjs_number">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="bpjs_number"
+                      v-bind="componentField"
+                      placeholder="Pilih jenis pembayaran terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- No. Kartu BPJS -->
+          <Cell :cosSpan="3">
+            <Label label-for="bpjs_number">No. Kartu BPJS</Label>
+            <Field id="bpjs_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="bpjs_number">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="bpjs_number"
+                      v-bind="componentField"
+                      placeholder="Pilih jenis pembayaran terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Jenis SEP -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_type">Jenis SEP</Label>
+            <Field id="sep_type" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_type">
+                <FormItem>
+                  <FormControl>
+                    <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <!-- No. SEP (input + tombol +) -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_number">No. SEP</Label>
+            <Field id="sep_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_number">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex gap-2">
+                      <Input
+                        id="sep_number"
+                        v-bind="componentField"
+                        placeholder="Tambah SEP terlebih dahulu"
+                        class="flex-1"
+                      />
+                      <Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Dokumen SEP (file) -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_file">Dokumen SEP</Label>
+            <Field id="sep_file" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_file">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex items-center gap-2">
+                      <input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
+                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
+                        >Pilih Berkas</Button
+                      >
+                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Dokumen SIPP (file) -->
+          <Cell :cosSpan="3" labelSize="thin">
+            <Label label-for="sipp_file">Dokumen SIPP</Label>
+            <Field id="sipp_file" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sipp_file">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex items-center gap-2">
+                      <input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
+                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
+                        >Pilih Berkas</Button
+                      >
+                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
       </div>
     </form>
   </Form>
diff --git a/app/components/app/encounter/list-cfg.ts b/app/components/app/encounter/list-cfg.ts
deleted file mode 100644
index 0ca6a92c..00000000
--- a/app/components/app/encounter/list-cfg.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
-import { defineAsyncComponent } from 'vue'
-
-type SmallDetailDto = any
-
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
-const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
-
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
-  ],
-]
-
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
-
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
-
-export const funcParsed: RecStrFuncUnknown = {
-  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 '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    if (rec.status === null) {
-      rec.status_code = 0
-    }
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
-  },
-}
diff --git a/app/components/app/encounter/list.cfg.ts b/app/components/app/encounter/list.cfg.ts
new file mode 100644
index 00000000..9ebbc34f
--- /dev/null
+++ b/app/components/app/encounter/list.cfg.ts
@@ -0,0 +1,104 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { Encounter } from '~/models/encounter'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { getAge } from '~/lib/date'
+
+type SmallDetailDto = Encounter
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 160 },
+    {},
+    { width: 70 },
+    { },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir / Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status', classVal: '!text-center' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'patient.person.name',
+    'patient.number',
+    'patient.person.residentIdentityNumber',
+    'birth_date',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    gender: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      if (recX.patient?.person?.gender_code) {
+        return genderCodes[recX.patient.person.gender_code]
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.patient?.person?.education_code) {
+        return educationCodes[recX.patient.person.education_code]
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as Encounter
+      if (!recX.status_code) {
+        recX.status_code = 'new'
+      }
+      const res: RecComponent = {
+        idx,
+        rec: recX,
+        component: statusBadge,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      if (recX.patient?.person?.birthDate) {
+        return '' +
+          '<div>' + (recX.patient.person.birthDate as string).substring(0, 10) + ' / </div>' +
+          getAge(recX.patient.person.birthDate as string).extFormat
+      }
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/encounter/list.vue b/app/components/app/encounter/list.vue
index b9a74929..1d58d6a7 100644
--- a/app/components/app/encounter/list.vue
+++ b/app/components/app/encounter/list.vue
@@ -1,19 +1,14 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list.cfg'
 
-defineProps<{
+const props = defineProps<{
   data: any[]
 }>()
 </script>
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/encounter/process.vue b/app/components/app/encounter/process.vue
new file mode 100644
index 00000000..237c04c2
--- /dev/null
+++ b/app/components/app/encounter/process.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import AssesmentFunctionList from './assesment-function/list.vue'
+
+const props = defineProps<{
+  initialActiveTab: string
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar' },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis' },
+  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { 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' },
+  { value: 'patient-note', label: 'CPRJ' },
+  { value: 'prescription', label: 'Order Obat' },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+]
+
+function changeTab(value: string) {
+  activeTab.value = value;
+  emit('changeTab', value);
+}
+</script>
+
+<template>
+  <!-- Tabs -->
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+    <Button
+      v-for="tab in tabs"
+      :key="tab.value"
+      :data-active="activeTab === tab.value"
+      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
+      @click="changeTab(tab.value)"
+    >
+      {{ tab.label }}
+    </Button>
+  </div>
+
+  <!-- Active Tab Content -->
+  <div class="mt-4 rounded-md border p-4">
+    <component
+      v-if="tabs.find((t) => t.value === activeTab)?.component"
+      :is="tabs.find((t) => t.value === activeTab)?.component"
+      :label="tabs.find((t) => t.value === activeTab)?.label"
+      v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>
diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
index 49d81926..37ed817f 100644
--- a/app/components/app/encounter/quick-info.vue
+++ b/app/components/app/encounter/quick-info.vue
@@ -1,35 +1,50 @@
 <script setup lang="ts">
 import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { Encounter } from '~/models/encounter';
 
-defineProps<{
-  data: any
+const props = defineProps<{
+  data: Encounter
 }>()
+
+let address = ''
+if (props.data.patient.person.addresses) {
+  address = props.data.patient.person.addresses.map(a => a.address).join(', ')
+}
+
+let dpjp = '';
+if (props.data.responsible_doctor) {
+  const dp = props.data.responsible_doctor.employee.person
+  dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
+} else if (props.data.appointment_doctor) {
+  dpjp = props.data.appointment_doctor.employee.person.name
+}
+
 </script>
 
 <template>
   <div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
     <!-- Data Pasien -->
-    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ 'data.patient.person.name' }} - {{ 'data.patient.number' }}</h2>
+    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ data.patient.person.name }} - {{ data.patient.number }}</h2>
 
     <div class="grid grid-cols-3" >
       <div>
         <DE.Block mode="preview" labelSize="large">
           <DE.Cell>
-            <DE.Label>Tgl. Lahir</DE.Label>
+            <DE.Label class="font-semibold">No. RM</DE.Label>
             <DE.Field>
-              {{ 'data.patient.person.birthDate' }}
+              {{ data.patient.person.birthDate?.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>Jenis Kelamin</DE.Label>
+            <DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
             <DE.Field>
-              {{ 'data.patient.person.gender_code' }}
+              {{ data.patient.person.gender_code }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>Alamat</DE.Label>
+            <DE.Label class="font-semibold">Alamat</DE.Label>
             <DE.Field>
-              <div v-html="'data.patient.person .addresses[0].address'"></div>
+              <div v-html="address"></div>
             </DE.Field>
           </DE.Cell>
         </DE.Block>
@@ -37,21 +52,21 @@ defineProps<{
       <div>
         <DE.Block mode="preview" labelSize="large">
           <DE.Cell>
-            <DE.Label>Tgl. Kunjungan</DE.Label>
+            <DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
             <DE.Field>
-              {{ 'data.date' }}
+              {{ data.visitDate.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>Klinik</DE.Label>
+            <DE.Label class="font-semibold">Klinik</DE.Label>
             <DE.Field>
-              {{ 'data.unit.name' }}
+              {{ data.unit?.name }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>DPJP</DE.Label>
+            <DE.Label class="font-semibold">DPJP</DE.Label>
             <DE.Field>
-              {{ 'data.doctor.name' }}
+              {{ dpjp }}
             </DE.Field>
           </DE.Cell>
         </DE.Block>
@@ -59,21 +74,10 @@ defineProps<{
       <div>
         <DE.Block mode="preview" labelSize="large">
           <DE.Cell>
-            <DE.Label>Tgl. Kunjungan</DE.Label>
-            <DE.Field>
-              {{ 'data.date' }}
-            </DE.Field>
-          </DE.Cell>
-          <DE.Cell>
-            <DE.Label>Klinik</DE.Label>
-            <DE.Field>
-              {{ 'data.unit.name' }}
-            </DE.Field>
-          </DE.Cell>
-          <DE.Cell>
-            <DE.Label>DPJP</DE.Label>
-            <DE.Field>
-              {{ 'data.doctor.name' }}
+            <DE.Label position="dynamic" class="!text-base 2xl:!text-lg font-semibold">Billing</DE.Label>
+            <DE.Field class="text-base 2xl:text-lg">
+              Rp. 000.000
+              <!-- {{ data }} -->
             </DE.Field>
           </DE.Cell>
         </DE.Block>
diff --git a/app/components/app/encounter/status-badge.vue b/app/components/app/encounter/status-badge.vue
index 32cdfbca..c8d4cd06 100644
--- a/app/components/app/encounter/status-badge.vue
+++ b/app/components/app/encounter/status-badge.vue
@@ -1,22 +1,28 @@
 <script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
+import { type Variants, Badge } from '~/components/pub/ui/badge'
+import { dataStatusCodes } from '~/lib/constants';
 
 const props = defineProps<{
   rec: any
   idx?: number
 }>()
 
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
+const statusCodeColors: Record<string, Variants> = {
+  new: 'warning',
+  review: 'fresh',
+  process: 'fresh',
+  done: 'positive',
+  canceled: 'destructive',
+  rejected: 'destructive',
+  skiped: 'negative',
 }
 
 const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+  return dataStatusCodes[props.rec.status_code as keyof typeof dataStatusCodes]
 })
 
 const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
+  return (statusCodeColors[props.rec.status_code as keyof typeof statusCodeColors] || 'default')
 })
 </script>
 
diff --git a/app/components/app/equipment/list-cfg.ts b/app/components/app/equipment/list-cfg.ts
index 8f3ff7e5..96cde678 100644
--- a/app/components/app/equipment/list-cfg.ts
+++ b/app/components/app/equipment/list-cfg.ts
@@ -1,43 +1,57 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
-export const header: Th[][] = [
-  [{ label: 'Kode' }, { label: 'Nama' }, { label: 'Stok' }, { label: 'Satuan' }, { label: '' }],
-]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Stok' },
+      { label: 'Satuan' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'stock', 'uom_code', 'action']
+  keys: ['code', 'name', 'stock', 'uom_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.uom_code
+    },
   },
-  uom_code: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.uom_code
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
index 3af2b398..618c70c1 100644
--- a/app/components/app/equipment/list.vue
+++ b/app/components/app/equipment/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,14 +27,9 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-    />
+      />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/floor/list-cfg.ts b/app/components/app/floor/list-cfg.ts
index 33b1a8af..64553e15 100644
--- a/app/components/app/floor/list-cfg.ts
+++ b/app/components/app/floor/list-cfg.ts
@@ -1,44 +1,46 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Gedung' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Gedung' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/floor/list.vue b/app/components/app/floor/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/floor/list.vue
+++ b/app/components/app/floor/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/icd/list-cfg.ts b/app/components/app/icd/list-cfg.ts
index c74ef59b..c413e737 100644
--- a/app/components/app/icd/list-cfg.ts
+++ b/app/components/app/icd/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -13,119 +6,122 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  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 '-'
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as SmallDetailDto
+      if (recX.status_code === null) {
+        recX.status_code = 0
+      }
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  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 '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    if (rec.status === null) {
-      rec.status_code = 0
-    }
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/icd/list.vue b/app/components/app/icd/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/icd/list.vue
+++ b/app/components/app/icd/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/icd/multiselect-picker.vue b/app/components/app/icd/multiselect-picker.vue
index 9a08bb86..ce4dbd80 100644
--- a/app/components/app/icd/multiselect-picker.vue
+++ b/app/components/app/icd/multiselect-picker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
 const modelValue = defineModel<any | null>()
@@ -8,13 +8,8 @@ const modelValue = defineModel<any | null>()
 <template>
   <PubMyUiDataTable
     v-model="modelValue"
+    v-bind="config"
     select-mode="multi"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/installation/list-cfg.ts b/app/components/app/installation/list-cfg.ts
index e6fc5d47..f64ecea8 100644
--- a/app/components/app/installation/list-cfg.ts
+++ b/app/components/app/installation/list-cfg.ts
@@ -1,51 +1,53 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Encounter Class' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'encounterClass_code', 'action']
+  keys: ['code', 'name', 'encounterClass_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
-  },
-}
\ No newline at end of file
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/intern/entry-form.vue b/app/components/app/intern/entry-form.vue
new file mode 100644
index 00000000..aca8245b
--- /dev/null
+++ b/app/components/app/intern/entry-form.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+import { Form } from '~/components/pub/ui/form'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <!-- Specialist -->
+            <FieldGroup :column="2">
+              <Label label-for="specialist_id">Specialist</Label>
+              <Field id="specialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="specialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Subpecialist -->
+            <FieldGroup :column="2">
+              <Label label-for="subspecialist_id">Subspecialist</Label>
+              <Field id="subspecialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="subspecialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
index c26856bf..c3db4f50 100644
--- a/app/components/app/item-price/list-cfg.ts
+++ b/app/components/app/item-price/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
@@ -15,32 +8,40 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/item-price/list.vue b/app/components/app/item-price/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/item-price/list.vue
+++ b/app/components/app/item-price/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
index c26856bf..c3db4f50 100644
--- a/app/components/app/item/list-cfg.ts
+++ b/app/components/app/item/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
@@ -15,32 +8,40 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/item/list.vue b/app/components/app/item/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/item/list.vue
+++ b/app/components/app/item/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/laborant/list-cfg.ts b/app/components/app/laborant/list-cfg.ts
index 14c9cf0d..13b5c015 100644
--- a/app/components/app/laborant/list-cfg.ts
+++ b/app/components/app/laborant/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    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
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/laborant/list.vue b/app/components/app/laborant/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/laborant/list.vue
+++ b/app/components/app/laborant/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/medical-action-src/entry-form.vue b/app/components/app/medical-action-src/entry-form.vue
new file mode 100644
index 00000000..f8bf87e4
--- /dev/null
+++ b/app/components/app/medical-action-src/entry-form.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+
+// Types
+import type { MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+import { medicalActionTypeCode } from '~/lib/constants'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const medicalActionTypeOptions = mapToComboboxOptList(medicalActionTypeCode)
+
+const emit = defineEmits<{
+  submit: [values: MedicalActionSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    type_code: '',
+  } as Partial<MedicalActionSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [typeCode, typeCodeAttrs] = defineField('type_code')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.type_code !== undefined) typeCode.value = props.values.type_code
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  typeCode.value = ''
+}
+
+function onSubmitForm() {
+  const formData: MedicalActionSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    type_code: typeCode.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medical-action-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Type Kode</Label>
+        <Field :errMessage="errors.name">
+          <Select
+            id="type_code"
+            :is-disabled="isLoading || isReadonly"
+            :items="medicalActionTypeOptions"
+            v-bind="typeCodeAttrs"
+            v-model="typeCode"
+            placeholder="Pilih medical action type"
+            :preserve-order="false"
+            class="text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medical-action-src/list-cfg.ts b/app/components/app/medical-action-src/list-cfg.ts
new file mode 100644
index 00000000..2fecde69
--- /dev/null
+++ b/app/components/app/medical-action-src/list-cfg.ts
@@ -0,0 +1,32 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama ' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medical-action-src/list.vue b/app/components/app/medical-action-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/medical-action-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/medicine-group/list-cfg.ts b/app/components/app/medicine-group/list-cfg.ts
index b9f068e9..583fd860 100644
--- a/app/components/app/medicine-group/list-cfg.ts
+++ b/app/components/app/medicine-group/list-cfg.ts
@@ -1,37 +1,38 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/medicine-group/list.vue b/app/components/app/medicine-group/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/medicine-group/list.vue
+++ b/app/components/app/medicine-group/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/medicine-method/list-cfg.ts b/app/components/app/medicine-method/list-cfg.ts
index b9f068e9..583fd860 100644
--- a/app/components/app/medicine-method/list-cfg.ts
+++ b/app/components/app/medicine-method/list-cfg.ts
@@ -1,37 +1,38 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/medicine-method/list.vue b/app/components/app/medicine-method/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/medicine-method/list.vue
+++ b/app/components/app/medicine-method/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
index 66ef4afb..42989fcb 100644
--- a/app/components/app/medicine/entry-form.vue
+++ b/app/components/app/medicine/entry-form.vue
@@ -85,7 +85,7 @@ function onCancelForm() {
 
 <template>
   <form id="form-medicine" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+    <Block class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
@@ -111,7 +111,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Kelompok Obat</Label>
+        <Label >Kelompok Obat</Label>
         <Field :errMessage="errors.medicineGroup_code">
           <Select
             id="medicineGroup_code"
@@ -139,7 +139,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Satuan</Label>
+        <Label>Satuan</Label>
         <Field :errMessage="errors.uom_code">
           <Select
             id="uom_code"
diff --git a/app/components/app/medicine/list-cfg.ts b/app/components/app/medicine/list-cfg.ts
index b18c9606..059022c8 100644
--- a/app/components/app/medicine/list-cfg.ts
+++ b/app/components/app/medicine/list-cfg.ts
@@ -1,59 +1,54 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Name' },
-    { label: 'Golongan' },
-    { label: 'Metode Pemberian' },
-    { label: "Satuan" },
-    { label: 'Stok' },
-    { label: 'Aksi' },
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Name' },
+      { label: 'Golongan' },
+      { label: 'Metode Pemberian' },
+      { label: 'Satuan' },
+      { label: 'Stok' },
+      { label: 'Aksi' },
+    ],
   ],
-]
 
-export const keys = ['code', 'name', 'group', 'method', 'unit', 'stock', 'action']
+  keys: ['code', 'name', 'group', 'method', 'unit', 'stock', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  group: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineGroup?.name || '-'
+  parses: {
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).uom?.name || '-'
+    },
   },
-  method: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineMethod?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).uom?.name || '-'
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action: (rec: unknown, idx: number): RecComponent => {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/medicine/list.vue b/app/components/app/medicine/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/medicine/list.vue
+++ b/app/components/app/medicine/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/nurse/list-cfg.ts b/app/components/app/nurse/list-cfg.ts
index 14c9cf0d..13b5c015 100644
--- a/app/components/app/nurse/list-cfg.ts
+++ b/app/components/app/nurse/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    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
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/nurse/list.vue b/app/components/app/nurse/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/nurse/list.vue
+++ b/app/components/app/nurse/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/nutritionist/list-cfg.ts b/app/components/app/nutritionist/list-cfg.ts
index 14c9cf0d..4dd5657f 100644
--- a/app/components/app/nutritionist/list-cfg.ts
+++ b/app/components/app/nutritionist/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,97 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    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
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/nutritionist/list.vue b/app/components/app/nutritionist/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/nutritionist/list.vue
+++ b/app/components/app/nutritionist/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/patient/_common/input-name.vue b/app/components/app/patient/_common/input-name.vue
new file mode 100644
index 00000000..db9005f1
--- /dev/null
+++ b/app/components/app/patient/_common/input-name.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+defineProps<{
+  fieldNameInput: string
+  placeholder: string
+  labelForInput: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  maxLength?: number
+  isRequired?: boolean
+}>()
+</script>
+
+<template>
+  <DE.Cell :col-span="2">
+    <DE.Label
+      :label-for="fieldNameInput"
+      :is-required="isRequired"
+    >
+      {{ labelForInput }}
+    </DE.Label>
+
+    <DE.Field
+      :id="fieldNameInput"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldNameInput"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              v-bind="componentField"
+              type="text"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/input-patient-name.vue b/app/components/app/patient/_common/input-patient-name.vue
deleted file mode 100644
index fbc57351..00000000
--- a/app/components/app/patient/_common/input-patient-name.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import Select from '~/components/pub/my-ui/form/select.vue'
-import { Input } from '~/components/pub/ui/input'
-import { cn } from '~/lib/utils'
-
-defineProps<{
-  fieldNameAlias: string
-  fieldNameInput: string
-  placeholder: string
-  labelForAlias: string
-  labelForInput: string
-  errors?: FormErrors
-  class?: string
-  selectClass?: string
-  fieldGroupClass?: string
-  labelClass?: string
-  maxLength?: number
-  isRequired?: boolean
-}>()
-
-const aliasOptions = [
-  { label: 'An', value: 'an' },
-  { label: 'By.Ny', value: 'byny' },
-  { label: 'Nn', value: 'nn' },
-  { label: 'Ny', value: 'ny' },
-  { label: 'Tn', value: 'tn' },
-]
-</script>
-
-<template>
-  <FieldGroup>
-    <Label
-      :label-for="fieldNameAlias"
-      :is-required="isRequired"
-    >
-      {{ labelForAlias }}
-    </Label>
-
-    <Field
-      :id="fieldNameAlias"
-      :errors="errors"
-    >
-      <FormField
-        v-slot="{ componentField }"
-        :name="fieldNameAlias"
-      >
-        <FormItem>
-          <FormControl>
-            <Select
-              :id="fieldNameAlias"
-              :preserve-order="false"
-              v-bind="componentField"
-              :auto-width="true"
-              :items="aliasOptions"
-              :class="
-                cn(
-                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
-                  selectClass,
-                )
-              "
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      </FormField>
-    </Field>
-  </FieldGroup>
-  <FieldGroup>
-    <Label
-      :label-for="fieldNameInput"
-      :is-required="isRequired"
-    >
-      {{ labelForInput }}
-    </Label>
-
-    <Field
-      :id="fieldNameInput"
-      :errors="errors"
-    >
-      <FormField
-        v-slot="{ componentField }"
-        :name="fieldNameInput"
-      >
-        <FormItem>
-          <FormControl>
-            <Input
-              v-bind="componentField"
-              type="text"
-              :placeholder="placeholder"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      </FormField>
-    </Field>
-  </FieldGroup>
-</template>
diff --git a/app/components/app/patient/_common/radio-communication-barrier.vue b/app/components/app/patient/_common/radio-communication-barrier.vue
index 463b3659..56918101 100644
--- a/app/components/app/patient/_common/radio-communication-barrier.vue
+++ b/app/components/app/patient/_common/radio-communication-barrier.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -35,18 +34,19 @@ const genderOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
-    >
+      class="pt-0.5"
+      >
       <FormField
         v-slot="{ componentField }"
         :name="fieldName"
@@ -67,7 +67,7 @@ const genderOptions = [
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -76,7 +76,7 @@ const genderOptions = [
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none font-normal text-xs leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
                       labelClass,
                     )
                   "
@@ -89,6 +89,6 @@ const genderOptions = [
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-disability.vue b/app/components/app/patient/_common/radio-disability.vue
index 312c3730..6c1464e2 100644
--- a/app/components/app/patient/_common/radio-disability.vue
+++ b/app/components/app/patient/_common/radio-disability.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -35,17 +34,18 @@ const dissabilityOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
+      class="pt-0.5"
     >
       <FormField
         v-slot="{ componentField }"
@@ -67,7 +67,7 @@ const dissabilityOptions = [
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -76,7 +76,7 @@ const dissabilityOptions = [
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
                       labelClass,
                     )
                   "
@@ -89,6 +89,6 @@ const dissabilityOptions = [
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-gender.vue b/app/components/app/patient/_common/radio-gender.vue
index 108b1d22..47968c8f 100644
--- a/app/components/app/patient/_common/radio-gender.vue
+++ b/app/components/app/patient/_common/radio-gender.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { genderCodes } from '~/lib/constants'
 import { cn, mapToComboboxOptList } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -33,15 +32,15 @@ const genderOptions = mapToComboboxOptList(genderCodes)
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="4">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
     >
@@ -65,7 +64,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -74,7 +73,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none text-xs 2xl:text-sm leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 !font-normal',
                       labelClass,
                     )
                   "
@@ -87,6 +86,6 @@ const genderOptions = mapToComboboxOptList(genderCodes)
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-nationality.vue b/app/components/app/patient/_common/radio-nationality.vue
index 9c0eef1d..40525dff 100644
--- a/app/components/app/patient/_common/radio-nationality.vue
+++ b/app/components/app/patient/_common/radio-nationality.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -35,17 +34,18 @@ const nationalityOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
+      class="pt-0.5"
     >
       <FormField
         v-slot="{ componentField }"
@@ -67,7 +67,7 @@ const nationalityOptions = [
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -76,7 +76,7 @@ const nationalityOptions = [
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
                       labelClass,
                     )
                   "
@@ -89,6 +89,6 @@ const nationalityOptions = [
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-newborn.vue b/app/components/app/patient/_common/radio-newborn.vue
new file mode 100644
index 00000000..86953443
--- /dev/null
+++ b/app/components/app/patient/_common/radio-newborn.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'isNewBorn',
+  label = 'Status Pasien',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const newbornOptions = [
+  { label: 'Ya', value: 'YA' },
+  { label: 'Tidak', value: 'TIDAK' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in newbornOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2 pt-1', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-disability.vue b/app/components/app/patient/_common/select-disability.vue
index de65a07f..6058773a 100644
--- a/app/components/app/patient/_common/select-disability.vue
+++ b/app/components/app/patient/_common/select-disability.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -40,14 +39,14 @@ const disabilityOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       label-for="fieldName"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -76,6 +75,6 @@ const disabilityOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-dob.vue b/app/components/app/patient/_common/select-dob.vue
index 938bd254..eee11acc 100644
--- a/app/components/app/patient/_common/select-dob.vue
+++ b/app/components/app/patient/_common/select-dob.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
 import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -76,15 +75,15 @@ function calculateAge(birthDate: string | Date | undefined): string {
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -113,12 +112,11 @@ function calculateAge(birthDate: string | Date | undefined): string {
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
-  <FieldGroup>
-    <Label label-for="patientAge">Usia</Label>
-
-    <Field id="patientAge">
+    </DE.Field>
+  </DE.Cell>
+  <DE.Cell>
+    <DE.Label label-for="patientAge">Usia</DE.Label>
+    <DE.Field id="patientAge">
       <FormField name="patientAge">
         <FormItem>
           <FormControl>
@@ -137,6 +135,6 @@ function calculateAge(birthDate: string | Date | undefined): string {
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-education.vue b/app/components/app/patient/_common/select-education.vue
index 33caac16..848ed614 100644
--- a/app/components/app/patient/_common/select-education.vue
+++ b/app/components/app/patient/_common/select-education.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { educationCodes } from '~/lib/constants'
 import { cn, mapToComboboxOptList } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -46,15 +45,15 @@ const educationOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired && !isDisabled"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -83,6 +82,6 @@ const educationOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-ethnicity.vue b/app/components/app/patient/_common/select-ethnicity.vue
index e1ecd08a..43ef6cba 100644
--- a/app/components/app/patient/_common/select-ethnicity.vue
+++ b/app/components/app/patient/_common/select-ethnicity.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
 import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -49,15 +48,15 @@ const ethnicOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired && !isDisabled"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -81,6 +80,6 @@ const ethnicOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-gender.vue b/app/components/app/patient/_common/select-gender.vue
new file mode 100644
index 00000000..dfedf9ec
--- /dev/null
+++ b/app/components/app/patient/_common/select-gender.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const {
+  fieldName = 'disabilityType',
+  placeholder = 'Pilih jenis disabilitas',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+} = props
+
+const disabilityOptions = [
+  { label: 'Laki', value: 'male' },
+  { label: 'Perempuan', value: 'female' },
+  { label: 'Tidak Disebutkan', value: 'not-stated' },
+  { label: 'Tidak Diketahui', value: 'unknown' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="disabilityOptions"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-job.vue b/app/components/app/patient/_common/select-job.vue
index b14cbb66..814eb7ca 100644
--- a/app/components/app/patient/_common/select-job.vue
+++ b/app/components/app/patient/_common/select-job.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
 import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import { cn } from '~/lib/utils'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
   fieldName?: string
@@ -28,106 +28,20 @@ const {
   labelClass,
 } = props
 
-const jobOptions = [
-  { label: 'Tidak diketahui', value: 'unknown', priority: 100 },
-  { label: 'Belum/Tidak Bekerja', value: 'tidak_bekerja', priority: 99 },
-  { label: 'Mengurus Rumah Tangga', value: 'mengurus_rumah_tangga' },
-  { label: 'Pelajar/Mahasiswa', value: 'pelajar' },
-  { label: 'Pensiunan', value: 'pensiunan' },
-  { label: 'Pegawai Negeri Sipil', value: 'pns' },
-  { label: 'Tentara Nasional Indonesia', value: 'tni' },
-  { label: 'Kepolisian RI', value: 'polri' },
-  { label: 'Perdagangan', value: 'perdagangan' },
-  { label: 'Petani/Pekebun', value: 'petani' },
-  { label: 'Peternak', value: 'peternak' },
-  { label: 'Nelayan/Perikanan', value: 'nelayan' },
-  { label: 'Industri', value: 'industri' },
-  { label: 'Konstruksi', value: 'konstruksi' },
-  { label: 'Transportasi', value: 'transportasi' },
-  { label: 'Karyawan Swasta', value: 'karyawan_swasta' },
-  { label: 'Karyawan BUMN', value: 'karyawan_bumn' },
-  { label: 'Karyawan BUMD', value: 'karyawan_bumd' },
-  { label: 'Karyawan Honorer', value: 'karyawan_honorer' },
-  { label: 'Buruh Harian Lepas', value: 'buruh_harian' },
-  { label: 'Buruh Tani/Perkebunan', value: 'buruh_tani' },
-  { label: 'Buruh Nelayan/Perikanan', value: 'buruh_nelayan' },
-  { label: 'Buruh Peternakan', value: 'buruh_peternakan' },
-  { label: 'Pembantu Rumah Tangga', value: 'pembantu_rumah_tangga' },
-  { label: 'Tukang Cukur', value: 'tukang_cukur' },
-  { label: 'Tukang Listrik', value: 'tukang_listrik' },
-  { label: 'Tukang Batu', value: 'tukang_batu' },
-  { label: 'Tukang Kayu', value: 'tukang_kayu' },
-  { label: 'Tukang Sol Sepatu', value: 'tukang_sol_sepatu' },
-  { label: 'Tukang Jahit', value: 'tukang_jahit' },
-  { label: 'Tukang Gigi', value: 'tukang_gigi' },
-  { label: 'Penata Rias', value: 'penata_rias' },
-  { label: 'Penata Busana', value: 'penata_busana' },
-  { label: 'Penata Rambut', value: 'penata_rambut' },
-  { label: 'Mekanik', value: 'mekanik' },
-  { label: 'Seniman', value: 'seniman' },
-  { label: 'Tabib', value: 'tabib' },
-  { label: 'Paraji', value: 'paraji' },
-  { label: 'Perancang Busana', value: 'perancang_busana' },
-  { label: 'Penterjemah', value: 'penterjemah' },
-  { label: 'Imam Mesjid', value: 'imam_mesjid' },
-  { label: 'Pendeta', value: 'pendeta' },
-  { label: 'Pastor', value: 'pastor' },
-  { label: 'Wartawan', value: 'wartawan' },
-  { label: 'Ustadz/Mubaligh', value: 'ustadz' },
-  { label: 'Juru Masak', value: 'juru_masak' },
-  { label: 'Promotor Acara', value: 'promotor' },
-  { label: 'Anggota DPR-RI', value: 'dpr_ri' },
-  { label: 'Anggota DPD', value: 'dpd' },
-  { label: 'Anggota BPK', value: 'bpk' },
-  { label: 'Presiden', value: 'presiden' },
-  { label: 'Wakil Presiden', value: 'wakil_presiden' },
-  { label: 'Anggota Mahkamah Konstitusi', value: 'mk' },
-  { label: 'Anggota Kabinet/Kementrian', value: 'kabinet' },
-  { label: 'Duta Besar', value: 'dubes' },
-  { label: 'Gubernur', value: 'gubernur' },
-  { label: 'Wakil Gubernur', value: 'wakil_gubernur' },
-  { label: 'Bupati', value: 'bupati' },
-  { label: 'Wakil Bupati', value: 'wakil_bupati' },
-  { label: 'Walikota', value: 'walikota' },
-  { label: 'Wakil Walikota', value: 'wakil_walikota' },
-  { label: 'Anggota DPRD Provinsi', value: 'dprd_provinsi' },
-  { label: 'Anggota DPRD Kabupaten/Kota', value: 'dprd_kabkota' },
-  { label: 'Dosen', value: 'dosen' },
-  { label: 'Guru', value: 'guru' },
-  { label: 'Pilot', value: 'pilot' },
-  { label: 'Pengacara', value: 'pengacara' },
-  { label: 'Arsitek', value: 'arsitek' },
-  { label: 'Akuntan', value: 'akuntan' },
-  { label: 'Konsultan', value: 'konsultan' },
-  { label: 'Dokter', value: 'dokter' },
-  { label: 'Bidan', value: 'bidan' },
-  { label: 'Apoteker', value: 'apoteker' },
-  { label: 'Psikiater/Psikolog', value: 'psikolog' },
-  { label: 'Penyiar Televisi', value: 'penyiar_tv' },
-  { label: 'Penyiar Radio', value: 'penyiar_radio' },
-  { label: 'Pelaut', value: 'pelaut' },
-  { label: 'Sopir', value: 'sopir' },
-  { label: 'Pialang', value: 'pialang' },
-  { label: 'Paranormal', value: 'paranormal' },
-  { label: 'Pedagang', value: 'pedagang' },
-  { label: 'Perangkat Desa', value: 'perangkat_desa' },
-  { label: 'Kepala Desa', value: 'kepala_desa' },
-  { label: 'Biarawati', value: 'biarawati' },
-  { label: 'Wiraswasta', value: 'wiraswasta' },
-  { label: 'Lainnya', value: 'lainnya', priority: -100 },
-]
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -150,6 +64,6 @@ const jobOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-lang.vue b/app/components/app/patient/_common/select-lang.vue
index aadf9313..ce5bbac8 100644
--- a/app/components/app/patient/_common/select-lang.vue
+++ b/app/components/app/patient/_common/select-lang.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -41,15 +40,15 @@ const langOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -77,6 +76,6 @@ const langOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-marital-status.vue b/app/components/app/patient/_common/select-marital-status.vue
index cb3b56fb..21ebf0c2 100644
--- a/app/components/app/patient/_common/select-marital-status.vue
+++ b/app/components/app/patient/_common/select-marital-status.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -37,15 +36,15 @@ const maritalStatusOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -73,6 +72,6 @@ const maritalStatusOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-religion.vue b/app/components/app/patient/_common/select-religion.vue
index 069e3575..6a1fec66 100644
--- a/app/components/app/patient/_common/select-religion.vue
+++ b/app/components/app/patient/_common/select-religion.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { religionCodes } from '~/lib/constants'
 import { cn, mapToComboboxOptList } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -45,15 +44,15 @@ const religionOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -81,6 +80,6 @@ const religionOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index e3587988..a83189c2 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -3,12 +3,14 @@ import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Form } from '~/components/pub/ui/form'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
-import InputFile from './_common/input-file.vue'
-import InputPatientName from './_common/input-patient-name.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
+import InputName from './_common/input-name.vue'
 import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
 import RadioDisability from './_common/radio-disability.vue'
-import RadioGender from './_common/radio-gender.vue'
+import SelectGender from './_common/select-gender.vue'
 import RadioNationality from './_common/radio-nationality.vue'
+import RadioNewborn from './_common/radio-newborn.vue'
+import SelectBirthPlace from '~/components/app/person/_common/select-birth-place.vue'
 import SelectDisability from './_common/select-disability.vue'
 import SelectDob from './_common/select-dob.vue'
 import SelectEducation from './_common/select-education.vue'
@@ -17,6 +19,9 @@ import SelectJob from './_common/select-job.vue'
 import SelectLanguage from './_common/select-lang.vue'
 import SelectMaritalStatus from './_common/select-marital-status.vue'
 import SelectReligion from './_common/select-religion.vue'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
   schema: any
@@ -46,180 +51,161 @@ defineExpose({
     validation-mode="onSubmit"
     :initial-values="initialValues ? initialValues : {}"
   >
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Data Diri Pasien</p>
-      <div class="grid grid-cols-1 md:grid-cols-[150px_1fr]">
-        <InputPatientName
-          field-name-alias="alias"
-          field-name-input="fullName"
-          label-for-alias="Alias"
-          label-for-input="Nama Lengkap"
-          placeholder="Masukkan nama lengkap pasien"
-          :errors="errors"
-          is-required
-        />
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <InputBase
-          field-name="birthPlace"
-          label="Tempat Lahir"
-          placeholder="Malang"
-          :errors="errors"
-          is-required
-        />
-        <SelectDob
-          label="Tanggal Lahir"
-          :errors="errors"
-          is-required
-        />
-      </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-        <RadioGender
-          field-name="gender"
-          label="Jenis Kelamin"
-          placeholder="Pilih jenis kelamin"
-          :errors="errors"
-          is-required
-        />
-        <RadioNationality
-          field-name="nationality"
-          label="Kebangsaan"
-          placeholder="Pilih kebangsaan"
-          :errors="errors"
-          is-required
-        />
-      </div>
-    </div>
+    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Data Diri Pasien</p>
+    <DE.Block :col-count="4" :cell-flex="false">
+      <InputBase
+        field-name="identityNumber"
+        label="No. KTP"
+        placeholder="Masukkan NIK"
+        :errors="errors"
+        numeric-only
+      />
+      <InputBase
+        field-name="drivingLicenseNumber"
+        label="No. SIM"
+        placeholder="Masukkan nomor SIM"
+        numeric-only
+        :max-length="20"
+        :errors="errors"
+      />
+      <InputBase
+        field-name="passportNumber"
+        label="No. Paspor"
+        placeholder="Masukkan nomor paspor"
+        :max-length="20"
+        :errors="errors"
+      />
+      <InputName
+        field-name-alias="alias"
+        field-name-input="fullName"
+        label-for-input="Nama Lengkap"
+        placeholder="Masukkan nama lengkap pasien"
+        :errors="errors"
+        is-required
+      />
+      <RadioNewborn
+        field-name="isNewBorn"
+        label="Pasien Bayi"
+        placeholder="Pilih status pasien"
+        :errors="errors"
+        is-required
+      />
+      <SelectGender
+        field-name="gender"
+        label="Jenis Kelamin"
+        placeholder="Pilih jenis kelamin"
+        :errors="errors"
+        is-required
+      />
+      <SelectBirthPlace
+        field-name="birthPlace"
+        label="Tempat Lahir"
+        placeholder="Pilih tempat lahir"
+        :errors="errors"
+        is-required
+      />
+      <SelectDob
+        label="Tanggal Lahir"
+        :errors="errors"
+        is-required
+      />
+      <SelectEducation
+        field-name="education"
+        label="Pendidikan"
+        placeholder="Pilih pendidikan"
+        :errors="errors"
+        is-required
+      />
+      <SelectJob
+        field-name="job"
+        label="Pekerjaan"
+        placeholder="Pilih pekerjaan"
+        :errors="errors"
+        is-required
+      />
+      <SelectMaritalStatus
+        field-name="maritalStatus"
+        label="Status Perkawinan"
+        placeholder="Pilih status Perkawinan"
+        :errors="errors"
+        is-required
+      />
+      <DE.Cell />
+      <RadioNationality
+        field-name="nationality"
+        label="Kebangsaan"
+        placeholder="Pilih kebangsaan"
+        :errors="errors"
+        is-required
+      />
+      <SelectEthnicity
+        field-name="ethnicity"
+        label="Suku"
+        placeholder="Pilih suku bangsa"
+        :errors="errors"
+        :is-disabled="values.nationality !== 'WNI'"
+      />
+      <SelectLanguage
+        field-name="language"
+        label="Bahasa"
+        placeholder="Pilih preferensi bahasa"
+        :errors="errors"
+        is-required
+      />
+      <SelectReligion
+        field-name="religion"
+        label="Agama"
+        placeholder="Pilih agama"
+        :errors="errors"
+        is-required
+      />
+      <RadioCommunicationBarrier
+        field-name="communicationBarrier"
+        label="Hambatan Berkomunikasi"
+        :errors="errors"
+        is-required
+      />
+      <RadioDisability
+        field-name="disability"
+        label="Disabilitas"
+        :errors="errors"
+        is-required
+      />
+      <SelectDisability
+        label="Jenis Disabilitas"
+        field-name="disabilityType"
+        :errors="errors"
+        :is-disabled="values.disability !== 'YA'"
+        :is-required="values.disability === 'YA'"
+      />
+      <InputBase
+        field-name="note"
+        label="Kepercayaan"
+        placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
+        :errors="errors"
+      />
+    </DE.Block>
 
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Dokumen Identitas</p>
+    <div class="h-6"></div>
 
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <InputBase
-          field-name="identityNumber"
-          label="No. KTP"
-          placeholder="Masukkan NIK"
-          :errors="errors"
-          numeric-only
-          :max-length="16"
-          is-required
-        />
-        <InputBase
-          field-name="drivingLicenseNumber"
-          label="No. SIM"
-          placeholder="Masukkan nomor SIM"
-          numeric-only
-          :max-length="20"
-          :errors="errors"
-        />
-
-        <InputBase
-          field-name="passportNumber"
-          label="No. Paspor"
-          placeholder="Masukkan nomor paspor"
-          :max-length="20"
-          :errors="errors"
-        />
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-2">
-        <InputFile
-          field-name="identityCardFile"
-          label="Dokumen KTP"
-          placeholder="Unggah scan dokumen KTP"
-          :errors="errors"
-        />
-        <InputFile
-          field-name="familyCardFile"
-          label="Dokumen KK"
-          placeholder="Unggah scan dokumen KK"
-          :errors="errors"
-        />
-      </div>
-    </div>
-
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Data Demografis</p>
-
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <SelectReligion
-          field-name="religion"
-          label="Agama"
-          placeholder="Pilih agama"
-          :errors="errors"
-          is-required
-        />
-        <SelectEthnicity
-          field-name="ethnicity"
-          label="Suku"
-          placeholder="Pilih suku bangsa"
-          :errors="errors"
-          :is-disabled="values.nationality !== 'WNI'"
-        />
-        <SelectLanguage
-          field-name="language"
-          label="Bahasa"
-          placeholder="Pilih preferensi bahasa"
-          :errors="errors"
-          is-required
-        />
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <SelectMaritalStatus
-          field-name="maritalStatus"
-          label="Status Perkawinan"
-          placeholder="Pilih status Perkawinan"
-          :errors="errors"
-          is-required
-        />
-        <SelectEducation
-          field-name="education"
-          label="Pendidikan"
-          placeholder="Pilih pendidikan"
-          :errors="errors"
-          is-required
-        />
-        <SelectJob
-          field-name="job"
-          label="Pekerjaan"
-          placeholder="Pilih pekerjaan"
-          :errors="errors"
-          is-required
-        />
-      </div>
-    </div>
-
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Kondisi Khusus</p>
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <RadioCommunicationBarrier
-          field-name="communicationBarrier"
-          label="Hambatan Berkomunikasi"
-          :errors="errors"
-          is-required
-        />
-        <div class="cols-span-1">
-          <RadioDisability
-            field-name="disability"
-            label="Disabilitas"
-            :errors="errors"
-            is-required
-          />
-          <SelectDisability
-            label="Jenis Disabilitas"
-            field-name="disabilityType"
-            :errors="errors"
-            :is-disabled="values.disability !== 'YA'"
-            :is-required="values.disability === 'YA'"
-          />
-        </div>
-
-        <InputBase
-          field-name="note"
-          label="Kepercayaan"
-          placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
-          :errors="errors"
-        />
-      </div>
-    </div>
+    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Dokumen Identitas</p>
+    <DE.Block :col-count="2" :cell-flex="false">
+      <FileUpload
+        field-name="identityCardFile"
+        label="Dokumen KTP"
+        placeholder="Unggah scan dokumen KTP"
+        :errors="errors"
+        :accept="['pdf', 'jpg', 'png']"
+        :max-size-mb="1"
+      />
+      <FileUpload
+        field-name="familyCardFile"
+        label="Dokumen KK"
+        placeholder="Unggah scan dokumen KK"
+        :errors="errors"
+        :accept="['pdf', 'jpg', 'png']"
+        :max-size-mb="1"
+      />
+    </DE.Block>
   </Form>
 </template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index 4fbdf694..559428a7 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -1,100 +1,100 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
-import type { PatientEntity } from '~/models/patient'
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
 import { defineAsyncComponent } from 'vue'
 import { educationCodes, genderCodes } from '~/lib/constants'
 import { calculateAge } from '~/lib/utils'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, {}, { width: 5 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'NIK' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'Jenis Kelamin' },
-    { label: 'Pendidikan' },
-    { label: '' },
+  headers: [
+    [
+      { label: 'ID' },
+      { label: 'Nama' },
+      { label: 'NIK/No. Paspor' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'Jenis Kelamin' },
+      { label: 'Pendidikan' },
+      { label: '' },
+    ],
   ],
-]
 
-export const keys = ['name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action']
+  keys: ['patientId', 'name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    return person.name.trim()
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    name: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return person.name.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
 
-    if (person?.residentIdentityNumber?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return person.residentIdentityNumber
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
 
-    if (typeof person.birthDate == 'object' && person.birthDate) {
-      return (person.birthDate as Date).toLocaleDateString()
-    } else if (typeof person.birthDate == 'string') {
-      return (person.birthDate as string).substring(0, 10)
-    }
-    return person.birthDate
-  },
-  patient_age: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    return calculateAge(person.birthDate)
-  },
-  gender: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-
-    if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
-      return person.gender_code
-    } else if (typeof person.gender_code === 'string' && person.gender_code) {
-      return genderCodes[person.gender_code] || '-'
-    }
-    return '-'
-  },
-  education: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    if (typeof person.education_code == 'number' && person.education_code >= 0) {
-      return person.education_code
-    } else if (typeof person.education_code === 'string' && person.education_code) {
-      return educationCodes[person.education_code] || '-'
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/patient/list.cfg.ts b/app/components/app/patient/list.cfg.ts
new file mode 100644
index 00000000..d86c8dc1
--- /dev/null
+++ b/app/components/app/patient/list.cfg.ts
@@ -0,0 +1,96 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
+
+  headers: [
+    [
+      { label: 'No. RM' },
+      { label: 'Nama' },
+      { label: 'No. KTP/SIM/Passpor' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'Kelamin' },
+      { label: 'Pendidikan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['number', 'person.name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index 53558b2b..8274e752 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list.cfg'
 
 interface Props {
   data: any[]
@@ -22,13 +22,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/patient/picker.vue b/app/components/app/patient/picker.vue
index 5789ef6b..be8c7160 100644
--- a/app/components/app/patient/picker.vue
+++ b/app/components/app/patient/picker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list.cfg'
 
 defineProps<{ data: any[] }>()
 const modelValue = defineModel<any | null>()
@@ -8,13 +8,8 @@ const modelValue = defineModel<any | null>()
 <template>
   <PubMyUiDataTable
     v-model="modelValue"
+    v-bind="config"
     select-mode="single"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/patient/preview.vue b/app/components/app/patient/preview.vue
index ec3d8b6d..03ec65fb 100644
--- a/app/components/app/patient/preview.vue
+++ b/app/components/app/patient/preview.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import type { Person } from '~/models/person'
-import type { PersonAddress } from '~/models/person-address'
-import type { PersonContact } from '~/models/person-contact'
-import type { PersonRelative } from '~/models/person-relative'
-
+import type { Patient } from '~/models/patient'
 import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
 import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue'
+import { formatAddress } from '~/models/person-address'
 
-import { educationCodes, genderCodes, personContactTypes, relationshipCodes, religionCodes } from '~/lib/constants'
+import {
+  addressLocationTypeCode,
+  educationCodes,
+  genderCodes,
+  occupationCodes,
+  personContactTypes,
+  relationshipCodes,
+  religionCodes,
+} from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'
 
 // #region Props & Emits
 const props = defineProps<{
-  person: Person
-  personAddresses: PersonAddress[]
-  personContacts: PersonContact[]
-  personRelatives: PersonRelative[]
+  patient: Patient
 }>()
 
 const emit = defineEmits<{
@@ -28,17 +30,28 @@ const emit = defineEmits<{
 const genderOptions = mapToComboboxOptList(genderCodes)
 const religionOptions = mapToComboboxOptList(religionCodes)
 const educationOptions = mapToComboboxOptList(educationCodes)
+const occupationOptions = mapToComboboxOptList(occupationCodes)
 const relationshipOptions = mapToComboboxOptList(relationshipCodes)
 const personContactTypeOptions = mapToComboboxOptList(personContactTypes)
 
-const residentAddress = 'Jl. Puncak Borobudur Blok M No. 321, Lowokwaru, Kota Malang, Jawa Timur'
-const primaryAddress = 'Perumahan Araya Cluster B, No 22, Blimbing, Kota Malang, Jawa Timur'
+// Computed addresses from nested data
+const domicileAddress = computed(() => {
+  const addresses = props.patient.person.addresses
+  const resident = addresses?.find((addr) => addr.locationType_code === 'domicile')
+  return formatAddress(resident)
+})
+
+const identityAddress = computed(() => {
+  const addresses = props.patient.person.addresses
+  const primary = addresses?.find((addr) => addr.locationType_code === 'identity')
+  return formatAddress(primary)
+})
 
 const patientAge = computed(() => {
-  if (!props.person.birthDate) {
+  if (!props.patient.person.birthDate) {
     return '-'
   }
-  const birthDate = new Date(props.person.birthDate)
+  const birthDate = new Date(props.patient.person.birthDate)
   const today = new Date()
   let age = today.getFullYear() - birthDate.getFullYear()
   const monthDiff = today.getMonth() - birthDate.getMonth()
@@ -53,6 +66,7 @@ const patientAge = computed(() => {
 // #endregion
 
 // #region Functions
+
 // #endregion region
 
 // #region Utilities & event handlers
@@ -67,48 +81,53 @@ function onClick(type: string) {
 
 <template>
   <DetailSection title="Data Pasien">
-    <DetailRow label="Nomor ID">{{ person.id || '-' }}</DetailRow>
-    <DetailRow label="Sapaan">{{ person.alias || '-' }}</DetailRow>
-    <DetailRow label="Nama Lengkap">{{ person.name || '-' }}</DetailRow>
+    <DetailRow label="Nomor">{{ patient.number || '-' }}</DetailRow>
+    <DetailRow label="Nama Lengkap">{{ patient.person.name || '-' }}</DetailRow>
     <DetailRow label="Tempat, tanggal lahir">
-      {{ person.birthRegency_code || '-' }},
-      {{ person.birthDate ? new Date(person.birthDate).toLocaleDateString() : '-' }}
+      {{ patient.person.birthRegency?.name || '-' }},
+      {{ patient.person.birthDate ? new Date(patient.person.birthDate).toLocaleDateString('id-ID') : '-' }}
     </DetailRow>
-    <DetailRow label="Usia">{{ patientAge || '-' }}</DetailRow>
+    <DetailRow label="Usia">{{ patientAge || '-' }} Tahun</DetailRow>
     <DetailRow label="Tanggal Daftar">
-      {{ person.createdAt ? new Date(person.createdAt).toLocaleDateString() : '-' }}
+      {{ patient.person.createdAt ? new Date(patient.person.createdAt).toLocaleDateString('id-ID') : '-' }}
     </DetailRow>
     <DetailRow label="Jenis Kelamin">
-      {{ genderOptions.find((item) => item.code === person.gender_code)?.label || '-' }}
+      {{ genderOptions.find((item) => item.code === patient.person.gender_code)?.label || '-' }}
     </DetailRow>
 
-    <DetailRow label="NIK">{{ person.residentIdentityNumber || '-' }}</DetailRow>
-    <DetailRow label="No. SIM">{{ person.drivingLicenseNumber || '-' }}</DetailRow>
-    <DetailRow label="No. Paspor">{{ person.passportNumber || '-' }}</DetailRow>
+    <DetailRow label="NIK">{{ patient.person.residentIdentityNumber || '-' }}</DetailRow>
+    <DetailRow label="No. SIM">{{ patient.person.drivingLicenseNumber || '-' }}</DetailRow>
+    <DetailRow label="No. Paspor">{{ patient.person.passportNumber || '-' }}</DetailRow>
 
     <DetailRow label="Agama">
-      {{ religionOptions.find((item) => item.code === person.religion_code)?.label || '-' }}
+      {{ religionOptions.find((item) => item.code === patient.person.religion_code)?.label || '-' }}
     </DetailRow>
-    <DetailRow label="Suku">{{ person.ethnic_code || '-' }}</DetailRow>
-    <DetailRow label="Bahasa">{{ person.language_code || '-' }}</DetailRow>
+    <DetailRow label="Suku">{{ patient.person.ethnic?.name || '-' }}</DetailRow>
+    <DetailRow label="Bahasa">{{ patient.person.language?.name || '-' }}</DetailRow>
     <DetailRow label="Pendidikan">
-      {{ educationOptions.find((item) => item.code === person.education_code)?.label || '-' }}
+      {{ educationOptions.find((item) => item.code === patient.person.education_code)?.label || '-' }}
+    </DetailRow>
+    <DetailRow label="Pekerjaan">
+      {{
+        occupationOptions.find((item) => item.code === patient.person.occupation_code)?.label ||
+        patient.person.occupation_name ||
+        '-'
+      }}
     </DetailRow>
-    <DetailRow label="Pekerjaan">{{ person.occupation_name || '-' }}</DetailRow>
   </DetailSection>
 
   <DetailSection title="Alamat">
-    <DetailRow label="Alamat Domisili">{{ residentAddress || '-' }}</DetailRow>
-    <DetailRow label="Alamat KTP">{{ primaryAddress || '-' }}</DetailRow>
+    <DetailRow :label="addressLocationTypeCode.domicile || 'Alamat Domisili'">{{ domicileAddress || '-' }}</DetailRow>
+    <DetailRow :label="addressLocationTypeCode.identity || 'Alamat KTP'">{{ identityAddress || '-' }}</DetailRow>
   </DetailSection>
   <DetailSection title="Kontak">
-    <template v-if="personContacts && personContacts.length > 0">
+    <template v-if="patient.person.contacts && patient.person.contacts.length > 0">
       <template
         v-for="contactType in personContactTypeOptions"
         :key="contactType.code"
       >
         <DetailRow :label="contactType.label">
-          {{ personContacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
+          {{ patient.person.contacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
         </DetailRow>
       </template>
     </template>
@@ -116,10 +135,10 @@ function onClick(type: string) {
       <DetailRow label="Kontak">-</DetailRow>
     </template>
   </DetailSection>
-  <DetailSection title="Penanggung Jawab">
-    <template v-if="personRelatives && personRelatives.filter((rel) => rel.responsible).length > 0">
+  <DetailSection title="Orang Tua">
+    <template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => !rel.responsible).length > 0">
       <template
-        v-for="(relative, index) in personRelatives.filter((rel) => rel.responsible)"
+        v-for="(relative, index) in patient.person.relatives.filter((rel) => !rel.responsible)"
         :key="relative.id"
       >
         <div
@@ -130,13 +149,41 @@ function onClick(type: string) {
         <DetailRow label="Hubungan">
           {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
         </DetailRow>
-        <DetailRow label="Jenis Kelamin">
+        <!-- <DetailRow label="Jenis Kelamin">
           {{ genderOptions.find((item) => item.code === relative.gender_code)?.label || '-' }}
-        </DetailRow>
+        </DetailRow> -->
         <DetailRow label="Pendidikan">
           {{ educationOptions.find((item) => item.code === relative.education_code)?.label || '-' }}
         </DetailRow>
-        <DetailRow label="Pekerjaan">{{ relative.occupation_name || '-' }}</DetailRow>
+        <DetailRow label="Pekerjaan">
+          {{
+            occupationOptions.find((item) => item.code === relative.occupation_code)?.label ||
+            relative.occupation_name ||
+            '-'
+          }}
+        </DetailRow>
+        <!-- <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow> -->
+        <!-- <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow> -->
+      </template>
+    </template>
+    <template v-else>
+      <DetailRow label="Orang Tua">-</DetailRow>
+    </template>
+  </DetailSection>
+  <DetailSection title="Penanggung Jawab">
+    <template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => rel.responsible).length > 0">
+      <template
+        v-for="(relative, index) in patient.person.relatives.filter((rel) => rel.responsible)"
+        :key="relative.id"
+      >
+        <div
+          v-if="index > 0"
+          class="mt-3 border-t border-gray-200 pt-3"
+        ></div>
+        <DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow>
+        <DetailRow label="Hubungan">
+          {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
+        </DetailRow>
         <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow>
         <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow>
       </template>
diff --git a/app/components/app/person-address/_common/select-district.vue b/app/components/app/person-address/_common/select-district.vue
index 91f853f8..2c0da04c 100644
--- a/app/components/app/person-address/_common/select-district.vue
+++ b/app/components/app/person-address/_common/select-district.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
+  regencyCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,24 +20,41 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const { placeholder = 'Pilih Kecamatan', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const {
+  fieldName = 'districtId',
+  placeholder = 'Pilih kecamatan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
 
-const districtOptions = [
-  { label: 'Kecamatan Lowokwaru', value: '18' },
-  { label: 'Kecamatan Pakis', value: '33' },
-  { label: 'Kecamatan Blimbing', value: '35' },
-]
+// Gunakan composable untuk mengelola data districts
+const regencyCodeRef = toRef(props, 'regencyCode')
+const { districtOptions, isLoading, error } = useDistricts(regencyCodeRef)
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.regencyCode) return 'Pilih kabupaten/kota dahulu'
+  if (isLoading.value) return 'Memuat data kecamatan...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.regencyCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kecamatan
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -49,15 +69,15 @@ const districtOptions = [
               :id="fieldName"
               v-bind="componentField"
               :items="districtOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kecamatan..."
               empty-message="Kecamatan tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-postal.vue b/app/components/app/person-address/_common/select-postal.vue
index 83b33786..56867c7f 100644
--- a/app/components/app/person-address/_common/select-postal.vue
+++ b/app/components/app/person-address/_common/select-postal.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName: string
+  villageCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,37 +20,32 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const {
-  fieldName = 'zipCode',
-  placeholder = 'Kode Pos',
-  errors,
-  class: containerClass,
-  selectClass,
-  fieldGroupClass,
-} = props
+const { fieldName = 'postalRegion', placeholder = 'Kode Pos', errors, class: containerClass, fieldGroupClass } = props
 
-const postalCodeOptions = [
-  { label: '65120', value: '65120' },
-  { label: '65121', value: '65121' },
-  { label: '65123', value: '65123' },
-  { label: '65124', value: '65124' },
-  { label: '65125', value: '65125' },
-  { label: '65126', value: '65126' },
-  { label: '65127', value: '65127' },
-  { label: '65128', value: '65128' },
-  { label: '65129', value: '65129' },
-]
+const villageCodeRef = toRef(props, 'villageCode')
+const { postalRegionOptions, isLoading, error } = usePostalRegion(villageCodeRef)
+
+const dynamicPlaceholder = computed(() => {
+  if (!props.villageCode) return 'Pilih kelurahan terlebih dahulu'
+  if (isLoading.value) return 'Memuat kode pos...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.villageCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kode Pos
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -61,9 +59,9 @@ const postalCodeOptions = [
             <Combobox
               :id="fieldName"
               v-bind="componentField"
-              :items="postalCodeOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
+              :items="postalRegionOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
               search-placeholder="Cari..."
               empty-message="Kode pos tidak ditemukan"
             />
@@ -71,6 +69,6 @@ const postalCodeOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-province.vue b/app/components/app/person-address/_common/select-province.vue
index f8cc5464..ca6dd51a 100644
--- a/app/components/app/person-address/_common/select-province.vue
+++ b/app/components/app/person-address/_common/select-province.vue
@@ -6,8 +6,10 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -18,29 +20,38 @@ const props = defineProps<{
 }>()
 
 const {
-  fieldName = 'provinceId',
+  fieldName = 'provinceCode',
   placeholder = 'Pilih provinsi',
   errors,
   class: containerClass,
   fieldGroupClass,
 } = props
 
-const provinceList = [
-  { label: 'Jawa Barat', value: '18' },
-  { label: 'Jawa Tengah', value: '33' },
-  { label: 'Jawa Timur', value: '35' },
-]
+// Gunakan composable untuk mengelola data provinces
+const { provinceOptions, isLoading, error } = useProvinces()
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (isLoading.value) return 'Memuat data provinsi...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Provinsi
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -54,16 +65,16 @@ const provinceList = [
             <Combobox
               :id="fieldName"
               v-bind="componentField"
-              :items="provinceList"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
-              empty-message="Kecamatan tidak ditemukan"
+              :items="provinceOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari provinsi..."
+              empty-message="Provinsi tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-regency.vue b/app/components/app/person-address/_common/select-regency.vue
index 9b415b6e..8fbf6f23 100644
--- a/app/components/app/person-address/_common/select-regency.vue
+++ b/app/components/app/person-address/_common/select-regency.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
+  provinceCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,26 +20,41 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const { placeholder = 'Pilih kabupaten/kota', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const {
+  fieldName = 'regencyId',
+  placeholder = 'Pilih kabupaten/kota',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
 
-const regencyOptions = [
-  { label: 'Kab. Sidoarjo', value: '32' },
-  { label: 'Kab. Malang', value: '35' },
-  { label: 'Kab. Mojokerto', value: '31' },
-  { label: 'Kab. Lamongan', value: '30' },
-  { label: 'Kota Malang', value: '18' },
-]
+// Gunakan composable untuk mengelola data regencies
+const provinceCodeRef = toRef(props, 'provinceCode')
+const { regencyOptions, isLoading, error } = useRegencies({ provinceCode: provinceCodeRef, enablePagination: false })
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.provinceCode) return 'Pilih provinsi dahulu'
+  if (isLoading.value) return 'Memuat data kabupaten/kota...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.provinceCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kabupaten/Kota
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -51,15 +69,15 @@ const regencyOptions = [
               :id="fieldName"
               v-bind="componentField"
               :items="regencyOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kabupaten/kota..."
               empty-message="Kabupaten/kota tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-village.vue b/app/components/app/person-address/_common/select-village.vue
index a3d7725c..9684954f 100644
--- a/app/components/app/person-address/_common/select-village.vue
+++ b/app/components/app/person-address/_common/select-village.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
+  districtCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,25 +20,41 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const { placeholder = 'Pilih Kelurahan', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const {
+  fieldName = 'villageId',
+  placeholder = 'Pilih kelurahan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
 
-const villageOptions = [
-  { label: 'Lowokwaru', value: '18' },
-  { label: 'Dinoyo', value: '33' },
-  { label: 'Blimbing', value: '35' },
-  { label: 'Sawojajar', value: '36' },
-]
+// Gunakan composable untuk mengelola data villages
+const districtCodeRef = toRef(props, 'districtCode')
+const { villageOptions, isLoading, error } = useVillages(districtCodeRef)
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.districtCode) return 'Pilih kecamatan dahulu'
+  if (isLoading.value) return 'Memuat data kelurahan...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.districtCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kelurahan
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -50,15 +69,15 @@ const villageOptions = [
               :id="fieldName"
               v-bind="componentField"
               :items="villageOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kelurahan..."
               empty-message="Kelurahan tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/entry-form-relative.vue b/app/components/app/person-address/entry-form-relative.vue
index 1c8c91a7..cc294bab 100644
--- a/app/components/app/person-address/entry-form-relative.vue
+++ b/app/components/app/person-address/entry-form-relative.vue
@@ -6,7 +6,8 @@ import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
-import RadioResidence from './_common/radio-residence.vue'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import SelectDistrict from './_common/select-district.vue'
 import SelectPostal from './_common/select-postal.vue'
 import SelectProvince from './_common/select-province.vue'
@@ -14,6 +15,8 @@ import SelectRegency from './_common/select-regency.vue'
 import SelectVillage from './_common/select-village.vue'
 import { Form } from '~/components/pub/ui/form'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   title: string
   conf?: {
@@ -39,18 +42,27 @@ let isResetting = false
 
 // Field dependency map for placeholder
 const fieldStates: Record<string, { dependsOn?: string; placeholder: string }> = {
-  regencyId: { dependsOn: 'provinceId', placeholder: 'Pilih provinsi dahulu' },
-  districtId: { dependsOn: 'regencyId', placeholder: 'Pilih kabupaten/kota dahulu' },
-  villageId: { dependsOn: 'districtId', placeholder: 'Pilih kecamatan dahulu' },
-  zipCode: { dependsOn: 'villageId', placeholder: 'Pilih kelurahan dahulu' },
+  regency_code: { dependsOn: 'province_code', placeholder: 'Pilih provinsi dahulu' },
+  district_code: { dependsOn: 'regency_code', placeholder: 'Pilih kabupaten/kota dahulu' },
+  village_code: { dependsOn: 'district_code', placeholder: 'Pilih kecamatan dahulu' },
+  postalRegion_code: { dependsOn: 'village_code', placeholder: 'Pilih kelurahan dahulu' },
   address: { placeholder: 'Masukkan alamat' },
   rt: { placeholder: '001' },
   rw: { placeholder: '002' },
 }
+
+// Computed untuk konversi boolean ke string untuk radio group
+const isSameAddressString = computed(() => {
+  const value = formRef.value?.values?.isSameAddress
+  if (typeof value === 'boolean') {
+    return value ? '1' : '0'
+  }
+  return value || '1'
+})
 // #region Function Helper
 function getFieldState(field: string) {
   const state = fieldStates[field]
-  const isSame = formRef.value?.values?.isSameAddress === '1'
+  const isSame = formRef.value?.values?.isSameAddress === true || formRef.value?.values?.isSameAddress === '1'
 
   // Jika alamat sama, semua field kecuali provinsi disabled
   if (['address', 'rt', 'rw'].includes(field) && isSame) {
@@ -63,7 +75,7 @@ function getFieldState(field: string) {
     const isDisabledByDependency = !dependencyValue
 
     // Jika isSame, semua field location disabled
-    if (isSame && ['regencyId', 'districtId', 'villageId', 'zipCode'].includes(field)) {
+    if (isSame && ['regency_code', 'district_code', 'village_code', 'postalRegion_code'].includes(field)) {
       return { placeholder: '-', disabled: true }
     }
 
@@ -73,7 +85,7 @@ function getFieldState(field: string) {
   }
 
   // Jika isSame dan field location, disabled
-  if (isSame && ['regencyId', 'districtId', 'villageId', 'zipCode'].includes(field)) {
+  if (isSame && ['regency_code', 'district_code', 'village_code', 'postalRegion_code'].includes(field)) {
     return { placeholder: '-', disabled: true }
   }
 
@@ -84,9 +96,9 @@ function getFieldState(field: string) {
 
 // #region watch
 
-// Watch provinceId changes
+// Watch province_code changes
 watch(
-  () => formRef.value?.values?.provinceId,
+  () => formRef.value?.values?.province_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -95,10 +107,10 @@ watch(
 
       formRef.value.setValues(
         {
-          regencyId: undefined,
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
+          regency_code: undefined,
+          district_code: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -110,9 +122,9 @@ watch(
   },
 )
 
-// Watch regencyId changes
+// Watch regency_code changes
 watch(
-  () => formRef.value?.values?.regencyId,
+  () => formRef.value?.values?.regency_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -121,9 +133,9 @@ watch(
 
       formRef.value.setValues(
         {
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
+          district_code: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -135,9 +147,9 @@ watch(
   },
 )
 
-// Watch districtId changes
+// Watch district_code changes
 watch(
-  () => formRef.value?.values?.districtId,
+  () => formRef.value?.values?.district_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -146,8 +158,8 @@ watch(
 
       formRef.value.setValues(
         {
-          villageId: undefined,
-          zipCode: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -159,9 +171,9 @@ watch(
   },
 )
 
-// Watch villageId changes
+// Watch village_code changes
 watch(
-  () => formRef.value?.values?.villageId,
+  () => formRef.value?.values?.village_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -170,7 +182,7 @@ watch(
 
       formRef.value.setValues(
         {
-          zipCode: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -188,19 +200,23 @@ watch(
   (newValue, oldValue) => {
     if (!formRef.value || newValue === oldValue) return
 
-    // Ketika berubah dari '1' ke '0', clear empty strings dan trigger validasi
-    if (oldValue === '1' && newValue === '0') {
+    // Konversi ke boolean untuk perbandingan yang konsisten
+    const newBool = newValue === true || newValue === '1'
+    const oldBool = oldValue === true || oldValue === '1'
+
+    // Ketika berubah dari true ke false, clear empty strings dan trigger validasi
+    if (oldBool && !newBool) {
       nextTick(() => {
         // Set empty strings ke undefined untuk trigger required validation
         const currentValues = formRef.value.values
         const updatedValues = { ...currentValues }
 
         // Convert empty strings to undefined untuk field yang sekarang required
-        if (updatedValues.provinceId === '') updatedValues.provinceId = undefined
-        if (updatedValues.regencyId === '') updatedValues.regencyId = undefined
-        if (updatedValues.districtId === '') updatedValues.districtId = undefined
-        if (updatedValues.villageId === '') updatedValues.villageId = undefined
-        if (updatedValues.zipCode === '') updatedValues.zipCode = undefined
+        if (updatedValues.province_code === '') updatedValues.province_code = undefined
+        if (updatedValues.regency_code === '') updatedValues.regency_code = undefined
+        if (updatedValues.district_code === '') updatedValues.district_code = undefined
+        if (updatedValues.village_code === '') updatedValues.village_code = undefined
+        if (updatedValues.postalRegion_code === '') updatedValues.postalRegion_code = undefined
         if (updatedValues.address === '') updatedValues.address = undefined
 
         // Update values dan trigger validasi
@@ -213,15 +229,15 @@ watch(
       })
     }
 
-    // Ketika berubah dari '0' ke '1', clear error messages
-    if (oldValue === '0' && newValue === '1') {
+    // Ketika berubah dari false ke true, clear error messages
+    if (!oldBool && newBool) {
       nextTick(() => {
         // Clear error messages untuk field yang tidak lagi required
-        formRef.value?.setFieldError('provinceId', undefined)
-        formRef.value?.setFieldError('regencyId', undefined)
-        formRef.value?.setFieldError('districtId', undefined)
-        formRef.value?.setFieldError('villageId', undefined)
-        formRef.value?.setFieldError('zipCode', undefined)
+        formRef.value?.setFieldError('province_code', undefined)
+        formRef.value?.setFieldError('regency_code', undefined)
+        formRef.value?.setFieldError('district_code', undefined)
+        formRef.value?.setFieldError('village_code', undefined)
+        formRef.value?.setFieldError('postalRegion_code', undefined)
         formRef.value?.setFieldError('address', undefined)
         formRef.value?.setFieldError('rt', undefined)
         formRef.value?.setFieldError('rw', undefined)
@@ -241,129 +257,138 @@ watch(
     :validation-schema="formSchema"
     :validate-on-mount="false"
     validation-mode="onSubmit"
-    :initial-values="initialValues ?? { isSameAddress: '1' }"
+    :initial-values="initialValues ?? { isSameAddress: '1', locationType_code: 'identity' }"
   >
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title }}
       </p>
     </div>
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
-        <!-- LocationType -->
-        <FieldGroup v-if="conf?.withAddressName">
-          <Label label-for="locationType">Jenis Alamat</Label>
-          <Field
-            id="locationType"
-            :errors="errors"
-          >
-            <FormField
-              v-slot="{ componentField }"
-              name="locationType"
-            >
-              <FormItem>
-                <FormControl>
-                  <Select
-                    id="locationType"
-                    v-bind="componentField"
-                    :items="[
-                      { label: 'Rumah', value: 'rumah' },
-                      { label: 'Kantor', value: 'kantor' },
-                      { label: 'Lainnya', value: 'lainnya' },
-                    ]"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-          </Field>
-        </FieldGroup>
-        <RadioResidence field-name="isSameAddress" />
-        <Block></Block>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectProvince
-              field-name="provinceId"
-              placeholder="Pilih"
-              :is-disabled="values.isSameAddress === '1'"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <SelectRegency
-              field-name="regencyId"
-              :placeholder="getFieldState('regencyId').placeholder"
-              :is-disabled="getFieldState('regencyId').disabled || !values.provinceId"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-        </div>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectDistrict
-              field-name="districtId"
-              :placeholder="getFieldState('districtId').placeholder"
-              :is-disabled="getFieldState('districtId').disabled || !values.regencyId"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-          <div class="min-w-0 flex-1">
-            <SelectVillage
-              field-name="villageId"
-              :placeholder="getFieldState('villageId').placeholder"
-              :is-disabled="getFieldState('villageId').disabled || !values.districtId"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-        </div>
-        <InputBase
-          field-name="address"
-          label="Alamat"
-          :placeholder="getFieldState('address').placeholder"
-          :is-disabled="getFieldState('address').disabled"
+    <!-- locationType_code - Hidden field with default value 'identity' -->
+    <FormField
+      v-slot="{ componentField }"
+      name="locationType_code"
+    >
+      <input
+        type="hidden"
+        v-bind="componentField"
+        value="identity"
+      />
+    </FormField>
+    <DE.Block :col-count="4" :cell-flex="false">
+      <DE.Cell :col-span="4">
+        <DE.Label
+          size="fit"
+          height="compact"
+          label-for="isSameAddress"
+        >
+          Apakah alamat KTP sama dengan alamat sekarang?
+        </DE.Label>
+        <DE.Field
+          id="isSameAddress"
           :errors="errors"
-          :is-required="values.isSameAddress !== '1'"
+        >
+          <FormField
+            v-slot="{ componentField }"
+            name="isSameAddress"
+          >
+            <FormItem>
+              <FormControl>
+                <RadioGroup
+                  :model-value="isSameAddressString"
+                  @update:model-value="(value) => componentField.onChange(value)"
+                  class="flex flex-row flex-wrap gap-4 sm:gap-6"
+                >
+                  <div
+                    v-for="(option, index) in [
+                      { label: 'Ya', value: '1' },
+                      { label: 'Tidak', value: '0' },
+                    ]"
+                    :key="option.value"
+                    class="flex min-w-fit items-center space-x-2"
+                  >
+                    <RadioGroupItem
+                      :id="`isSameAddress-${index}`"
+                      :value="option.value"
+                      class="relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5"
+                    />
+                    <RadioLabel
+                      :for="`isSameAddress-${index}`"
+                      class="cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm"
+                    >
+                      {{ option.label }}
+                    </RadioLabel>
+                  </div>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage class="ml-0 mt-1" />
+            </FormItem>
+          </FormField>
+        </DE.Field>
+      </DE.Cell>
+      <SelectProvince
+        field-name="province_code"
+        placeholder="Pilih"
+        :is-disabled="values.isSameAddress === true || values.isSameAddress === '1'"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectRegency
+        field-name="regency_code"
+        :province-code="values.province_code"
+        :is-disabled="getFieldState('regency_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectDistrict
+        field-name="district_code"
+        :regency-code="values.regency_code"
+        :is-disabled="getFieldState('district_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectVillage
+        field-name="village_code"
+        :district-code="values.district_code"
+        :is-disabled="getFieldState('village_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <InputBase
+        field-name="address"
+        label="Alamat"
+        :placeholder="getFieldState('address').placeholder"
+        :is-disabled="getFieldState('address').disabled"
+        :errors="errors"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :col-span="2"
+      />
+      <div class="grid grid-cols-2 gap-1">
+        <InputBase
+          field-name="rt"
+          label="RT"
+          :errors="errors"
+          numeric-only
+          :max-length="2"
+          :placeholder="getFieldState('rt').placeholder"
+          :is-disabled="getFieldState('rt').disabled"
+        />
+        <InputBase
+          field-name="rw"
+          label="RW"
+          :placeholder="getFieldState('rw').placeholder"
+          :is-disabled="getFieldState('rw').disabled"
+          :errors="errors"
+          :max-length="2"
+          numeric-only
         />
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rt"
-              label="RT"
-              :errors="errors"
-              numeric-only
-              :max-length="3"
-              :placeholder="getFieldState('rt').placeholder"
-              :is-disabled="getFieldState('rt').disabled"
-            />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rw"
-              label="RW"
-              :placeholder="getFieldState('rw').placeholder"
-              :is-disabled="getFieldState('rw').disabled"
-              :errors="errors"
-              :max-length="3"
-              numeric-only
-            />
-          </div>
-
-          <div class="min-w-0 flex-[2]">
-            <SelectPostal
-              field-name="zipCode"
-              :placeholder="getFieldState('zipCode').placeholder"
-              :is-disabled="getFieldState('zipCode').disabled || !values.villageId"
-            />
-          </div>
-        </div>
       </div>
-    </div>
+      <SelectPostal
+        field-name="postalRegion_code"
+        :village-code="values.village_code"
+        :placeholder="getFieldState('postalRegion_code').placeholder"
+        :is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
+      />
+    </DE.Block>
+
   </Form>
 </template>
diff --git a/app/components/app/person-address/entry-form.vue b/app/components/app/person-address/entry-form.vue
index a26381d8..b3ef300d 100644
--- a/app/components/app/person-address/entry-form.vue
+++ b/app/components/app/person-address/entry-form.vue
@@ -12,6 +12,8 @@ import SelectRegency from './_common/select-regency.vue'
 import SelectVillage from './_common/select-village.vue'
 import { Form } from '~/components/pub/ui/form'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   title: string
   conf?: {
@@ -35,29 +37,34 @@ defineExpose({
 // Watchers untuk cascading reset
 let isResetting = false
 
-// #region Watch provinceId changes
+// #region Watch provinceCode changes
 
 watch(
-  () => formRef.value?.values?.provinceId,
+  () => formRef.value?.values?.provinceCode,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
-        {
-          regencyId: undefined,
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
-        },
-        false,
-      )
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              regencyId: undefined,
+              districtId: undefined,
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
 
-      nextTick(() => {
-        isResetting = false
-      })
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150) // Delay 150ms, lebih dari debounce composable (100ms)
     }
   },
 )
@@ -71,18 +78,23 @@ watch(
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
-        {
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
-        },
-        false,
-      )
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              districtId: undefined,
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
 
-      nextTick(() => {
-        isResetting = false
-      })
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150)
     }
   },
 )
@@ -96,17 +108,22 @@ watch(
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
-        {
-          villageId: undefined,
-          zipCode: undefined,
-        },
-        false,
-      )
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
 
-      nextTick(() => {
-        isResetting = false
-      })
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150)
     }
   },
 )
@@ -145,124 +162,84 @@ watch(
     :validation-schema="formSchema"
     :validate-on-mount="false"
     validation-mode="onSubmit"
-    :initial-values="initialValues ? initialValues : {}"
+    :initial-values="
+      initialValues ? { locationType_code: 'domicile', ...initialValues } : { locationType_code: 'domicile' }
+    "
   >
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title }}
       </p>
     </div>
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
-        <!-- LocationType -->
-        <FieldGroup v-if="conf?.withAddressName">
-          <Label label-for="locationType">Jenis Alamat</Label>
-          <Field
-            id="locationType"
+    <FormField
+      v-slot="{ componentField }"
+      name="locationType_code"
+    >
+      <input
+        type="hidden"
+        v-bind="componentField"
+        value="domicile"
+      />
+    </FormField>
+
+    <DE.Block :col-count="4" :cell-flex="false">
+      <SelectProvince
+        field-name="province_code"
+        placeholder="Pilih"
+        is-required
+      />
+      <SelectRegency
+        field-name="regency_code"
+        :province-code="values.province_code"
+        is-required
+      />
+      <SelectDistrict
+        field-name="district_code"
+        :regency-code="values.regency_code"
+        is-required
+      />
+      <SelectVillage
+        field-name="village_code"
+        :district-code="values.district_code"
+        is-required
+      />
+      <InputBase
+        field-name="address"
+        label="Alamat"
+        placeholder="Masukkan alamat"
+        :errors="errors"
+        is-required
+        :col-span="2"
+      />
+      <DE.Cell class="flex-row gap-2">
+        <div class="grid grid-cols-2 gap-1">
+          <InputBase
+            field-name="rt"
+            label="RT"
+            placeholder="01"
             :errors="errors"
-          >
-            <FormField
-              v-slot="{ componentField }"
-              name="locationType"
-            >
-              <FormItem>
-                <FormControl>
-                  <Select
-                    id="locationType"
-                    v-bind="componentField"
-                    :items="[
-                      { label: 'Rumah', value: 'rumah' },
-                      { label: 'Kantor', value: 'kantor' },
-                      { label: 'Lainnya', value: 'lainnya' },
-                    ]"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-          </Field>
-        </FieldGroup>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectProvince
-              field-name="provinceId"
-              placeholder="Pilih"
-              is-required
+            numeric-only
+            :max-length="2"
             />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <SelectRegency
-              field-name="regencyId"
-              placeholder="Pilih provinsi dahulu"
-              :is-disabled="!values.provinceId"
-              is-required
-            />
-          </div>
+          <InputBase
+            field-name="rw"
+            label="RW"
+            placeholder="02"
+            :errors="errors"
+            :max-length="2"
+            numeric-only
+          />
         </div>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectDistrict
-              field-name="districtId"
-              placeholder="Pilih kabupaten/kota dahulu"
-              :is-disabled="!values.regencyId"
-              is-required
-            />
-          </div>
-          <div class="min-w-0 flex-1">
-            <SelectVillage
-              field-name="villageId"
-              placeholder="Pilih kecamatan dahulu"
-              :is-disabled="!values.districtId"
-              is-required
-            />
-          </div>
-        </div>
-
-        <InputBase
-          field-name="address"
-          label="Alamat"
-          placeholder="Masukkan alamat"
-          :errors="errors"
-          is-required
+      </DE.Cell>
+      <SelectPostal
+          field-name="postalRegion_code"
+          placeholder="Pilih kelurahan dahulu"
+          :village-code="values.village_code"
+          :is-disabled="!values.village_code"
         />
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rt"
-              label="RT"
-              placeholder="001"
-              :errors="errors"
-              numeric-only
-              :max-length="3"
-            />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rw"
-              label="RW"
-              placeholder="002"
-              :errors="errors"
-              :max-length="3"
-              numeric-only
-            />
-          </div>
-
-          <div class="min-w-0 flex-[2]">
-            <SelectPostal
-              field-name="zipCode"
-              placeholder="Pilih kelurahan dahulu"
-              :is-disabled="!values.villageId"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
+    </DE.Block>
   </Form>
 </template>
diff --git a/app/components/app/person-contact/entry-form.vue b/app/components/app/person-contact/entry-form.vue
index 5fa451b4..431a3c79 100644
--- a/app/components/app/person-contact/entry-form.vue
+++ b/app/components/app/person-contact/entry-form.vue
@@ -39,7 +39,7 @@ defineExpose({
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title || 'Kontak Pasien' }}
       </p>
@@ -94,6 +94,7 @@ defineExpose({
               :disabled="fields.length >= contactLimit"
               type="button"
               variant="outline"
+              size="sm"
               @click="push({ contactType: '', contactNumber: '' })"
             >
               <Icon
diff --git a/app/components/app/person-relative/_common/select-relations.vue b/app/components/app/person-relative/_common/select-relations.vue
index 179976bf..5c3d2594 100644
--- a/app/components/app/person-relative/_common/select-relations.vue
+++ b/app/components/app/person-relative/_common/select-relations.vue
@@ -4,6 +4,7 @@ import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
+import { relationshipCodes } from '~/lib/constants'
 
 const props = defineProps<{
   fieldName: string
@@ -18,15 +19,11 @@ const props = defineProps<{
 
 const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass } = props
 
-const emergencyContactOptions = [
-  { label: 'Diri sendiri', value: 'self' },
-  { label: 'Orang Tua', value: 'parent' },
-  { label: 'Anak', value: 'child' },
-  { label: 'Keluarga lain', value: 'relative' },
-  { label: 'Petugas instansi lainnya', value: 'institution_officer' },
-  { label: 'Petugas kesehatan', value: 'health_officer' },
-  { label: 'Lainnya', value: 'other', priority: -1 },
-]
+const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, label]) => ({
+  label,
+  value,
+  ...(value === 'other' && { priority: -1 })
+}))
 </script>
 
 <template>
diff --git a/app/components/app/person/_common/select-birth-place.vue b/app/components/app/person/_common/select-birth-place.vue
new file mode 100644
index 00000000..dd61a69f
--- /dev/null
+++ b/app/components/app/person/_common/select-birth-place.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthPlace',
+  placeholder = 'Pilih tempat lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data regencies (tanpa pagination & tanpa province code)
+const { fetchRegencies, regencyOptions, isLoading, error } = useRegencies({
+  enablePagination: false,
+  enableSearch: false,
+})
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (isLoading.value) return 'Memuat data tempat lahir...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || isLoading.value || !!error.value
+})
+
+onMounted(() => {
+  fetchRegencies()
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label :label-for="fieldName" :is-required="isRequired">
+      Tempat Lahir
+    </DE.Label>
+    <DE.Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')">
+      <FormField v-slot="{ componentField }" :name="fieldName">
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="regencyOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari tempat lahir..."
+              empty-message="Tempat lahir tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person/family-parents-form.vue b/app/components/app/person/family-parents-form.vue
index e5ac4a46..fc87ce45 100644
--- a/app/components/app/person/family-parents-form.vue
+++ b/app/components/app/person/family-parents-form.vue
@@ -65,7 +65,7 @@ defineExpose({
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title }}
       </p>
diff --git a/app/components/app/pharmacist/list-cfg.ts b/app/components/app/pharmacist/list-cfg.ts
index 14c9cf0d..4dd5657f 100644
--- a/app/components/app/pharmacist/list-cfg.ts
+++ b/app/components/app/pharmacist/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,97 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    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
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/pharmacist/list.vue b/app/components/app/pharmacist/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/pharmacist/list.vue
+++ b/app/components/app/pharmacist/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/prescription-item/list-entry.cfg.ts b/app/components/app/prescription-item/list-entry.cfg.ts
new file mode 100644
index 00000000..070dd65f
--- /dev/null
+++ b/app/components/app/prescription-item/list-entry.cfg.ts
@@ -0,0 +1,56 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/prescription-item/list-entry.ts b/app/components/app/prescription-item/list-entry.ts
deleted file mode 100644
index c257b46a..00000000
--- a/app/components/app/prescription-item/list-entry.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
-import { defineAsyncComponent } from 'vue'
-
-type SmallDetailDto = any
-
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
-
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Bentuk' },
-    { label: 'Freq' },
-    { label: 'Dosis' },
-    { label: 'Interval' },
-    { label: 'Total' },
-    { label: '' },
-  ],
-]
-
-export const keys = ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action']
-
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
-
-export const funcParsed: RecStrFuncUnknown = {
-  cateogry: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineCategory?.name || '-'
-  },
-  group: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineGroup?.name || '-'
-  },
-  method: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineMethod?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineUnit?.name || '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action: (rec: unknown, idx: number): RecComponent => {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  // (_rec) {
-  //   return '-'
-  // },
-}
diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
index 6629f782..fef54b0c 100644
--- a/app/components/app/prescription-item/list-entry.vue
+++ b/app/components/app/prescription-item/list-entry.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+import { config } from './list-entry.cfg'
 
 defineProps<{
   data: any[]
@@ -8,14 +8,8 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-    class="border mb-4 2xl:mb-5"
   />
   <div class="flex">
     <div class="me-auto">
diff --git a/app/components/app/procedure-src/entry-form.vue b/app/components/app/procedure-src/entry-form.vue
new file mode 100644
index 00000000..fd33cf90
--- /dev/null
+++ b/app/components/app/procedure-src/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ProcedureSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<ProcedureSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: ProcedureSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-procedure-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/procedure-src/list-cfg.ts b/app/components/app/procedure-src/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/procedure-src/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/procedure-src/list.vue b/app/components/app/procedure-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/procedure-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/public-screen/list-cfg.ts b/app/components/app/public-screen/list-cfg.ts
index 905ec837..9f7ea4b4 100644
--- a/app/components/app/public-screen/list-cfg.ts
+++ b/app/components/app/public-screen/list-cfg.ts
@@ -1,37 +1,37 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/public-screen/list.vue b/app/components/app/public-screen/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/public-screen/list.vue
+++ b/app/components/app/public-screen/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
index 754d2dfb..19298fbf 100644
--- a/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
+++ b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
@@ -1,112 +1,113 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  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.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 '-'
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  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 '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/rehab/registration/sep-prosedur/list.vue b/app/components/app/rehab/registration/sep-prosedur/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/rehab/registration/sep-prosedur/list.vue
+++ b/app/components/app/rehab/registration/sep-prosedur/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/room/list-cfg.ts b/app/components/app/room/list-cfg.ts
index 687d0e2e..409287e5 100644
--- a/app/components/app/room/list-cfg.ts
+++ b/app/components/app/room/list-cfg.ts
@@ -1,56 +1,57 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Lantai' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  specialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.specialist?.name || '-'
+  parses: {
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist?.name || '-'
+    },
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.subspecialist?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit?.name || '-'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-  subspecialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.subspecialist?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.unit?.name || '-'
-  },
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/room/list.vue b/app/components/app/room/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/room/list.vue
+++ b/app/components/app/room/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/satusehat/list-cfg.ts b/app/components/app/satusehat/list-cfg.ts
index d287a38b..efc3d483 100644
--- a/app/components/app/satusehat/list-cfg.ts
+++ b/app/components/app/satusehat/list-cfg.ts
@@ -1,4 +1,4 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,61 +18,61 @@ export const rowStatus = {
 const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
 const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'ID' },
-    { label: 'Jenis' },
-    { label: 'Pasien' },
-    { label: 'Status' },
-    { label: 'Terakhir Update' },
-    { label: 'FHIR ID' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
   ],
-]
 
-export const keys = ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id']
+  headers: [
+    [
+      { label: 'ID' },
+      { label: 'Jenis' },
+      { label: 'Pasien' },
+      { label: 'Status' },
+      { label: 'Terakhir Update' },
+      { label: 'FHIR ID' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id'],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  patient(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: patientBadge,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  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 || ''}`
+    },
+  },
+
+  components: {
+    patient(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: patientBadge,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/satusehat/list.vue b/app/components/app/satusehat/list.vue
index 3e3fe4cb..58b4f1bd 100644
--- a/app/components/app/satusehat/list.vue
+++ b/app/components/app/satusehat/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -7,8 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <PubMyUiDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-    :func-html="funcHtml" :func-component="funcComponent"
-/>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
 </template>
diff --git a/app/components/app/sep/list-cfg.ts b/app/components/app/sep/list-cfg.ts
index 55fa91e1..4a6784fc 100644
--- a/app/components/app/sep/list-cfg.ts
+++ b/app/components/app/sep/list-cfg.ts
@@ -1,78 +1,77 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SepDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  { width: 120 }, // TGL. SEP
-  { width: 150 }, // NO. SEP
-  { width: 120 }, // PELAYANAN
-  { width: 100 }, // JALUR
-  { width: 150 }, // NO. RM
-  { width: 200 }, // NAMA PASIEN
-  { width: 150 }, // NO. KARTU BPJS
-  { width: 150 }, // NO. SURAT KONTROL
-  { width: 150 }, // TGL SURAT KONTROL
-  { width: 150 }, // KLINIK TUJUAN
-  { width: 200 }, // DPJP
-  { width: 200 }, // DIAGNOSIS AWAL
-  { width: 100 }, // AKSI
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'TGL. SEP' },
-    { label: 'NO. SEP' },
-    { label: 'PELAYANAN' },
-    { label: 'JALUR' },
-    { label: 'NO. RM' },
-    { label: 'NAMA PASIEN' },
-    { label: 'NO. KARTU BPJS' },
-    { label: 'NO. SURAT KONTROL' },
-    { label: 'TGL SURAT KONTROL' },
-    { label: 'KLINIK TUJUAN' },
-    { label: 'DPJP' },
-    { label: 'DIAGNOSIS AWAL' },
-    { label: 'AKSI' },
+export const config: Config = {
+  cols: [
+    { width: 120 }, // TGL. SEP
+    { width: 150 }, // NO. SEP
+    { width: 120 }, // PELAYANAN
+    { width: 100 }, // JALUR
+    { width: 150 }, // NO. RM
+    { width: 200 }, // NAMA PASIEN
+    { width: 150 }, // NO. KARTU BPJS
+    { width: 150 }, // NO. SURAT KONTROL
+    { width: 150 }, // TGL SURAT KONTROL
+    { width: 150 }, // KLINIK TUJUAN
+    { width: 200 }, // DPJP
+    { width: 200 }, // DIAGNOSIS AWAL
+    { width: 100 }, // AKSI
   ],
-]
 
-export const keys = [
-  'tgl_sep',
-  'no_sep',
-  'pelayanan',
-  'jalur',
-  'no_rm',
-  'nama_pasien',
-  'no_kartu_bpjs',
-  'no_surat_kontrol',
-  'tgl_surat_kontrol',
-  'klinik_tujuan',
-  'dpjp',
-  'diagnosis_awal',
-  'action',
-]
+  headers: [
+    [
+      { label: 'TGL. SEP' },
+      { label: 'NO. SEP' },
+      { label: 'PELAYANAN' },
+      { label: 'JALUR' },
+      { label: 'NO. RM' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TGL SURAT KONTROL' },
+      { label: 'KLINIK TUJUAN' },
+      { label: 'DPJP' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'AKSI' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'no_sep', label: 'NO. SEP' },
-  { key: 'nama_pasien', label: 'Nama Pasien' },
-]
+  keys: [
+    'tgl_sep',
+    'no_sep',
+    'pelayanan',
+    'jalur',
+    'no_rm',
+    'nama_pasien',
+    'no_kartu_bpjs',
+    'no_surat_kontrol',
+    'tgl_surat_kontrol',
+    'klinik_tujuan',
+    'dpjp',
+    'diagnosis_awal',
+    'action',
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
+  delKeyNames: [
+    { key: 'no_sep', label: 'NO. SEP' },
+    { key: 'nama_pasien', label: 'Nama Pasien' },
+  ],
 
-}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-}
 
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
+  htmls: {},
+}
diff --git a/app/components/app/sep/list.vue b/app/components/app/sep/list.vue
index abf68e25..f44166e2 100644
--- a/app/components/app/sep/list.vue
+++ b/app/components/app/sep/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, header, keys, funcParsed, funcComponent, funcHtml } from './list-cfg'
+import { config } from './list-cfg'
 
 interface SepData {
   tgl_sep: string
@@ -23,12 +23,7 @@ const props = defineProps<{
 
 <template>
   <PubMyUiDataTable
-    :cols="cols"
-    :header="header"
-    :keys="keys"
+    v-bind="config"
     :rows="props.data"
-    :funcParsed="funcParsed"
-    :funcComponent="funcComponent"
-    :funcHtml="funcHtml"
   />
 </template>
diff --git a/app/components/app/soapi/list-cfg.ts b/app/components/app/soapi/list-cfg.ts
index 460cacd9..6fa11bda 100644
--- a/app/components/app/soapi/list-cfg.ts
+++ b/app/components/app/soapi/list-cfg.ts
@@ -1,119 +1,113 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  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.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 !== 'undefined') {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  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 '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/soapi/list.vue b/app/components/app/soapi/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/soapi/list.vue
+++ b/app/components/app/soapi/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/specialist/list-cfg.ts b/app/components/app/specialist/list-cfg.ts
index f1ccbd25..8ed75f28 100644
--- a/app/components/app/specialist/list-cfg.ts
+++ b/app/components/app/specialist/list-cfg.ts
@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Unit' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Unit' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'unit', 'action']
+  keys: ['code', 'name', 'unit', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit_id || '-'
+    },
   },
-  unit: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.unit_id || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/specialist/list.vue b/app/components/app/specialist/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/specialist/list.vue
+++ b/app/components/app/specialist/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/subspecialist/list-cfg.ts b/app/components/app/subspecialist/list-cfg.ts
index f9af020e..7e9e7b79 100644
--- a/app/components/app/subspecialist/list-cfg.ts
+++ b/app/components/app/subspecialist/list-cfg.ts
@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Specialis' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'specialist', 'action']
+  keys: ['code', 'name', 'specialist', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist_id || '-'
+    },
   },
-  specialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.specialist_id || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/subspecialist/list.vue b/app/components/app/subspecialist/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/subspecialist/list.vue
+++ b/app/components/app/subspecialist/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/tools/list-cfg.ts b/app/components/app/tools/list-cfg.ts
index 53dac06d..bdafd346 100644
--- a/app/components/app/tools/list-cfg.ts
+++ b/app/components/app/tools/list-cfg.ts
@@ -1,48 +1,54 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 50 }]
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Satuan' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Satuan' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'uom_code', 'action']
+  keys: ['code', 'name', 'uom_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.uom_code
+    },
   },
-  uom_code: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.uom_code
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/tools/list.vue
+++ b/app/components/app/tools/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/unit/list-cfg.ts b/app/components/app/unit/list-cfg.ts
index 04975ddc..e3ab9b55 100644
--- a/app/components/app/unit/list-cfg.ts
+++ b/app/components/app/unit/list-cfg.ts
@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Instalasi' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Instalasi' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'installation', 'action']
+  keys: ['code', 'name', 'installation', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    installation: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.installation?.name || recX.Installation?.name || '-'
+    },
   },
-  installation: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.installation?.name || recX.Installation?.name || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/unit/list.vue
+++ b/app/components/app/unit/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/uom/list-cfg.ts b/app/components/app/uom/list-cfg.ts
index c26856bf..a2d4e648 100644
--- a/app/components/app/uom/list-cfg.ts
+++ b/app/components/app/uom/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
@@ -15,32 +8,39 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/uom/list.vue b/app/components/app/uom/list.vue
index 3af2b398..618c70c1 100644
--- a/app/components/app/uom/list.vue
+++ b/app/components/app/uom/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,14 +27,9 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-    />
+      />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/user/list-cfg.ts b/app/components/app/user/list-cfg.ts
index 69ee9962..f5ddf667 100644
--- a/app/components/app/user/list-cfg.ts
+++ b/app/components/app/user/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -17,93 +10,94 @@ const doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    console.log(rec)
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      console.log(rec)
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    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
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    status: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  status: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/user/list.vue b/app/components/app/user/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/user/list.vue
+++ b/app/components/app/user/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/warehouse/list-cfg.ts b/app/components/app/warehouse/list-cfg.ts
index 0669b99b..04ceca04 100644
--- a/app/components/app/warehouse/list-cfg.ts
+++ b/app/components/app/warehouse/list-cfg.ts
@@ -1,44 +1,45 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Lantai' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/warehouse/list.vue b/app/components/app/warehouse/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/warehouse/list.vue
+++ b/app/components/app/warehouse/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/content/bed/list.vue b/app/components/content/bed/list.vue
index 46ed0f11..e68f59c9 100644
--- a/app/components/content/bed/list.vue
+++ b/app/components/content/bed/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBedList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/building/list.vue b/app/components/content/building/list.vue
index 364f9a59..2c67a5ee 100644
--- a/app/components/content/building/list.vue
+++ b/app/components/content/building/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBuildingList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/chamber/list.vue b/app/components/content/chamber/list.vue
index 66098a84..9b389a02 100644
--- a/app/components/content/chamber/list.vue
+++ b/app/components/content/chamber/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppChamberList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/consultation/list.vue b/app/components/content/consultation/list.vue
index 0a67fb43..cfce5ae3 100644
--- a/app/components/content/consultation/list.vue
+++ b/app/components/content/consultation/list.vue
@@ -13,7 +13,6 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { ConsultationSchema, type ConsultationFormData } from '~/schemas/consultation.schema'
-import type { Unit } from '~/models/unit'
 
 // Handlers
 import {
@@ -24,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -32,10 +32,19 @@ import {
 
 // Services
 import { getList, getDetail } from '~/services/consultation.service'
-// import { getList as getUnitList } from '~/services/unit.service' // previously uses getList
 import { getValueLabelList } from '~/services/unit.service'
 
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+
 let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
 const title = ref('')
 
 const {
@@ -48,7 +57,10 @@ const {
   fetchData: getMyList,
 } = usePaginatedList({
   fetchFn: async ({ page, search }) => {
-    const result = await getList({ search, page })
+    const result = await getList({ 'encounter-id': props.encounter.id, includes: 'encounter,dstUnit', search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'consultation',
@@ -72,7 +84,12 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah',
     icon: 'i-lucide-plus',
     onClick: () => {
-      recItem.value = null
+      recItem.value = {
+        encounter_id: encounterId.value,
+        date: today.toISOString().slice(0, 10),
+        unit_id: 0,
+        problem: '',
+      }
       recId.value = 0
       isFormEntryDialogOpen.value = true
       isReadonly.value = false
@@ -80,6 +97,8 @@ const headerPrep: HeaderPrep = {
   },
 }
 
+const today = new Date()
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -94,17 +113,6 @@ const getMyDetail = async (id: number | string) => {
   }
 }
 
-// const getUnits = async () => {
-//   const result = await getUnitList()
-//   if (result.success) {
-//     const currentMedicineGroups = result.body?.data || []
-//     units.value = currentMedicineGroups.map((item: Unit) => ({
-//       value: item.code,
-//       label: item.name,
-//     }))
-//   }
-// }
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -138,12 +146,29 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <List :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Divisi'" size="xl" prevent-outside>
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="recItem?.id ? 'Edit Konsultasi' : 'Tambah Konsultasi'"
+    size="xl"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
     <Entry
       :schema="ConsultationSchema"
       :values="recItem"
+      :encounter_id="encounterId"
       :units="units"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
@@ -170,9 +195,18 @@ onMounted(async () => {
   >
     <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>
+        <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>
diff --git a/app/components/content/counter/list.vue b/app/components/content/counter/list.vue
index 8757c0d2..e85c5df4 100644
--- a/app/components/content/counter/list.vue
+++ b/app/components/content/counter/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppCounterList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/device-order/entry.vue b/app/components/content/device-order/entry.vue
new file mode 100644
index 00000000..6d76d685
--- /dev/null
+++ b/app/components/content/device-order/entry.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+
+import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Tambah Order Alkes',
+  icon: 'i-lucide-box',
+}
+
+  function navClick(type: 'cancel' | 'submit') {
+    if (type === 'cancel') {
+      backToList()
+    }
+  }
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <ItemListEntry />
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/content/device-order/list.vue b/app/components/content/device-order/list.vue
new file mode 100644
index 00000000..e62a2fbd
--- /dev/null
+++ b/app/components/content/device-order/list.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/device-order/list.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+// import { useQueryMode } from '~/composables/useQueryMode'
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type DeviceOrderFormData, DeviceOrderSchema  } from '~/schemas/device-order.schema'
+import type { DeviceOrder } from "~/models/device-order";
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device-order.handler'
+
+// Services
+import { getList } from '~/services/device-order.service'
+
+const route = useRoute()
+const title = ref('')
+
+// const { mode, openForm, backToList } = useQueryMode()
+const { mode, goToEntry, backToList } = useQueryCRUDMode()
+const { recordId } = useQueryCRUDRecordId()
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'parent,childrens',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device-order',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Alkes',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: async () => {
+      recItem.value = null
+      recId.value = 0
+      isReadonly.value = false
+      // await handleActionSave(recItem, getMyList, () => {}, () => {})
+      goToEntry()
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/device-order/main.vue b/app/components/content/device-order/main.vue
new file mode 100644
index 00000000..ae5a9ca8
--- /dev/null
+++ b/app/components/content/device-order/main.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const { mode } = useQueryMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" />
+  <Entry v-else />
+</template>
diff --git a/app/components/content/diagnose-src/list.vue b/app/components/content/diagnose-src/list.vue
new file mode 100644
index 00000000..2b056697
--- /dev/null
+++ b/app/components/content/diagnose-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/diagnose-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DiagnoseSrcSchema, type DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/diagnose-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/diagnose-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'diagnose-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Diagnosis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Diagnosis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Diagnosis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppDiagnoseSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Diagnosis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDiagnoseSrcEntryForm
+      :schema="DiagnoseSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DiagnoseSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 46e22401..019e64a9 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionPositionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/division/entry.ts b/app/components/content/division/entry.ts
new file mode 100644
index 00000000..9f3cb9f4
--- /dev/null
+++ b/app/components/content/division/entry.ts
@@ -0,0 +1,145 @@
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+import * as z from 'zod'
+
+export const divisionConf = {
+  msg: {
+    placeholder: '---pilih divisi utama',
+    search: 'kode, nama divisi',
+    empty: 'divisi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Medical' },
+    { value: '2', label: 'Nursing' },
+    { value: '3', label: 'Admin' },
+    { value: '4', label: 'Support' },
+    { value: '5', label: 'Education' },
+    { value: '6', label: 'Pharmacy' },
+    { value: '7', label: 'Radiology' },
+    { value: '8', label: 'Laboratory' },
+    { value: '9', label: 'Finance' },
+    { value: '10', label: 'Human Resources' },
+    { value: '11', label: 'IT Services' },
+    { value: '12', label: 'Maintenance' },
+    { value: '13', label: 'Catering' },
+    { value: '14', label: 'Security' },
+    { value: '15', label: 'Emergency' },
+    { value: '16', label: 'Surgery' },
+    { value: '17', label: 'Outpatient' },
+    { value: '18', label: 'Inpatient' },
+    { value: '19', label: 'Rehabilitation' },
+    { value: '20', label: 'Research' },
+  ],
+}
+
+export const schema = z.object({
+  name: z
+    .string({
+      required_error: 'Nama wajib diisi',
+    })
+    .min(1, 'Nama divisi wajib diisi'),
+
+  code: z
+    .string({
+      required_error: 'Kode wajib diisi',
+    })
+    .min(1, 'Kode divisi wajib diisi'),
+
+  parentId: z.string().optional(),
+})
+
+// State untuk tree data divisi - dimulai dengan data level atas
+const divisionTreeData = ref<TreeItem[]>([
+  { value: '1', label: 'Medical', hasChildren: true },
+  { value: '2', label: 'Nursing', hasChildren: true },
+  { value: '3', label: 'Admin', hasChildren: false },
+  { value: '4', label: 'Support', hasChildren: true },
+  { value: '5', label: 'Education', hasChildren: false },
+  { value: '6', label: 'Pharmacy', hasChildren: true },
+  { value: '7', label: 'Radiology', hasChildren: false },
+  { value: '8', label: 'Laboratory', hasChildren: true },
+])
+
+// Helper function untuk mencari dan menyisipkan data anak ke dalam tree
+function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]): boolean {
+  for (const node of nodes) {
+    if (node.value === parentId) {
+      node.children = newChildren
+      return true
+    }
+    if (node.children && findAndInsertChildren(node.children as TreeItem[], parentId, newChildren)) {
+      return true
+    }
+  }
+  return false
+}
+
+// Fungsi untuk fetch data anak divisi (lazy loading)
+async function handleFetchDivisionChildren(parentId: string): Promise<void> {
+  console.log(`Mengambil data sub-divisi untuk parent: ${parentId}`)
+
+  // Simulasi delay API call
+  await new Promise((resolve) => setTimeout(resolve, 800))
+
+  let childrenData: TreeItem[] = []
+
+  // Sample data berdasarkan parent ID
+  switch (parentId) {
+    case '1': // Medical
+      childrenData = [
+        { value: '1-1', label: 'Cardiology', hasChildren: true },
+        { value: '1-2', label: 'Neurology', hasChildren: false },
+        { value: '1-3', label: 'Oncology', hasChildren: false },
+      ]
+      break
+    case '2': // Nursing
+      childrenData = [
+        { value: '2-1', label: 'ICU Nursing', hasChildren: false },
+        { value: '2-2', label: 'ER Nursing', hasChildren: false },
+        { value: '2-3', label: 'Ward Nursing', hasChildren: true },
+      ]
+      break
+    case '4': // Support
+      childrenData = [
+        { value: '4-1', label: 'IT Support', hasChildren: false },
+        { value: '4-2', label: 'Maintenance', hasChildren: false },
+      ]
+      break
+    case '6': // Pharmacy
+      childrenData = [
+        { value: '6-1', label: 'Inpatient Pharmacy', hasChildren: false },
+        { value: '6-2', label: 'Outpatient Pharmacy', hasChildren: false },
+      ]
+      break
+    case '8': // Laboratory
+      childrenData = [
+        { value: '8-1', label: 'Clinical Lab', hasChildren: false },
+        { value: '8-2', label: 'Pathology Lab', hasChildren: false },
+      ]
+      break
+    case '1-1': // Cardiology sub-divisions
+      childrenData = [
+        { value: '1-1-1', label: 'Cardiac Surgery', hasChildren: false },
+        { value: '1-1-2', label: 'Cardiac Cathlab', hasChildren: false },
+      ]
+      break
+    case '2-3': // Ward Nursing sub-divisions
+      childrenData = [
+        { value: '2-3-1', label: 'Pediatric Ward', hasChildren: false },
+        { value: '2-3-2', label: 'Surgical Ward', hasChildren: false },
+      ]
+      break
+  }
+
+  // Insert data ke dalam tree state
+  findAndInsertChildren(divisionTreeData.value, parentId, childrenData)
+}
+
+export const divisionTreeConfig = computed(() => ({
+  msg: {
+    placeholder: '--- Pilih divisi induk',
+    search: 'Cari divisi...',
+    empty: 'Divisi tidak ditemukan',
+  },
+  data: divisionTreeData.value,
+  onFetchChildren: handleFetchDivisionChildren,
+}))
diff --git a/app/components/content/division/list-prev.vue b/app/components/content/division/list-prev.vue
new file mode 100644
index 00000000..d072ac9a
--- /dev/null
+++ b/app/components/content/division/list-prev.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppDivisionEntryForm from '~/components/app/division/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { divisionConf, divisionTreeConfig, schema } from './entry'
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+async function fetchDivisionData(_params: any) {
+  const endpoint = '/api/v1/_dev/division/list'
+  return await xfetch(endpoint)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionList,
+} = usePaginatedList({
+  fetchFn: fetchDivisionData,
+  entityName: 'division',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Divisi',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/division/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getDivisionList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/division', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getDivisionList()
+
+    // TODO: Show success message
+    console.log('Division created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
+
+    <AppDivisionEntryFormPrev
+      :division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
+      :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
+    />
+
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+    >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index 0ad75edb..9ccefc56 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -147,8 +147,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/employee/list.vue b/app/components/content/employee/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/employee/list.vue
+++ b/app/components/content/employee/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index f218444a..967bcf11 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -49,7 +49,7 @@ const refSearchNav: RefSearchNav = {
 
 async function getPatientList() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/encounter')
+  const resp = await xfetch('/api/v1/encounter?includes=patient,patient-person')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -96,11 +96,10 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <Separator class="my-4 xl:my-5" />
+
   <Filter :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppEncounterList :data="data" />
-  </div>
+
+  <AppEncounterList :data="data" />
 
   <Dialog v-model:open="isFormEntryDialogOpen" title="Filter" size="lg" prevent-outside>
     <AppEncounterFilter />
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 67e71ddd..6fc620b5 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -3,19 +3,21 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { getDetail } from '~/services/encounter.service'
+
+import type { Encounter } from '~/models/encounter'
+
 // Components
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
 
-import { getDetail } from '~/services/encounter.service'
-
+import Status from '~/components/app/encounter/status.vue'
 import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
-import PrescriptionList from '~/components/content/prescription/list.vue'
-import type { Encounter } from '~/models/encounter'
-import Status from '~/components/app/encounter/status.vue'
 // import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import Consultation from '~/components/content/consultation/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -29,23 +31,12 @@ const activeTab = computed({
 })
 
 const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const encounter = ref<Encounter>((await getDetail(id)) as Encounter)
-
-const data = {
-  noRm: 'RM21123',
-  nama: 'Ahmad Sutanto',
-  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
-  tanggalKunjungan: '23 April 2024',
-  klinik: 'Bedah',
-  tanggalLahir: '23 April 1990 (25 Tahun)',
-  jenisKelamin: 'Laki-laki',
-  jenisPembayaran: 'JKN',
-  noBilling: '223332',
-  dpjp: 'dr. Syaifullah, Sp.OT(K)',
-}
+const dataRes = await getDetail(id, { includes: 'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person'})
+const dataResBody = dataRes.body ?? null
+const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar', component: Status },
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
   { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
   {
     value: 'rehab-medical-assessment',
@@ -65,7 +56,7 @@ const tabs: TabItem[] = [
   { value: 'mcu-lab-pa', label: 'Order Lab PA' },
   { value: 'medical-action', label: 'Order Ruang Tindakan' },
   { value: 'mcu-result', label: 'Hasil Penunjang' },
-  { value: 'consultation', label: 'Konsultasi' },
+  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
   { value: 'resume', label: 'Resume' },
   { value: 'control', label: 'Surat Kontrol' },
   { value: 'screening', label: 'Skrinning MPP' },
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 4e370502..19e5d913 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppEquipmentList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/floor/list.vue b/app/components/content/floor/list.vue
index 8859d9c2..1b91af9d 100644
--- a/app/components/content/floor/list.vue
+++ b/app/components/content/floor/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppFloorList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/installation/entry.ts b/app/components/content/installation/entry.ts
new file mode 100644
index 00000000..c003a029
--- /dev/null
+++ b/app/components/content/installation/entry.ts
@@ -0,0 +1,37 @@
+import * as z from 'zod'
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih encounter class (fhir7)',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+    { value: '4', label: 'Observation', code: 'OBSENC' },
+    { value: '5', label: 'Pre-admission', code: 'PRENC' },
+    { value: '6', label: 'Short Stay', code: 'SS' },
+    { value: '7', label: 'Virtual', code: 'VR' },
+    { value: '8', label: 'Home Health', code: 'HH' },
+  ],
+}
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama instalasi harus diisi',
+    })
+    .min(3, 'Nama instalasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode instalasi harus diisi',
+    })
+    .min(3, 'Kode instalasi minimal 3 karakter'),
+
+  encounterClassCode: z
+    .string({
+      required_error: 'Kelompok encounter class harus dipilih',
+    })
+    .min(1, 'Kelompok encounter class harus dipilih'),
+})
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index fe27a4ef..31486097 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppInstallationList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
index 9dcba7be..aa277b71 100644
--- a/app/components/content/item-price/list.vue
+++ b/app/components/content/item-price/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineGroupList :data="data" />
-  </div>
+
+  <AppMedicineGroupList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
     <AppMedicineGroupEntryForm v-model="entry" />
diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
index 6660f71e..15887985 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppItemList :data="data" />
-  </div>
+
+  <AppItemList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
     <AppItemEntryForm v-model="entry" />
diff --git a/app/components/content/medical-action-src/list.vue b/app/components/content/medical-action-src/list.vue
new file mode 100644
index 00000000..c39ff4b8
--- /dev/null
+++ b/app/components/content/medical-action-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/medical-action-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MedicalActionSrcSchema, type MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medical-action-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medical-action-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medical-action-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Aksi Medis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Aksi Medis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Aksi Medis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicalActionSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Aksi Medis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicalActionSrcEntryForm
+      :schema="MedicalActionSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicalActionSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 10c82ecd..80faf1ab 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineGroupList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index dd2b66e9..9e0e5d01 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineMethodList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index 4590e891..27470776 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -138,8 +138,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/patient/detail.vue b/app/components/content/patient/detail.vue
index 0ca4cd0d..da9b2809 100644
--- a/app/components/content/patient/detail.vue
+++ b/app/components/content/patient/detail.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { withBase } from '~/models/_base'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import type { PatientEntity } from '~/models/patient'
+import type { Patient } from '~/models/patient'
 import type { Person } from '~/models/person'
 
 // Components
@@ -18,7 +18,7 @@ const props = defineProps<{
 
 // #region State & Computed
 const patient = ref(
-  withBase<PatientEntity>({
+  withBase<Patient>({
     person: {} as Person,
     personAddresses: [],
     personContacts: [],
@@ -71,13 +71,10 @@ function handleAction(type: string) {
   <Header
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 border-b-2 border-b-slate-300 pb-2 xl:mb-5"
   />
+
   <AppPatientPreview
-    :person="patient.person"
-    :person-addresses="patient.personAddresses"
-    :person-contacts="patient.personContacts"
-    :person-relatives="patient.personRelatives"
+    :patient="patient"
     @click="handleAction"
   />
 </template>
diff --git a/app/components/content/patient/entry.vue b/app/components/content/patient/entry.vue
index b0b5569e..2eed6df5 100644
--- a/app/components/content/patient/entry.vue
+++ b/app/components/content/patient/entry.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { PatientEntity, genPatientProps } from '~/models/patient'
+import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
 import { genPatient } from '~/models/patient'
 import { PatientSchema } from '~/schemas/patient.schema'
@@ -9,10 +10,28 @@ import { PersonAddressSchema } from '~/schemas/person-address.schema'
 import { PersonContactListSchema } from '~/schemas/person-contact.schema'
 import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
 import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { postPatient } from '~/services/patient.service'
+import { uploadAttachment } from '~/services/patient.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleCancelForm,
+} from '~/handlers/patient.handler'
+
+import { toast } from '~/components/pub/ui/toast'
 
 // #region Props & Emits
-const payload = ref<PatientEntity>()
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+const residentIdentityFile = ref<File>()
+const familyCardFile = ref<File>()
 
 // form related state
 const personAddressForm = ref<ExposedForm<any> | null>(null)
@@ -28,13 +47,39 @@ const personPatientForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
 // #region Lifecycle Hooks
+onMounted(() => {
+  // Initial synchronization when forms are mounted and isSameAddress is true by default
+  nextTick(() => {
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value
+    ) {
+      const currentAddressValues = personAddressForm.value.values
+      if (Object.keys(currentAddressValues).length > 0) {
+        personAddressRelativeForm.value.setValues(
+          {
+            ...personAddressRelativeForm.value.values,
+            province_code: currentAddressValues.province_code || undefined,
+            regency_code: currentAddressValues.regency_code || undefined,
+            district_code: currentAddressValues.district_code || undefined,
+            village_code: currentAddressValues.village_code || undefined,
+            postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+            address: currentAddressValues.address || undefined,
+            rt: currentAddressValues.rt || undefined,
+            rw: currentAddressValues.rw || undefined,
+          },
+          false,
+        )
+      }
+    }
+  })
+})
 // #endregion
 
 // #region Functions
-// #endregion region
-
-// #region Utilities & event handlers
-async function submitAll() {
+async function composeFormData(): Promise<Patient> {
   const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
     personPatientForm.value?.validate(),
     personAddressForm.value?.validate(),
@@ -50,7 +95,7 @@ async function submitAll() {
 
   // exit, if form errors happend during validation
   // for example: dropdown not selected
-  if (!allValid) return
+  if (!allValid) return Promise.reject('Form validation failed')
 
   const formDataRequest: genPatientProps = {
     patient: patient?.values,
@@ -62,46 +107,122 @@ async function submitAll() {
   }
 
   const formData = genPatient(formDataRequest)
-  payload.value = formData
 
-  try {
-    const result = await postPatient(formData)
-    if (result.success) {
-      console.log('Patient created successfully:', result.body)
-      // Navigate to patient list or show success message
-      await navigateTo('/client/patient')
-    } else {
-      console.error('Failed to create patient:', result)
-      // Handle error - show error message to user
+  if (patient?.values.residentIdentityFile) {
+    residentIdentityFile.value = patient?.values.residentIdentityFile
+  }
+
+  if (patient?.values.familyIdentityFile) {
+    familyCardFile.value = patient?.values.familyIdentityFile
+  }
+
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    const patient: Patient = await composeFormData()
+    let createdPatientId = 0
+
+    const response = await handleActionSave(
+      patient,
+      () => {},
+      () => {},
+      toast,
+    )
+
+    const data = (response?.body?.data ?? null) as PatientBase | null
+    if (!data) return
+    createdPatientId = data.id
+
+    if (residentIdentityFile.value) {
+      void uploadAttachment(residentIdentityFile.value, createdPatientId, 'ktp')
     }
-  } catch (error) {
-    console.error('Error creating patient:', error)
-    // Handle error - show error message to user
+    if (familyCardFile.value) {
+      void uploadAttachment(familyCardFile.value, createdPatientId, 'kk')
+    }
+
+    // If has callback provided redirect to callback with patientData
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
+      return
+    }
+
+    // Navigate to patient list or show success message
+    await navigateTo('/client/patient')
+    return
+  }
+
+  if (eventType === 'cancel') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    await navigateTo({
+      name: 'client-patient',
+    })
+    // handleCancelForm()
   }
 }
 // #endregion
 
 // #region Watchers
-// Watcher untuk sinkronisasi alamat ketika isSameAddress = '1'
+// Watcher untuk sinkronisasi initial ketika kedua form sudah ready
+watch(
+  [() => personAddressForm.value, () => personAddressRelativeForm.value],
+  ([addressForm, relativeForm]) => {
+    if (addressForm && relativeForm) {
+      // Trigger initial sync jika isSameAddress adalah true
+      nextTick(() => {
+        const isSameAddress = relativeForm.values?.isSameAddress
+        if ((isSameAddress === true || isSameAddress === '1') && addressForm.values) {
+          const currentAddressValues = addressForm.values
+          if (Object.keys(currentAddressValues).length > 0) {
+            relativeForm.setValues(
+              {
+                ...relativeForm.values,
+                province_code: currentAddressValues.province_code || undefined,
+                regency_code: currentAddressValues.regency_code || undefined,
+                district_code: currentAddressValues.district_code || undefined,
+                village_code: currentAddressValues.village_code || undefined,
+                postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+                address: currentAddressValues.address || undefined,
+                rt: currentAddressValues.rt || undefined,
+                rw: currentAddressValues.rw || undefined,
+              },
+              false,
+            )
+          }
+        }
+      })
+    }
+  },
+  { immediate: true },
+)
+
+// Watcher untuk sinkronisasi alamat ketika isSameAddress = true
 watch(
   () => personAddressForm.value?.values,
   (newAddressValues) => {
     // Cek apakah alamat KTP harus sama dengan alamat sekarang
-    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress === '1'
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
 
-    if (isSameAddress && newAddressValues && personAddressRelativeForm.value) {
+    if ((isSameAddress === true || isSameAddress === '1') && newAddressValues && personAddressRelativeForm.value) {
       // Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
       personAddressRelativeForm.value.setValues(
         {
           ...personAddressRelativeForm.value.values,
-          provinceId: newAddressValues.provinceId || '',
-          regencyId: newAddressValues.regencyId || '',
-          districtId: newAddressValues.districtId || '',
-          villageId: newAddressValues.villageId || '',
-          zipCode: newAddressValues.zipCode || '',
-          address: newAddressValues.address || '',
-          rt: newAddressValues.rt || '',
-          rw: newAddressValues.rw || '',
+          province_code: newAddressValues.province_code || undefined,
+          regency_code: newAddressValues.regency_code || undefined,
+          district_code: newAddressValues.district_code || undefined,
+          village_code: newAddressValues.village_code || undefined,
+          postalRegion_code: newAddressValues.postalRegion_code || undefined,
+          address: newAddressValues.address || undefined,
+          rt: newAddressValues.rt || undefined,
+          rw: newAddressValues.rw || undefined,
         },
         false,
       )
@@ -114,20 +235,24 @@ watch(
 watch(
   () => personAddressRelativeForm.value?.values?.isSameAddress,
   (isSameAddress) => {
-    if (isSameAddress === '1' && personAddressForm.value?.values && personAddressRelativeForm.value) {
-      // Ketika isSameAddress diubah menjadi '1', copy alamat sekarang ke alamat KTP
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value?.values
+    ) {
+      // Ketika isSameAddress diubah menjadi true, copy alamat sekarang ke alamat KTP
       const currentAddressValues = personAddressForm.value.values
       personAddressRelativeForm.value.setValues(
         {
           ...personAddressRelativeForm.value.values,
-          provinceId: currentAddressValues.provinceId || '',
-          regencyId: currentAddressValues.regencyId || '',
-          districtId: currentAddressValues.districtId || '',
-          villageId: currentAddressValues.villageId || '',
-          zipCode: currentAddressValues.zipCode || '',
-          address: currentAddressValues.address || '',
-          rt: currentAddressValues.rt || '',
-          rw: currentAddressValues.rw || '',
+          province_code: currentAddressValues.province_code || undefined,
+          regency_code: currentAddressValues.regency_code || undefined,
+          district_code: currentAddressValues.district_code || undefined,
+          village_code: currentAddressValues.village_code || undefined,
+          postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+          address: currentAddressValues.address || undefined,
+          rt: currentAddressValues.rt || undefined,
+          rw: currentAddressValues.rw || undefined,
         },
         false,
       )
@@ -143,21 +268,25 @@ watch(
     ref="personPatientForm"
     :schema="PatientSchema"
   />
+  <div class="h-6"></div>
   <AppPersonAddressEntryForm
     ref="personAddressForm"
     title="Alamat Sekarang"
     :schema="PersonAddressSchema"
   />
+  <div class="h-6"></div>
   <AppPersonAddressEntryFormRelative
     ref="personAddressRelativeForm"
     title="Alamat KTP"
     :schema="PersonAddressRelativeSchema"
   />
+  <div class="h-6"></div>
   <AppPersonFamilyParentsForm
     ref="personFamilyForm"
     title="Identitas Orang Tua"
     :schema="PersonFamiliesSchema"
   />
+  <div class="h-6"></div>
   <AppPersonContactEntryForm
     ref="personContactForm"
     title="Kontak Pasien"
@@ -171,7 +300,7 @@ watch(
   />
 
   <div class="my-2 flex justify-end py-2">
-    <Action @click="submitAll" />
+    <Action @click="handleActionClick" />
   </div>
 </template>
 
diff --git a/app/components/content/patient/list.vue b/app/components/content/patient/list.vue
index 2b73ca08..519aeb8e 100644
--- a/app/components/content/patient/list.vue
+++ b/app/components/content/patient/list.vue
@@ -48,36 +48,37 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-const summaryData = ref<Summary[]>([
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-])
+// Disable dulu, ayahab kalo diminta
+// const summaryData = ref<Summary[]>([
+//   {
+//     title: 'Total Pasien',
+//     icon: UsersRound,
+//     metric: 23,
+//     trend: 15,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Pasien Aktif',
+//     icon: UserCheck,
+//     metric: 100,
+//     trend: 9,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Kunjungan Hari Ini',
+//     icon: Calendar,
+//     metric: 52,
+//     trend: 1,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Peserta BPJS',
+//     icon: Hospital,
+//     metric: 71,
+//     trend: -3,
+//     timeframe: 'daily',
+//   },
+// ])
 // #endregion
 
 // #region Lifecycle Hooks
@@ -165,7 +166,9 @@ watch([recId, recAction], () => {
     :prep="{ ...headerPrep }"
     :ref-search-nav="refSearchNav"
   />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="summaryLoading">
         <SummaryCard
@@ -182,12 +185,14 @@ watch([recId, recAction], () => {
         />
       </template>
     </div>
-    <AppPatientList
-      :data="data"
-      :pagination-meta="paginationMeta"
-      @page-change="handlePageChange"
-    />
   </div>
+  -->
+
+  <AppPatientList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 60279a90..abe4f541 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -148,49 +148,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header
-    v-model="searchInput"
-    :prep="headerPrep"
-    :ref-search-nav="headerPrep.refSearchNav"
-    @search="handleSearch"
-    class="mb-4 xl:mb-5"
-  />
-  <List :data="data" :pagination-meta="paginationMeta" :is-loading="isLoading.isTableLoading" @page-change="handlePageChange" />
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
 
-  <!-- <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Divisi'" size="xl" prevent-outside>
-    <Entry
-      :schema="PrescriptionSchema"
-      :values="recItem"
-      :units="units"
-      :is-loading="isProcessing"
-      :is-readonly="isReadonly"
-      @submit="
-        (values: PrescriptionFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getMyList, resetForm, toast)
-            return
-          }
-          handleActionSave(values, getMyList, resetForm, toast)
-        }
-      "
-      @cancel="handleCancelForm"
-    />
-  </Dialog> -->
+  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
 
-  <!-- Record Confirmation Modal -->
-  <RecordConfirmation
-    v-model:open="isRecordConfirmationOpen"
-    action="delete"
-    :record="recItem"
-    @confirm="() => handleActionRemove(recId, getMyList, toast)"
-    @cancel=""
-  >
-    <template #default="{ record }">
-      <div class="text-sm">
-        <p><strong>ID:</strong> {{ record?.id }}</p>
-        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
-      </div>
-    </template>
-  </RecordConfirmation>
+  <AppPrescriptionEntry />
+
+  <PrescriptionItemListEntry :data=[] />
+  <div>
+    <Button>
+      Tambah
+    </Button>
+  </div>
 </template>
diff --git a/app/components/content/procedure-src/list.vue b/app/components/content/procedure-src/list.vue
new file mode 100644
index 00000000..fad041ea
--- /dev/null
+++ b/app/components/content/procedure-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/procedure-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/procedure-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/procedure-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'procedure-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'MCU Prosedur',
+  icon: 'i-lucide-clipboard-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Prosedur'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Prosedur'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppProcedureSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Prosedur'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppProcedureSrcEntryForm
+      :schema="ProcedureSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ProcedureSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/public-screen/list.vue b/app/components/content/public-screen/list.vue
index 0b380d61..10c7d039 100644
--- a/app/components/content/public-screen/list.vue
+++ b/app/components/content/public-screen/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppPublicScreenList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/room/list.vue b/app/components/content/room/list.vue
index a88c0230..1317d5b0 100644
--- a/app/components/content/room/list.vue
+++ b/app/components/content/room/list.vue
@@ -196,8 +196,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppRoomList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/satusehat/list.vue b/app/components/content/satusehat/list.vue
index 6dcbd459..72cff7dd 100644
--- a/app/components/content/satusehat/list.vue
+++ b/app/components/content/satusehat/list.vue
@@ -108,10 +108,12 @@ const activeTabFilter = computed({
 <template>
   <div class="rounded-md border p-4">
     <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
+
     <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
       <PubMyUiServiceStatus v-bind="service" />
       <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
     </div>
+
     <div class="rounded-md border p-4">
       <h2 class="text-md py-2 font-semibold">FHIR Resource</h2>
       <Tabs v-model="activeTabFilter">
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
index e1d8373a..a240a65f 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -60,7 +60,6 @@ provide('table_data_loader', isLoading)
 
 <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>
+
+  <AssesmentFunctionList :data="data" />
 </template>
diff --git a/app/components/content/specialist-intern/list.vue b/app/components/content/specialist-intern/list.vue
index b004cc92..e2df8e3e 100644
--- a/app/components/content/specialist-intern/list.vue
+++ b/app/components/content/specialist-intern/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/specialist/entry.ts b/app/components/content/specialist/entry.ts
new file mode 100644
index 00000000..c89302c2
--- /dev/null
+++ b/app/components/content/specialist/entry.ts
@@ -0,0 +1,95 @@
+import * as z from 'zod'
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama spesialisasi harus diisi',
+    })
+    .min(3, 'Nama spesialisasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode spesialisasi harus diisi',
+    })
+    .min(3, 'Kode spesialisasi minimal 3 karakter'),
+
+  installationId: z
+    .string({
+      required_error: 'Instalasi harus dipilih',
+    })
+    .min(1, 'Instalasi harus dipilih'),
+
+  unitId: z
+    .string({
+      required_error: 'Unit harus dipilih',
+    })
+    .min(1, 'Unit harus dipilih'),
+})
+
+// Unit mapping berdasarkan installation
+export const installationUnitMapping: Record<string, string[]> = {
+  '1': ['1', '3', '5'],
+  '2': ['2', '4', '6'],
+  '3': ['7', '8', '9', '10', '11'],
+}
+
+export const unitConf = {
+  msg: {
+    placeholder: '---pilih unit',
+    search: 'kode, nama unit',
+    empty: 'unit tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
+    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
+    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
+    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
+    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
+    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
+    { value: '10', label: 'Instalasi SDM', code: 'HR' },
+    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
+    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
+    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
+    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
+    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
+    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
+    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
+    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
+    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
+    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
+  ],
+}
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih instalasi',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+  ],
+}
+
+// Helper function untuk filter unit berdasarkan installation
+export function getFilteredUnits(installationId: string) {
+  if (!installationId || !installationUnitMapping[installationId]) {
+    return []
+  }
+
+  const allowedUnitIds = installationUnitMapping[installationId]
+  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
+}
+
+// Helper function untuk membuat unit config yang ter-filter
+export function createFilteredUnitConf(installationId: string) {
+  return {
+    ...unitConf,
+    items: getFilteredUnits(installationId),
+  }
+}
diff --git a/app/components/content/specialist/list-prev.vue b/app/components/content/specialist/list-prev.vue
new file mode 100644
index 00000000..9ed71016
--- /dev/null
+++ b/app/components/content/specialist/list-prev.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { createFilteredUnitConf, installationConf, schemaConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// State untuk tracking installation yang dipilih di form
+const selectedInstallationId = ref<string>('')
+
+// Computed untuk filtered unit berdasarkan installation yang dipilih
+const filteredUnitConf = computed(() => {
+  if (!selectedInstallationId.value) {
+    return { ...unitConf, items: [] }
+  }
+  return createFilteredUnitConf(selectedInstallationId.value)
+})
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSpecialistList,
+} = usePaginatedList({
+  fetchFn: fetchSpecialistData,
+  entityName: 'specialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Specialist',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Specialist',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+async function fetchSpecialistData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/Installation/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getSpecialistList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  // Reset installation selection ketika form dibatal
+  selectedInstallationId.value = ''
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+function onInstallationChanged(installationId: string) {
+  // Update local state untuk trigger re-render filtered units
+  selectedInstallationId.value = installationId
+
+  // The filteredUnitConf computed will automatically update
+  // based on the new selectedInstallationId value
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/Installation', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Reset installation selection ketika form berhasil submit
+    selectedInstallationId.value = ''
+
+    // Refresh data after successful submission
+    await getSpecialistList()
+
+    // TODO: Show success message
+    console.log('Installation created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Note: Installation change logic is now handled by the entry-form component
+// through the onInstallationChanged event handler
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+    <AppSpecialistEntryFormPrev
+      :installation="installationConf"
+      :unit="filteredUnitConf"
+      :schema="schemaConf"
+      :disabled-unit="!selectedInstallationId"
+      :initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
+      @submit="onSubmitForm"
+      @cancel="onCancelForm"
+      @installation-changed="onInstallationChanged"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 0a16e10e..9bbf755f 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/subspecialist/entry.ts b/app/components/content/subspecialist/entry.ts
new file mode 100644
index 00000000..5a93847d
--- /dev/null
+++ b/app/components/content/subspecialist/entry.ts
@@ -0,0 +1,98 @@
+import * as z from 'zod'
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama spesialisasi harus diisi',
+    })
+    .min(3, 'Nama spesialisasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode spesialisasi harus diisi',
+    })
+    .min(3, 'Kode spesialisasi minimal 3 karakter'),
+
+  installationId: z
+    .string({
+      required_error: 'Instalasi harus dipilih',
+    })
+    .min(1, 'Instalasi harus dipilih'),
+
+  unitId: z
+    .string({
+      required_error: 'Unit harus dipilih',
+    })
+    .min(1, 'Unit harus dipilih'),
+  specialistId: z
+    .string({
+      required_error: 'Specialist harus dipilih',
+    })
+    .min(1, 'Specialist harus dipilih'),
+})
+
+// Unit mapping berdasarkan installation
+export const installationUnitMapping: Record<string, string[]> = {
+  '1': ['1', '3'],
+  '2': ['2', '3'],
+  '3': ['1', '2', '3'],
+}
+
+export const unitConf = {
+  msg: {
+    placeholder: '---pilih unit',
+    search: 'kode, nama unit',
+    empty: 'unit tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+  ],
+}
+
+export const specialistConf = {
+  msg: {
+    placeholder: '---pilih specialist',
+    search: 'kode, nama specialist',
+    empty: 'specialist tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Spesialis Jantung', code: 'CARD' },
+    { value: '2', label: 'Spesialis Mata', code: 'OPHT' },
+    { value: '3', label: 'Spesialis Bedah', code: 'SURG' },
+    { value: '4', label: 'Spesialis Anak', code: 'PEDI' },
+    { value: '5', label: 'Spesialis Kandungan', code: 'OBGY' },
+  ],
+}
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih instalasi',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+  ],
+}
+
+// Helper function untuk filter unit berdasarkan installation
+export function getFilteredUnits(installationId: string) {
+  if (!installationId || !installationUnitMapping[installationId]) {
+    return []
+  }
+
+  const allowedUnitIds = installationUnitMapping[installationId]
+  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
+}
+
+// Helper function untuk membuat unit config yang ter-filter
+export function createFilteredUnitConf(installationId: string) {
+  return {
+    ...unitConf,
+    items: getFilteredUnits(installationId),
+  }
+}
diff --git a/app/components/content/subspecialist/list-prev.vue b/app/components/content/subspecialist/list-prev.vue
new file mode 100644
index 00000000..81f59399
--- /dev/null
+++ b/app/components/content/subspecialist/list-prev.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppSubspecialistEntryForm from '~/components/app/subspecialist/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { createFilteredUnitConf, installationConf, schemaConf, specialistConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// State untuk tracking installation, unit, dan specialist yang dipilih di form
+const selectedInstallationId = ref<string>('')
+const selectedUnitId = ref<string>('')
+
+// Computed untuk filtered unit berdasarkan installation yang dipilih
+const filteredUnitConf = computed(() => {
+  if (!selectedInstallationId.value) {
+    return { ...unitConf, items: [] }
+  }
+  return createFilteredUnitConf(selectedInstallationId.value)
+})
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSubSpecialistList,
+} = usePaginatedList({
+  fetchFn: fetchSubSpecialistData,
+  entityName: 'subspecialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sub Specialist',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Sub Specialist',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+async function fetchSubSpecialistData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/subspecialist/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getSubSpecialistList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  selectedInstallationId.value = ''
+  selectedUnitId.value = ''
+
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+function onInstallationChanged(installationId: string) {
+  selectedInstallationId.value = installationId
+}
+
+function onUnitChanged(unitId: string) {
+  selectedUnitId.value = unitId
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/subspecialist', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Reset selection ketika form berhasil submit
+    selectedInstallationId.value = ''
+    selectedUnitId.value = ''
+
+    // Refresh data after successful submission
+    await getSubSpecialistList()
+
+    // TODO: Show success message
+    console.log('Sub Specialist created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppSubspecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+    <AppSubspecialistEntryFormPrev
+      :installation="installationConf"
+      :unit="filteredUnitConf"
+      :specialist="specialistConf"
+      :schema="schemaConf"
+      :initial-values="{ name: '', code: '', installationId: '', unitId: '', specialistId: '' }"
+      @submit="onSubmitForm"
+      @cancel="onCancelForm"
+      @installation-changed="onInstallationChanged"
+      @unit-changed="onUnitChanged"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <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>
+        <p v-if="record?.specialist"><strong>Specialist:</strong> {{ record.specialist?.name }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index c6750d13..e2c6db52 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSubSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index a81c041b..da22a976 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -134,8 +134,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppToolsList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/unit/entry.ts b/app/components/content/unit/entry.ts
new file mode 100644
index 00000000..bf85a0ed
--- /dev/null
+++ b/app/components/content/unit/entry.ts
@@ -0,0 +1,63 @@
+import * as z from 'zod'
+
+export const unitConf = {
+  msg: {
+    placeholder: '--- pilih instalasi',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
+    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
+    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
+    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
+    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
+    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
+    { value: '10', label: 'Instalasi SDM', code: 'HR' },
+    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
+    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
+    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
+    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
+    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
+    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
+    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
+    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
+    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
+    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
+  ],
+}
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama unit harus diisi',
+    })
+    .min(1, 'Nama unit harus diisi'),
+
+  code: z
+    .string({
+      required_error: 'Kode unit harus diisi',
+    })
+    .min(1, 'Kode unit harus diisi'),
+  parentId: z.preprocess(
+    (input: unknown) => {
+      if (typeof input === 'string') {
+        // Handle empty string case
+        if (input.trim() === '') {
+          return 0
+        }
+        return Number(input)
+      }
+
+      return input
+    },
+    z
+      .number({
+        required_error: 'Instalasi induk harus dipilih',
+      })
+      .refine((num) => num > 0, 'Instalasi induk harus dipilih'),
+  ),
+})
diff --git a/app/components/content/unit/list-prev.vue b/app/components/content/unit/list-prev.vue
new file mode 100644
index 00000000..e5498f25
--- /dev/null
+++ b/app/components/content/unit/list-prev.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { schemaConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+async function fetchUnitData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUnitList,
+} = usePaginatedList({
+  fetchFn: fetchUnitData,
+  entityName: 'unit',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Unit',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/unit/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/unit', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Unit created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Unit" size="lg" prevent-outside>
+    <AppUnitEntryFormPrev
+      :unit="unitConf" :schema="schemaConf" :initial-values="{ name: '', code: '', parentId: '' }"
+      @submit="onSubmitForm" @cancel="onCancelForm"
+/>
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+>
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 44d7c115..03edd231 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppUnitList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
index bc0226ab..15498b15 100644
--- a/app/components/content/uom/list.vue
+++ b/app/components/content/uom/list.vue
@@ -126,15 +126,13 @@ onMounted(async () => {
       :prep="headerPrep"
       :ref-search-nav="headerPrep.refSearchNav"
       @search="handleSearch"
-      class="mb-4 xl:mb-5"
     />
-    <div class="rounded-md border p-4">
-      <AppUomList
-        :data="data"
-        :pagination-meta="paginationMeta"
-        @page-change="handlePageChange"
-      />
-    </div>
+
+    <AppUomList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
diff --git a/app/components/content/user/list.vue b/app/components/content/user/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/user/list.vue
+++ b/app/components/content/user/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/warehouse/list.vue b/app/components/content/warehouse/list.vue
index f776d2df..a17ae9bb 100644
--- a/app/components/content/warehouse/list.vue
+++ b/app/components/content/warehouse/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppWarehouseList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index 9b92e619..fb06a4c7 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -37,7 +37,7 @@ const openCollapsible = ref(false)
               <SidebarMenuSubButton as-child>
                 <NuxtLink
                   :to="subItem.link"
-                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm 2xl:!text-base"
+                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
                   active-class="bg-primary text-white"
                   @click="setOpenMobile(false)"
                 >
diff --git a/app/components/pub/my-ui/combobox/combobox-paginated.vue b/app/components/pub/my-ui/combobox/combobox-paginated.vue
new file mode 100644
index 00000000..74b69ef7
--- /dev/null
+++ b/app/components/pub/my-ui/combobox/combobox-paginated.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+import { type Item } from './index'
+
+const props = defineProps<{
+  id?: string
+  modelValue?: string
+  items: Item[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyMessage?: string
+  class?: string
+  isDisabled?: boolean
+  page?: number
+  totalPage?: number
+  hasNext?: boolean
+  hasPrev?: boolean
+  isLoading?: boolean
+  searchText?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:searchText': [value: string]
+  'page-change': [page: number]
+  next: []
+  prev: []
+}>()
+
+const open = ref(false)
+const internalSearchText = ref(props.searchText || '')
+
+// Keep internal search text synced with props
+watch(
+  () => props.searchText,
+  (val) => {
+    if (val !== internalSearchText.value) internalSearchText.value = val || ''
+  },
+)
+
+const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
+const displayText = computed(() => {
+  if (selectedItem.value?.label) return selectedItem.value.label
+  return props.placeholder || 'Pilih item'
+})
+
+const searchableItems = computed(() => {
+  const itemsWithSearch = props.items.map((item) => ({
+    ...item,
+    searchValue: `${item.code || ''} ${item.label}`.trim(),
+    isSelected: item.value === props.modelValue,
+  }))
+
+  return itemsWithSearch.sort((a, b) => {
+    const aPriority = a.priority ?? 0
+    const bPriority = b.priority ?? 0
+    if (aPriority !== bPriority) return bPriority - aPriority
+    if (a.isSelected && !b.isSelected) return -1
+    if (!a.isSelected && b.isSelected) return 1
+    return a.label.localeCompare(b.label)
+  })
+})
+
+function onSelect(item: Item) {
+  emit('update:modelValue', item.value)
+  open.value = false
+}
+
+function onSearchInput(value: string) {
+  console.log('[ComboboxPaginated] emit update:searchText', value)
+  internalSearchText.value = value
+  emit('update:searchText', value)
+}
+
+function handlePrev() {
+  if (props.hasPrev) emit('prev')
+}
+
+function handleNext() {
+  if (props.hasNext) emit('next')
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        :id="props.id"
+        :disabled="props.isDisabled"
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        :aria-controls="`${props.id}-list`"
+        :aria-describedby="`${props.id}-search`"
+        :class="
+          cn(
+            'h-8 w-full justify-between rounded-md border px-3 font-normal focus:outline-none focus:ring-1 focus:ring-black dark:!border-slate-400 dark:focus:ring-white md:text-xs 2xl:h-9 2xl:text-sm',
+            {
+              'cursor-not-allowed border-gray-300 bg-gray-100 text-gray-500 opacity-50': props.isDisabled,
+              'border-gray-400 bg-white text-black hover:bg-gray-50 dark:border-gray-600 dark:bg-slate-950 dark:text-white dark:hover:bg-gray-700':
+                !props.isDisabled,
+              'text-gray-400 dark:text-gray-500': !props.modelValue && !props.isDisabled,
+            },
+            props.class,
+          )
+        "
+      >
+        {{ displayText }}
+        <Icon
+          name="i-lucide-chevrons-up-down"
+          :class="
+            cn('ml-2 h-4 w-4 shrink-0', {
+              'opacity-30': props.isDisabled,
+              'text-gray-500 opacity-50 dark:text-gray-300': !props.isDisabled,
+            })
+          "
+        />
+      </Button>
+    </PopoverTrigger>
+
+    <PopoverContent
+      class="w-[var(--radix-popover-trigger-width)] border border-gray-200 bg-white p-0 dark:border-gray-700 dark:bg-gray-800"
+    >
+      <Command class="bg-white dark:bg-gray-800">
+        <CommandInput
+          :id="`${props.id}-search`"
+          class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+          :placeholder="searchPlaceholder || 'Cari...'"
+          v-model="internalSearchText"
+          @input="onSearchInput(($event.target as HTMLInputElement).value)"
+          :aria-label="`Cari ${displayText}`"
+        />
+
+        <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+          {{ emptyMessage || 'Item tidak ditemukan.' }}
+        </CommandEmpty>
+
+        <CommandList
+          :id="`${props.id}-list`"
+          role="listbox"
+          class="max-h-60 overflow-auto"
+        >
+          <CommandGroup>
+            <CommandItem
+              v-for="item in searchableItems"
+              :key="item.value"
+              :value="item.value"
+              :class="
+                cn(
+                  'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 md:text-xs xl:text-sm',
+                  'text-black focus:outline-none dark:text-white',
+                  'hover:bg-primary hover:text-white focus:bg-primary focus:text-white',
+                  'data-[highlighted]:bg-primary data-[highlighted]:text-white',
+                )
+              "
+              @select="onSelect(item)"
+            >
+              <div class="flex w-full items-center justify-between">
+                <span>{{ item.label }}</span>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="item.code"
+                    class="text-xs text-muted-foreground"
+                  >
+                    {{ item.code }}
+                  </span>
+                  <Icon
+                    name="i-lucide-check"
+                    :class="cn('h-4 w-4', props.modelValue === item.value ? 'opacity-100' : 'opacity-0')"
+                  />
+                </div>
+              </div>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+
+        <div class="flex items-center justify-between border-t border-gray-200 p-2 text-xs dark:border-gray-700">
+          <div class="flex items-center gap-2">
+            <Icon
+              v-if="props.isLoading"
+              name="i-lucide-loader-2"
+              class="h-3 w-3 animate-spin"
+            />
+            <span v-else>{{ props.page || 1 }} / {{ props.totalPage || 1 }}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              size="sm"
+              variant="ghost"
+              :disabled="!props.hasPrev || props.isDisabled"
+              @click="handlePrev"
+            >
+              Prev
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              :disabled="!props.hasNext || props.isDisabled"
+              @click="handleNext"
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index 4c0c5bb5..23505393 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -23,7 +23,7 @@ const open = ref(false)
 const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
 
 const displayText = computed(() => {
-  console.log(selectedItem);
+  console.log(selectedItem)
   if (selectedItem.value?.label) {
     return selectedItem.value.label
   }
@@ -31,7 +31,7 @@ const displayText = computed(() => {
 })
 
 watch(props, () => {
-  console.log(props.modelValue);
+  console.log(props.modelValue)
 })
 
 const searchableItems = computed(() => {
@@ -74,10 +74,11 @@ function onSelect(item: Item) {
         :aria-describedby="`${props.id}-search`"
         :class="
           cn(
-            'w-full justify-between border dark:!border-slate-400 h-8 2xl:h-9 md:text-xs 2xl:text-sm font-normal rounded-md px-3 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+            'h-8 w-full justify-between rounded-md border px-3 font-normal focus:outline-none focus:ring-1 focus:ring-black dark:!border-slate-400 dark:focus:ring-white md:text-xs 2xl:h-9 2xl:text-sm',
             {
-              'cursor-not-allowed bg-gray-100 opacity-50 border-gray-300 text-gray-500': props.isDisabled,
-              'bg-white text-black dark:bg-slate-950 dark:text-white dark:border-gray-600 border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700': !props.isDisabled,
+              'cursor-not-allowed border-gray-300 bg-gray-100 text-gray-500 opacity-50': props.isDisabled,
+              'border-gray-400 bg-white text-black hover:bg-gray-50 dark:border-gray-600 dark:bg-slate-950 dark:text-white dark:hover:bg-gray-700':
+                !props.isDisabled,
               'text-gray-400 dark:text-gray-500': !modelValue && !props.isDisabled,
             },
             props.class,
@@ -87,22 +88,26 @@ function onSelect(item: Item) {
         {{ displayText }}
         <Icon
           name="i-lucide-chevrons-up-down"
-          :class="cn('ml-2 h-4 w-4 shrink-0', {
-            'opacity-30': props.isDisabled,
-            'opacity-50 text-gray-500 dark:text-gray-300': !props.isDisabled
-          })"
+          :class="
+            cn('ml-2 h-4 w-4 shrink-0', {
+              'opacity-30': props.isDisabled,
+              'text-gray-500 opacity-50 dark:text-gray-300': !props.isDisabled,
+            })
+          "
         />
       </Button>
     </PopoverTrigger>
-    <PopoverContent class="w-[var(--radix-popover-trigger-width)] p-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+    <PopoverContent
+      class="w-[var(--radix-popover-trigger-width)] border border-gray-200 bg-white p-0 dark:border-gray-700 dark:bg-gray-800"
+    >
       <Command class="bg-white dark:bg-gray-800">
         <CommandInput
           :id="`${props.id}-search`"
-          class="h-9 bg-white dark:bg-gray-800 text-black dark:text-white border-0 border-b border-gray-200 dark:border-gray-700 focus:ring-0"
+          class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
           :placeholder="searchPlaceholder || 'Cari...'"
           :aria-label="`Cari ${displayText}`"
         />
-        <CommandEmpty class="text-gray-500 dark:text-gray-400 py-6 text-center text-sm">
+        <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
           {{ emptyMessage || 'Item tidak ditemukan.' }}
         </CommandEmpty>
         <CommandList
@@ -118,7 +123,7 @@ function onSelect(item: Item) {
               :class="
                 cn(
                   'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 md:text-xs xl:text-sm',
-                  'focus:outline-none text-black dark:text-white',
+                  'text-black focus:outline-none dark:text-white',
                   'hover:bg-primary hover:text-white focus:bg-primary focus:text-white',
                   'data-[highlighted]:bg-primary data-[highlighted]:text-white',
                 )
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 c0df12a9..9d88ffee 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -1,22 +1,11 @@
 <script setup lang="ts">
-import type { DataTableLoader } from './type'
-import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+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'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
-const props = defineProps<{
-  skeletonSize?: number
-  rows: unknown[]
-  cols: Col[]
-  header: Th[][]
-  keys: string[]
-  funcParsed?: RecStrFuncUnknown
-  funcHtml?: RecStrFuncUnknown
-  funcComponent?: RecStrFuncComponent
-  selectMode?: 'single' | 'multiple'
-  modelValue?: any[] | any
-  class?: string
-}>()
+const props = defineProps<Config & { rows: unknown[] }>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', val: any[] | any): void
@@ -45,6 +34,24 @@ function toggleSelection(row: any) {
   }
 }
 
+function deepFetch(data: Record<string, any>, key: string): string {
+  let result = '';
+  const keys = key.split('.')
+  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];
+      } else {
+        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+      }
+    }
+  }
+  return result;
+}
+
+
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -62,21 +69,21 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 </script>
 
 <template>
-  <Table :class="class">
-    <TableHeader class="bg-gray-50 dark:bg-gray-800">
-      <TableRow>
+  <Table>
+    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
+      <TableRow v-for="(hr, hrIdx) in headers">
         <TableHead
-          v-for="(h, idx) in header[0]"
+          v-for="(th, idx) in headers[hrIdx]"
           :key="`head-${idx}`"
-          class="border"
+          :class="`border ${th.classVal || ''}`"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
         >
-          {{ h.label }}
+          {{ th.label }}
         </TableHead>
       </TableRow>
     </TableHeader>
 
-    <TableBody v-if="loader.isTableLoading">
+    <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">
@@ -119,16 +126,16 @@ function handleActionCellClick(event: Event, _cellRef: string) {
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
           <!-- existing cell renderer -->
           <component
-            :is="funcComponent?.[key]?.(row, rowIndex).component"
-            v-if="funcComponent?.[key]"
+            :is="components?.[key]?.(row, rowIndex).component"
+            v-if="components?.[key]"
             :rec="row"
             :idx="rowIndex"
-            v-bind="funcComponent[key]?.(row, rowIndex).props"
+            v-bind="components[key]?.(row, rowIndex).props"
           />
           <template v-else>
-            <div v-if="funcHtml?.[key]" v-html="funcHtml?.[key]?.(row, rowIndex)"></div>
+            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
             <template v-else>
-              {{ funcParsed?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
             </template>
           </template>
         </TableCell>
diff --git a/app/components/pub/my-ui/data-table/index.ts b/app/components/pub/my-ui/data-table/index.ts
new file mode 100644
index 00000000..69a90dbc
--- /dev/null
+++ b/app/components/pub/my-ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export * from './type'
+
+export { default as DataTable } from './data-table.vue'
diff --git a/app/components/pub/my-ui/data-table/type.ts b/app/components/pub/my-ui/data-table/type.ts
index 019bb037..d7e7f611 100644
--- a/app/components/pub/my-ui/data-table/type.ts
+++ b/app/components/pub/my-ui/data-table/type.ts
@@ -1,3 +1,59 @@
+export type ComponentType = Component
+
+export interface Col {
+  span?: number
+  classVal?: string
+  style?: string
+  width?: number // specific for width
+  widthUnit?: string // specific for width
+}
+
+export interface Th {
+  label: string
+  colSpan?: number
+  rowSpan?: number
+  classVal?: string
+  childClassVal?: string
+  style?: string
+  childStyle?: string
+  hideOnSm?: boolean
+}
+
+export interface KeyLabel {
+  key: string
+  label: string
+}
+
+export interface RecComponent {
+  idx?: number
+  rec: object
+  props?: any
+  component: ComponentType
+}
+
+export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
+export type FuncComponent = (rec: unknown, idx: number) => RecComponent
+export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
+export type RecStrFuncComponent = Record<string, FuncComponent>
+
+export interface KeyNames {
+  key: string
+  label: string
+}
+
+export type Config = {
+  headers?: Th[][]
+  cols: Col[]
+  keys: string[]
+  delKeyNames?: KeyLabel[]
+  parses?: RecStrFuncUnknown
+  components?: RecStrFuncComponent
+  htmls?: RecStrFuncUnknown
+  skeletonSize?: number
+  selectMode?: 'single' | 'multiple'
+  modelValue?: any[] | any
+}
+
 export interface DataTableLoader {
   isTableLoading: boolean
   [key: string]: boolean
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index 7c63d991..c0d283de 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -9,32 +9,6 @@ export interface ListItemDto {
 
 export type ComponentType = Component
 
-export interface RecComponent {
-  idx?: number
-  rec: object
-  props?: any
-  component: ComponentType
-}
-
-export interface Col {
-  span?: number
-  classVal?: string
-  style?: string
-  width?: number // specific for width
-  widthUnit?: string // specific for width
-}
-
-export interface Th {
-  label: string
-  colSpan?: number
-  rowSpan?: number
-  classVal?: string
-  childClassVal?: string
-  style?: string
-  childStyle?: string
-  hideOnSm?: boolean
-}
-
 export interface ButtonNav {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
   classVal?: string
@@ -82,10 +56,6 @@ export interface KeyLabel {
   key: string
   label: string
 }
-export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
-export type FuncComponent = (rec: unknown, idx: number) => RecComponent
-export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
-export type RecStrFuncComponent = Record<string, FuncComponent>
 
 export interface KeyNames {
   key: string
@@ -107,3 +77,8 @@ export const ActionEvents = {
   showDetail: 'showDetail',
   showProcess: 'showProcess',
 }
+
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}
diff --git a/app/components/pub/my-ui/datepicker/datepicker-single.vue b/app/components/pub/my-ui/datepicker/datepicker-single.vue
index 5a13117f..73f748ab 100644
--- a/app/components/pub/my-ui/datepicker/datepicker-single.vue
+++ b/app/components/pub/my-ui/datepicker/datepicker-single.vue
@@ -41,11 +41,11 @@ onMounted(() => {
   <div class="flex flex-col space-y-2">
     <Popover>
       <PopoverTrigger as-child>
-        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
+        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right w-full h-8 2xl:h-9">
           <div class="flex justify-between items-center w-full">
             <p v-if="date">{{ format(date, 'PPP', { locale: localeID }) }}</p>
-            <p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
-            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+            <p v-else class="text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
+            <Icon name="i-lucide-calendar"/>
           </div>
         </Button>
       </PopoverTrigger>
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index 165a6661..4ff05d4c 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -30,7 +30,7 @@ const getLabelSizeIdx = (size: string) => {
 const settingClass = computed(() => {
   const breakPointIdx = getBreakpointIdx(props.gridPoint)
   let cls = breakpoints[breakPointIdx]
-  cls += ' gap-x-4 xl:gap-x-5 gap-y-2 xl:gap-y-3 ' + [
+  cls += ' gap-x-4 2xl:gap-x-5 ' + [
     'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
     'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
   ][props.colCount - 1]
@@ -44,7 +44,7 @@ const settingClass = computed(() => {
     ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
   ][breakPointIdx]
   if (props.cellFlex) {
-    cls += ' ' + [
+    cls += ' gap-y-2 2xl:gap-y-3 ' + [
       '[&_.cell]:flex',
       '[&_.cell]:sm:flex',
       '[&_.cell]:md:flex',
@@ -60,11 +60,11 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' [&_.label]:pb-1 [&_.label]:!pt-0 ';
+    cls += ' gap-y-4 2xl:gap-y-5 [&_.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]:text-xs [&_textarea]:2xl:!text-sm '
-  cls += '[&_label]:text-xs [&_label]:2xl:!text-sm'
+  cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
+  cls += '[&_label]:md:text-xs [&_label]:md:text-xs [&_label]:2xl:!text-sm'
   return cls
 })
 </script>
diff --git a/app/components/pub/my-ui/doc-entry/field.vue b/app/components/pub/my-ui/doc-entry/field.vue
index 42818744..adca2985 100644
--- a/app/components/pub/my-ui/doc-entry/field.vue
+++ b/app/components/pub/my-ui/doc-entry/field.vue
@@ -9,6 +9,6 @@ const props = defineProps({
 <template>
   <div :class="`field ${props.defaultClass} ${props.class}`">
     <slot />
-    <div v-if="props.errMessage" class="mt-1 md:text-xs 2xl:text-sm font-medium text-red-500">{{ props.errMessage }}</div>
+    <div v-if="props.errMessage" class="mt-1 md:!text-xs 2xl:!text-sm font-medium text-red-500">{{ props.errMessage }}</div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/form/file-field.vue b/app/components/pub/my-ui/form/file-field.vue
new file mode 100644
index 00000000..bc6a86c9
--- /dev/null
+++ b/app/components/pub/my-ui/form/file-field.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label?: string
+  placeholder?: string
+  hint?: string
+  modelValue?: File | null
+  accept?: string[]
+  maxSizeMb?: number
+  errors?: FormErrors
+  class?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  icons?: string
+}>()
+
+const hintMsg = computed(() => {
+  if (props.hint) return props.hint
+  if (props.accept) {
+    return `${props.accept.map((ext) => '.' + ext.replace(/^\./, '')).join(', ')}, maksimal ${props.maxSizeMb} MB`
+  }
+  return 'Gunakan file yang sesuai'
+})
+
+async function onFileChange(event: Event, handleChange: (value: any) => void) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+
+  handleChange(file)
+}
+</script>
+
+<template>
+  <DE.Cell>
+    <DE.Label
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }} ({{ hintMsg }})
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField, handleChange }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl class="flex flex-col">
+            <Input
+              @change="onFileChange($event, handleChange)"
+              type="file"
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index baa4b261..aeb4a4af 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -6,12 +6,15 @@ import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName: string
   placeholder: string
   label: string
   errors?: FormErrors
   class?: string
+  colSpan?: number
   numericOnly?: boolean
   maxLength?: number
   isRequired?: boolean
@@ -42,15 +45,15 @@ function handleInput(event: Event) {
 </script>
 
 <template>
-  <FieldGroup>
-    <Label
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
     >
@@ -77,6 +80,6 @@ function handleInput(event: Event) {
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/pub/my-ui/form/label.vue b/app/components/pub/my-ui/form/label.vue
index 74312222..c833dad8 100644
--- a/app/components/pub/my-ui/form/label.vue
+++ b/app/components/pub/my-ui/form/label.vue
@@ -46,7 +46,7 @@ const wrapperClass = computed(() => [
   props.stacked ? '' : positionWrapMap[props.position],
 ])
 
-const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-normal' : positionChildMap[props.position]])
+const labelClass = computed(() => [props.stacked ? 'block mb-1 font-normal' : positionChildMap[props.position]])
 </script>
 
 <template>
diff --git a/app/components/pub/my-ui/form/select.vue b/app/components/pub/my-ui/form/select.vue
index 189f112a..0cfc926b 100644
--- a/app/components/pub/my-ui/form/select.vue
+++ b/app/components/pub/my-ui/form/select.vue
@@ -10,7 +10,7 @@ import SelectTrigger from '~/components/pub/ui/select/SelectTrigger.vue'
 import SelectValue from '~/components/pub/ui/select/SelectValue.vue'
 import { cn } from '~/lib/utils'
 
-interface Item {
+export interface SelectItem {
   value: string
   label: string
   code?: string
@@ -19,7 +19,7 @@ interface Item {
 
 const props = defineProps<{
   modelValue?: string
-  items: Item[]
+  items: SelectItem[]
   placeholder?: string
   label?: string
   separator?: boolean
@@ -116,7 +116,7 @@ watch(
     <SelectTrigger
       :class="
         cn(
-          'rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+          'rounded-md focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
           {
             'cursor-not-allowed bg-gray-100 opacity-50': isDisabled,
             'bg-white text-black dark:bg-gray-800 dark:text-white': !isDisabled,
@@ -132,7 +132,7 @@ watch(
       <SelectValue
         :placeholder="placeholder || 'Pilih item'"
         :class="
-          cn('text-sm', {
+          cn('', {
             'text-gray-400': !props.modelValue,
             'text-black dark:text-white': props.modelValue,
             'text-gray-500': isDisabled,
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
index 3e017f72..01b1ab55 100644
--- a/app/components/pub/my-ui/nav-header/filter.vue
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -48,7 +48,7 @@ function onFilterClick() {
 
 <template>
   <header>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
       <div class="relative w-64">
         <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
         <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index e7a48d03..63535847 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -24,14 +24,14 @@ function btnClick() {
 <template>
   <header>
     <div
-      class="flex items-center justify-between"
+      class="flex items-center justify-between mb-4 2xl:mb-5"
       :class="cn('', props.class)"
     >
       <div class="flex items-center">
-        <div class="font-semibold text-gray-900 md:text-base xl:text-lg">
+        <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
           <Icon
             :name="props.prep.icon!"
-            class="mr-2 size-4 align-middle md:size-6"
+            class="mr-2 align-middle md:size-6"
           />
           {{ props.prep.title }}
         </div>
@@ -44,7 +44,6 @@ function btnClick() {
           <Input
             type="text"
             placeholder="Search"
-            class="sm:text-sm"
             @click="emitSearchNavClick"
             @input="onInput"
           />
@@ -59,7 +58,7 @@ function btnClick() {
           >
             <Icon
               name="i-lucide-plus"
-              class="mr-2 h-4 w-4 align-middle"
+              class="align-middle"
             />
             {{ prep.addNav.label }}
           </Button>
@@ -67,4 +66,5 @@ function btnClick() {
       </div>
     </div>
   </header>
+  <Separator class="my-4 xl:my-5" />
 </template>
diff --git a/app/components/pub/ui/badge/index.ts b/app/components/pub/ui/badge/index.ts
index 4f3e6d83..1ada7a61 100644
--- a/app/components/pub/ui/badge/index.ts
+++ b/app/components/pub/ui/badge/index.ts
@@ -3,19 +3,31 @@ import { cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
+export type Variants = | 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline'
+
+const variants: Record<Variants, string> = {
+  default:
+    'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+  secondary:
+    'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  fresh:
+    'border-transparent bg-teal-400 text-primary-foreground shadow hover:bg-teal-400/80',
+  positive:
+    'border-transparent bg-sky-400 text-primary-foreground shadow hover:bg-sky-400/80',
+  negative:
+    'border-transparent bg-neutral-400 text-destructive-foreground shadow hover:bg-neutral-400/80',
+  warning:
+    'border-transparent bg-orange-400 text-destructive-foreground shadow hover:bg-orange-400/80',
+  destructive:
+    'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+  outline: 'text-foreground',
+}
+
 export const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
+      variant: variants,
     },
     defaultVariants: {
       variant: 'default',
diff --git a/app/components/pub/ui/dialog/DialogContent.vue b/app/components/pub/ui/dialog/DialogContent.vue
index a59a0234..5e9e8538 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-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-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',
           props.class,
         )"
     >
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
       >
-        <X class="h-4 w-4" />
+        <X />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/app/components/pub/ui/dialog/DialogHeader.vue b/app/components/pub/ui/dialog/DialogHeader.vue
index 8948edca..176e9c7e 100644
--- a/app/components/pub/ui/dialog/DialogHeader.vue
+++ b/app/components/pub/ui/dialog/DialogHeader.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left mb-2 2xl:mb-3', props.class)"
   >
     <slot />
   </div>
diff --git a/app/components/pub/ui/dialog/DialogTitle.vue b/app/components/pub/ui/dialog/DialogTitle.vue
index 2f22d603..53d2e3d2 100644
--- a/app/components/pub/ui/dialog/DialogTitle.vue
+++ b/app/components/pub/ui/dialog/DialogTitle.vue
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'text-lg font-semibold leading-none tracking-tight',
+        '!text-base 2xl:text-lg font-semibold leading-none tracking-tight',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 0e9ec0bf..21603c73 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:text-xs xl:file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/select/Select.vue b/app/components/pub/ui/select/Select.vue
index baf0f06b..b18516fa 100644
--- a/app/components/pub/ui/select/Select.vue
+++ b/app/components/pub/ui/select/Select.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 
     <SelectContent class="rounded border bg-white">
       <SelectGroup>
-        <SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
+        <SelectLabel v-if="label" class="px-2 py-1 text-xs 2xl:text-sm font-semibold">
           {{ label }}
         </SelectLabel>
 
diff --git a/app/components/pub/ui/select/SelectItem.vue b/app/components/pub/ui/select/SelectItem.vue
index aa06498a..7fe5f342 100644
--- a/app/components/pub/ui/select/SelectItem.vue
+++ b/app/components/pub/ui/select/SelectItem.vue
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-xs 2xl:text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/select/SelectLabel.vue b/app/components/pub/ui/select/SelectLabel.vue
index 32d46c1c..bbd20540 100644
--- a/app/components/pub/ui/select/SelectLabel.vue
+++ b/app/components/pub/ui/select/SelectLabel.vue
@@ -8,7 +8,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }
 </script>
 
 <template>
-  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+  <SelectLabel :class="cn('px-2 py-1.5 text-xs 2xl:text-sm font-semibold', props.class)">
     <slot />
   </SelectLabel>
 </template>
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
index 0a81e3cb..ce51f809 100644
--- a/app/components/pub/ui/select/SelectTrigger.vue
+++ b/app/components/pub/ui/select/SelectTrigger.vue
@@ -21,7 +21,7 @@ const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-9 md:h-8 xl:h-9 w-full rounded-md border border-gray-400 pl-3 pr-8 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 pl-3 pr-8 py-2 text-xs 2xl:text-sm file:border-0 file:bg-transparent file:text-xs file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSub.vue b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
index 42508d4d..9ddf6f43 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuSub.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <ul
     data-sidebar="menu-badge"
     :class="cn(
-      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'mx-3.5 flex min-w-0 translate-x-px flex-col border-l border-sidebar-border px-2.5 py-0.5',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
diff --git a/app/composables/useDistricts.ts b/app/composables/useDistricts.ts
new file mode 100644
index 00000000..a783ca19
--- /dev/null
+++ b/app/composables/useDistricts.ts
@@ -0,0 +1,180 @@
+import { ref, computed, watch } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { District } from '~/models/district'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as districtService from '~/services/district.service'
+
+// Global cache untuk districts berdasarkan regency code
+const districtsCache = ref<Map<string, District[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function useDistricts(regencyCode: Ref<string | undefined> | string | undefined) {
+  // Convert regencyCode ke ref jika bukan ref
+  const regencyCodeRef = typeof regencyCode === 'string' || regencyCode === undefined ? ref(regencyCode) : regencyCode
+
+  // Computed untuk mendapatkan districts berdasarkan regency code
+  const districts = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return []
+    return districtsCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const districtOptions = computed<SelectItem[]>(() => {
+    return districts.value.map((district) => ({
+      label: toTitleCase(district.name),
+      value: district.code,
+      searchValue: `${district.code} ${district.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch districts berdasarkan regency code
+  async function fetchDistricts(regencyCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && districtsCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await districtService.getList({
+        sort: 'name:asc',
+        'regency-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const districtsData = response.body.data || []
+        districtsCache.value.set(code, districtsData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kecamatan')
+        console.error('Failed to fetch districts:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kecamatan')
+      console.error('Error fetching districts:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari district berdasarkan code
+  function getDistrictByCode(code: string): District | undefined {
+    const regencyCode = regencyCodeRef.value
+    if (!regencyCode) return undefined
+
+    const districtsForRegency = districtsCache.value.get(regencyCode) || []
+    return districtsForRegency.find((district) => district.code === code)
+  }
+
+  // Function untuk mencari district berdasarkan name
+  function getDistrictByName(name: string): District | undefined {
+    const regencyCode = regencyCodeRef.value
+    if (!regencyCode) return undefined
+
+    const districtsForRegency = districtsCache.value.get(regencyCode) || []
+    return districtsForRegency.find((district) => district.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache regency tertentu
+  function clearCache(regencyCodeParam?: string) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (code) {
+      districtsCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    districtsCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshDistricts(regencyCodeParam?: string) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (code) {
+      return fetchDistricts(code, true)
+    }
+  }
+
+  // Debounced regency code untuk mencegah multiple calls
+  const debouncedRegencyCode = refDebounced(regencyCodeRef, 100)
+
+  // Watch perubahan regency code untuk auto fetch
+  watch(
+    debouncedRegencyCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchDistricts(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    districts: readonly(districts),
+    districtOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchDistricts,
+    refreshDistricts,
+    getDistrictByCode,
+    getDistrictByName,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useDistrictsCache = () => ({
+  districtsCache: readonly(districtsCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/usePostalRegion.ts b/app/composables/usePostalRegion.ts
new file mode 100644
index 00000000..79b04955
--- /dev/null
+++ b/app/composables/usePostalRegion.ts
@@ -0,0 +1,169 @@
+import { ref, computed, watch, readonly, type Ref } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { PostalRegion } from '~/models/postal-region'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import * as postalRegionService from '~/services/postal-region.service'
+
+// Global cache untuk postal codes berdasarkan village code
+const postalRegionCache = ref<Map<string, PostalRegion[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function usePostalRegion(villageCode: Ref<string | undefined> | string | undefined) {
+  // Convert villageCode ke ref jika bukan ref
+  const villageCodeRef = typeof villageCode === 'string' || villageCode === undefined ? ref(villageCode) : villageCode
+
+  // Computed untuk mendapatkan postalRegion berdasarkan village code
+  const postalRegion = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return []
+    return postalRegionCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const postalRegionOptions = computed<SelectItem[]>(() => {
+    return postalRegion.value.map((postalRegion) => ({
+      label: postalRegion.code,
+      value: postalRegion.code,
+      searchValue: postalRegion.code,
+    }))
+  })
+
+  // Function untuk fetch postalRegion berdasarkan village code
+  async function fetchpostalRegion(villageCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && postalRegionCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await postalRegionService.getList({
+        sort: 'code:asc',
+        'village-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const postalRegionData = response.body.data || []
+        postalRegionCache.value.set(code, postalRegionData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kode pos')
+        console.error('Failed to fetch postal codes:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kode pos')
+      console.error('Error fetching postal codes:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari postalRegion berdasarkan code
+  function getpostalRegionByCode(code: string): PostalRegion | undefined {
+    const villageCode = villageCodeRef.value
+    if (!villageCode) return undefined
+
+    const postalRegionForVillage = postalRegionCache.value.get(villageCode) || []
+    return postalRegionForVillage.find((postalRegion) => postalRegion.code === code)
+  }
+
+  // Function untuk clear cache village tertentu
+  function clearCache(villageCodeParam?: string) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (code) {
+      postalRegionCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    postalRegionCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshpostalRegion(villageCodeParam?: string) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (code) {
+      return fetchpostalRegion(code, true)
+    }
+  }
+
+  // Debounced village code untuk mencegah multiple calls
+  const debouncedVillageCode = refDebounced(villageCodeRef, 100)
+
+  // Watch perubahan village code untuk auto fetch
+  watch(
+    debouncedVillageCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchpostalRegion(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    postalRegion: readonly(postalRegion),
+    postalRegionOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchpostalRegion,
+    refreshpostalRegion,
+    getpostalRegionByCode,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const usepostalRegionCache = () => ({
+  postalRegionCache: readonly(postalRegionCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useProvinces.ts b/app/composables/useProvinces.ts
new file mode 100644
index 00000000..b1fc8609
--- /dev/null
+++ b/app/composables/useProvinces.ts
@@ -0,0 +1,111 @@
+import { ref, computed } from 'vue'
+import type { Province } from '~/models/province'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as provinceService from '~/services/province.service'
+
+// Global state untuk caching
+const provincesCache = ref<Province[]>([])
+const isLoading = ref(false)
+const isInitialized = ref(false)
+const error = ref<string | null>(null)
+
+export function useProvinces() {
+  // Computed untuk format SelectItem
+  const provinceOptions = computed<SelectItem[]>(() => {
+    return provincesCache.value.map((province) => ({
+      label: toTitleCase(province.name),
+      value: province.code,
+      // code: province.code,
+      searchValue: `${province.code} ${province.name}`.trim(), // Untuk search internal combobox
+    }))
+  })
+
+  // Function untuk fetch data provinces
+  async function fetchProvinces(forceRefresh = false) {
+    // Jika sudah ada data dan tidak force refresh, skip
+    if (isInitialized.value && !forceRefresh) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (isLoading.value) {
+      return
+    }
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const response = await provinceService.getList({
+        'page-no-limit': true,
+        sort: 'name:asc',
+      })
+
+      if (response.success) {
+        provincesCache.value = response.body.data || []
+        isInitialized.value = true
+      } else {
+        error.value = 'Gagal memuat data provinsi'
+        console.error('Failed to fetch provinces:', response)
+      }
+    } catch (err) {
+      error.value = 'Terjadi kesalahan saat memuat data provinsi'
+      console.error('Error fetching provinces:', err)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  // Function untuk mencari province berdasarkan code
+  function getProvinceByCode(code: string): Province | undefined {
+    return provincesCache.value.find((province) => province.code === code)
+  }
+
+  // Function untuk mencari province berdasarkan name
+  function getProvinceByName(name: string): Province | undefined {
+    return provincesCache.value.find((province) => province.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache (jika diperlukan)
+  function clearCache() {
+    provincesCache.value = []
+    isInitialized.value = false
+    error.value = null
+  }
+
+  // Function untuk refresh data
+  function refreshProvinces() {
+    return fetchProvinces(true)
+  }
+
+  // Auto fetch saat composable pertama kali digunakan
+  if (!isInitialized.value && !isLoading.value) {
+    fetchProvinces()
+  }
+
+  return {
+    // Data
+    provinces: readonly(provincesCache),
+    provinceOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    isInitialized: readonly(isInitialized),
+    error: readonly(error),
+
+    // Methods
+    fetchProvinces,
+    refreshProvinces,
+    getProvinceByCode,
+    getProvinceByName,
+    clearCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useProvincesCache = () => ({
+  provinces: readonly(provincesCache),
+  isLoading: readonly(isLoading),
+  isInitialized: readonly(isInitialized),
+})
diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
new file mode 100644
index 00000000..a48e9a2b
--- /dev/null
+++ b/app/composables/useQueryCRUD.ts
@@ -0,0 +1,46 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryCRUDMode(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const mode = computed<'list' | 'entry'>({
+    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
+    set: (val) => {
+      router.push({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  const goToEntry = () => (mode.value = 'entry')
+  const backToList = () =>(mode.value = 'list')
+
+  return { mode, goToEntry, backToList }
+}
+
+export function useQueryCRUDRecordId(key: string = 'record-id') {
+  const route = useRoute()
+  const router = useRouter()
+
+  // const recordId = useState('route-query-' + key, () => '')
+  const recordId = computed({
+    get: () => route.query[key],
+    set: (val: string) => {
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  return { recordId }
+}
diff --git a/app/composables/useRegencies.ts b/app/composables/useRegencies.ts
new file mode 100644
index 00000000..d816a5ed
--- /dev/null
+++ b/app/composables/useRegencies.ts
@@ -0,0 +1,386 @@
+import { ref, computed, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import type { Regency } from '~/models/regency'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { toTitleCase } from '~/lib/utils'
+import * as regencyService from '~/services/regency.service'
+
+// Interface untuk query parameters
+interface RegencyQueryParams {
+  'province-code'?: string
+  search?: string
+  'page-number'?: number
+  'page-size'?: number
+  sort?: string
+}
+
+// Interface untuk cached data dengan pagination
+interface CachedRegencyData {
+  data: Regency[]
+  meta: PaginationMeta
+  queryKey: string // untuk tracking query yang berbeda
+}
+
+// Global cache untuk regencies berdasarkan query key (province-code + search + pagination)
+const regenciesCache = reactive(new Map<string, CachedRegencyData>())
+const loadingStates = reactive(new Map<string, boolean>())
+const errorStates = reactive(new Map<string, string | null>())
+
+interface UseRegenciesOptions {
+  provinceCode?: Ref<string | undefined> | string | undefined
+  pageSize?: number
+  enablePagination?: boolean
+  enableSearch?: boolean
+}
+
+export function useRegencies(options: UseRegenciesOptions | Ref<string | undefined> | string | undefined = {}) {
+  // Backward compatibility - jika parameter pertama adalah provinceCode
+  const normalizedOptions: UseRegenciesOptions =
+    typeof options === 'object' && 'value' in options
+      ? { provinceCode: options }
+      : typeof options === 'string' || options === undefined
+        ? { provinceCode: options }
+        : options
+
+  const { provinceCode, pageSize = 10, enablePagination = true, enableSearch = true } = normalizedOptions
+
+  // Convert provinceCode ke ref jika bukan ref
+  const provinceCodeRef =
+    typeof provinceCode === 'string' || provinceCode === undefined ? ref(provinceCode) : provinceCode || ref(undefined)
+
+  // State untuk pagination dan search
+  const currentPage = ref(1)
+  const currentPageSize = ref(pageSize)
+  const searchQuery = ref('')
+
+  // Function untuk generate query key
+  const generateQueryKey = (params: RegencyQueryParams) => {
+    const keyParts = [
+      params['province-code'] || '',
+      params.search || '',
+      params['page-number'] || 1,
+      params['page-size'] || pageSize,
+      params.sort || 'name:asc',
+    ]
+    return keyParts.join('|')
+  }
+
+  // Current query key
+  const currentQueryKey = computed(() => {
+    return generateQueryKey({
+      'province-code': provinceCodeRef.value,
+      search: enableSearch ? searchQuery.value : undefined,
+      'page-number': enablePagination ? currentPage.value : undefined,
+      'page-size': enablePagination ? currentPageSize.value : undefined,
+      sort: 'name:asc',
+    })
+  })
+
+  // Computed untuk mendapatkan regencies berdasarkan current query
+  const regencies = computed(() => {
+    const queryKey = currentQueryKey.value
+    const cachedData = regenciesCache.get(queryKey)
+    return cachedData?.data || []
+  })
+
+  // Computed untuk pagination meta
+  const paginationMeta = computed(() => {
+    const queryKey = currentQueryKey.value
+    const cachedData = regenciesCache.get(queryKey)
+    return (
+      cachedData?.meta || {
+        recordCount: 0,
+        page: currentPage.value,
+        pageSize: currentPageSize.value,
+        totalPage: 0,
+        hasNext: false,
+        hasPrev: false,
+      }
+    )
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const queryKey = currentQueryKey.value
+    return loadingStates.get(queryKey) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const queryKey = currentQueryKey.value
+    return errorStates.get(queryKey) || null
+  })
+
+  // Computed untuk format Item
+  const regencyOptions = computed<Item[]>(() => {
+    return regencies.value.map((regency) => ({
+      label: toTitleCase(regency.name),
+      value: regency.code,
+      searchValue: `${regency.code} ${regency.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch regencies dengan pagination dan search
+  async function fetchRegencies(params?: Partial<RegencyQueryParams>, forceRefresh = false) {
+    const queryParams: RegencyQueryParams = {
+      'province-code': params?.['province-code'] || provinceCodeRef.value,
+      search: enableSearch ? params?.search || searchQuery.value : undefined,
+      'page-number': enablePagination ? params?.['page-number'] || currentPage.value : undefined,
+      'page-size': enablePagination ? params?.['page-size'] || currentPageSize.value : undefined,
+      sort: params?.sort || 'name:asc',
+    }
+
+    // Jika tidak ada province code, return
+    // if (!queryParams['province-code']) return  // buat komponen select birth
+
+    const queryKey = generateQueryKey(queryParams)
+
+    // Jika tidak force refresh dan sudah ada cache, skip
+    if (!forceRefresh && regenciesCache.has(queryKey)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.get(queryKey)) {
+      return
+    }
+
+    loadingStates.set(queryKey, true)
+    errorStates.set(queryKey, null)
+
+    try {
+      // Prepare API parameters
+      const apiParams: any = {
+        sort: queryParams.sort,
+        'province-code': queryParams['province-code'],
+      }
+
+      // Add pagination or no-limit based on enablePagination
+      if (enablePagination && queryParams['page-number'] && queryParams['page-size']) {
+        apiParams['page-number'] = queryParams['page-number']
+        apiParams['page-size'] = queryParams['page-size']
+      } else {
+        apiParams['page-no-limit'] = true
+      }
+
+      // Add search if enabled and has value
+      if (enableSearch && queryParams.search && queryParams.search.trim().length >= 3) {
+        apiParams.search = queryParams.search.trim()
+      }
+
+      const response = await regencyService.getList(apiParams)
+
+      if (response.success) {
+        const regenciesData = response.body.data || []
+        const meta = response.body.meta || { record_totalCount: regenciesData.length }
+
+        // Create pagination meta
+        const paginationMeta: PaginationMeta = {
+          recordCount: meta.record_totalCount,
+          page: queryParams['page-number'] || 1,
+          pageSize: queryParams['page-size'] || regenciesData.length,
+          totalPage:
+            enablePagination && queryParams['page-size']
+              ? Math.ceil(meta.record_totalCount / queryParams['page-size'])
+              : 1,
+          hasNext: false,
+          hasPrev: false,
+        }
+
+        if (enablePagination && queryParams['page-size']) {
+          paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+          paginationMeta.hasPrev = paginationMeta.page > 1
+        }
+
+        // Cache the result
+        regenciesCache.set(queryKey, {
+          data: [...regenciesData],
+          meta: { ...paginationMeta },
+          queryKey,
+        })
+      } else {
+        errorStates.set(queryKey, 'Gagal memuat data kabupaten/kota')
+        console.error('Failed to fetch regencies:', response)
+      }
+    } catch (err) {
+      errorStates.set(queryKey, 'Terjadi kesalahan saat memuat data kabupaten/kota')
+      console.error('Error fetching regencies:', err)
+    } finally {
+      loadingStates.set(queryKey, false)
+    }
+  }
+
+  // Function untuk mencari regency berdasarkan code (search di semua cached data)
+  function getRegencyByCode(code: string): Regency | undefined {
+    // Search di semua cached data
+    for (const cachedData of regenciesCache.values()) {
+      const found = cachedData.data.find((regency) => regency.code === code)
+      if (found) return found
+    }
+    return undefined
+  }
+
+  // Function untuk mencari regency berdasarkan name (search di semua cached data)
+  function getRegencyByName(name: string): Regency | undefined {
+    // Search di semua cached data
+    for (const cachedData of regenciesCache.values()) {
+      const found = cachedData.data.find((regency) => regency.name.toLowerCase() === name.toLowerCase())
+      if (found) return found
+    }
+    return undefined
+  }
+
+  // Function untuk pagination
+  function goToPage(page: number) {
+    if (page >= 1 && page <= paginationMeta.value.totalPage) {
+      currentPage.value = page
+    }
+  }
+
+  function nextPage() {
+    if (paginationMeta.value.hasNext) {
+      currentPage.value += 1
+    }
+  }
+
+  function prevPage() {
+    if (paginationMeta.value.hasPrev) {
+      currentPage.value -= 1
+    }
+  }
+
+  function changePageSize(size: number) {
+    currentPageSize.value = size
+    currentPage.value = 1 // Reset ke halaman pertama
+  }
+
+  // Function untuk search
+  function setSearch(query: string) {
+    searchQuery.value = query
+    currentPage.value = 1 // Reset ke halaman pertama saat search
+  }
+
+  function clearSearch() {
+    searchQuery.value = ''
+    currentPage.value = 1
+  }
+
+  // Function untuk clear cache berdasarkan query key pattern
+  function clearCache(provinceCodeParam?: string) {
+    const code = provinceCodeParam || provinceCodeRef.value
+    if (code) {
+      // Clear semua cache yang mengandung province code tersebut
+      const keysToDelete: string[] = []
+      for (const [key] of regenciesCache.entries()) {
+        if (key.startsWith(code + '|')) {
+          keysToDelete.push(key)
+        }
+      }
+      keysToDelete.forEach((key) => {
+        regenciesCache.delete(key)
+        loadingStates.delete(key)
+        errorStates.delete(key)
+      })
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    regenciesCache.clear()
+    loadingStates.clear()
+    errorStates.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshRegencies(params?: Partial<RegencyQueryParams>) {
+    return fetchRegencies(params, true)
+  }
+
+  // Debounced province code untuk mencegah multiple calls
+  const debouncedProvinceCode = refDebounced(provinceCodeRef, 100)
+
+  // Watch perubahan province code untuk auto fetch
+  watch(
+    debouncedProvinceCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Reset pagination dan search saat province code berubah
+        currentPage.value = 1
+        if (enableSearch) {
+          searchQuery.value = ''
+        }
+        fetchRegencies()
+      }
+    },
+    { immediate: true },
+  )
+
+  const triggerFetchAfterIdle = useDebounceFn(() => {
+    if (enableSearch) {
+      currentPage.value = 1
+      fetchRegencies()
+    }
+  }, 1000)
+
+  // Watch perubahan search query untuk auto fetch dan reset halaman
+  watch(searchQuery, (newSearch, oldSearch) => {
+    if (newSearch !== oldSearch) {
+      triggerFetchAfterIdle()
+    }
+  })
+
+  // Watch perubahan pagination untuk auto fetch
+  watch([currentPage, currentPageSize], () => {
+    if (enablePagination) {
+      fetchRegencies()
+    }
+  })
+
+  watch(regencyOptions, (val) => {
+    console.log('[regencyOptions] updated', val.length)
+  })
+
+  return {
+    // Data
+    regencies: readonly(regencies),
+    regencyOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+    paginationMeta: readonly(paginationMeta),
+
+    // Search state
+    searchQuery: enableSearch ? searchQuery : readonly(ref('')),
+
+    // Pagination state
+    currentPage: enablePagination ? currentPage : readonly(ref(1)),
+    currentPageSize: enablePagination ? currentPageSize : readonly(ref(pageSize)),
+
+    // Methods
+    fetchRegencies,
+    refreshRegencies,
+    getRegencyByCode,
+    getRegencyByName,
+    clearCache,
+    clearAllCache,
+
+    // Pagination methods
+    goToPage: enablePagination ? goToPage : () => {},
+    nextPage: enablePagination ? nextPage : () => {},
+    prevPage: enablePagination ? prevPage : () => {},
+    changePageSize: enablePagination ? changePageSize : () => {},
+
+    // Search methods
+    setSearch: enableSearch ? setSearch : () => {},
+    clearSearch: enableSearch ? clearSearch : () => {},
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useRegenciesCache = () => ({
+  regenciesCache: readonly(regenciesCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useVillages.ts b/app/composables/useVillages.ts
new file mode 100644
index 00000000..68713fe2
--- /dev/null
+++ b/app/composables/useVillages.ts
@@ -0,0 +1,181 @@
+import { ref, computed, watch } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { Village } from '~/models/village'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as villageService from '~/services/village.service'
+
+// Global cache untuk villages berdasarkan district code
+const villagesCache = ref<Map<string, Village[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function useVillages(districtCode: Ref<string | undefined> | string | undefined) {
+  // Convert districtCode ke ref jika bukan ref
+  const districtCodeRef =
+    typeof districtCode === 'string' || districtCode === undefined ? ref(districtCode) : districtCode
+
+  // Computed untuk mendapatkan villages berdasarkan district code
+  const villages = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return []
+    return villagesCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const villageOptions = computed<SelectItem[]>(() => {
+    return villages.value.map((village) => ({
+      label: toTitleCase(village.name),
+      value: village.code,
+      searchValue: `${village.code} ${village.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch villages berdasarkan district code
+  async function fetchVillages(districtCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && villagesCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await villageService.getList({
+        sort: 'name:asc',
+        'district-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const villagesData = response.body.data || []
+        villagesCache.value.set(code, villagesData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kelurahan')
+        console.error('Failed to fetch villages:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kelurahan')
+      console.error('Error fetching villages:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari village berdasarkan code
+  function getVillageByCode(code: string): Village | undefined {
+    const districtCode = districtCodeRef.value
+    if (!districtCode) return undefined
+
+    const villagesForDistrict = villagesCache.value.get(districtCode) || []
+    return villagesForDistrict.find((village) => village.code === code)
+  }
+
+  // Function untuk mencari village berdasarkan name
+  function getVillageByName(name: string): Village | undefined {
+    const districtCode = districtCodeRef.value
+    if (!districtCode) return undefined
+
+    const villagesForDistrict = villagesCache.value.get(districtCode) || []
+    return villagesForDistrict.find((village) => village.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache district tertentu
+  function clearCache(districtCodeParam?: string) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (code) {
+      villagesCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    villagesCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshVillages(districtCodeParam?: string) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (code) {
+      return fetchVillages(code, true)
+    }
+  }
+
+  // Debounced district code untuk mencegah multiple calls
+  const debouncedDistrictCode = refDebounced(districtCodeRef, 100)
+
+  // Watch perubahan district code untuk auto fetch
+  watch(
+    debouncedDistrictCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchVillages(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    villages: readonly(villages),
+    villageOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchVillages,
+    refreshVillages,
+    getVillageByCode,
+    getVillageByName,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useVillagesCache = () => ({
+  villagesCache: readonly(villagesCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/handlers/_handler.ts b/app/handlers/_handler.ts
index 66177937..01a191b8 100644
--- a/app/handlers/_handler.ts
+++ b/app/handlers/_handler.ts
@@ -129,23 +129,34 @@ export function genCrudHandler<T = any>(crud: {
     recItem.value = null
   }
 
-  async function handleActionSave(values: any, refresh: () => void, reset: () => void, toast: ToastFn) {
+  async function handleActionSave(
+    values: any,
+    refresh: () => void,
+    reset: () => void,
+    toast: ToastFn,
+  ): Promise<any | null> {
     isProcessing.value = true
+
+    let successResponse: any = null
+
     await handleAsyncAction<[any], any>({
       action: crud.create,
       args: [values],
       toast,
       successMessage: 'Data berhasil disimpan',
       errorMessage: 'Gagal menyimpan data',
-      onSuccess: () => {
+      onSuccess: (result) => {
         isFormEntryDialogOpen.value = false
         if (refresh) refresh()
+        successResponse = result
       },
       onFinally: (isSuccess: boolean) => {
         if (isSuccess) setTimeout(reset, 500)
         isProcessing.value = false
       },
     })
+
+    return successResponse
   }
 
   async function handleActionEdit(
diff --git a/app/handlers/device-order-item.handler.ts b/app/handlers/device-order-item.handler.ts
new file mode 100644
index 00000000..b1df996b
--- /dev/null
+++ b/app/handlers/device-order-item.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device-order-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/device-order.handler.ts b/app/handlers/device-order.handler.ts
new file mode 100644
index 00000000..b1df996b
--- /dev/null
+++ b/app/handlers/device-order.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device-order-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/diagnose-src.handler.ts b/app/handlers/diagnose-src.handler.ts
new file mode 100644
index 00000000..c109e6fc
--- /dev/null
+++ b/app/handlers/diagnose-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/diagnose-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/medical-action-src.handler.ts b/app/handlers/medical-action-src.handler.ts
new file mode 100644
index 00000000..652d6d60
--- /dev/null
+++ b/app/handlers/medical-action-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medical-action-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/patient.handler.ts b/app/handlers/patient.handler.ts
new file mode 100644
index 00000000..f87eaf71
--- /dev/null
+++ b/app/handlers/patient.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { postPatient as create, patchPatient as update, removePatient as remove } from '~/services/patient.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/procedure-src.handler.ts b/app/handlers/procedure-src.handler.ts
new file mode 100644
index 00000000..7c949356
--- /dev/null
+++ b/app/handlers/procedure-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/procedure-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 05213784..59dd9bf5 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -85,6 +85,7 @@ export const religionCodes: Record<string, string> = {
   hindu: 'Hindu',
   buda: 'Buda',
   konghucu: 'Konghucu',
+  other: 'Kepercayaan Lain',
 }
 
 export const educationCodes: Record<string, string> = {
@@ -102,13 +103,91 @@ export const educationCodes: Record<string, string> = {
 }
 
 export const occupationCodes: Record<string, string> = {
-  'tidak-bekerja': 'Tidak Bekerja',
+  unknown: 'Tidak diketahui',
+  tidak_bekerja: 'Belum/Tidak Bekerja',
+  mengurus_rumah_tangga: 'Mengurus Rumah Tangga',
+  pelajar: 'Pelajar/Mahasiswa',
+  pensiunan: 'Pensiunan',
   pns: 'Pegawai Negeri Sipil',
-  polisi: 'Polisi',
-  tni: 'TNI',
+  tni: 'Tentara Nasional Indonesia',
+  polri: 'Kepolisian RI',
+  perdagangan: 'Perdagangan',
+  petani: 'Petani/Pekebun',
+  peternak: 'Peternak',
+  nelayan: 'Nelayan/Perikanan',
+  industri: 'Industri',
+  konstruksi: 'Konstruksi',
+  transportasi: 'Transportasi',
+  karyawan_swasta: 'Karyawan Swasta',
+  karyawan_bumn: 'Karyawan BUMN',
+  karyawan_bumd: 'Karyawan BUMD',
+  karyawan_honorer: 'Karyawan Honorer',
+  buruh_harian: 'Buruh Harian Lepas',
+  buruh_tani: 'Buruh Tani/Perkebunan',
+  buruh_nelayan: 'Buruh Nelayan/Perikanan',
+  buruh_peternakan: 'Buruh Peternakan',
+  pembantu_rumah_tangga: 'Pembantu Rumah Tangga',
+  tukang_cukur: 'Tukang Cukur',
+  tukang_listrik: 'Tukang Listrik',
+  tukang_batu: 'Tukang Batu',
+  tukang_kayu: 'Tukang Kayu',
+  tukang_sol_sepatu: 'Tukang Sol Sepatu',
+  tukang_jahit: 'Tukang Jahit',
+  tukang_gigi: 'Tukang Gigi',
+  penata_rias: 'Penata Rias',
+  penata_busana: 'Penata Busana',
+  penata_rambut: 'Penata Rambut',
+  mekanik: 'Mekanik',
+  seniman: 'Seniman',
+  tabib: 'Tabib',
+  paraji: 'Paraji',
+  perancang_busana: 'Perancang Busana',
+  penterjemah: 'Penterjemah',
+  imam_mesjid: 'Imam Mesjid',
+  pendeta: 'Pendeta',
+  pastor: 'Pastor',
+  wartawan: 'Wartawan',
+  ustadz: 'Ustadz/Mubaligh',
+  juru_masak: 'Juru Masak',
+  promotor: 'Promotor Acara',
+  dpr_ri: 'Anggota DPR-RI',
+  dpd: 'Anggota DPD',
+  bpk: 'Anggota BPK',
+  presiden: 'Presiden',
+  wakil_presiden: 'Wakil Presiden',
+  mk: 'Anggota Mahkamah Konstitusi',
+  kabinet: 'Anggota Kabinet/Kementrian',
+  dubes: 'Duta Besar',
+  gubernur: 'Gubernur',
+  wakil_gubernur: 'Wakil Gubernur',
+  bupati: 'Bupati',
+  wakil_bupati: 'Wakil Bupati',
+  walikota: 'Walikota',
+  wakil_walikota: 'Wakil Walikota',
+  dprd_provinsi: 'Anggota DPRD Provinsi',
+  dprd_kabkota: 'Anggota DPRD Kabupaten/Kota',
+  dosen: 'Dosen',
   guru: 'Guru',
+  pilot: 'Pilot',
+  pengacara: 'Pengacara',
+  arsitek: 'Arsitek',
+  akuntan: 'Akuntan',
+  konsultan: 'Konsultan',
+  dokter: 'Dokter',
+  bidan: 'Bidan',
+  apoteker: 'Apoteker',
+  psikolog: 'Psikiater/Psikolog',
+  penyiar_tv: 'Penyiar Televisi',
+  penyiar_radio: 'Penyiar Radio',
+  pelaut: 'Pelaut',
+  sopir: 'Sopir',
+  pialang: 'Pialang',
+  paranormal: 'Paranormal',
+  pedagang: 'Pedagang',
+  perangkat_desa: 'Perangkat Desa',
+  kepala_desa: 'Kepala Desa',
+  biarawati: 'Biarawati',
   wiraswasta: 'Wiraswasta',
-  'kary-swasta': 'Karyawan Swasta',
   lainnya: 'Lainnya',
 }
 
@@ -248,7 +327,10 @@ export const uploadCode: Record<string, string> = {
   kk: 'person-family-card',
   paspor: 'person-passport',
   'mcu-report': 'mcu-item-result',
-}
+} as const
+
+export type UploadCodeKey = keyof typeof uploadCode
+export type UploadCodeValue = (typeof uploadCode)[UploadCodeKey]
 
 export const infraGroupCodes: Record<string, string> = {
   building: 'Bangunan',
@@ -268,3 +350,19 @@ export const infraGroupCodesKeys: Record<string, string> = Object.keys(infraGrou
   },
   {} as Record<string, string>,
 )
+
+export const addressLocationTypeCode: Record<string, string> = {
+  identity: 'Alamat KTP',
+  domicile: 'Alamat Domisili',
+}
+
+export type AddressLocationTypeCode = keyof typeof addressLocationTypeCode
+export const medicalActionTypeCode: Record<string, string> = {
+  chemo: 'Chemo',
+  hemo: 'Hemo',
+  thalasemia: 'Thalasemia',
+  echocardio: 'Echocardiography',
+  spirometry: 'Spirometry',
+} as const
+
+export type medicalActionTypeCodeKey = keyof typeof medicalActionTypeCode
diff --git a/app/lib/date.ts b/app/lib/date.ts
new file mode 100644
index 00000000..502a6cfb
--- /dev/null
+++ b/app/lib/date.ts
@@ -0,0 +1,44 @@
+export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
+	const birthDate = new Date(dateString);
+	const today = new Date();
+
+	if (comparedDate) {
+		const comparedDateObj = new Date(comparedDate);
+		today.setFullYear(comparedDateObj.getFullYear());
+		today.setMonth(comparedDateObj.getMonth());
+		today.setDate(comparedDateObj.getDate());
+	}
+
+	// Format the date part
+	const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
+	const idFormat = birthDate.toLocaleDateString('id-ID', options);
+
+	// Calculate age
+	let years = today.getFullYear() - birthDate.getFullYear();
+	let months = today.getMonth() - birthDate.getMonth();
+	let days = today.getDate() - birthDate.getDate();
+
+	if (months < 0 || (months === 0 && days < 0)) {
+		years--;
+		months += 12;
+	}
+
+	if (days < 0) {
+		const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
+		days += prevMonth.getDate();
+		months--;
+	}
+
+	// Format the age part
+	let extFormat = '';
+	if ([years, months, days].filter(Boolean).join(' ')) {
+		extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
+	} else {
+		extFormat = '0';
+	}
+
+	return {
+		idFormat,
+		extFormat
+	};
+}
\ No newline at end of file
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 9ffd7dc9..357d8700 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -27,6 +27,16 @@ export function mapToComboboxOptList(items: Record<string, string>): SelectOptio
   return result
 }
 
+/**
+ * Mengkonversi string menjadi title case (huruf pertama setiap kata kapital)
+ * @param str - String yang akan dikonversi
+ * @returns String dalam format title case
+ */
+export function toTitleCase(str: string): string {
+  return str.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
+
 /**
  * Menghitung umur berdasarkan tanggal lahir
  * @param birthDate - Tanggal lahir dalam format Date atau string
diff --git a/app/models/_model.ts b/app/models/_model.ts
index 9fce17b3..b5f09a71 100644
--- a/app/models/_model.ts
+++ b/app/models/_model.ts
@@ -2,8 +2,8 @@
 export interface ItemMeta {
   id: number
   createdAt: string | null
+  deletedAt: string | null
   updatedAt: string | null
-  deletedAt?: string | null
 }
 
 // Pagination meta model for API responses
@@ -14,13 +14,6 @@ export interface PaginationMeta {
   source: string
 }
 
-export interface TreeItem {
-  value: string
-  label: string
-  hasChildren: boolean
-  children?: TreeItem[]
-}
-
 export interface Base {
   name: string
   code: string
diff --git a/app/models/consultation.ts b/app/models/consultation.ts
index b9fbd2fd..595d628e 100644
--- a/app/models/consultation.ts
+++ b/app/models/consultation.ts
@@ -1,6 +1,7 @@
 export interface Consultation {
   id: number
   encounter_id: number
+  date?: string
   unit_id: number
   doctor_id?: number
   problem: string
@@ -10,8 +11,9 @@ export interface Consultation {
 
 export interface CreateDto {
   encounter_id: number
+  date: string
   problem: string
-  unit_id: number
+  dstUnit_id: number
 }
 
 export interface UpdateDto {
@@ -26,9 +28,10 @@ export interface DeleteDto {
 
 export function genCreateDto(): CreateDto {
   return {
+    date: '',
     encounter_id: 0,
     problem: '',
-    unit_id: 0,
+    dstUnit_id: 0,
   }
 }
 
diff --git a/app/models/diagnose-src.ts b/app/models/diagnose-src.ts
new file mode 100644
index 00000000..5d25a54a
--- /dev/null
+++ b/app/models/diagnose-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface DiagnoseSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genDiagnoseSrc(): DiagnoseSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}
diff --git a/app/models/district.ts b/app/models/district.ts
new file mode 100644
index 00000000..611f4435
--- /dev/null
+++ b/app/models/district.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+import type { Regency } from './regency'
+
+export interface District extends Base {
+  regency_code: string
+  code: string
+  name: string
+
+  // preload
+  regency?: Regency | null
+}
+
+export function genDistrict(): District {
+  return {
+    ...genBase(),
+    regency_code: '',
+    name: '',
+    code: '',
+  }
+}
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index 43821be6..681a2ac9 100644
--- a/app/models/encounter.ts
+++ b/app/models/encounter.ts
@@ -1,15 +1,23 @@
 import { type Doctor, genDoctor } from "./doctor"
 import { genEmployee, type Employee } from "./employee"
+import { type Patient, genPatient } from "./patient"
+import type { Specialist } from "./specialist"
+import type { Subspecialist } from "./subspecialist"
+import { genUnit, type Unit } from "./unit"
 
 export interface Encounter {
     id: number
     patient_id: number
+    patient: Patient
     registeredAt: string
     class_code: string
     unit_id: number
+    unit: Unit
     specialist_id?: number
+    specilist?: Specialist
     subspecialist_id?: number
-    visitdate: string
+    subspecialist?: Subspecialist
+    visitDate: string
     adm_employee_id: number
     adm_employee: Employee
     appointment_doctor_id: number
@@ -30,10 +38,12 @@ export function genEncounter(): Encounter {
     return {
         id: 0,
         patient_id: 0,
+        patient: genPatient(),
         registeredAt: '',
         class_code: '',
         unit_id: 0,
-        visitdate: '',
+        unit: genUnit(),
+        visitDate: '',
         adm_employee_id: 0,
         adm_employee: genEmployee(),
         appointment_doctor_id: 0,
diff --git a/app/models/medical-action-src-item.ts b/app/models/medical-action-src-item.ts
new file mode 100644
index 00000000..0f04657a
--- /dev/null
+++ b/app/models/medical-action-src-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface MedicalActionSrcItem extends Base {
+  medicalActionSrc_id: number
+  procedureSrc_id: number
+  item_id: number
+}
+
+export function genMedicalActionSrcItem(): MedicalActionSrcItem {
+  return {
+    ...genBase(),
+    medicalActionSrc_id: 0,
+    procedureSrc_id: 0,
+    item_id: 0,
+  }
+}
diff --git a/app/models/medical-action-src.ts b/app/models/medical-action-src.ts
new file mode 100644
index 00000000..21d36c84
--- /dev/null
+++ b/app/models/medical-action-src.ts
@@ -0,0 +1,19 @@
+import { type Base, genBase } from './_base'
+import type { medicalActionTypeCodeKey } from '~/lib/constants'
+
+export interface MedicalActionSrc extends Base {
+  code: string
+  name: string
+  type_code: medicalActionTypeCodeKey
+  item_id: number
+}
+
+export function genMedicalActionSrc(): MedicalActionSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    type_code: '',
+    item_id: 0,
+  }
+}
diff --git a/app/models/patient.ts b/app/models/patient.ts
index 268bccd4..46e0f81d 100644
--- a/app/models/patient.ts
+++ b/app/models/patient.ts
@@ -6,7 +6,7 @@ import type { PersonFamiliesFormData } from '~/schemas/person-family.schema'
 import type { PersonContactFormData } from '~/schemas/person-contact.schema'
 import type { PersonRelativeFormData } from '~/schemas/person-relative.schema'
 
-import type { Person } from './person'
+import { genPerson, type Person } from './person'
 import type { PersonAddress } from './person-address'
 import type { PersonContact } from './person-contact'
 import type { PersonRelative } from './person-relative'
@@ -37,16 +37,38 @@ export interface genPatientProps {
   responsible: PersonRelativeFormData
 }
 
-export function genPatient(props: genPatientProps): PatientEntity {
+export function genPatientEntity(props: genPatientProps): PatientEntity {
   const { patient, residentAddress, cardAddress, familyData, contacts, responsible } = props
 
-  const addresses: PersonAddress[] = [{ ...genBase(), person_id: 0, locationType: '', ...residentAddress }]
+  const addresses: PersonAddress[] = [{ ...genBase(), person_id: 0, ...residentAddress }]
   const familiesContact: PersonRelative[] = []
   const personContacts: PersonContact[] = []
 
   // jika alamat ktp sama dengan domisili saat ini
-  if (cardAddress.isSameAddress === '1') {
-    addresses.push({ ...genBase(), person_id: 0, locationType: '', ...residentAddress })
+  if (cardAddress.isSameAddress) {
+    addresses.push({
+      ...genBase(),
+      ...residentAddress,
+      person_id: 0,
+      locationType_code: cardAddress.locationType_code || 'identity'
+    })
+  } else {
+    // jika alamat berbeda, tambahkan alamat relatif
+    // Pastikan semua field yang diperlukan ada
+    const relativeAddress = {
+      ...genBase(),
+      person_id: 0,
+      locationType_code: cardAddress.locationType_code || 'identity',
+      address: cardAddress.address || '',
+      province_code: cardAddress.province_code || '',
+      regency_code: cardAddress.regency_code || '',
+      district_code: cardAddress.district_code || '',
+      village_code: cardAddress.village_code || '',
+      postalRegion_code: cardAddress.postalRegion_code || '',
+      rt: cardAddress.rt,
+      rw: cardAddress.rw,
+    }
+    addresses.push(relativeAddress)
   }
 
   // add data orang tua
@@ -97,7 +119,7 @@ export function genPatient(props: genPatientProps): PatientEntity {
     person: {
       id: 0,
       name: patient.fullName,
-      alias: patient.alias,
+      // alias: patient.alias,
       birthDate: patient.birthDate,
       birthRegency_code: patient.birthPlace,
       gender_code: patient.gender,
@@ -111,7 +133,7 @@ export function genPatient(props: genPatientProps): PatientEntity {
       ethnic_code: patient.ethnicity,
       language_code: patient.language,
       communicationIssueStatus: patient.communicationBarrier,
-      disability: patient.disability,
+      disability: patient.disabilityType || '',
       nationality: patient.nationality,
       // residentIdentityFileUrl: patient.residentIdentityFileUrl,
       // passportFileUrl: patient.passportFileUrl,
@@ -126,12 +148,34 @@ export function genPatient(props: genPatientProps): PatientEntity {
     personRelatives: familiesContact,
     registeredAt: new Date(),
     status_code: 'active',
-    newBornStatus: false,
+    newBornStatus: patient.isNewBorn,
     person_id: 0,
     id: 0,
-    number: '0x000000000000000000000000000000',
+    number: '',
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     deletedAt: null,
   }
 }
+
+// New model
+export interface Patient extends Base {
+  person_id?: number
+  person: Person
+  newBornStatus?: boolean
+  registeredAt?: Date | string | null
+  status_code?: string
+  number?: string
+}
+
+export function genPatient(): Patient {
+  return {
+    ...genBase(),
+    person_id: 0,
+    registeredAt: '',
+    status_code: '',
+    number: '',
+    newBornStatus: false,
+    person: genPerson(),
+  }
+}
\ No newline at end of file
diff --git a/app/models/person-address.ts b/app/models/person-address.ts
index 1f085c65..c425bc3c 100644
--- a/app/models/person-address.ts
+++ b/app/models/person-address.ts
@@ -1,21 +1,47 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import type { AddressLocationTypeCode } from '~/lib/constants'
+import type { PostalRegion } from './postal-region'
+import { toTitleCase } from '~/lib/utils'
 export interface PersonAddress extends Base {
   person_id: number
-  locationType: string
+  locationType_code: AddressLocationTypeCode
   address: string
   rt?: string
   rw?: string
-  postalCode?: string
+  postalRegion_code?: string
   village_code: string
+
+  // preload
+  postalRegion?: PostalRegion | null
+  locationType?: AddressLocationTypeCode
 }
 
 export function genPersonAddress(): PersonAddress {
   return {
     ...genBase(),
     person_id: 0,
-    locationType: '',
+    locationType_code: '',
     address: '',
     village_code: '',
   }
 }
+
+export function formatAddress(builder?: PersonAddress) {
+  if (!builder) return ''
+
+  const village = builder?.postalRegion?.village
+  const district = village?.district
+  const regency = district?.regency
+  const province = regency?.province
+
+  const parts = [
+    builder?.address,
+    village?.name,
+    district?.name,
+    toTitleCase(regency?.name || ''),
+    toTitleCase(province?.name || ''),
+    builder?.postalRegion_code,
+  ].filter(Boolean)
+
+  return parts.join(', ')
+}
diff --git a/app/models/person-relative.ts b/app/models/person-relative.ts
index 3b140abb..0391b63a 100644
--- a/app/models/person-relative.ts
+++ b/app/models/person-relative.ts
@@ -12,3 +12,4 @@ export interface PersonRelative {
   occupation_code?: string
   responsible?: boolean
 }
+
diff --git a/app/models/person.ts b/app/models/person.ts
index 435eae4b..06b313b8 100644
--- a/app/models/person.ts
+++ b/app/models/person.ts
@@ -1,13 +1,17 @@
 import { type Base, genBase } from "./_base"
+import type { PersonAddress } from "./person-address"
+import type { PersonContact } from "./person-contact"
+import type { PersonRelative } from "./person-relative"
+import type { Ethnic } from './ethnic'
+import type { Language } from './language'
+import type { Regency } from './regency'
 
 export interface Person extends Base {
-  // todo: awaiting approve from stake holder: buat field sapaan
-  // todo: adjust field ketika person  Balita
   name: string
-  alias?: string
+  // alias?: string
   frontTitle?: string
   endTitle?: string
-  birthDate?: Date | string
+  birthDate?: string
   birthRegency_code?: string
   gender_code?: string
   residentIdentityNumber?: string
@@ -26,6 +30,14 @@ export interface Person extends Base {
   passportFileUrl?: string
   drivingLicenseFileUrl?: string
   familyIdentityFileUrl?: string
+
+  // preload data for detail patient
+  birthRegency?: Regency | null
+  addresses?: PersonAddress[] | null
+  contacts?: PersonContact[] | null
+  relatives?: PersonRelative[] | null
+  ethnic?: Ethnic | null
+  language?: Language | null
 }
 
 export function genPerson(): Person {
diff --git a/app/models/postal-region.ts b/app/models/postal-region.ts
new file mode 100644
index 00000000..581d0bc7
--- /dev/null
+++ b/app/models/postal-region.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from './_base'
+import type { Village } from './village'
+
+export interface PostalRegion extends Base {
+  code: string
+  village_code: string
+
+  // preload
+  village?: Village | null
+}
+
+export function genPostalRegion(): PostalRegion {
+  return {
+    ...genBase(),
+    code: '',
+    village_code: '',
+  }
+}
diff --git a/app/models/procedure-src.ts b/app/models/procedure-src.ts
new file mode 100644
index 00000000..c86adcf9
--- /dev/null
+++ b/app/models/procedure-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface ProcedureSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genProcedureSrc(): ProcedureSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}
diff --git a/app/models/regency.ts b/app/models/regency.ts
index 494f256e..09418a52 100644
--- a/app/models/regency.ts
+++ b/app/models/regency.ts
@@ -1,9 +1,12 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
+import type { Province } from './province'
 
 export interface Regency extends Base {
   code: string
   name: string
   province_code: string
+
+  province?: Province | null
 }
 
 export function genRegency(): Regency {
diff --git a/app/models/village.ts b/app/models/village.ts
new file mode 100644
index 00000000..6e36636f
--- /dev/null
+++ b/app/models/village.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+import type { District } from './district'
+
+export interface Village extends Base {
+  district_code: string
+  code: string
+  name: string
+
+  // preload
+  district?: District | null
+}
+
+export function genVillage(): Village {
+  return {
+    ...genBase(),
+    district_code: '',
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/pages/(features)/client/patient/add.vue b/app/pages/(features)/client/patient/add.vue
index 12df14ed..ca4615e2 100644
--- a/app/pages/(features)/client/patient/add.vue
+++ b/app/pages/(features)/client/patient/add.vue
@@ -28,12 +28,13 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+const callbackUrl = route.query['return-path'] as string | undefined
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentPatientEntry />
+      <ContentPatientEntry :callback-url="callbackUrl" />
     </div>
     <Error
       v-else
diff --git a/app/pages/(features)/mcu-src/diagnose/index.vue b/app/pages/(features)/mcu-src/diagnose/index.vue
new file mode 100644
index 00000000..c557cf5f
--- /dev/null
+++ b/app/pages/(features)/mcu-src/diagnose/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Diagnosis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDiagnoseSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/mcu/index.vue b/app/pages/(features)/mcu-src/mcu/index.vue
new file mode 100644
index 00000000..cefa57c6
--- /dev/null
+++ b/app/pages/(features)/mcu-src/mcu/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Medical Checkup',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">MCU - SRC</template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/medical-action/index.vue b/app/pages/(features)/mcu-src/medical-action/index.vue
new file mode 100644
index 00000000..7e471367
--- /dev/null
+++ b/app/pages/(features)/mcu-src/medical-action/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Aksi Medis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentMedicalActionSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/procedure/index.vue b/app/pages/(features)/mcu-src/procedure/index.vue
new file mode 100644
index 00000000..030c0ab3
--- /dev/null
+++ b/app/pages/(features)/mcu-src/procedure/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Prosedur',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentProcedureSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/_dev/data-table/index.cfg.ts b/app/pages/_dev/data-table/index.cfg.ts
new file mode 100644
index 00000000..4eba929e
--- /dev/null
+++ b/app/pages/_dev/data-table/index.cfg.ts
@@ -0,0 +1,37 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'No.RM.' },
+    { label: 'Nama Pasien' },
+    { label: 'Tempat Lahir' },
+    { label: '' },
+  ]],
+
+  keys: ['number', 'person.name', 'person.birthPlace_regency.name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/pages/_dev/data-table/index.data.ts b/app/pages/_dev/data-table/index.data.ts
new file mode 100644
index 00000000..16989c3f
--- /dev/null
+++ b/app/pages/_dev/data-table/index.data.ts
@@ -0,0 +1,67 @@
+export interface Regency {
+  id: number
+  code: string
+  name: string
+}
+
+export interface Person {
+  id: number
+  name: string
+  residentIdentityNumber?: string
+  birthDate?: string
+  birthPlace_regency_code: string
+  birthPlace_regency: Regency
+}
+
+export interface Patient {
+  id: number
+  number: string
+  person: Person
+}
+
+export const regencies: Regency[] = [
+  {
+    id: 1,
+    code: '3522',
+    name: 'Bojonegoro',
+  },
+  {
+    id: 2,
+    code: '3579',
+    name: 'Batu',
+  },
+]
+
+export const people: Person[] = [
+  {
+    id: 1,
+    name: 'Abdul Manap',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[0],
+  },
+  {
+    id: 2,
+    name: 'Abdul Gofur',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[1],
+  },
+]
+
+export const data: Patient[] = [
+  {
+    id: 1,
+    number: 'RM-0000001',
+    person_id: 1,
+    person: people[0],
+  },
+  {
+    id: 2,
+    number: 'RM-0000002',
+    person_id: 2,
+    person: people[1],
+  }
+]
diff --git a/app/pages/_dev/data-table/index.vue b/app/pages/_dev/data-table/index.vue
new file mode 100644
index 00000000..0e2c8308
--- /dev/null
+++ b/app/pages/_dev/data-table/index.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+  import { config } from './index.cfg'
+  import { data } from './index.data'
+</script>
+
+<template>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
+</template>
diff --git a/app/schemas/consultation.schema.ts b/app/schemas/consultation.schema.ts
index 0dbf054b..b1d306f5 100644
--- a/app/schemas/consultation.schema.ts
+++ b/app/schemas/consultation.schema.ts
@@ -1,12 +1,13 @@
 import { z } from 'zod'
-import type { Consultation } from '~/models/consultation'
+import type { CreateDto } from '~/models/consultation'
 
 const ConsultationSchema = z.object({
-  unit_id: z.number({ required_error: 'Unit harus diisi' }),
-  problem: z.string({ required_error: 'Uraian harus diisi' }).min(20, 'Kode minimum 20 karakter'),
+  date: z.string({ required_error: 'Tanggal harus diisi' }),
+  dstUnit_id: z.number({ required_error: 'Unit harus diisi' }),
+  problem: z.string({ required_error: 'Uraian harus diisi' }).min(20, 'Uraian minimum 20 karakter'),
 })
 
-type ConsultationFormData = z.infer<typeof ConsultationSchema> & (Consultation)
+type ConsultationFormData = z.infer<typeof ConsultationSchema> & (CreateDto)
 
 export { ConsultationSchema }
 export type { ConsultationFormData }
diff --git a/app/schemas/device-order.schema.ts b/app/schemas/device-order.schema.ts
new file mode 100644
index 00000000..b0c2a56c
--- /dev/null
+++ b/app/schemas/device-order.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { DeviceOrder } from '~/models/device-order'
+
+const DeviceOrderSchema = z.object({
+  encounter_id: z.number({ required_error: 'Kode harus diisi' }),
+  doctor_id: z.number({ required_error: 'Kode harus diisi' }),
+})
+
+type DeviceOrderFormData = z.infer<typeof DeviceOrderSchema> & Partial<DeviceOrder>
+
+export { DeviceOrderSchema }
+export type { DeviceOrderFormData }
diff --git a/app/schemas/diagnose-src.schema.ts b/app/schemas/diagnose-src.schema.ts
new file mode 100644
index 00000000..c174f4c8
--- /dev/null
+++ b/app/schemas/diagnose-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const DiagnoseSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type DiagnoseSrcFormData = z.infer<typeof DiagnoseSrcSchema> & Partial<DiagnoseSrc>
+
+export { DiagnoseSrcSchema }
+export type { DiagnoseSrcFormData }
diff --git a/app/schemas/medical-action-src.schema.ts b/app/schemas/medical-action-src.schema.ts
new file mode 100644
index 00000000..a1caaeeb
--- /dev/null
+++ b/app/schemas/medical-action-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const MedicalActionSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  type_code: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type MedicalActionSrcFormData = z.infer<typeof MedicalActionSrcSchema> & Partial<MedicalActionSrc>
+
+export { MedicalActionSrcSchema }
+export type { MedicalActionSrcFormData }
diff --git a/app/schemas/patient.schema.ts b/app/schemas/patient.schema.ts
index 1dc0a4c7..2af50a67 100644
--- a/app/schemas/patient.schema.ts
+++ b/app/schemas/patient.schema.ts
@@ -6,22 +6,46 @@ const CommunicationBarrierSchema = z
   })
   .transform((val) => val === 'YA')
 
+const IsNewBornSchema = z
+  .enum(['YA', 'TIDAK'], {
+    required_error: 'Mohon lengkapi status pasien',
+  })
+  .transform((val) => val === 'YA')
+
+const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+
 const PatientSchema = z
   .object({
     // Data Diri Pasien
-    identityNumber: z
-      .string({
-        required_error: 'Mohon lengkapi NIK',
+    identityNumber: z.string().optional(),
+    // .string({
+    //   required_error: 'Mohon lengkapi NIK',
+    // })
+    // .min(16, 'NIK harus berupa angka 16 digit')
+    // .regex(/^\d+$/, 'NIK harus berupa angka 16 digit'),
+    residentIdentityFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
       })
-      .min(16, 'NIK harus berupa angka 16 digit')
-      .regex(/^\d+$/, 'NIK harus berupa angka 16 digit'),
-    // identityCardFile: z.instanceof(File, { message: 'File KTP harus dipilih' }),
-    // familyCardFile: z.instanceof(File, { message: 'File KK harus dipilih' }),
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+
+    familyIdentityFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
+      })
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+    // .refine(f => ['image/jpeg', 'image/png'].includes(f.type), 'Hanya JPG/PNG')
 
     // Informasi Dasar
-    alias: z.string({
-      required_error: 'Mohon pilih sapaan',
-    }),
+    // alias: z.string({
+    //   required_error: 'Mohon pilih sapaan',
+    // }),
     fullName: z.string({
       required_error: 'Mohon lengkapi Nama',
     }),
@@ -71,6 +95,7 @@ const PatientSchema = z
     nationality: z.string({
       required_error: 'Pilih Kebangsaan',
     }),
+    isNewBorn: IsNewBornSchema,
     language: z.string({
       required_error: 'Mohon pilih Preferensi Bahasa',
     }),
@@ -99,13 +124,52 @@ const PatientSchema = z
     note: z.string().optional(),
     drivingLicenseNumber: z.string().optional(),
   })
-  .refine((data) => (data.disability === 'TIDAK' ? !data.disabilityType : true), {
-    message: "DisabilityType hanya boleh diisi jika disability = 'YA'",
-    path: ['disabilityType'],
-  })
-  .refine((data) => (data.disability === 'YA' ? !!data.disabilityType?.trim() : true), {
-    message: 'Mohon pilih Jenis Disabilitas',
-    path: ['disabilityType'],
+  .refine(
+    (data) => {
+      // Jika disability = 'TIDAK', maka disabilityType harus kosong atau undefined
+      if (data.disability === 'TIDAK') {
+        return !data.disabilityType || data.disabilityType.trim() === ''
+      }
+      return true
+    },
+    {
+      message: "Jenis Disabilitas harus kosong jika Status Disabilitas = 'TIDAK'",
+      path: ['disabilityType'],
+    },
+  )
+  .refine(
+    (data) => {
+      // Jika disability = 'YA', maka disabilityType wajib diisi
+      if (data.disability === 'YA') {
+        return !!data.disabilityType?.trim()
+      }
+      return true
+    },
+    {
+      message: 'Mohon pilih Jenis Disabilitas',
+      path: ['disabilityType'],
+    },
+  )
+  // .refine((data) => {
+  //   // Jika nationality = 'WNA', maka passportNumber wajib diisi
+  //   if (data.nationality === 'WNA') {
+  //     return !!data.passportNumber?.trim()
+  //   }
+  //   return true
+  // }, {
+  //   message: 'Nomor Paspor wajib diisi untuk Warga Negara Asing',
+  //   path: ['passportNumber'],
+  // })
+  .transform((data) => {
+    // Transform untuk backend: hanya kirim disabilityType sesuai kondisi
+    return {
+      ...data,
+      // Jika disability = 'YA', kirim disabilityType
+      // Jika disability = 'TIDAK', kirim null untuk disabilityType
+      disabilityType: data.disability === 'YA' ? data.disabilityType : null,
+      // Hapus field disability karena yang dikirim ke backend adalah disabilityType
+      disability: undefined,
+    }
   })
 
 type PatientFormData = z.infer<typeof PatientSchema>
diff --git a/app/schemas/person-address-relative.schema.ts b/app/schemas/person-address-relative.schema.ts
index 43bac06e..091da1df 100644
--- a/app/schemas/person-address-relative.schema.ts
+++ b/app/schemas/person-address-relative.schema.ts
@@ -1,25 +1,58 @@
 import { z } from 'zod'
 import { PersonAddressSchema } from './person-address.schema'
 
-// Schema untuk alamat opsional ketika isSameAddress = '1'
-const OptionalAddressSchema = PersonAddressSchema.partial()
+const PersonAddressRelativeSchema = z
+  .object({
+    isSameAddress: z
+      .union([z.literal('1'), z.literal('0'), z.boolean()])
+      .default('1')
+      .transform((val) => {
+        if (typeof val === 'boolean') return val ? '1' : '0'
+        return val
+      }),
+  })
+  .merge(PersonAddressSchema.partial())
+  .superRefine((data, ctx) => {
+    const isSameAddress = data.isSameAddress
 
-// Schema untuk alamat required ketika isSameAddress = '0'
-const RequiredAddressSchema = PersonAddressSchema
+    // Jika alamat tidak sama ('0'), maka semua field address wajib diisi
+    if (isSameAddress === '0') {
+      const requiredFields = [
+        'province_code',
+        'regency_code',
+        'district_code',
+        'village_code',
+        'postalRegion_code',
+        'address',
+      ]
 
-const PersonAddressRelativeSchema = z.discriminatedUnion('isSameAddress', [
-  z
-    .object({
-      isSameAddress: z.literal('1').default('1'),
-    })
-    .merge(OptionalAddressSchema),
+      requiredFields.forEach((field) => {
+        if (!data[field as keyof typeof data]) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: getRequiredMessage(field),
+            path: [field],
+          })
+        }
+      })
+    }
+  })
+  .transform((data) => ({
+    ...data,
+    isSameAddress: data.isSameAddress === '1',
+  }))
 
-  z
-    .object({
-      isSameAddress: z.literal('0'),
-    })
-    .merge(RequiredAddressSchema),
-])
+function getRequiredMessage(field: string): string {
+  const messages: Record<string, string> = {
+    province_code: 'Mohon pilih provinsi',
+    regency_code: 'Mohon pilih kabupaten/kota',
+    district_code: 'Mohon pilih kecamatan',
+    village_code: 'Mohon pilih kelurahan',
+    postalRegion_code: 'Mohon lengkapi kode pos',
+    address: 'Mohon lengkapi alamat',
+  }
+  return messages[field] || `${field} wajib diisi`
+}
 
 type PersonAddressRelativeFormData = z.infer<typeof PersonAddressRelativeSchema>
 
diff --git a/app/schemas/person-address.schema.ts b/app/schemas/person-address.schema.ts
index 93ce6396..3e991bad 100644
--- a/app/schemas/person-address.schema.ts
+++ b/app/schemas/person-address.schema.ts
@@ -1,6 +1,9 @@
 import { z } from 'zod'
 
 const PersonAddressSchema = z.object({
+  locationType_code: z.string({
+    required_error: 'Mohon pilih jenis alamat',
+  }),
   address: z.string({
     required_error: 'Mohon lengkapi alamat',
   }),
@@ -16,8 +19,7 @@ const PersonAddressSchema = z.object({
   village_code: z.string({
     required_error: 'Mohon pilih kelurahan',
   }),
-  // diganti postalCode, zipCode hanya beberapa negara, kurang universal
-  postalCode: z.string({
+  postalRegion_code: z.string({
     required_error: 'Mohon lengkapi kode pos',
   }),
   // .min(5, 'Kode pos harus berupa angka 5 digit')
diff --git a/app/schemas/procedure-src.schema.ts b/app/schemas/procedure-src.schema.ts
new file mode 100644
index 00000000..dfbdc43a
--- /dev/null
+++ b/app/schemas/procedure-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const ProcedureSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type ProcedureSrcFormData = z.infer<typeof ProcedureSrcSchema> & Partial<ProcedureSrc>
+
+export { ProcedureSrcSchema }
+export type { ProcedureSrcFormData }
diff --git a/app/services/_crud-base.ts b/app/services/_crud-base.ts
index 8b4d3bc2..e3c57689 100644
--- a/app/services/_crud-base.ts
+++ b/app/services/_crud-base.ts
@@ -37,9 +37,20 @@ export async function getList(path: string, params: any = null, name: string = '
   }
 }
 
-export async function getDetail(path: string, id: number | string, name: string = 'item') {
+export async function getDetail(path: string, id: number | string, name: string = 'item', params?: any) {
   try {
-    const resp = await xfetch(`${path}/${id}`, 'GET')
+    let paramStr = ''
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      paramStr += queryString ? `?${queryString}` : ''
+    }
+    const resp = await xfetch(`${path}/${id}${paramStr}`, 'GET')
     const result: any = {}
     result.success = resp.success
     result.body = (resp.body as Record<string, any>) || {}
diff --git a/app/services/device-order-item.service.ts b/app/services/device-order-item.service.ts
new file mode 100644
index 00000000..33b92b8c
--- /dev/null
+++ b/app/services/device-order-item.service.ts
@@ -0,0 +1,26 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/device-order-item'
+const name = 'device-order-item'
+
+export function create(data: any) {
+  console.log('service create', data)
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/device-order.service.ts b/app/services/device-order.service.ts
new file mode 100644
index 00000000..b8d5372c
--- /dev/null
+++ b/app/services/device-order.service.ts
@@ -0,0 +1,26 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/device-order'
+const name = 'device-order'
+
+export function create(data: any) {
+  console.log('service create', data)
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/diagnose-src.service.ts b/app/services/diagnose-src.service.ts
new file mode 100644
index 00000000..4c5b50d4
--- /dev/null
+++ b/app/services/diagnose-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const path = '/api/v1/diagnose-src'
+const name = 'diagnose-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: DiagnoseSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/district.service.ts b/app/services/district.service.ts
new file mode 100644
index 00000000..fd817b3a
--- /dev/null
+++ b/app/services/district.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/district'
+const name = 'district'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/encounter.service.ts b/app/services/encounter.service.ts
index bf83c843..cd7c28ed 100644
--- a/app/services/encounter.service.ts
+++ b/app/services/encounter.service.ts
@@ -15,8 +15,8 @@ export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id, name)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {
diff --git a/app/services/medical-action-src.service.ts b/app/services/medical-action-src.service.ts
new file mode 100644
index 00000000..aa196962
--- /dev/null
+++ b/app/services/medical-action-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const path = '/api/v1/medical-action-src'
+const name = 'medical-action-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: MedicalActionSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/patient.service.ts b/app/services/patient.service.ts
index b28f92ab..7591f356 100644
--- a/app/services/patient.service.ts
+++ b/app/services/patient.service.ts
@@ -1,4 +1,5 @@
 import { xfetch } from '~/composables/useXfetch'
+import { uploadCode, type UploadCodeKey } from '~/lib/constants'
 
 const mainUrl = '/api/v1/patient'
 
@@ -77,3 +78,30 @@ export async function removePatient(id: number) {
     throw new Error('Failed to delete patient')
   }
 }
+
+export async function uploadAttachment(file: File, userId: number, key: UploadCodeKey) {
+  try {
+    const resolvedKey = uploadCode[key]
+    if (!resolvedKey) {
+      throw new Error(`Invalid upload code key: ${key}`)
+    }
+
+    // siapkan form-data body
+    const formData = new FormData()
+    formData.append('code', resolvedKey)
+    formData.append('content', file)
+
+    // kirim via xfetch
+    const resp = await xfetch(`${mainUrl}/${userId}/upload`, 'POST', formData)
+
+    // struktur hasil sama seperti patchPatient
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+
+    return result
+  } catch (error) {
+    console.error('Error uploading attachment:', error)
+    throw new Error('Failed to upload attachment')
+  }
+}
diff --git a/app/services/postal-region.service.ts b/app/services/postal-region.service.ts
new file mode 100644
index 00000000..8273dca0
--- /dev/null
+++ b/app/services/postal-region.service.ts
@@ -0,0 +1,17 @@
+// Base service for postal code operations
+import * as base from './_crud-base'
+
+const path = '/api/v1/postal-region'
+const name = 'postal-region'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
diff --git a/app/services/procedure-src.service.ts b/app/services/procedure-src.service.ts
new file mode 100644
index 00000000..a4bca68b
--- /dev/null
+++ b/app/services/procedure-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const path = '/api/v1/procedure-src'
+const name = 'procedure-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: ProcedureSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/province.service.ts b/app/services/province.service.ts
new file mode 100644
index 00000000..0fb26e7a
--- /dev/null
+++ b/app/services/province.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/province'
+const name = 'province'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/regency.service.ts b/app/services/regency.service.ts
new file mode 100644
index 00000000..c5919610
--- /dev/null
+++ b/app/services/regency.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/regency'
+const name = 'regency'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/village.service.ts b/app/services/village.service.ts
new file mode 100644
index 00000000..b41bd9d5
--- /dev/null
+++ b/app/services/village.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/village'
+const name = 'village'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8176a4fb..c5ac4c6c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,9 +5,9 @@ import process from 'node:process'
 export default defineNuxtConfig({
   devtools: { enabled: true },
   runtimeConfig: {
-    API_ORIGIN: process.env.NUXT_API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
+    API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
     public: {
-      API_ORIGIN: process.env.NUXT_API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
+      API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
     }
   },
   ssr: false,
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index c7b15101..19491069 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -259,6 +259,18 @@
           {
             "title": "Checkup",
             "link": "/mcu-src/mcu"
+          },
+          {
+            "title": "Prosedur",
+            "link": "/mcu-src/procedure"
+          },
+          {
+            "title": "Diagnosis",
+            "link": "/mcu-src/diagnose"
+          },
+          {
+            "title": "Medical Action",
+            "link": "/mcu-src/medical-action"
           }
         ]
       },