diff --git a/.prettierrc.json b/.prettierrc.json
index 28b1a8b3..bff36007 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -5,5 +5,7 @@
   "trailingComma": "all",
   "printWidth": 120,
   "semi": false,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "htmlWhitespaceSensitivity": "ignore",
+  "singleAttributePerLine": true
 }
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 8f547641..b5064af7 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -346,6 +346,7 @@ body, table, label {
   color: hsl(var(--destructive));
   /* font-size: 0.875rem; */
   margin-top: 0.25rem;
+  min-height: 1rem; /* Reserve space to prevent CLS */
   line-height: 1.25;
 }
 
@@ -374,4 +375,4 @@ body, table, label {
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 1.25rem;
   }
-}
\ No newline at end of file
+}
diff --git a/app/components/app/assesment-function/entry-form.vue b/app/components/app/assesment-function/entry-form.vue
new file mode 100644
index 00000000..5768c6a0
--- /dev/null
+++ b/app/components/app/assesment-function/entry-form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/assesment-function/list-cfg.ts b/app/components/app/assesment-function/list-cfg.ts
new file mode 100644
index 00000000..460cacd9
--- /dev/null
+++ b/app/components/app/assesment-function/list-cfg.ts
@@ -0,0 +1,119 @@
+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: 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
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/assesment-function/list.vue b/app/components/app/assesment-function/list.vue
new file mode 100644
index 00000000..b9a74929
--- /dev/null
+++ b/app/components/app/assesment-function/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/assesment-function/picker.vue b/app/components/app/assesment-function/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/assesment-function/search.vue b/app/components/app/assesment-function/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/bed/entry-form.vue b/app/components/app/bed/entry-form.vue
new file mode 100644
index 00000000..fb851aa4
--- /dev/null
+++ b/app/components/app/bed/entry-form.vue
@@ -0,0 +1,105 @@
+<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'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.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: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: 'counter',
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = 'counter'
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || 'counter',
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-counter" @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>
+    </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/bed/list-cfg.ts b/app/components/app/bed/list-cfg.ts
new file mode 100644
index 00000000..5174e69a
--- /dev/null
+++ b/app/components/app/bed/list-cfg.ts
@@ -0,0 +1,47 @@
+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: 100 }, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'parent', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { 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 || '-'
+  },
+}
+
+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/bed/list.vue b/app/components/app/bed/list.vue
new file mode 100644
index 00000000..af63d76e
--- /dev/null
+++ b/app/components/app/bed/list.vue
@@ -0,0 +1,36 @@
+<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'
+
+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">
+    <PubBaseDataTable
+      :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" />
+  </div>
+</template>
diff --git a/app/components/app/building/entry-form.vue b/app/components/app/building/entry-form.vue
new file mode 100644
index 00000000..c2851e2d
--- /dev/null
+++ b/app/components/app/building/entry-form.vue
@@ -0,0 +1,108 @@
+<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
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.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: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.building,  
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id] = defineField('parent_id')
+
+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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.building
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.building,
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @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>
+    </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/building/list-cfg.ts b/app/components/app/building/list-cfg.ts
new file mode 100644
index 00000000..905ec837
--- /dev/null
+++ b/app/components/app/building/list-cfg.ts
@@ -0,0 +1,37 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+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 header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+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/building/list.vue b/app/components/app/building/list.vue
new file mode 100644
index 00000000..e1b056ce
--- /dev/null
+++ b/app/components/app/building/list.vue
@@ -0,0 +1,41 @@
+<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 { cols, funcComponent, funcHtml, funcParsed, header, keys } 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
+      :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" />
+  </div>
+</template>
diff --git a/app/components/app/chamber/entry-form.vue b/app/components/app/chamber/entry-form.vue
new file mode 100644
index 00000000..fb851aa4
--- /dev/null
+++ b/app/components/app/chamber/entry-form.vue
@@ -0,0 +1,105 @@
+<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'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.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: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: 'counter',
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = 'counter'
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || 'counter',
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-counter" @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>
+    </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/chamber/list-cfg.ts b/app/components/app/chamber/list-cfg.ts
new file mode 100644
index 00000000..5174e69a
--- /dev/null
+++ b/app/components/app/chamber/list-cfg.ts
@@ -0,0 +1,47 @@
+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: 100 }, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'parent', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { 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 || '-'
+  },
+}
+
+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/chamber/list.vue b/app/components/app/chamber/list.vue
new file mode 100644
index 00000000..af63d76e
--- /dev/null
+++ b/app/components/app/chamber/list.vue
@@ -0,0 +1,36 @@
+<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'
+
+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">
+    <PubBaseDataTable
+      :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" />
+  </div>
+</template>
diff --git a/app/components/app/counter/entry-form.vue b/app/components/app/counter/entry-form.vue
new file mode 100644
index 00000000..c2851e2d
--- /dev/null
+++ b/app/components/app/counter/entry-form.vue
@@ -0,0 +1,108 @@
+<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
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.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: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.building,  
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id] = defineField('parent_id')
+
+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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.building
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.building,
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @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>
+    </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/counter/list-cfg.ts b/app/components/app/counter/list-cfg.ts
new file mode 100644
index 00000000..905ec837
--- /dev/null
+++ b/app/components/app/counter/list-cfg.ts
@@ -0,0 +1,37 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+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 header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+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/counter/list.vue b/app/components/app/counter/list.vue
new file mode 100644
index 00000000..e1b056ce
--- /dev/null
+++ b/app/components/app/counter/list.vue
@@ -0,0 +1,41 @@
+<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 { cols, funcComponent, funcHtml, funcParsed, header, keys } 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
+      :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" />
+  </div>
+</template>
diff --git a/app/components/app/division/entry-form.vue b/app/components/app/division/entry-form.vue
index a928c1bd..c58d83ac 100644
--- a/app/components/app/division/entry-form.vue
+++ b/app/components/app/division/entry-form.vue
@@ -4,6 +4,7 @@ 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 TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
 
 // Types
 import type { DivisionFormData } from '~/schemas/division.schema.ts'
@@ -15,6 +16,7 @@ import { useForm } from 'vee-validate'
 
 interface Props {
   schema: z.ZodSchema<any>
+  divisions: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -33,33 +35,38 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    division_id: '',
+    parent_id: null,
+    division_id: null,
   } as Partial<DivisionFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [division, divisionAttrs] = defineField('division_id')
+const [parent, parentAttrs] = defineField('parent_id')
+const [division] = defineField('division_id')
 
 // Fill fields from props.values if provided
 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.division_id !== undefined) division.value = props.values.division_id
+  if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
+  if (props.values.division_id !== undefined) division.value = String(props.values.division_id)
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  division.value = ''
+  parent.value = null
+  division.value = null
 }
 
 // Form submission handler
-function onSubmitForm(values: any) {
+function onSubmitForm() {
   const formData: DivisionFormData = {
     name: name.value || '',
     code: code.value || '',
-    division_id: division.value || '',
+    parent_id: parent.value || null,
+    division_id: division.value || null,
   }
   emit('submit', formData, resetForm)
 }
@@ -85,6 +92,22 @@ function onCancelForm() {
           <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
         </Field>
       </Cell>
+      <Cell>
+        <Label height="compact">Divisi Induk</Label>
+        <Field :errMessage="errors.division">
+          <TreeSelect
+            id="division"
+            v-model="parent"
+            v-bind="parentAttrs"
+            :data="divisions"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Divisi Induk"
+            search-placeholder="Cari divisi"
+            empty-message="Divisi tidak ditemukan"
+            :on-fetch-children="async (_parentId: string) => {}"
+          />
+        </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>
diff --git a/app/components/app/division/list-cfg.ts b/app/components/app/division/list-cfg.ts
index 079faf52..d5479579 100644
--- a/app/components/app/division/list-cfg.ts
+++ b/app/components/app/division/list-cfg.ts
@@ -12,11 +12,11 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
+export const cols: Col[] = [{}, {}, {}, { width: 50 }]
 
 export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]]
 
-export const keys = ['code', 'name', 'ancestor', 'action']
+export const keys = ['code', 'name', 'parent', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -24,13 +24,9 @@ export const delKeyNames: KeyLabel[] = [
 ]
 
 export const funcParsed: RecStrFuncUnknown = {
-  ancestor: (rec: unknown): unknown => {
+  parent: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
-    if (recX.meta === null) {
-      return '-'
-    }
-
-    return recX.meta.name
+    return recX.parent?.name || '-'
   },
 }
 
diff --git a/app/components/app/division/list.vue b/app/components/app/division/list.vue
index 9169bcac..e1b056ce 100644
--- a/app/components/app/division/list.vue
+++ b/app/components/app/division/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -31,7 +36,6 @@ function handlePageChange(page: number) {
       :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
-    <!-- FIXME: pindahkan ke content/division/list.vue   -->
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index a3ec0902..6f2ad074 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -1,11 +1,11 @@
 <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 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 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'
 import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
 
@@ -127,8 +127,8 @@ function onAddSep() {
               </Button>
             </span>
           </div>
-          <Block>
-            <FieldGroup :column="3">
+          <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">
@@ -145,10 +145,10 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
 
             <!-- NIK -->
-            <FieldGroup :column="3">
+            <Cell :cosSpan="3">
               <Label label-for="nik">NIK</Label>
               <Field id="nik" :errors="errors">
                 <FormField v-slot="{ componentField }" name="nik">
@@ -160,10 +160,8 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
-
-            <!-- No. RM -->
-            <FieldGroup :column="3">
+            </Cell>
+            <Cell>
               <Label label-for="rm">No. RM</Label>
               <Field id="rm" :errors="errors">
                 <FormField v-slot="{ componentField }" name="rm">
@@ -175,16 +173,17 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
-            <Separator />
+            </Cell>
           </Block>
+          <Separator />
 
           <div class="p-2">
             <h2 class="text-md font-semibold">Data Kunjungan</h2>
           </div>
-          <Block>
+
+          <Block :colCount="3">
             <!-- Dokter (Combobox) -->
-            <FieldGroup :column="3">
+            <Cell :cosSpan="3">
               <Label label-for="doctor_id">Dokter</Label>
               <Field id="doctor_id" :errors="errors">
                 <FormField v-slot="{ componentField }" name="doctor_id">
@@ -196,10 +195,10 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
 
             <!-- Tanggal Daftar (DatePicker) -->
-            <FieldGroup :column="3">
+            <Cell :cosSpan="3">
               <Label label-for="register_date">Tanggal Daftar</Label>
               <Field id="register_date" :errors="errors">
                 <FormField v-slot="{ componentField }" name="register_date">
@@ -211,10 +210,10 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
 
             <!-- Jenis Pembayaran (Combobox) -->
-            <FieldGroup :column="3">
+            <Cell :cosSpan="3">
               <Label label-for="payment_type">Jenis Pembayaran</Label>
               <Field id="payment_type" :errors="errors">
                 <FormField v-slot="{ componentField }" name="payment_type">
@@ -227,9 +226,11 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
+          </Block>
 
-            <FieldGroup :column="3">
+          <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">
@@ -245,10 +246,10 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
 
             <!-- No. Kartu BPJS -->
-            <FieldGroup :column="3">
+            <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">
@@ -264,10 +265,10 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
 
             <!-- Jenis SEP -->
-            <FieldGroup :column="3">
+            <Cell :cosSpan="3">
               <Label label-for="sep_type">Jenis SEP</Label>
               <Field id="sep_type" :errors="errors">
                 <FormField v-slot="{ componentField }" name="sep_type">
@@ -279,10 +280,12 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
+          </Block>
 
+          <Block :colCount="3">
             <!-- No. SEP (input + tombol +) -->
-            <FieldGroup :column="3">
+            <Cell :cosSpan="3">
               <Label label-for="sep_number">No. SEP</Label>
               <Field id="sep_number" :errors="errors">
                 <FormField v-slot="{ componentField }" name="sep_number">
@@ -302,10 +305,10 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
 
             <!-- Dokumen SEP (file) -->
-            <FieldGroup :column="3">
+            <Cell :cosSpan="3">
               <Label label-for="sep_file">Dokumen SEP</Label>
               <Field id="sep_file" :errors="errors">
                 <FormField v-slot="{ componentField }" name="sep_file">
@@ -323,10 +326,10 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
 
             <!-- Dokumen SIPP (file) -->
-            <FieldGroup :column="3">
+            <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">
@@ -344,7 +347,7 @@ function onAddSep() {
                   </FormItem>
                 </FormField>
               </Field>
-            </FieldGroup>
+            </Cell>
           </Block>
         </div>
       </div>
diff --git a/app/components/app/encounter/status.vue b/app/components/app/encounter/status.vue
new file mode 100644
index 00000000..e45c0a78
--- /dev/null
+++ b/app/components/app/encounter/status.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="p-10 text-center">Hello World!!!</div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
index 9d655fdf..3af2b398 100644
--- a/app/components/app/equipment/list.vue
+++ b/app/components/app/equipment/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/floor/entry-form.vue b/app/components/app/floor/entry-form.vue
new file mode 100644
index 00000000..19468df5
--- /dev/null
+++ b/app/components/app/floor/entry-form.vue
@@ -0,0 +1,125 @@
+<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 Combobox from '~/components/pub/my-ui/form/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  parents: 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: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.floor,
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = String(props.values.parent_id)
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.floor
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.floor,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-floor" @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">Gedung</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Gedung"
+            search-placeholder="Cari Gedung"
+            empty-message="Item tidak ditemukan"
+          />
+        </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/floor/list-cfg.ts b/app/components/app/floor/list-cfg.ts
new file mode 100644
index 00000000..33b1a8af
--- /dev/null
+++ b/app/components/app/floor/list-cfg.ts
@@ -0,0 +1,44 @@
+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: 'Kode' }, { label: 'Nama' }, { label: 'Gedung' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'parent', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { 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 || '-'
+  },
+}
+
+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/floor/list.vue b/app/components/app/floor/list.vue
new file mode 100644
index 00000000..e1b056ce
--- /dev/null
+++ b/app/components/app/floor/list.vue
@@ -0,0 +1,41 @@
+<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 { cols, funcComponent, funcHtml, funcParsed, header, keys } 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
+      :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" />
+  </div>
+</template>
diff --git a/app/components/app/icd/entry-form.vue b/app/components/app/icd/entry-form.vue
new file mode 100644
index 00000000..7c850a16
--- /dev/null
+++ b/app/components/app/icd/entry-form.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <Action />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/icd/list-cfg.ts b/app/components/app/icd/list-cfg.ts
new file mode 100644
index 00000000..c74ef59b
--- /dev/null
+++ b/app/components/app/icd/list-cfg.ts
@@ -0,0 +1,131 @@
+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'))
+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/icd/list.vue b/app/components/app/icd/list.vue
new file mode 100644
index 00000000..b9a74929
--- /dev/null
+++ b/app/components/app/icd/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    :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
new file mode 100644
index 00000000..9a08bb86
--- /dev/null
+++ b/app/components/app/icd/multiselect-picker.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{ data: any[] }>()
+const modelValue = defineModel<any | null>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-model="modelValue"
+    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/icd/preview.vue b/app/components/app/icd/preview.vue
new file mode 100644
index 00000000..36bb193c
--- /dev/null
+++ b/app/components/app/icd/preview.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Trash2 } from 'lucide-vue-next'
+// import { Button } from '@/components/ui/button'
+// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+
+interface Diagnosa {
+  id: number
+  diagnosa: string
+  icd: string
+}
+
+const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])
+
+function removeItem(id: number) {
+  list.value = list.value.filter((item) => item.id !== id)
+}
+</script>
+
+<template>
+  <div class="rounded-lg border bg-white shadow-sm">
+    <Table>
+      <TableHeader class="bg-gray-50">
+        <TableRow>
+          <TableHead class="w-[50px] text-center">NO.</TableHead>
+          <TableHead>DIAGNOSA</TableHead>
+          <TableHead class="w-[120px]">ICD-X</TableHead>
+          <TableHead class="w-[80px] text-center">AKSI</TableHead>
+        </TableRow>
+      </TableHeader>
+
+      <TableBody>
+        <TableRow v-for="(item, i) in list" :key="item.id">
+          <TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
+          <TableCell>{{ item.diagnosa }}</TableCell>
+          <TableCell>{{ item.icd }}</TableCell>
+          <TableCell class="text-center">
+            <Button variant="ghost" size="icon" @click="removeItem(item.id)">
+              <Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</template>
diff --git a/app/components/app/icd/search.vue b/app/components/app/icd/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/icd/status-badge.vue b/app/components/app/icd/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/icd/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/installation/entry-form.vue b/app/components/app/installation/entry-form.vue
index 4257b712..9d57b434 100644
--- a/app/components/app/installation/entry-form.vue
+++ b/app/components/app/installation/entry-form.vue
@@ -1,125 +1,119 @@
 <script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
-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 { Form } from '~/components/pub/ui/form'
+// 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 Combobox from '~/components/pub/my-ui/form/combobox.vue'
 
-interface InstallationFormData {
-  name: string
-  code: string
-  encounterClassCode: string
+// Types
+import type { InstallationFormData } from '~/schemas/installation.schema.ts'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  encounterClasses: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
 }
 
-const props = defineProps<{
-  installation: {
-    msg: {
-      placeholder: string
-    }
-    items: {
-      value: string
-      label: string
-      code: string
-    }[]
-  }
-  schema: any
-  initialValues?: Partial<InstallationFormData>
-  errors?: FormErrors
-}>()
-
+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: InstallationFormData, resetForm: () => void]
-  'cancel': [resetForm: () => void]
+  submit: [values: InstallationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
 }>()
 
-const formSchema = toTypedSchema(props.schema)
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    encounterClass_code: '',
+  } as Partial<InstallationFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [encounterClassCode, encounterClassCodeAttrs] = defineField('encounterClass_code')
+
+// Fill fields from props.values if provided
+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.encounterClass_code !== undefined) encounterClassCode.value = props.values.encounterClass_code
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  encounterClassCode.value = ''
+}
 
 // Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+function onSubmitForm(values: any) {
   const formData: InstallationFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    encounterClassCode: values.encounterClassCode || '',
+    name: name.value || '',
+    code: code.value || '',
+    encounterClass_code: encounterClassCode.value || '',
   }
   emit('submit', formData, resetForm)
 }
 
 // Form cancel handler
-function onCancelForm({ resetForm }: { resetForm: () => void }) {
+function onCancelForm() {
   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 instalasi" 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 instalasi" autocomplete="off" v-bind="componentField" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </FieldGroup>
-
-          <FieldGroup>
-            <Label label-for="parentId">Encounter Class</Label>
-            <Field id="encounterClassCode" :errors="errors">
-              <FormField v-slot="{ componentField }" name="encounterClassCode">
-                <FormItem>
-                  <FormControl>
-                    <Select
-                      v-bind="componentField"
-                      :items="installation.items"
-                      :placeholder="installation.msg.placeholder"
-                    />
-
-                  </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>
+  <form id="form-unit" @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">Encounter Class</Label>
+        <Field :errMessage="errors.encounterClass_code">
+          <Combobox
+            id="encounterClass_code"
+            v-model="encounterClassCode"
+            v-bind="encounterClassCodeAttrs"
+            :items="encounterClasses"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Encounter Class"
+            search-placeholder="Cari Encounter Class"
+            empty-message="Encounter tidak ditemukan"
+          />
+        </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/installation/list-cfg.ts b/app/components/app/installation/list-cfg.ts
index 81de0024..8c3fa5b4 100644
--- a/app/components/app/installation/list-cfg.ts
+++ b/app/components/app/installation/list-cfg.ts
@@ -12,13 +12,11 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
+export const cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [{ label: 'Id' }, { label: 'Nama' }, { label: 'Kode' }, { label: 'Encounter Class' }, { label: '' }],
-]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]]
 
-export const keys = ['id', 'name', 'cellphone', 'religion_code', 'action']
+export const keys = ['code', 'name', 'encounterClass_code', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -28,22 +26,7 @@ export const delKeyNames: KeyLabel[] = [
 export const funcParsed: RecStrFuncUnknown = {
   name: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.lastName || ''}`.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')
+    return `${recX.name}`.trim()
   },
 }
 
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index 72973ca3..e1b056ce 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -22,10 +27,15 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
-      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+      :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" />
   </div>
 </template>
diff --git a/app/components/app/medicine-group/list.vue b/app/components/app/medicine-group/list.vue
index 9d655fdf..3af2b398 100644
--- a/app/components/app/medicine-group/list.vue
+++ b/app/components/app/medicine-group/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/medicine-method/list.vue b/app/components/app/medicine-method/list.vue
index 9d655fdf..3af2b398 100644
--- a/app/components/app/medicine-method/list.vue
+++ b/app/components/app/medicine-method/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
index 0ef6fe5f..66ef4afb 100644
--- a/app/components/app/medicine/entry-form.vue
+++ b/app/components/app/medicine/entry-form.vue
@@ -16,10 +16,9 @@ interface Props {
   values?: any
   isLoading?: boolean
   isReadonly?: boolean
-  medicineGroups?: { value: string, label: string }[]
-  medicineMethods?: { value: string, label: string }[]
-  uoms?: { value: string, label: string }[]
-  infras?: { value: number|null, label: string }[]
+  medicineGroups?: { value: string; label: string }[]
+  medicineMethods?: { value: string; label: string }[]
+  uoms?: { value: string; label: string }[]
 }
 
 const props = defineProps<Props>()
@@ -38,7 +37,6 @@ const { defineField, errors, meta } = useForm({
     medicineGroup_code: '',
     medicineMethod_code: '',
     uom_code: '',
-    infra_id: null,
     stock: 0,
   },
 })
@@ -48,7 +46,6 @@ const [name, nameAttrs] = defineField('name')
 const [medicineGroup_code, medicineGroupAttrs] = defineField('medicineGroup_code')
 const [medicineMethod_code, medicineMethodAttrs] = defineField('medicineMethod_code')
 const [uom_code, uomAttrs] = defineField('uom_code')
-const [infra_id, infraAttrs] = defineField('infra_id')
 const [stock, stockAttrs] = defineField('stock')
 
 if (props.values) {
@@ -57,7 +54,6 @@ if (props.values) {
   if (props.values.medicineGroup_code !== undefined) medicineGroup_code.value = props.values.medicineGroup_code
   if (props.values.medicineMethod_code !== undefined) medicineMethod_code.value = props.values.medicineMethod_code
   if (props.values.uom_code !== undefined) uom_code.value = props.values.uom_code
-  if (props.values.infra_id !== undefined) infra_id.value = props.values.infra_id
   if (props.values.stock !== undefined) stock.value = props.values.stock
 }
 
@@ -67,7 +63,6 @@ const resetForm = () => {
   medicineGroup_code.value = ''
   medicineMethod_code.value = ''
   uom_code.value = ''
-  infra_id.value = null
   stock.value = 0
 }
 
@@ -78,7 +73,6 @@ function onSubmitForm() {
     medicineGroup_code: medicineGroup_code.value || '',
     medicineMethod_code: medicineMethod_code.value || '',
     uom_code: uom_code.value || '',
-    infra_id: infra_id.value === '' ? null : infra_id.value,
     stock: stock.value || 0,
   }
   emit('submit', formData, resetForm)
@@ -95,13 +89,25 @@ function onCancelForm() {
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+            class="input input-bordered w-full"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+            class="input input-bordered w-full"
+          />
         </Field>
       </Cell>
       <Cell>
@@ -163,7 +169,14 @@ function onCancelForm() {
       <Cell>
         <Label height="compact">Stok</Label>
         <Field :errMessage="errors.stock">
-          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full" />
+          <Input
+            id="stock"
+            v-model="stock"
+            type="number"
+            v-bind="stockAttrs"
+            :disabled="isLoading || isReadonly"
+            class="input input-bordered w-full"
+          />
         </Field>
       </Cell>
     </Block>
diff --git a/app/components/app/medicine/list-cfg.ts b/app/components/app/medicine/list-cfg.ts
index bde85bc9..b18c9606 100644
--- a/app/components/app/medicine/list-cfg.ts
+++ b/app/components/app/medicine/list-cfg.ts
@@ -35,13 +35,13 @@ export const delKeyNames: KeyLabel[] = [
 
 export const funcParsed: RecStrFuncUnknown = {
   group: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineGroup_code || '-'
+    return (rec as SmallDetailDto).medicineGroup?.name || '-'
   },
   method: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineMethod_code || '-'
+    return (rec as SmallDetailDto).medicineMethod?.name || '-'
   },
   unit: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).uom_code || '-'
+    return (rec as SmallDetailDto).uom?.name || '-'
   },
 }
 
diff --git a/app/components/app/medicine/list.vue b/app/components/app/medicine/list.vue
index 9d655fdf..3af2b398 100644
--- a/app/components/app/medicine/list.vue
+++ b/app/components/app/medicine/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/patient/_common/input-file.vue b/app/components/app/patient/_common/input-file.vue
new file mode 100644
index 00000000..38ad6cea
--- /dev/null
+++ b/app/components/app/patient/_common/input-file.vue
@@ -0,0 +1,58 @@
+<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'
+
+defineProps<{
+  fieldName: string
+  placeholder: string
+  label: string
+  errors?: FormErrors
+  class?: string
+  numericOnly?: boolean
+  maxLength?: number
+  isRequired?: boolean
+}>()
+</script>
+
+<template>
+  <FieldGroup>
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              v-bind="componentField"
+              type="file"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              @change="
+                (e: Event) => {
+                  const file = (e.target as HTMLInputElement).files?.[0] || null
+                  componentField.onChange(file)
+                }
+              "
+              @blur.prevent
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/input-patient-name.vue b/app/components/app/patient/_common/input-patient-name.vue
new file mode 100644
index 00000000..fbc57351
--- /dev/null
+++ b/app/components/app/patient/_common/input-patient-name.vue
@@ -0,0 +1,102 @@
+<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
new file mode 100644
index 00000000..463b3659
--- /dev/null
+++ b/app/components/app/patient/_common/radio-communication-barrier.vue
@@ -0,0 +1,94 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'gender',
+  label = 'Gender',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const genderOptions = [
+  { label: 'Ya', value: 'YA' },
+  { label: 'Tidak', value: 'TIDAK' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </Label>
+    <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 genderOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :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',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :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',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/radio-disability.vue b/app/components/app/patient/_common/radio-disability.vue
new file mode 100644
index 00000000..312c3730
--- /dev/null
+++ b/app/components/app/patient/_common/radio-disability.vue
@@ -0,0 +1,94 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'disability',
+  label = 'Disabilitas',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const dissabilityOptions = [
+  { label: 'Ya', value: 'YA' },
+  { label: 'Tidak', value: 'TIDAK' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </Label>
+    <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 dissabilityOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :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',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :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',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/radio-gender.vue b/app/components/app/patient/_common/radio-gender.vue
new file mode 100644
index 00000000..108b1d22
--- /dev/null
+++ b/app/components/app/patient/_common/radio-gender.vue
@@ -0,0 +1,92 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'gender',
+  label = 'Gender',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const genderOptions = mapToComboboxOptList(genderCodes)
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </Label>
+    <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 genderOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :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',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :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',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/radio-nationality.vue b/app/components/app/patient/_common/radio-nationality.vue
new file mode 100644
index 00000000..9c0eef1d
--- /dev/null
+++ b/app/components/app/patient/_common/radio-nationality.vue
@@ -0,0 +1,94 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'nationality',
+  label = 'Kebangsaan',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const nationalityOptions = [
+  { label: 'WNI', value: 'WNI' },
+  { label: 'WNA', value: 'WNA' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </Label>
+    <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 nationalityOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :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',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :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',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/select-disability.vue b/app/components/app/patient/_common/select-disability.vue
new file mode 100644
index 00000000..de65a07f
--- /dev/null
+++ b/app/components/app/patient/_common/select-disability.vue
@@ -0,0 +1,81 @@
+<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'
+
+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: 'Tuna Daksa', value: 'daksa' },
+  { label: 'Tuna Netra', value: 'netra' },
+  { label: 'Tuna Rungu', value: 'rungu' },
+  { label: 'Tuna Wicara', value: 'wicara' },
+  { label: 'Tuna Rungu-Wicara', value: 'rungu_wicara' },
+  { label: 'Tuna Grahita', value: 'grahita' },
+  { label: 'Tuna Laras', value: 'laras' },
+  { label: 'Lainnya', value: 'other', priority: -100 },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <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>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/select-dob.vue b/app/components/app/patient/_common/select-dob.vue
new file mode 100644
index 00000000..938bd254
--- /dev/null
+++ b/app/components/app/patient/_common/select-dob.vue
@@ -0,0 +1,142 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              id="birthDate"
+              type="date"
+              min="1900-01-01"
+              :max="new Date().toISOString().split('T')[0]"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+  <FieldGroup>
+    <Label label-for="patientAge">Usia</Label>
+
+    <Field id="patientAge">
+      <FormField name="patientAge">
+        <FormItem>
+          <FormControl>
+            <Input
+              :value="patientAge"
+              disabled
+              readonly
+              placeholder="Masukkan tanggal lahir"
+              :class="
+                cn(
+                  'cursor-not-allowed bg-gray-50 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/select-education.vue b/app/components/app/patient/_common/select-education.vue
new file mode 100644
index 00000000..33caac16
--- /dev/null
+++ b/app/components/app/patient/_common/select-education.vue
@@ -0,0 +1,88 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+const {
+  fieldName = 'education',
+  label = 'Pendidikan',
+  placeholder = 'Pilih pendidikan terakhir',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const extendOptions = [
+  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+  { label: 'Lainnya', value: 'other', priority: -1 },
+]
+
+const educationOptions = [
+  ...mapToComboboxOptList(educationCodes).map(({ label, value }) => ({
+    label,
+    value,
+  })),
+  ...extendOptions,
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :is-disabled="isDisabled"
+              :items="educationOptions"
+              :placeholder="placeholder"
+              :preserve-order="true"
+              :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>
+</template>
diff --git a/app/components/app/patient/_common/select-ethnicity.vue b/app/components/app/patient/_common/select-ethnicity.vue
new file mode 100644
index 00000000..a4231571
--- /dev/null
+++ b/app/components/app/patient/_common/select-ethnicity.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+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 { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+const {
+  fieldName = 'ethnicity',
+  label = 'Suku',
+  placeholder = 'Pilih suku',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const ethnicOptions = [
+  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+  { label: 'Jawa', value: 'jawa' },
+  { label: 'Sunda', value: 'sunda' },
+  { label: 'Batak', value: 'batak' },
+  { label: 'Betawi', value: 'betawi' },
+  { label: 'Minangkabau', value: 'minangkabau' },
+  { label: 'Bugis', value: 'bugis' },
+  { label: 'Madura', value: 'madura' },
+  { label: 'Banjar', value: 'banjar' },
+  { label: 'Bali', value: 'bali' },
+  { label: 'Dayak', value: 'dayak' },
+  { label: 'Aceh', value: 'aceh' },
+  { label: 'Sasak', value: 'sasak' },
+  { label: 'Papua', value: 'papua' },
+  { label: 'Lainnya', value: 'lainnya', priority: -100 },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </Label>
+    <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="ethnicOptions"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari..."
+              empty-message="Suku tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/select-job.vue b/app/components/app/patient/_common/select-job.vue
new file mode 100644
index 00000000..b9804bb5
--- /dev/null
+++ b/app/components/app/patient/_common/select-job.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+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 { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  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 },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <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="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Jenis Pekerjaan tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/select-lang.vue b/app/components/app/patient/_common/select-lang.vue
new file mode 100644
index 00000000..aadf9313
--- /dev/null
+++ b/app/components/app/patient/_common/select-lang.vue
@@ -0,0 +1,82 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'language',
+  label = 'Bahasa',
+  placeholder = 'Pilih preferensi bahasa',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const langOptions = [
+  { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
+  { label: 'Bahasa Jawa', value: 'jawa' },
+  { label: 'Bahasa Sunda', value: 'sunda' },
+  { label: 'Bahasa Bali', value: 'bali' },
+  { label: 'Bahasa Jaksel', value: 'jaksel' },
+  { label: 'Bahasa Inggris', value: 'en' },
+  { label: 'Tidak Diketahui', value: 'unknown', priority: 100 },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="langOptions"
+              :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>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/select-marital-status.vue b/app/components/app/patient/_common/select-marital-status.vue
new file mode 100644
index 00000000..cb3b56fb
--- /dev/null
+++ b/app/components/app/patient/_common/select-marital-status.vue
@@ -0,0 +1,78 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  placeholder?: string
+}>()
+
+const {
+  fieldName = 'maritalStatus',
+  label = 'Status Pernikahan',
+  errors,
+  class: containerClass,
+  labelClass,
+  placeholder = 'Pilih',
+} = props
+
+const maritalStatusOptions = [
+  { label: 'Tidak Diketahui', value: 'TIDAK_DIKETAHUI' },
+  { label: 'Belum Kawin', value: 'BELUM_KAWIN' },
+  { label: 'Kawin', value: 'KAWIN' },
+  { label: 'Cerai Hidup', value: 'CERAI_HIDUP' },
+  { label: 'Cerai Mati', value: 'CERAI_MATI' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="maritalStatusOptions"
+              :placeholder="placeholder"
+              :preserve-order="true"
+              :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>
+</template>
diff --git a/app/components/app/patient/_common/select-religion.vue b/app/components/app/patient/_common/select-religion.vue
new file mode 100644
index 00000000..069e3575
--- /dev/null
+++ b/app/components/app/patient/_common/select-religion.vue
@@ -0,0 +1,86 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'religion',
+  label = 'Agama',
+  placeholder = 'Pilih kepercayaan',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const extendOptions = [
+  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+  { label: 'Kepercayaan Lain', value: 'other', priority: -1 },
+]
+
+const religionOptions = [
+  ...mapToComboboxOptList(religionCodes).map(({ label, value }) => ({
+    label,
+    value,
+  })),
+  ...extendOptions,
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="religionOptions"
+              :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>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index 7c850a16..e3587988 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -1,43 +1,225 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+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 RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
+import RadioDisability from './_common/radio-disability.vue'
+import RadioGender from './_common/radio-gender.vue'
+import RadioNationality from './_common/radio-nationality.vue'
+import SelectDisability from './_common/select-disability.vue'
+import SelectDob from './_common/select-dob.vue'
+import SelectEducation from './_common/select-education.vue'
+import SelectEthnicity from './_common/select-ethnicity.vue'
+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'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <Block>
-        <FieldGroup :column="3">
-          <Label>Nama</Label>
-          <Field>
-            <Input type="text" name="name" />
-          </Field>
-        </FieldGroup>
-        <FieldGroup :column="3">
-          <Label>Nama</Label>
-          <Field>
-            <Input type="text" name="name" />
-          </Field>
-        </FieldGroup>
-        <FieldGroup :column="3">
-          <Label>Nomor RM</Label>
-          <Field>
-            <Input type="text" name="name" />
-          </Field>
-        </FieldGroup>
-        <FieldGroup>
-          <Label dynamic>Alamat</Label>
-          <Field>
-            <Input type="text" name="name" />
-          </Field>
-        </FieldGroup>
-      </Block>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    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>
-    <div class="my-2 flex justify-end py-2">
-      <Action />
+
+    <div class="mb-3 border-b border-b-slate-300">
+      <p class="text-md mt-1 font-semibold">Dokumen Identitas</p>
+
+      <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>
-  </form>
+
+    <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>
+  </Form>
 </template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index c74ef59b..4fbdf694 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -6,53 +6,28 @@ import type {
   RecStrFuncUnknown,
   Th,
 } from '~/components/pub/my-ui/data/types'
+import type { PatientEntity } from '~/models/patient'
 import { defineAsyncComponent } from 'vue'
-
-type SmallDetailDto = any
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
 
 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 cols: Col[] = [{}, {}, {}, {}, {}, {}, {}, { width: 5 }]
 
 export const header: Th[][] = [
   [
     { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
+    { label: 'NIK' },
     { label: 'Tgl Lahir' },
     { label: 'Umur' },
-    { label: 'JK' },
+    { label: 'Jenis Kelamin' },
     { label: 'Pendidikan' },
-    { label: 'Status' },
     { label: '' },
   ],
 ]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+export const keys = ['name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -61,42 +36,47 @@ export const delKeyNames: KeyLabel[] = [
 
 export const funcParsed: RecStrFuncUnknown = {
   name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    const { person } = rec as PatientEntity
+    return person.name.trim()
   },
   identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+    const { person } = rec as PatientEntity
+
+    if (person?.residentIdentityNumber?.substring(0, 5) === 'BLANK') {
       return '(TANPA NIK)'
     }
-    return recX.identity_number
+    return person.residentIdentityNumber
   },
   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)
+    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 recX.birth_date
+    return person.birthDate
   },
   patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
+    const { person } = rec as PatientEntity
+    return calculateAge(person.birthDate)
   },
   gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
+    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 recX.gender_code
+    return '-'
   },
   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
+    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 '-'
   },
@@ -111,17 +91,6 @@ export const funcComponent: RecStrFuncComponent = {
     }
     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 = {
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index b9a74929..53558b2b 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -1,19 +1,36 @@
 <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'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubMyUiDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      :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" />
+  </div>
 </template>
diff --git a/app/components/app/patient/preview.vue b/app/components/app/patient/preview.vue
new file mode 100644
index 00000000..ec3d8b6d
--- /dev/null
+++ b/app/components/app/patient/preview.vue
@@ -0,0 +1,153 @@
+<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 DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue'
+
+import { educationCodes, genderCodes, 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[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: string): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+const genderOptions = mapToComboboxOptList(genderCodes)
+const religionOptions = mapToComboboxOptList(religionCodes)
+const educationOptions = mapToComboboxOptList(educationCodes)
+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'
+
+const patientAge = computed(() => {
+  if (!props.person.birthDate) {
+    return '-'
+  }
+  const birthDate = new Date(props.person.birthDate)
+  const today = new Date()
+  let age = today.getFullYear() - birthDate.getFullYear()
+  const monthDiff = today.getMonth() - birthDate.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+    age--
+  }
+  return age
+})
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function onClick(type: string) {
+  emit('click', type)
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<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="Tempat, tanggal lahir">
+      {{ person.birthRegency_code || '-' }},
+      {{ person.birthDate ? new Date(person.birthDate).toLocaleDateString() : '-' }}
+    </DetailRow>
+    <DetailRow label="Usia">{{ patientAge || '-' }}</DetailRow>
+    <DetailRow label="Tanggal Daftar">
+      {{ person.createdAt ? new Date(person.createdAt).toLocaleDateString() : '-' }}
+    </DetailRow>
+    <DetailRow label="Jenis Kelamin">
+      {{ genderOptions.find((item) => item.code === 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="Agama">
+      {{ religionOptions.find((item) => item.code === person.religion_code)?.label || '-' }}
+    </DetailRow>
+    <DetailRow label="Suku">{{ person.ethnic_code || '-' }}</DetailRow>
+    <DetailRow label="Bahasa">{{ person.language_code || '-' }}</DetailRow>
+    <DetailRow label="Pendidikan">
+      {{ educationOptions.find((item) => item.code === person.education_code)?.label || '-' }}
+    </DetailRow>
+    <DetailRow label="Pekerjaan">{{ person.occupation_name || '-' }}</DetailRow>
+  </DetailSection>
+
+  <DetailSection title="Alamat">
+    <DetailRow label="Alamat Domisili">{{ residentAddress || '-' }}</DetailRow>
+    <DetailRow label="Alamat KTP">{{ primaryAddress || '-' }}</DetailRow>
+  </DetailSection>
+  <DetailSection title="Kontak">
+    <template v-if="personContacts && personContacts.length > 0">
+      <template
+        v-for="contactType in personContactTypeOptions"
+        :key="contactType.code"
+      >
+        <DetailRow :label="contactType.label">
+          {{ personContacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
+        </DetailRow>
+      </template>
+    </template>
+    <template v-else>
+      <DetailRow label="Kontak">-</DetailRow>
+    </template>
+  </DetailSection>
+  <DetailSection title="Penanggung Jawab">
+    <template v-if="personRelatives && personRelatives.filter((rel) => rel.responsible).length > 0">
+      <template
+        v-for="(relative, index) in personRelatives.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="Jenis Kelamin">
+          {{ genderOptions.find((item) => item.code === relative.gender_code)?.label || '-' }}
+        </DetailRow>
+        <DetailRow label="Pendidikan">
+          {{ educationOptions.find((item) => item.code === relative.education_code)?.label || '-' }}
+        </DetailRow>
+        <DetailRow label="Pekerjaan">{{ relative.occupation_name || '-' }}</DetailRow>
+        <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow>
+        <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow>
+      </template>
+    </template>
+    <template v-else>
+      <DetailRow label="Penanggung Jawab">-</DetailRow>
+    </template>
+  </DetailSection>
+  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBaEd @click="onClick" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/person-address/_common/radio-residence.vue b/app/components/app/person-address/_common/radio-residence.vue
new file mode 100644
index 00000000..f6e429a8
--- /dev/null
+++ b/app/components/app/person-address/_common/radio-residence.vue
@@ -0,0 +1,95 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'residenceStatus',
+  label = 'Apakah alamat KTP sama dengan alamat sekarang?',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const residenceOptions = [
+  { label: 'Ya', value: '1' },
+  { label: 'Tidak', value: '0' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      size="fit"
+      height="compact"
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <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 residenceOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :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',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :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',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-address/_common/select-district.vue b/app/components/app/person-address/_common/select-district.vue
new file mode 100644
index 00000000..97b50e4e
--- /dev/null
+++ b/app/components/app/person-address/_common/select-district.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+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 { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const { placeholder = 'Pilih Kecamatan', errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const districtOptions = [
+  { label: 'Kecamatan Lowokwaru', value: '18' },
+  { label: 'Kecamatan Pakis', value: '33' },
+  { label: 'Kecamatan Blimbing', value: '35' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kecamatan
+    </Label>
+    <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="districtOptions"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari..."
+              empty-message="Kecamatan tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-address/_common/select-postal.vue b/app/components/app/person-address/_common/select-postal.vue
new file mode 100644
index 00000000..84df7b33
--- /dev/null
+++ b/app/components/app/person-address/_common/select-postal.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+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 { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'zipCode',
+  placeholder = 'Kode Pos',
+  errors,
+  class: containerClass,
+  selectClass,
+  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' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kode Pos
+    </Label>
+    <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="postalCodeOptions"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari..."
+              empty-message="Kode pos tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-address/_common/select-province.vue b/app/components/app/person-address/_common/select-province.vue
new file mode 100644
index 00000000..bf984154
--- /dev/null
+++ b/app/components/app/person-address/_common/select-province.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+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 { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'provinceId',
+  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' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Provinsi
+    </Label>
+    <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="provinceList"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari..."
+              empty-message="Kecamatan tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-address/_common/select-regency.vue b/app/components/app/person-address/_common/select-regency.vue
new file mode 100644
index 00000000..bb2202d3
--- /dev/null
+++ b/app/components/app/person-address/_common/select-regency.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+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 { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const { placeholder = 'Pilih kabupaten/kota', errors, class: containerClass, selectClass, 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' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kabupaten/Kota
+    </Label>
+    <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="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari..."
+              empty-message="Kabupaten/kota tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-address/_common/select-village.vue b/app/components/app/person-address/_common/select-village.vue
new file mode 100644
index 00000000..561fa9b6
--- /dev/null
+++ b/app/components/app/person-address/_common/select-village.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+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 { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const { placeholder = 'Pilih Kelurahan', errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const villageOptions = [
+  { label: 'Lowokwaru', value: '18' },
+  { label: 'Dinoyo', value: '33' },
+  { label: 'Blimbing', value: '35' },
+  { label: 'Sawojajar', value: '36' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kelurahan
+    </Label>
+    <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="villageOptions"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari..."
+              empty-message="Kelurahan tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-address/entry-form-relative.vue b/app/components/app/person-address/entry-form-relative.vue
new file mode 100644
index 00000000..1c8c91a7
--- /dev/null
+++ b/app/components/app/person-address/entry-form-relative.vue
@@ -0,0 +1,369 @@
+<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 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 SelectDistrict from './_common/select-district.vue'
+import SelectPostal from './_common/select-postal.vue'
+import SelectProvince from './_common/select-province.vue'
+import SelectRegency from './_common/select-regency.vue'
+import SelectVillage from './_common/select-village.vue'
+import { Form } from '~/components/pub/ui/form'
+
+const props = defineProps<{
+  title: string
+  conf?: {
+    withAddressName?: boolean
+  }
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+
+// Watchers untuk cascading reset
+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' },
+  address: { placeholder: 'Masukkan alamat' },
+  rt: { placeholder: '001' },
+  rw: { placeholder: '002' },
+}
+// #region Function Helper
+function getFieldState(field: string) {
+  const state = fieldStates[field]
+  const isSame = formRef.value?.values?.isSameAddress === '1'
+
+  // Jika alamat sama, semua field kecuali provinsi disabled
+  if (['address', 'rt', 'rw'].includes(field) && isSame) {
+    return { placeholder: '-', disabled: true }
+  }
+
+  // Untuk field yang tergantung pada field lain
+  if (state?.dependsOn) {
+    const dependencyValue = formRef.value?.values?.[state.dependsOn]
+    const isDisabledByDependency = !dependencyValue
+
+    // Jika isSame, semua field location disabled
+    if (isSame && ['regencyId', 'districtId', 'villageId', 'zipCode'].includes(field)) {
+      return { placeholder: '-', disabled: true }
+    }
+
+    if (isDisabledByDependency) {
+      return { placeholder: state.placeholder, disabled: true }
+    }
+  }
+
+  // Jika isSame dan field location, disabled
+  if (isSame && ['regencyId', 'districtId', 'villageId', 'zipCode'].includes(field)) {
+    return { placeholder: '-', disabled: true }
+  }
+
+  return { placeholder: state?.placeholder ?? '', disabled: false }
+}
+
+// #endregion
+
+// #region watch
+
+// Watch provinceId changes
+watch(
+  () => formRef.value?.values?.provinceId,
+  (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,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch regencyId changes
+watch(
+  () => formRef.value?.values?.regencyId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          districtId: undefined,
+          villageId: undefined,
+          zipCode: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch districtId changes
+watch(
+  () => formRef.value?.values?.districtId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          villageId: undefined,
+          zipCode: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch villageId changes
+watch(
+  () => formRef.value?.values?.villageId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          zipCode: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch isSameAddress changes untuk trigger validasi
+watch(
+  () => formRef.value?.values?.isSameAddress,
+  (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') {
+      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.address === '') updatedValues.address = undefined
+
+        // Update values dan trigger validasi
+        formRef.value.setValues(updatedValues, false)
+
+        // Trigger validasi untuk menampilkan error
+        setTimeout(() => {
+          formRef.value?.validate()
+        }, 50)
+      })
+    }
+
+    // Ketika berubah dari '0' ke '1', clear error messages
+    if (oldValue === '0' && newValue === '1') {
+      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('address', undefined)
+        formRef.value?.setFieldError('rt', undefined)
+        formRef.value?.setFieldError('rw', undefined)
+      })
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ?? { isSameAddress: '1' }"
+  >
+    <div>
+      <p
+        v-if="props.title"
+        class="text-md mb-2 mt-1 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"
+          :errors="errors"
+          :is-required="values.isSameAddress !== '1'"
+        />
+        <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>
+  </Form>
+</template>
diff --git a/app/components/app/person-address/entry-form.vue b/app/components/app/person-address/entry-form.vue
index bb10d3d4..a26381d8 100644
--- a/app/components/app/person-address/entry-form.vue
+++ b/app/components/app/person-address/entry-form.vue
@@ -1,171 +1,268 @@
 <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/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 InputBase from '~/components/pub/my-ui/form/input-base.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
-import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
-import { mapToComboboxOptList } from '~/lib/utils'
+import SelectDistrict from './_common/select-district.vue'
+import SelectPostal from './_common/select-postal.vue'
+import SelectProvince from './_common/select-province.vue'
+import SelectRegency from './_common/select-regency.vue'
+import SelectVillage from './_common/select-village.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
-    }
+  title: string
+  conf?: {
+    withAddressName?: boolean
   }
-  items: {
-    value: string
-    label: string
-    code: string
-  }[]
   schema: any
-  initialValues?: Partial<DivisionFormData>
+  initialValues?: any
   errors?: FormErrors
 }>()
 
-const emit = defineEmits<{
-  submit: [values: DivisionFormData, resetForm: () => void]
-  cancel: [resetForm: () => void]
-}>()
-
-const educationOpts = mapToComboboxOptList(educationCodes)
-const occupationOpts = mapToComboboxOptList(occupationCodes)
-const religionOpts = mapToComboboxOptList(religionCodes)
-const genderOpts = mapToComboboxOptList(genderCodes)
-
 const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
 
-// 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)
-}
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+
+// Watchers untuk cascading reset
+let isResetting = false
+
+// #region Watch provinceId changes
+
+watch(
+  () => formRef.value?.values?.provinceId,
+  (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,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch regencyId changes
+watch(
+  () => formRef.value?.values?.regencyId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          districtId: undefined,
+          villageId: undefined,
+          zipCode: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch districtId changes
+watch(
+  () => formRef.value?.values?.districtId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          villageId: undefined,
+          zipCode: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch villageId changes
+watch(
+  () => formRef.value?.values?.villageId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          zipCode: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+// #endregion
 </script>
 
 <template>
   <Form
-    v-slot="{ handleSubmit, resetForm }"
+    ref="formRef"
+    v-slot="{ values }"
     as=""
     keep-values
     :validation-schema="formSchema"
-    :initial-values="initialValues"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? 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>
-            <!-- LocationType -->
-            <FieldGroup>
-              <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="genderOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+    <div>
+      <p
+        v-if="props.title"
+        class="text-md mb-2 mt-1 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>
 
-            <!-- Address -->
-            <FieldGroup>
-              <Label label-for="address">Alamat</Label>
-              <Field id="address" :errors="errors">
-                <FormField v-slot="{ componentField }" name="address">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="address"
-                        type="text"
-                        placeholder="Masukkan alamat lengkap"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </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
+            />
+          </div>
 
-            <!-- Rt -->
-            <FieldGroup>
-              <Label label-for="rt">RT</Label>
-              <Field id="rt" :errors="errors">
-                <FormField v-slot="{ componentField }" name="rt">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="rt"
-                        type="text"
-                        maxlength="2"
-                        placeholder="01"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+          <div class="min-w-0 flex-1">
+            <SelectRegency
+              field-name="regencyId"
+              placeholder="Pilih provinsi dahulu"
+              :is-disabled="!values.provinceId"
+              is-required
+            />
+          </div>
+        </div>
 
-            <!-- Rw -->
-            <FieldGroup>
-              <Label label-for="rw">RW</Label>
-              <Field id="rw" :errors="errors">
-                <FormField v-slot="{ componentField }" name="rw">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="rw"
-                        type="text"
-                        maxlength="2"
-                        placeholder="01"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+        <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>
 
-            <!-- Village_Code -->
-            <FieldGroup>
-              <Label label-for="villageCode">Desa/Kelurahan</Label>
-              <Field id="villageCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="villageCode">
-                  <FormItem>
-                    <FormControl>
-                      <Combobox id="villageCode" v-bind="componentField" :items="genderOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-          </Block>
+        <InputBase
+          field-name="address"
+          label="Alamat"
+          placeholder="Masukkan alamat"
+          :errors="errors"
+          is-required
+        />
+        <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>
-    </form>
+    </div>
   </Form>
 </template>
diff --git a/app/components/app/person-contact/_common/select-contact-type.vue b/app/components/app/person-contact/_common/select-contact-type.vue
new file mode 100644
index 00000000..d6f8fe24
--- /dev/null
+++ b/app/components/app/person-contact/_common/select-contact-type.vue
@@ -0,0 +1,71 @@
+<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'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass, labelClass } = props
+
+const contactOptions = [
+  { label: 'Nomor HP', value: 'phoneNumber' },
+  { label: 'Nomor Telepon Kantor', value: 'officePhoneNumber' },
+  { label: 'Nomor Telepon Rumah', value: 'homePhoneNumber' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :is-disabled="isDisabled"
+              :items="contactOptions"
+              :placeholder="placeholder || 'Pilih jenis kontak'"
+              :preserve-order="true"
+              :class="
+                cn(
+                  'min-w-[190px] 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>
+</template>
diff --git a/app/components/app/person-contact/entry-form.vue b/app/components/app/person-contact/entry-form.vue
index d7da4e91..5fa451b4 100644
--- a/app/components/app/person-contact/entry-form.vue
+++ b/app/components/app/person-contact/entry-form.vue
@@ -1,112 +1,110 @@
 <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/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 { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
-import { mapToComboboxOptList } from '~/lib/utils'
+import { FieldArray } from 'vee-validate'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectContactType from './_common/select-contact-type.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
-    code: string
-  }[]
+  title: string
   schema: any
-  initialValues?: Partial<DivisionFormData>
+  contactLimit: number
+  initialValues?: any
   errors?: FormErrors
 }>()
 
-const emit = defineEmits<{
-  submit: [values: DivisionFormData, resetForm: () => void]
-  cancel: [resetForm: () => void]
-}>()
-
-const educationOpts = mapToComboboxOptList(educationCodes)
-const occupationOpts = mapToComboboxOptList(occupationCodes)
-const religionOpts = mapToComboboxOptList(religionCodes)
-const genderOpts = mapToComboboxOptList(genderCodes)
-
+const { contactLimit = 5 } = props
 const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
 
-// 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)
-}
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
 </script>
 
 <template>
   <Form
-    v-slot="{ handleSubmit, resetForm }"
+    ref="formRef"
     as=""
     keep-values
     :validation-schema="formSchema"
-    :initial-values="initialValues"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues || { contacts: [{ contactType: '', contactNumber: '' }] }"
   >
-    <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>
-            <!-- LocationType -->
-            <FieldGroup>
-              <Label label-for="type">Tipe</Label>
-              <Field id="type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="type">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="type" v-bind="componentField" :items="genderOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+    <div>
+      <p
+        v-if="props.title"
+        class="text-md mb-2 mt-1 font-semibold"
+      >
+        {{ props.title || 'Kontak Pasien' }}
+      </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-3">
+        <FieldArray
+          v-slot="{ fields, push, remove }"
+          name="contacts"
+        >
+          <div
+            v-for="(field, idx) in fields"
+            :key="field.key"
+            class="flex-row gap-2 md:flex"
+          >
+            <div class="min-w-0 flex-[2]">
+              <SelectContactType
+                :field-name="`contacts[${idx}].contactType`"
+                :label="`Kontak ${idx + 1}`"
+                :is-required="idx === 0"
+              />
+            </div>
+            <div class="min-w-0 flex-[1.5]">
+              <InputBase
+                :field-name="`contacts[${idx}].contactNumber`"
+                placeholder="081234567890"
+                label="No"
+                numeric-only
+                :max-length="15"
+                :is-required="idx === 0"
+              />
+            </div>
+            <div class="flex-1 self-start md:pt-8">
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                class="text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700 dark:border-red-400 dark:text-red-400 dark:hover:border-red-300 dark:hover:bg-red-900/20"
+                :class="{ invisible: idx === 0 }"
+                @click="remove(idx)"
+              >
+                <Icon
+                  name="i-lucide-trash-2"
+                  class="h-5 w-5"
+                />
+              </Button>
+            </div>
+          </div>
 
-            <!-- Address -->
-            <FieldGroup>
-              <Label label-for="value">Value</Label>
-              <Field id="value" :errors="errors">
-                <FormField v-slot="{ componentField }" name="value">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="value"
-                        type="text"
-                        placeholder="Masukkan alamat lengkap"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-          </Block>
-        </div>
+          <div class="self-center pt-3">
+            <Button
+              :disabled="fields.length >= contactLimit"
+              type="button"
+              variant="outline"
+              @click="push({ contactType: '', contactNumber: '' })"
+            >
+              <Icon
+                name="i-lucide-plus"
+                class="h-5 w-5"
+              />
+              Tambah Kontak
+            </Button>
+          </div>
+        </FieldArray>
       </div>
-    </form>
+    </div>
   </Form>
 </template>
diff --git a/app/components/app/person-relative/_common/select-relations.vue b/app/components/app/person-relative/_common/select-relations.vue
new file mode 100644
index 00000000..179976bf
--- /dev/null
+++ b/app/components/app/person-relative/_common/select-relations.vue
@@ -0,0 +1,65 @@
+<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 Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isDisabled?: boolean
+}>()
+
+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 },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :is-disabled="isDisabled"
+              :items="emergencyContactOptions"
+              :placeholder="placeholder"
+              :preserve-order="true"
+              :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>
+</template>
diff --git a/app/components/app/person-relative/_common/table-head.vue b/app/components/app/person-relative/_common/table-head.vue
new file mode 100644
index 00000000..1994147e
--- /dev/null
+++ b/app/components/app/person-relative/_common/table-head.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { TableHead } from '~/components/pub/ui/table'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  label?: string
+  isRequired?: boolean
+}>()
+</script>
+
+<template>
+  <TableHead :class="cn('text-sm font-normal text-black dark:text-white', props.class)">
+    {{ label || '' }}
+    <span
+      v-if="isRequired"
+      class="text-red-600"
+    >
+      *
+    </span>
+  </TableHead>
+</template>
diff --git a/app/components/app/person-relative/entry-form.vue b/app/components/app/person-relative/entry-form.vue
index 15aea135..411fab37 100644
--- a/app/components/app/person-relative/entry-form.vue
+++ b/app/components/app/person-relative/entry-form.vue
@@ -1,235 +1,155 @@
 <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/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 { FieldArray } from 'vee-validate'
+import InputBase from '~/components/pub/my-ui/form/input-base.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 SelectContactRelation from './_common/select-relations.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
-    code: string
-  }[]
+  title: string
   schema: any
-  initialValues?: Partial<DivisionFormData>
+  initialValues?: any
   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)
+const formRef = ref()
 
-// 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)
-}
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
 </script>
 
 <template>
   <Form
-    v-slot="{ handleSubmit, resetForm }"
+    ref="formRef"
     as=""
     keep-values
     :validation-schema="formSchema"
-    :initial-values="initialValues"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues || { contacts: [{ relation: '', name: '', address: '', phone: '' }] }"
   >
-    <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>
-            <!-- Relationship_Code -->
-            <FieldGroup>
-              <Label label-for="relationshipCode">Hubungan</Label>
-              <Field id="relationshipCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relationshipCode">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="relationshipCode" v-bind="componentField" :items="relationshipOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+    <div>
+      <p
+        v-if="props.title"
+        class="text-md mb-2 mt-1 font-semibold"
+      >
+        {{ props.title || 'Kontak Pasien' }}
+      </p>
+    </div>
+    <div class="mb-5 space-y-4">
+      <FieldArray
+        v-slot="{ fields, push, remove }"
+        name="contacts"
+      >
+        <div class="space-y-4">
+          <div
+            v-for="(field, idx) in fields"
+            :key="field.key"
+            class="rounded-lg border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
+          >
+            <div class="mb-3 flex items-center justify-between">
+              <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">Penanggung Jawab {{ idx + 1 }}</h4>
+              <Button
+                v-if="idx !== 0"
+                type="button"
+                variant="outline"
+                size="sm"
+                class="text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700 dark:border-red-400 dark:text-red-400 dark:hover:border-red-300 dark:hover:bg-red-900/20"
+                @click="remove(idx)"
+              >
+                <Icon
+                  name="i-lucide-trash-2"
+                  class="h-4 w-4"
+                />
+              </Button>
+            </div>
 
-            <!-- Name -->
-            <FieldGroup>
-              <Label label-for="relativeName">Nama</Label>
-              <Field id="relativeName" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relativeName">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="relativeName"
-                        type="text"
-                        placeholder="Masukkan nama kerabat"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Hubungan dengan Pasien
+                </Label>
+                <SelectContactRelation
+                  :field-name="`contacts[${idx}].relation`"
+                  placeholder="Pilih"
+                  :errors="errors"
+                  field-group-class="mb-0"
+                />
+              </div>
 
-            <!-- Address -->
-            <FieldGroup>
-              <Label label-for="relativeAddress">Alamat</Label>
-              <Field id="relativeAddress" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relativeAddress">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="relativeAddress"
-                        type="text"
-                        placeholder="Alamat kerabat"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Nama
+                </Label>
+                <InputBase
+                  label=""
+                  :field-name="`contacts[${idx}].name`"
+                  placeholder="Masukkan Nama"
+                  :errors="errors"
+                />
+              </div>
 
-            <!-- Village_Code -->
-            <FieldGroup>
-              <Label label-for="relativeVillageCode">Desa/Kelurahan</Label>
-              <Field id="relativeVillageCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relativeVillageCode">
-                  <FormItem>
-                    <FormControl>
-                      <Combobox id="relativeVillageCode" v-bind="componentField" :items="genderOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Alamat
+                </Label>
+                <InputBase
+                  :field-name="`contacts[${idx}].address`"
+                  label=""
+                  placeholder="Masukkan Alamat"
+                  :errors="errors"
+                />
+              </div>
 
-            <!-- Gender_Code -->
-            <FieldGroup>
-              <Label label-for="relativeGender">Jenis Kelamin</Label>
-              <Field id="relativeGender" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relativeGender">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="relativeGender" v-bind="componentField" :items="genderOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- PhoneNumber -->
-            <FieldGroup>
-              <Label label-for="phoneNumber">Nomor Telepon</Label>
-              <Field id="phoneNumber" :errors="errors">
-                <FormField v-slot="{ componentField }" name="phoneNumber">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="phoneNumber"
-                        type="text"
-                        placeholder="0812xxxxxx"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- Education_Code -->
-            <FieldGroup>
-              <Label label-for="relativeEducation">Pendidikan</Label>
-              <Field id="relativeEducation" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relativeEducation">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="relativeEducation" v-bind="componentField" :items="educationOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- Occupation_Code -->
-            <FieldGroup>
-              <Label label-for="relativeOccupationCode">Pekerjaan</Label>
-              <Field id="relativeOccupationCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relativeOccupationCode">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="relativeOccupationCode" v-bind="componentField" :items="occupationOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- Occupation_Name -->
-            <FieldGroup>
-              <Label label-for="relativeOccupationName">Nama Pekerjaan</Label>
-              <Field id="relativeOccupationName" :errors="errors">
-                <FormField v-slot="{ componentField }" name="relativeOccupationName">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="relativeOccupationName"
-                        type="text"
-                        placeholder="Contoh: Guru, Dokter, Petani"
-                        autocomplete="off"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-          </Block>
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Nomor HP
+                </Label>
+                <InputBase
+                  :field-name="`contacts[${idx}].phone`"
+                  label=""
+                  placeholder="081234567890"
+                  :max-length="15"
+                  numeric-only
+                  :errors="errors"
+                />
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-    </form>
+
+        <Button
+          type="button"
+          variant="outline"
+          class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+          @click="push({ relation: '', name: '', address: '', phone: '' })"
+        >
+          <Icon
+            name="i-lucide-plus"
+            class="mr-2 h-4 w-4 align-middle transition-colors"
+          />
+          Tambah Penanggung Jawab
+        </Button>
+      </FieldArray>
+    </div>
   </Form>
 </template>
diff --git a/app/components/app/person/_common/radio-parents-input.vue b/app/components/app/person/_common/radio-parents-input.vue
new file mode 100644
index 00000000..bd8b6f15
--- /dev/null
+++ b/app/components/app/person/_common/radio-parents-input.vue
@@ -0,0 +1,94 @@
+<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'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'inputParentsData',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const residenceOptions = [
+  { label: 'Ya', value: '1' },
+  { label: 'Tidak', value: '0' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      size="fit"
+      height="compact"
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label || 'Identitas Orang Tua' }}
+    </Label>
+    <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 residenceOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :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',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :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',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person/entry-form.vue b/app/components/app/person/entry-form.vue
index 24705de4..a9a9c6cf 100644
--- a/app/components/app/person/entry-form.vue
+++ b/app/components/app/person/entry-form.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
+import { Form } from '~/components/pub/ui/form'
 import { toTypedSchema } from '@vee-validate/zod'
 import Block from '~/components/pub/my-ui/form/block.vue'
 import Combobox from '~/components/pub/my-ui/form/combobox.vue'
@@ -8,7 +9,6 @@ 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 } from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'
-import { Form } from '~/components/pub/ui/form'
 
 interface DivisionFormData {
   name: string
@@ -65,14 +65,23 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
     :validation-schema="formSchema"
     :initial-values="initialValues"
   >
-    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+    <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>
             <FieldGroup>
               <Label label-for="residentIdentityNumber">KTP</Label>
-              <Field id="residentIdentityNumber" :errors="errors">
-                <FormField v-slot="{ componentField }" name="residentIdentityNumber">
+              <Field
+                id="residentIdentityNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="residentIdentityNumber"
+                >
                   <FormItem>
                     <FormControl>
                       <Input
@@ -93,8 +102,14 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- FrontTitle -->
             <FieldGroup :column="3">
               <Label label-for="frontTitle">Gelar Depan</Label>
-              <Field id="frontTitle" :errors="errors">
-                <FormField v-slot="{ componentField }" name="frontTitle">
+              <Field
+                id="frontTitle"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="frontTitle"
+                >
                   <FormItem>
                     <FormControl>
                       <Input
@@ -112,9 +127,20 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             </FieldGroup>
 
             <FieldGroup :column="3">
-              <Label label-for="name" position="dynamic">Nama</Label>
-              <Field id="name" :errors="errors">
-                <FormField v-slot="{ componentField }" name="name">
+              <Label
+                label-for="name"
+                position="dynamic"
+              >
+                Nama
+              </Label>
+              <Field
+                id="name"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="name"
+                >
                   <FormItem>
                     <FormControl>
                       <Input
@@ -133,9 +159,20 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
 
             <!-- EndTitle -->
             <FieldGroup :column="3">
-              <Label label-for="endTitle" position="dynamic">Gelar Belakang</Label>
-              <Field id="endTitle" :errors="errors">
-                <FormField v-slot="{ componentField }" name="endTitle">
+              <Label
+                label-for="endTitle"
+                position="dynamic"
+              >
+                Gelar Belakang
+              </Label>
+              <Field
+                id="endTitle"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="endTitle"
+                >
                   <FormItem>
                     <FormControl>
                       <Input
@@ -155,11 +192,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- BirthDate -->
             <FieldGroup :column="2">
               <Label label-for="birthDate">Tanggal Lahir</Label>
-              <Field id="birthDate" :errors="errors">
-                <FormField v-slot="{ componentField }" name="birthDate">
+              <Field
+                id="birthDate"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="birthDate"
+                >
                   <FormItem>
                     <FormControl>
-                      <Input id="birthDate" type="date" v-bind="componentField" />
+                      <Input
+                        id="birthDate"
+                        type="date"
+                        v-bind="componentField"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -170,11 +217,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- BirthRegency_Code -->
             <FieldGroup :column="2">
               <Label label-for="birthRegencyCode">Tempat Lahir</Label>
-              <Field id="birthRegencyCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="birthRegencyCode">
+              <Field
+                id="birthRegencyCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="birthRegencyCode"
+                >
                   <FormItem>
                     <FormControl>
-                      <Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
+                      <Combobox
+                        id="parentId"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -185,11 +242,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- Gender_Code -->
             <FieldGroup>
               <Label label-for="genderCode">Jenis Kelamin</Label>
-              <Field id="genderCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="genderCode">
+              <Field
+                id="genderCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="genderCode"
+                >
                   <FormItem>
                     <FormControl>
-                      <Combobox id="genderCode" v-bind="componentField" :items="genderOpts" />
+                      <Combobox
+                        id="genderCode"
+                        v-bind="componentField"
+                        :items="genderOpts"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -200,8 +267,14 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- PassportNumber -->
             <FieldGroup :column="2">
               <Label label-for="passportNumber">Paspor</Label>
-              <Field id="passportNumber" :errors="errors">
-                <FormField v-slot="{ componentField }" name="passportNumber">
+              <Field
+                id="passportNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="passportNumber"
+                >
                   <FormItem>
                     <FormControl>
                       <Input
@@ -221,8 +294,14 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- DrivingLicenseNumber -->
             <FieldGroup :column="2">
               <Label label-for="drivingLicenseNumber">SIM</Label>
-              <Field id="drivingLicenseNumber" :errors="errors">
-                <FormField v-slot="{ componentField }" name="drivingLicenseNumber">
+              <Field
+                id="drivingLicenseNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="drivingLicenseNumber"
+                >
                   <FormItem>
                     <FormControl>
                       <Input
@@ -242,11 +321,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- Religion_Code -->
             <FieldGroup :column="2">
               <Label label-for="religionCode">Agama</Label>
-              <Field id="religionCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="religionCode">
+              <Field
+                id="religionCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="religionCode"
+                >
                   <FormItem>
                     <FormControl>
-                      <Combobox id="religionCode" v-bind="componentField" :items="religionOpts" />
+                      <Combobox
+                        id="religionCode"
+                        v-bind="componentField"
+                        :items="religionOpts"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -256,11 +345,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
 
             <FieldGroup :column="2">
               <Label label-for="ethnicCode">Suku</Label>
-              <Field id="ethnicCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="ethnicCode">
+              <Field
+                id="ethnicCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="ethnicCode"
+                >
                   <FormItem>
                     <FormControl>
-                      <Combobox id="ethnicCode" v-bind="componentField" :items="occupationOpts" />
+                      <Combobox
+                        id="ethnicCode"
+                        v-bind="componentField"
+                        :items="occupationOpts"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -271,11 +370,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- Language_Code -->
             <FieldGroup :column="2">
               <Label label-for="languageCode">Bahasa</Label>
-              <Field id="languageCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="languageCode">
+              <Field
+                id="languageCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="languageCode"
+                >
                   <FormItem>
                     <FormControl>
-                      <Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
+                      <Combobox
+                        id="parentId"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -286,11 +395,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- Education_Code -->
             <FieldGroup :column="2">
               <Label label-for="educationCode">Pendidikan</Label>
-              <Field id="educationCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="educationCode">
+              <Field
+                id="educationCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="educationCode"
+                >
                   <FormItem>
                     <FormControl>
-                      <Combobox id="educationCode" v-bind="componentField" :items="educationOpts" />
+                      <Combobox
+                        id="educationCode"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -301,11 +420,21 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- Occupation_Code -->
             <FieldGroup :column="2">
               <Label label-for="occupationCode">Pekerjaan</Label>
-              <Field id="occupationCode" :errors="errors">
-                <FormField v-slot="{ componentField }" name="occupationCode">
+              <Field
+                id="occupationCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="occupationCode"
+                >
                   <FormItem>
                     <FormControl>
-                      <Combobox id="occupationCode" v-bind="componentField" :items="occupationOpts" />
+                      <Combobox
+                        id="occupationCode"
+                        v-bind="componentField"
+                        :items="occupationOpts"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -316,8 +445,14 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
             <!-- Occupation_Name -->
             <FieldGroup :column="2">
               <Label label-for="occupationName">Detail Pekerjaan</Label>
-              <Field id="occupationName" :errors="errors">
-                <FormField v-slot="{ componentField }" name="occupationName">
+              <Field
+                id="occupationName"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="occupationName"
+                >
                   <FormItem>
                     <FormControl>
                       <Input
diff --git a/app/components/app/person/family-parents-form.vue b/app/components/app/person/family-parents-form.vue
new file mode 100644
index 00000000..e5ac4a46
--- /dev/null
+++ b/app/components/app/person/family-parents-form.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { PersonFamilyFormData as FamilyData } from '~/schemas/person-family.schema'
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { FieldArray } from 'vee-validate'
+import SelectEducation from '~/components/app/patient/_common/select-education.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import RadioParentsInput from './_common/radio-parents-input.vue'
+import { Form } from '~/components/pub/ui/form'
+
+const props = defineProps<{
+  title: string
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+// Watcher untuk mengatur families ketika shareFamilyData berubah
+watch(
+  () => formRef.value?.values?.shareFamilyData,
+  (newValue) => {
+    if (newValue === '1' && formRef.value) {
+      // Ketika memilih "Ya", pastikan ada data families untuk mother dan father
+      const currentFamilies = formRef.value.values?.families || []
+      if (currentFamilies.length === 0) {
+        formRef.value.setFieldValue('families', [
+          { relation: 'mother', name: undefined, education: undefined, occupation: undefined },
+          { relation: 'father', name: undefined, education: undefined, occupation: undefined },
+        ])
+      }
+    } else if (newValue === '0' && formRef.value) {
+      // Ketika memilih "Tidak", kosongkan families
+      formRef.value.setFieldValue('families', [])
+    }
+  },
+  { immediate: false },
+)
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="
+      initialValues || {
+        shareFamilyData: '0',
+        families: [],
+      }
+    "
+  >
+    <div>
+      <p
+        v-if="props.title"
+        class="text-md mb-2 mt-1 font-semibold"
+      >
+        {{ props.title }}
+      </p>
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <!-- Radio Button Section - Full Width -->
+      <div class="mb-6">
+        <RadioParentsInput field-name="shareFamilyData" />
+      </div>
+
+      <!-- Form Fields Section - Only show when "Ya" is selected -->
+      <div
+        v-if="values.shareFamilyData === '1'"
+        class="space-y-6"
+      >
+        <FieldArray
+          v-slot="{ fields }"
+          name="families"
+        >
+          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <template
+              v-for="(field, idx) in fields"
+              :key="field.key"
+            >
+              <div
+                class="space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
+              >
+                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {{ (values.families as FamilyData[])?.[idx]?.relation === 'mother' ? 'Data Ibu' : 'Data Ayah' }}
+                </h4>
+
+                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div>
+                    <InputBase
+                      :field-name="`families[${idx}].name`"
+                      :label="
+                        (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                          ? 'Nama Ibu Kandung'
+                          : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                            ? 'Nama Ayah Kandung'
+                            : 'Nama Keluarga'
+                      "
+                      :placeholder="
+                        (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                          ? 'Masukkan nama ibu pasien'
+                          : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                            ? 'Masukkan nama ayah pasien'
+                            : 'Masukkan nama'
+                      "
+                      :errors="errors"
+                      is-required
+                    />
+                  </div>
+
+                  <div>
+                    <SelectEducation
+                      :field-name="`families[${idx}].education`"
+                      :label="
+                        (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                          ? 'Pendidikan Ibu'
+                          : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                            ? 'Pendidikan Ayah'
+                            : 'Pendidikan'
+                      "
+                      placeholder="Pilih"
+                      :errors="errors"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <InputBase
+                    :field-name="`families[${idx}].occupation`"
+                    :label="
+                      (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                        ? 'Pekerjaan Ibu'
+                        : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                          ? 'Pekerjaan Ayah'
+                          : 'Pekerjaan'
+                    "
+                    :placeholder="
+                      (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                        ? 'Masukkan pekerjaan ibu'
+                        : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                          ? 'Masukkan pekerjaan ayah'
+                          : 'Masukkan pekerjaan'
+                    "
+                    :errors="errors"
+                  />
+                </div>
+              </div>
+            </template>
+          </div>
+        </FieldArray>
+      </div>
+    </div>
+  </Form>
+</template>
diff --git a/app/components/app/room/entry-form.vue b/app/components/app/room/entry-form.vue
new file mode 100644
index 00000000..6f4e7708
--- /dev/null
+++ b/app/components/app/room/entry-form.vue
@@ -0,0 +1,195 @@
+<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 Combobox from '~/components/pub/my-ui/form/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialists: any[]
+  subspecialists: any[]
+  units: any[]
+  parents: 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<{
+  'update:selected-unit': [val: any]
+  'update:selected-specialist': [val: any]
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.room,
+    parent_id: null,
+    specialist_id: 0,
+    subspecialist_id: 0,
+    unit_id: 0,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [specialist_id, specialistAttrs] = defineField('specialist_id')
+const [subspecialist_id, subspecialistAttrs] = defineField('subspecialist_id')
+const [unit_id, unitAttrs] = defineField('unit_id')
+const [parent_id, parentAttrs] = defineField('parent_id')
+
+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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.specialist_id !== undefined)
+    specialist_id.value = props.values.specialist_id ? String(props.values.specialist_id) : null
+  if (props.values.subspecialist_id !== undefined)
+    subspecialist_id.value = props.values.subspecialist_id ? String(props.values.subspecialist_id) : null
+  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? String(props.values.unit_id) : null
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? String(props.values.parent_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.room
+  specialist_id.value = 0
+  subspecialist_id.value = 0
+  unit_id.value = 0
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.room,
+    specialist_id: specialist_id.value || 0,
+    subspecialist_id: subspecialist_id.value || 0,
+    unit_id: unit_id.value || 0,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @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">Unit</Label>
+        <Field :errMessage="errors.unit_id">
+          <Combobox
+            id="unit"
+            v-model="unit_id"
+            v-bind="unitAttrs"
+            :items="units"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Unit"
+            search-placeholder="Cari Unit"
+            empty-message="Unit tidak ditemukan"
+            @update:model-value="$emit('update:selected-unit', $event)"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Spesialis</Label>
+        <Field :errMessage="errors.specialist_id">
+          <Combobox
+            id="specialist"
+            v-model="specialist_id"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Spesialis"
+            search-placeholder="Cari spesialis"
+            empty-message="Spesialis tidak ditemukan"
+            @update:model-value="$emit('update:selected-specialist', $event)"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Sub Spesialis</Label>
+        <Field :errMessage="errors.subspecialist_id">
+          <Combobox
+            id="subspecialist"
+            v-model="subspecialist_id"
+            v-bind="subspecialistAttrs"
+            :items="subspecialists"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Sub Spesialis"
+            search-placeholder="Cari sub spesialis"
+            empty-message="Sub Spesialis tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentAttrs"
+            :items="parents"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Lantai tidak ditemukan"
+          />
+        </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/room/list-cfg.ts b/app/components/app/room/list-cfg.ts
new file mode 100644
index 00000000..98e7eb50
--- /dev/null
+++ b/app/components/app/room/list-cfg.ts
@@ -0,0 +1,61 @@
+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: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Spesialis' },
+    { label: 'Sub Spesialis' },
+    { label: 'Unit' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['code', 'name', 'specialist', 'subspecialist', 'unit', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { 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 || '-'
+  },
+  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 || '-'
+  },
+}
+
+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
new file mode 100644
index 00000000..e1b056ce
--- /dev/null
+++ b/app/components/app/room/list.vue
@@ -0,0 +1,41 @@
+<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 { cols, funcComponent, funcHtml, funcParsed, header, keys } 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
+      :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" />
+  </div>
+</template>
diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 9ff4c8cd..9aea7c31 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -7,7 +7,7 @@ import * as z from 'zod'
 import { Button } from '~/components/pub/ui/button'
 import { Input } from '~/components/pub/ui/input'
 import { Label } from '~/components/pub/ui/label'
-import { Select } from '~/components/pub/ui/select'
+import Select from '~/components/pub/ui/select/Select.vue'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
 import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
diff --git a/app/components/app/soapi/early-entry.vue b/app/components/app/soapi/early-entry.vue
new file mode 100644
index 00000000..c5697a7a
--- /dev/null
+++ b/app/components/app/soapi/early-entry.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+const props = defineProps<{
+  excludeFields?: string[]
+}>()
+
+const emits = defineEmits(['click'])
+
+const subject = ref({
+  'prim-compl': '',
+  'sec-compl': '',
+  'cur-disea-hist': '',
+  'pas-disea-hist': '',
+  'fam-disea-hist': '',
+  'alg-hist': '',
+  'alg-react': '',
+  'med-hist': '',
+  'blood-type': '',
+})
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <Cell>
+          <Label dynamic>Sudah Vaksin</Label>
+          <Field>
+            <RadioGroup class="flex gap-4">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem id="vaksin-yes" value="yes" />
+                <Label for="vaksin-yes">Sudah</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem id="vaksin-no" value="no" />
+                <Label for="vaksin-no">Belum</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Kasus</Label>
+          <Field>
+            <RadioGroup class="flex gap-4">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem id="kasus-baru" value="baru" />
+                <Label for="kasus-baru">Baru</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem id="kasus-lama" value="lama" />
+                <Label for="kasus-lama">Lama</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Kunjungan</Label>
+          <Field>
+            <RadioGroup class="flex gap-4">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem id="kunjungan-baru" value="baru" />
+                <Label for="kunjungan-baru">Baru</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem id="kunjungan-lama" value="lama" />
+                <Label for="kunjungan-lama">Lama</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block :colCount="2">
+        <!-- Riwayat Penyakit -->
+        <Cell>
+          <Label dynamic>Keluhan Utama</Label>
+          <Field>
+            <Textarea placeholder="Masukkan anamnesa pasien" />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Riwayat Penyakit</Label>
+          <Field>
+            <Textarea
+              placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>SpO₂</Label>
+          <Field>
+            <Input type="number" placeholder="%" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Tekanan Darah Sistol</Label>
+          <Field>
+            <Input type="number" placeholder="mmHg" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Tekanan Darah Diastol</Label>
+          <Field>
+            <Input type="number" placeholder="mmHg" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Respirasi</Label>
+          <Field>
+            <Input type="number" placeholder="kali/menit" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Nadi</Label>
+          <Field>
+            <Input type="number" placeholder="kali/menit" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Temperatur</Label>
+          <Field>
+            <Input type="number" placeholder="℃" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Berat Badan</Label>
+          <Field>
+            <Input type="number" placeholder="Kg" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Tinggi Badan</Label>
+          <Field>
+            <Input type="number" placeholder="Cm" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Golongan Darah</Label>
+          <Field>
+            <Select :options="bloodGroups" />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
+          <Field>
+            <Textarea placeholder="Masukkan pemeriksaan fisik" />
+          </Field>
+        </Cell>
+
+        <!-- Prosedur -->
+        <Cell>
+          <Label dynamic>Diagnosa (ICD-X)</Label>
+          <Field>
+            <Button
+              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+              type="button"
+              @click="emits('click', 'diagnosa')"
+              >+ Pilih Diagnosa</Button
+            >
+          </Field>
+        </Cell>
+        <!-- Diagnosa -->
+        <Cell>
+          <Label dynamic>Diagnosa (ICD-X)</Label>
+          <Field>
+            <Button
+              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+              type="button"
+              @click="emits('click', 'prosedur')"
+              >+ Pilih Prosedur</Button
+            >
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <AppIcdPreview />
+        <AppIcdPreview />
+      </div>
+
+      <Block :colCount="3">
+        <Cell>
+          <Label dynamic>Diagnosa Medis</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Rencana Awal Medis</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Terapi</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/soapi/early-rehab-entry.vue b/app/components/app/soapi/early-rehab-entry.vue
new file mode 100644
index 00000000..991a7c73
--- /dev/null
+++ b/app/components/app/soapi/early-rehab-entry.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+const props = defineProps<{
+  excludeFields?: string[]
+}>()
+
+const subject = ref({
+  'prim-compl': '',
+  'sec-compl': '',
+  'cur-disea-hist': '',
+  'pas-disea-hist': '',
+  'fam-disea-hist': '',
+  'alg-hist': '',
+  'alg-react': '',
+  'med-hist': '',
+  'blood-type': '',
+})
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Keluhan Utama -->
+    <Cell v-if="!isExcluded('prim-compl')">
+      <Label dynamic>Keluhan Utama</Label>
+      <Field>
+        <Textarea placeholder="Masukkan anamnesa pasien" v-model="subject['prim-compl']" />
+      </Field>
+    </Cell>
+
+    <!-- Keluhan Tambahan -->
+    <Cell v-if="!isExcluded('sec-compl')">
+      <Label dynamic>Keluhan Tambahan</Label>
+      <Field>
+        <Textarea placeholder="Masukkan keluhan tambahan" v-model="subject['sec-compl']" />
+      </Field>
+    </Cell>
+
+    <!-- Riwayat Penyakit Sekarang -->
+    <Cell v-if="!isExcluded('cur-disea-hist')">
+      <Label dynamic>Riwayat Penyakit Sekarang</Label>
+      <Field>
+        <Textarea placeholder="Masukkan riwayat penyakit sekarang" v-model="subject['cur-disea-hist']" />
+      </Field>
+    </Cell>
+
+    <!-- Riwayat Penyakit Dahulu -->
+    <Cell v-if="!isExcluded('pas-disea-hist')">
+      <Label dynamic>Riwayat Penyakit Dahulu</Label>
+      <Field>
+        <Textarea placeholder="Masukkan riwayat penyakit dahulu" v-model="subject['pas-disea-hist']" />
+      </Field>
+    </Cell>
+
+    <!-- Riwayat Penyakit Keluarga -->
+    <Cell v-if="!isExcluded('fam-disea-hist')">
+      <Label dynamic>Riwayat Penyakit Keluarga</Label>
+      <Field>
+        <Textarea placeholder="Masukkan riwayat penyakit keluarga" v-model="subject['fam-disea-hist']" />
+      </Field>
+    </Cell>
+
+    <!-- Riwayat Alergi -->
+    <Cell v-if="!isExcluded('alg-hist')">
+      <Label dynamic>Riwayat Alergi</Label>
+      <Field>
+        <Textarea placeholder="Masukkan riwayat alergi" v-model="subject['alg-hist']" />
+      </Field>
+    </Cell>
+
+    <!-- Reaksi Alergi -->
+    <Cell v-if="!isExcluded('alg-react')">
+      <Label dynamic>Reaksi Alergi</Label>
+      <Field>
+        <Textarea placeholder="Masukkan reaksi alergi" v-model="subject['alg-react']" />
+      </Field>
+    </Cell>
+
+    <!-- Pengobatan yang Sedang Dijalani -->
+    <Cell v-if="!isExcluded('med-hist')">
+      <Label dynamic>Riwayat Pengobatan</Label>
+      <Field>
+        <Textarea placeholder="Masukkan pengobatan yang sedang dijalani" v-model="subject['med-hist']" />
+      </Field>
+    </Cell>
+
+    <!-- Golongan Darah -->
+    <Cell v-if="!isExcluded('blood-type')">
+      <Label dynamic>Golongan Darah</Label>
+      <Field>
+        <Input type="text" placeholder="Masukkan golongan darah" v-model="subject['blood-type']" />
+      </Field>
+    </Cell>
+  </div>
+</template>
diff --git a/app/components/app/soapi/entry.vue b/app/components/app/soapi/entry.vue
new file mode 100644
index 00000000..ced3e3d8
--- /dev/null
+++ b/app/components/app/soapi/entry.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import EarlyEntry from './early-entry.vue'
+import EarlyRehabEntry from './early-rehab-entry.vue'
+import FunctionEntry from './function-entry.vue'
+
+/**
+ * Props:
+ * - excludeFields: daftar nama field yang ingin disembunyikan
+ */
+const props = defineProps<{
+  type: 'early' | 'early-rehab' | 'function'
+  excludeFields?: string[]
+}>()
+
+const componentMap = {
+  early: EarlyEntry,
+  'early-rehab': EarlyRehabEntry,
+  function: FunctionEntry,
+}
+
+// Komponen aktif berdasarkan type
+const ActiveComponent = computed(() => componentMap[props.type])
+</script>
+
+<template>
+  <component :is="ActiveComponent" :exclude-fields="excludeFields" />
+</template>
diff --git a/app/components/app/soapi/function-entry.vue b/app/components/app/soapi/function-entry.vue
new file mode 100644
index 00000000..a2fad36a
--- /dev/null
+++ b/app/components/app/soapi/function-entry.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup>
+          <Label dynamic>Sudah Vaksin</Label>
+          <Field>
+            <Select
+              :options="[
+                { label: 'Sudah', value: 'yes' },
+                { label: 'Belum', value: 'no' },
+              ]"
+            />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup>
+          <Label dynamic>Kasus</Label>
+          <Field>
+            <Select
+              :options="[
+                { label: 'Baru', value: 'baru' },
+                { label: 'Lama', value: 'lama' },
+              ]"
+            />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup>
+          <Label dynamic>Kunjungan</Label>
+          <Field>
+            <Select
+              :options="[
+                { label: 'Baru', value: 'baru' },
+                { label: 'Lama', value: 'lama' },
+              ]"
+            />
+          </Field>
+        </FieldGroup>
+
+        <!-- Riwayat Penyakit -->
+        <FieldGroup :column="2">
+          <Label dynamic>Keluhan Utama</Label>
+          <Field>
+            <Textarea placeholder="Masukkan anamnesa pasien" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="2">
+          <Label dynamic>Riwayat Penyakit</Label>
+          <Field>
+            <Textarea
+              placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
+            />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>SpO₂</Label>
+          <Field>
+            <Input type="number" placeholder="%" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Tekanan Darah Sistol</Label>
+          <Field>
+            <Input type="number" placeholder="mmHg" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Tekanan Darah Diastol</Label>
+          <Field>
+            <Input type="number" placeholder="mmHg" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Respirasi</Label>
+          <Field>
+            <Input type="number" placeholder="kali/menit" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Nadi</Label>
+          <Field>
+            <Input type="number" placeholder="kali/menit" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Temperatur</Label>
+          <Field>
+            <Input type="number" placeholder="℃" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Berat Badan</Label>
+          <Field>
+            <Input type="number" placeholder="Kg" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Tinggi Badan</Label>
+          <Field>
+            <Input type="number" placeholder="Cm" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Golongan Darah</Label>
+          <Field>
+            <Select :options="bloodGroups" />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="2">
+          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
+          <Field>
+            <Textarea placeholder="Masukkan pemeriksaan fisik" />
+          </Field>
+        </FieldGroup>
+
+        <!-- Prosedur -->
+        <FieldGroup :column="2">
+          <Label dynamic>Diagnosa (ICD-X)</Label>
+          <Field>
+            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
+          </Field>
+        </FieldGroup>
+        <!-- Diagnosa -->
+        <FieldGroup :column="2">
+          <Label dynamic>Diagnosa (ICD-X)</Label>
+          <Field>
+            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="3">
+          <Label dynamic>Diagnosa Medis</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="3">
+          <Label dynamic>Rencana Awal Medis</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </FieldGroup>
+
+        <FieldGroup :column="3">
+          <Label dynamic>Terapi</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/soapi/list-cfg.ts b/app/components/app/soapi/list-cfg.ts
new file mode 100644
index 00000000..460cacd9
--- /dev/null
+++ b/app/components/app/soapi/list-cfg.ts
@@ -0,0 +1,119 @@
+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: 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
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/soapi/list.vue b/app/components/app/soapi/list.vue
new file mode 100644
index 00000000..b9a74929
--- /dev/null
+++ b/app/components/app/soapi/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/soapi/picker.vue b/app/components/app/soapi/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/soapi/search.vue b/app/components/app/soapi/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/specialist/entry-form.vue b/app/components/app/specialist/entry-form.vue
index 749765d9..eb77f1df 100644
--- a/app/components/app/specialist/entry-form.vue
+++ b/app/components/app/specialist/entry-form.vue
@@ -4,7 +4,7 @@ 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 Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
 
 // Types
 import type { SpecialistFormData } from '~/schemas/specialist.schema.ts'
@@ -47,7 +47,7 @@ const [unit, unitAttrs] = defineField('unit_id')
 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.unit_id !== undefined) unit.value = props.values.unit_id
+  if (props.values.unit_id !== undefined) unit.value = props.values.unit_id ? String(props.values.unit_id) : null
 }
 
 const resetForm = () => {
@@ -61,7 +61,7 @@ function onSubmitForm(values: any) {
   const formData: SpecialistFormData = {
     name: name.value || '',
     code: code.value || '',
-    unit_id: unit.value || '',
+    unit_id: unit.value ? Number(unit.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -73,47 +73,62 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-specialist" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-specialist"
+    @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" />
+          <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" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Unit</Label>
         <Field :errMessage="errors.unit">
-          <!-- <Combobox
+          <Combobox
             id="unit"
+            v-model="unit"
+            v-bind="unitAttrs"
+            :items="units"
+            :disabled="isLoading || isReadonly"
             placeholder="Pilih Unit"
             search-placeholder="Cari unit"
             empty-message="Unit tidak ditemukan"
-            v-model="unit"
-            v-bind="unitAttrs"
-            :items="units"
-            :disabled="isLoading || isReadonly"
-          /> -->
-          <Select
-            id="unit"
-            icon-name="i-lucide-chevron-down"
-            placeholder="Pilih unit"
-            v-model="unit"
-            v-bind="unitAttrs"
-            :items="units"
-            :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
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"
diff --git a/app/components/app/specialist/list.vue b/app/components/app/specialist/list.vue
index 53558b2b..e1b056ce 100644
--- a/app/components/app/specialist/list.vue
+++ b/app/components/app/specialist/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/subspecialist/entry-form.vue b/app/components/app/subspecialist/entry-form.vue
index 21f1fa6e..b285a497 100644
--- a/app/components/app/subspecialist/entry-form.vue
+++ b/app/components/app/subspecialist/entry-form.vue
@@ -4,7 +4,7 @@ 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 Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
 
 // Types
 import type { SubspecialistFormData } from '~/schemas/subspecialist.schema.ts'
@@ -47,7 +47,8 @@ const [specialist, specialistAttrs] = defineField('specialist_id')
 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.specialist_id !== undefined) specialist.value = props.values.specialist_id
+  if (props.values.specialist_id !== undefined)
+    specialist.value = props.values.specialist_id ? String(props.values.specialist_id) : null
 }
 
 const resetForm = () => {
@@ -61,7 +62,7 @@ function onSubmitForm(values: any) {
   const formData: SubspecialistFormData = {
     name: name.value || '',
     code: code.value || '',
-    specialist_id: specialist.value || '',
+    specialist_id: specialist.value ? Number(specialist.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -73,47 +74,62 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-specialist" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-specialist"
+    @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" />
+          <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" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Spesialis</Label>
         <Field :errMessage="errors.specialist">
-          <!-- <Combobox
-            id="specialis"
+          <Combobox
+            id="specialist"
+            v-model="specialist"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :disabled="isLoading || isReadonly"
             placeholder="Pilih spesialis"
             search-placeholder="Cari spesialis"
             empty-message="Spesialis tidak ditemukan"
-            v-model="specialist"
-            v-bind="specialistAttrs"
-            :items="specialists"
-            :disabled="isLoading || isReadonly"
-          /> -->
-          <Select
-            id="specialist"
-            icon-name="i-lucide-chevron-down"
-            placeholder="Pilih spesialis"
-            v-model="specialist"
-            v-bind="specialistAttrs"
-            :items="specialists"
-            :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
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"
diff --git a/app/components/app/subspecialist/list.vue b/app/components/app/subspecialist/list.vue
index 53558b2b..e1b056ce 100644
--- a/app/components/app/subspecialist/list.vue
+++ b/app/components/app/subspecialist/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
index 9d655fdf..3af2b398 100644
--- a/app/components/app/tools/list.vue
+++ b/app/components/app/tools/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index 0a9d04f0..b708e922 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -4,6 +4,7 @@ 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 Combobox from '~/components/pub/my-ui/form/combobox.vue'
 
 // Types
 import type { UnitFormData } from '~/schemas/unit.schema.ts'
@@ -15,6 +16,7 @@ import { useForm } from 'vee-validate'
 
 interface Props {
   schema: z.ZodSchema<any>
+  installations: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -33,19 +35,20 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    installation: '',
+    installation_id: 0,
   } as Partial<UnitFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [installation, installationAttrs] = defineField('installation')
+const [installation, installationAttrs] = defineField('installation_id')
 
 // Fill fields from props.values if provided
 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.installation !== undefined) installation.value = props.values.installation
+  if (props.values.installation_id !== undefined)
+    installation.value = props.values.installation_id ? String(props.values.installation_id) : null
 }
 
 const resetForm = () => {
@@ -59,7 +62,7 @@ function onSubmitForm(values: any) {
   const formData: UnitFormData = {
     name: name.value || '',
     code: code.value || '',
-    installation: installation.value || '',
+    installation_id: installation.value ? Number(installation.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -85,6 +88,21 @@ function onCancelForm() {
           <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
         </Field>
       </Cell>
+      <Cell>
+        <Label height="compact">Instalasi</Label>
+        <Field :errMessage="errors.installation">
+          <Combobox
+            id="installation"
+            v-model="installation"
+            v-bind="installationAttrs"
+            :items="installations"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Instalasi"
+            search-placeholder="Cari instalasi"
+            empty-message="Instalasi tidak ditemukan"
+          />
+        </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>
diff --git a/app/components/app/unit/list-cfg.ts b/app/components/app/unit/list-cfg.ts
index 13bbc16f..04975ddc 100644
--- a/app/components/app/unit/list-cfg.ts
+++ b/app/components/app/unit/list-cfg.ts
@@ -28,8 +28,9 @@ export const funcParsed: RecStrFuncUnknown = {
     const recX = rec as SmallDetailDto
     return `${recX.name}`.trim()
   },
-  installation: (_rec: unknown): unknown => {
-    return '-'
+  installation: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.installation?.name || recX.Installation?.name || '-'
   },
 }
 
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
index 53558b2b..e1b056ce 100644
--- a/app/components/app/unit/list.vue
+++ b/app/components/app/unit/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/uom/list.vue b/app/components/app/uom/list.vue
index 9d655fdf..3af2b398 100644
--- a/app/components/app/uom/list.vue
+++ b/app/components/app/uom/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// 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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
diff --git a/app/components/app/warehouse/entry-form.vue b/app/components/app/warehouse/entry-form.vue
new file mode 100644
index 00000000..fb851aa4
--- /dev/null
+++ b/app/components/app/warehouse/entry-form.vue
@@ -0,0 +1,105 @@
+<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'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.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: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: 'counter',
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = 'counter'
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || 'counter',
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-counter" @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>
+    </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/warehouse/list-cfg.ts b/app/components/app/warehouse/list-cfg.ts
new file mode 100644
index 00000000..5174e69a
--- /dev/null
+++ b/app/components/app/warehouse/list-cfg.ts
@@ -0,0 +1,47 @@
+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: 100 }, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'parent', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { 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 || '-'
+  },
+}
+
+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/warehouse/list.vue b/app/components/app/warehouse/list.vue
new file mode 100644
index 00000000..af63d76e
--- /dev/null
+++ b/app/components/app/warehouse/list.vue
@@ -0,0 +1,36 @@
+<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'
+
+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">
+    <PubBaseDataTable
+      :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" />
+  </div>
+</template>
diff --git a/app/components/content/assesment-function/add.vue b/app/components/content/assesment-function/add.vue
new file mode 100644
index 00000000..128cf74a
--- /dev/null
+++ b/app/components/content/assesment-function/add.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>
diff --git a/app/components/content/assesment-function/list.vue b/app/components/content/assesment-function/list.vue
new file mode 100644
index 00000000..fcee9066
--- /dev/null
+++ b/app/components/content/assesment-function/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/assesment-function/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/bed/list.vue b/app/components/content/bed/list.vue
new file mode 100644
index 00000000..814e3501
--- /dev/null
+++ b/app/components/content/bed/list.vue
@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for bed -->
+<!-- TODO: Update logic and fields for bed context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>
diff --git a/app/components/content/building/list.vue b/app/components/content/building/list.vue
new file mode 100644
index 00000000..1b8a1d3d
--- /dev/null
+++ b/app/components/content/building/list.vue
@@ -0,0 +1,162 @@
+<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 AppBuildingList from '~/components/app/building/list.vue'
+import AppBuildingEntryForm from '~/components/app/building/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail } from '~/services/infra.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,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.building,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'building',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Gedung',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari gedung...',
+    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 Gedung'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Gedung'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppBuildingList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+    <AppBuildingEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | 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="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/chamber/list.vue b/app/components/content/chamber/list.vue
new file mode 100644
index 00000000..32b6c945
--- /dev/null
+++ b/app/components/content/chamber/list.vue
@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for chamber -->
+<!-- TODO: Update logic and fields for chamber context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>
diff --git a/app/components/content/counter/list.vue b/app/components/content/counter/list.vue
new file mode 100644
index 00000000..c2ccbacd
--- /dev/null
+++ b/app/components/content/counter/list.vue
@@ -0,0 +1,152 @@
+<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 AppCounterEntryForm from '~/components/app/counter/entry-form.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'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getInfras, getInfraDetail } from '~/services/infra.service'
+
+const title = ref('')
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getCounterList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getInfras({ search, page, infraGroup_code: 'counter' })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'counter',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Counter',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari counter...',
+    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 getCurrentCounterDetail = async (id: number | string) => {
+  const result = await getInfraDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentCounterDetail(recId.value)
+      title.value = 'Detail Counter'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentCounterDetail(recId.value)
+      title.value = 'Edit Counter'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getCounterList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppCounterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Counter'" size="lg" prevent-outside>
+    <AppCounterEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getCounterList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getCounterList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getCounterList, 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/division/list.vue b/app/components/content/division/list.vue
index 8bb4e390..5d19f918 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -13,6 +13,7 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
+import type { TreeItem } from '~/models/_base'
 
 // Handlers
 import {
@@ -30,8 +31,9 @@ import {
 } from '~/handlers/division.handler'
 
 // Services
-import { getDivisions, getDivisionDetail } from '~/services/division.service'
+import { getList, getDetail, getValueTreeItems } from '~/services/division.service'
 
+const divisionsTrees = ref<TreeItem[]>([])
 const title = ref('')
 
 const {
@@ -43,8 +45,13 @@ const {
   handleSearch,
   fetchData: getDivisionList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getDivisions({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'parent,childrens',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'division',
@@ -82,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentDivisionDetail = async (id: number | string) => {
-  const result = await getDivisionDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -109,6 +116,22 @@ watch([recId, recAction], () => {
   }
 })
 
+watch(
+  () => data.value,
+  async () => {
+    if (!data.value) return
+    const result = await getList({
+      'page-size': 100,
+      'only-have-children': false,
+      includes: 'parent,childrens',
+    })
+    if (result.success) {
+      const currentData = result.body.data || []
+      divisionsTrees.value = getValueTreeItems(currentData || [])
+    }
+  },
+)
+
 onMounted(async () => {
   await getDivisionList()
 })
@@ -122,16 +145,27 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <AppDivisionList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppDivisionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Divisi'" size="lg" prevent-outside>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Divisi'"
+    size="lg"
+    prevent-outside
+  >
     <AppDivisionEntryForm
       :schema="DivisionSchema"
+      :divisions="divisionsTrees"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
       @submit="
         (values: DivisionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
           if (recId > 0) {
             handleActionEdit(recId, values, getDivisionList, resetForm, toast)
             return
@@ -153,9 +187,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/encounter/process.vue b/app/components/content/encounter/process.vue
index eb69f690..e7c0ffc4 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
+//
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+// 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 Status from '~/components/app/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+
 const route = useRoute()
 const router = useRouter()
 
@@ -9,7 +18,7 @@ const router = useRouter()
 const activeTab = computed({
   get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
   set: (val: string) => {
-    router.replace({ path: route.path, query: { tab: val } });
+    router.replace({ path: route.path, query: { tab: val } })
   },
 })
 
@@ -25,23 +34,38 @@ const data = {
   noBilling: '223332',
   dpjp: 'dr. Syaifullah, Sp.OT(K)',
 }
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
+  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: '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' },
+]
 </script>
 
 <template>
   <div class="w-full">
     <div class="mb-4">
-      <Button
-        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-        </svg>
-        Kembali ke Daftar Kunjungan
-      </Button>
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
-
     <AppEncounterQuickInfo :data="data" />
-
-    <AppEncounterProcess :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+    <CompTab :data="tabs" :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
   </div>
 </template>
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 48c5141f..7bae66dc 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/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 { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
-import type { Uom } from '~/models/uom'
 
 // Handlers
 import {
@@ -31,8 +30,8 @@ import {
 } from '~/handlers/material.handler'
 
 // Services
-import { getMaterials, getMaterialDetail } from '~/services/material.service'
-import { getUoms } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/material.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
@@ -46,8 +45,12 @@ const {
   handleSearch,
   fetchData: getEquipmentList,
 } = usePaginatedList({
-  fetchFn: async ({ page }) => {
-    const result = await getMaterials({ search: searchInput.value, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'equipment',
@@ -85,7 +88,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMaterialDetail = async (id: number | string) => {
-  const result = await getMaterialDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -93,14 +96,6 @@ const getCurrentMaterialDetail = async (id: number | string) => {
   }
 }
 
-const getUomList = async () => {
-  const result = await getUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -121,7 +116,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getUomList()
+  uoms.value = await getUomList()
   await getEquipmentList()
 })
 </script>
diff --git a/app/components/content/floor/list.vue b/app/components/content/floor/list.vue
new file mode 100644
index 00000000..5124b456
--- /dev/null
+++ b/app/components/content/floor/list.vue
@@ -0,0 +1,166 @@
+<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 AppFloorList from '~/components/app/floor/list.vue'
+import AppFloorEntryForm from '~/components/app/floor/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.floor,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'floor',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Lantai',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari lantai...',
+    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 Lantai'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Lantai'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.building })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppFloorList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+    <AppFloorEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | 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="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/installation/list.vue b/app/components/content/installation/list.vue
index e4ee0d19..d836581d 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -1,31 +1,41 @@
 <script setup lang="ts">
-import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
+// 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 { ActionEvents } from '~/components/pub/my-ui/data/types'
-import Header from '~/components/pub/my-ui/nav-header/header.vue'
-import { transform, usePaginatedList } from '~/composables/usePaginatedList'
-import { installationConf, schemaConf } from './entry'
+import AppInstallationList from '~/components/app/installation/list.vue'
+import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
 
-// #region State & Computed
-// Dialog state
-const isFormEntryDialogOpen = ref(false)
-const isRecordConfirmationOpen = ref(false)
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-// Table action rowId provider
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InstallationSchema, type InstallationFormData } from '~/schemas/installation.schema'
 
-// Fungsi untuk fetch data installation
-async function fetchInstallationData(params: any) {
-  // Prepare query parameters for pagination and search
-  const endpoint = transform('/api/v1/patient', params)
-  return await xfetch(endpoint)
-}
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/installation.service'
+import { getValueLabelListConstants as getEncounterList } from '~/services/encounter.service'
+
+const encounterClasses = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -35,7 +45,14 @@ const {
   handleSearch,
   fetchData: getInstallationList,
 } = usePaginatedList({
-  fetchFn: fetchInstallationData,
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0, 
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
   entityName: 'installation',
 })
 
@@ -47,21 +64,20 @@ const headerPrep: HeaderPrep = {
     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
+    onInput: (value: string) => {
+      searchInput.value = value
     },
+    onClick: () => {},
+    onClear: () => {},
   },
   addNav: {
-    label: 'Tambah Instalasi',
-    icon: 'i-lucide-send',
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -70,137 +86,90 @@ 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/Installation/${record.id}`, {
-    //   method: 'DELETE'
-    // })
-
-    // Refresh data setelah berhasil delete
-    await getInstallationList()
-
-    // 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
+const getCurrentInstallationDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
   }
 }
 
-// #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/Installation', {
-    //   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 getInstallationList()
-
-    // 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, () => {
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Detail Instalasi'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Edit Instalasi'
+      isReadonly.value = false
       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
+onMounted(async () => {
+  encounterClasses.value = getEncounterList()
+  await getInstallationList()
+})
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
   <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
-    <AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
-      :initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
-      @cancel="onCancelForm" />
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Instalasi'"
+    size="lg"
+    prevent-outside
+  >
+    <AppInstallationEntryForm
+      :schema="InstallationSchema"
+      :encounter-classes="encounterClasses"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getInstallationList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
   </Dialog>
 
   <!-- Record Confirmation Modal -->
-  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationList, toast)"
+    @cancel=""
+  >
     <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>
+        <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>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 3ff9e241..c0a85b00 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -12,7 +12,7 @@ import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { BaseSchema, type BaseFormData } from '~/schemas/base.schema'
+import { BaseSchema, type BaseFormData } from '~/schemas/my-ui.schema'
 
 // Handlers
 import {
@@ -30,7 +30,7 @@ import {
 } from '~/handlers/medicine-group.handler'
 
 // Services
-import { getMedicineGroups, getMedicineGroupDetail } from '~/services/medicine-group.service'
+import { getList, getDetail } from '~/services/medicine-group.service'
 
 const title = ref('')
 
@@ -43,8 +43,12 @@ const {
   handleSearch,
   fetchData: getMedicineGroupList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getMedicineGroups({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'medicine-group',
@@ -82,7 +86,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMedicineGroupDetail = async (id: number | string) => {
-  const result = await getMedicineGroupDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index 36f93087..5f555dba 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -12,7 +12,7 @@ import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { BaseSchema, type BaseFormData } from '~/schemas/base.schema'
+import { BaseSchema, type BaseFormData } from '~/schemas/my-ui.schema'
 
 // Handlers
 import {
@@ -30,7 +30,7 @@ import {
 } from '~/handlers/medicine-method.handler'
 
 // Services
-import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
+import { getList, getDetail } from '~/services/medicine-method.service'
 
 const title = ref('')
 
@@ -43,8 +43,12 @@ const {
   handleSearch,
   fetchData: getMedicineMethodList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getMedicineMethods({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'medicine-method',
@@ -82,7 +86,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMedicineMethodDetail = async (id: number | string) => {
-  const result = await getMedicineMethodDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index 1aa3a492..d52c0ea4 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -33,10 +33,10 @@ import {
 } from '~/handlers/medicine.handler'
 
 // Services
-import { getMedicines, getMedicineDetail } from '~/services/medicine.service'
-import { getMedicineGroups } from '~/services/medicine-group.service'
-import { getMedicineMethods } from '~/services/medicine-method.service'
-import { getUoms } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/medicine.service'
+import { getValueLabelList as getMedicineGroupList } from '~/services/medicine-group.service'
+import { getValueLabelList as getMedicineMethodList } from '~/services/medicine-method.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
 
 const medicineGroups = ref<{ value: string; label: string }[]>([])
 const medicineMethods = ref<{ value: string; label: string }[]>([])
@@ -52,8 +52,13 @@ const {
   handleSearch,
   fetchData: getMedicineList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getMedicines({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'medicineGroup,medicineMethod,uom',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'medicine',
@@ -91,7 +96,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMedicineDetail = async (id: number | string) => {
-  const result = await getMedicineDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -99,36 +104,6 @@ const getCurrentMedicineDetail = async (id: number | string) => {
   }
 }
 
-const getMedicineGroupList = async () => {
-  const result = await getMedicineGroups()
-  if (result.success) {
-    const currentMedicineGroups = result.body?.data || []
-    medicineGroups.value = currentMedicineGroups.map((medicineGroup: MedicineGroup) => ({
-      value: medicineGroup.code,
-      label: medicineGroup.name,
-    }))
-  }
-}
-
-const getMedicineMethodList = async () => {
-  const result = await getMedicineMethods()
-  if (result.success) {
-    const currentMedicineMethods = result.body?.data || []
-    medicineMethods.value = currentMedicineMethods.map((medicineMethod: MedicineMethod) => ({
-      value: medicineMethod.code,
-      label: medicineMethod.name,
-    }))
-  }
-}
-
-const getUomList = async () => {
-  const result = await getUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
@@ -148,9 +123,9 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getMedicineGroupList()
-  await getMedicineMethodList()
-  await getUomList()
+  medicineGroups.value = await getMedicineGroupList()
+  medicineMethods.value = await getMedicineMethodList()
+  uoms.value = await getUomList()
   await getMedicineList()
 })
 </script>
diff --git a/app/components/content/patient/detail.vue b/app/components/content/patient/detail.vue
new file mode 100644
index 00000000..0ca4cd0d
--- /dev/null
+++ b/app/components/content/patient/detail.vue
@@ -0,0 +1,83 @@
+<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 { Person } from '~/models/person'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { getPatientDetail } from '~/services/patient.service'
+
+// #region Props & Emits
+const props = defineProps<{
+  patientId: number
+}>()
+
+// #endregion
+
+// #region State & Computed
+const patient = ref(
+  withBase<PatientEntity>({
+    person: {} as Person,
+    personAddresses: [],
+    personContacts: [],
+    personRelatives: [],
+  }),
+)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Pasien',
+  icon: 'i-lucide-user',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  // await getPatientDetail()
+  const result = await getPatientDetail(props.patientId)
+  if (result.success) {
+    patient.value = result.body.data || {}
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      console.log('editing data')
+      break
+
+    case 'cancel':
+      navigateTo({
+        name: 'client-patient',
+      })
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <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"
+    @click="handleAction"
+  />
+</template>
diff --git a/app/components/content/patient/entry.vue b/app/components/content/patient/entry.vue
new file mode 100644
index 00000000..b0b5569e
--- /dev/null
+++ b/app/components/content/patient/entry.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { PatientEntity, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+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'
+
+// #region Props & Emits
+const payload = ref<PatientEntity>()
+
+// form related state
+const personAddressForm = ref<ExposedForm<any> | null>(null)
+const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
+const personContactForm = ref<ExposedForm<any> | null>(null)
+const personEmergencyContactRelative = ref<ExposedForm<any> | null>(null)
+const personFamilyForm = ref<ExposedForm<any> | null>(null)
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+async function submitAll() {
+  const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
+    personPatientForm.value?.validate(),
+    personAddressForm.value?.validate(),
+    personAddressRelativeForm.value?.validate(),
+    personFamilyForm.value?.validate(),
+    personContactForm.value?.validate(),
+    personEmergencyContactRelative.value?.validate(),
+  ])
+
+  const results = [patient, address, addressRelative, families, contacts, emergencyContact]
+  console.log(results)
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  // for example: dropdown not selected
+  if (!allValid) return
+
+  const formDataRequest: genPatientProps = {
+    patient: patient?.values,
+    residentAddress: address?.values,
+    cardAddress: addressRelative?.values,
+    familyData: families?.values,
+    contacts: contacts?.values,
+    responsible: emergencyContact?.values,
+  }
+
+  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
+    }
+  } catch (error) {
+    console.error('Error creating patient:', error)
+    // Handle error - show error message to user
+  }
+}
+// #endregion
+
+// #region Watchers
+// Watcher untuk sinkronisasi alamat ketika isSameAddress = '1'
+watch(
+  () => personAddressForm.value?.values,
+  (newAddressValues) => {
+    // Cek apakah alamat KTP harus sama dengan alamat sekarang
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress === '1'
+
+    if (isSameAddress && 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 || '',
+        },
+        false,
+      )
+    }
+  },
+  { deep: true },
+)
+
+// Watcher untuk memantau perubahan isSameAddress
+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
+      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 || '',
+        },
+        false,
+      )
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Pasien</div>
+  <AppPatientEntryForm
+    ref="personPatientForm"
+    :schema="PatientSchema"
+  />
+  <AppPersonAddressEntryForm
+    ref="personAddressForm"
+    title="Alamat Sekarang"
+    :schema="PersonAddressSchema"
+  />
+  <AppPersonAddressEntryFormRelative
+    ref="personAddressRelativeForm"
+    title="Alamat KTP"
+    :schema="PersonAddressRelativeSchema"
+  />
+  <AppPersonFamilyParentsForm
+    ref="personFamilyForm"
+    title="Identitas Orang Tua"
+    :schema="PersonFamiliesSchema"
+  />
+  <AppPersonContactEntryForm
+    ref="personContactForm"
+    title="Kontak Pasien"
+    :contact-limit="10"
+    :schema="PersonContactListSchema"
+  />
+  <AppPersonRelativeEntryForm
+    ref="personEmergencyContactRelative"
+    title="Penanggung Jawab"
+    :schema="ResponsiblePersonSchema"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="submitAll" />
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/patient/list.vue b/app/components/content/patient/list.vue
index 7d3c3c79..2b73ca08 100644
--- a/app/components/content/patient/list.vue
+++ b/app/components/content/patient/list.vue
@@ -1,46 +1,54 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { Summary } from '~/components/pub/my-ui/summary-card/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+// #region Imports
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
-import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
 
-const data = ref([])
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
-  onInput: (_val: string) => {
-    // filter patient list
+  onInput: (val: string) => {
+    searchInput.value = val
   },
   onClear: () => {
-    // clear url param
+    searchInput.value = ''
   },
 }
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
-})
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
 
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'Pasien',
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/patient/add'),
+    onClick: () => navigateTo('/client/patient/add'),
   },
 }
 
-// Initial/default data structure
-const summaryData: Summary[] = [
+const summaryData = ref<Summary[]>([
   {
     title: 'Total Pasien',
     icon: UsersRound,
@@ -69,53 +77,140 @@ const summaryData: Summary[] = [
     trend: -3,
     timeframe: 'daily',
   },
-]
+])
+// #endregion
 
-// API call function
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
 async function getPatientSummary() {
   try {
-    isLoading.summary = true
-
+    summaryLoading.value = true
     await new Promise((resolve) => setTimeout(resolve, 500))
   } catch (error) {
     console.error('Error fetching patient summary:', error)
-    // Keep default/existing data on error
   } finally {
-    isLoading.summary = false
+    summaryLoading.value = false
   }
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
   }
-  isLoading.isTableLoading = false
 }
 
-onMounted(() => {
-  getPatientSummary()
-  getPatientList()
-})
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
 
+// #region Provide
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'client-patient-id',
+        params: { id: recId.value },
+      })
+      break
+
+    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 :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    v-model:search="searchInput"
+    :prep="{ ...headerPrep }"
+    :ref-search-nav="refSearchNav"
+  />
   <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="isLoading.summary">
-        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
+      <template v-if="summaryLoading">
+        <SummaryCard
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
       </template>
       <template v-else>
-        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
       </template>
     </div>
-    <AppPatientList :data="data" />
+    <AppPatientList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </div>
+
+  <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>
diff --git a/app/components/content/room/list.vue b/app/components/content/room/list.vue
new file mode 100644
index 00000000..bd716240
--- /dev/null
+++ b/app/components/content/room/list.vue
@@ -0,0 +1,200 @@
+<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 AppRoomList from '~/components/app/room/list.vue'
+import AppRoomEntryForm from '~/components/app/room/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+import { getValueLabelList as getSpecialistList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistList } from '~/services/subspecialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const specialists = ref<{ value: string; label: string }[]>([])
+const subspecialists = ref<{ value: string; label: string }[]>([])
+const units = ref<{ value: string; label: string }[]>([])
+const selectedUnit = ref<string | number | null>(null)
+const selectedSpecialist = ref<string | number | null>(null)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.room,
+      includes: 'parent,specialist,subspecialist,unit',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'room',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Ruangan',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari Ruangan...',
+    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 Ruangan'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Ruangan'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch(selectedUnit, async (val) => {
+  if (val) {
+    specialists.value = await getSpecialistList({ 'unit-id': val, 'page-size': 100 })
+    selectedSpecialist.value = null
+    subspecialists.value = []
+  } else {
+    specialists.value = []
+    selectedSpecialist.value = null
+    subspecialists.value = []
+  }
+})
+
+watch(selectedSpecialist, async (val) => {
+  if (val) {
+    subspecialists.value = await getSubspecialistList({ 'specialist-id': val, 'page-size': 100 })
+  } else {
+    subspecialists.value = []
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.floor })
+  units.value = await getUnitList({ 'page-size': 100 })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppRoomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Ruangan'" size="lg" prevent-outside>
+    <AppRoomEntryForm
+      :schema="InfraSchema"
+      :specialists="specialists"
+      :subspecialists="subspecialists"
+      :units="units"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @update:selected-unit="(val: any) => (selectedUnit = val)"
+      @update:selected-specialist="(val: any) => (selectedSpecialist = val)"
+      @submit="
+        (values: InfraFormData | 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="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/soapi/entry.vue b/app/components/content/soapi/entry.vue
new file mode 100644
index 00000000..05c25ec7
--- /dev/null
+++ b/app/components/content/soapi/entry.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import EarlyMedicalAssesmentList from './list.vue'
+import EarlyMedicalAssesmentForm from './form.vue'
+
+const { mode, openForm, backToList } = useQueryMode('mode')
+</script>
+
+<template>
+  <div>
+    <EarlyMedicalAssesmentList v-if="mode === 'list'" @add="openForm" />
+    <EarlyMedicalAssesmentForm v-else @back="backToList" />
+  </div>
+</template>
diff --git a/app/components/content/soapi/form.vue b/app/components/content/soapi/form.vue
new file mode 100644
index 00000000..916f22d6
--- /dev/null
+++ b/app/components/content/soapi/form.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry type="early" :exclude-fields="['prim-compl', 'sec-compl']" @click="handleClick" />
+  <Dialog v-model:open="isOpen" title="Pilih Prosedur" size="xl" prevent-outside>
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
new file mode 100644
index 00000000..e1d8373a
--- /dev/null
+++ b/app/components/content/soapi/list.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emits = defineEmits(['add', 'edit'])
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => emits('add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index ab3d13bb..5e869f3b 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/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 { SpecialistSchema, type SpecialistFormData } from '~/schemas/specialist.schema'
-import type { Unit } from '~/models/unit'
 
 // Handlers
 import {
@@ -31,10 +30,10 @@ import {
 } from '~/handlers/specialist.handler'
 
 // Services
-import { getSpecialists, getSpecialistDetail } from '~/services/specialist.service'
-import { getUnits } from '~/services/unit.service'
+import { getList, getDetail } from '~/services/specialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
 
-const units = ref<{ value: string; label: string }[]>([])
+const units = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -46,15 +45,20 @@ const {
   handleSearch,
   fetchData: getSpecialistList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getSpecialists({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'unit',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'specialist',
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Specialist',
+  title: 'Spesialis',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -85,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentSpecialistDetail = async (id: number | string) => {
-  const result = await getSpecialistDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -93,14 +97,6 @@ const getCurrentSpecialistDetail = async (id: number | string) => {
   }
 }
 
-const getUnitList = async () => {
-  const result = await getUnits()
-  if (result.success) {
-    const currentUnits = result.body?.data || []
-    units.value = currentUnits.map((item: Unit) => ({ value: item.id ? Number(item.id) : item.code, label: item.name }))
-  }
-}
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -121,7 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getUnitList()
+  units.value = await getUnitList()
   await getSpecialistList()
 })
 </script>
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index 8da9e24c..2e5b7e44 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/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 { SubspecialistSchema, type SubspecialistFormData } from '~/schemas/subspecialist.schema'
-import type { Specialist } from '~/models/specialist'
 
 // Handlers
 import {
@@ -31,10 +30,10 @@ import {
 } from '~/handlers/subspecialist.handler'
 
 // Services
-import { getSubspecialists, getSubspecialistDetail } from '~/services/subspecialist.service'
-import { getSpecialists } from '~/services/specialist.service'
+import { getList, getDetail } from '~/services/subspecialist.service'
+import { getValueLabelList as getSpecialistsList } from '~/services/specialist.service'
 
-const specialists = ref<{ value: string; label: string }[]>([])
+const specialists = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -46,15 +45,20 @@ const {
   handleSearch,
   fetchData: getSubSpecialistList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getSubspecialists({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'specialist',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'subspecialist',
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'SubSpecialist',
+  title: 'Sub Spesialis',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -85,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentSubSpecialistDetail = async (id: number | string) => {
-  const result = await getSubspecialistDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -93,17 +97,6 @@ const getCurrentSubSpecialistDetail = async (id: number | string) => {
   }
 }
 
-const getSpecialistsList = async () => {
-  const result = await getSpecialists()
-  if (result.success) {
-    const currentSpecialists = result.body?.data || []
-    specialists.value = currentSpecialists.map((item: Specialist) => ({
-      value: item.id ? Number(item.id) : item.code,
-      label: item.name,
-    }))
-  }
-}
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -124,7 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getSpecialistsList()
+  specialists.value = await getSpecialistsList()
   await getSubSpecialistList()
 })
 </script>
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index c57b65b2..32fbbdea 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/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 { DeviceSchema, type DeviceFormData } from '~/schemas/device.schema'
-import type { Uom } from '~/models/uom'
 
 // Handlers
 import {
@@ -31,8 +30,8 @@ import {
 } from '~/handlers/device.handler'
 
 // Services
-import { getDevices, getDeviceDetail } from '~/services/device.service'
-import { getUoms } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/device.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
@@ -46,8 +45,8 @@ const {
   handleSearch,
   fetchData: getToolsList,
 } = usePaginatedList({
-  fetchFn: async ({ page }) => {
-    const result = await getDevices({ search: searchInput.value, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({ search: params.search, 'page-number': params['page-number'] || 0 })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'device',
@@ -89,21 +88,13 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentToolsDetail = async (id: number | string) => {
-  const result = await getDeviceDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
   }
 }
 
-const getUomList = async () => {
-  const result = await getUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 // Watch for row actions
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -126,7 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getUomList()
+  uoms.value = await getUomList()
   await getToolsList()
 })
 </script>
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 8105eb79..d8ffafa5 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -30,8 +30,10 @@ import {
 } from '~/handlers/unit.handler'
 
 // Services
-import { getUnits, getUnitDetail } from '~/services/unit.service'
+import { getList, getDetail } from '~/services/unit.service'
+import { getValueLabelList as getInstallationList } from '~/services/installation.service'
 
+const installations = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -43,8 +45,13 @@ const {
   handleSearch,
   fetchData: getUnitList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getUnits({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'installation',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'unit',
@@ -82,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentUnitDetail = async (id: number | string) => {
-  const result = await getUnitDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -110,6 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
+  installations.value = await getInstallationList()
   await getUnitList()
 })
 </script>
@@ -127,6 +135,7 @@ onMounted(async () => {
   <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Unit'" size="lg" prevent-outside>
     <AppUnitEntryForm
       :schema="UnitSchema"
+      :installations="installations"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
index e7d6c077..116f0a4d 100644
--- a/app/components/content/uom/list.vue
+++ b/app/components/content/uom/list.vue
@@ -29,7 +29,7 @@ import {
 } from '~/handlers/uom.handler'
 
 // Services
-import { getUoms, getUomDetail } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/uom.service'
 
 const title = ref('')
 
@@ -42,8 +42,12 @@ const {
   handleSearch,
   fetchData: getUomList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getUoms({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'uom',
@@ -81,7 +85,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentUomDetail = async (id: number | string) => {
-  const result = await getUomDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
diff --git a/app/components/content/warehouse/list.vue b/app/components/content/warehouse/list.vue
new file mode 100644
index 00000000..88b7c2b6
--- /dev/null
+++ b/app/components/content/warehouse/list.vue
@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for warehouse -->
+<!-- TODO: Update logic and fields for warehouse context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>
diff --git a/app/components/pub/my-ui/comp-tab/comp-tab.vue b/app/components/pub/my-ui/comp-tab/comp-tab.vue
new file mode 100644
index 00000000..e60fd10d
--- /dev/null
+++ b/app/components/pub/my-ui/comp-tab/comp-tab.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type TabItem } from './type'
+
+const props = defineProps<{
+  initialActiveTab: string
+  data: TabItem[]
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+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 data"
+      :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="data.find((t) => t.value === activeTab)?.component"
+      :is="data.find((t) => t.value === activeTab)?.component"
+      :label="data.find((t) => t.value === activeTab)?.label"
+      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/comp-tab/type.ts b/app/components/pub/my-ui/comp-tab/type.ts
new file mode 100644
index 00000000..e6faacce
--- /dev/null
+++ b/app/components/pub/my-ui/comp-tab/type.ts
@@ -0,0 +1,6 @@
+export interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
diff --git a/app/components/pub/my-ui/form/block.vue b/app/components/pub/my-ui/form/block.vue
index 27015f7a..ee19d116 100644
--- a/app/components/pub/my-ui/form/block.vue
+++ b/app/components/pub/my-ui/form/block.vue
@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
+  <div :class="` mb-5 flex-wrap md:flex ${classValExt || ''}`">
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/my-ui/form/combobox.vue b/app/components/pub/my-ui/form/combobox.vue
index de51600e..f48947f3 100644
--- a/app/components/pub/my-ui/form/combobox.vue
+++ b/app/components/pub/my-ui/form/combobox.vue
@@ -5,6 +5,7 @@ interface Item {
   value: string
   label: string
   code?: string
+  priority?: number
 }
 
 const props = defineProps<{
@@ -15,7 +16,7 @@ const props = defineProps<{
   searchPlaceholder?: string
   emptyMessage?: string
   class?: string
-  disabled?: boolean
+  isDisabled?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -24,31 +25,32 @@ const emit = defineEmits<{
 
 const open = ref(false)
 
-const selectedItem = computed(() =>
-  props.items.find(item => item.value === props.modelValue),
-)
+const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
 
-const displayText = computed(() =>
-  selectedItem.value?.label || props.placeholder || '---pilih item',
-)
+const displayText = computed(() => {
+  if (selectedItem.value?.label) {
+    return selectedItem.value.label
+  }
+  return props.placeholder || 'Pilih item'
+})
 
-// Create searchable items with combined code and label for better search
-// Sort by:
-//  1. Selected item first (highest priority)
-//  2. Then by label alphabetically
 const searchableItems = computed(() => {
-  const itemsWithSearch = props.items.map(item => ({
+  const itemsWithSearch = props.items.map((item) => ({
     ...item,
     searchValue: `${item.code || ''} ${item.label}`.trim(),
     isSelected: item.value === props.modelValue,
   }))
 
   return itemsWithSearch.sort((a, b) => {
-    // Selected item always comes first
+    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
 
-    // If neither or both are selected, sort by label alphabetically
     return a.label.localeCompare(b.label)
   })
 })
@@ -63,45 +65,78 @@ function onSelect(item: Item) {
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
       <Button
-      :id="props.id"
-      :disabled="props.disabled"
-      variant="outline"
-      role="combobox"
-      :aria-expanded="open"
-      :aria-controls="`${props.id}-list`"
-      :aria-describedby="`${props.id}-search`"
-      :class="cn(
-        'w-full justify-between border-1 border-gray-400 bg-white hover:bg-gray-50 text-sm font-normal focus:outline-none focus:ring-1 focus:ring-black',
-        !modelValue && 'text-muted-foreground',
-        props.class,
-      )"
+        :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(
+            'w-full justify-between border text-sm font-normal rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+            {
+              'cursor-not-allowed bg-gray-100 opacity-50 border-gray-300 text-gray-500': props.isDisabled,
+              'bg-white text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700': !props.isDisabled,
+              'text-gray-400 dark:text-gray-500': !modelValue && !props.isDisabled,
+            },
+            props.class,
+          )
+        "
       >
         {{ displayText }}
-        <Icon name="i-lucide-chevrons-up-down" class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <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
+          })"
+        />
       </Button>
     </PopoverTrigger>
-    <PopoverContent class="w-full p-0">
-      <Command>
+    <PopoverContent class="w-[var(--radix-popover-trigger-width)] p-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+      <Command class="bg-white dark:bg-gray-800">
         <CommandInput
           :id="`${props.id}-search`"
-          class="h-9"
+          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"
           :placeholder="searchPlaceholder || 'Cari...'"
           :aria-label="`Cari ${displayText}`"
         />
-        <CommandEmpty>{{ emptyMessage || 'Item tidak ditemukan.' }}</CommandEmpty>
-        <CommandList :id="`${props.id}-list`" role="listbox">
+        <CommandEmpty class="text-gray-500 dark:text-gray-400 py-6 text-center text-sm">
+          {{ 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.searchValue" @select="onSelect(item)">
-              <div class="flex items-center justify-between w-full">
+            <CommandItem
+              v-for="item in searchableItems"
+              :key="item.value"
+              :value="item.searchValue"
+              :class="
+                cn(
+                  'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 text-sm',
+                  'focus:outline-none text-black 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>
+                  <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',
-                      modelValue === item.value ? 'opacity-100' : 'opacity-0',
-                    )"
+                    :class="cn('h-4 w-4', modelValue === item.value ? 'opacity-100' : 'opacity-0')"
                   />
                 </div>
               </div>
diff --git a/app/components/pub/my-ui/form/datepicker-single.vue b/app/components/pub/my-ui/form/datepicker-single.vue
index 7e628404..5a13117f 100644
--- a/app/components/pub/my-ui/form/datepicker-single.vue
+++ b/app/components/pub/my-ui/form/datepicker-single.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 // helpers
 import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
 // components
 import { Button } from '~/components/pub/ui/button'
-import { Calendar } from '~/components/pub/ui/calendar'
+import Calendar from '~/components/pub/ui/calendar/Calendar.vue'
 import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
 
 const props = defineProps<{
@@ -18,7 +19,7 @@ const emit = defineEmits<{
 const date = ref<Date | any>(undefined)
 
 watch(date, (value) => {
-  const newValue = format(value, 'yyyy-MM-dd')
+  const newValue = format(value, 'yyyy-MM-dd', { locale: localeID })
   emit('update:modelValue', newValue)
 })
 
@@ -42,14 +43,14 @@ onMounted(() => {
       <PopoverTrigger as-child>
         <Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
           <div class="flex justify-between items-center w-full">
-            <p v-if="date">{{ format(date, 'PPP') }}</p>
+            <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" />
           </div>
         </Button>
       </PopoverTrigger>
       <PopoverContent class="w-auto p-0">
-        <Calendar v-model="date" mode="single" />
+        <Calendar v-model="date" mode="single" locale="id" />
       </PopoverContent>
     </Popover>
   </div>
diff --git a/app/components/pub/my-ui/form/field-group.vue b/app/components/pub/my-ui/form/field-group.vue
index 48d1be1f..a722495b 100644
--- a/app/components/pub/my-ui/form/field-group.vue
+++ b/app/components/pub/my-ui/form/field-group.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
     density: 'default',
     side: 'default',
     position: 'default',
-    layout: 'default',
+    layout: 'stacked',
     class: '',
   },
 )
@@ -26,12 +26,13 @@ const widthClass = computed(() => {
 })
 
 const wrapperClass = computed(() => [
-  'w-full flex-shrink-0 mb-3',
+  'w-full flex-shrink-0',
   widthClass.value,
 
-  props.layout === 'stacked' ? 'flex flex-col p-2' : 'md:flex',
+  props.layout === 'stacked' ? 'flex flex-col' : 'md:flex',
 
-  props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
+  // Only add margin bottom if no custom class overrides it
+  props.class?.includes('mb-') ? '' : (props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : 'mb-3'),
   props.class,
 ])
 </script>
diff --git a/app/components/pub/my-ui/form/field.vue b/app/components/pub/my-ui/form/field.vue
index 96497be5..48e3bc3d 100644
--- a/app/components/pub/my-ui/form/field.vue
+++ b/app/components/pub/my-ui/form/field.vue
@@ -10,8 +10,9 @@ defineProps<{
 <template>
   <div class="grow">
     <slot />
-    <div v-if="id && errors?.[id]" class="field-error-info">
-      {{ errors[id]?.message }}
+    <!-- Always reserve space for error message to prevent CLS -->
+    <div class="field-error-info">
+      {{ (id && errors?.[id]) ? errors[id]?.message : '' }}
     </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
new file mode 100644
index 00000000..baa4b261
--- /dev/null
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -0,0 +1,82 @@
+<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'
+
+const props = defineProps<{
+  fieldName: string
+  placeholder: string
+  label: string
+  errors?: FormErrors
+  class?: string
+  numericOnly?: boolean
+  maxLength?: number
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  let value = target.value
+
+  // Filter numeric only jika diperlukan
+  if (props.numericOnly) {
+    value = value.replace(/\D/g, '')
+  }
+
+  // Batasi panjang maksimal jika diperlukan
+  if (props.maxLength && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength)
+  }
+
+  // Update value jika ada perubahan
+  if (target.value !== value) {
+    target.value = value
+    // Trigger input event untuk update form
+    target.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+}
+</script>
+
+<template>
+  <FieldGroup>
+    <Label
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :maxlength="maxLength"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              autocomplete="off"
+              aria-autocomplete="none"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+              @input="handleInput"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/pub/my-ui/form/label.vue b/app/components/pub/my-ui/form/label.vue
index 4186d880..74312222 100644
--- a/app/components/pub/my-ui/form/label.vue
+++ b/app/components/pub/my-ui/form/label.vue
@@ -2,16 +2,18 @@
 const props = withDefaults(
   defineProps<{
     labelFor?: string
-    size?: 'default' | 'narrow' | 'wide'
+    size?: 'default' | 'narrow' | 'wide' | 'fit'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
     stacked?: boolean
+    isRequired?: boolean
   }>(),
   {
     size: 'default',
     height: 'default',
     position: 'default',
-    stacked: false,
+    stacked: true,
+    isRequired: false,
   },
 )
 
@@ -19,6 +21,7 @@ const sizeMap = {
   default: 'w-28 2xl:w-36',
   narrow: 'w-24 2xl:w-28',
   wide: 'w-44 2xl:w-48',
+  fit: 'w-fit',
 } as const
 
 const heightMap = {
@@ -43,13 +46,23 @@ const wrapperClass = computed(() => [
   props.stacked ? '' : positionWrapMap[props.position],
 ])
 
-const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-medium' : positionChildMap[props.position]])
+const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-normal' : positionChildMap[props.position]])
 </script>
 
 <template>
   <div :class="wrapperClass">
-    <label class="block" :class="labelClass" :for="labelFor">
+    <label
+      class="block"
+      :class="labelClass"
+      :for="labelFor"
+    >
       <slot />
+      <span
+        v-if="isRequired"
+        class="text-red-600"
+      >
+        *
+      </span>
     </label>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/form/select.vue b/app/components/pub/my-ui/form/select.vue
index ec5f882c..189f112a 100644
--- a/app/components/pub/my-ui/form/select.vue
+++ b/app/components/pub/my-ui/form/select.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { SelectRoot } from 'radix-vue'
-import {
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from '~/components/pub/ui/select'
+import { watch } from 'vue'
+import SelectContent from '~/components/pub/ui/select/SelectContent.vue'
+import SelectGroup from '~/components/pub/ui/select/SelectGroup.vue'
+import SelectItem from '~/components/pub/ui/select/SelectItem.vue'
+import SelectLabel from '~/components/pub/ui/select/SelectLabel.vue'
+import SelectSeparator from '~/components/pub/ui/select/SelectSeparator.vue'
+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 {
   value: string
   label: string
   code?: string
+  priority?: number // Priority untuk sorting: negatif = bawah, positif = atas, 0/undefined = normal sorting
 }
 
 const props = defineProps<{
@@ -24,40 +24,121 @@ const props = defineProps<{
   label?: string
   separator?: boolean
   class?: string
+  isSelectedFirst?: boolean
+  preserveOrder?: boolean
+  isDisabled?: boolean
+  autoWidth?: boolean
+  autoFill?: boolean
+  // otherPlacement sudah tidak digunakan, diganti dengan priority system di Item interface
 }>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-// Sort items with selected item first, then alphabetically
-const sortedItems = computed(() => {
-  const itemsWithSelection = props.items.map(item => ({
+const processedItems = computed(() => {
+  const itemsWithSelection = props.items.map((item) => ({
     ...item,
     isSelected: item.value === props.modelValue,
   }))
 
-  return itemsWithSelection.sort((a, b) => {
-    // Selected item always comes first
-    if (a.isSelected && !b.isSelected) return -1
-    if (!a.isSelected && b.isSelected) return 1
+  // Jika preserveOrder true, kembalikan urutan array asli
+  if (props.preserveOrder) {
+    return itemsWithSelection
+  }
+
+  // Sorting dengan priority system
+  return itemsWithSelection.sort((a, b) => {
+    const aPriority = a.priority ?? 0
+    const bPriority = b.priority ?? 0
+
+    // Jika ada priority, sort berdasarkan priority (descending: tinggi ke rendah)
+    if (aPriority !== bPriority) {
+      return bPriority - aPriority
+    }
+
+    // Jika priority sama (termasuk 0/undefined), lakukan sorting normal
+    if (props.isSelectedFirst) {
+      if (a.isSelected && !b.isSelected) return -1
+      if (!a.isSelected && b.isSelected) return 1
+    }
 
-    // If neither or both are selected, sort by label alphabetically
     return a.label.localeCompare(b.label)
   })
 })
 
+// Computed property untuk menghitung width optimal berdasarkan konten terpanjang
+const optimalWidth = computed(() => {
+  // Jika autoWidth false atau undefined, gunakan full width
+  if (!props.autoWidth) return '100%'
+
+  if (!props.items.length) return 'auto'
+
+  // Mencari label terpanjang
+  const longestLabel = props.items.reduce((longest, item) => {
+    const itemText = item.code ? `${item.label} ${item.code}` : item.label
+    return itemText.length > longest.length ? itemText : longest
+  }, '')
+
+  // Menghitung width berdasarkan panjang karakter (estimasi)
+  // Setiap karakter ~0.6em, ditambah padding dan space untuk icon
+  const estimatedWidth = Math.max(longestLabel.length * 0.6 + 3, 8) // minimum 8em
+
+  return `${Math.min(estimatedWidth, 25)}em` // maksimum 25em
+})
+
 function onValueChange(value: string) {
   emit('update:modelValue', value)
 }
+
+// Auto fill logic - automatically select first item if autoFill is enabled
+watch(
+  () => props.items,
+  (newItems) => {
+    if (props.autoFill && newItems.length > 0 && !props.modelValue) {
+      // Auto select first item only if no value is currently selected
+      const firstItem = newItems[0]
+      if (firstItem?.value) {
+        emit('update:modelValue', firstItem.value)
+      }
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
-  <SelectRoot :model-value="modelValue" @update:model-value="onValueChange">
-    <SelectTrigger :class="cn('w-full focus:outline-none focus:ring-1 focus:ring-black bg-white', props.class)">
-      <SelectValue :placeholder="placeholder || 'Pilih item'" :class="cn(
-        props.modelValue ? 'text-black' : 'text-muted-foreground',
-      )" />
+  <SelectRoot
+    :model-value="modelValue"
+    :disabled="isDisabled"
+    @update:model-value="onValueChange"
+  >
+    <SelectTrigger
+      :class="
+        cn(
+          'rounded-md px-3 py-2 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,
+            'w-full': !autoWidth,
+          },
+          props.class,
+        )
+      "
+      :style="autoWidth ? { width: optimalWidth, minWidth: '8em' } : {}"
+      icon-name="i-radix-icons-chevron-down"
+      icon-class="text-gray-500 dark:text-gray-300"
+    >
+      <SelectValue
+        :placeholder="placeholder || 'Pilih item'"
+        :class="
+          cn('text-sm', {
+            'text-gray-400': !props.modelValue,
+            'text-black dark:text-white': props.modelValue,
+            'text-gray-500': isDisabled,
+          })
+        "
+      />
     </SelectTrigger>
 
     <SelectContent>
@@ -66,10 +147,18 @@ function onValueChange(value: string) {
           {{ label }}
         </SelectLabel>
 
-        <SelectItem v-for="item in sortedItems" :key="item.value" :value="item.value" class="cursor-pointer">
-          <div class="flex items-center justify-between w-full">
+        <SelectItem
+          v-for="item in processedItems"
+          :key="item.value"
+          :value="item.value"
+          class="cursor-pointer hover:bg-primary hover:text-white focus:bg-primary focus:text-white"
+        >
+          <div class="flex w-full items-center justify-between">
             <span>{{ item.label }}</span>
-            <span v-if="item.code" class="text-xs text-muted-foreground ml-2">
+            <span
+              v-if="item.code"
+              class="ml-2 text-xs text-muted-foreground"
+            >
               {{ item.code }}
             </span>
           </div>
diff --git a/app/components/pub/my-ui/form/view/detail-row.vue b/app/components/pub/my-ui/form/view/detail-row.vue
new file mode 100644
index 00000000..2b2b8f6f
--- /dev/null
+++ b/app/components/pub/my-ui/form/view/detail-row.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3">
+    <!-- Label -->
+    <span class="text-md font-normal text-muted-foreground">
+      {{ label }}
+    </span>
+
+    <!-- Value -->
+    <span class="truncate lg:whitespace-normal">
+      <span class="me-3 hidden lg:inline-block">:</span>
+      <slot />
+    </span>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/form/view/detail-section.vue b/app/components/pub/my-ui/form/view/detail-section.vue
new file mode 100644
index 00000000..50eebbe1
--- /dev/null
+++ b/app/components/pub/my-ui/form/view/detail-section.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+defineProps<{
+  title: string
+  headerClass?: string
+  contentClass?: string
+}>()
+</script>
+
+<template>
+  <section class="mb-6">
+    <h3 :class="cn('mb-3 flex items-center gap-1  pb-1 text-base font-semibold', headerClass)">
+      <slot name="icon" />
+      {{ title }}
+    </h3>
+
+    <div :class="cn('space-y-2', contentClass)">
+      <slot />
+    </div>
+  </section>
+</template>
diff --git a/app/components/pub/my-ui/modal/dialog.vue b/app/components/pub/my-ui/modal/dialog.vue
index 548af287..822991d4 100644
--- a/app/components/pub/my-ui/modal/dialog.vue
+++ b/app/components/pub/my-ui/modal/dialog.vue
@@ -41,11 +41,12 @@ const isOpen = computed({
 <template>
   <Dialog v-model:open="isOpen">
     <DialogContent
-      :class="sizeClass" @interact-outside="(e: any) => preventOutside && e.preventDefault()"
+      :class="sizeClass"
+      @interact-outside="(e: any) => preventOutside && e.preventDefault()"
       @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
-      >
+    >
       <DialogHeader>
-        <DialogTitle>{{ props.title }}</DialogTitle>
+        <DialogTitle class="text-[20px]">{{ props.title }}</DialogTitle>
         <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
       </DialogHeader>
       <slot />
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed.vue b/app/components/pub/my-ui/nav-footer/ba-ed.vue
index e81ce917..ae455a81 100644
--- a/app/components/pub/my-ui/nav-footer/ba-ed.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-ed.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+type ClickType = 'cancel' | 'edit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -12,12 +12,27 @@ function onClick(type: ClickType) {
 
 <template>
   <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+    <Button
+      class="bg-gray-400"
+      type="button"
+      @click="onClick('cancel')"
+    >
+      <Icon
+        name="i-lucide-arrow-left"
+        class="me-2 align-middle"
+      />
       Back
     </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2 align-middle" />
+    <Button
+      class="bg-orange-500"
+      variant="outline"
+      type="button"
+      @click="onClick('edit')"
+    >
+      <Icon
+        name="i-lucide-file"
+        class="me-2 align-middle"
+      />
       Edit
     </Button>
   </div>
diff --git a/app/components/pub/my-ui/nav-footer/ba-su.vue b/app/components/pub/my-ui/nav-footer/ba-su.vue
index 79e18d57..9db66bb4 100644
--- a/app/components/pub/my-ui/nav-footer/ba-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-su.vue
@@ -12,12 +12,24 @@ function onClick(type: ClickType) {
 
 <template>
   <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+    <Button
+      class="bg-gray-400"
+      @click="onClick('cancel')"
+    >
+      <Icon
+        name="i-lucide-arrow-left"
+        class="me-2 align-middle"
+      />
       Back
     </Button>
-    <Button class="bg-primary" @click="onClick('submit')">
-      <Icon name="i-lucide-check" class="me-2 align-middle" />
+    <Button
+      class="bg-primary"
+      @click="onClick('submit')"
+    >
+      <Icon
+        name="i-lucide-check"
+        class="me-2 align-middle"
+      />
       Submit
     </Button>
   </div>
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index 3864f4c5..e7a48d03 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   prep: HeaderPrep
   refSearchNav?: RefSearchNav
+  class?: string
 }>()
 
 function emitSearchNavClick() {
@@ -21,15 +23,24 @@ function btnClick() {
 
 <template>
   <header>
-    <div class="flex items-center justify-between">
+    <div
+      class="flex items-center justify-between"
+      :class="cn('', props.class)"
+    >
       <div class="flex items-center">
-        <div class="md:text-base xl:text-lg font-semibold text-gray-900">
-          <Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
+        <div class="font-semibold text-gray-900 md:text-base xl:text-lg">
+          <Icon
+            :name="props.prep.icon!"
+            class="mr-2 size-4 align-middle md:size-6"
+          />
           {{ props.prep.title }}
         </div>
       </div>
       <div class="flex items-center">
-        <div v-if="props.refSearchNav" class="text-lg text-gray-900">
+        <div
+          v-if="props.refSearchNav"
+          class="text-lg text-gray-900"
+        >
           <Input
             type="text"
             placeholder="Search"
@@ -38,9 +49,18 @@ function btnClick() {
             @input="onInput"
           />
         </div>
-        <div v-if="prep.addNav" class="flex items-center ms-2">
-          <Button class="rounded-md border border-gray-300 text-white" @click="btnClick">
-            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+        <div
+          v-if="prep.addNav"
+          class="ms-2 flex items-center"
+        >
+          <Button
+            class="rounded-md border border-gray-300 text-white"
+            @click="btnClick"
+          >
+            <Icon
+              name="i-lucide-plus"
+              class="mr-2 h-4 w-4 align-middle"
+            />
             {{ prep.addNav.label }}
           </Button>
         </div>
diff --git a/app/components/pub/my-ui/select-tree/leaf.vue b/app/components/pub/my-ui/select-tree/leaf.vue
index 81dabf2b..d98b8b27 100644
--- a/app/components/pub/my-ui/select-tree/leaf.vue
+++ b/app/components/pub/my-ui/select-tree/leaf.vue
@@ -24,7 +24,7 @@ function handleSelect(value: string) {
       :class="{ 'pl-8': shouldAlign }"
       @select="() => handleSelect(item.value)"
     >
-      <span class="text-sm font-normal">{{ item.label }}</span>
+      <span class="text-sm font-normal text-gray-400">{{ item.label }}</span>
       <Check
         v-if="selectedValue === item.value"
         class="w-4 h-4 text-primary ml-2 flex-shrink-0"
@@ -35,6 +35,6 @@ function handleSelect(value: string) {
 
 <style scoped>
 .leaf-node {
-  @apply w-full;
+  width: 100%;
 }
 </style>
diff --git a/app/components/pub/my-ui/select-tree/tree-select.vue b/app/components/pub/my-ui/select-tree/tree-select.vue
index d0525336..1994e533 100644
--- a/app/components/pub/my-ui/select-tree/tree-select.vue
+++ b/app/components/pub/my-ui/select-tree/tree-select.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
 
 const modelValue = defineModel<string>()
 const open = ref(false)
+const searchValue = ref('')
 
 function handleSelect(newVal: string) {
   modelValue.value = newVal
@@ -30,6 +31,27 @@ function findLabel(value: string, items: TreeItem[]): string | undefined {
 const selectedLabel = computed(() => {
   return modelValue.value ? findLabel(modelValue.value, props.data) : '--- select item'
 })
+
+const filteredData = computed(() => {
+  if (!searchValue.value) return props.data
+  // recursive filter
+  function filterTree(items: TreeItem[]): TreeItem[] {
+    return items
+      .map(item => {
+        const match = item.label.toLowerCase().includes(searchValue.value.toLowerCase())
+        let children: TreeItem[] | undefined = undefined
+        if (item.children) {
+          children = filterTree(item.children)
+        }
+        if (match || (children && children.length > 0)) {
+          return { ...item, children }
+        }
+        return null
+      })
+      .filter(Boolean) as TreeItem[]
+  }
+  return filterTree(props.data)
+})
 </script>
 
 <template>
@@ -50,12 +72,12 @@ const selectedLabel = computed(() => {
     </PopoverTrigger>
     <PopoverContent class="min-w-full max-w-[350px] p-0">
       <Command>
-        <CommandInput placeholder="Cari item..." />
+        <CommandInput placeholder="Cari item..." v-model="searchValue" />
         <CommandEmpty>Item tidak ditemukan.</CommandEmpty>
         <CommandList class="max-h-[300px] overflow-x-auto overflow-y-auto">
           <CommandGroup>
             <TreeView
-              :data="data"
+              :data="filteredData"
               :selected-value="modelValue"
               :on-fetch-children="onFetchChildren"
               :level="0"
diff --git a/app/components/pub/ui/calendar/Calendar.vue b/app/components/pub/ui/calendar/Calendar.vue
index 04c8d5a3..b77a754a 100644
--- a/app/components/pub/ui/calendar/Calendar.vue
+++ b/app/components/pub/ui/calendar/Calendar.vue
@@ -5,7 +5,17 @@ import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
 import { cn } from '~/lib/utils'
 
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
+import CalendarCell from './CalendarCell.vue'
+import CalendarCellTrigger from './CalendarCellTrigger.vue'
+import CalendarGrid from './CalendarGrid.vue'
+import CalendarGridBody from './CalendarGridBody.vue'
+import CalendarGridHead from './CalendarGridHead.vue'
+import CalendarGridRow from './CalendarGridRow.vue'
+import CalendarHeadCell from './CalendarHeadCell.vue'
+import CalendarHeader from './CalendarHeader.vue'
+import CalendarHeading from './CalendarHeading.vue'
+import CalendarNextButton from './CalendarNextButton.vue'
+import CalendarPrevButton from './CalendarPrevButton.vue'
 
 const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/form/FormMessage.vue b/app/components/pub/ui/form/FormMessage.vue
index 98dd4fc7..ed3ecea5 100644
--- a/app/components/pub/ui/form/FormMessage.vue
+++ b/app/components/pub/ui/form/FormMessage.vue
@@ -11,6 +11,6 @@ const { name, formMessageId } = useFormField()
     :id="formMessageId"
     as="p"
     :name="toValue(name)"
-    class="text-[0.8rem] text-destructive font-medium"
+    class="text-[0.8rem] text-destructive font-sans"
   />
 </template>
diff --git a/app/components/pub/ui/select/Select.vue b/app/components/pub/ui/select/Select.vue
index 37720694..baf0f06b 100644
--- a/app/components/pub/ui/select/Select.vue
+++ b/app/components/pub/ui/select/Select.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
 import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
-import {
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from '~/components/pub/ui/select'
+import SelectContent from './SelectContent.vue'
+import SelectGroup from './SelectGroup.vue'
+import SelectItem from './SelectItem.vue'
+import SelectSeparator from './SelectSeparator.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectValue from './SelectValue.vue'
 
 interface Item {
   value: string
diff --git a/app/components/pub/ui/select/SelectContent.vue b/app/components/pub/ui/select/SelectContent.vue
index 88c9557b..1d63a4d8 100644
--- a/app/components/pub/ui/select/SelectContent.vue
+++ b/app/components/pub/ui/select/SelectContent.vue
@@ -5,7 +5,8 @@ import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } fro
 import { computed } from 'vue'
 import { cn } from '~/lib/utils'
 
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
index 8d8051c8..71dd99b3 100644
--- a/app/composables/usePaginatedList.ts
+++ b/app/composables/usePaginatedList.ts
@@ -2,6 +2,7 @@ import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import * as z from 'zod'
+import { is } from "date-fns/locale"
 
 // Default query schema yang bisa digunakan semua list
 export const defaultQuerySchema = z.object({
@@ -75,6 +76,8 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
 
   // Functions
   async function fetchData() {
+    if (isLoading.isTableLoading) return
+
     isLoading.isTableLoading = true
 
     try {
@@ -97,7 +100,6 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
         paginationMeta.hasPrev = paginationMeta.page > 1
       }
     } catch (error) {
-      console.error(`Error fetching ${entityName} list:`, error)
       data.value = []
       paginationMeta.recordCount = 0
       paginationMeta.totalPage = 0
@@ -126,6 +128,7 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
   watch(
     params,
     (newParams) => {
+      console.log('watch ~ newParams', newParams)
       // Sync search input with URL params (for back/forward navigation)
       if (newParams.search !== searchInput.value) {
         searchInput.value = newParams.search || ''
diff --git a/app/composables/useQueryMode.ts b/app/composables/useQueryMode.ts
new file mode 100644
index 00000000..0787e09e
--- /dev/null
+++ b/app/composables/useQueryMode.ts
@@ -0,0 +1,25 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryMode(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const mode = computed<'list' | 'add'>({
+    get: () => (route.query[key] && route.query[key] === 'add' ? 'add' : 'list'),
+    set: (val) => {
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val === 'list' ? undefined : val,
+        },
+      })
+    },
+  })
+
+  const openForm = () => (mode.value = 'add')
+  const backToList = () => (mode.value = 'list')
+
+  return { mode, openForm, backToList }
+}
diff --git a/app/handlers/_handler.ts b/app/handlers/_handler.ts
index bcb1f808..66177937 100644
--- a/app/handlers/_handler.ts
+++ b/app/handlers/_handler.ts
@@ -33,7 +33,8 @@ export function createCrudHandler<T = any>(crud: {
         if (refresh) refresh()
       },
       onFinally: (isSuccess: boolean) => {
-        if (isSuccess) setTimeout(reset, 500)
+        if (isSuccess) setTimeout(reset, 300)
+        onResetState()
         isProcessing.value = false
       },
     })
@@ -58,7 +59,8 @@ export function createCrudHandler<T = any>(crud: {
         if (refresh) refresh()
       },
       onFinally: (isSuccess: boolean) => {
-        if (isSuccess) setTimeout(reset, 500)
+        if (isSuccess) setTimeout(reset, 300)
+        onResetState()
         isProcessing.value = false
       },
     })
@@ -77,6 +79,8 @@ export function createCrudHandler<T = any>(crud: {
         if (refresh) refresh()
       },
       onFinally: () => {
+        setTimeout(refresh, 300)
+        onResetState()
         isProcessing.value = false
       },
     })
@@ -85,6 +89,7 @@ export function createCrudHandler<T = any>(crud: {
   function handleCancelForm(reset: () => void) {
     isFormEntryDialogOpen.value = false
     isReadonly.value = false
+    onResetState()
     setTimeout(reset, 300)
   }
 
@@ -181,6 +186,8 @@ export function genCrudHandler<T = any>(crud: {
         if (refresh) refresh()
       },
       onFinally: () => {
+        setTimeout(refresh, 300)
+        onResetState()
         isProcessing.value = false
       },
     })
@@ -189,6 +196,7 @@ export function genCrudHandler<T = any>(crud: {
   function handleCancelForm(reset: () => void) {
     isFormEntryDialogOpen.value = false
     isReadonly.value = false
+    onResetState()
     setTimeout(reset, 300)
   }
 
diff --git a/app/handlers/device.handler.ts b/app/handlers/device.handler.ts
index 14de6830..320c6ab7 100644
--- a/app/handlers/device.handler.ts
+++ b/app/handlers/device.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postDevice, patchDevice, removeDevice } from '~/services/device.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postDevice,
-  patch: patchDevice,
-  remove: removeDevice,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/division-position.handler.ts b/app/handlers/division-position.handler.ts
index dcbfc7fd..29ac912d 100644
--- a/app/handlers/division-position.handler.ts
+++ b/app/handlers/division-position.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postDivisionPosition, patchDivisionPosition, removeDivisionPosition } from '~/services/division-position.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/division-position.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postDivisionPosition,
-  patch: patchDivisionPosition,
-  remove: removeDivisionPosition,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/division.handler.ts b/app/handlers/division.handler.ts
index e830260f..8c36c357 100644
--- a/app/handlers/division.handler.ts
+++ b/app/handlers/division.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postDivision, patchDivision, removeDivision } from '~/services/division.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/division.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postDivision,
-  patch: patchDivision,
-  remove: removeDivision,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/infra.handler.ts b/app/handlers/infra.handler.ts
new file mode 100644
index 00000000..739d1b3f
--- /dev/null
+++ b/app/handlers/infra.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/infra.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/installation.handler.ts b/app/handlers/installation.handler.ts
index d3a1d06e..97898476 100644
--- a/app/handlers/installation.handler.ts
+++ b/app/handlers/installation.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postInstallation, patchInstallation, removeInstallation } from '~/services/installation.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/installation.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postInstallation,
-  patch: patchInstallation,
-  remove: removeInstallation,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/material.handler.ts b/app/handlers/material.handler.ts
index 750f7967..28b6524c 100644
--- a/app/handlers/material.handler.ts
+++ b/app/handlers/material.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postMaterial, patchMaterial, removeMaterial } from '~/services/material.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/material.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postMaterial,
-  patch: patchMaterial,
-  remove: removeMaterial,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/medicine-group.handler.ts b/app/handlers/medicine-group.handler.ts
index 998ab285..6e61fff2 100644
--- a/app/handlers/medicine-group.handler.ts
+++ b/app/handlers/medicine-group.handler.ts
@@ -1,5 +1,5 @@
 import { createCrudHandler } from '~/handlers/_handler'
-import { postMedicineGroup, patchMedicineGroup, removeMedicineGroup } from '~/services/medicine-group.service'
+import { create, update, remove } from '~/services/medicine-group.service'
 
 export const {
   recId,
@@ -15,7 +15,7 @@ export const {
   handleActionRemove,
   handleCancelForm,
 } = createCrudHandler({
-  post: postMedicineGroup,
-  patch: patchMedicineGroup,
-  remove: removeMedicineGroup,
+  post: create,
+  patch: update,
+  remove: remove,
 })
diff --git a/app/handlers/medicine-method.handler.ts b/app/handlers/medicine-method.handler.ts
index df4e0ff9..9ba6288b 100644
--- a/app/handlers/medicine-method.handler.ts
+++ b/app/handlers/medicine-method.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postMedicineMethod, patchMedicineMethod, removeMedicineMethod } from '~/services/medicine-method.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medicine-method.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postMedicineMethod,
-  patch: patchMedicineMethod,
-  remove: removeMedicineMethod,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/medicine.handler.ts b/app/handlers/medicine.handler.ts
index d550f11b..8def5dc3 100644
--- a/app/handlers/medicine.handler.ts
+++ b/app/handlers/medicine.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postMedicine, patchMedicine, removeMedicine } from '~/services/medicine.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medicine.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postMedicine,
-  patch: patchMedicine,
-  remove: removeMedicine,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/specialist.handler.ts b/app/handlers/specialist.handler.ts
index 445f8c15..476c7ec8 100644
--- a/app/handlers/specialist.handler.ts
+++ b/app/handlers/specialist.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postSpecialist, patchSpecialist, removeSpecialist } from '~/services/specialist.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/specialist.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postSpecialist,
-  patch: patchSpecialist,
-  remove: removeSpecialist,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/subspecialist.handler.ts b/app/handlers/subspecialist.handler.ts
index 9fc7a67e..bd12b146 100644
--- a/app/handlers/subspecialist.handler.ts
+++ b/app/handlers/subspecialist.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postSubspecialist, patchSubspecialist, removeSubspecialist } from '~/services/subspecialist.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/subspecialist.service'
 
 export const {
   recId,
@@ -14,8 +17,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postSubspecialist,
-  patch: patchSubspecialist,
-  remove: removeSubspecialist,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/unit.handler.ts b/app/handlers/unit.handler.ts
index ff235bb4..b1240291 100644
--- a/app/handlers/unit.handler.ts
+++ b/app/handlers/unit.handler.ts
@@ -1,5 +1,9 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postUnit, patchUnit, removeUnit } from '~/services/unit.service'
+
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/unit.service'
 
 export const {
   recId,
@@ -14,8 +18,8 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postUnit,
-  patch: patchUnit,
-  remove: removeUnit,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
diff --git a/app/handlers/uom.handler.ts b/app/handlers/uom.handler.ts
index dd018400..c4532dc7 100644
--- a/app/handlers/uom.handler.ts
+++ b/app/handlers/uom.handler.ts
@@ -1,5 +1,8 @@
-import { createCrudHandler } from '~/handlers/_handler'
-import { postUom, patchUom, removeUom } from '~/services/uom.service'
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/uom.service'
 
 export const {
   recId,
@@ -14,8 +17,10 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = createCrudHandler({
-  post: postUom,
-  patch: patchUom,
-  remove: removeUom,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
 })
+
+
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index c15786f2..f26f0ca5 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -7,9 +7,9 @@ const contentFrameClass = computed(() => {
   switch (contentFrame.value) {
     case 'cf-container-2xl':
       return 'cf-container-2xl'
-    case 'cf-container-2xl':
-      return 'cf-container-xl'
     case 'cf-container-xl':
+      return 'cf-container-xl'
+    case 'cf-container-lg':
       return 'cf-container-lg'
     case 'cf-container-md':
       return 'cf-container-md'
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 866fc520..bfec5c00 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -119,6 +119,15 @@ export const personContactTypes: Record<string, string> = {
   fax: 'Fax',
 }
 
+// Mapping dari UI values ke contact type constants
+export const contactTypeMapping: Record<string, string> = {
+  phoneNumber: 'm-phone',
+  officePhoneNumber: 'phone',
+  homePhoneNumber: 'phone',
+  email: 'email',
+  fax: 'fax',
+}
+
 export const dayCodes: Record<string, string> = {
   '0': 'Minggu',
   '1': '',
@@ -232,3 +241,25 @@ export const relationshipCodes: Record<string, string> = {
   'gd-child': 'Cucu',
   other: 'Lainnya',
 }
+
+export const uploadCode: Record<string, string> = {
+  ktp: 'person-resident-number',
+  sim: 'person-driving-license',
+  kk: 'person-family-card',
+  paspor: 'person-passport',
+  'mcu-report': 'mcu-item-result',
+}
+
+export const infraGroupCodes: Record<string, string> = {
+  building: 'Bangunan',
+  floor: 'Lantai',
+  warehouse: 'Gudang / Depo',
+  room: 'Ruang',
+  chamber: 'Kamar',
+  bed: 'Ranjang'
+}
+
+export const infraGroupCodesKeys: Record<string, string> = Object.keys(infraGroupCodes).reduce((acc, key) => {
+  acc[key] = key
+  return acc
+}, {} as Record<string, string>)
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index c6098e1b..9ffd7dc9 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -2,7 +2,7 @@ import type { ClassValue } from 'clsx'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-export interface SelectOptionType<T> {
+export interface SelectOptionType<_T = string> {
   value: string
   label: string
   code?: string
@@ -26,3 +26,71 @@ export function mapToComboboxOptList(items: Record<string, string>): SelectOptio
   })
   return result
 }
+
+/**
+ * Menghitung umur berdasarkan tanggal lahir
+ * @param birthDate - Tanggal lahir dalam format Date atau string
+ * @returns String umur dalam format "X tahun Y bulan" atau "X bulan" untuk bayi
+ */
+export function calculateAge(birthDate: Date | string | null | undefined): string {
+  if (!birthDate) {
+    return '-'
+  }
+
+  let birth: Date
+
+  // Konversi ke Date object
+  if (typeof birthDate === 'string') {
+    birth = new Date(birthDate)
+  } else {
+    birth = birthDate
+  }
+
+  // Validasi tanggal
+  if (isNaN(birth.getTime())) {
+    return '-'
+  }
+
+  const today = new Date()
+  const birthYear = birth.getFullYear()
+  const birthMonth = birth.getMonth()
+  const birthDay = birth.getDate()
+
+  const currentYear = today.getFullYear()
+  const currentMonth = today.getMonth()
+  const currentDay = today.getDate()
+
+  // Hitung tahun
+  let years = currentYear - birthYear
+  let months = currentMonth - birthMonth
+
+  // Adjust jika bulan atau hari belum lewat
+  if (months < 0 || (months === 0 && currentDay < birthDay)) {
+    years--
+    months += 12
+  }
+
+  if (currentDay < birthDay) {
+    months--
+  }
+
+  // Pastikan months tidak negatif
+  if (months < 0) {
+    months += 12
+  }
+
+  // Format output
+  if (years === 0) {
+    if (months === 0) {
+      // Hitung hari untuk bayi baru lahir
+      const diffTime = today.getTime() - birth.getTime()
+      const days = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+      return days <= 30 ? `${days} hari` : '1 bulan'
+    }
+    return `${months} bulan`
+  } else if (months === 0) {
+    return `${years} tahun`
+  } else {
+    return `${years} tahun ${months} bulan`
+  }
+}
diff --git a/app/models/_ai_prompt.txt b/app/models/_ai_prompt.txt
new file mode 100644
index 00000000..61076e96
--- /dev/null
+++ b/app/models/_ai_prompt.txt
@@ -0,0 +1,30 @@
+Based on the following information:
+Template
+	code	varchar	10	notnull
+	name	varchar	10
+	Original_SrcCode_Id	int		notnull
+	dateTime	datetime		notnull
+	date	date
+
+I created the following typescript:
+import { type Base, genBase } from "./_base"
+
+export interface Template extends Base {
+  code: string
+  name?: string
+  original_srcCode_id: number
+  dateTime: string
+  date?: string
+}
+
+export function genTemplate(): Template {
+  return {
+    ...genBase(),
+    code: '',
+    original_srcCode_id: 0,
+    dateTime: '',
+  }
+}
+
+With similar method, create typescript based on the following information:
+[copy from excel]
\ No newline at end of file
diff --git a/app/models/_base.ts b/app/models/_base.ts
new file mode 100644
index 00000000..6aaa99fc
--- /dev/null
+++ b/app/models/_base.ts
@@ -0,0 +1,49 @@
+
+export interface Base {
+  id: number
+  createdAt: string | null
+  updatedAt: string | null
+  deletedAt?: string | null
+}
+
+export interface CodeName {
+  name: string
+  code: string
+}
+
+export interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
+
+export function genBase(): Base {
+  return {
+    id: 0,
+    createdAt: '',
+    updatedAt: '',
+  }
+}
+
+export type WithBase<T extends Base> = Omit<T, keyof Base> & Required<Base>
+
+/**
+ * The function `withBase` sets default values for item properties if not provided.
+ * @param item - The `withBase` function takes in an optional parameter `item`, which is a
+ * partial object of type `T`. The function merges the properties of `item` with default values for
+ * `id`, `createdAt`, `updatedAt`, and `deletedAt`. The function then returns an object of type
+ * @returns The `withBase` function returns an object with default values for the properties
+ * `id`, `createdAt`, `updatedAt`, and `deletedAt`, along with any additional properties provided in
+ * the `item` parameter. The returned object has a type `WithBase<T>`, which extends `T` and
+ * includes the default properties.
+ */
+export function withBase<T extends Base>(item: Partial<T> = {}): WithBase<T> {
+  return {
+    id: 0,
+    createdAt: null,
+    updatedAt: null,
+    deletedAt: null,
+    ...item,
+  } as WithBase<T>
+}
diff --git a/app/models/adime.ts b/app/models/adime.ts
new file mode 100644
index 00000000..a7e7a9f9
--- /dev/null
+++ b/app/models/adime.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface Adime extends Base {
+  encounter_id: number
+  employee_id: number
+  time?: string
+  value: unknown
+}
+
+export function genAdime(): Adime {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    employee_id: 0,
+    value: ''
+  }
+}
+
diff --git a/app/models/ambulatory.ts b/app/models/ambulatory.ts
new file mode 100644
index 00000000..8ad38f60
--- /dev/null
+++ b/app/models/ambulatory.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Ambulatory extends Base {
+  encounter_id: number
+  class_code: string
+}
+
+export function genAmbulatory(): Ambulatory {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    class_code: '',
+  }
+}
diff --git a/app/models/appointment.ts b/app/models/appointment.ts
new file mode 100644
index 00000000..da8f4f2e
--- /dev/null
+++ b/app/models/appointment.ts
@@ -0,0 +1,24 @@
+import { type Base, genBase } from "./_base"
+
+export interface Appointment extends Base {
+  practiceSchedule_id: number
+  patient_id: number
+  person_residentIdentitynumber: string
+  person_name: string
+  person_phoneNumber: string
+  paymentMethod_code: string
+  refNumber: string
+}
+
+export function genAppointment(): Appointment {
+  return {
+    ...genBase(),
+    practiceSchedule_id: 0,
+    patient_id:  0,
+    person_residentIdentitynumber: '',
+    person_name: '',
+    person_phoneNumber: '',
+    paymentMethod_code: '',
+    refNumber: '',
+  }
+}
diff --git a/app/models/chemo.ts b/app/models/chemo.ts
new file mode 100644
index 00000000..4398ede0
--- /dev/null
+++ b/app/models/chemo.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from "./_base"
+
+export interface Chemo extends Base {
+  encounter_id: number
+  status_code: string
+  verified_at: string
+  verified_by_user_id: number
+  src_unit_id: number
+}
+
+export function genChemo(): Chemo {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    status_code: '',
+    verified_at: '',
+    verified_by_user_id: 0,
+    src_unit_id: 0,
+  }
+}
diff --git a/app/models/device-order-item.ts b/app/models/device-order-item.ts
new file mode 100644
index 00000000..fa16638a
--- /dev/null
+++ b/app/models/device-order-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface DeviceOrderItem extends Base {
+  deviceOrder_id: number
+  device_id: number
+  count: number
+}
+
+export function genDeviceOrderItem(): DeviceOrderItem {
+  return {
+    ...genBase(),
+    deviceOrder_id: 0,
+    device_id: 0,
+    count: 0,
+  }
+}
diff --git a/app/models/device-order.ts b/app/models/device-order.ts
new file mode 100644
index 00000000..884340c5
--- /dev/null
+++ b/app/models/device-order.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface DeviceOrder extends Base {
+  encounter_id: number
+  doctor_id: number
+  status_code?: string
+}
+
+export function genDeviceOrder(): DeviceOrder {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    doctor_id: 0,
+  }
+}
diff --git a/app/models/device.ts b/app/models/device.ts
index ec7f7443..08af6ab3 100644
--- a/app/models/device.ts
+++ b/app/models/device.ts
@@ -1,5 +1,16 @@
-export interface Device {
+import { type Base, genBase } from "./_base"
+
+export interface Device extends Base {
   code: string
   name: string
   uom_code: string
 }
+
+export function genDevice(): Device {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    uom_code: '',
+  }
+}
diff --git a/app/models/division-position.ts b/app/models/division-position.ts
new file mode 100644
index 00000000..acbd3008
--- /dev/null
+++ b/app/models/division-position.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface DivisionPosition extends Base {
+  code: string
+  name: string
+  division_id: number
+  employee_id?: number
+}
+
+export function genDivisionPosition(): DivisionPosition {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    division_id: 0,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/division.ts b/app/models/division.ts
index e52e2cf6..0f6d9185 100644
--- a/app/models/division.ts
+++ b/app/models/division.ts
@@ -1,10 +1,18 @@
-export interface Division {
+import { type Base, genBase } from "./_base"
+
+export interface Division extends Base {
   code: string
   name: string
+  parent_id?: number | null
+  childrens?: Division[] | null
 }
 
-export interface DivisionPosition {
-  code: string
-  name: string
-  division_id: number
+export function genDivision(): Division {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    parent_id: null,
+    childrens: null,
+  }
 }
diff --git a/app/models/doctor-fee.ts b/app/models/doctor-fee.ts
new file mode 100644
index 00000000..23ae9d18
--- /dev/null
+++ b/app/models/doctor-fee.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface DoctorFee extends Base {
+  doctor_id: number
+  feeType_code: string
+  price: number
+  item_id: number
+}
+
+export function genDoctorFee(): DoctorFee {
+  return {
+    ...genBase(),
+    doctor_id: 0,
+    feeType_code: '',
+    price:  0,
+    item_id:  0,
+    }
+}
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
index 8359d54a..3f517476 100644
--- a/app/models/doctor.ts
+++ b/app/models/doctor.ts
@@ -1,32 +1,30 @@
-export interface Doctor {
-  id: number
-  createdAt: string
-  updatedAt: string
-  name: string
-  frontTitle?: string
-  endTitle?: string
-  specialist_code?: string
-  sip_no: string
+import { type Base, genBase } from "./_base"
+import { type Employee, genEmployee } from "./employee"
+import type { Specialist } from "./specialist"
+import type { Subspecialist } from "./subspecialist"
+
+export interface Doctor extends Base {
+  employee_id: number
+  employee: Employee
   ihs_number: string
-  identity_number: string
-  phone?: string
+  sip_number: string
+  unit_id?: number
+  specialist_id?: number
+  specialist?: Specialist
+  subspecialist_id?: number
+  subspecialist?: Subspecialist
   bpjs_code?: string
-  status_code?: number
 }
+
 // use one dto for both create and update
 export interface CreateDto {
-  name?: string
-  frontTitle?: string
-  endTitle?: string
-  identity_number?: string
-  sip_no?: string
-  ihs_number?: string
-  phone?: string
-  email?: string
-  bpjs_code?: string
-  status_code?: number
-  outPatient_rate?: number
-  inPatient_rate?: number
+  employee_id: number
+  ihs_number: string
+  sip_number: string
+  unit_id?: number
+  specialist_id?: number
+  subspecialist_id?: number
+  bpjs_code: string
 }
 
 export interface GetListDto {
@@ -50,12 +48,10 @@ export interface DeleteDto {
 
 export function genDoctor(): Doctor {
   return {
-    id: 0,
-    createdAt: '',
-    updatedAt: '',
-    name: '',
+    ...genBase(),
+    employee_id: 0,
+    employee: genEmployee(),
     ihs_number: '',
-    identity_number: '',
-    sip_no: '',
+    sip_number: '',
   }
 }
diff --git a/app/models/emergency.ts b/app/models/emergency.ts
new file mode 100644
index 00000000..ffbee650
--- /dev/null
+++ b/app/models/emergency.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface Emergency extends Base {
+  encounter_id: number
+  class_code: string
+
+}
+
+export function genEmergency(): Emergency {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    class_code: '',
+  }
+}
diff --git a/app/models/employee.ts b/app/models/employee.ts
index ea2d1f18..534dec81 100644
--- a/app/models/employee.ts
+++ b/app/models/employee.ts
@@ -1,14 +1,30 @@
-export interface Employee {
-  name: string
-  number: string
+import { type Base, genBase } from "./_base"
+import { type Person, genPerson } from "./person"
+
+export interface Employee extends Base {
+  user_id: number
+  person_id: number
+  person: Person
+  position_code: string
+  division_code?: string
+  number?: string
   status_code: string
+}
+
+export interface CreateDto extends Employee {
   user_id: number
   person_id: number
   position_code: string
   division_code: string
+  number: string
+  status_code: string
 }
 
-export interface CreateDto extends Employee {}
+export interface GetListDto {
+  position_code?: string
+  division_code?: string
+  number?: string
+}
 
 export interface UpdateDto extends Employee {
   id: number
@@ -18,20 +34,13 @@ export interface DeleteDto {
   id: number
 }
 
-export interface GetListDto extends Employee {
-  id: number
-  createdAt: string
-  updatedAt: string
-}
-
 export function genEmployee(): Employee {
   return {
-    name: '',
-    number: '',
-    status_code: '',
+    ...genBase(),
     user_id: 0,
     person_id: 0,
+    person: genPerson(),
     position_code: '',
-    division_code: '',
+    status_code: '',
   }
 }
diff --git a/app/models/encounter-payment.ts b/app/models/encounter-payment.ts
new file mode 100644
index 00000000..395547f3
--- /dev/null
+++ b/app/models/encounter-payment.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface EncounterPayment extends Base {
+  encounter_id: number
+  paymentMethod_code: string
+  insuranceCompany_id?: number
+  member_number?: string
+  ref_number?: string
+  trx_number?: string
+}
+
+export function genEncounterPayment(): EncounterPayment {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    paymentMethod_code: '',
+  }
+}
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
new file mode 100644
index 00000000..1cd7485c
--- /dev/null
+++ b/app/models/encounter.ts
@@ -0,0 +1,39 @@
+import { type Doctor, genDoctor } from "./doctor"
+
+export interface Encounter {
+    id: number
+    patient_id: number
+    registeredAt: string
+    class_code: string
+    unit_id: number
+    specialist_id?: number
+    subspecialist_id?: number
+    visitdate: string
+    appointment_doctor_id: number
+    appointment_doctor: Doctor
+    responsible_doctor_id?: number
+    responsible_doctor?: Doctor
+    refSource_name?: string
+    appointment_id?: number
+    earlyEducation?: string
+    medicalDischargeEducation: string
+    admDischargeEducation?: string
+    dischargeMethod_code?: string
+    discharge_reason?: string
+    status_code: string
+}
+
+export function genEncounter(): Encounter {
+    return {
+        id: 0,
+        patient_id: 0,
+        registeredAt: '',
+        class_code: '',
+        unit_id: 0,
+        visitdate: '',
+        appointment_doctor_id: 0,
+        appointment_doctor: genDoctor(),
+        medicalDischargeEducation: '',
+        status_code: ''
+    }
+}
\ No newline at end of file
diff --git a/app/models/ethnic.ts b/app/models/ethnic.ts
new file mode 100644
index 00000000..e4c0a67d
--- /dev/null
+++ b/app/models/ethnic.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Ethnic extends Base {
+  code: string
+  name: string
+}
+
+export function genEthnic(): Ethnic {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/models/infra.ts b/app/models/infra.ts
new file mode 100644
index 00000000..80119748
--- /dev/null
+++ b/app/models/infra.ts
@@ -0,0 +1,10 @@
+export interface Infra {
+  id?: number
+  code: string
+  name: string
+  infraGroup_code: string
+  parent_id?: number | string | null
+  specialist_id?: number | string | null
+  subspecialist_id?: number | string | null
+  unit_id?: number | string | null
+}
diff --git a/app/models/inpatient.ts b/app/models/inpatient.ts
new file mode 100644
index 00000000..5643f983
--- /dev/null
+++ b/app/models/inpatient.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Template extends Base {
+  encounter_id: number
+  class_code: string
+  infra_id: number
+}
+
+export function genTemplate(): Template {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    class_code: '',
+    infra_id: 0,
+  }
+}
diff --git a/app/models/installation.ts b/app/models/installation.ts
index c662714e..e8d77c41 100644
--- a/app/models/installation.ts
+++ b/app/models/installation.ts
@@ -1,5 +1,42 @@
-export interface Installation {
+import { type Base, genBase } from "./_base"
+
+export interface Installation extends Base {
   code: string
   name: string
-  encounterClass_code: string
+  encounterClass_code?: string | null
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+  encounterClass_code?: string | null
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+  encounterClass_code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genInstallation(): Installation {
+  return {
+    ...genBase(),
+    name: 'name',
+    code: 'code',
+    encounterClass_code: null,
+  }
 }
diff --git a/app/models/insurance-company.ts b/app/models/insurance-company.ts
new file mode 100644
index 00000000..7c1fb3b2
--- /dev/null
+++ b/app/models/insurance-company.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from "./_base"
+
+export interface InsuranceCompany extends Base {
+  code: string
+  name: string
+  regency_code: string
+  address: string
+  phoneNumber: string
+}
+
+export function genInsuranceCompany(): InsuranceCompany {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    regency_code: '',
+    address: '',
+    phoneNumber: '',
+    }
+}
diff --git a/app/models/item-price.ts b/app/models/item-price.ts
index fb474109..b287e99f 100644
--- a/app/models/item-price.ts
+++ b/app/models/item-price.ts
@@ -1,5 +1,6 @@
-export interface ItemPrice {
-  id: string
+import { type Base, genBase } from "./_base"
+
+export interface ItemPrice extends Base {
   item_id: number
   price: number
   insuranceCompany_code: string
@@ -30,8 +31,9 @@ export interface DeleteDto {
   id?: string
 }
 
-export function genMedicine(): CreateDto {
+export function genItemPrice(): ItemPrice {
   return {
+    ...genBase(),
     item_id: 1,
     price: 1,
     insuranceCompany_code: 'test',
diff --git a/app/models/item.ts b/app/models/item.ts
index 851ff11d..acf0494c 100644
--- a/app/models/item.ts
+++ b/app/models/item.ts
@@ -1,5 +1,6 @@
-export interface Item {
-  id: string
+import { type Base, genBase } from "./_base"
+
+export interface Item extends Base {
   name: string
   code: string
   itemGroup_code: string
@@ -25,23 +26,24 @@ export interface GetListDto {
 }
 
 export interface GetDetailDto {
-  id?: string
+  id: number
 }
 
 export interface UpdateDto extends CreateDto {
-  id?: number
+  id: number
 }
 
 export interface DeleteDto {
-  id?: string
+  id: string
 }
 
-export function genMedicine(): CreateDto {
+export function genItem(): Item {
   return {
-    name: 'test',
-    code: 'test',
-    itemGroup_code: 'test',
-    uom_code: 'test',
+    ...genBase(),
+    name: '',
+    code: '',
+    itemGroup_code: '',
+    uom_code: '',
     infra_id: 1,
     stock: 1,
   }
diff --git a/app/models/laborant.ts b/app/models/laborant.ts
new file mode 100644
index 00000000..f3bc891b
--- /dev/null
+++ b/app/models/laborant.ts
@@ -0,0 +1,13 @@
+import { type Base, genBase } from "./_base"
+
+export interface laborant extends Base {
+  employee_id: number
+  ihs_number?: string
+}
+
+export function genlaborant(): laborant {
+  return {
+    ...genBase(),
+    employee_id: 0,
+  }
+}
diff --git a/app/models/language.ts b/app/models/language.ts
new file mode 100644
index 00000000..83958e5f
--- /dev/null
+++ b/app/models/language.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Language extends Base {
+  code: string
+  name: string
+}
+
+export function genMcuSrc(): Language {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/models/material-order-item.ts b/app/models/material-order-item.ts
new file mode 100644
index 00000000..823584a0
--- /dev/null
+++ b/app/models/material-order-item.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface MaterialOrderItem extends Base {
+  materialOrder_id: number
+  material_id: number
+  count?: number
+}
+
+export function genMaterialOrderItem(): MaterialOrderItem {
+  return {
+    ...genBase(),
+    materialOrder_id: 0,
+    material_id: 0,
+  }
+}
diff --git a/app/models/material-order.ts b/app/models/material-order.ts
new file mode 100644
index 00000000..c7f1ab7d
--- /dev/null
+++ b/app/models/material-order.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface MaterialOrder extends Base {
+  encounter_id: number
+  doctor_id: number
+  status_code?: string
+}
+
+export function genMaterialOrder(): MaterialOrder {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    doctor_id: 0,
+  }
+}
diff --git a/app/models/material.ts b/app/models/material.ts
index 5e259256..c381a21f 100644
--- a/app/models/material.ts
+++ b/app/models/material.ts
@@ -1,6 +1,18 @@
-export interface Material {
+import { type Base, genBase } from "./_base"
+
+export interface Material extends Base {
   code: string
   name: string
   uom_code: string
   stock: number
 }
+
+export function genMaterial(): Material {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    uom_code: '',
+    stock: 0,
+  }
+}
diff --git a/app/models/mcu-order-item.ts b/app/models/mcu-order-item.ts
new file mode 100644
index 00000000..67038edf
--- /dev/null
+++ b/app/models/mcu-order-item.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuOrderItem extends Base {
+  mcuOrder_id: number
+  mcuSrc_id: number
+  examinationDate?: string
+  result?: string
+  status_code?: string
+}
+
+export function genMcuOrderItem(): McuOrderItem {
+  return {
+    ...genBase(),
+    mcuOrder_id: 0,
+    mcuSrc_id: 0,
+  }
+}
diff --git a/app/models/mcu-order-sub-item.ts b/app/models/mcu-order-sub-item.ts
new file mode 100644
index 00000000..271ed424
--- /dev/null
+++ b/app/models/mcu-order-sub-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuOrderSubItem extends Base {
+  mcuSubSrc_id: number
+  mcuOrderItem_id: number
+  result?: string
+  status_code?: string
+}
+
+export function genMcuOrderSubItem(): McuOrderSubItem {
+  return {
+    ...genBase(),
+    mcuSubSrc_id: 0,
+    mcuOrderItem_id: 0,
+  }
+}
diff --git a/app/models/mcu-order.ts b/app/models/mcu-order.ts
new file mode 100644
index 00000000..e3899aab
--- /dev/null
+++ b/app/models/mcu-order.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuOrder extends Base {
+  encounter_id: number
+  doctor_id: number
+  status_code?: string
+  specimenPickTime: string
+  examinationDate: string
+  number?: number
+  temperature?: number
+  mcuUrgencyLevel_code?: string
+}
+
+export function genMcuOrder(): McuOrder {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    doctor_id: 0,
+    specimenPickTime: '',
+    examinationDate: ''
+  }
+}
+
diff --git a/app/models/mcu-src-category.ts b/app/models/mcu-src-category.ts
new file mode 100644
index 00000000..6fdf94db
--- /dev/null
+++ b/app/models/mcu-src-category.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuSrcCategory extends Base {
+  code: string
+  name: string
+  scope_code: string
+}
+
+export function genMcuSrcCategory(): McuSrcCategory {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    scope_code: '',
+  }
+}
diff --git a/app/models/mcu-src.ts b/app/models/mcu-src.ts
new file mode 100644
index 00000000..ff331efa
--- /dev/null
+++ b/app/models/mcu-src.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuSrc extends Base {
+  code: string
+  name: string
+  mcuSrcCategory_code: string
+  item_id: number
+}
+
+export function genMcuSrc(): McuSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    mcuSrcCategory_code: '',
+    item_id: 0
+  }
+}
diff --git a/app/models/mcu-sub-src.ts b/app/models/mcu-sub-src.ts
new file mode 100644
index 00000000..1b67d4cb
--- /dev/null
+++ b/app/models/mcu-sub-src.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuSubSrcCategory extends Base {
+  code: string
+  name: string
+  mcuSrc_id: number
+  item_id: number
+}
+
+export function genMcuSubSrcCategory(): McuSubSrcCategory {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    mcuSrc_id: 0,
+    item_id: 0
+  }
+}
diff --git a/app/models/medication-item-dist.ts b/app/models/medication-item-dist.ts
new file mode 100644
index 00000000..4353703f
--- /dev/null
+++ b/app/models/medication-item-dist.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface MedicationItemDist extends Base {
+  medicationItem_id: number
+  nurse_id: number
+  dateTime: string
+  remain?: number
+}
+
+export function genMedicationItemDist(): MedicationItemDist {
+  return {
+    ...genBase(),
+    medicationItem_id: 0,
+    nurse_id: 0,
+    dateTime: '',
+  }
+}
diff --git a/app/models/medication-item.ts b/app/models/medication-item.ts
new file mode 100644
index 00000000..9f3f7cb2
--- /dev/null
+++ b/app/models/medication-item.ts
@@ -0,0 +1,28 @@
+import { type Base, genBase } from "./_base"
+
+export interface MedicationItem extends Base {
+  medication_id: number
+  isMix?: boolean
+  medicine_id?: number
+  medicineMix_id?: number
+  frequency: number
+  dose: number
+  interval: number
+  intervalUnit_code: string
+  usage?: string
+  intervalMultplier?: number
+  quantity?: number
+  isRedeemed?: boolean
+  note?: string
+}
+
+export function genMedicationItem(): MedicationItem {
+  return {
+    ...genBase(),
+    medication_id: 0,
+    frequency: 0,
+    dose: 0,
+    interval: 0,
+    intervalUnit_code: '',
+  }
+}
diff --git a/app/models/medication.ts b/app/models/medication.ts
new file mode 100644
index 00000000..abf878f1
--- /dev/null
+++ b/app/models/medication.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Medication extends Base {
+  encounter_id: number
+  pharmachist_id: number
+  issuedAt?: string
+  status_code?: string
+}
+
+export function genMedication(): Medication {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    pharmachist_id: 0,
+  }
+}
+
diff --git a/app/models/medicine-group.ts b/app/models/medicine-group.ts
index afaa06c6..6537f481 100644
--- a/app/models/medicine-group.ts
+++ b/app/models/medicine-group.ts
@@ -1,5 +1,6 @@
-export interface MedicineGroup {
-  id: string
+import { type Base, genBase } from "./_base"
+
+export interface MedicineGroup extends Base {
   name: string
   code: string
 }
@@ -28,8 +29,9 @@ export interface DeleteDto {
   id?: string
 }
 
-export function genMedicine(): CreateDto {
+export function genMedicine(): MedicineGroup {
   return {
+    ...genBase(),
     name: 'name',
     code: 'code',
   }
diff --git a/app/models/medicine-method.ts b/app/models/medicine-method.ts
index 78e0a68b..7f65c189 100644
--- a/app/models/medicine-method.ts
+++ b/app/models/medicine-method.ts
@@ -1,5 +1,6 @@
-export interface MedicineMethod {
-  id: string
+import { type Base, genBase } from "./_base"
+
+export interface MedicineMethod extends Base {
   name: string
   code: string
 }
@@ -28,8 +29,9 @@ export interface DeleteDto {
   id?: string
 }
 
-export function genMedicine(): CreateDto {
+export function genMedicine(): MedicineMethod {
   return {
+    ...genBase(),
     name: 'name',
     code: 'code',
   }
diff --git a/app/models/medicine.ts b/app/models/medicine.ts
index e49076fa..d3a04752 100644
--- a/app/models/medicine.ts
+++ b/app/models/medicine.ts
@@ -1,9 +1,6 @@
-export interface MedicineBase {
-  name: string
-  code: string
-}
+import { type Base, genBase } from "./_base"
 
-export interface Medicine {
+export interface Medicine extends Base {
   code: string
   name: string
   medicineGroup_code: string
@@ -13,12 +10,18 @@ export interface Medicine {
   stock: number
 }
 
-export interface CreateMedicineDto extends Medicine {
-
+export interface CreateDto  {
+  code: string
+  name: string
+  medicineGroup_code: string
+  medicineMethod_code: string
+  uom_code: string
+  infra_id?: string | null
+  stock: number
 }
 
-export interface UpdateMedicineDto extends CreateMedicineDto {
-  id: string | number
+export interface UpdateDto extends CreateDto {
+  id: number
 }
 
 export interface GetListDto {
@@ -37,19 +40,20 @@ export interface GetListDto {
 }
 
 export interface GetDetailDto {
-  id?: string
+  id: number
 }
 
-export interface UpdateDto extends CreateMedicineDto {
-  id?: number
+export interface UpdateDto extends CreateDto {
+  id: number
 }
 
 export interface DeleteDto {
-  id?: string
+  id: number
 }
 
-export function genMedicine(): CreateMedicineDto {
+export function genMedicine(): Medicine {
   return {
+    ...genBase(),
     name: 'name',
     code: 'code',
     medicineGroup_code: 'medicineGroup_code',
diff --git a/app/models/medicinemix-item.ts b/app/models/medicinemix-item.ts
new file mode 100644
index 00000000..d2e1f973
--- /dev/null
+++ b/app/models/medicinemix-item.ts
@@ -0,0 +1,47 @@
+import { type Base, genBase } from "./_base"
+import { type Medicine, genMedicine } from "./medicine";
+
+interface MedicinemixItem extends Base {
+  id: number
+  medicineMix_id: number
+  medicine_id: number
+  medicine: Medicine
+  dose: number
+  uom_code: string
+}
+
+export interface CreateDto {
+  medicineMix_id: number
+  medicine_id: number
+  medicine: Medicine
+  dose: number
+  uom_code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+}
+
+export interface GetDetailDto {
+  id: number
+}
+
+export interface UpdateDto extends CreateDto {
+  id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function MedicinemixItem(): MedicinemixItem {
+  return {
+    ...genBase(),
+    medicineMix_id: 0,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    dose: 0,
+    uom_code: ''
+  }
+}
diff --git a/app/models/medicinemix.ts b/app/models/medicinemix.ts
new file mode 100644
index 00000000..d09c23d3
--- /dev/null
+++ b/app/models/medicinemix.ts
@@ -0,0 +1,37 @@
+import { type Base, genBase } from "./_base"
+
+export interface Medicinemix extends Base {
+  name: string
+  uom_code: string
+}
+
+export interface CreateDto {
+  name: string
+  uom_code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+}
+
+export interface GetDetailDto {
+  id: number
+}
+
+export interface UpdateDto extends CreateDto {
+  id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function genMedicinemix(): Medicinemix {
+  return {
+    ...genBase(),
+    name: '',
+    uom_code: '',
+  }
+}
diff --git a/app/models/midwife.ts b/app/models/midwife.ts
new file mode 100644
index 00000000..65f76ea7
--- /dev/null
+++ b/app/models/midwife.ts
@@ -0,0 +1,13 @@
+import { type Base, genBase } from "./_base"
+
+export interface Midwife extends Base {
+  employee_id: number
+  ihs_number?: string
+}
+
+export function genMidwife(): Midwife {
+  return {
+    ...genBase(),
+    employee_id: 0,
+    }
+}
diff --git a/app/models/nurse.ts b/app/models/nurse.ts
new file mode 100644
index 00000000..d5e1f95f
--- /dev/null
+++ b/app/models/nurse.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Nurse extends Base {
+  employee_id: number
+  ihs_number?: string
+  unit_id: number
+  infra_id: number
+}
+
+export function genNurse(): Nurse {
+  return {
+    ...genBase(),
+    employee_id: 0,
+    unit_id: 0,
+    infra_id: 0,
+    }
+}
diff --git a/app/models/nutrition-exam.ts b/app/models/nutrition-exam.ts
new file mode 100644
index 00000000..b8191cec
--- /dev/null
+++ b/app/models/nutrition-exam.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface NutritionExam extends Base {
+  encounter_id: number
+  nutritionist_id: number
+  status_code?: string
+}
+
+export function genNutritionExam(): NutritionExam {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    nutritionist_id: 0,
+  }
+}
diff --git a/app/models/nutritionist.ts b/app/models/nutritionist.ts
new file mode 100644
index 00000000..d5e1f95f
--- /dev/null
+++ b/app/models/nutritionist.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Nurse extends Base {
+  employee_id: number
+  ihs_number?: string
+  unit_id: number
+  infra_id: number
+}
+
+export function genNurse(): Nurse {
+  return {
+    ...genBase(),
+    employee_id: 0,
+    unit_id: 0,
+    infra_id: 0,
+    }
+}
diff --git a/app/models/patient-insurance.ts b/app/models/patient-insurance.ts
new file mode 100644
index 00000000..93706185
--- /dev/null
+++ b/app/models/patient-insurance.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface PatientInsurance extends Base {
+  patient_id: number
+  insuranceCompany_id: number
+  member_number: string
+}
+
+export function genPatientInsurance(): PatientInsurance {
+  return {
+    ...genBase(),
+    patient_id: 0,
+    insuranceCompany_id: 0,
+    member_number: ''
+  }
+}
diff --git a/app/models/patient.ts b/app/models/patient.ts
new file mode 100644
index 00000000..268bccd4
--- /dev/null
+++ b/app/models/patient.ts
@@ -0,0 +1,137 @@
+import { type Base, genBase } from './_base'
+import type { PatientFormData } from '~/schemas/patient.schema'
+import type { PersonAddressFormData } from '~/schemas/person-address.schema'
+import type { PersonAddressRelativeFormData } from '~/schemas/person-address-relative.schema'
+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 type { PersonAddress } from './person-address'
+import type { PersonContact } from './person-contact'
+import type { PersonRelative } from './person-relative'
+
+import { contactTypeMapping } from '~/lib/constants'
+
+export interface PatientBase extends Base {
+  person_id?: number
+  newBornStatus?: boolean
+  registeredAt?: Date | string | null
+  status_code?: string
+  number?: string
+}
+
+export interface PatientEntity extends PatientBase {
+  person: Person
+  personAddresses: PersonAddress[]
+  personContacts: PersonContact[]
+  personRelatives: PersonRelative[]
+}
+
+export interface genPatientProps {
+  patient: PatientFormData
+  residentAddress: PersonAddressFormData
+  cardAddress: PersonAddressRelativeFormData
+  familyData: PersonFamiliesFormData
+  contacts: PersonContactFormData
+  responsible: PersonRelativeFormData
+}
+
+export function genPatient(props: genPatientProps): PatientEntity {
+  const { patient, residentAddress, cardAddress, familyData, contacts, responsible } = props
+
+  const addresses: PersonAddress[] = [{ ...genBase(), person_id: 0, locationType: '', ...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 })
+  }
+
+  // add data orang tua
+  if (familyData.shareFamilyData === '1') {
+    for (const family of familyData.families) {
+      familiesContact.push({
+        id: 0,
+        relationship_code: family.relation,
+        name: family.name,
+        education_code: family.education,
+        occupation_name: family.occupation,
+        occupation_code: family.occupation,
+        responsible: false,
+      })
+    }
+  }
+
+  // add kontak pasien
+  if (contacts && contacts.contacts.length > 0) {
+    for (const contact of contacts.contacts) {
+      // Convert UI contactType to backend type_code using mapping
+      const mappedContactType = contactTypeMapping[contact.contactType]
+
+      personContacts.push({
+        ...genBase(),
+        person_id: 0,
+        type_code: mappedContactType || '',
+        value: contact.contactNumber,
+      })
+    }
+  }
+
+  // add penanggung jawab
+  if (responsible) {
+    for (const contact of responsible.contacts) {
+      familiesContact.push({
+        id: 0,
+        relationship_code: contact.relation,
+        name: contact.name,
+        address: contact.address,
+        phoneNumber: contact.phone,
+        responsible: true,
+      })
+    }
+  }
+
+  return {
+    person: {
+      id: 0,
+      name: patient.fullName,
+      alias: patient.alias,
+      birthDate: patient.birthDate,
+      birthRegency_code: patient.birthPlace,
+      gender_code: patient.gender,
+      residentIdentityNumber: patient.identityNumber,
+      passportNumber: patient.passportNumber,
+      drivingLicenseNumber: patient.drivingLicenseNumber,
+      religion_code: patient.religion,
+      education_code: patient.education,
+      occupation_code: patient.job,
+      occupation_name: patient.job,
+      ethnic_code: patient.ethnicity,
+      language_code: patient.language,
+      communicationIssueStatus: patient.communicationBarrier,
+      disability: patient.disability,
+      nationality: patient.nationality,
+      // residentIdentityFileUrl: patient.residentIdentityFileUrl,
+      // passportFileUrl: patient.passportFileUrl,
+      // drivingLicenseFileUrl: patient.drivingLicenseFileUrl,
+      // familyIdentityFileUrl: patient.familyIdentityFileUrl,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      deletedAt: null,
+    },
+    personAddresses: addresses,
+    personContacts: personContacts,
+    personRelatives: familiesContact,
+    registeredAt: new Date(),
+    status_code: 'active',
+    newBornStatus: false,
+    person_id: 0,
+    id: 0,
+    number: '0x000000000000000000000000000000',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+  }
+}
diff --git a/app/models/person-address.ts b/app/models/person-address.ts
new file mode 100644
index 00000000..1f085c65
--- /dev/null
+++ b/app/models/person-address.ts
@@ -0,0 +1,21 @@
+import { type Base, genBase } from "./_base"
+
+export interface PersonAddress extends Base {
+  person_id: number
+  locationType: string
+  address: string
+  rt?: string
+  rw?: string
+  postalCode?: string
+  village_code: string
+}
+
+export function genPersonAddress(): PersonAddress {
+  return {
+    ...genBase(),
+    person_id: 0,
+    locationType: '',
+    address: '',
+    village_code: '',
+  }
+}
diff --git a/app/models/person-contact.ts b/app/models/person-contact.ts
new file mode 100644
index 00000000..09279880
--- /dev/null
+++ b/app/models/person-contact.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface PersonContact extends Base {
+  person_id: number
+  type_code: string
+  value: string
+}
+
+export function genPersonContact(): PersonContact {
+  return {
+    ...genBase(),
+    person_id: 0,
+    type_code: '',
+    value: '',
+  }
+}
diff --git a/app/models/person-relative.ts b/app/models/person-relative.ts
new file mode 100644
index 00000000..3b140abb
--- /dev/null
+++ b/app/models/person-relative.ts
@@ -0,0 +1,14 @@
+export interface PersonRelative {
+  id: number
+  person_id?: number
+  relationship_code?: string
+  name?: string
+  address?: string
+  village_code?: string
+  gender_code?: string
+  phoneNumber?: string
+  education_code?: string
+  occupation_name?: string
+  occupation_code?: string
+  responsible?: boolean
+}
diff --git a/app/models/person.ts b/app/models/person.ts
new file mode 100644
index 00000000..435eae4b
--- /dev/null
+++ b/app/models/person.ts
@@ -0,0 +1,36 @@
+import { type Base, genBase } from "./_base"
+
+export interface Person extends Base {
+  // todo: awaiting approve from stake holder: buat field sapaan
+  // todo: adjust field ketika person  Balita
+  name: string
+  alias?: string
+  frontTitle?: string
+  endTitle?: string
+  birthDate?: Date | string
+  birthRegency_code?: string
+  gender_code?: string
+  residentIdentityNumber?: string
+  passportNumber?: string
+  drivingLicenseNumber?: string
+  religion_code?: string
+  education_code?: string
+  occupation_code?: string
+  occupation_name?: string
+  ethnic_code?: string
+  language_code?: string
+  nationality?: string
+  communicationIssueStatus?: boolean
+  disability?: string
+  residentIdentityFileUrl?: string
+  passportFileUrl?: string
+  drivingLicenseFileUrl?: string
+  familyIdentityFileUrl?: string
+}
+
+export function genPerson(): Person {
+  return {
+    ...genBase(),
+    name: '',
+  }
+}
diff --git a/app/models/pharmachist.ts b/app/models/pharmachist.ts
new file mode 100644
index 00000000..9829a51a
--- /dev/null
+++ b/app/models/pharmachist.ts
@@ -0,0 +1,13 @@
+import { type Base, genBase } from "./_base"
+
+export interface Pharmachist extends Base {
+  employee_id: number
+  ihs_number?: string
+}
+
+export function genPharmachist(): Pharmachist {
+  return {
+    ...genBase(),
+    employee_id: 0,
+  }
+}
diff --git a/app/models/practice-schedule.ts b/app/models/practice-schedule.ts
new file mode 100644
index 00000000..6189f0a2
--- /dev/null
+++ b/app/models/practice-schedule.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from "./_base"
+import { type Doctor, genDoctor } from "./doctor"
+
+export interface PracticeSchedule extends Base {
+  doctor_id: number
+  doctor: Doctor
+  unit_code: number
+  day_code: number
+  starttime: string
+  endtime: string
+}
+
+export function genPracticeSchedule(): PracticeSchedule {
+  return {
+    ...genBase(),
+    doctor_id: 0,
+    doctor: genDoctor(),
+    unit_code: 0,
+    day_code: 0,
+    starttime: '',
+    endtime: '',
+  }
+}
diff --git a/app/models/prescription-item.ts b/app/models/prescription-item.ts
new file mode 100644
index 00000000..6f0d3716
--- /dev/null
+++ b/app/models/prescription-item.ts
@@ -0,0 +1,69 @@
+import { genMedicine, type Medicine } from "./medicine";
+import { genMedicinemix, type Medicinemix } from "./medicinemix";
+
+export interface PrescriptionItem {
+  id: number;
+  prescription_id: number;
+  isMix: boolean;
+  medicine_id: number;
+  medicine: Medicine;
+  medicineMix_id: number;
+  medicineMix: Medicinemix
+  frequency: number;
+  dose: number;
+  interval: number;
+  intervalUnit_code: string;
+  quantity: number;
+  usage: string;
+}
+
+export interface CreateDto {
+  prescription_Id: number;
+  isMix: boolean;
+  medicine_Id: number;
+  medicineMix_id: number;
+  frequency: number;
+  multiplier: number;
+  interval: number;
+  intervalUnit_code: string;
+  quantity: number;
+  usage: string;
+}
+ 
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+//   code?: string
+}
+ 
+export interface GetDetailDto {
+  id?: string
+}
+ 
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+ 
+export interface DeleteDto {
+  id?: string
+}
+ 
+export function genPresciptionItem(): PrescriptionItem {
+  return {
+    id: 0,
+    prescription_id: 0,
+    isMix: false,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    medicineMix_id: 0,
+    medicineMix: genMedicinemix(),
+    frequency: 0,
+    dose: 0,
+    interval: 0,
+    intervalUnit_code: '',
+    quantity: 0,
+    usage: ''
+  }
+}
+ 
\ No newline at end of file
diff --git a/app/models/prescription.ts b/app/models/prescription.ts
new file mode 100644
index 00000000..543724d2
--- /dev/null
+++ b/app/models/prescription.ts
@@ -0,0 +1,56 @@
+import { type Encounter, genEncounter } from "./encounter";
+import { type Doctor, genDoctor } from "./doctor";
+import { type PrescriptionItem } from "./prescription-item";
+import type { SpecialistIntern } from "./specialist-intern";
+
+export interface Prescription {
+  id: number
+  encounter_id: number
+  encounter: Encounter
+  doctor_id: number
+  doctor: Doctor
+  specialistIntern_id?: number
+  specialistIntern?: SpecialistIntern
+  issuedAt: string
+  status_code: string
+  items: PrescriptionItem[]
+}
+
+export interface CreateDto {
+  encounter_id: number
+  doctor_id: number
+  issuedAt: string
+  status_code: string
+}
+
+export interface GetListDto {
+  encounter_id: number
+  doctor_id: number
+  issuedAt: string
+  status_code: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genPresciption(): Prescription {
+  return {
+    id: 0,
+    encounter_id: 0,
+    encounter: genEncounter(),
+    doctor_id: 0,
+    doctor: genDoctor(),
+    issuedAt: '',
+    status_code: '',
+    items: [],
+  }
+}
diff --git a/app/models/province.ts b/app/models/province.ts
new file mode 100644
index 00000000..a259cb57
--- /dev/null
+++ b/app/models/province.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Province extends Base {
+  code: string
+  name: string
+}
+
+export function genProvince(): Province {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/models/queue.ts b/app/models/queue.ts
new file mode 100644
index 00000000..b9a76c51
--- /dev/null
+++ b/app/models/queue.ts
@@ -0,0 +1,22 @@
+import { type Base, genBase } from "./_base"
+
+export interface Queue extends Base {
+  appointment_id: number
+  counter_id: number
+  status_code: string
+  waitTimeStamp: number
+  startTimeStamp: number
+  endTimeStamp: number
+}
+
+export function genQueue(): Queue {
+  return {
+    ...genBase(),
+    appointment_id: 0,
+    counter_id: 0,
+    status_code: '',
+    waitTimeStamp: 0,
+    startTimeStamp: 0,
+    endTimeStamp: 0,
+  }
+}
diff --git a/app/models/regency.ts b/app/models/regency.ts
new file mode 100644
index 00000000..494f256e
--- /dev/null
+++ b/app/models/regency.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Regency extends Base {
+  code: string
+  name: string
+  province_code: string
+}
+
+export function genRegency(): Regency {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    province_code: '',
+  }
+}
diff --git a/app/models/sbar.ts b/app/models/sbar.ts
new file mode 100644
index 00000000..9c5ac38a
--- /dev/null
+++ b/app/models/sbar.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Sbar extends Base {
+  encounter_id: number
+  employee_id: number
+  time?: string
+  value: unknown
+}
+
+export function genSbar(): Sbar {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    employee_id: 0,
+    value: '',
+  }
+}
diff --git a/app/models/soapi.ts b/app/models/soapi.ts
new file mode 100644
index 00000000..0289b342
--- /dev/null
+++ b/app/models/soapi.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface Soapi extends Base {
+  encounter_id: number
+  employee_id: number
+  time?: string
+  typeCode?: string
+  value: unknown
+}
+
+export function genSoapi(): Soapi {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    employee_id: 0,
+    value: '',
+  }
+}
diff --git a/app/models/specialist-intern.ts b/app/models/specialist-intern.ts
new file mode 100644
index 00000000..cee08a1b
--- /dev/null
+++ b/app/models/specialist-intern.ts
@@ -0,0 +1,25 @@
+import { type Base, genBase } from "./_base"
+import { type Person, genPerson } from "./person";
+import { type Specialist, genSpecialist } from "./specialist";
+import { type Subspecialist } from "./subspecialist";
+
+export interface SpecialistIntern extends Base {
+  person_id: number
+  person: Person
+  specialist_id: number
+  specialist: Specialist
+  subspecialist_id?: number
+  subspecialist?: Subspecialist
+  user_id: number
+}
+
+export function genSpecialistIntern(): SpecialistIntern {
+  return {
+    ...genBase(),
+    person_id: 0,
+    person: genPerson(),
+    specialist_id: 0,
+    specialist: genSpecialist(),
+    user_id: 0,
+  }
+}
\ No newline at end of file
diff --git a/app/models/specialist.ts b/app/models/specialist.ts
index 39b23390..b4fe1115 100644
--- a/app/models/specialist.ts
+++ b/app/models/specialist.ts
@@ -1,6 +1,16 @@
-export interface Specialist {
-  id?: number
+import { type Base, genBase } from "./_base"
+
+export interface Specialist extends Base {
   code: string
   name: string
-  unit_id: number | string
+  unit_id?: number | string | null
+}
+
+export function genSpecialist(): Specialist {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    unit_id: 0
+  }
 }
diff --git a/app/models/subspecialist.ts b/app/models/subspecialist.ts
index 32591ab3..6343b847 100644
--- a/app/models/subspecialist.ts
+++ b/app/models/subspecialist.ts
@@ -1,5 +1,16 @@
-export interface Subspecialist {
+import { type Base, genBase } from "./_base"
+
+export interface Subspecialist extends Base {
   code: string
   name: string
-  specialist_id: number | string
+  specialist_id?: number | string | null
+}
+
+export function genSubspecialist(): Subspecialist {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    specialist_id: 0
+  }
 }
diff --git a/app/models/triage.ts b/app/models/triage.ts
new file mode 100644
index 00000000..3c8ab6a9
--- /dev/null
+++ b/app/models/triage.ts
@@ -0,0 +1,32 @@
+import { type Base, genBase } from "./_base"
+
+export interface triage extends Base {
+  encounter_id: number
+  arrival_time: string
+  arrival_condition_code: string
+  arrival_transporation_code: string
+  patient_name: string
+  patient_id: number
+  patient_residentIdentityNumber: string
+  patient_birthDate: string
+  patient_gender_code: string
+  diagnosis: string
+  doctor_id: number
+}
+
+export function gentriage(): triage {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    arrival_time: '',
+    arrival_condition_code: '',
+    arrival_transporation_code: '',
+    patient_name: '',
+    patient_id: 0,
+    patient_residentIdentityNumber: '',
+    patient_birthDate: '',
+    patient_gender_code: '',
+    diagnosis: '',
+    doctor_id: 0,
+    }
+}
diff --git a/app/models/unit.ts b/app/models/unit.ts
index 27348354..142f0570 100644
--- a/app/models/unit.ts
+++ b/app/models/unit.ts
@@ -1,6 +1,16 @@
-export interface Unit {
-  id?: number
+import { type Base, genBase } from "./_base"
+
+export interface Unit extends Base {
   code: string
   name: string
-  installation?: string | number
+  installation_id?: number | string | null
+}
+
+export function genUnit(): Unit {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    installation_id: 0,
+  }
 }
diff --git a/app/models/uom.ts b/app/models/uom.ts
index 9e9f5fdf..7905a2b4 100644
--- a/app/models/uom.ts
+++ b/app/models/uom.ts
@@ -1,5 +1,16 @@
-export interface Uom {
+import { type Base, genBase } from "./_base"
+
+export interface Uom extends Base {
   code: string
   name: string
   erp_id: string
 }
+
+export function genUom(): Uom {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    erp_id: '',
+  }
+}
diff --git a/app/models/user.ts b/app/models/user.ts
index 03dd4076..f51fbb70 100644
--- a/app/models/user.ts
+++ b/app/models/user.ts
@@ -1,19 +1,17 @@
-export interface User {
-  id: number
+import { type Base, genBase } from "./_base"
+
+export interface User extends Base {
   name: string
-  password: string
+  // password: string // not returning password from API
   status_code: string
-  createdAt: string
-  updatedAt: string
+  position_code: string
 }
 
 export function genUser(): User {
   return {
-    id: 0,
+    ...genBase(),
     name: '',
-    password: '',
     status_code: '',
-    createdAt: '',
-    updatedAt: '',
-  }
+    position_code: ''
+}
 }
diff --git a/app/pages/(features)/client/patient/[id]/edit.vue b/app/pages/(features)/client/patient/[id]/edit.vue
new file mode 100644
index 00000000..bf4f470d
--- /dev/null
+++ b/app/pages/(features)/client/patient/[id]/edit.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 Divisi',
+  contentFrame: 'cf-full-width',
+})
+
+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>
+  <div>
+    <div v-if="canRead">Edit patient id: {{ route.params.id }}</div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/client/patient/[id]/index.vue b/app/pages/(features)/client/patient/[id]/index.vue
new file mode 100644
index 00000000..ffe978eb
--- /dev/null
+++ b/app/pages/(features)/client/patient/[id]/index.vue
@@ -0,0 +1,43 @@
+<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: 'Detail Pasien',
+  contentFrame: 'cf-container-md',
+})
+
+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)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPatientDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/client/patient/add.vue b/app/pages/(features)/client/patient/add.vue
new file mode 100644
index 00000000..12df14ed
--- /dev/null
+++ b/app/pages/(features)/client/patient/add.vue
@@ -0,0 +1,43 @@
+<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: 'Tambah Pasien',
+  contentFrame: 'cf-container-2xl',
+})
+
+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)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPatientEntry />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/client/patient/index.vue b/app/pages/(features)/client/patient/index.vue
new file mode 100644
index 00000000..79befc0c
--- /dev/null
+++ b/app/pages/(features)/client/patient/index.vue
@@ -0,0 +1,43 @@
+<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 Pasien',
+  contentFrame: 'cf-full-width',
+})
+
+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)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPatientList />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/installation/index.vue b/app/pages/(features)/org-src/installation/index.vue
index fc41142f..fff5bac3 100644
--- a/app/pages/(features)/org-src/installation/index.vue
+++ b/app/pages/(features)/org-src/installation/index.vue
@@ -6,8 +6,8 @@ import Error from '~/components/pub/my-ui/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'List Installation',
-  contentFrame: 'cf-full-width',
+  title: 'Daftar Instalasi',
+  contentFrame: 'cf-container-lg',
 })
 
 const route = useRoute()
diff --git a/app/pages/(features)/org-src/specialist/index.vue b/app/pages/(features)/org-src/specialist/index.vue
index c2799818..c81832f2 100644
--- a/app/pages/(features)/org-src/specialist/index.vue
+++ b/app/pages/(features)/org-src/specialist/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/my-ui/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Specialist',
+  title: 'Daftar Spesialis',
   contentFrame: 'cf-container-lg',
 })
 
diff --git a/app/pages/(features)/org-src/subspecialist/index.vue b/app/pages/(features)/org-src/subspecialist/index.vue
index 0d1f169c..6fb09f5e 100644
--- a/app/pages/(features)/org-src/subspecialist/index.vue
+++ b/app/pages/(features)/org-src/subspecialist/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/my-ui/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Subspecialist',
+  title: 'Daftar Sub Spesialis',
   contentFrame: 'cf-container-lg',
 })
 
diff --git a/app/pages/(features)/service-src/bed/index.vue b/app/pages/(features)/service-src/bed/index.vue
new file mode 100644
index 00000000..85541ef5
--- /dev/null
+++ b/app/pages/(features)/service-src/bed/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Bed',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentBedList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/building/index.vue b/app/pages/(features)/service-src/building/index.vue
new file mode 100644
index 00000000..38b214db
--- /dev/null
+++ b/app/pages/(features)/service-src/building/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Building',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentBuildingList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/chamber/index.vue b/app/pages/(features)/service-src/chamber/index.vue
new file mode 100644
index 00000000..7afc18e1
--- /dev/null
+++ b/app/pages/(features)/service-src/chamber/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Chamber',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentChamberList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/counter/index.vue b/app/pages/(features)/service-src/counter/index.vue
new file mode 100644
index 00000000..63d35471
--- /dev/null
+++ b/app/pages/(features)/service-src/counter/index.vue
@@ -0,0 +1,39 @@
+<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 Divisi',
+  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">
+    <ContentCounterList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/floor/index.vue b/app/pages/(features)/service-src/floor/index.vue
new file mode 100644
index 00000000..9f17fd03
--- /dev/null
+++ b/app/pages/(features)/service-src/floor/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Floor',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentFloorList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/room/index.vue b/app/pages/(features)/service-src/room/index.vue
new file mode 100644
index 00000000..a91cc621
--- /dev/null
+++ b/app/pages/(features)/service-src/room/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Room',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentRoomList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/warehouse/index.vue b/app/pages/(features)/service-src/warehouse/index.vue
new file mode 100644
index 00000000..022e693b
--- /dev/null
+++ b/app/pages/(features)/service-src/warehouse/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Warehouse',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentWarehouseList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/_dev/play.vue b/app/pages/_dev/play.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/pages/_dev/play.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/schemas/base.schema.ts b/app/schemas/base.schema.ts
index b46857ac..7b48b038 100644
--- a/app/schemas/base.schema.ts
+++ b/app/schemas/base.schema.ts
@@ -1,12 +1,12 @@
 import { z } from 'zod'
-import type { Base } from '~/models/_model'
+import type { CodeName } from '~/models/_base'
 
 const BaseSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
 })
 
-type BaseFormData = z.infer<typeof BaseSchema> & Base
+type BaseFormData = z.infer<typeof BaseSchema> & CodeName
 
 export { BaseSchema }
 export type { BaseFormData }
diff --git a/app/schemas/division.schema.ts b/app/schemas/division.schema.ts
index 1aecb3c6..af5b5881 100644
--- a/app/schemas/division.schema.ts
+++ b/app/schemas/division.schema.ts
@@ -1,9 +1,15 @@
 import { z } from 'zod'
-import type { Division, DivisionPosition } from '~/models/division'
+import type { Division } from '~/models/division'
+import type { DivisionPosition } from '~/models/division-position'
 
 const DivisionSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  parent_id: z.union([
+    z.string({ required_error: 'Divisi Induk harus diisi' }),
+    z.number({ required_error: 'Divisi Induk harus diisi' })
+  ]).optional().nullable(),
+  division_id: z.string({ required_error: 'Divisi Induk harus diisi' }).optional().nullable(),
 })
 
 type DivisionFormData = z.infer<typeof DivisionSchema> & (Division | DivisionPosition)
diff --git a/app/schemas/infra.schema.ts b/app/schemas/infra.schema.ts
new file mode 100644
index 00000000..56a5586e
--- /dev/null
+++ b/app/schemas/infra.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+import type { Infra } from '~/models/infra'
+
+const InfraSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  infraGroup_code: z.string().min(1, 'Infra Group harus diisi'),
+  parent_id: z
+    .union([z.string({ required_error: 'Induk harus diisi' }), z.number({ required_error: 'Induk harus diisi' })])
+    .optional()
+    .nullable(),
+  specialist_id: z.union([z.string(), z.number()]).nullable().optional(),
+  subspecialist_id: z.union([z.string(), z.number()]).nullable().optional(),
+  unit_id: z.union([z.string(), z.number()]).nullable().optional(),
+})
+
+type InfraFormData = z.infer<typeof InfraSchema> & Infra
+
+export { InfraSchema }
+export type { InfraFormData }
diff --git a/app/schemas/installation.schema.ts b/app/schemas/installation.schema.ts
new file mode 100644
index 00000000..75e18074
--- /dev/null
+++ b/app/schemas/installation.schema.ts
@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const InstallationSchema = z.object({
+  code: z.string().min(1, 'Kode wajib diisi'),
+  name: z.string().min(1, 'Nama wajib diisi'),
+  encounterClass_code: z.string().min(1, 'Encounter Class wajib diisi').optional(),
+})
+
+export type InstallationFormData = z.infer<typeof InstallationSchema>
diff --git a/app/schemas/patient.schema.ts b/app/schemas/patient.schema.ts
new file mode 100644
index 00000000..1dc0a4c7
--- /dev/null
+++ b/app/schemas/patient.schema.ts
@@ -0,0 +1,114 @@
+import { z } from 'zod'
+
+const CommunicationBarrierSchema = z
+  .enum(['YA', 'TIDAK'], {
+    required_error: 'Mohon lengkapi Status Hambatan Berkomunikasi',
+  })
+  .transform((val) => val === 'YA')
+
+const PatientSchema = z
+  .object({
+    // Data Diri Pasien
+    identityNumber: z
+      .string({
+        required_error: 'Mohon lengkapi NIK',
+      })
+      .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' }),
+
+    // Informasi Dasar
+    alias: z.string({
+      required_error: 'Mohon pilih sapaan',
+    }),
+    fullName: z.string({
+      required_error: 'Mohon lengkapi Nama',
+    }),
+    birthPlace: z
+      .string({
+        required_error: 'Mohon lengkapi Tempat Lahir',
+      })
+      .min(1, 'Mohon lengkapi Tempat Lahir'),
+    birthDate: z
+      .string({
+        required_error: 'Mohon lengkapi Tanggal Lahir',
+      })
+      .refine(
+        (date) => {
+          // Jika kosong, return false untuk required validation
+          if (!date || date.trim() === '') return false
+
+          // Jika ada isi, validasi format tanggal
+          try {
+            const dateObj = new Date(date)
+            // Cek apakah tanggal valid dan tahun >= 1900
+            return !isNaN(dateObj.getTime()) && dateObj.getFullYear() >= 1900
+          } catch {
+            return false
+          }
+        },
+        {
+          message: 'Mohon lengkapi Tanggal Lahir dengan format yang valid',
+        },
+      )
+      .transform((dateStr) => new Date(dateStr).toISOString()),
+
+    // Jenis Kelamin & Status
+    gender: z.string({
+      required_error: 'Pilih Jenis Kelamin',
+    }),
+    maritalStatus: z.enum(['TIDAK_DIKETAHUI', 'BELUM_KAWIN', 'KAWIN', 'CERAI_HIDUP', 'CERAI_MATI'], {
+      required_error: 'Pilih Status Perkawinan',
+    }),
+
+    // Informasi Lokasi & Sosial
+    job: z
+      .string({
+        required_error: 'Mohon lengkapi Pekerjaan',
+      })
+      .min(1),
+    nationality: z.string({
+      required_error: 'Pilih Kebangsaan',
+    }),
+    language: z.string({
+      required_error: 'Mohon pilih Preferensi Bahasa',
+    }),
+    education: z
+      .string({
+        required_error: 'Mohon lengkapi Pendidikan',
+      })
+      .min(1),
+    religion: z
+      .string({
+        required_error: 'Pilih Kepercayaan',
+      })
+      .min(1),
+    ethnicity: z.string().optional(),
+
+    // Disabilitas
+    disability: z.enum(['YA', 'TIDAK'], {
+      required_error: 'Mohon lengkapi Status Disabilitas',
+    }),
+    disabilityType: z.string().optional(),
+
+    // Informasi Kontak
+    passportNumber: z.string().optional(),
+    communicationBarrier: CommunicationBarrierSchema,
+
+    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'],
+  })
+
+type PatientFormData = z.infer<typeof PatientSchema>
+
+export { PatientSchema }
+export type { PatientFormData }
diff --git a/app/schemas/person-address-relative.schema.ts b/app/schemas/person-address-relative.schema.ts
new file mode 100644
index 00000000..43bac06e
--- /dev/null
+++ b/app/schemas/person-address-relative.schema.ts
@@ -0,0 +1,27 @@
+import { z } from 'zod'
+import { PersonAddressSchema } from './person-address.schema'
+
+// Schema untuk alamat opsional ketika isSameAddress = '1'
+const OptionalAddressSchema = PersonAddressSchema.partial()
+
+// Schema untuk alamat required ketika isSameAddress = '0'
+const RequiredAddressSchema = PersonAddressSchema
+
+const PersonAddressRelativeSchema = z.discriminatedUnion('isSameAddress', [
+  z
+    .object({
+      isSameAddress: z.literal('1').default('1'),
+    })
+    .merge(OptionalAddressSchema),
+
+  z
+    .object({
+      isSameAddress: z.literal('0'),
+    })
+    .merge(RequiredAddressSchema),
+])
+
+type PersonAddressRelativeFormData = z.infer<typeof PersonAddressRelativeSchema>
+
+export { PersonAddressRelativeSchema }
+export type { PersonAddressRelativeFormData }
diff --git a/app/schemas/person-address.schema.ts b/app/schemas/person-address.schema.ts
new file mode 100644
index 00000000..93ce6396
--- /dev/null
+++ b/app/schemas/person-address.schema.ts
@@ -0,0 +1,32 @@
+import { z } from 'zod'
+
+const PersonAddressSchema = z.object({
+  address: z.string({
+    required_error: 'Mohon lengkapi alamat',
+  }),
+  province_code: z.string({
+    required_error: 'Mohon pilih provinsi',
+  }),
+  regency_code: z.string({
+    required_error: 'Mohon pilih kabupaten/kota',
+  }),
+  district_code: z.string({
+    required_error: 'Mohon pilih kecamatan',
+  }),
+  village_code: z.string({
+    required_error: 'Mohon pilih kelurahan',
+  }),
+  // diganti postalCode, zipCode hanya beberapa negara, kurang universal
+  postalCode: z.string({
+    required_error: 'Mohon lengkapi kode pos',
+  }),
+  // .min(5, 'Kode pos harus berupa angka 5 digit')
+  // .regex(/^\d+$/, 'Kode pos harus berupa angka 5 digit'),
+  rt: z.string().optional(),
+  rw: z.string().optional(),
+})
+
+type PersonAddressFormData = z.infer<typeof PersonAddressSchema>
+
+export { PersonAddressSchema }
+export type { PersonAddressFormData }
diff --git a/app/schemas/person-contact.schema.ts b/app/schemas/person-contact.schema.ts
new file mode 100644
index 00000000..fe05c799
--- /dev/null
+++ b/app/schemas/person-contact.schema.ts
@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+const PersonContactBaseSchema = z.object({
+  contactType: z.string().min(1, 'Mohon pilih tipe kontak'),
+  contactNumber: z.string().min(8, 'Nomor minimal 8 digit'),
+})
+
+const PersonContactListSchema = z.object({
+  contacts: z.array(PersonContactBaseSchema).min(1, 'Minimal 1 kontak'),
+})
+
+type PersonContactFormData = z.infer<typeof PersonContactListSchema>
+
+export { PersonContactListSchema, PersonContactBaseSchema }
+export type { PersonContactFormData }
diff --git a/app/schemas/person-family.schema.ts b/app/schemas/person-family.schema.ts
new file mode 100644
index 00000000..06bf9042
--- /dev/null
+++ b/app/schemas/person-family.schema.ts
@@ -0,0 +1,33 @@
+import { z } from 'zod'
+
+const PersonFamilySchema = z.object({
+  relation: z.enum(['mother', 'father', 'guardian', 'emergency_contact']),
+  name: z
+    .string({
+      required_error: 'Mohon lengkapi nama',
+    })
+    .min(1, 'Mohon lengkapi nama'),
+  education: z
+    .string({
+      required_error: 'Mohon pilih pendidikan',
+    })
+    .min(1, 'Mohon pilih pendidikan'),
+  occupation: z.string().optional(),
+})
+
+const PersonFamiliesSchema = z.discriminatedUnion('shareFamilyData', [
+  z.object({
+    shareFamilyData: z.literal('0'),
+    families: z.array(PersonFamilySchema).optional().default([]),
+  }),
+  z.object({
+    shareFamilyData: z.literal('1'),
+    families: z.array(PersonFamilySchema).min(1, 'Minimal 1 kontak keluarga'),
+  }),
+])
+
+type PersonFamilyFormData = z.infer<typeof PersonFamilySchema>
+type PersonFamiliesFormData = z.infer<typeof PersonFamiliesSchema>
+
+export { PersonFamilySchema, PersonFamiliesSchema }
+export type { PersonFamilyFormData, PersonFamiliesFormData }
diff --git a/app/schemas/person-relative.schema.ts b/app/schemas/person-relative.schema.ts
new file mode 100644
index 00000000..06644de6
--- /dev/null
+++ b/app/schemas/person-relative.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+const ResponsibleContactPersonSchema = z.object({
+  relation: z.string({ required_error: 'Pilih jenis Penanggung Jawab' }).min(1, 'Pilih jenis Penanggung Jawab'),
+  name: z.string({ required_error: 'Mohon lengkapi Nama' }).min(3, 'Mohon lengkapi Nama'),
+  address: z.string({ required_error: 'Mohon lengkapi Alamat' }).min(3, 'Mohon lengkapi Alamat'),
+  phone: z
+    .string({ required_error: 'Mohon lengkapi Nomor HP' })
+    .min(8, 'Nomor HP minimal 10 digit')
+    .max(15, 'Nomor HP maksimal 15 digit'),
+})
+
+const ResponsiblePersonSchema = z.object({
+  contacts: z.array(ResponsibleContactPersonSchema).min(1, 'Minimal harus ada 1 penanggung jawab'),
+})
+
+type PersonRelativeFormData = z.infer<typeof ResponsiblePersonSchema>
+
+export { ResponsiblePersonSchema }
+export type { PersonRelativeFormData }
diff --git a/app/schemas/specialist.schema.ts b/app/schemas/specialist.schema.ts
index 10715d20..d00e1ff7 100644
--- a/app/schemas/specialist.schema.ts
+++ b/app/schemas/specialist.schema.ts
@@ -4,7 +4,10 @@ import type { Specialist } from '~/models/specialist'
 const SpecialistSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
-  unit_id: z.number().positive('Unit harus diisi'),
+  unit_id: z
+    .union([z.string({ required_error: 'Unit harus diisi' }), z.number({ required_error: 'Unit harus diisi' })])
+    .optional()
+    .nullable(),
 })
 
 type SpecialistFormData = z.infer<typeof SpecialistSchema> & Specialist
diff --git a/app/schemas/subspecialist.schema.ts b/app/schemas/subspecialist.schema.ts
index d485c95c..bde70c20 100644
--- a/app/schemas/subspecialist.schema.ts
+++ b/app/schemas/subspecialist.schema.ts
@@ -4,7 +4,13 @@ import type { Subspecialist } from '~/models/subspecialist'
 const SubspecialistSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
-  specialist_id: z.number().positive('Spesialis harus diisi'),
+  specialist_id: z
+    .union([
+      z.string({ required_error: 'Spesialis harus diisi' }),
+      z.number({ required_error: 'Spesialis harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
 })
 
 type SubspecialistFormData = z.infer<typeof SubspecialistSchema> & Subspecialist
diff --git a/app/schemas/unit.schema.ts b/app/schemas/unit.schema.ts
index 30a5a075..47d6fd54 100644
--- a/app/schemas/unit.schema.ts
+++ b/app/schemas/unit.schema.ts
@@ -4,6 +4,13 @@ import type { Unit } from '~/models/unit'
 const UnitSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  installation_id: z
+    .union([
+      z.string({ required_error: 'Instalasi harus diisi' }),
+      z.number({ required_error: 'Instalasi harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
 })
 
 type UnitFormData = z.infer<typeof UnitSchema> & Unit
diff --git a/app/schemas/uom.schema.ts b/app/schemas/uom.schema.ts
index 4229e420..7d7da038 100644
--- a/app/schemas/uom.schema.ts
+++ b/app/schemas/uom.schema.ts
@@ -1,4 +1,4 @@
-import { BaseSchema, type BaseFormData } from './base.schema'
+import { BaseSchema, type BaseFormData } from './my-ui.schema'
 
 export { BaseSchema as UomSchema }
 export type { BaseFormData as UomFormData }
diff --git a/app/services/_crud-base.ts b/app/services/_crud-base.ts
index f9d33744..8b4d3bc2 100644
--- a/app/services/_crud-base.ts
+++ b/app/services/_crud-base.ts
@@ -1,6 +1,6 @@
 import { xfetch } from '~/composables/useXfetch'
 
-export async function create(path: string, data: any) {
+export async function create(path: string, data: any, name: string = 'item') {
   try {
     const resp = await xfetch(path, 'POST', data)
     const result: any = {}
@@ -8,12 +8,12 @@ export async function create(path: string, data: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error posting division:', error)
-    throw new Error('Failed to post division')
+    console.error(`Error posting ${name}:`, error)
+    throw new Error(`Failed to post ${name}`)
   }
 }
 
-export async function getList(path: string, params: any = null) {
+export async function getList(path: string, params: any = null, name: string = 'item') {
   try {
     let url = path
     if (params && typeof params === 'object' && Object.keys(params).length > 0) {
@@ -26,18 +26,18 @@ export async function getList(path: string, params: any = null) {
       const queryString = searchParams.toString()
       if (queryString) url += `?${queryString}`
     }
-    const resp = await xfetch(path, 'GET')
+    const resp = await xfetch(url, 'GET')
     const result: any = {}
     result.success = resp.success
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching divisions:', error)
-    throw new Error('Failed to fetch divisions')
+    console.error(`Error fetching ${name}s:`, error)
+    throw new Error(`Failed to fetch ${name}s`)
   }
 }
 
-export async function getDetail(path: string, id: number | string) {
+export async function getDetail(path: string, id: number | string, name: string = 'item') {
   try {
     const resp = await xfetch(`${path}/${id}`, 'GET')
     const result: any = {}
@@ -45,12 +45,12 @@ export async function getDetail(path: string, id: number | string) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching division detail:', error)
-    throw new Error('Failed to get division detail')
+    console.error(`Error fetching ${name} detail:`, error)
+    throw new Error(`Failed to get ${name} detail`)
   }
 }
 
-export async function update(path: string, id: number | string, data: any) {
+export async function update(path: string, id: number | string, data: any, name: string = 'item') {
   try {
     const resp = await xfetch(`${path}/${id}`, 'PATCH', data)
     const result: any = {}
@@ -58,12 +58,12 @@ export async function update(path: string, id: number | string, data: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error putting division:', error)
-    throw new Error('Failed to put division')
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
   }
 }
 
-export async function remove(path: string, id: number | string) {
+export async function remove(path: string, id: number | string, name: string = 'item') {
   try {
     const resp = await xfetch(`${path}/${id}`, 'DELETE')
     const result: any = {}
@@ -71,7 +71,7 @@ export async function remove(path: string, id: number | string) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error deleting data:', error)
-    throw new Error('Failed to delete division')
+    console.error(`Error deleting ${name}:`, error)
+    throw new Error(`Failed to delete ${name}`)
   }
 }
diff --git a/app/services/device.service.ts b/app/services/device.service.ts
index 44f7d1b9..8ad00b2b 100644
--- a/app/services/device.service.ts
+++ b/app/services/device.service.ts
@@ -1,79 +1,25 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/device'
+const path = '/api/v1/device'
+const name = 'device'
 
-export async function getDevices(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(url, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching devices:', error)
-    throw new Error('Failed to fetch devices')
-  }
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getDeviceDetail(id: string | number) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching device detail:', error)
-    throw new Error('Failed to fetch device detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postDevice(data: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', data)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error creating device:', error)
-    throw new Error('Failed to create device')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchDevice(id: string | number, data: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', data)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error updating device:', error)
-    throw new Error('Failed to update device')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeDevice(id: string | number) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting device:', error)
-    throw new Error('Failed to delete device')
-  }
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
 }
diff --git a/app/services/division-position.service.ts b/app/services/division-position.service.ts
index 07cfbd15..dc3929f8 100644
--- a/app/services/division-position.service.ts
+++ b/app/services/division-position.service.ts
@@ -1,79 +1,25 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/division-position'
+const path = '/api/v1/division-position'
+const name = 'division-position'
 
-export async function getDivisionPositions(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching division-positions:', error)
-    throw new Error('Failed to fetch division-positions')
-  }
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getDivisionPositionDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching division-position detail:', error)
-    throw new Error('Failed to get division-position detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postDivisionPosition(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting division-position:', error)
-    throw new Error('Failed to post division-position')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchDivisionPosition(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting division-position:', error)
-    throw new Error('Failed to put division-position')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeDivisionPosition(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete division-position')
-  }
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
 }
diff --git a/app/services/division.service.ts b/app/services/division.service.ts
index 38cd6118..75f9a43e 100644
--- a/app/services/division.service.ts
+++ b/app/services/division.service.ts
@@ -1,79 +1,61 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/division'
+// Types
+import type { Division } from '~/models/division'
+import type { TreeItem } from '~/models/_base'
 
-export async function getDivisions(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching divisions:', error)
-    throw new Error('Failed to fetch divisions')
-  }
+const path = '/api/v1/division'
+const name = 'division'
+
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getDivisionDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching division detail:', error)
-    throw new Error('Failed to get division detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postDivision(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting division:', error)
-    throw new Error('Failed to post division')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchDivision(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting division:', error)
-    throw new Error('Failed to put division')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeDivision(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete division')
-  }
+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: Division) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
+
+/**
+ * Convert division response (with childrens) to TreeItem[]
+ * @param divisions Array of division objects from API
+ * @returns TreeItem[]
+ */
+export function getValueTreeItems(divisions: any[]): TreeItem[] {
+  return divisions
+    .filter((division: Division) => !division.parent_id)
+    .map((division: Division) => ({
+      value: division.id ? String(division.id) : division.code,
+      label: division.name,
+      hasChildren: Array.isArray(division.childrens) && division.childrens.length > 0,
+      children:
+        Array.isArray(division.childrens) && division.childrens.length > 0
+          ? getValueTreeItems(division.childrens)
+          : undefined,
+    }))
 }
diff --git a/app/services/encounter.service.ts b/app/services/encounter.service.ts
new file mode 100644
index 00000000..bf83c843
--- /dev/null
+++ b/app/services/encounter.service.ts
@@ -0,0 +1,48 @@
+// Base
+import * as base from './_crud-base'
+
+// Constants
+import { encounterClassCodes } from '~/lib/constants'
+
+const path = '/api/v1/encounter'
+const name = 'encounter'
+
+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: any) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
+
+export function getValueLabelListConstants() {
+  const allowed = ['ambulatory', 'emergency', 'inpatient']
+  return Object.entries(encounterClassCodes)
+    .filter(([key]) => allowed.includes(key))
+    .map(([key, value]) => ({ value: key, label: value }))
+}
diff --git a/app/services/infra.service.ts b/app/services/infra.service.ts
new file mode 100644
index 00000000..9147421d
--- /dev/null
+++ b/app/services/infra.service.ts
@@ -0,0 +1,42 @@
+
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Infra } from '~/models/infra'
+
+const path = '/api/v1/infra'
+const name = 'infra'
+
+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: Infra) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/installation.service.ts b/app/services/installation.service.ts
index 8fd9e858..1f1975f5 100644
--- a/app/services/installation.service.ts
+++ b/app/services/installation.service.ts
@@ -1,79 +1,41 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/installation'
+// Types
+import type { Installation } from '~/models/installation'
 
-export async function getInstallations(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching installations:', error)
-    throw new Error('Failed to fetch installations')
-  }
+const path = '/api/v1/installation'
+const name = 'installation'
+
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getInstallationDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching installation detail:', error)
-    throw new Error('Failed to get installation detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postInstallation(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting installation:', error)
-    throw new Error('Failed to post installation')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchInstallation(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting installation:', error)
-    throw new Error('Failed to put installation')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeInstallation(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete installation')
-  }
+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: Installation) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
 }
diff --git a/app/services/material.service.ts b/app/services/material.service.ts
index 098612e0..f8e8c013 100644
--- a/app/services/material.service.ts
+++ b/app/services/material.service.ts
@@ -1,79 +1,25 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/material'
+const path = '/api/v1/material'
+const name = 'material'
 
-export async function getMaterials(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(url, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching materials:', error)
-    throw new Error('Failed to fetch materials')
-  }
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getMaterialDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching material detail:', error)
-    throw new Error('Failed to get material detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postMaterial(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting material:', error)
-    throw new Error('Failed to post material')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchMaterial(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting material:', error)
-    throw new Error('Failed to put material')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeMaterial(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete material')
-  }
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
 }
diff --git a/app/services/medicine-group.service.ts b/app/services/medicine-group.service.ts
index e1f06863..55c52a7a 100644
--- a/app/services/medicine-group.service.ts
+++ b/app/services/medicine-group.service.ts
@@ -1,79 +1,41 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/medicine-group'
+// Types
+import type { MedicineGroup } from '~/models/medicine-group'
 
-export async function getMedicineGroups(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching medicine groups:', error)
-    throw new Error('Failed to fetch medicine groups')
-  }
+const path = '/api/v1/medicine-group'
+const name = 'medicine-group'
+
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getMedicineGroupDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching medicine group detail:', error)
-    throw new Error('Failed to get medicine group detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postMedicineGroup(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting medicine group:', error)
-    throw new Error('Failed to post medicine group')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchMedicineGroup(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting medicine group:', error)
-    throw new Error('Failed to put medicine group')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeMedicineGroup(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete medicine group')
+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: MedicineGroup) => ({
+      value: item.code,
+      label: item.name,
+    }))
   }
-}
\ No newline at end of file
+  return data
+}
diff --git a/app/services/medicine-method.service.ts b/app/services/medicine-method.service.ts
index 3050671c..a6bc9918 100644
--- a/app/services/medicine-method.service.ts
+++ b/app/services/medicine-method.service.ts
@@ -1,87 +1,41 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/medicine-method'
+// Types
+import type { MedicineMethod } from '~/models/medicine-method'
 
-export async function getMedicineMethodsPrev() {
-  const resp = await xfetch('/api/v1/medicine-method')
-  if (resp.success) {
-    return (resp.body as Record<string, any>).data
-  }
-  throw new Error('Failed to fetch medicine methods')
+const path = '/api/v1/medicine-method'
+const name = 'medicine-method'
+
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getMedicineMethods(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching medicine methods:', error)
-    throw new Error('Failed to fetch medicine methods')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function getMedicineMethodDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching medicine method detail:', error)
-    throw new Error('Failed to get medicine method detail')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function postMedicineMethod(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting medicine method:', error)
-    throw new Error('Failed to post medicine method')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function patchMedicineMethod(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting medicine method:', error)
-    throw new Error('Failed to put medicine method')
-  }
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
 }
 
-export async function removeMedicineMethod(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete medicine method')
+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: MedicineMethod) => ({
+      value: item.code,
+      label: item.name,
+    }))
   }
+  return data
 }
diff --git a/app/services/medicine.service.ts b/app/services/medicine.service.ts
index 04860455..57a52103 100644
--- a/app/services/medicine.service.ts
+++ b/app/services/medicine.service.ts
@@ -1,79 +1,25 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/medicine'
+const path = '/api/v1/medicine'
+const name = 'medicine'
 
-export async function getMedicines(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(url, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching medicines:', error)
-    throw new Error('Failed to fetch medicines')
-  }
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getMedicineDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching medicine detail:', error)
-    throw new Error('Failed to get medicine detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postMedicine(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting medicine:', error)
-    throw new Error('Failed to post medicine')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchMedicine(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error patching medicine:', error)
-    throw new Error('Failed to patch medicine')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeMedicine(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting medicine:', error)
-    throw new Error('Failed to delete medicine')
-  }
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
 }
diff --git a/app/services/patient.service.ts b/app/services/patient.service.ts
new file mode 100644
index 00000000..b28f92ab
--- /dev/null
+++ b/app/services/patient.service.ts
@@ -0,0 +1,79 @@
+import { xfetch } from '~/composables/useXfetch'
+
+const mainUrl = '/api/v1/patient'
+
+export async function getPatients(params: any = null) {
+  try {
+    let url = mainUrl
+    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()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(url, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching patients:', error)
+    throw new Error('Failed to fetch patients')
+  }
+}
+
+export async function getPatientDetail(id: number) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching patient detail:', error)
+    throw new Error('Failed to get patient detail')
+  }
+}
+
+export async function postPatient(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting patient:', error)
+    throw new Error('Failed to post patient')
+  }
+}
+
+export async function patchPatient(id: number, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error patching patient:', error)
+    throw new Error('Failed to patch patient')
+  }
+}
+
+export async function removePatient(id: number) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete patient')
+  }
+}
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
index bd359918..d0be9657 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.service.ts
@@ -1,79 +1,41 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/specialist'
+// Types
+import type { Specialist } from '~/models/specialist'
 
-export async function getSpecialists(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching specialists:', error)
-    throw new Error('Failed to fetch specialists')
-  }
+const path = '/api/v1/specialist'
+const name = 'specialist'
+
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getSpecialistDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching specialist detail:', error)
-    throw new Error('Failed to get specialist detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postSpecialist(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting specialist:', error)
-    throw new Error('Failed to post specialist')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchSpecialist(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting specialist:', error)
-    throw new Error('Failed to put specialist')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeSpecialist(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete specialist')
-  }
+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: Specialist) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
 }
diff --git a/app/services/subspecialist.service.ts b/app/services/subspecialist.service.ts
index c218b748..59c1d57a 100644
--- a/app/services/subspecialist.service.ts
+++ b/app/services/subspecialist.service.ts
@@ -1,79 +1,41 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/subspecialist'
+// Types
+import type { Subspecialist } from '~/models/subspecialist'
 
-export async function getSubspecialists(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching subspecialists:', error)
-    throw new Error('Failed to fetch subspecialists')
-  }
+const path = '/api/v1/subspecialist'
+const name = 'subspecialist'
+
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getSubspecialistDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching subspecialist detail:', error)
-    throw new Error('Failed to get subspecialist detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postSubspecialist(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting subspecialist:', error)
-    throw new Error('Failed to post subspecialist')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchSubspecialist(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting subspecialist:', error)
-    throw new Error('Failed to put subspecialist')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeSubspecialist(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete subspecialist')
-  }
+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: Subspecialist) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
 }
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
index 5f171e9e..438625f1 100644
--- a/app/services/unit.service.ts
+++ b/app/services/unit.service.ts
@@ -1,31 +1,34 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
 import * as base from './_crud-base'
-import type { Unit } from '~/models/unit'
+
+// Types
+import type { Unit } from "~/models/unit";
 
 const path = '/api/v1/unit'
+const name = 'unit'
 
 export function create(data: any) {
-  return base.create(path, data)
+  return base.create(path, data, name)
 }
 
 export function getList(params: any = null) {
-  return base.getList(path, params)
+  return base.getList(path, params, name)
 }
 
 export function getDetail(id: number | string) {
-  return base.getDetail(path, id)
+  return base.getDetail(path, id, name)
 }
 
 export function update(id: number | string, data: any) {
-  return base.update(path, id, data)
+  return base.update(path, id, data, name)
 }
 
 export function remove(id: number | string) {
-  return base.remove(path, id)
+  return base.remove(path, id, name)
 }
 
 export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
-  let data: { value: string; label: string }[] = [];
+  let data: { value: string; label: string }[] = []
   const result = await getList(params)
   if (result.success) {
     const resultData = result.body?.data || []
@@ -34,84 +37,5 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
       label: item.name,
     }))
   }
-  return data;
-}
-
-//////////////////////// WILL BE LEGACY
-const mainUrl = '/api/v1/unit'
-
-export async function getUnits(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching units:', error)
-    throw new Error('Failed to fetch units')
-  }
-}
-
-export async function getUnitDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching unit detail:', error)
-    throw new Error('Failed to get unit detail')
-  }
-}
-
-export async function postUnit(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting unit:', error)
-    throw new Error('Failed to post unit')
-  }
-}
-
-export async function patchUnit(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting unit:', error)
-    throw new Error('Failed to put unit')
-  }
-}
-
-export async function removeUnit(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete unit')
-  }
+  return data
 }
diff --git a/app/services/uom.service.ts b/app/services/uom.service.ts
index f7b2eec1..581c28f7 100644
--- a/app/services/uom.service.ts
+++ b/app/services/uom.service.ts
@@ -1,79 +1,41 @@
-import { xfetch } from '~/composables/useXfetch'
+// Base
+import * as base from './_crud-base'
 
-const mainUrl = '/api/v1/uom'
+// Types
+import type { Uom } from '~/models/uom'
 
-export async function getUoms(params: any = null) {
-  try {
-    let url = mainUrl
-    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()
-      if (queryString) url += `?${queryString}`
-    }
-    const resp = await xfetch(mainUrl, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching uoms:', error)
-    throw new Error('Failed to fetch uoms')
-  }
+const path = '/api/v1/uom'
+const name = 'uom'
+
+export function create(data: any) {
+  return base.create(path, data, name)
 }
 
-export async function getUomDetail(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error fetching uom detail:', error)
-    throw new Error('Failed to get uom detail')
-  }
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
 }
 
-export async function postUom(record: any) {
-  try {
-    const resp = await xfetch(mainUrl, 'POST', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error posting uom:', error)
-    throw new Error('Failed to post uom')
-  }
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
 }
 
-export async function patchUom(id: number | string, record: any) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error putting uom:', error)
-    throw new Error('Failed to put uom')
-  }
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
 }
 
-export async function removeUom(id: number | string) {
-  try {
-    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
-    const result: any = {}
-    result.success = resp.success
-    result.body = (resp.body as Record<string, any>) || {}
-    return result
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    throw new Error('Failed to delete uom')
+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: Uom) => ({
+      value: item.code || item.erp_id,
+      label: item.name,
+    }))
   }
-}
\ No newline at end of file
+  return data
+}
diff --git a/app/types/form.ts b/app/types/form.ts
new file mode 100644
index 00000000..6941915e
--- /dev/null
+++ b/app/types/form.ts
@@ -0,0 +1,7 @@
+export interface ExposedForm<TValues = any> {
+  // eslint-disable-next-line style/member-delimiter-style
+  validate: () => Promise<{ valid: boolean; values: TValues; errors: any }> | undefined
+  resetForm: () => void
+  setValues: (values: any, shouldValidate?: boolean) => void
+  values: TValues
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 60aa40d4..5ae777c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4796,11 +4796,11 @@ packages:
     dev: true
     optional: true
 
-  /base64-js@1.5.1:
+  /my-ui64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
 
-  /baseline-browser-mapping@2.8.6:
+  /my-uiline-browser-mapping@2.8.6:
     resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==}
     hasBin: true
     dev: true
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 8266c40f..52568ebc 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -294,7 +294,11 @@
           },
           {
             "title": "Ruang",
-            "link": "/service-src/chamber"
+            "link": "/service-src/room"
+          },
+          {
+            "title": "Depo",
+            "link": "/service-src/warehouse"
           },
           {
             "title": "Lantai",
@@ -323,11 +327,11 @@
             "link": "/org-src/unit"
           },
           {
-            "title": "Specialist",
+            "title": "Spesialis",
             "link": "/org-src/specialist"
           },
           {
-            "title": "Sub Specialist",
+            "title": "Sub Spesialis",
             "link": "/org-src/subspecialist"
           }
         ]
diff --git a/server/api/v1/authentication/login.post.ts b/server/api/v1/authentication/login.post.ts
index 758c7925..70511d4d 100644
--- a/server/api/v1/authentication/login.post.ts
+++ b/server/api/v1/authentication/login.post.ts
@@ -6,7 +6,10 @@ export default defineEventHandler(async (event) => {
   const config = useRuntimeConfig()
 
   const apiOrigin = config.public.API_ORIGIN
-  const externalUrl = apiOrigin + url.pathname.replace(/^\/api/, '') + url.search
+
+  const cleanOrigin = apiOrigin.replace(/\/+$/, '')
+  const cleanPath = url.pathname.replace(/^\/api\//, '').replace(/^\/+/, '')
+  const externalUrl = `${cleanOrigin}/${cleanPath}${url.search}`
 
   const resp = await fetch(externalUrl, {
     method: 'POST',
@@ -16,6 +19,7 @@ export default defineEventHandler(async (event) => {
     },
   })
 
+  console.log(resp)
   if (resp.status === 200) {
     const data = await resp.json()