diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index cab62d6e..17502027 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -174,7 +174,7 @@ body {
 }
 
 body, table, label {
-  @apply md:!text-xs 2xl:!text-sm; 
+  @apply md:!text-xs 2xl:!text-sm;
 }
 
 /* Container */
diff --git a/app/components/app/diagnose-src/entry-form.vue b/app/components/app/diagnose-src/entry-form.vue
new file mode 100644
index 00000000..3f84b2a2
--- /dev/null
+++ b/app/components/app/diagnose-src/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DiagnoseSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<DiagnoseSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: DiagnoseSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-diagnose-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/diagnose-src/list-cfg.ts b/app/components/app/diagnose-src/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/diagnose-src/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/diagnose-src/list.vue b/app/components/app/diagnose-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/diagnose-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index fd6c8da9..25bdf9d8 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -108,248 +108,246 @@ function onAddSep() {
     :initial-values="initialValues"
   >
     <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
-      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-        <div class="flex flex-col justify-between">
-          <div class="p-2">
-            <h2 class="text-md font-semibold">Data Pasien</h2>
-          </div>
-          <div class="my-2 flex gap-6 p-2 text-sm">
-            <span>
-              Sudah pernah terdaftar sebagai pasien?
-              <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
-                <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
-              </Button>
-            </span>
-            <span>
-              Belum pernah terdaftar sebagai pasien?
-              <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
-                <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
-              </Button>
-            </span>
-          </div>
-          <Block :colCount="3">
-            <Cell>
-              <Label label-for="patient_name">Nama Pasien</Label>
-              <Field id="patient_name" :errors="errors">
-                <FormField v-slot="{ componentField }" name="patient_name">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="patient_name"
-                        v-bind="componentField"
-                        disabled
-                        placeholder="Tambah data pasien terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- NIK -->
-            <Cell :cosSpan="3">
-              <Label label-for="nik">NIK</Label>
-              <Field id="nik" :errors="errors">
-                <FormField v-slot="{ componentField }" name="nik">
-                  <FormItem>
-                    <FormControl>
-                      <Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-            <Cell>
-              <Label label-for="rm">No. RM</Label>
-              <Field id="rm" :errors="errors">
-                <FormField v-slot="{ componentField }" name="rm">
-                  <FormItem>
-                    <FormControl>
-                      <Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
-          <Separator />
-
-          <div class="p-2">
-            <h2 class="text-md font-semibold">Data Kunjungan</h2>
-          </div>
-
-          <Block :colCount="3">
-            <!-- Dokter (Combobox) -->
-            <Cell :cosSpan="3">
-              <Label label-for="doctor_id">Dokter</Label>
-              <Field id="doctor_id" :errors="errors">
-                <FormField v-slot="{ componentField }" name="doctor_id">
-                  <FormItem>
-                    <FormControl>
-                      <Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Tanggal Daftar (DatePicker) -->
-            <Cell :cosSpan="3">
-              <Label label-for="register_date">Tanggal Daftar</Label>
-              <Field id="register_date" :errors="errors">
-                <FormField v-slot="{ componentField }" name="register_date">
-                  <FormItem>
-                    <FormControl>
-                      <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Jenis Pembayaran (Combobox) -->
-            <Cell :cosSpan="3">
-              <Label label-for="payment_type">Jenis Pembayaran</Label>
-              <Field id="payment_type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="payment_type">
-                  <FormItem>
-                    <FormControl>
-                      <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
-                      <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
-
-          <Block :colCount="3">
-            <Cell :cosSpan="3">
-              <Label label-for="bpjs_number">Kelompok Peserta</Label>
-              <Field id="bpjs_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="bpjs_number">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="bpjs_number"
-                        v-bind="componentField"
-                        placeholder="Pilih jenis pembayaran terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- No. Kartu BPJS -->
-            <Cell :cosSpan="3">
-              <Label label-for="bpjs_number">No. Kartu BPJS</Label>
-              <Field id="bpjs_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="bpjs_number">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="bpjs_number"
-                        v-bind="componentField"
-                        placeholder="Pilih jenis pembayaran terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Jenis SEP -->
-            <Cell :cosSpan="3">
-              <Label label-for="sep_type">Jenis SEP</Label>
-              <Field id="sep_type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_type">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
-
-          <Block :colCount="3">
-            <!-- No. SEP (input + tombol +) -->
-            <Cell :cosSpan="3">
-              <Label label-for="sep_number">No. SEP</Label>
-              <Field id="sep_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_number">
-                  <FormItem>
-                    <FormControl>
-                      <div class="flex gap-2">
-                        <Input
-                          id="sep_number"
-                          v-bind="componentField"
-                          placeholder="Tambah SEP terlebih dahulu"
-                          class="flex-1"
-                        />
-                        <Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Dokumen SEP (file) -->
-            <Cell :cosSpan="3">
-              <Label label-for="sep_file">Dokumen SEP</Label>
-              <Field id="sep_file" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_file">
-                  <FormItem>
-                    <FormControl>
-                      <div class="flex items-center gap-2">
-                        <input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
-                        <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
-                          >Pilih Berkas</Button
-                        >
-                        <Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-
-            <!-- Dokumen SIPP (file) -->
-            <Cell :cosSpan="3" labelSize="thin">
-              <Label label-for="sipp_file">Dokumen SIPP</Label>
-              <Field id="sipp_file" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sipp_file">
-                  <FormItem>
-                    <FormControl>
-                      <div class="flex items-center gap-2">
-                        <input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
-                        <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
-                          >Pilih Berkas</Button
-                        >
-                        <Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </Cell>
-          </Block>
+      <div class="flex flex-col justify-between">
+        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
+          Data Pasien
         </div>
+        <div class="flex gap-6 mb-2 2xl:mb-2">
+          <span>
+            Sudah pernah terdaftar sebagai pasien?
+            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
+              <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
+            </Button>
+          </span>
+          <span>
+            Belum pernah terdaftar sebagai pasien?
+            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
+              <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
+            </Button>
+          </span>
+        </div>
+        <Block :colCount="3">
+          <Cell>
+            <Label label-for="patient_name">Nama Pasien</Label>
+            <Field id="patient_name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="patient_name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="patient_name"
+                      v-bind="componentField"
+                      disabled
+                      placeholder="Tambah data pasien terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- NIK -->
+          <Cell :cosSpan="3">
+            <Label label-for="nik">NIK</Label>
+            <Field id="nik" :errors="errors">
+              <FormField v-slot="{ componentField }" name="nik">
+                <FormItem>
+                  <FormControl>
+                    <Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+          <Cell>
+            <Label label-for="rm">No. RM</Label>
+            <Field id="rm" :errors="errors">
+              <FormField v-slot="{ componentField }" name="rm">
+                <FormItem>
+                  <FormControl>
+                    <Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Separator class="my-4 2xl:my-5" />
+
+        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
+          Data Kunjungan
+        </div>
+        <Block :colCount="3">
+          <!-- Dokter (Combobox) -->
+          <Cell :cosSpan="3">
+            <Label label-for="doctor_id">Dokter</Label>
+            <Field id="doctor_id" :errors="errors">
+              <FormField v-slot="{ componentField }" name="doctor_id">
+                <FormItem>
+                  <FormControl>
+                    <Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Tanggal Daftar (DatePicker) -->
+          <Cell :cosSpan="3">
+            <Label label-for="register_date">Tanggal Daftar</Label>
+            <Field id="register_date" :errors="errors">
+              <FormField v-slot="{ componentField }" name="register_date">
+                <FormItem>
+                  <FormControl>
+                    <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Jenis Pembayaran (Combobox) -->
+          <Cell :cosSpan="3">
+            <Label label-for="payment_type">Jenis Pembayaran</Label>
+            <Field id="payment_type" :errors="errors">
+              <FormField v-slot="{ componentField }" name="payment_type">
+                <FormItem>
+                  <FormControl>
+                    <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
+                    <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell :cosSpan="3">
+            <Label label-for="bpjs_number">Kelompok Peserta</Label>
+            <Field id="bpjs_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="bpjs_number">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="bpjs_number"
+                      v-bind="componentField"
+                      placeholder="Pilih jenis pembayaran terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- No. Kartu BPJS -->
+          <Cell :cosSpan="3">
+            <Label label-for="bpjs_number">No. Kartu BPJS</Label>
+            <Field id="bpjs_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="bpjs_number">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="bpjs_number"
+                      v-bind="componentField"
+                      placeholder="Pilih jenis pembayaran terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Jenis SEP -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_type">Jenis SEP</Label>
+            <Field id="sep_type" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_type">
+                <FormItem>
+                  <FormControl>
+                    <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <!-- No. SEP (input + tombol +) -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_number">No. SEP</Label>
+            <Field id="sep_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_number">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex gap-2">
+                      <Input
+                        id="sep_number"
+                        v-bind="componentField"
+                        placeholder="Tambah SEP terlebih dahulu"
+                        class="flex-1"
+                      />
+                      <Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Dokumen SEP (file) -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_file">Dokumen SEP</Label>
+            <Field id="sep_file" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_file">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex items-center gap-2">
+                      <input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
+                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
+                        >Pilih Berkas</Button
+                      >
+                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Dokumen SIPP (file) -->
+          <Cell :cosSpan="3" labelSize="thin">
+            <Label label-for="sipp_file">Dokumen SIPP</Label>
+            <Field id="sipp_file" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sipp_file">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex items-center gap-2">
+                      <input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
+                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
+                        >Pilih Berkas</Button
+                      >
+                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
       </div>
     </form>
   </Form>
diff --git a/app/components/app/medical-action-src/entry-form.vue b/app/components/app/medical-action-src/entry-form.vue
new file mode 100644
index 00000000..f8bf87e4
--- /dev/null
+++ b/app/components/app/medical-action-src/entry-form.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+
+// Types
+import type { MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+import { medicalActionTypeCode } from '~/lib/constants'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const medicalActionTypeOptions = mapToComboboxOptList(medicalActionTypeCode)
+
+const emit = defineEmits<{
+  submit: [values: MedicalActionSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    type_code: '',
+  } as Partial<MedicalActionSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [typeCode, typeCodeAttrs] = defineField('type_code')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.type_code !== undefined) typeCode.value = props.values.type_code
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  typeCode.value = ''
+}
+
+function onSubmitForm() {
+  const formData: MedicalActionSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    type_code: typeCode.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medical-action-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Type Kode</Label>
+        <Field :errMessage="errors.name">
+          <Select
+            id="type_code"
+            :is-disabled="isLoading || isReadonly"
+            :items="medicalActionTypeOptions"
+            v-bind="typeCodeAttrs"
+            v-model="typeCode"
+            placeholder="Pilih medical action type"
+            :preserve-order="false"
+            class="text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medical-action-src/list-cfg.ts b/app/components/app/medical-action-src/list-cfg.ts
new file mode 100644
index 00000000..2fecde69
--- /dev/null
+++ b/app/components/app/medical-action-src/list-cfg.ts
@@ -0,0 +1,32 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama ' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medical-action-src/list.vue b/app/components/app/medical-action-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/medical-action-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/patient/_common/input-name.vue b/app/components/app/patient/_common/input-name.vue
new file mode 100644
index 00000000..db9005f1
--- /dev/null
+++ b/app/components/app/patient/_common/input-name.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+defineProps<{
+  fieldNameInput: string
+  placeholder: string
+  labelForInput: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  maxLength?: number
+  isRequired?: boolean
+}>()
+</script>
+
+<template>
+  <DE.Cell :col-span="2">
+    <DE.Label
+      :label-for="fieldNameInput"
+      :is-required="isRequired"
+    >
+      {{ labelForInput }}
+    </DE.Label>
+
+    <DE.Field
+      :id="fieldNameInput"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldNameInput"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              v-bind="componentField"
+              type="text"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/input-patient-name.vue b/app/components/app/patient/_common/input-patient-name.vue
deleted file mode 100644
index fbc57351..00000000
--- a/app/components/app/patient/_common/input-patient-name.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import Select from '~/components/pub/my-ui/form/select.vue'
-import { Input } from '~/components/pub/ui/input'
-import { cn } from '~/lib/utils'
-
-defineProps<{
-  fieldNameAlias: string
-  fieldNameInput: string
-  placeholder: string
-  labelForAlias: string
-  labelForInput: string
-  errors?: FormErrors
-  class?: string
-  selectClass?: string
-  fieldGroupClass?: string
-  labelClass?: string
-  maxLength?: number
-  isRequired?: boolean
-}>()
-
-const aliasOptions = [
-  { label: 'An', value: 'an' },
-  { label: 'By.Ny', value: 'byny' },
-  { label: 'Nn', value: 'nn' },
-  { label: 'Ny', value: 'ny' },
-  { label: 'Tn', value: 'tn' },
-]
-</script>
-
-<template>
-  <FieldGroup>
-    <Label
-      :label-for="fieldNameAlias"
-      :is-required="isRequired"
-    >
-      {{ labelForAlias }}
-    </Label>
-
-    <Field
-      :id="fieldNameAlias"
-      :errors="errors"
-    >
-      <FormField
-        v-slot="{ componentField }"
-        :name="fieldNameAlias"
-      >
-        <FormItem>
-          <FormControl>
-            <Select
-              :id="fieldNameAlias"
-              :preserve-order="false"
-              v-bind="componentField"
-              :auto-width="true"
-              :items="aliasOptions"
-              :class="
-                cn(
-                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
-                  selectClass,
-                )
-              "
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      </FormField>
-    </Field>
-  </FieldGroup>
-  <FieldGroup>
-    <Label
-      :label-for="fieldNameInput"
-      :is-required="isRequired"
-    >
-      {{ labelForInput }}
-    </Label>
-
-    <Field
-      :id="fieldNameInput"
-      :errors="errors"
-    >
-      <FormField
-        v-slot="{ componentField }"
-        :name="fieldNameInput"
-      >
-        <FormItem>
-          <FormControl>
-            <Input
-              v-bind="componentField"
-              type="text"
-              :placeholder="placeholder"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      </FormField>
-    </Field>
-  </FieldGroup>
-</template>
diff --git a/app/components/app/patient/_common/radio-communication-barrier.vue b/app/components/app/patient/_common/radio-communication-barrier.vue
index 463b3659..56918101 100644
--- a/app/components/app/patient/_common/radio-communication-barrier.vue
+++ b/app/components/app/patient/_common/radio-communication-barrier.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -35,18 +34,19 @@ const genderOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
-    >
+      class="pt-0.5"
+      >
       <FormField
         v-slot="{ componentField }"
         :name="fieldName"
@@ -67,7 +67,7 @@ const genderOptions = [
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -76,7 +76,7 @@ const genderOptions = [
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none font-normal text-xs leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
                       labelClass,
                     )
                   "
@@ -89,6 +89,6 @@ const genderOptions = [
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-disability.vue b/app/components/app/patient/_common/radio-disability.vue
index 312c3730..6c1464e2 100644
--- a/app/components/app/patient/_common/radio-disability.vue
+++ b/app/components/app/patient/_common/radio-disability.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -35,17 +34,18 @@ const dissabilityOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
+      class="pt-0.5"
     >
       <FormField
         v-slot="{ componentField }"
@@ -67,7 +67,7 @@ const dissabilityOptions = [
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -76,7 +76,7 @@ const dissabilityOptions = [
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
                       labelClass,
                     )
                   "
@@ -89,6 +89,6 @@ const dissabilityOptions = [
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-gender.vue b/app/components/app/patient/_common/radio-gender.vue
index 108b1d22..47968c8f 100644
--- a/app/components/app/patient/_common/radio-gender.vue
+++ b/app/components/app/patient/_common/radio-gender.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { genderCodes } from '~/lib/constants'
 import { cn, mapToComboboxOptList } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -33,15 +32,15 @@ const genderOptions = mapToComboboxOptList(genderCodes)
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="4">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
     >
@@ -65,7 +64,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -74,7 +73,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none text-xs 2xl:text-sm leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 !font-normal',
                       labelClass,
                     )
                   "
@@ -87,6 +86,6 @@ const genderOptions = mapToComboboxOptList(genderCodes)
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-nationality.vue b/app/components/app/patient/_common/radio-nationality.vue
index 9c0eef1d..40525dff 100644
--- a/app/components/app/patient/_common/radio-nationality.vue
+++ b/app/components/app/patient/_common/radio-nationality.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -35,17 +34,18 @@ const nationalityOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('radio-group-field', containerClass)">
-    <Label
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
       height="compact"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
+      class="pt-0.5"
     >
       <FormField
         v-slot="{ componentField }"
@@ -67,7 +67,7 @@ const nationalityOptions = [
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
@@ -76,7 +76,7 @@ const nationalityOptions = [
                   :for="`${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
                       labelClass,
                     )
                   "
@@ -89,6 +89,6 @@ const nationalityOptions = [
           <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/radio-newborn.vue b/app/components/app/patient/_common/radio-newborn.vue
new file mode 100644
index 00000000..86953443
--- /dev/null
+++ b/app/components/app/patient/_common/radio-newborn.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'isNewBorn',
+  label = 'Status Pasien',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const newbornOptions = [
+  { label: 'Ya', value: 'YA' },
+  { label: 'Tidak', value: 'TIDAK' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in newbornOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2 pt-1', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-disability.vue b/app/components/app/patient/_common/select-disability.vue
index de65a07f..6058773a 100644
--- a/app/components/app/patient/_common/select-disability.vue
+++ b/app/components/app/patient/_common/select-disability.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -40,14 +39,14 @@ const disabilityOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       label-for="fieldName"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -76,6 +75,6 @@ const disabilityOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-dob.vue b/app/components/app/patient/_common/select-dob.vue
index 938bd254..eee11acc 100644
--- a/app/components/app/patient/_common/select-dob.vue
+++ b/app/components/app/patient/_common/select-dob.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
 import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -76,15 +75,15 @@ function calculateAge(birthDate: string | Date | undefined): string {
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -113,12 +112,11 @@ function calculateAge(birthDate: string | Date | undefined): string {
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
-  <FieldGroup>
-    <Label label-for="patientAge">Usia</Label>
-
-    <Field id="patientAge">
+    </DE.Field>
+  </DE.Cell>
+  <DE.Cell>
+    <DE.Label label-for="patientAge">Usia</DE.Label>
+    <DE.Field id="patientAge">
       <FormField name="patientAge">
         <FormItem>
           <FormControl>
@@ -137,6 +135,6 @@ function calculateAge(birthDate: string | Date | undefined): string {
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-education.vue b/app/components/app/patient/_common/select-education.vue
index 33caac16..848ed614 100644
--- a/app/components/app/patient/_common/select-education.vue
+++ b/app/components/app/patient/_common/select-education.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { educationCodes } from '~/lib/constants'
 import { cn, mapToComboboxOptList } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -46,15 +45,15 @@ const educationOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired && !isDisabled"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -83,6 +82,6 @@ const educationOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-ethnicity.vue b/app/components/app/patient/_common/select-ethnicity.vue
index e1ecd08a..43ef6cba 100644
--- a/app/components/app/patient/_common/select-ethnicity.vue
+++ b/app/components/app/patient/_common/select-ethnicity.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
 import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -49,15 +48,15 @@ const ethnicOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired && !isDisabled"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -81,6 +80,6 @@ const ethnicOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-gender.vue b/app/components/app/patient/_common/select-gender.vue
new file mode 100644
index 00000000..dfedf9ec
--- /dev/null
+++ b/app/components/app/patient/_common/select-gender.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const {
+  fieldName = 'disabilityType',
+  placeholder = 'Pilih jenis disabilitas',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+} = props
+
+const disabilityOptions = [
+  { label: 'Laki', value: 'male' },
+  { label: 'Perempuan', value: 'female' },
+  { label: 'Tidak Disebutkan', value: 'not-stated' },
+  { label: 'Tidak Diketahui', value: 'unknown' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="disabilityOptions"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-job.vue b/app/components/app/patient/_common/select-job.vue
index b14cbb66..814eb7ca 100644
--- a/app/components/app/patient/_common/select-job.vue
+++ b/app/components/app/patient/_common/select-job.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
 import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import { cn } from '~/lib/utils'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
   fieldName?: string
@@ -28,106 +28,20 @@ const {
   labelClass,
 } = props
 
-const jobOptions = [
-  { label: 'Tidak diketahui', value: 'unknown', priority: 100 },
-  { label: 'Belum/Tidak Bekerja', value: 'tidak_bekerja', priority: 99 },
-  { label: 'Mengurus Rumah Tangga', value: 'mengurus_rumah_tangga' },
-  { label: 'Pelajar/Mahasiswa', value: 'pelajar' },
-  { label: 'Pensiunan', value: 'pensiunan' },
-  { label: 'Pegawai Negeri Sipil', value: 'pns' },
-  { label: 'Tentara Nasional Indonesia', value: 'tni' },
-  { label: 'Kepolisian RI', value: 'polri' },
-  { label: 'Perdagangan', value: 'perdagangan' },
-  { label: 'Petani/Pekebun', value: 'petani' },
-  { label: 'Peternak', value: 'peternak' },
-  { label: 'Nelayan/Perikanan', value: 'nelayan' },
-  { label: 'Industri', value: 'industri' },
-  { label: 'Konstruksi', value: 'konstruksi' },
-  { label: 'Transportasi', value: 'transportasi' },
-  { label: 'Karyawan Swasta', value: 'karyawan_swasta' },
-  { label: 'Karyawan BUMN', value: 'karyawan_bumn' },
-  { label: 'Karyawan BUMD', value: 'karyawan_bumd' },
-  { label: 'Karyawan Honorer', value: 'karyawan_honorer' },
-  { label: 'Buruh Harian Lepas', value: 'buruh_harian' },
-  { label: 'Buruh Tani/Perkebunan', value: 'buruh_tani' },
-  { label: 'Buruh Nelayan/Perikanan', value: 'buruh_nelayan' },
-  { label: 'Buruh Peternakan', value: 'buruh_peternakan' },
-  { label: 'Pembantu Rumah Tangga', value: 'pembantu_rumah_tangga' },
-  { label: 'Tukang Cukur', value: 'tukang_cukur' },
-  { label: 'Tukang Listrik', value: 'tukang_listrik' },
-  { label: 'Tukang Batu', value: 'tukang_batu' },
-  { label: 'Tukang Kayu', value: 'tukang_kayu' },
-  { label: 'Tukang Sol Sepatu', value: 'tukang_sol_sepatu' },
-  { label: 'Tukang Jahit', value: 'tukang_jahit' },
-  { label: 'Tukang Gigi', value: 'tukang_gigi' },
-  { label: 'Penata Rias', value: 'penata_rias' },
-  { label: 'Penata Busana', value: 'penata_busana' },
-  { label: 'Penata Rambut', value: 'penata_rambut' },
-  { label: 'Mekanik', value: 'mekanik' },
-  { label: 'Seniman', value: 'seniman' },
-  { label: 'Tabib', value: 'tabib' },
-  { label: 'Paraji', value: 'paraji' },
-  { label: 'Perancang Busana', value: 'perancang_busana' },
-  { label: 'Penterjemah', value: 'penterjemah' },
-  { label: 'Imam Mesjid', value: 'imam_mesjid' },
-  { label: 'Pendeta', value: 'pendeta' },
-  { label: 'Pastor', value: 'pastor' },
-  { label: 'Wartawan', value: 'wartawan' },
-  { label: 'Ustadz/Mubaligh', value: 'ustadz' },
-  { label: 'Juru Masak', value: 'juru_masak' },
-  { label: 'Promotor Acara', value: 'promotor' },
-  { label: 'Anggota DPR-RI', value: 'dpr_ri' },
-  { label: 'Anggota DPD', value: 'dpd' },
-  { label: 'Anggota BPK', value: 'bpk' },
-  { label: 'Presiden', value: 'presiden' },
-  { label: 'Wakil Presiden', value: 'wakil_presiden' },
-  { label: 'Anggota Mahkamah Konstitusi', value: 'mk' },
-  { label: 'Anggota Kabinet/Kementrian', value: 'kabinet' },
-  { label: 'Duta Besar', value: 'dubes' },
-  { label: 'Gubernur', value: 'gubernur' },
-  { label: 'Wakil Gubernur', value: 'wakil_gubernur' },
-  { label: 'Bupati', value: 'bupati' },
-  { label: 'Wakil Bupati', value: 'wakil_bupati' },
-  { label: 'Walikota', value: 'walikota' },
-  { label: 'Wakil Walikota', value: 'wakil_walikota' },
-  { label: 'Anggota DPRD Provinsi', value: 'dprd_provinsi' },
-  { label: 'Anggota DPRD Kabupaten/Kota', value: 'dprd_kabkota' },
-  { label: 'Dosen', value: 'dosen' },
-  { label: 'Guru', value: 'guru' },
-  { label: 'Pilot', value: 'pilot' },
-  { label: 'Pengacara', value: 'pengacara' },
-  { label: 'Arsitek', value: 'arsitek' },
-  { label: 'Akuntan', value: 'akuntan' },
-  { label: 'Konsultan', value: 'konsultan' },
-  { label: 'Dokter', value: 'dokter' },
-  { label: 'Bidan', value: 'bidan' },
-  { label: 'Apoteker', value: 'apoteker' },
-  { label: 'Psikiater/Psikolog', value: 'psikolog' },
-  { label: 'Penyiar Televisi', value: 'penyiar_tv' },
-  { label: 'Penyiar Radio', value: 'penyiar_radio' },
-  { label: 'Pelaut', value: 'pelaut' },
-  { label: 'Sopir', value: 'sopir' },
-  { label: 'Pialang', value: 'pialang' },
-  { label: 'Paranormal', value: 'paranormal' },
-  { label: 'Pedagang', value: 'pedagang' },
-  { label: 'Perangkat Desa', value: 'perangkat_desa' },
-  { label: 'Kepala Desa', value: 'kepala_desa' },
-  { label: 'Biarawati', value: 'biarawati' },
-  { label: 'Wiraswasta', value: 'wiraswasta' },
-  { label: 'Lainnya', value: 'lainnya', priority: -100 },
-]
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -150,6 +64,6 @@ const jobOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-lang.vue b/app/components/app/patient/_common/select-lang.vue
index aadf9313..ce5bbac8 100644
--- a/app/components/app/patient/_common/select-lang.vue
+++ b/app/components/app/patient/_common/select-lang.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -41,15 +40,15 @@ const langOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -77,6 +76,6 @@ const langOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-marital-status.vue b/app/components/app/patient/_common/select-marital-status.vue
index cb3b56fb..21ebf0c2 100644
--- a/app/components/app/patient/_common/select-marital-status.vue
+++ b/app/components/app/patient/_common/select-marital-status.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -37,15 +36,15 @@ const maritalStatusOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -73,6 +72,6 @@ const maritalStatusOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/_common/select-religion.vue b/app/components/app/patient/_common/select-religion.vue
index 069e3575..6a1fec66 100644
--- a/app/components/app/patient/_common/select-religion.vue
+++ b/app/components/app/patient/_common/select-religion.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { religionCodes } from '~/lib/constants'
 import { cn, mapToComboboxOptList } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName?: string
   label?: string
@@ -45,15 +44,15 @@ const religionOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -81,6 +80,6 @@ const religionOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index e3587988..a83189c2 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -3,12 +3,14 @@ import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Form } from '~/components/pub/ui/form'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
-import InputFile from './_common/input-file.vue'
-import InputPatientName from './_common/input-patient-name.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
+import InputName from './_common/input-name.vue'
 import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
 import RadioDisability from './_common/radio-disability.vue'
-import RadioGender from './_common/radio-gender.vue'
+import SelectGender from './_common/select-gender.vue'
 import RadioNationality from './_common/radio-nationality.vue'
+import RadioNewborn from './_common/radio-newborn.vue'
+import SelectBirthPlace from '~/components/app/person/_common/select-birth-place.vue'
 import SelectDisability from './_common/select-disability.vue'
 import SelectDob from './_common/select-dob.vue'
 import SelectEducation from './_common/select-education.vue'
@@ -17,6 +19,9 @@ import SelectJob from './_common/select-job.vue'
 import SelectLanguage from './_common/select-lang.vue'
 import SelectMaritalStatus from './_common/select-marital-status.vue'
 import SelectReligion from './_common/select-religion.vue'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
   schema: any
@@ -46,180 +51,161 @@ defineExpose({
     validation-mode="onSubmit"
     :initial-values="initialValues ? initialValues : {}"
   >
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Data Diri Pasien</p>
-      <div class="grid grid-cols-1 md:grid-cols-[150px_1fr]">
-        <InputPatientName
-          field-name-alias="alias"
-          field-name-input="fullName"
-          label-for-alias="Alias"
-          label-for-input="Nama Lengkap"
-          placeholder="Masukkan nama lengkap pasien"
-          :errors="errors"
-          is-required
-        />
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <InputBase
-          field-name="birthPlace"
-          label="Tempat Lahir"
-          placeholder="Malang"
-          :errors="errors"
-          is-required
-        />
-        <SelectDob
-          label="Tanggal Lahir"
-          :errors="errors"
-          is-required
-        />
-      </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-        <RadioGender
-          field-name="gender"
-          label="Jenis Kelamin"
-          placeholder="Pilih jenis kelamin"
-          :errors="errors"
-          is-required
-        />
-        <RadioNationality
-          field-name="nationality"
-          label="Kebangsaan"
-          placeholder="Pilih kebangsaan"
-          :errors="errors"
-          is-required
-        />
-      </div>
-    </div>
+    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Data Diri Pasien</p>
+    <DE.Block :col-count="4" :cell-flex="false">
+      <InputBase
+        field-name="identityNumber"
+        label="No. KTP"
+        placeholder="Masukkan NIK"
+        :errors="errors"
+        numeric-only
+      />
+      <InputBase
+        field-name="drivingLicenseNumber"
+        label="No. SIM"
+        placeholder="Masukkan nomor SIM"
+        numeric-only
+        :max-length="20"
+        :errors="errors"
+      />
+      <InputBase
+        field-name="passportNumber"
+        label="No. Paspor"
+        placeholder="Masukkan nomor paspor"
+        :max-length="20"
+        :errors="errors"
+      />
+      <InputName
+        field-name-alias="alias"
+        field-name-input="fullName"
+        label-for-input="Nama Lengkap"
+        placeholder="Masukkan nama lengkap pasien"
+        :errors="errors"
+        is-required
+      />
+      <RadioNewborn
+        field-name="isNewBorn"
+        label="Pasien Bayi"
+        placeholder="Pilih status pasien"
+        :errors="errors"
+        is-required
+      />
+      <SelectGender
+        field-name="gender"
+        label="Jenis Kelamin"
+        placeholder="Pilih jenis kelamin"
+        :errors="errors"
+        is-required
+      />
+      <SelectBirthPlace
+        field-name="birthPlace"
+        label="Tempat Lahir"
+        placeholder="Pilih tempat lahir"
+        :errors="errors"
+        is-required
+      />
+      <SelectDob
+        label="Tanggal Lahir"
+        :errors="errors"
+        is-required
+      />
+      <SelectEducation
+        field-name="education"
+        label="Pendidikan"
+        placeholder="Pilih pendidikan"
+        :errors="errors"
+        is-required
+      />
+      <SelectJob
+        field-name="job"
+        label="Pekerjaan"
+        placeholder="Pilih pekerjaan"
+        :errors="errors"
+        is-required
+      />
+      <SelectMaritalStatus
+        field-name="maritalStatus"
+        label="Status Perkawinan"
+        placeholder="Pilih status Perkawinan"
+        :errors="errors"
+        is-required
+      />
+      <DE.Cell />
+      <RadioNationality
+        field-name="nationality"
+        label="Kebangsaan"
+        placeholder="Pilih kebangsaan"
+        :errors="errors"
+        is-required
+      />
+      <SelectEthnicity
+        field-name="ethnicity"
+        label="Suku"
+        placeholder="Pilih suku bangsa"
+        :errors="errors"
+        :is-disabled="values.nationality !== 'WNI'"
+      />
+      <SelectLanguage
+        field-name="language"
+        label="Bahasa"
+        placeholder="Pilih preferensi bahasa"
+        :errors="errors"
+        is-required
+      />
+      <SelectReligion
+        field-name="religion"
+        label="Agama"
+        placeholder="Pilih agama"
+        :errors="errors"
+        is-required
+      />
+      <RadioCommunicationBarrier
+        field-name="communicationBarrier"
+        label="Hambatan Berkomunikasi"
+        :errors="errors"
+        is-required
+      />
+      <RadioDisability
+        field-name="disability"
+        label="Disabilitas"
+        :errors="errors"
+        is-required
+      />
+      <SelectDisability
+        label="Jenis Disabilitas"
+        field-name="disabilityType"
+        :errors="errors"
+        :is-disabled="values.disability !== 'YA'"
+        :is-required="values.disability === 'YA'"
+      />
+      <InputBase
+        field-name="note"
+        label="Kepercayaan"
+        placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
+        :errors="errors"
+      />
+    </DE.Block>
 
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Dokumen Identitas</p>
+    <div class="h-6"></div>
 
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <InputBase
-          field-name="identityNumber"
-          label="No. KTP"
-          placeholder="Masukkan NIK"
-          :errors="errors"
-          numeric-only
-          :max-length="16"
-          is-required
-        />
-        <InputBase
-          field-name="drivingLicenseNumber"
-          label="No. SIM"
-          placeholder="Masukkan nomor SIM"
-          numeric-only
-          :max-length="20"
-          :errors="errors"
-        />
-
-        <InputBase
-          field-name="passportNumber"
-          label="No. Paspor"
-          placeholder="Masukkan nomor paspor"
-          :max-length="20"
-          :errors="errors"
-        />
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-2">
-        <InputFile
-          field-name="identityCardFile"
-          label="Dokumen KTP"
-          placeholder="Unggah scan dokumen KTP"
-          :errors="errors"
-        />
-        <InputFile
-          field-name="familyCardFile"
-          label="Dokumen KK"
-          placeholder="Unggah scan dokumen KK"
-          :errors="errors"
-        />
-      </div>
-    </div>
-
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Data Demografis</p>
-
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <SelectReligion
-          field-name="religion"
-          label="Agama"
-          placeholder="Pilih agama"
-          :errors="errors"
-          is-required
-        />
-        <SelectEthnicity
-          field-name="ethnicity"
-          label="Suku"
-          placeholder="Pilih suku bangsa"
-          :errors="errors"
-          :is-disabled="values.nationality !== 'WNI'"
-        />
-        <SelectLanguage
-          field-name="language"
-          label="Bahasa"
-          placeholder="Pilih preferensi bahasa"
-          :errors="errors"
-          is-required
-        />
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <SelectMaritalStatus
-          field-name="maritalStatus"
-          label="Status Perkawinan"
-          placeholder="Pilih status Perkawinan"
-          :errors="errors"
-          is-required
-        />
-        <SelectEducation
-          field-name="education"
-          label="Pendidikan"
-          placeholder="Pilih pendidikan"
-          :errors="errors"
-          is-required
-        />
-        <SelectJob
-          field-name="job"
-          label="Pekerjaan"
-          placeholder="Pilih pekerjaan"
-          :errors="errors"
-          is-required
-        />
-      </div>
-    </div>
-
-    <div class="mb-3 border-b border-b-slate-300">
-      <p class="text-md mt-1 font-semibold">Kondisi Khusus</p>
-      <div class="grid grid-cols-1 md:grid-cols-3">
-        <RadioCommunicationBarrier
-          field-name="communicationBarrier"
-          label="Hambatan Berkomunikasi"
-          :errors="errors"
-          is-required
-        />
-        <div class="cols-span-1">
-          <RadioDisability
-            field-name="disability"
-            label="Disabilitas"
-            :errors="errors"
-            is-required
-          />
-          <SelectDisability
-            label="Jenis Disabilitas"
-            field-name="disabilityType"
-            :errors="errors"
-            :is-disabled="values.disability !== 'YA'"
-            :is-required="values.disability === 'YA'"
-          />
-        </div>
-
-        <InputBase
-          field-name="note"
-          label="Kepercayaan"
-          placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
-          :errors="errors"
-        />
-      </div>
-    </div>
+    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Dokumen Identitas</p>
+    <DE.Block :col-count="2" :cell-flex="false">
+      <FileUpload
+        field-name="identityCardFile"
+        label="Dokumen KTP"
+        placeholder="Unggah scan dokumen KTP"
+        :errors="errors"
+        :accept="['pdf', 'jpg', 'png']"
+        :max-size-mb="1"
+      />
+      <FileUpload
+        field-name="familyCardFile"
+        label="Dokumen KK"
+        placeholder="Unggah scan dokumen KK"
+        :errors="errors"
+        :accept="['pdf', 'jpg', 'png']"
+        :max-size-mb="1"
+      />
+    </DE.Block>
   </Form>
 </template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index e8d2b220..559428a7 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -1,5 +1,5 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
-import type { PatientEntity } from '~/models/patient'
+import type { Patient } from '~/models/patient'
 import { defineAsyncComponent } from 'vue'
 import { educationCodes, genderCodes } from '~/lib/constants'
 import { calculateAge } from '~/lib/utils'
@@ -11,8 +11,9 @@ export const config: Config = {
 
   headers: [
     [
+      { label: 'ID' },
       { label: 'Nama' },
-      { label: 'NIK' },
+      { label: 'NIK/No. Paspor' },
       { label: 'Tgl Lahir' },
       { label: 'Umur' },
       { label: 'Jenis Kelamin' },
@@ -21,15 +22,7 @@ export const config: Config = {
     ],
   ],
 
-  keys: [
-    'name',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'action',
-  ],
+  keys: ['patientId', 'name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -37,33 +30,41 @@ export const config: Config = {
   ],
 
   parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
     name: (rec: unknown): unknown => {
-      const { person } = rec as PatientEntity
+      const { person } = rec as Patient
       return person.name.trim()
     },
     identity_number: (rec: unknown): unknown => {
-      const { person } = rec as PatientEntity
-      if (person?.residentIdentityNumber?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
       }
-      return person.residentIdentityNumber
+
+      return person.residentIdentityNumber || '-'
     },
     birth_date: (rec: unknown): unknown => {
-      const { person } = rec as PatientEntity
-      if (typeof person.birthDate === 'object' && person.birthDate) {
-        return (person.birthDate as Date).toLocaleDateString()
-      } else if (typeof person.birthDate === 'string') {
-        return person.birthDate.substring(0, 10)
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
       }
       return person.birthDate
     },
     patient_age: (rec: unknown): unknown => {
-      const { person } = rec as PatientEntity
+      const { person } = rec as Patient
       return calculateAge(person.birthDate)
     },
     gender: (rec: unknown): unknown => {
-      const { person } = rec as PatientEntity
-      if (typeof person.gender_code === 'number' && person.gender_code >= 0) {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
         return person.gender_code
       } else if (typeof person.gender_code === 'string' && person.gender_code) {
         return genderCodes[person.gender_code] || '-'
@@ -71,8 +72,8 @@ export const config: Config = {
       return '-'
     },
     education: (rec: unknown): unknown => {
-      const { person } = rec as PatientEntity
-      if (typeof person.education_code === 'number' && person.education_code >= 0) {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
         return person.education_code
       } else if (typeof person.education_code === 'string' && person.education_code) {
         return educationCodes[person.education_code] || '-'
diff --git a/app/components/app/patient/list.cfg.ts b/app/components/app/patient/list.cfg.ts
new file mode 100644
index 00000000..d86c8dc1
--- /dev/null
+++ b/app/components/app/patient/list.cfg.ts
@@ -0,0 +1,96 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
+
+  headers: [
+    [
+      { label: 'No. RM' },
+      { label: 'Nama' },
+      { label: 'No. KTP/SIM/Passpor' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'Kelamin' },
+      { label: 'Pendidikan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['number', 'person.name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index c12f409f..8274e752 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
-import { config } from './list-cfg'
+import { config } from './list.cfg'
 
 interface Props {
   data: any[]
diff --git a/app/components/app/patient/picker.vue b/app/components/app/patient/picker.vue
index 78d417ca..be8c7160 100644
--- a/app/components/app/patient/picker.vue
+++ b/app/components/app/patient/picker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { config } from './list-cfg'
+import { config } from './list.cfg'
 
 defineProps<{ data: any[] }>()
 const modelValue = defineModel<any | null>()
diff --git a/app/components/app/patient/preview.vue b/app/components/app/patient/preview.vue
index ec3d8b6d..03ec65fb 100644
--- a/app/components/app/patient/preview.vue
+++ b/app/components/app/patient/preview.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import type { Person } from '~/models/person'
-import type { PersonAddress } from '~/models/person-address'
-import type { PersonContact } from '~/models/person-contact'
-import type { PersonRelative } from '~/models/person-relative'
-
+import type { Patient } from '~/models/patient'
 import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
 import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue'
+import { formatAddress } from '~/models/person-address'
 
-import { educationCodes, genderCodes, personContactTypes, relationshipCodes, religionCodes } from '~/lib/constants'
+import {
+  addressLocationTypeCode,
+  educationCodes,
+  genderCodes,
+  occupationCodes,
+  personContactTypes,
+  relationshipCodes,
+  religionCodes,
+} from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'
 
 // #region Props & Emits
 const props = defineProps<{
-  person: Person
-  personAddresses: PersonAddress[]
-  personContacts: PersonContact[]
-  personRelatives: PersonRelative[]
+  patient: Patient
 }>()
 
 const emit = defineEmits<{
@@ -28,17 +30,28 @@ const emit = defineEmits<{
 const genderOptions = mapToComboboxOptList(genderCodes)
 const religionOptions = mapToComboboxOptList(religionCodes)
 const educationOptions = mapToComboboxOptList(educationCodes)
+const occupationOptions = mapToComboboxOptList(occupationCodes)
 const relationshipOptions = mapToComboboxOptList(relationshipCodes)
 const personContactTypeOptions = mapToComboboxOptList(personContactTypes)
 
-const residentAddress = 'Jl. Puncak Borobudur Blok M No. 321, Lowokwaru, Kota Malang, Jawa Timur'
-const primaryAddress = 'Perumahan Araya Cluster B, No 22, Blimbing, Kota Malang, Jawa Timur'
+// Computed addresses from nested data
+const domicileAddress = computed(() => {
+  const addresses = props.patient.person.addresses
+  const resident = addresses?.find((addr) => addr.locationType_code === 'domicile')
+  return formatAddress(resident)
+})
+
+const identityAddress = computed(() => {
+  const addresses = props.patient.person.addresses
+  const primary = addresses?.find((addr) => addr.locationType_code === 'identity')
+  return formatAddress(primary)
+})
 
 const patientAge = computed(() => {
-  if (!props.person.birthDate) {
+  if (!props.patient.person.birthDate) {
     return '-'
   }
-  const birthDate = new Date(props.person.birthDate)
+  const birthDate = new Date(props.patient.person.birthDate)
   const today = new Date()
   let age = today.getFullYear() - birthDate.getFullYear()
   const monthDiff = today.getMonth() - birthDate.getMonth()
@@ -53,6 +66,7 @@ const patientAge = computed(() => {
 // #endregion
 
 // #region Functions
+
 // #endregion region
 
 // #region Utilities & event handlers
@@ -67,48 +81,53 @@ function onClick(type: string) {
 
 <template>
   <DetailSection title="Data Pasien">
-    <DetailRow label="Nomor ID">{{ person.id || '-' }}</DetailRow>
-    <DetailRow label="Sapaan">{{ person.alias || '-' }}</DetailRow>
-    <DetailRow label="Nama Lengkap">{{ person.name || '-' }}</DetailRow>
+    <DetailRow label="Nomor">{{ patient.number || '-' }}</DetailRow>
+    <DetailRow label="Nama Lengkap">{{ patient.person.name || '-' }}</DetailRow>
     <DetailRow label="Tempat, tanggal lahir">
-      {{ person.birthRegency_code || '-' }},
-      {{ person.birthDate ? new Date(person.birthDate).toLocaleDateString() : '-' }}
+      {{ patient.person.birthRegency?.name || '-' }},
+      {{ patient.person.birthDate ? new Date(patient.person.birthDate).toLocaleDateString('id-ID') : '-' }}
     </DetailRow>
-    <DetailRow label="Usia">{{ patientAge || '-' }}</DetailRow>
+    <DetailRow label="Usia">{{ patientAge || '-' }} Tahun</DetailRow>
     <DetailRow label="Tanggal Daftar">
-      {{ person.createdAt ? new Date(person.createdAt).toLocaleDateString() : '-' }}
+      {{ patient.person.createdAt ? new Date(patient.person.createdAt).toLocaleDateString('id-ID') : '-' }}
     </DetailRow>
     <DetailRow label="Jenis Kelamin">
-      {{ genderOptions.find((item) => item.code === person.gender_code)?.label || '-' }}
+      {{ genderOptions.find((item) => item.code === patient.person.gender_code)?.label || '-' }}
     </DetailRow>
 
-    <DetailRow label="NIK">{{ person.residentIdentityNumber || '-' }}</DetailRow>
-    <DetailRow label="No. SIM">{{ person.drivingLicenseNumber || '-' }}</DetailRow>
-    <DetailRow label="No. Paspor">{{ person.passportNumber || '-' }}</DetailRow>
+    <DetailRow label="NIK">{{ patient.person.residentIdentityNumber || '-' }}</DetailRow>
+    <DetailRow label="No. SIM">{{ patient.person.drivingLicenseNumber || '-' }}</DetailRow>
+    <DetailRow label="No. Paspor">{{ patient.person.passportNumber || '-' }}</DetailRow>
 
     <DetailRow label="Agama">
-      {{ religionOptions.find((item) => item.code === person.religion_code)?.label || '-' }}
+      {{ religionOptions.find((item) => item.code === patient.person.religion_code)?.label || '-' }}
     </DetailRow>
-    <DetailRow label="Suku">{{ person.ethnic_code || '-' }}</DetailRow>
-    <DetailRow label="Bahasa">{{ person.language_code || '-' }}</DetailRow>
+    <DetailRow label="Suku">{{ patient.person.ethnic?.name || '-' }}</DetailRow>
+    <DetailRow label="Bahasa">{{ patient.person.language?.name || '-' }}</DetailRow>
     <DetailRow label="Pendidikan">
-      {{ educationOptions.find((item) => item.code === person.education_code)?.label || '-' }}
+      {{ educationOptions.find((item) => item.code === patient.person.education_code)?.label || '-' }}
+    </DetailRow>
+    <DetailRow label="Pekerjaan">
+      {{
+        occupationOptions.find((item) => item.code === patient.person.occupation_code)?.label ||
+        patient.person.occupation_name ||
+        '-'
+      }}
     </DetailRow>
-    <DetailRow label="Pekerjaan">{{ person.occupation_name || '-' }}</DetailRow>
   </DetailSection>
 
   <DetailSection title="Alamat">
-    <DetailRow label="Alamat Domisili">{{ residentAddress || '-' }}</DetailRow>
-    <DetailRow label="Alamat KTP">{{ primaryAddress || '-' }}</DetailRow>
+    <DetailRow :label="addressLocationTypeCode.domicile || 'Alamat Domisili'">{{ domicileAddress || '-' }}</DetailRow>
+    <DetailRow :label="addressLocationTypeCode.identity || 'Alamat KTP'">{{ identityAddress || '-' }}</DetailRow>
   </DetailSection>
   <DetailSection title="Kontak">
-    <template v-if="personContacts && personContacts.length > 0">
+    <template v-if="patient.person.contacts && patient.person.contacts.length > 0">
       <template
         v-for="contactType in personContactTypeOptions"
         :key="contactType.code"
       >
         <DetailRow :label="contactType.label">
-          {{ personContacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
+          {{ patient.person.contacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
         </DetailRow>
       </template>
     </template>
@@ -116,10 +135,10 @@ function onClick(type: string) {
       <DetailRow label="Kontak">-</DetailRow>
     </template>
   </DetailSection>
-  <DetailSection title="Penanggung Jawab">
-    <template v-if="personRelatives && personRelatives.filter((rel) => rel.responsible).length > 0">
+  <DetailSection title="Orang Tua">
+    <template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => !rel.responsible).length > 0">
       <template
-        v-for="(relative, index) in personRelatives.filter((rel) => rel.responsible)"
+        v-for="(relative, index) in patient.person.relatives.filter((rel) => !rel.responsible)"
         :key="relative.id"
       >
         <div
@@ -130,13 +149,41 @@ function onClick(type: string) {
         <DetailRow label="Hubungan">
           {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
         </DetailRow>
-        <DetailRow label="Jenis Kelamin">
+        <!-- <DetailRow label="Jenis Kelamin">
           {{ genderOptions.find((item) => item.code === relative.gender_code)?.label || '-' }}
-        </DetailRow>
+        </DetailRow> -->
         <DetailRow label="Pendidikan">
           {{ educationOptions.find((item) => item.code === relative.education_code)?.label || '-' }}
         </DetailRow>
-        <DetailRow label="Pekerjaan">{{ relative.occupation_name || '-' }}</DetailRow>
+        <DetailRow label="Pekerjaan">
+          {{
+            occupationOptions.find((item) => item.code === relative.occupation_code)?.label ||
+            relative.occupation_name ||
+            '-'
+          }}
+        </DetailRow>
+        <!-- <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow> -->
+        <!-- <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow> -->
+      </template>
+    </template>
+    <template v-else>
+      <DetailRow label="Orang Tua">-</DetailRow>
+    </template>
+  </DetailSection>
+  <DetailSection title="Penanggung Jawab">
+    <template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => rel.responsible).length > 0">
+      <template
+        v-for="(relative, index) in patient.person.relatives.filter((rel) => rel.responsible)"
+        :key="relative.id"
+      >
+        <div
+          v-if="index > 0"
+          class="mt-3 border-t border-gray-200 pt-3"
+        ></div>
+        <DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow>
+        <DetailRow label="Hubungan">
+          {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
+        </DetailRow>
         <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow>
         <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow>
       </template>
diff --git a/app/components/app/person-address/_common/select-district.vue b/app/components/app/person-address/_common/select-district.vue
index 91f853f8..2c0da04c 100644
--- a/app/components/app/person-address/_common/select-district.vue
+++ b/app/components/app/person-address/_common/select-district.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
+  regencyCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,24 +20,41 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const { placeholder = 'Pilih Kecamatan', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const {
+  fieldName = 'districtId',
+  placeholder = 'Pilih kecamatan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
 
-const districtOptions = [
-  { label: 'Kecamatan Lowokwaru', value: '18' },
-  { label: 'Kecamatan Pakis', value: '33' },
-  { label: 'Kecamatan Blimbing', value: '35' },
-]
+// Gunakan composable untuk mengelola data districts
+const regencyCodeRef = toRef(props, 'regencyCode')
+const { districtOptions, isLoading, error } = useDistricts(regencyCodeRef)
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.regencyCode) return 'Pilih kabupaten/kota dahulu'
+  if (isLoading.value) return 'Memuat data kecamatan...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.regencyCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kecamatan
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -49,15 +69,15 @@ const districtOptions = [
               :id="fieldName"
               v-bind="componentField"
               :items="districtOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kecamatan..."
               empty-message="Kecamatan tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-postal.vue b/app/components/app/person-address/_common/select-postal.vue
index 83b33786..56867c7f 100644
--- a/app/components/app/person-address/_common/select-postal.vue
+++ b/app/components/app/person-address/_common/select-postal.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName: string
+  villageCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,37 +20,32 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const {
-  fieldName = 'zipCode',
-  placeholder = 'Kode Pos',
-  errors,
-  class: containerClass,
-  selectClass,
-  fieldGroupClass,
-} = props
+const { fieldName = 'postalRegion', placeholder = 'Kode Pos', errors, class: containerClass, fieldGroupClass } = props
 
-const postalCodeOptions = [
-  { label: '65120', value: '65120' },
-  { label: '65121', value: '65121' },
-  { label: '65123', value: '65123' },
-  { label: '65124', value: '65124' },
-  { label: '65125', value: '65125' },
-  { label: '65126', value: '65126' },
-  { label: '65127', value: '65127' },
-  { label: '65128', value: '65128' },
-  { label: '65129', value: '65129' },
-]
+const villageCodeRef = toRef(props, 'villageCode')
+const { postalRegionOptions, isLoading, error } = usePostalRegion(villageCodeRef)
+
+const dynamicPlaceholder = computed(() => {
+  if (!props.villageCode) return 'Pilih kelurahan terlebih dahulu'
+  if (isLoading.value) return 'Memuat kode pos...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.villageCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kode Pos
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -61,9 +59,9 @@ const postalCodeOptions = [
             <Combobox
               :id="fieldName"
               v-bind="componentField"
-              :items="postalCodeOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
+              :items="postalRegionOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
               search-placeholder="Cari..."
               empty-message="Kode pos tidak ditemukan"
             />
@@ -71,6 +69,6 @@ const postalCodeOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-province.vue b/app/components/app/person-address/_common/select-province.vue
index f8cc5464..ca6dd51a 100644
--- a/app/components/app/person-address/_common/select-province.vue
+++ b/app/components/app/person-address/_common/select-province.vue
@@ -6,8 +6,10 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -18,29 +20,38 @@ const props = defineProps<{
 }>()
 
 const {
-  fieldName = 'provinceId',
+  fieldName = 'provinceCode',
   placeholder = 'Pilih provinsi',
   errors,
   class: containerClass,
   fieldGroupClass,
 } = props
 
-const provinceList = [
-  { label: 'Jawa Barat', value: '18' },
-  { label: 'Jawa Tengah', value: '33' },
-  { label: 'Jawa Timur', value: '35' },
-]
+// Gunakan composable untuk mengelola data provinces
+const { provinceOptions, isLoading, error } = useProvinces()
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (isLoading.value) return 'Memuat data provinsi...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Provinsi
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -54,16 +65,16 @@ const provinceList = [
             <Combobox
               :id="fieldName"
               v-bind="componentField"
-              :items="provinceList"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
-              empty-message="Kecamatan tidak ditemukan"
+              :items="provinceOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari provinsi..."
+              empty-message="Provinsi tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-regency.vue b/app/components/app/person-address/_common/select-regency.vue
index 9b415b6e..8fbf6f23 100644
--- a/app/components/app/person-address/_common/select-regency.vue
+++ b/app/components/app/person-address/_common/select-regency.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
+  provinceCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,26 +20,41 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const { placeholder = 'Pilih kabupaten/kota', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const {
+  fieldName = 'regencyId',
+  placeholder = 'Pilih kabupaten/kota',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
 
-const regencyOptions = [
-  { label: 'Kab. Sidoarjo', value: '32' },
-  { label: 'Kab. Malang', value: '35' },
-  { label: 'Kab. Mojokerto', value: '31' },
-  { label: 'Kab. Lamongan', value: '30' },
-  { label: 'Kota Malang', value: '18' },
-]
+// Gunakan composable untuk mengelola data regencies
+const provinceCodeRef = toRef(props, 'provinceCode')
+const { regencyOptions, isLoading, error } = useRegencies({ provinceCode: provinceCodeRef, enablePagination: false })
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.provinceCode) return 'Pilih provinsi dahulu'
+  if (isLoading.value) return 'Memuat data kabupaten/kota...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.provinceCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kabupaten/Kota
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -51,15 +69,15 @@ const regencyOptions = [
               :id="fieldName"
               v-bind="componentField"
               :items="regencyOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kabupaten/kota..."
               empty-message="Kabupaten/kota tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/_common/select-village.vue b/app/components/app/person-address/_common/select-village.vue
index a3d7725c..9684954f 100644
--- a/app/components/app/person-address/_common/select-village.vue
+++ b/app/components/app/person-address/_common/select-village.vue
@@ -6,8 +6,11 @@ import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
-  fieldName: string
+  fieldName?: string
+  districtCode?: string
   isDisabled?: boolean
   placeholder?: string
   errors?: FormErrors
@@ -17,25 +20,41 @@ const props = defineProps<{
   isRequired?: boolean
 }>()
 
-const { placeholder = 'Pilih Kelurahan', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const {
+  fieldName = 'villageId',
+  placeholder = 'Pilih kelurahan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
 
-const villageOptions = [
-  { label: 'Lowokwaru', value: '18' },
-  { label: 'Dinoyo', value: '33' },
-  { label: 'Blimbing', value: '35' },
-  { label: 'Sawojajar', value: '36' },
-]
+// Gunakan composable untuk mengelola data villages
+const districtCodeRef = toRef(props, 'districtCode')
+const { villageOptions, isLoading, error } = useVillages(districtCodeRef)
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.districtCode) return 'Pilih kecamatan dahulu'
+  if (isLoading.value) return 'Memuat data kelurahan...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.districtCode || isLoading.value || !!error.value
+})
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
     >
       Kelurahan
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -50,15 +69,15 @@ const villageOptions = [
               :id="fieldName"
               v-bind="componentField"
               :items="villageOptions"
-              :placeholder="placeholder"
-              :is-disabled="isDisabled"
-              search-placeholder="Cari..."
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kelurahan..."
               empty-message="Kelurahan tidak ditemukan"
             />
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/app/person-address/entry-form-relative.vue b/app/components/app/person-address/entry-form-relative.vue
index 1c8c91a7..cc294bab 100644
--- a/app/components/app/person-address/entry-form-relative.vue
+++ b/app/components/app/person-address/entry-form-relative.vue
@@ -6,7 +6,8 @@ import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
-import RadioResidence from './_common/radio-residence.vue'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import SelectDistrict from './_common/select-district.vue'
 import SelectPostal from './_common/select-postal.vue'
 import SelectProvince from './_common/select-province.vue'
@@ -14,6 +15,8 @@ import SelectRegency from './_common/select-regency.vue'
 import SelectVillage from './_common/select-village.vue'
 import { Form } from '~/components/pub/ui/form'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   title: string
   conf?: {
@@ -39,18 +42,27 @@ let isResetting = false
 
 // Field dependency map for placeholder
 const fieldStates: Record<string, { dependsOn?: string; placeholder: string }> = {
-  regencyId: { dependsOn: 'provinceId', placeholder: 'Pilih provinsi dahulu' },
-  districtId: { dependsOn: 'regencyId', placeholder: 'Pilih kabupaten/kota dahulu' },
-  villageId: { dependsOn: 'districtId', placeholder: 'Pilih kecamatan dahulu' },
-  zipCode: { dependsOn: 'villageId', placeholder: 'Pilih kelurahan dahulu' },
+  regency_code: { dependsOn: 'province_code', placeholder: 'Pilih provinsi dahulu' },
+  district_code: { dependsOn: 'regency_code', placeholder: 'Pilih kabupaten/kota dahulu' },
+  village_code: { dependsOn: 'district_code', placeholder: 'Pilih kecamatan dahulu' },
+  postalRegion_code: { dependsOn: 'village_code', placeholder: 'Pilih kelurahan dahulu' },
   address: { placeholder: 'Masukkan alamat' },
   rt: { placeholder: '001' },
   rw: { placeholder: '002' },
 }
+
+// Computed untuk konversi boolean ke string untuk radio group
+const isSameAddressString = computed(() => {
+  const value = formRef.value?.values?.isSameAddress
+  if (typeof value === 'boolean') {
+    return value ? '1' : '0'
+  }
+  return value || '1'
+})
 // #region Function Helper
 function getFieldState(field: string) {
   const state = fieldStates[field]
-  const isSame = formRef.value?.values?.isSameAddress === '1'
+  const isSame = formRef.value?.values?.isSameAddress === true || formRef.value?.values?.isSameAddress === '1'
 
   // Jika alamat sama, semua field kecuali provinsi disabled
   if (['address', 'rt', 'rw'].includes(field) && isSame) {
@@ -63,7 +75,7 @@ function getFieldState(field: string) {
     const isDisabledByDependency = !dependencyValue
 
     // Jika isSame, semua field location disabled
-    if (isSame && ['regencyId', 'districtId', 'villageId', 'zipCode'].includes(field)) {
+    if (isSame && ['regency_code', 'district_code', 'village_code', 'postalRegion_code'].includes(field)) {
       return { placeholder: '-', disabled: true }
     }
 
@@ -73,7 +85,7 @@ function getFieldState(field: string) {
   }
 
   // Jika isSame dan field location, disabled
-  if (isSame && ['regencyId', 'districtId', 'villageId', 'zipCode'].includes(field)) {
+  if (isSame && ['regency_code', 'district_code', 'village_code', 'postalRegion_code'].includes(field)) {
     return { placeholder: '-', disabled: true }
   }
 
@@ -84,9 +96,9 @@ function getFieldState(field: string) {
 
 // #region watch
 
-// Watch provinceId changes
+// Watch province_code changes
 watch(
-  () => formRef.value?.values?.provinceId,
+  () => formRef.value?.values?.province_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -95,10 +107,10 @@ watch(
 
       formRef.value.setValues(
         {
-          regencyId: undefined,
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
+          regency_code: undefined,
+          district_code: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -110,9 +122,9 @@ watch(
   },
 )
 
-// Watch regencyId changes
+// Watch regency_code changes
 watch(
-  () => formRef.value?.values?.regencyId,
+  () => formRef.value?.values?.regency_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -121,9 +133,9 @@ watch(
 
       formRef.value.setValues(
         {
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
+          district_code: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -135,9 +147,9 @@ watch(
   },
 )
 
-// Watch districtId changes
+// Watch district_code changes
 watch(
-  () => formRef.value?.values?.districtId,
+  () => formRef.value?.values?.district_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -146,8 +158,8 @@ watch(
 
       formRef.value.setValues(
         {
-          villageId: undefined,
-          zipCode: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -159,9 +171,9 @@ watch(
   },
 )
 
-// Watch villageId changes
+// Watch village_code changes
 watch(
-  () => formRef.value?.values?.villageId,
+  () => formRef.value?.values?.village_code,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
@@ -170,7 +182,7 @@ watch(
 
       formRef.value.setValues(
         {
-          zipCode: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -188,19 +200,23 @@ watch(
   (newValue, oldValue) => {
     if (!formRef.value || newValue === oldValue) return
 
-    // Ketika berubah dari '1' ke '0', clear empty strings dan trigger validasi
-    if (oldValue === '1' && newValue === '0') {
+    // Konversi ke boolean untuk perbandingan yang konsisten
+    const newBool = newValue === true || newValue === '1'
+    const oldBool = oldValue === true || oldValue === '1'
+
+    // Ketika berubah dari true ke false, clear empty strings dan trigger validasi
+    if (oldBool && !newBool) {
       nextTick(() => {
         // Set empty strings ke undefined untuk trigger required validation
         const currentValues = formRef.value.values
         const updatedValues = { ...currentValues }
 
         // Convert empty strings to undefined untuk field yang sekarang required
-        if (updatedValues.provinceId === '') updatedValues.provinceId = undefined
-        if (updatedValues.regencyId === '') updatedValues.regencyId = undefined
-        if (updatedValues.districtId === '') updatedValues.districtId = undefined
-        if (updatedValues.villageId === '') updatedValues.villageId = undefined
-        if (updatedValues.zipCode === '') updatedValues.zipCode = undefined
+        if (updatedValues.province_code === '') updatedValues.province_code = undefined
+        if (updatedValues.regency_code === '') updatedValues.regency_code = undefined
+        if (updatedValues.district_code === '') updatedValues.district_code = undefined
+        if (updatedValues.village_code === '') updatedValues.village_code = undefined
+        if (updatedValues.postalRegion_code === '') updatedValues.postalRegion_code = undefined
         if (updatedValues.address === '') updatedValues.address = undefined
 
         // Update values dan trigger validasi
@@ -213,15 +229,15 @@ watch(
       })
     }
 
-    // Ketika berubah dari '0' ke '1', clear error messages
-    if (oldValue === '0' && newValue === '1') {
+    // Ketika berubah dari false ke true, clear error messages
+    if (!oldBool && newBool) {
       nextTick(() => {
         // Clear error messages untuk field yang tidak lagi required
-        formRef.value?.setFieldError('provinceId', undefined)
-        formRef.value?.setFieldError('regencyId', undefined)
-        formRef.value?.setFieldError('districtId', undefined)
-        formRef.value?.setFieldError('villageId', undefined)
-        formRef.value?.setFieldError('zipCode', undefined)
+        formRef.value?.setFieldError('province_code', undefined)
+        formRef.value?.setFieldError('regency_code', undefined)
+        formRef.value?.setFieldError('district_code', undefined)
+        formRef.value?.setFieldError('village_code', undefined)
+        formRef.value?.setFieldError('postalRegion_code', undefined)
         formRef.value?.setFieldError('address', undefined)
         formRef.value?.setFieldError('rt', undefined)
         formRef.value?.setFieldError('rw', undefined)
@@ -241,129 +257,138 @@ watch(
     :validation-schema="formSchema"
     :validate-on-mount="false"
     validation-mode="onSubmit"
-    :initial-values="initialValues ?? { isSameAddress: '1' }"
+    :initial-values="initialValues ?? { isSameAddress: '1', locationType_code: 'identity' }"
   >
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title }}
       </p>
     </div>
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
-        <!-- LocationType -->
-        <FieldGroup v-if="conf?.withAddressName">
-          <Label label-for="locationType">Jenis Alamat</Label>
-          <Field
-            id="locationType"
-            :errors="errors"
-          >
-            <FormField
-              v-slot="{ componentField }"
-              name="locationType"
-            >
-              <FormItem>
-                <FormControl>
-                  <Select
-                    id="locationType"
-                    v-bind="componentField"
-                    :items="[
-                      { label: 'Rumah', value: 'rumah' },
-                      { label: 'Kantor', value: 'kantor' },
-                      { label: 'Lainnya', value: 'lainnya' },
-                    ]"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-          </Field>
-        </FieldGroup>
-        <RadioResidence field-name="isSameAddress" />
-        <Block></Block>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectProvince
-              field-name="provinceId"
-              placeholder="Pilih"
-              :is-disabled="values.isSameAddress === '1'"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <SelectRegency
-              field-name="regencyId"
-              :placeholder="getFieldState('regencyId').placeholder"
-              :is-disabled="getFieldState('regencyId').disabled || !values.provinceId"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-        </div>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectDistrict
-              field-name="districtId"
-              :placeholder="getFieldState('districtId').placeholder"
-              :is-disabled="getFieldState('districtId').disabled || !values.regencyId"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-          <div class="min-w-0 flex-1">
-            <SelectVillage
-              field-name="villageId"
-              :placeholder="getFieldState('villageId').placeholder"
-              :is-disabled="getFieldState('villageId').disabled || !values.districtId"
-              :is-required="values.isSameAddress !== '1'"
-            />
-          </div>
-        </div>
-        <InputBase
-          field-name="address"
-          label="Alamat"
-          :placeholder="getFieldState('address').placeholder"
-          :is-disabled="getFieldState('address').disabled"
+    <!-- locationType_code - Hidden field with default value 'identity' -->
+    <FormField
+      v-slot="{ componentField }"
+      name="locationType_code"
+    >
+      <input
+        type="hidden"
+        v-bind="componentField"
+        value="identity"
+      />
+    </FormField>
+    <DE.Block :col-count="4" :cell-flex="false">
+      <DE.Cell :col-span="4">
+        <DE.Label
+          size="fit"
+          height="compact"
+          label-for="isSameAddress"
+        >
+          Apakah alamat KTP sama dengan alamat sekarang?
+        </DE.Label>
+        <DE.Field
+          id="isSameAddress"
           :errors="errors"
-          :is-required="values.isSameAddress !== '1'"
+        >
+          <FormField
+            v-slot="{ componentField }"
+            name="isSameAddress"
+          >
+            <FormItem>
+              <FormControl>
+                <RadioGroup
+                  :model-value="isSameAddressString"
+                  @update:model-value="(value) => componentField.onChange(value)"
+                  class="flex flex-row flex-wrap gap-4 sm:gap-6"
+                >
+                  <div
+                    v-for="(option, index) in [
+                      { label: 'Ya', value: '1' },
+                      { label: 'Tidak', value: '0' },
+                    ]"
+                    :key="option.value"
+                    class="flex min-w-fit items-center space-x-2"
+                  >
+                    <RadioGroupItem
+                      :id="`isSameAddress-${index}`"
+                      :value="option.value"
+                      class="relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5"
+                    />
+                    <RadioLabel
+                      :for="`isSameAddress-${index}`"
+                      class="cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm"
+                    >
+                      {{ option.label }}
+                    </RadioLabel>
+                  </div>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage class="ml-0 mt-1" />
+            </FormItem>
+          </FormField>
+        </DE.Field>
+      </DE.Cell>
+      <SelectProvince
+        field-name="province_code"
+        placeholder="Pilih"
+        :is-disabled="values.isSameAddress === true || values.isSameAddress === '1'"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectRegency
+        field-name="regency_code"
+        :province-code="values.province_code"
+        :is-disabled="getFieldState('regency_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectDistrict
+        field-name="district_code"
+        :regency-code="values.regency_code"
+        :is-disabled="getFieldState('district_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectVillage
+        field-name="village_code"
+        :district-code="values.district_code"
+        :is-disabled="getFieldState('village_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <InputBase
+        field-name="address"
+        label="Alamat"
+        :placeholder="getFieldState('address').placeholder"
+        :is-disabled="getFieldState('address').disabled"
+        :errors="errors"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :col-span="2"
+      />
+      <div class="grid grid-cols-2 gap-1">
+        <InputBase
+          field-name="rt"
+          label="RT"
+          :errors="errors"
+          numeric-only
+          :max-length="2"
+          :placeholder="getFieldState('rt').placeholder"
+          :is-disabled="getFieldState('rt').disabled"
+        />
+        <InputBase
+          field-name="rw"
+          label="RW"
+          :placeholder="getFieldState('rw').placeholder"
+          :is-disabled="getFieldState('rw').disabled"
+          :errors="errors"
+          :max-length="2"
+          numeric-only
         />
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rt"
-              label="RT"
-              :errors="errors"
-              numeric-only
-              :max-length="3"
-              :placeholder="getFieldState('rt').placeholder"
-              :is-disabled="getFieldState('rt').disabled"
-            />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rw"
-              label="RW"
-              :placeholder="getFieldState('rw').placeholder"
-              :is-disabled="getFieldState('rw').disabled"
-              :errors="errors"
-              :max-length="3"
-              numeric-only
-            />
-          </div>
-
-          <div class="min-w-0 flex-[2]">
-            <SelectPostal
-              field-name="zipCode"
-              :placeholder="getFieldState('zipCode').placeholder"
-              :is-disabled="getFieldState('zipCode').disabled || !values.villageId"
-            />
-          </div>
-        </div>
       </div>
-    </div>
+      <SelectPostal
+        field-name="postalRegion_code"
+        :village-code="values.village_code"
+        :placeholder="getFieldState('postalRegion_code').placeholder"
+        :is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
+      />
+    </DE.Block>
+
   </Form>
 </template>
diff --git a/app/components/app/person-address/entry-form.vue b/app/components/app/person-address/entry-form.vue
index a26381d8..b3ef300d 100644
--- a/app/components/app/person-address/entry-form.vue
+++ b/app/components/app/person-address/entry-form.vue
@@ -12,6 +12,8 @@ import SelectRegency from './_common/select-regency.vue'
 import SelectVillage from './_common/select-village.vue'
 import { Form } from '~/components/pub/ui/form'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   title: string
   conf?: {
@@ -35,29 +37,34 @@ defineExpose({
 // Watchers untuk cascading reset
 let isResetting = false
 
-// #region Watch provinceId changes
+// #region Watch provinceCode changes
 
 watch(
-  () => formRef.value?.values?.provinceId,
+  () => formRef.value?.values?.provinceCode,
   (newValue, oldValue) => {
     if (isResetting || !formRef.value || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
-        {
-          regencyId: undefined,
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
-        },
-        false,
-      )
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              regencyId: undefined,
+              districtId: undefined,
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
 
-      nextTick(() => {
-        isResetting = false
-      })
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150) // Delay 150ms, lebih dari debounce composable (100ms)
     }
   },
 )
@@ -71,18 +78,23 @@ watch(
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
-        {
-          districtId: undefined,
-          villageId: undefined,
-          zipCode: undefined,
-        },
-        false,
-      )
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              districtId: undefined,
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
 
-      nextTick(() => {
-        isResetting = false
-      })
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150)
     }
   },
 )
@@ -96,17 +108,22 @@ watch(
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
-        {
-          villageId: undefined,
-          zipCode: undefined,
-        },
-        false,
-      )
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
 
-      nextTick(() => {
-        isResetting = false
-      })
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150)
     }
   },
 )
@@ -145,124 +162,84 @@ watch(
     :validation-schema="formSchema"
     :validate-on-mount="false"
     validation-mode="onSubmit"
-    :initial-values="initialValues ? initialValues : {}"
+    :initial-values="
+      initialValues ? { locationType_code: 'domicile', ...initialValues } : { locationType_code: 'domicile' }
+    "
   >
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title }}
       </p>
     </div>
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
-        <!-- LocationType -->
-        <FieldGroup v-if="conf?.withAddressName">
-          <Label label-for="locationType">Jenis Alamat</Label>
-          <Field
-            id="locationType"
+    <FormField
+      v-slot="{ componentField }"
+      name="locationType_code"
+    >
+      <input
+        type="hidden"
+        v-bind="componentField"
+        value="domicile"
+      />
+    </FormField>
+
+    <DE.Block :col-count="4" :cell-flex="false">
+      <SelectProvince
+        field-name="province_code"
+        placeholder="Pilih"
+        is-required
+      />
+      <SelectRegency
+        field-name="regency_code"
+        :province-code="values.province_code"
+        is-required
+      />
+      <SelectDistrict
+        field-name="district_code"
+        :regency-code="values.regency_code"
+        is-required
+      />
+      <SelectVillage
+        field-name="village_code"
+        :district-code="values.district_code"
+        is-required
+      />
+      <InputBase
+        field-name="address"
+        label="Alamat"
+        placeholder="Masukkan alamat"
+        :errors="errors"
+        is-required
+        :col-span="2"
+      />
+      <DE.Cell class="flex-row gap-2">
+        <div class="grid grid-cols-2 gap-1">
+          <InputBase
+            field-name="rt"
+            label="RT"
+            placeholder="01"
             :errors="errors"
-          >
-            <FormField
-              v-slot="{ componentField }"
-              name="locationType"
-            >
-              <FormItem>
-                <FormControl>
-                  <Select
-                    id="locationType"
-                    v-bind="componentField"
-                    :items="[
-                      { label: 'Rumah', value: 'rumah' },
-                      { label: 'Kantor', value: 'kantor' },
-                      { label: 'Lainnya', value: 'lainnya' },
-                    ]"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-          </Field>
-        </FieldGroup>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectProvince
-              field-name="provinceId"
-              placeholder="Pilih"
-              is-required
+            numeric-only
+            :max-length="2"
             />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <SelectRegency
-              field-name="regencyId"
-              placeholder="Pilih provinsi dahulu"
-              :is-disabled="!values.provinceId"
-              is-required
-            />
-          </div>
+          <InputBase
+            field-name="rw"
+            label="RW"
+            placeholder="02"
+            :errors="errors"
+            :max-length="2"
+            numeric-only
+          />
         </div>
-
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <SelectDistrict
-              field-name="districtId"
-              placeholder="Pilih kabupaten/kota dahulu"
-              :is-disabled="!values.regencyId"
-              is-required
-            />
-          </div>
-          <div class="min-w-0 flex-1">
-            <SelectVillage
-              field-name="villageId"
-              placeholder="Pilih kecamatan dahulu"
-              :is-disabled="!values.districtId"
-              is-required
-            />
-          </div>
-        </div>
-
-        <InputBase
-          field-name="address"
-          label="Alamat"
-          placeholder="Masukkan alamat"
-          :errors="errors"
-          is-required
+      </DE.Cell>
+      <SelectPostal
+          field-name="postalRegion_code"
+          placeholder="Pilih kelurahan dahulu"
+          :village-code="values.village_code"
+          :is-disabled="!values.village_code"
         />
-        <div class="flex-row gap-2 md:flex">
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rt"
-              label="RT"
-              placeholder="001"
-              :errors="errors"
-              numeric-only
-              :max-length="3"
-            />
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <InputBase
-              field-name="rw"
-              label="RW"
-              placeholder="002"
-              :errors="errors"
-              :max-length="3"
-              numeric-only
-            />
-          </div>
-
-          <div class="min-w-0 flex-[2]">
-            <SelectPostal
-              field-name="zipCode"
-              placeholder="Pilih kelurahan dahulu"
-              :is-disabled="!values.villageId"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
+    </DE.Block>
   </Form>
 </template>
diff --git a/app/components/app/person-contact/entry-form.vue b/app/components/app/person-contact/entry-form.vue
index 5fa451b4..431a3c79 100644
--- a/app/components/app/person-contact/entry-form.vue
+++ b/app/components/app/person-contact/entry-form.vue
@@ -39,7 +39,7 @@ defineExpose({
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title || 'Kontak Pasien' }}
       </p>
@@ -94,6 +94,7 @@ defineExpose({
               :disabled="fields.length >= contactLimit"
               type="button"
               variant="outline"
+              size="sm"
               @click="push({ contactType: '', contactNumber: '' })"
             >
               <Icon
diff --git a/app/components/app/person-relative/_common/select-relations.vue b/app/components/app/person-relative/_common/select-relations.vue
index 179976bf..5c3d2594 100644
--- a/app/components/app/person-relative/_common/select-relations.vue
+++ b/app/components/app/person-relative/_common/select-relations.vue
@@ -4,6 +4,7 @@ import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
+import { relationshipCodes } from '~/lib/constants'
 
 const props = defineProps<{
   fieldName: string
@@ -18,15 +19,11 @@ const props = defineProps<{
 
 const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass } = props
 
-const emergencyContactOptions = [
-  { label: 'Diri sendiri', value: 'self' },
-  { label: 'Orang Tua', value: 'parent' },
-  { label: 'Anak', value: 'child' },
-  { label: 'Keluarga lain', value: 'relative' },
-  { label: 'Petugas instansi lainnya', value: 'institution_officer' },
-  { label: 'Petugas kesehatan', value: 'health_officer' },
-  { label: 'Lainnya', value: 'other', priority: -1 },
-]
+const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, label]) => ({
+  label,
+  value,
+  ...(value === 'other' && { priority: -1 })
+}))
 </script>
 
 <template>
diff --git a/app/components/app/person/_common/select-birth-place.vue b/app/components/app/person/_common/select-birth-place.vue
new file mode 100644
index 00000000..dd61a69f
--- /dev/null
+++ b/app/components/app/person/_common/select-birth-place.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthPlace',
+  placeholder = 'Pilih tempat lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data regencies (tanpa pagination & tanpa province code)
+const { fetchRegencies, regencyOptions, isLoading, error } = useRegencies({
+  enablePagination: false,
+  enableSearch: false,
+})
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (isLoading.value) return 'Memuat data tempat lahir...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || isLoading.value || !!error.value
+})
+
+onMounted(() => {
+  fetchRegencies()
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label :label-for="fieldName" :is-required="isRequired">
+      Tempat Lahir
+    </DE.Label>
+    <DE.Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')">
+      <FormField v-slot="{ componentField }" :name="fieldName">
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="regencyOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari tempat lahir..."
+              empty-message="Tempat lahir tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person/family-parents-form.vue b/app/components/app/person/family-parents-form.vue
index e5ac4a46..fc87ce45 100644
--- a/app/components/app/person/family-parents-form.vue
+++ b/app/components/app/person/family-parents-form.vue
@@ -65,7 +65,7 @@ defineExpose({
     <div>
       <p
         v-if="props.title"
-        class="text-md mb-2 mt-1 font-semibold"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
       >
         {{ props.title }}
       </p>
diff --git a/app/components/app/procedure-src/entry-form.vue b/app/components/app/procedure-src/entry-form.vue
new file mode 100644
index 00000000..fd33cf90
--- /dev/null
+++ b/app/components/app/procedure-src/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ProcedureSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<ProcedureSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: ProcedureSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-procedure-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/procedure-src/list-cfg.ts b/app/components/app/procedure-src/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/procedure-src/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/procedure-src/list.vue b/app/components/app/procedure-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/procedure-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/bed/list.vue b/app/components/content/bed/list.vue
index 46ed0f11..e68f59c9 100644
--- a/app/components/content/bed/list.vue
+++ b/app/components/content/bed/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBedList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/building/list.vue b/app/components/content/building/list.vue
index 364f9a59..2c67a5ee 100644
--- a/app/components/content/building/list.vue
+++ b/app/components/content/building/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBuildingList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/chamber/list.vue b/app/components/content/chamber/list.vue
index 66098a84..9b389a02 100644
--- a/app/components/content/chamber/list.vue
+++ b/app/components/content/chamber/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppChamberList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/counter/list.vue b/app/components/content/counter/list.vue
index 8757c0d2..e85c5df4 100644
--- a/app/components/content/counter/list.vue
+++ b/app/components/content/counter/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppCounterList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/diagnose-src/list.vue b/app/components/content/diagnose-src/list.vue
new file mode 100644
index 00000000..2b056697
--- /dev/null
+++ b/app/components/content/diagnose-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/diagnose-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DiagnoseSrcSchema, type DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/diagnose-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/diagnose-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'diagnose-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Diagnosis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Diagnosis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Diagnosis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppDiagnoseSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Diagnosis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDiagnoseSrcEntryForm
+      :schema="DiagnoseSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DiagnoseSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 46e22401..019e64a9 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionPositionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index 0ad75edb..9ccefc56 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -147,8 +147,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/employee/list.vue b/app/components/content/employee/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/employee/list.vue
+++ b/app/components/content/employee/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index 5ddf3ad7..967bcf11 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -96,11 +96,10 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <Separator class="my-4 xl:my-5" />
+
   <Filter :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppEncounterList :data="data" />
-  </div>
+
+  <AppEncounterList :data="data" />
 
   <Dialog v-model:open="isFormEntryDialogOpen" title="Filter" size="lg" prevent-outside>
     <AppEncounterFilter />
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 4e370502..19e5d913 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppEquipmentList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/floor/list.vue b/app/components/content/floor/list.vue
index 8859d9c2..1b91af9d 100644
--- a/app/components/content/floor/list.vue
+++ b/app/components/content/floor/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppFloorList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index fe27a4ef..31486097 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppInstallationList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
index 9dcba7be..aa277b71 100644
--- a/app/components/content/item-price/list.vue
+++ b/app/components/content/item-price/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineGroupList :data="data" />
-  </div>
+
+  <AppMedicineGroupList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
     <AppMedicineGroupEntryForm v-model="entry" />
diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
index 6660f71e..15887985 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppItemList :data="data" />
-  </div>
+
+  <AppItemList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
     <AppItemEntryForm v-model="entry" />
diff --git a/app/components/content/medical-action-src/list.vue b/app/components/content/medical-action-src/list.vue
new file mode 100644
index 00000000..c39ff4b8
--- /dev/null
+++ b/app/components/content/medical-action-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/medical-action-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MedicalActionSrcSchema, type MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medical-action-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medical-action-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medical-action-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Aksi Medis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Aksi Medis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Aksi Medis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicalActionSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Aksi Medis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicalActionSrcEntryForm
+      :schema="MedicalActionSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicalActionSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 10c82ecd..80faf1ab 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineGroupList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index dd2b66e9..9e0e5d01 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineMethodList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index 4590e891..27470776 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -138,8 +138,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/patient/detail.vue b/app/components/content/patient/detail.vue
index 0ca4cd0d..da9b2809 100644
--- a/app/components/content/patient/detail.vue
+++ b/app/components/content/patient/detail.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { withBase } from '~/models/_base'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import type { PatientEntity } from '~/models/patient'
+import type { Patient } from '~/models/patient'
 import type { Person } from '~/models/person'
 
 // Components
@@ -18,7 +18,7 @@ const props = defineProps<{
 
 // #region State & Computed
 const patient = ref(
-  withBase<PatientEntity>({
+  withBase<Patient>({
     person: {} as Person,
     personAddresses: [],
     personContacts: [],
@@ -71,13 +71,10 @@ function handleAction(type: string) {
   <Header
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 border-b-2 border-b-slate-300 pb-2 xl:mb-5"
   />
+
   <AppPatientPreview
-    :person="patient.person"
-    :person-addresses="patient.personAddresses"
-    :person-contacts="patient.personContacts"
-    :person-relatives="patient.personRelatives"
+    :patient="patient"
     @click="handleAction"
   />
 </template>
diff --git a/app/components/content/patient/entry.vue b/app/components/content/patient/entry.vue
index b0b5569e..2eed6df5 100644
--- a/app/components/content/patient/entry.vue
+++ b/app/components/content/patient/entry.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { PatientEntity, genPatientProps } from '~/models/patient'
+import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
 import { genPatient } from '~/models/patient'
 import { PatientSchema } from '~/schemas/patient.schema'
@@ -9,10 +10,28 @@ import { PersonAddressSchema } from '~/schemas/person-address.schema'
 import { PersonContactListSchema } from '~/schemas/person-contact.schema'
 import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
 import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { postPatient } from '~/services/patient.service'
+import { uploadAttachment } from '~/services/patient.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleCancelForm,
+} from '~/handlers/patient.handler'
+
+import { toast } from '~/components/pub/ui/toast'
 
 // #region Props & Emits
-const payload = ref<PatientEntity>()
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+const residentIdentityFile = ref<File>()
+const familyCardFile = ref<File>()
 
 // form related state
 const personAddressForm = ref<ExposedForm<any> | null>(null)
@@ -28,13 +47,39 @@ const personPatientForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
 // #region Lifecycle Hooks
+onMounted(() => {
+  // Initial synchronization when forms are mounted and isSameAddress is true by default
+  nextTick(() => {
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value
+    ) {
+      const currentAddressValues = personAddressForm.value.values
+      if (Object.keys(currentAddressValues).length > 0) {
+        personAddressRelativeForm.value.setValues(
+          {
+            ...personAddressRelativeForm.value.values,
+            province_code: currentAddressValues.province_code || undefined,
+            regency_code: currentAddressValues.regency_code || undefined,
+            district_code: currentAddressValues.district_code || undefined,
+            village_code: currentAddressValues.village_code || undefined,
+            postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+            address: currentAddressValues.address || undefined,
+            rt: currentAddressValues.rt || undefined,
+            rw: currentAddressValues.rw || undefined,
+          },
+          false,
+        )
+      }
+    }
+  })
+})
 // #endregion
 
 // #region Functions
-// #endregion region
-
-// #region Utilities & event handlers
-async function submitAll() {
+async function composeFormData(): Promise<Patient> {
   const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
     personPatientForm.value?.validate(),
     personAddressForm.value?.validate(),
@@ -50,7 +95,7 @@ async function submitAll() {
 
   // exit, if form errors happend during validation
   // for example: dropdown not selected
-  if (!allValid) return
+  if (!allValid) return Promise.reject('Form validation failed')
 
   const formDataRequest: genPatientProps = {
     patient: patient?.values,
@@ -62,46 +107,122 @@ async function submitAll() {
   }
 
   const formData = genPatient(formDataRequest)
-  payload.value = formData
 
-  try {
-    const result = await postPatient(formData)
-    if (result.success) {
-      console.log('Patient created successfully:', result.body)
-      // Navigate to patient list or show success message
-      await navigateTo('/client/patient')
-    } else {
-      console.error('Failed to create patient:', result)
-      // Handle error - show error message to user
+  if (patient?.values.residentIdentityFile) {
+    residentIdentityFile.value = patient?.values.residentIdentityFile
+  }
+
+  if (patient?.values.familyIdentityFile) {
+    familyCardFile.value = patient?.values.familyIdentityFile
+  }
+
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    const patient: Patient = await composeFormData()
+    let createdPatientId = 0
+
+    const response = await handleActionSave(
+      patient,
+      () => {},
+      () => {},
+      toast,
+    )
+
+    const data = (response?.body?.data ?? null) as PatientBase | null
+    if (!data) return
+    createdPatientId = data.id
+
+    if (residentIdentityFile.value) {
+      void uploadAttachment(residentIdentityFile.value, createdPatientId, 'ktp')
     }
-  } catch (error) {
-    console.error('Error creating patient:', error)
-    // Handle error - show error message to user
+    if (familyCardFile.value) {
+      void uploadAttachment(familyCardFile.value, createdPatientId, 'kk')
+    }
+
+    // If has callback provided redirect to callback with patientData
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
+      return
+    }
+
+    // Navigate to patient list or show success message
+    await navigateTo('/client/patient')
+    return
+  }
+
+  if (eventType === 'cancel') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    await navigateTo({
+      name: 'client-patient',
+    })
+    // handleCancelForm()
   }
 }
 // #endregion
 
 // #region Watchers
-// Watcher untuk sinkronisasi alamat ketika isSameAddress = '1'
+// Watcher untuk sinkronisasi initial ketika kedua form sudah ready
+watch(
+  [() => personAddressForm.value, () => personAddressRelativeForm.value],
+  ([addressForm, relativeForm]) => {
+    if (addressForm && relativeForm) {
+      // Trigger initial sync jika isSameAddress adalah true
+      nextTick(() => {
+        const isSameAddress = relativeForm.values?.isSameAddress
+        if ((isSameAddress === true || isSameAddress === '1') && addressForm.values) {
+          const currentAddressValues = addressForm.values
+          if (Object.keys(currentAddressValues).length > 0) {
+            relativeForm.setValues(
+              {
+                ...relativeForm.values,
+                province_code: currentAddressValues.province_code || undefined,
+                regency_code: currentAddressValues.regency_code || undefined,
+                district_code: currentAddressValues.district_code || undefined,
+                village_code: currentAddressValues.village_code || undefined,
+                postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+                address: currentAddressValues.address || undefined,
+                rt: currentAddressValues.rt || undefined,
+                rw: currentAddressValues.rw || undefined,
+              },
+              false,
+            )
+          }
+        }
+      })
+    }
+  },
+  { immediate: true },
+)
+
+// Watcher untuk sinkronisasi alamat ketika isSameAddress = true
 watch(
   () => personAddressForm.value?.values,
   (newAddressValues) => {
     // Cek apakah alamat KTP harus sama dengan alamat sekarang
-    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress === '1'
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
 
-    if (isSameAddress && newAddressValues && personAddressRelativeForm.value) {
+    if ((isSameAddress === true || isSameAddress === '1') && newAddressValues && personAddressRelativeForm.value) {
       // Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
       personAddressRelativeForm.value.setValues(
         {
           ...personAddressRelativeForm.value.values,
-          provinceId: newAddressValues.provinceId || '',
-          regencyId: newAddressValues.regencyId || '',
-          districtId: newAddressValues.districtId || '',
-          villageId: newAddressValues.villageId || '',
-          zipCode: newAddressValues.zipCode || '',
-          address: newAddressValues.address || '',
-          rt: newAddressValues.rt || '',
-          rw: newAddressValues.rw || '',
+          province_code: newAddressValues.province_code || undefined,
+          regency_code: newAddressValues.regency_code || undefined,
+          district_code: newAddressValues.district_code || undefined,
+          village_code: newAddressValues.village_code || undefined,
+          postalRegion_code: newAddressValues.postalRegion_code || undefined,
+          address: newAddressValues.address || undefined,
+          rt: newAddressValues.rt || undefined,
+          rw: newAddressValues.rw || undefined,
         },
         false,
       )
@@ -114,20 +235,24 @@ watch(
 watch(
   () => personAddressRelativeForm.value?.values?.isSameAddress,
   (isSameAddress) => {
-    if (isSameAddress === '1' && personAddressForm.value?.values && personAddressRelativeForm.value) {
-      // Ketika isSameAddress diubah menjadi '1', copy alamat sekarang ke alamat KTP
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value?.values
+    ) {
+      // Ketika isSameAddress diubah menjadi true, copy alamat sekarang ke alamat KTP
       const currentAddressValues = personAddressForm.value.values
       personAddressRelativeForm.value.setValues(
         {
           ...personAddressRelativeForm.value.values,
-          provinceId: currentAddressValues.provinceId || '',
-          regencyId: currentAddressValues.regencyId || '',
-          districtId: currentAddressValues.districtId || '',
-          villageId: currentAddressValues.villageId || '',
-          zipCode: currentAddressValues.zipCode || '',
-          address: currentAddressValues.address || '',
-          rt: currentAddressValues.rt || '',
-          rw: currentAddressValues.rw || '',
+          province_code: currentAddressValues.province_code || undefined,
+          regency_code: currentAddressValues.regency_code || undefined,
+          district_code: currentAddressValues.district_code || undefined,
+          village_code: currentAddressValues.village_code || undefined,
+          postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+          address: currentAddressValues.address || undefined,
+          rt: currentAddressValues.rt || undefined,
+          rw: currentAddressValues.rw || undefined,
         },
         false,
       )
@@ -143,21 +268,25 @@ watch(
     ref="personPatientForm"
     :schema="PatientSchema"
   />
+  <div class="h-6"></div>
   <AppPersonAddressEntryForm
     ref="personAddressForm"
     title="Alamat Sekarang"
     :schema="PersonAddressSchema"
   />
+  <div class="h-6"></div>
   <AppPersonAddressEntryFormRelative
     ref="personAddressRelativeForm"
     title="Alamat KTP"
     :schema="PersonAddressRelativeSchema"
   />
+  <div class="h-6"></div>
   <AppPersonFamilyParentsForm
     ref="personFamilyForm"
     title="Identitas Orang Tua"
     :schema="PersonFamiliesSchema"
   />
+  <div class="h-6"></div>
   <AppPersonContactEntryForm
     ref="personContactForm"
     title="Kontak Pasien"
@@ -171,7 +300,7 @@ watch(
   />
 
   <div class="my-2 flex justify-end py-2">
-    <Action @click="submitAll" />
+    <Action @click="handleActionClick" />
   </div>
 </template>
 
diff --git a/app/components/content/patient/list.vue b/app/components/content/patient/list.vue
index 2b73ca08..519aeb8e 100644
--- a/app/components/content/patient/list.vue
+++ b/app/components/content/patient/list.vue
@@ -48,36 +48,37 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-const summaryData = ref<Summary[]>([
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-])
+// Disable dulu, ayahab kalo diminta
+// const summaryData = ref<Summary[]>([
+//   {
+//     title: 'Total Pasien',
+//     icon: UsersRound,
+//     metric: 23,
+//     trend: 15,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Pasien Aktif',
+//     icon: UserCheck,
+//     metric: 100,
+//     trend: 9,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Kunjungan Hari Ini',
+//     icon: Calendar,
+//     metric: 52,
+//     trend: 1,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Peserta BPJS',
+//     icon: Hospital,
+//     metric: 71,
+//     trend: -3,
+//     timeframe: 'daily',
+//   },
+// ])
 // #endregion
 
 // #region Lifecycle Hooks
@@ -165,7 +166,9 @@ watch([recId, recAction], () => {
     :prep="{ ...headerPrep }"
     :ref-search-nav="refSearchNav"
   />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="summaryLoading">
         <SummaryCard
@@ -182,12 +185,14 @@ watch([recId, recAction], () => {
         />
       </template>
     </div>
-    <AppPatientList
-      :data="data"
-      :pagination-meta="paginationMeta"
-      @page-change="handlePageChange"
-    />
   </div>
+  -->
+
+  <AppPatientList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index b3cd7d25..f8059b9d 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -58,8 +58,11 @@ async function getMaterialList() {
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+
   <AppPrescriptionList v-if="!isLoading.dataListLoading" />
+
   <AppPrescriptionEntry />
+
   <PrescriptionItemListEntry :data=[] />
   <div>
     <Button>
diff --git a/app/components/content/procedure-src/list.vue b/app/components/content/procedure-src/list.vue
new file mode 100644
index 00000000..fad041ea
--- /dev/null
+++ b/app/components/content/procedure-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/procedure-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/procedure-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/procedure-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'procedure-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'MCU Prosedur',
+  icon: 'i-lucide-clipboard-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Prosedur'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Prosedur'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppProcedureSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Prosedur'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppProcedureSrcEntryForm
+      :schema="ProcedureSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ProcedureSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/public-screen/list.vue b/app/components/content/public-screen/list.vue
index 0b380d61..10c7d039 100644
--- a/app/components/content/public-screen/list.vue
+++ b/app/components/content/public-screen/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppPublicScreenList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/room/list.vue b/app/components/content/room/list.vue
index a88c0230..1317d5b0 100644
--- a/app/components/content/room/list.vue
+++ b/app/components/content/room/list.vue
@@ -196,8 +196,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppRoomList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/satusehat/list.vue b/app/components/content/satusehat/list.vue
index 6dcbd459..72cff7dd 100644
--- a/app/components/content/satusehat/list.vue
+++ b/app/components/content/satusehat/list.vue
@@ -108,10 +108,12 @@ const activeTabFilter = computed({
 <template>
   <div class="rounded-md border p-4">
     <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
+
     <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
       <PubMyUiServiceStatus v-bind="service" />
       <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
     </div>
+
     <div class="rounded-md border p-4">
       <h2 class="text-md py-2 font-semibold">FHIR Resource</h2>
       <Tabs v-model="activeTabFilter">
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
index e1d8373a..a240a65f 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -60,7 +60,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AssesmentFunctionList :data="data" />
-  </div>
+
+  <AssesmentFunctionList :data="data" />
 </template>
diff --git a/app/components/content/specialist-intern/list.vue b/app/components/content/specialist-intern/list.vue
index b004cc92..e2df8e3e 100644
--- a/app/components/content/specialist-intern/list.vue
+++ b/app/components/content/specialist-intern/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 0a16e10e..9bbf755f 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index c6750d13..e2c6db52 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSubSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index a81c041b..da22a976 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -134,8 +134,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppToolsList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 44d7c115..03edd231 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppUnitList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
index bc0226ab..15498b15 100644
--- a/app/components/content/uom/list.vue
+++ b/app/components/content/uom/list.vue
@@ -126,15 +126,13 @@ onMounted(async () => {
       :prep="headerPrep"
       :ref-search-nav="headerPrep.refSearchNav"
       @search="handleSearch"
-      class="mb-4 xl:mb-5"
     />
-    <div class="rounded-md border p-4">
-      <AppUomList
-        :data="data"
-        :pagination-meta="paginationMeta"
-        @page-change="handlePageChange"
-      />
-    </div>
+
+    <AppUomList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
diff --git a/app/components/content/user/list.vue b/app/components/content/user/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/user/list.vue
+++ b/app/components/content/user/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/warehouse/list.vue b/app/components/content/warehouse/list.vue
index f776d2df..a17ae9bb 100644
--- a/app/components/content/warehouse/list.vue
+++ b/app/components/content/warehouse/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppWarehouseList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/pub/my-ui/combobox/combobox-paginated.vue b/app/components/pub/my-ui/combobox/combobox-paginated.vue
new file mode 100644
index 00000000..74b69ef7
--- /dev/null
+++ b/app/components/pub/my-ui/combobox/combobox-paginated.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+import { type Item } from './index'
+
+const props = defineProps<{
+  id?: string
+  modelValue?: string
+  items: Item[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyMessage?: string
+  class?: string
+  isDisabled?: boolean
+  page?: number
+  totalPage?: number
+  hasNext?: boolean
+  hasPrev?: boolean
+  isLoading?: boolean
+  searchText?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:searchText': [value: string]
+  'page-change': [page: number]
+  next: []
+  prev: []
+}>()
+
+const open = ref(false)
+const internalSearchText = ref(props.searchText || '')
+
+// Keep internal search text synced with props
+watch(
+  () => props.searchText,
+  (val) => {
+    if (val !== internalSearchText.value) internalSearchText.value = val || ''
+  },
+)
+
+const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
+const displayText = computed(() => {
+  if (selectedItem.value?.label) return selectedItem.value.label
+  return props.placeholder || 'Pilih item'
+})
+
+const searchableItems = computed(() => {
+  const itemsWithSearch = props.items.map((item) => ({
+    ...item,
+    searchValue: `${item.code || ''} ${item.label}`.trim(),
+    isSelected: item.value === props.modelValue,
+  }))
+
+  return itemsWithSearch.sort((a, b) => {
+    const aPriority = a.priority ?? 0
+    const bPriority = b.priority ?? 0
+    if (aPriority !== bPriority) return bPriority - aPriority
+    if (a.isSelected && !b.isSelected) return -1
+    if (!a.isSelected && b.isSelected) return 1
+    return a.label.localeCompare(b.label)
+  })
+})
+
+function onSelect(item: Item) {
+  emit('update:modelValue', item.value)
+  open.value = false
+}
+
+function onSearchInput(value: string) {
+  console.log('[ComboboxPaginated] emit update:searchText', value)
+  internalSearchText.value = value
+  emit('update:searchText', value)
+}
+
+function handlePrev() {
+  if (props.hasPrev) emit('prev')
+}
+
+function handleNext() {
+  if (props.hasNext) emit('next')
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        :id="props.id"
+        :disabled="props.isDisabled"
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        :aria-controls="`${props.id}-list`"
+        :aria-describedby="`${props.id}-search`"
+        :class="
+          cn(
+            'h-8 w-full justify-between rounded-md border px-3 font-normal focus:outline-none focus:ring-1 focus:ring-black dark:!border-slate-400 dark:focus:ring-white md:text-xs 2xl:h-9 2xl:text-sm',
+            {
+              'cursor-not-allowed border-gray-300 bg-gray-100 text-gray-500 opacity-50': props.isDisabled,
+              'border-gray-400 bg-white text-black hover:bg-gray-50 dark:border-gray-600 dark:bg-slate-950 dark:text-white dark:hover:bg-gray-700':
+                !props.isDisabled,
+              'text-gray-400 dark:text-gray-500': !props.modelValue && !props.isDisabled,
+            },
+            props.class,
+          )
+        "
+      >
+        {{ displayText }}
+        <Icon
+          name="i-lucide-chevrons-up-down"
+          :class="
+            cn('ml-2 h-4 w-4 shrink-0', {
+              'opacity-30': props.isDisabled,
+              'text-gray-500 opacity-50 dark:text-gray-300': !props.isDisabled,
+            })
+          "
+        />
+      </Button>
+    </PopoverTrigger>
+
+    <PopoverContent
+      class="w-[var(--radix-popover-trigger-width)] border border-gray-200 bg-white p-0 dark:border-gray-700 dark:bg-gray-800"
+    >
+      <Command class="bg-white dark:bg-gray-800">
+        <CommandInput
+          :id="`${props.id}-search`"
+          class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+          :placeholder="searchPlaceholder || 'Cari...'"
+          v-model="internalSearchText"
+          @input="onSearchInput(($event.target as HTMLInputElement).value)"
+          :aria-label="`Cari ${displayText}`"
+        />
+
+        <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+          {{ emptyMessage || 'Item tidak ditemukan.' }}
+        </CommandEmpty>
+
+        <CommandList
+          :id="`${props.id}-list`"
+          role="listbox"
+          class="max-h-60 overflow-auto"
+        >
+          <CommandGroup>
+            <CommandItem
+              v-for="item in searchableItems"
+              :key="item.value"
+              :value="item.value"
+              :class="
+                cn(
+                  'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 md:text-xs xl:text-sm',
+                  'text-black focus:outline-none dark:text-white',
+                  'hover:bg-primary hover:text-white focus:bg-primary focus:text-white',
+                  'data-[highlighted]:bg-primary data-[highlighted]:text-white',
+                )
+              "
+              @select="onSelect(item)"
+            >
+              <div class="flex w-full items-center justify-between">
+                <span>{{ item.label }}</span>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="item.code"
+                    class="text-xs text-muted-foreground"
+                  >
+                    {{ item.code }}
+                  </span>
+                  <Icon
+                    name="i-lucide-check"
+                    :class="cn('h-4 w-4', props.modelValue === item.value ? 'opacity-100' : 'opacity-0')"
+                  />
+                </div>
+              </div>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+
+        <div class="flex items-center justify-between border-t border-gray-200 p-2 text-xs dark:border-gray-700">
+          <div class="flex items-center gap-2">
+            <Icon
+              v-if="props.isLoading"
+              name="i-lucide-loader-2"
+              class="h-3 w-3 animate-spin"
+            />
+            <span v-else>{{ props.page || 1 }} / {{ props.totalPage || 1 }}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              size="sm"
+              variant="ghost"
+              :disabled="!props.hasPrev || props.isDisabled"
+              @click="handlePrev"
+            >
+              Prev
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              :disabled="!props.hasNext || props.isDisabled"
+              @click="handleNext"
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index 4c0c5bb5..23505393 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -23,7 +23,7 @@ const open = ref(false)
 const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
 
 const displayText = computed(() => {
-  console.log(selectedItem);
+  console.log(selectedItem)
   if (selectedItem.value?.label) {
     return selectedItem.value.label
   }
@@ -31,7 +31,7 @@ const displayText = computed(() => {
 })
 
 watch(props, () => {
-  console.log(props.modelValue);
+  console.log(props.modelValue)
 })
 
 const searchableItems = computed(() => {
@@ -74,10 +74,11 @@ function onSelect(item: Item) {
         :aria-describedby="`${props.id}-search`"
         :class="
           cn(
-            'w-full justify-between border dark:!border-slate-400 h-8 2xl:h-9 md:text-xs 2xl:text-sm font-normal rounded-md px-3 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+            'h-8 w-full justify-between rounded-md border px-3 font-normal focus:outline-none focus:ring-1 focus:ring-black dark:!border-slate-400 dark:focus:ring-white md:text-xs 2xl:h-9 2xl:text-sm',
             {
-              'cursor-not-allowed bg-gray-100 opacity-50 border-gray-300 text-gray-500': props.isDisabled,
-              'bg-white text-black dark:bg-slate-950 dark:text-white dark:border-gray-600 border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700': !props.isDisabled,
+              'cursor-not-allowed border-gray-300 bg-gray-100 text-gray-500 opacity-50': props.isDisabled,
+              'border-gray-400 bg-white text-black hover:bg-gray-50 dark:border-gray-600 dark:bg-slate-950 dark:text-white dark:hover:bg-gray-700':
+                !props.isDisabled,
               'text-gray-400 dark:text-gray-500': !modelValue && !props.isDisabled,
             },
             props.class,
@@ -87,22 +88,26 @@ function onSelect(item: Item) {
         {{ displayText }}
         <Icon
           name="i-lucide-chevrons-up-down"
-          :class="cn('ml-2 h-4 w-4 shrink-0', {
-            'opacity-30': props.isDisabled,
-            'opacity-50 text-gray-500 dark:text-gray-300': !props.isDisabled
-          })"
+          :class="
+            cn('ml-2 h-4 w-4 shrink-0', {
+              'opacity-30': props.isDisabled,
+              'text-gray-500 opacity-50 dark:text-gray-300': !props.isDisabled,
+            })
+          "
         />
       </Button>
     </PopoverTrigger>
-    <PopoverContent class="w-[var(--radix-popover-trigger-width)] p-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+    <PopoverContent
+      class="w-[var(--radix-popover-trigger-width)] border border-gray-200 bg-white p-0 dark:border-gray-700 dark:bg-gray-800"
+    >
       <Command class="bg-white dark:bg-gray-800">
         <CommandInput
           :id="`${props.id}-search`"
-          class="h-9 bg-white dark:bg-gray-800 text-black dark:text-white border-0 border-b border-gray-200 dark:border-gray-700 focus:ring-0"
+          class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
           :placeholder="searchPlaceholder || 'Cari...'"
           :aria-label="`Cari ${displayText}`"
         />
-        <CommandEmpty class="text-gray-500 dark:text-gray-400 py-6 text-center text-sm">
+        <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
           {{ emptyMessage || 'Item tidak ditemukan.' }}
         </CommandEmpty>
         <CommandList
@@ -118,7 +123,7 @@ function onSelect(item: Item) {
               :class="
                 cn(
                   'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 md:text-xs xl:text-sm',
-                  'focus:outline-none text-black dark:text-white',
+                  'text-black focus:outline-none dark:text-white',
                   'hover:bg-primary hover:text-white focus:bg-primary focus:text-white',
                   'data-[highlighted]:bg-primary data-[highlighted]:text-white',
                 )
diff --git a/app/components/pub/my-ui/datepicker/datepicker-single.vue b/app/components/pub/my-ui/datepicker/datepicker-single.vue
index 5a13117f..73f748ab 100644
--- a/app/components/pub/my-ui/datepicker/datepicker-single.vue
+++ b/app/components/pub/my-ui/datepicker/datepicker-single.vue
@@ -41,11 +41,11 @@ onMounted(() => {
   <div class="flex flex-col space-y-2">
     <Popover>
       <PopoverTrigger as-child>
-        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
+        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right w-full h-8 2xl:h-9">
           <div class="flex justify-between items-center w-full">
             <p v-if="date">{{ format(date, 'PPP', { locale: localeID }) }}</p>
-            <p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
-            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+            <p v-else class="text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
+            <Icon name="i-lucide-calendar"/>
           </div>
         </Button>
       </PopoverTrigger>
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index 165a6661..4ff05d4c 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -30,7 +30,7 @@ const getLabelSizeIdx = (size: string) => {
 const settingClass = computed(() => {
   const breakPointIdx = getBreakpointIdx(props.gridPoint)
   let cls = breakpoints[breakPointIdx]
-  cls += ' gap-x-4 xl:gap-x-5 gap-y-2 xl:gap-y-3 ' + [
+  cls += ' gap-x-4 2xl:gap-x-5 ' + [
     'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
     'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
   ][props.colCount - 1]
@@ -44,7 +44,7 @@ const settingClass = computed(() => {
     ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
   ][breakPointIdx]
   if (props.cellFlex) {
-    cls += ' ' + [
+    cls += ' gap-y-2 2xl:gap-y-3 ' + [
       '[&_.cell]:flex',
       '[&_.cell]:sm:flex',
       '[&_.cell]:md:flex',
@@ -60,11 +60,11 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' [&_.label]:pb-1 [&_.label]:!pt-0 ';
+    cls += ' gap-y-4 2xl:gap-y-5 [&_.label]:pb-1 [&_.label]:!pt-0 ';
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
-  cls += '[&_textarea]:text-xs [&_textarea]:2xl:!text-sm '
-  cls += '[&_label]:text-xs [&_label]:2xl:!text-sm'
+  cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
+  cls += '[&_label]:md:text-xs [&_label]:md:text-xs [&_label]:2xl:!text-sm'
   return cls
 })
 </script>
diff --git a/app/components/pub/my-ui/doc-entry/field.vue b/app/components/pub/my-ui/doc-entry/field.vue
index 42818744..adca2985 100644
--- a/app/components/pub/my-ui/doc-entry/field.vue
+++ b/app/components/pub/my-ui/doc-entry/field.vue
@@ -9,6 +9,6 @@ const props = defineProps({
 <template>
   <div :class="`field ${props.defaultClass} ${props.class}`">
     <slot />
-    <div v-if="props.errMessage" class="mt-1 md:text-xs 2xl:text-sm font-medium text-red-500">{{ props.errMessage }}</div>
+    <div v-if="props.errMessage" class="mt-1 md:!text-xs 2xl:!text-sm font-medium text-red-500">{{ props.errMessage }}</div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/form/file-field.vue b/app/components/pub/my-ui/form/file-field.vue
new file mode 100644
index 00000000..bc6a86c9
--- /dev/null
+++ b/app/components/pub/my-ui/form/file-field.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label?: string
+  placeholder?: string
+  hint?: string
+  modelValue?: File | null
+  accept?: string[]
+  maxSizeMb?: number
+  errors?: FormErrors
+  class?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  icons?: string
+}>()
+
+const hintMsg = computed(() => {
+  if (props.hint) return props.hint
+  if (props.accept) {
+    return `${props.accept.map((ext) => '.' + ext.replace(/^\./, '')).join(', ')}, maksimal ${props.maxSizeMb} MB`
+  }
+  return 'Gunakan file yang sesuai'
+})
+
+async function onFileChange(event: Event, handleChange: (value: any) => void) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+
+  handleChange(file)
+}
+</script>
+
+<template>
+  <DE.Cell>
+    <DE.Label
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }} ({{ hintMsg }})
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField, handleChange }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl class="flex flex-col">
+            <Input
+              @change="onFileChange($event, handleChange)"
+              type="file"
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index baa4b261..aeb4a4af 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -6,12 +6,15 @@ import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName: string
   placeholder: string
   label: string
   errors?: FormErrors
   class?: string
+  colSpan?: number
   numericOnly?: boolean
   maxLength?: number
   isRequired?: boolean
@@ -42,15 +45,15 @@ function handleInput(event: Event) {
 </script>
 
 <template>
-  <FieldGroup>
-    <Label
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
     >
@@ -77,6 +80,6 @@ function handleInput(event: Event) {
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>
diff --git a/app/components/pub/my-ui/form/label.vue b/app/components/pub/my-ui/form/label.vue
index 74312222..c833dad8 100644
--- a/app/components/pub/my-ui/form/label.vue
+++ b/app/components/pub/my-ui/form/label.vue
@@ -46,7 +46,7 @@ const wrapperClass = computed(() => [
   props.stacked ? '' : positionWrapMap[props.position],
 ])
 
-const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-normal' : positionChildMap[props.position]])
+const labelClass = computed(() => [props.stacked ? 'block mb-1 font-normal' : positionChildMap[props.position]])
 </script>
 
 <template>
diff --git a/app/components/pub/my-ui/form/select.vue b/app/components/pub/my-ui/form/select.vue
index 189f112a..0cfc926b 100644
--- a/app/components/pub/my-ui/form/select.vue
+++ b/app/components/pub/my-ui/form/select.vue
@@ -10,7 +10,7 @@ import SelectTrigger from '~/components/pub/ui/select/SelectTrigger.vue'
 import SelectValue from '~/components/pub/ui/select/SelectValue.vue'
 import { cn } from '~/lib/utils'
 
-interface Item {
+export interface SelectItem {
   value: string
   label: string
   code?: string
@@ -19,7 +19,7 @@ interface Item {
 
 const props = defineProps<{
   modelValue?: string
-  items: Item[]
+  items: SelectItem[]
   placeholder?: string
   label?: string
   separator?: boolean
@@ -116,7 +116,7 @@ watch(
     <SelectTrigger
       :class="
         cn(
-          'rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+          'rounded-md focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
           {
             'cursor-not-allowed bg-gray-100 opacity-50': isDisabled,
             'bg-white text-black dark:bg-gray-800 dark:text-white': !isDisabled,
@@ -132,7 +132,7 @@ watch(
       <SelectValue
         :placeholder="placeholder || 'Pilih item'"
         :class="
-          cn('text-sm', {
+          cn('', {
             'text-gray-400': !props.modelValue,
             'text-black dark:text-white': props.modelValue,
             'text-gray-500': isDisabled,
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
index 3e017f72..01b1ab55 100644
--- a/app/components/pub/my-ui/nav-header/filter.vue
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -48,7 +48,7 @@ function onFilterClick() {
 
 <template>
   <header>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
       <div class="relative w-64">
         <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
         <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index 10ad748b..63535847 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -24,11 +24,11 @@ function btnClick() {
 <template>
   <header>
     <div
-      class="flex items-center justify-between"
+      class="flex items-center justify-between mb-4 2xl:mb-5"
       :class="cn('', props.class)"
     >
       <div class="flex items-center">
-        <div class="font-semibold text-gray-900 md:text-base xl:text-lg">
+        <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
           <Icon
             :name="props.prep.icon!"
             class="mr-2 align-middle md:size-6"
@@ -66,4 +66,5 @@ function btnClick() {
       </div>
     </div>
   </header>
+  <Separator class="my-4 xl:my-5" />
 </template>
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 0e9ec0bf..21603c73 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:text-xs xl:file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/select/Select.vue b/app/components/pub/ui/select/Select.vue
index baf0f06b..b18516fa 100644
--- a/app/components/pub/ui/select/Select.vue
+++ b/app/components/pub/ui/select/Select.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 
     <SelectContent class="rounded border bg-white">
       <SelectGroup>
-        <SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
+        <SelectLabel v-if="label" class="px-2 py-1 text-xs 2xl:text-sm font-semibold">
           {{ label }}
         </SelectLabel>
 
diff --git a/app/components/pub/ui/select/SelectItem.vue b/app/components/pub/ui/select/SelectItem.vue
index aa06498a..7fe5f342 100644
--- a/app/components/pub/ui/select/SelectItem.vue
+++ b/app/components/pub/ui/select/SelectItem.vue
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-xs 2xl:text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/select/SelectLabel.vue b/app/components/pub/ui/select/SelectLabel.vue
index 32d46c1c..bbd20540 100644
--- a/app/components/pub/ui/select/SelectLabel.vue
+++ b/app/components/pub/ui/select/SelectLabel.vue
@@ -8,7 +8,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }
 </script>
 
 <template>
-  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+  <SelectLabel :class="cn('px-2 py-1.5 text-xs 2xl:text-sm font-semibold', props.class)">
     <slot />
   </SelectLabel>
 </template>
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
index 0a81e3cb..ce51f809 100644
--- a/app/components/pub/ui/select/SelectTrigger.vue
+++ b/app/components/pub/ui/select/SelectTrigger.vue
@@ -21,7 +21,7 @@ const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-9 md:h-8 xl:h-9 w-full rounded-md border border-gray-400 pl-3 pr-8 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 pl-3 pr-8 py-2 text-xs 2xl:text-sm file:border-0 file:bg-transparent file:text-xs file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/composables/useDistricts.ts b/app/composables/useDistricts.ts
new file mode 100644
index 00000000..a783ca19
--- /dev/null
+++ b/app/composables/useDistricts.ts
@@ -0,0 +1,180 @@
+import { ref, computed, watch } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { District } from '~/models/district'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as districtService from '~/services/district.service'
+
+// Global cache untuk districts berdasarkan regency code
+const districtsCache = ref<Map<string, District[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function useDistricts(regencyCode: Ref<string | undefined> | string | undefined) {
+  // Convert regencyCode ke ref jika bukan ref
+  const regencyCodeRef = typeof regencyCode === 'string' || regencyCode === undefined ? ref(regencyCode) : regencyCode
+
+  // Computed untuk mendapatkan districts berdasarkan regency code
+  const districts = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return []
+    return districtsCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const districtOptions = computed<SelectItem[]>(() => {
+    return districts.value.map((district) => ({
+      label: toTitleCase(district.name),
+      value: district.code,
+      searchValue: `${district.code} ${district.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch districts berdasarkan regency code
+  async function fetchDistricts(regencyCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && districtsCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await districtService.getList({
+        sort: 'name:asc',
+        'regency-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const districtsData = response.body.data || []
+        districtsCache.value.set(code, districtsData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kecamatan')
+        console.error('Failed to fetch districts:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kecamatan')
+      console.error('Error fetching districts:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari district berdasarkan code
+  function getDistrictByCode(code: string): District | undefined {
+    const regencyCode = regencyCodeRef.value
+    if (!regencyCode) return undefined
+
+    const districtsForRegency = districtsCache.value.get(regencyCode) || []
+    return districtsForRegency.find((district) => district.code === code)
+  }
+
+  // Function untuk mencari district berdasarkan name
+  function getDistrictByName(name: string): District | undefined {
+    const regencyCode = regencyCodeRef.value
+    if (!regencyCode) return undefined
+
+    const districtsForRegency = districtsCache.value.get(regencyCode) || []
+    return districtsForRegency.find((district) => district.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache regency tertentu
+  function clearCache(regencyCodeParam?: string) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (code) {
+      districtsCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    districtsCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshDistricts(regencyCodeParam?: string) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (code) {
+      return fetchDistricts(code, true)
+    }
+  }
+
+  // Debounced regency code untuk mencegah multiple calls
+  const debouncedRegencyCode = refDebounced(regencyCodeRef, 100)
+
+  // Watch perubahan regency code untuk auto fetch
+  watch(
+    debouncedRegencyCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchDistricts(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    districts: readonly(districts),
+    districtOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchDistricts,
+    refreshDistricts,
+    getDistrictByCode,
+    getDistrictByName,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useDistrictsCache = () => ({
+  districtsCache: readonly(districtsCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/usePostalRegion.ts b/app/composables/usePostalRegion.ts
new file mode 100644
index 00000000..79b04955
--- /dev/null
+++ b/app/composables/usePostalRegion.ts
@@ -0,0 +1,169 @@
+import { ref, computed, watch, readonly, type Ref } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { PostalRegion } from '~/models/postal-region'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import * as postalRegionService from '~/services/postal-region.service'
+
+// Global cache untuk postal codes berdasarkan village code
+const postalRegionCache = ref<Map<string, PostalRegion[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function usePostalRegion(villageCode: Ref<string | undefined> | string | undefined) {
+  // Convert villageCode ke ref jika bukan ref
+  const villageCodeRef = typeof villageCode === 'string' || villageCode === undefined ? ref(villageCode) : villageCode
+
+  // Computed untuk mendapatkan postalRegion berdasarkan village code
+  const postalRegion = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return []
+    return postalRegionCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const postalRegionOptions = computed<SelectItem[]>(() => {
+    return postalRegion.value.map((postalRegion) => ({
+      label: postalRegion.code,
+      value: postalRegion.code,
+      searchValue: postalRegion.code,
+    }))
+  })
+
+  // Function untuk fetch postalRegion berdasarkan village code
+  async function fetchpostalRegion(villageCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && postalRegionCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await postalRegionService.getList({
+        sort: 'code:asc',
+        'village-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const postalRegionData = response.body.data || []
+        postalRegionCache.value.set(code, postalRegionData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kode pos')
+        console.error('Failed to fetch postal codes:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kode pos')
+      console.error('Error fetching postal codes:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari postalRegion berdasarkan code
+  function getpostalRegionByCode(code: string): PostalRegion | undefined {
+    const villageCode = villageCodeRef.value
+    if (!villageCode) return undefined
+
+    const postalRegionForVillage = postalRegionCache.value.get(villageCode) || []
+    return postalRegionForVillage.find((postalRegion) => postalRegion.code === code)
+  }
+
+  // Function untuk clear cache village tertentu
+  function clearCache(villageCodeParam?: string) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (code) {
+      postalRegionCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    postalRegionCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshpostalRegion(villageCodeParam?: string) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (code) {
+      return fetchpostalRegion(code, true)
+    }
+  }
+
+  // Debounced village code untuk mencegah multiple calls
+  const debouncedVillageCode = refDebounced(villageCodeRef, 100)
+
+  // Watch perubahan village code untuk auto fetch
+  watch(
+    debouncedVillageCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchpostalRegion(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    postalRegion: readonly(postalRegion),
+    postalRegionOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchpostalRegion,
+    refreshpostalRegion,
+    getpostalRegionByCode,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const usepostalRegionCache = () => ({
+  postalRegionCache: readonly(postalRegionCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useProvinces.ts b/app/composables/useProvinces.ts
new file mode 100644
index 00000000..b1fc8609
--- /dev/null
+++ b/app/composables/useProvinces.ts
@@ -0,0 +1,111 @@
+import { ref, computed } from 'vue'
+import type { Province } from '~/models/province'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as provinceService from '~/services/province.service'
+
+// Global state untuk caching
+const provincesCache = ref<Province[]>([])
+const isLoading = ref(false)
+const isInitialized = ref(false)
+const error = ref<string | null>(null)
+
+export function useProvinces() {
+  // Computed untuk format SelectItem
+  const provinceOptions = computed<SelectItem[]>(() => {
+    return provincesCache.value.map((province) => ({
+      label: toTitleCase(province.name),
+      value: province.code,
+      // code: province.code,
+      searchValue: `${province.code} ${province.name}`.trim(), // Untuk search internal combobox
+    }))
+  })
+
+  // Function untuk fetch data provinces
+  async function fetchProvinces(forceRefresh = false) {
+    // Jika sudah ada data dan tidak force refresh, skip
+    if (isInitialized.value && !forceRefresh) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (isLoading.value) {
+      return
+    }
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const response = await provinceService.getList({
+        'page-no-limit': true,
+        sort: 'name:asc',
+      })
+
+      if (response.success) {
+        provincesCache.value = response.body.data || []
+        isInitialized.value = true
+      } else {
+        error.value = 'Gagal memuat data provinsi'
+        console.error('Failed to fetch provinces:', response)
+      }
+    } catch (err) {
+      error.value = 'Terjadi kesalahan saat memuat data provinsi'
+      console.error('Error fetching provinces:', err)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  // Function untuk mencari province berdasarkan code
+  function getProvinceByCode(code: string): Province | undefined {
+    return provincesCache.value.find((province) => province.code === code)
+  }
+
+  // Function untuk mencari province berdasarkan name
+  function getProvinceByName(name: string): Province | undefined {
+    return provincesCache.value.find((province) => province.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache (jika diperlukan)
+  function clearCache() {
+    provincesCache.value = []
+    isInitialized.value = false
+    error.value = null
+  }
+
+  // Function untuk refresh data
+  function refreshProvinces() {
+    return fetchProvinces(true)
+  }
+
+  // Auto fetch saat composable pertama kali digunakan
+  if (!isInitialized.value && !isLoading.value) {
+    fetchProvinces()
+  }
+
+  return {
+    // Data
+    provinces: readonly(provincesCache),
+    provinceOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    isInitialized: readonly(isInitialized),
+    error: readonly(error),
+
+    // Methods
+    fetchProvinces,
+    refreshProvinces,
+    getProvinceByCode,
+    getProvinceByName,
+    clearCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useProvincesCache = () => ({
+  provinces: readonly(provincesCache),
+  isLoading: readonly(isLoading),
+  isInitialized: readonly(isInitialized),
+})
diff --git a/app/composables/useRegencies.ts b/app/composables/useRegencies.ts
new file mode 100644
index 00000000..d816a5ed
--- /dev/null
+++ b/app/composables/useRegencies.ts
@@ -0,0 +1,386 @@
+import { ref, computed, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import type { Regency } from '~/models/regency'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { toTitleCase } from '~/lib/utils'
+import * as regencyService from '~/services/regency.service'
+
+// Interface untuk query parameters
+interface RegencyQueryParams {
+  'province-code'?: string
+  search?: string
+  'page-number'?: number
+  'page-size'?: number
+  sort?: string
+}
+
+// Interface untuk cached data dengan pagination
+interface CachedRegencyData {
+  data: Regency[]
+  meta: PaginationMeta
+  queryKey: string // untuk tracking query yang berbeda
+}
+
+// Global cache untuk regencies berdasarkan query key (province-code + search + pagination)
+const regenciesCache = reactive(new Map<string, CachedRegencyData>())
+const loadingStates = reactive(new Map<string, boolean>())
+const errorStates = reactive(new Map<string, string | null>())
+
+interface UseRegenciesOptions {
+  provinceCode?: Ref<string | undefined> | string | undefined
+  pageSize?: number
+  enablePagination?: boolean
+  enableSearch?: boolean
+}
+
+export function useRegencies(options: UseRegenciesOptions | Ref<string | undefined> | string | undefined = {}) {
+  // Backward compatibility - jika parameter pertama adalah provinceCode
+  const normalizedOptions: UseRegenciesOptions =
+    typeof options === 'object' && 'value' in options
+      ? { provinceCode: options }
+      : typeof options === 'string' || options === undefined
+        ? { provinceCode: options }
+        : options
+
+  const { provinceCode, pageSize = 10, enablePagination = true, enableSearch = true } = normalizedOptions
+
+  // Convert provinceCode ke ref jika bukan ref
+  const provinceCodeRef =
+    typeof provinceCode === 'string' || provinceCode === undefined ? ref(provinceCode) : provinceCode || ref(undefined)
+
+  // State untuk pagination dan search
+  const currentPage = ref(1)
+  const currentPageSize = ref(pageSize)
+  const searchQuery = ref('')
+
+  // Function untuk generate query key
+  const generateQueryKey = (params: RegencyQueryParams) => {
+    const keyParts = [
+      params['province-code'] || '',
+      params.search || '',
+      params['page-number'] || 1,
+      params['page-size'] || pageSize,
+      params.sort || 'name:asc',
+    ]
+    return keyParts.join('|')
+  }
+
+  // Current query key
+  const currentQueryKey = computed(() => {
+    return generateQueryKey({
+      'province-code': provinceCodeRef.value,
+      search: enableSearch ? searchQuery.value : undefined,
+      'page-number': enablePagination ? currentPage.value : undefined,
+      'page-size': enablePagination ? currentPageSize.value : undefined,
+      sort: 'name:asc',
+    })
+  })
+
+  // Computed untuk mendapatkan regencies berdasarkan current query
+  const regencies = computed(() => {
+    const queryKey = currentQueryKey.value
+    const cachedData = regenciesCache.get(queryKey)
+    return cachedData?.data || []
+  })
+
+  // Computed untuk pagination meta
+  const paginationMeta = computed(() => {
+    const queryKey = currentQueryKey.value
+    const cachedData = regenciesCache.get(queryKey)
+    return (
+      cachedData?.meta || {
+        recordCount: 0,
+        page: currentPage.value,
+        pageSize: currentPageSize.value,
+        totalPage: 0,
+        hasNext: false,
+        hasPrev: false,
+      }
+    )
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const queryKey = currentQueryKey.value
+    return loadingStates.get(queryKey) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const queryKey = currentQueryKey.value
+    return errorStates.get(queryKey) || null
+  })
+
+  // Computed untuk format Item
+  const regencyOptions = computed<Item[]>(() => {
+    return regencies.value.map((regency) => ({
+      label: toTitleCase(regency.name),
+      value: regency.code,
+      searchValue: `${regency.code} ${regency.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch regencies dengan pagination dan search
+  async function fetchRegencies(params?: Partial<RegencyQueryParams>, forceRefresh = false) {
+    const queryParams: RegencyQueryParams = {
+      'province-code': params?.['province-code'] || provinceCodeRef.value,
+      search: enableSearch ? params?.search || searchQuery.value : undefined,
+      'page-number': enablePagination ? params?.['page-number'] || currentPage.value : undefined,
+      'page-size': enablePagination ? params?.['page-size'] || currentPageSize.value : undefined,
+      sort: params?.sort || 'name:asc',
+    }
+
+    // Jika tidak ada province code, return
+    // if (!queryParams['province-code']) return  // buat komponen select birth
+
+    const queryKey = generateQueryKey(queryParams)
+
+    // Jika tidak force refresh dan sudah ada cache, skip
+    if (!forceRefresh && regenciesCache.has(queryKey)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.get(queryKey)) {
+      return
+    }
+
+    loadingStates.set(queryKey, true)
+    errorStates.set(queryKey, null)
+
+    try {
+      // Prepare API parameters
+      const apiParams: any = {
+        sort: queryParams.sort,
+        'province-code': queryParams['province-code'],
+      }
+
+      // Add pagination or no-limit based on enablePagination
+      if (enablePagination && queryParams['page-number'] && queryParams['page-size']) {
+        apiParams['page-number'] = queryParams['page-number']
+        apiParams['page-size'] = queryParams['page-size']
+      } else {
+        apiParams['page-no-limit'] = true
+      }
+
+      // Add search if enabled and has value
+      if (enableSearch && queryParams.search && queryParams.search.trim().length >= 3) {
+        apiParams.search = queryParams.search.trim()
+      }
+
+      const response = await regencyService.getList(apiParams)
+
+      if (response.success) {
+        const regenciesData = response.body.data || []
+        const meta = response.body.meta || { record_totalCount: regenciesData.length }
+
+        // Create pagination meta
+        const paginationMeta: PaginationMeta = {
+          recordCount: meta.record_totalCount,
+          page: queryParams['page-number'] || 1,
+          pageSize: queryParams['page-size'] || regenciesData.length,
+          totalPage:
+            enablePagination && queryParams['page-size']
+              ? Math.ceil(meta.record_totalCount / queryParams['page-size'])
+              : 1,
+          hasNext: false,
+          hasPrev: false,
+        }
+
+        if (enablePagination && queryParams['page-size']) {
+          paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+          paginationMeta.hasPrev = paginationMeta.page > 1
+        }
+
+        // Cache the result
+        regenciesCache.set(queryKey, {
+          data: [...regenciesData],
+          meta: { ...paginationMeta },
+          queryKey,
+        })
+      } else {
+        errorStates.set(queryKey, 'Gagal memuat data kabupaten/kota')
+        console.error('Failed to fetch regencies:', response)
+      }
+    } catch (err) {
+      errorStates.set(queryKey, 'Terjadi kesalahan saat memuat data kabupaten/kota')
+      console.error('Error fetching regencies:', err)
+    } finally {
+      loadingStates.set(queryKey, false)
+    }
+  }
+
+  // Function untuk mencari regency berdasarkan code (search di semua cached data)
+  function getRegencyByCode(code: string): Regency | undefined {
+    // Search di semua cached data
+    for (const cachedData of regenciesCache.values()) {
+      const found = cachedData.data.find((regency) => regency.code === code)
+      if (found) return found
+    }
+    return undefined
+  }
+
+  // Function untuk mencari regency berdasarkan name (search di semua cached data)
+  function getRegencyByName(name: string): Regency | undefined {
+    // Search di semua cached data
+    for (const cachedData of regenciesCache.values()) {
+      const found = cachedData.data.find((regency) => regency.name.toLowerCase() === name.toLowerCase())
+      if (found) return found
+    }
+    return undefined
+  }
+
+  // Function untuk pagination
+  function goToPage(page: number) {
+    if (page >= 1 && page <= paginationMeta.value.totalPage) {
+      currentPage.value = page
+    }
+  }
+
+  function nextPage() {
+    if (paginationMeta.value.hasNext) {
+      currentPage.value += 1
+    }
+  }
+
+  function prevPage() {
+    if (paginationMeta.value.hasPrev) {
+      currentPage.value -= 1
+    }
+  }
+
+  function changePageSize(size: number) {
+    currentPageSize.value = size
+    currentPage.value = 1 // Reset ke halaman pertama
+  }
+
+  // Function untuk search
+  function setSearch(query: string) {
+    searchQuery.value = query
+    currentPage.value = 1 // Reset ke halaman pertama saat search
+  }
+
+  function clearSearch() {
+    searchQuery.value = ''
+    currentPage.value = 1
+  }
+
+  // Function untuk clear cache berdasarkan query key pattern
+  function clearCache(provinceCodeParam?: string) {
+    const code = provinceCodeParam || provinceCodeRef.value
+    if (code) {
+      // Clear semua cache yang mengandung province code tersebut
+      const keysToDelete: string[] = []
+      for (const [key] of regenciesCache.entries()) {
+        if (key.startsWith(code + '|')) {
+          keysToDelete.push(key)
+        }
+      }
+      keysToDelete.forEach((key) => {
+        regenciesCache.delete(key)
+        loadingStates.delete(key)
+        errorStates.delete(key)
+      })
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    regenciesCache.clear()
+    loadingStates.clear()
+    errorStates.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshRegencies(params?: Partial<RegencyQueryParams>) {
+    return fetchRegencies(params, true)
+  }
+
+  // Debounced province code untuk mencegah multiple calls
+  const debouncedProvinceCode = refDebounced(provinceCodeRef, 100)
+
+  // Watch perubahan province code untuk auto fetch
+  watch(
+    debouncedProvinceCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Reset pagination dan search saat province code berubah
+        currentPage.value = 1
+        if (enableSearch) {
+          searchQuery.value = ''
+        }
+        fetchRegencies()
+      }
+    },
+    { immediate: true },
+  )
+
+  const triggerFetchAfterIdle = useDebounceFn(() => {
+    if (enableSearch) {
+      currentPage.value = 1
+      fetchRegencies()
+    }
+  }, 1000)
+
+  // Watch perubahan search query untuk auto fetch dan reset halaman
+  watch(searchQuery, (newSearch, oldSearch) => {
+    if (newSearch !== oldSearch) {
+      triggerFetchAfterIdle()
+    }
+  })
+
+  // Watch perubahan pagination untuk auto fetch
+  watch([currentPage, currentPageSize], () => {
+    if (enablePagination) {
+      fetchRegencies()
+    }
+  })
+
+  watch(regencyOptions, (val) => {
+    console.log('[regencyOptions] updated', val.length)
+  })
+
+  return {
+    // Data
+    regencies: readonly(regencies),
+    regencyOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+    paginationMeta: readonly(paginationMeta),
+
+    // Search state
+    searchQuery: enableSearch ? searchQuery : readonly(ref('')),
+
+    // Pagination state
+    currentPage: enablePagination ? currentPage : readonly(ref(1)),
+    currentPageSize: enablePagination ? currentPageSize : readonly(ref(pageSize)),
+
+    // Methods
+    fetchRegencies,
+    refreshRegencies,
+    getRegencyByCode,
+    getRegencyByName,
+    clearCache,
+    clearAllCache,
+
+    // Pagination methods
+    goToPage: enablePagination ? goToPage : () => {},
+    nextPage: enablePagination ? nextPage : () => {},
+    prevPage: enablePagination ? prevPage : () => {},
+    changePageSize: enablePagination ? changePageSize : () => {},
+
+    // Search methods
+    setSearch: enableSearch ? setSearch : () => {},
+    clearSearch: enableSearch ? clearSearch : () => {},
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useRegenciesCache = () => ({
+  regenciesCache: readonly(regenciesCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useVillages.ts b/app/composables/useVillages.ts
new file mode 100644
index 00000000..68713fe2
--- /dev/null
+++ b/app/composables/useVillages.ts
@@ -0,0 +1,181 @@
+import { ref, computed, watch } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { Village } from '~/models/village'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as villageService from '~/services/village.service'
+
+// Global cache untuk villages berdasarkan district code
+const villagesCache = ref<Map<string, Village[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function useVillages(districtCode: Ref<string | undefined> | string | undefined) {
+  // Convert districtCode ke ref jika bukan ref
+  const districtCodeRef =
+    typeof districtCode === 'string' || districtCode === undefined ? ref(districtCode) : districtCode
+
+  // Computed untuk mendapatkan villages berdasarkan district code
+  const villages = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return []
+    return villagesCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const villageOptions = computed<SelectItem[]>(() => {
+    return villages.value.map((village) => ({
+      label: toTitleCase(village.name),
+      value: village.code,
+      searchValue: `${village.code} ${village.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch villages berdasarkan district code
+  async function fetchVillages(districtCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && villagesCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await villageService.getList({
+        sort: 'name:asc',
+        'district-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const villagesData = response.body.data || []
+        villagesCache.value.set(code, villagesData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kelurahan')
+        console.error('Failed to fetch villages:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kelurahan')
+      console.error('Error fetching villages:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari village berdasarkan code
+  function getVillageByCode(code: string): Village | undefined {
+    const districtCode = districtCodeRef.value
+    if (!districtCode) return undefined
+
+    const villagesForDistrict = villagesCache.value.get(districtCode) || []
+    return villagesForDistrict.find((village) => village.code === code)
+  }
+
+  // Function untuk mencari village berdasarkan name
+  function getVillageByName(name: string): Village | undefined {
+    const districtCode = districtCodeRef.value
+    if (!districtCode) return undefined
+
+    const villagesForDistrict = villagesCache.value.get(districtCode) || []
+    return villagesForDistrict.find((village) => village.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache district tertentu
+  function clearCache(districtCodeParam?: string) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (code) {
+      villagesCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    villagesCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshVillages(districtCodeParam?: string) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (code) {
+      return fetchVillages(code, true)
+    }
+  }
+
+  // Debounced district code untuk mencegah multiple calls
+  const debouncedDistrictCode = refDebounced(districtCodeRef, 100)
+
+  // Watch perubahan district code untuk auto fetch
+  watch(
+    debouncedDistrictCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchVillages(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    villages: readonly(villages),
+    villageOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchVillages,
+    refreshVillages,
+    getVillageByCode,
+    getVillageByName,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useVillagesCache = () => ({
+  villagesCache: readonly(villagesCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/handlers/_handler.ts b/app/handlers/_handler.ts
index 66177937..01a191b8 100644
--- a/app/handlers/_handler.ts
+++ b/app/handlers/_handler.ts
@@ -129,23 +129,34 @@ export function genCrudHandler<T = any>(crud: {
     recItem.value = null
   }
 
-  async function handleActionSave(values: any, refresh: () => void, reset: () => void, toast: ToastFn) {
+  async function handleActionSave(
+    values: any,
+    refresh: () => void,
+    reset: () => void,
+    toast: ToastFn,
+  ): Promise<any | null> {
     isProcessing.value = true
+
+    let successResponse: any = null
+
     await handleAsyncAction<[any], any>({
       action: crud.create,
       args: [values],
       toast,
       successMessage: 'Data berhasil disimpan',
       errorMessage: 'Gagal menyimpan data',
-      onSuccess: () => {
+      onSuccess: (result) => {
         isFormEntryDialogOpen.value = false
         if (refresh) refresh()
+        successResponse = result
       },
       onFinally: (isSuccess: boolean) => {
         if (isSuccess) setTimeout(reset, 500)
         isProcessing.value = false
       },
     })
+
+    return successResponse
   }
 
   async function handleActionEdit(
diff --git a/app/handlers/diagnose-src.handler.ts b/app/handlers/diagnose-src.handler.ts
new file mode 100644
index 00000000..c109e6fc
--- /dev/null
+++ b/app/handlers/diagnose-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/diagnose-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/medical-action-src.handler.ts b/app/handlers/medical-action-src.handler.ts
new file mode 100644
index 00000000..652d6d60
--- /dev/null
+++ b/app/handlers/medical-action-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medical-action-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/patient.handler.ts b/app/handlers/patient.handler.ts
new file mode 100644
index 00000000..f87eaf71
--- /dev/null
+++ b/app/handlers/patient.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { postPatient as create, patchPatient as update, removePatient as remove } from '~/services/patient.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/procedure-src.handler.ts b/app/handlers/procedure-src.handler.ts
new file mode 100644
index 00000000..7c949356
--- /dev/null
+++ b/app/handlers/procedure-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/procedure-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 05213784..59dd9bf5 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -85,6 +85,7 @@ export const religionCodes: Record<string, string> = {
   hindu: 'Hindu',
   buda: 'Buda',
   konghucu: 'Konghucu',
+  other: 'Kepercayaan Lain',
 }
 
 export const educationCodes: Record<string, string> = {
@@ -102,13 +103,91 @@ export const educationCodes: Record<string, string> = {
 }
 
 export const occupationCodes: Record<string, string> = {
-  'tidak-bekerja': 'Tidak Bekerja',
+  unknown: 'Tidak diketahui',
+  tidak_bekerja: 'Belum/Tidak Bekerja',
+  mengurus_rumah_tangga: 'Mengurus Rumah Tangga',
+  pelajar: 'Pelajar/Mahasiswa',
+  pensiunan: 'Pensiunan',
   pns: 'Pegawai Negeri Sipil',
-  polisi: 'Polisi',
-  tni: 'TNI',
+  tni: 'Tentara Nasional Indonesia',
+  polri: 'Kepolisian RI',
+  perdagangan: 'Perdagangan',
+  petani: 'Petani/Pekebun',
+  peternak: 'Peternak',
+  nelayan: 'Nelayan/Perikanan',
+  industri: 'Industri',
+  konstruksi: 'Konstruksi',
+  transportasi: 'Transportasi',
+  karyawan_swasta: 'Karyawan Swasta',
+  karyawan_bumn: 'Karyawan BUMN',
+  karyawan_bumd: 'Karyawan BUMD',
+  karyawan_honorer: 'Karyawan Honorer',
+  buruh_harian: 'Buruh Harian Lepas',
+  buruh_tani: 'Buruh Tani/Perkebunan',
+  buruh_nelayan: 'Buruh Nelayan/Perikanan',
+  buruh_peternakan: 'Buruh Peternakan',
+  pembantu_rumah_tangga: 'Pembantu Rumah Tangga',
+  tukang_cukur: 'Tukang Cukur',
+  tukang_listrik: 'Tukang Listrik',
+  tukang_batu: 'Tukang Batu',
+  tukang_kayu: 'Tukang Kayu',
+  tukang_sol_sepatu: 'Tukang Sol Sepatu',
+  tukang_jahit: 'Tukang Jahit',
+  tukang_gigi: 'Tukang Gigi',
+  penata_rias: 'Penata Rias',
+  penata_busana: 'Penata Busana',
+  penata_rambut: 'Penata Rambut',
+  mekanik: 'Mekanik',
+  seniman: 'Seniman',
+  tabib: 'Tabib',
+  paraji: 'Paraji',
+  perancang_busana: 'Perancang Busana',
+  penterjemah: 'Penterjemah',
+  imam_mesjid: 'Imam Mesjid',
+  pendeta: 'Pendeta',
+  pastor: 'Pastor',
+  wartawan: 'Wartawan',
+  ustadz: 'Ustadz/Mubaligh',
+  juru_masak: 'Juru Masak',
+  promotor: 'Promotor Acara',
+  dpr_ri: 'Anggota DPR-RI',
+  dpd: 'Anggota DPD',
+  bpk: 'Anggota BPK',
+  presiden: 'Presiden',
+  wakil_presiden: 'Wakil Presiden',
+  mk: 'Anggota Mahkamah Konstitusi',
+  kabinet: 'Anggota Kabinet/Kementrian',
+  dubes: 'Duta Besar',
+  gubernur: 'Gubernur',
+  wakil_gubernur: 'Wakil Gubernur',
+  bupati: 'Bupati',
+  wakil_bupati: 'Wakil Bupati',
+  walikota: 'Walikota',
+  wakil_walikota: 'Wakil Walikota',
+  dprd_provinsi: 'Anggota DPRD Provinsi',
+  dprd_kabkota: 'Anggota DPRD Kabupaten/Kota',
+  dosen: 'Dosen',
   guru: 'Guru',
+  pilot: 'Pilot',
+  pengacara: 'Pengacara',
+  arsitek: 'Arsitek',
+  akuntan: 'Akuntan',
+  konsultan: 'Konsultan',
+  dokter: 'Dokter',
+  bidan: 'Bidan',
+  apoteker: 'Apoteker',
+  psikolog: 'Psikiater/Psikolog',
+  penyiar_tv: 'Penyiar Televisi',
+  penyiar_radio: 'Penyiar Radio',
+  pelaut: 'Pelaut',
+  sopir: 'Sopir',
+  pialang: 'Pialang',
+  paranormal: 'Paranormal',
+  pedagang: 'Pedagang',
+  perangkat_desa: 'Perangkat Desa',
+  kepala_desa: 'Kepala Desa',
+  biarawati: 'Biarawati',
   wiraswasta: 'Wiraswasta',
-  'kary-swasta': 'Karyawan Swasta',
   lainnya: 'Lainnya',
 }
 
@@ -248,7 +327,10 @@ export const uploadCode: Record<string, string> = {
   kk: 'person-family-card',
   paspor: 'person-passport',
   'mcu-report': 'mcu-item-result',
-}
+} as const
+
+export type UploadCodeKey = keyof typeof uploadCode
+export type UploadCodeValue = (typeof uploadCode)[UploadCodeKey]
 
 export const infraGroupCodes: Record<string, string> = {
   building: 'Bangunan',
@@ -268,3 +350,19 @@ export const infraGroupCodesKeys: Record<string, string> = Object.keys(infraGrou
   },
   {} as Record<string, string>,
 )
+
+export const addressLocationTypeCode: Record<string, string> = {
+  identity: 'Alamat KTP',
+  domicile: 'Alamat Domisili',
+}
+
+export type AddressLocationTypeCode = keyof typeof addressLocationTypeCode
+export const medicalActionTypeCode: Record<string, string> = {
+  chemo: 'Chemo',
+  hemo: 'Hemo',
+  thalasemia: 'Thalasemia',
+  echocardio: 'Echocardiography',
+  spirometry: 'Spirometry',
+} as const
+
+export type medicalActionTypeCodeKey = keyof typeof medicalActionTypeCode
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 9ffd7dc9..357d8700 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -27,6 +27,16 @@ export function mapToComboboxOptList(items: Record<string, string>): SelectOptio
   return result
 }
 
+/**
+ * Mengkonversi string menjadi title case (huruf pertama setiap kata kapital)
+ * @param str - String yang akan dikonversi
+ * @returns String dalam format title case
+ */
+export function toTitleCase(str: string): string {
+  return str.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
+
 /**
  * Menghitung umur berdasarkan tanggal lahir
  * @param birthDate - Tanggal lahir dalam format Date atau string
diff --git a/app/models/diagnose-src.ts b/app/models/diagnose-src.ts
new file mode 100644
index 00000000..5d25a54a
--- /dev/null
+++ b/app/models/diagnose-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface DiagnoseSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genDiagnoseSrc(): DiagnoseSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}
diff --git a/app/models/district.ts b/app/models/district.ts
new file mode 100644
index 00000000..611f4435
--- /dev/null
+++ b/app/models/district.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+import type { Regency } from './regency'
+
+export interface District extends Base {
+  regency_code: string
+  code: string
+  name: string
+
+  // preload
+  regency?: Regency | null
+}
+
+export function genDistrict(): District {
+  return {
+    ...genBase(),
+    regency_code: '',
+    name: '',
+    code: '',
+  }
+}
diff --git a/app/models/medical-action-src-item.ts b/app/models/medical-action-src-item.ts
new file mode 100644
index 00000000..0f04657a
--- /dev/null
+++ b/app/models/medical-action-src-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface MedicalActionSrcItem extends Base {
+  medicalActionSrc_id: number
+  procedureSrc_id: number
+  item_id: number
+}
+
+export function genMedicalActionSrcItem(): MedicalActionSrcItem {
+  return {
+    ...genBase(),
+    medicalActionSrc_id: 0,
+    procedureSrc_id: 0,
+    item_id: 0,
+  }
+}
diff --git a/app/models/medical-action-src.ts b/app/models/medical-action-src.ts
new file mode 100644
index 00000000..21d36c84
--- /dev/null
+++ b/app/models/medical-action-src.ts
@@ -0,0 +1,19 @@
+import { type Base, genBase } from './_base'
+import type { medicalActionTypeCodeKey } from '~/lib/constants'
+
+export interface MedicalActionSrc extends Base {
+  code: string
+  name: string
+  type_code: medicalActionTypeCodeKey
+  item_id: number
+}
+
+export function genMedicalActionSrc(): MedicalActionSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    type_code: '',
+    item_id: 0,
+  }
+}
diff --git a/app/models/patient.ts b/app/models/patient.ts
index 11b8d778..46e0f81d 100644
--- a/app/models/patient.ts
+++ b/app/models/patient.ts
@@ -40,13 +40,35 @@ export interface genPatientProps {
 export function genPatientEntity(props: genPatientProps): PatientEntity {
   const { patient, residentAddress, cardAddress, familyData, contacts, responsible } = props
 
-  const addresses: PersonAddress[] = [{ ...genBase(), person_id: 0, locationType: '', ...residentAddress }]
+  const addresses: PersonAddress[] = [{ ...genBase(), person_id: 0, ...residentAddress }]
   const familiesContact: PersonRelative[] = []
   const personContacts: PersonContact[] = []
 
   // jika alamat ktp sama dengan domisili saat ini
-  if (cardAddress.isSameAddress === '1') {
-    addresses.push({ ...genBase(), person_id: 0, locationType: '', ...residentAddress })
+  if (cardAddress.isSameAddress) {
+    addresses.push({
+      ...genBase(),
+      ...residentAddress,
+      person_id: 0,
+      locationType_code: cardAddress.locationType_code || 'identity'
+    })
+  } else {
+    // jika alamat berbeda, tambahkan alamat relatif
+    // Pastikan semua field yang diperlukan ada
+    const relativeAddress = {
+      ...genBase(),
+      person_id: 0,
+      locationType_code: cardAddress.locationType_code || 'identity',
+      address: cardAddress.address || '',
+      province_code: cardAddress.province_code || '',
+      regency_code: cardAddress.regency_code || '',
+      district_code: cardAddress.district_code || '',
+      village_code: cardAddress.village_code || '',
+      postalRegion_code: cardAddress.postalRegion_code || '',
+      rt: cardAddress.rt,
+      rw: cardAddress.rw,
+    }
+    addresses.push(relativeAddress)
   }
 
   // add data orang tua
@@ -97,7 +119,7 @@ export function genPatientEntity(props: genPatientProps): PatientEntity {
     person: {
       id: 0,
       name: patient.fullName,
-      alias: patient.alias,
+      // alias: patient.alias,
       birthDate: patient.birthDate,
       birthRegency_code: patient.birthPlace,
       gender_code: patient.gender,
@@ -111,7 +133,7 @@ export function genPatientEntity(props: genPatientProps): PatientEntity {
       ethnic_code: patient.ethnicity,
       language_code: patient.language,
       communicationIssueStatus: patient.communicationBarrier,
-      disability: patient.disability,
+      disability: patient.disabilityType || '',
       nationality: patient.nationality,
       // residentIdentityFileUrl: patient.residentIdentityFileUrl,
       // passportFileUrl: patient.passportFileUrl,
@@ -126,17 +148,16 @@ export function genPatientEntity(props: genPatientProps): PatientEntity {
     personRelatives: familiesContact,
     registeredAt: new Date(),
     status_code: 'active',
-    newBornStatus: false,
+    newBornStatus: patient.isNewBorn,
     person_id: 0,
     id: 0,
-    number: '0x000000000000000000000000000000',
+    number: '',
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     deletedAt: null,
   }
 }
 
-
 // New model
 export interface Patient extends Base {
   person_id?: number
diff --git a/app/models/person-address.ts b/app/models/person-address.ts
index 1f085c65..c425bc3c 100644
--- a/app/models/person-address.ts
+++ b/app/models/person-address.ts
@@ -1,21 +1,47 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import type { AddressLocationTypeCode } from '~/lib/constants'
+import type { PostalRegion } from './postal-region'
+import { toTitleCase } from '~/lib/utils'
 export interface PersonAddress extends Base {
   person_id: number
-  locationType: string
+  locationType_code: AddressLocationTypeCode
   address: string
   rt?: string
   rw?: string
-  postalCode?: string
+  postalRegion_code?: string
   village_code: string
+
+  // preload
+  postalRegion?: PostalRegion | null
+  locationType?: AddressLocationTypeCode
 }
 
 export function genPersonAddress(): PersonAddress {
   return {
     ...genBase(),
     person_id: 0,
-    locationType: '',
+    locationType_code: '',
     address: '',
     village_code: '',
   }
 }
+
+export function formatAddress(builder?: PersonAddress) {
+  if (!builder) return ''
+
+  const village = builder?.postalRegion?.village
+  const district = village?.district
+  const regency = district?.regency
+  const province = regency?.province
+
+  const parts = [
+    builder?.address,
+    village?.name,
+    district?.name,
+    toTitleCase(regency?.name || ''),
+    toTitleCase(province?.name || ''),
+    builder?.postalRegion_code,
+  ].filter(Boolean)
+
+  return parts.join(', ')
+}
diff --git a/app/models/person-relative.ts b/app/models/person-relative.ts
index 3b140abb..0391b63a 100644
--- a/app/models/person-relative.ts
+++ b/app/models/person-relative.ts
@@ -12,3 +12,4 @@ export interface PersonRelative {
   occupation_code?: string
   responsible?: boolean
 }
+
diff --git a/app/models/person.ts b/app/models/person.ts
index 86506465..477dd778 100644
--- a/app/models/person.ts
+++ b/app/models/person.ts
@@ -2,12 +2,13 @@ import { type Base, genBase } from "./_base"
 import type { PersonAddress } from "./person-address"
 import type { PersonContact } from "./person-contact"
 import type { PersonRelative } from "./person-relative"
+import type { Ethnic } from './ethnic'
+import type { Language } from './language'
+import type { Regency } from './regency'
 
 export interface Person extends Base {
-  // todo: awaiting approve from stake holder: buat field sapaan
-  // todo: adjust field ketika person  Balita
   name: string
-  alias?: string
+  // alias?: string
   frontTitle?: string
   endTitle?: string
   birthDate?: Date | string
@@ -29,9 +30,14 @@ export interface Person extends Base {
   passportFileUrl?: string
   drivingLicenseFileUrl?: string
   familyIdentityFileUrl?: string
-  addresses?: PersonAddress[]
-  contacts?: PersonContact[]
-  relatives?: PersonRelative[]
+
+  // preload data for detail patient
+  birthRegency?: Regency | null
+  addresses?: PersonAddress[] | null
+  contacts?: PersonContact[] | null
+  relatives?: PersonRelative[] | null
+  ethnic?: Ethnic | null
+  language?: Language | null
 }
 
 export function genPerson(): Person {
diff --git a/app/models/postal-region.ts b/app/models/postal-region.ts
new file mode 100644
index 00000000..581d0bc7
--- /dev/null
+++ b/app/models/postal-region.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from './_base'
+import type { Village } from './village'
+
+export interface PostalRegion extends Base {
+  code: string
+  village_code: string
+
+  // preload
+  village?: Village | null
+}
+
+export function genPostalRegion(): PostalRegion {
+  return {
+    ...genBase(),
+    code: '',
+    village_code: '',
+  }
+}
diff --git a/app/models/procedure-src.ts b/app/models/procedure-src.ts
new file mode 100644
index 00000000..c86adcf9
--- /dev/null
+++ b/app/models/procedure-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface ProcedureSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genProcedureSrc(): ProcedureSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}
diff --git a/app/models/regency.ts b/app/models/regency.ts
index 494f256e..09418a52 100644
--- a/app/models/regency.ts
+++ b/app/models/regency.ts
@@ -1,9 +1,12 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
+import type { Province } from './province'
 
 export interface Regency extends Base {
   code: string
   name: string
   province_code: string
+
+  province?: Province | null
 }
 
 export function genRegency(): Regency {
diff --git a/app/models/village.ts b/app/models/village.ts
new file mode 100644
index 00000000..6e36636f
--- /dev/null
+++ b/app/models/village.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+import type { District } from './district'
+
+export interface Village extends Base {
+  district_code: string
+  code: string
+  name: string
+
+  // preload
+  district?: District | null
+}
+
+export function genVillage(): Village {
+  return {
+    ...genBase(),
+    district_code: '',
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/pages/(features)/client/patient/add.vue b/app/pages/(features)/client/patient/add.vue
index 12df14ed..ca4615e2 100644
--- a/app/pages/(features)/client/patient/add.vue
+++ b/app/pages/(features)/client/patient/add.vue
@@ -28,12 +28,13 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+const callbackUrl = route.query['return-path'] as string | undefined
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentPatientEntry />
+      <ContentPatientEntry :callback-url="callbackUrl" />
     </div>
     <Error
       v-else
diff --git a/app/pages/(features)/mcu-src/diagnose/index.vue b/app/pages/(features)/mcu-src/diagnose/index.vue
new file mode 100644
index 00000000..c557cf5f
--- /dev/null
+++ b/app/pages/(features)/mcu-src/diagnose/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Diagnosis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDiagnoseSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/mcu/index.vue b/app/pages/(features)/mcu-src/mcu/index.vue
new file mode 100644
index 00000000..cefa57c6
--- /dev/null
+++ b/app/pages/(features)/mcu-src/mcu/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Medical Checkup',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">MCU - SRC</template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/medical-action/index.vue b/app/pages/(features)/mcu-src/medical-action/index.vue
new file mode 100644
index 00000000..7e471367
--- /dev/null
+++ b/app/pages/(features)/mcu-src/medical-action/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Aksi Medis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentMedicalActionSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/procedure/index.vue b/app/pages/(features)/mcu-src/procedure/index.vue
new file mode 100644
index 00000000..030c0ab3
--- /dev/null
+++ b/app/pages/(features)/mcu-src/procedure/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Prosedur',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentProcedureSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/schemas/diagnose-src.schema.ts b/app/schemas/diagnose-src.schema.ts
new file mode 100644
index 00000000..c174f4c8
--- /dev/null
+++ b/app/schemas/diagnose-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const DiagnoseSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type DiagnoseSrcFormData = z.infer<typeof DiagnoseSrcSchema> & Partial<DiagnoseSrc>
+
+export { DiagnoseSrcSchema }
+export type { DiagnoseSrcFormData }
diff --git a/app/schemas/medical-action-src.schema.ts b/app/schemas/medical-action-src.schema.ts
new file mode 100644
index 00000000..a1caaeeb
--- /dev/null
+++ b/app/schemas/medical-action-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const MedicalActionSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  type_code: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type MedicalActionSrcFormData = z.infer<typeof MedicalActionSrcSchema> & Partial<MedicalActionSrc>
+
+export { MedicalActionSrcSchema }
+export type { MedicalActionSrcFormData }
diff --git a/app/schemas/patient.schema.ts b/app/schemas/patient.schema.ts
index 1dc0a4c7..2af50a67 100644
--- a/app/schemas/patient.schema.ts
+++ b/app/schemas/patient.schema.ts
@@ -6,22 +6,46 @@ const CommunicationBarrierSchema = z
   })
   .transform((val) => val === 'YA')
 
+const IsNewBornSchema = z
+  .enum(['YA', 'TIDAK'], {
+    required_error: 'Mohon lengkapi status pasien',
+  })
+  .transform((val) => val === 'YA')
+
+const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+
 const PatientSchema = z
   .object({
     // Data Diri Pasien
-    identityNumber: z
-      .string({
-        required_error: 'Mohon lengkapi NIK',
+    identityNumber: z.string().optional(),
+    // .string({
+    //   required_error: 'Mohon lengkapi NIK',
+    // })
+    // .min(16, 'NIK harus berupa angka 16 digit')
+    // .regex(/^\d+$/, 'NIK harus berupa angka 16 digit'),
+    residentIdentityFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
       })
-      .min(16, 'NIK harus berupa angka 16 digit')
-      .regex(/^\d+$/, 'NIK harus berupa angka 16 digit'),
-    // identityCardFile: z.instanceof(File, { message: 'File KTP harus dipilih' }),
-    // familyCardFile: z.instanceof(File, { message: 'File KK harus dipilih' }),
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+
+    familyIdentityFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
+      })
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+    // .refine(f => ['image/jpeg', 'image/png'].includes(f.type), 'Hanya JPG/PNG')
 
     // Informasi Dasar
-    alias: z.string({
-      required_error: 'Mohon pilih sapaan',
-    }),
+    // alias: z.string({
+    //   required_error: 'Mohon pilih sapaan',
+    // }),
     fullName: z.string({
       required_error: 'Mohon lengkapi Nama',
     }),
@@ -71,6 +95,7 @@ const PatientSchema = z
     nationality: z.string({
       required_error: 'Pilih Kebangsaan',
     }),
+    isNewBorn: IsNewBornSchema,
     language: z.string({
       required_error: 'Mohon pilih Preferensi Bahasa',
     }),
@@ -99,13 +124,52 @@ const PatientSchema = z
     note: z.string().optional(),
     drivingLicenseNumber: z.string().optional(),
   })
-  .refine((data) => (data.disability === 'TIDAK' ? !data.disabilityType : true), {
-    message: "DisabilityType hanya boleh diisi jika disability = 'YA'",
-    path: ['disabilityType'],
-  })
-  .refine((data) => (data.disability === 'YA' ? !!data.disabilityType?.trim() : true), {
-    message: 'Mohon pilih Jenis Disabilitas',
-    path: ['disabilityType'],
+  .refine(
+    (data) => {
+      // Jika disability = 'TIDAK', maka disabilityType harus kosong atau undefined
+      if (data.disability === 'TIDAK') {
+        return !data.disabilityType || data.disabilityType.trim() === ''
+      }
+      return true
+    },
+    {
+      message: "Jenis Disabilitas harus kosong jika Status Disabilitas = 'TIDAK'",
+      path: ['disabilityType'],
+    },
+  )
+  .refine(
+    (data) => {
+      // Jika disability = 'YA', maka disabilityType wajib diisi
+      if (data.disability === 'YA') {
+        return !!data.disabilityType?.trim()
+      }
+      return true
+    },
+    {
+      message: 'Mohon pilih Jenis Disabilitas',
+      path: ['disabilityType'],
+    },
+  )
+  // .refine((data) => {
+  //   // Jika nationality = 'WNA', maka passportNumber wajib diisi
+  //   if (data.nationality === 'WNA') {
+  //     return !!data.passportNumber?.trim()
+  //   }
+  //   return true
+  // }, {
+  //   message: 'Nomor Paspor wajib diisi untuk Warga Negara Asing',
+  //   path: ['passportNumber'],
+  // })
+  .transform((data) => {
+    // Transform untuk backend: hanya kirim disabilityType sesuai kondisi
+    return {
+      ...data,
+      // Jika disability = 'YA', kirim disabilityType
+      // Jika disability = 'TIDAK', kirim null untuk disabilityType
+      disabilityType: data.disability === 'YA' ? data.disabilityType : null,
+      // Hapus field disability karena yang dikirim ke backend adalah disabilityType
+      disability: undefined,
+    }
   })
 
 type PatientFormData = z.infer<typeof PatientSchema>
diff --git a/app/schemas/person-address-relative.schema.ts b/app/schemas/person-address-relative.schema.ts
index 43bac06e..091da1df 100644
--- a/app/schemas/person-address-relative.schema.ts
+++ b/app/schemas/person-address-relative.schema.ts
@@ -1,25 +1,58 @@
 import { z } from 'zod'
 import { PersonAddressSchema } from './person-address.schema'
 
-// Schema untuk alamat opsional ketika isSameAddress = '1'
-const OptionalAddressSchema = PersonAddressSchema.partial()
+const PersonAddressRelativeSchema = z
+  .object({
+    isSameAddress: z
+      .union([z.literal('1'), z.literal('0'), z.boolean()])
+      .default('1')
+      .transform((val) => {
+        if (typeof val === 'boolean') return val ? '1' : '0'
+        return val
+      }),
+  })
+  .merge(PersonAddressSchema.partial())
+  .superRefine((data, ctx) => {
+    const isSameAddress = data.isSameAddress
 
-// Schema untuk alamat required ketika isSameAddress = '0'
-const RequiredAddressSchema = PersonAddressSchema
+    // Jika alamat tidak sama ('0'), maka semua field address wajib diisi
+    if (isSameAddress === '0') {
+      const requiredFields = [
+        'province_code',
+        'regency_code',
+        'district_code',
+        'village_code',
+        'postalRegion_code',
+        'address',
+      ]
 
-const PersonAddressRelativeSchema = z.discriminatedUnion('isSameAddress', [
-  z
-    .object({
-      isSameAddress: z.literal('1').default('1'),
-    })
-    .merge(OptionalAddressSchema),
+      requiredFields.forEach((field) => {
+        if (!data[field as keyof typeof data]) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: getRequiredMessage(field),
+            path: [field],
+          })
+        }
+      })
+    }
+  })
+  .transform((data) => ({
+    ...data,
+    isSameAddress: data.isSameAddress === '1',
+  }))
 
-  z
-    .object({
-      isSameAddress: z.literal('0'),
-    })
-    .merge(RequiredAddressSchema),
-])
+function getRequiredMessage(field: string): string {
+  const messages: Record<string, string> = {
+    province_code: 'Mohon pilih provinsi',
+    regency_code: 'Mohon pilih kabupaten/kota',
+    district_code: 'Mohon pilih kecamatan',
+    village_code: 'Mohon pilih kelurahan',
+    postalRegion_code: 'Mohon lengkapi kode pos',
+    address: 'Mohon lengkapi alamat',
+  }
+  return messages[field] || `${field} wajib diisi`
+}
 
 type PersonAddressRelativeFormData = z.infer<typeof PersonAddressRelativeSchema>
 
diff --git a/app/schemas/person-address.schema.ts b/app/schemas/person-address.schema.ts
index 93ce6396..3e991bad 100644
--- a/app/schemas/person-address.schema.ts
+++ b/app/schemas/person-address.schema.ts
@@ -1,6 +1,9 @@
 import { z } from 'zod'
 
 const PersonAddressSchema = z.object({
+  locationType_code: z.string({
+    required_error: 'Mohon pilih jenis alamat',
+  }),
   address: z.string({
     required_error: 'Mohon lengkapi alamat',
   }),
@@ -16,8 +19,7 @@ const PersonAddressSchema = z.object({
   village_code: z.string({
     required_error: 'Mohon pilih kelurahan',
   }),
-  // diganti postalCode, zipCode hanya beberapa negara, kurang universal
-  postalCode: z.string({
+  postalRegion_code: z.string({
     required_error: 'Mohon lengkapi kode pos',
   }),
   // .min(5, 'Kode pos harus berupa angka 5 digit')
diff --git a/app/schemas/procedure-src.schema.ts b/app/schemas/procedure-src.schema.ts
new file mode 100644
index 00000000..dfbdc43a
--- /dev/null
+++ b/app/schemas/procedure-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const ProcedureSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type ProcedureSrcFormData = z.infer<typeof ProcedureSrcSchema> & Partial<ProcedureSrc>
+
+export { ProcedureSrcSchema }
+export type { ProcedureSrcFormData }
diff --git a/app/services/diagnose-src.service.ts b/app/services/diagnose-src.service.ts
new file mode 100644
index 00000000..4c5b50d4
--- /dev/null
+++ b/app/services/diagnose-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const path = '/api/v1/diagnose-src'
+const name = 'diagnose-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: DiagnoseSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/district.service.ts b/app/services/district.service.ts
new file mode 100644
index 00000000..fd817b3a
--- /dev/null
+++ b/app/services/district.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/district'
+const name = 'district'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/medical-action-src.service.ts b/app/services/medical-action-src.service.ts
new file mode 100644
index 00000000..aa196962
--- /dev/null
+++ b/app/services/medical-action-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const path = '/api/v1/medical-action-src'
+const name = 'medical-action-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: MedicalActionSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/patient.service.ts b/app/services/patient.service.ts
index b28f92ab..7591f356 100644
--- a/app/services/patient.service.ts
+++ b/app/services/patient.service.ts
@@ -1,4 +1,5 @@
 import { xfetch } from '~/composables/useXfetch'
+import { uploadCode, type UploadCodeKey } from '~/lib/constants'
 
 const mainUrl = '/api/v1/patient'
 
@@ -77,3 +78,30 @@ export async function removePatient(id: number) {
     throw new Error('Failed to delete patient')
   }
 }
+
+export async function uploadAttachment(file: File, userId: number, key: UploadCodeKey) {
+  try {
+    const resolvedKey = uploadCode[key]
+    if (!resolvedKey) {
+      throw new Error(`Invalid upload code key: ${key}`)
+    }
+
+    // siapkan form-data body
+    const formData = new FormData()
+    formData.append('code', resolvedKey)
+    formData.append('content', file)
+
+    // kirim via xfetch
+    const resp = await xfetch(`${mainUrl}/${userId}/upload`, 'POST', formData)
+
+    // struktur hasil sama seperti patchPatient
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+
+    return result
+  } catch (error) {
+    console.error('Error uploading attachment:', error)
+    throw new Error('Failed to upload attachment')
+  }
+}
diff --git a/app/services/postal-region.service.ts b/app/services/postal-region.service.ts
new file mode 100644
index 00000000..8273dca0
--- /dev/null
+++ b/app/services/postal-region.service.ts
@@ -0,0 +1,17 @@
+// Base service for postal code operations
+import * as base from './_crud-base'
+
+const path = '/api/v1/postal-region'
+const name = 'postal-region'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
diff --git a/app/services/procedure-src.service.ts b/app/services/procedure-src.service.ts
new file mode 100644
index 00000000..a4bca68b
--- /dev/null
+++ b/app/services/procedure-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const path = '/api/v1/procedure-src'
+const name = 'procedure-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: ProcedureSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/province.service.ts b/app/services/province.service.ts
new file mode 100644
index 00000000..0fb26e7a
--- /dev/null
+++ b/app/services/province.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/province'
+const name = 'province'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/regency.service.ts b/app/services/regency.service.ts
new file mode 100644
index 00000000..c5919610
--- /dev/null
+++ b/app/services/regency.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/regency'
+const name = 'regency'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/village.service.ts b/app/services/village.service.ts
new file mode 100644
index 00000000..b41bd9d5
--- /dev/null
+++ b/app/services/village.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/village'
+const name = 'village'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index c7b15101..19491069 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -259,6 +259,18 @@
           {
             "title": "Checkup",
             "link": "/mcu-src/mcu"
+          },
+          {
+            "title": "Prosedur",
+            "link": "/mcu-src/procedure"
+          },
+          {
+            "title": "Diagnosis",
+            "link": "/mcu-src/diagnose"
+          },
+          {
+            "title": "Medical Action",
+            "link": "/mcu-src/medical-action"
           }
         ]
       },