diff --git a/app/components/app/bpjs/control-letter/_common/dropdown-action.vue b/app/components/app/bpjs/control-letter/_common/dropdown-action.vue
new file mode 100644
index 00000000..9086c883
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/dropdown-action.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
+
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Log History',
+    onClick: () => {
+      history()
+    },
+    icon: 'i-lucide-logs',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+
+function history() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/history-dialog.vue b/app/components/app/bpjs/control-letter/_common/history-dialog.vue
new file mode 100644
index 00000000..00d7b32f
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/history-dialog.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps()
+
+const items = reactive([
+  { id: 1, description: 'Shipped from warehouse', createdAt: new Date(Date.now() - 86400000 * 2) },
+  { id: 2, description: 'In transit to distribution center', createdAt: new Date(Date.now() - 86400000) },
+  { id: 3, description: 'Out for delivery (Current)', createdAt: new Date() },
+])
+const itemsCount = computed(() => items.length || 0)
+</script>
+
+<template>
+  <ul :class="cn('pb-5 flex flex-col min-h-[30rem]', '')">
+    <li v-for="(item, index) in items" :key="item.id" class="flex gap-3 items-start">
+
+      <div class="flex flex-col items-center">
+        <div class="h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
+          <div :class="cn('dark:bg-white border-gray-300 rounded-full p-1.5',
+            index === 0 ? 'bg-green-500' : 'bg-transparent'
+          )">
+          </div>
+        </div>
+
+        <hr v-if="index !== itemsCount - 1" class="h-8 w-0.5 bg-gray-300 dark:bg-gray-300" aria-hidden="true">
+      </div>
+
+      <div class="flex justify-between items-center min-w-96">
+        <div class="max-w-80">
+          <time :class="cn('font-medium text-gray-800 dark:text-gray-100', '')">
+            {{ item?.createdAt.toLocaleDateString('id-ID') }}
+          </time>
+          <h1 :class="cn('text-gray-500 dark:text-gray-400', '')">{{ item.description }}</h1>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
\ No newline at end of file
diff --git a/app/components/app/bpjs/control-letter/_common/select-date-range.vue b/app/components/app/bpjs/control-letter/_common/select-date-range.vue
new file mode 100644
index 00000000..114f8542
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-date-range.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :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>
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button
+                  variant="outline"
+                  :class="cn('w-full bg-white border-gray-400 justify-start text-left font-normal', !value && 'text-muted-foreground')"
+                >
+                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  <template v-if="value.start">
+                    <template v-if="value.end">
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }} -
+                      {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                  </template>
+                  <template v-else> Pick a date </template>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent class="w-auto p-0">
+                <RangeCalendar
+                  v-model="value"
+                  initial-focus
+                  :number-of-months="2"
+                  @update:start-value="(startDate) => (value.start = startDate)"
+                />
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue b/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+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
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :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>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue b/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+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
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :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>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/filter.vue b/app/components/app/bpjs/control-letter/filter.vue
new file mode 100644
index 00000000..50005069
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/filter.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+import SelectDateRange from './_common/select-date-range.vue'
+
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
+const props = defineProps<{
+  installation: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<InstallationFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  reset: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    encounterClassCode: values.encounterClassCode || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onResetForm({ resetForm }: { resetForm: () => void }) {
+  emit('reset', resetForm)
+}
+
+const items = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-7 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <SelectDateRange
+            field-name="releaseDate"
+            label="Tanggal Penerbitan"
+            placeholder="Tanggal Penerbitan"
+            :errors="errors"
+            is-required
+          />
+          <SelectDateRange
+            field-name="controlPlanDate"
+            label="Tanggal Rencana Kontrol"
+            placeholder="Tanggal Rencana Kontrol"
+            :errors="errors"
+            is-required
+          />
+          <InputBase
+            field-name="patientName"
+            label="Nama Pasien"
+            placeholder="Nama Pasien"
+          />
+          <InputBase
+            field-name="cardNumber"
+            label="Nomor Kartu"
+            placeholder="Nomor Kartu"
+          />
+          <InputBase
+            field-name="sepNumber"
+            label="Nomor SEP"
+            placeholder="Nomor SEP"
+          />
+          <SelectOriginPolyclinic
+            field-name="originPolyclinic"
+            label="Poliklinik Asal"
+            placeholder="Pilih Poliklinik Asal"
+            :errors="errors"
+            is-required
+          />
+          <SelectDestinationPolyclinic
+            field-name="destinationPolyclinic"
+            label="Poliklinik Tujuan"
+            placeholder="Pilih Poliklinik Tujuan"
+            :errors="errors"
+            is-required
+          />
+        </div>
+      </div>
+     
+      <div class="my-2 flex items-center gap-3 justify-end">
+        <Button @click="onResetForm" variant="secondary">Reset</Button>
+        <Button @click="onSubmitForm">Terapkan</Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/bpjs/control-letter/list.cfg.ts b/app/components/app/bpjs/control-letter/list.cfg.ts
new file mode 100644
index 00000000..8eb7e5f4
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/list.cfg.ts
@@ -0,0 +1,108 @@
+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('./_common/dropdown-action.vue'))
+const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {},{}, {}, {}, {}, {}, {width: 90},{width: 10},],
+
+  headers: [
+    [
+      { label: 'No Surat' },
+      { label: 'No MR' },
+      { label: 'Nama' },
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Tgl Penerbitan' },
+      { label: 'Klinik Asal' },
+      { label: 'Klinik Tujuan' },
+      { label: 'DPJP' },
+      { label: 'No SEP Asal' },
+      { label: 'Status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'birth_date',
+    'birth_date', 'number', 'person.name', 'birth_date', 'status', '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,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/bpjs/control-letter/list.vue b/app/components/app/bpjs/control-letter/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/list.vue
@@ -0,0 +1,31 @@
+<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'
+
+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/chemotherapy/action-proses.vue b/app/components/app/chemotherapy/action-proses.vue
new file mode 100644
index 00000000..4e2efeb3
--- /dev/null
+++ b/app/components/app/chemotherapy/action-proses.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get proses handler from parent via inject
+const prosesHandler = inject<(rec: any) => void>('proses-handler', null)
+
+function handleProses() {
+  if (prosesHandler) {
+    prosesHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      class="border-orange-500 bg-orange-500 text-white hover:bg-orange-600"
+      @click="handleProses"
+    >
+      Proses
+    </Button>
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/dialog-verification.vue b/app/components/app/chemotherapy/dialog-verification.vue
new file mode 100644
index 00000000..2d617445
--- /dev/null
+++ b/app/components/app/chemotherapy/dialog-verification.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+import Input from '~/components/pub/ui/input/Input.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+interface Props {
+  open?: boolean
+  tanggalPemeriksaan?: string | Date
+  jadwalTanggalPemeriksaan?: string | Date
+  isLoading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  tanggalPemeriksaan: undefined,
+  jadwalTanggalPemeriksaan: undefined,
+  isLoading: false,
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'update:date': [value: string | undefined]
+  'update:schedule': [value: string | undefined]
+  submit: [data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }]
+}>()
+
+// Local state for jadwal tanggal pemeriksaan
+const jadwalTanggal = ref<string | undefined>(
+  props.jadwalTanggalPemeriksaan
+    ? typeof props.jadwalTanggalPemeriksaan === 'string'
+      ? props.jadwalTanggalPemeriksaan
+      : format(props.jadwalTanggalPemeriksaan, 'yyyy-MM-dd')
+    : undefined,
+)
+
+// Watch for external changes
+watch(
+  () => props.jadwalTanggalPemeriksaan,
+  (newValue) => {
+    if (newValue) {
+      jadwalTanggal.value =
+        typeof newValue === 'string' ? newValue : format(newValue, 'yyyy-MM-dd')
+    } else {
+      jadwalTanggal.value = undefined
+    }
+  },
+)
+
+// Watch local changes
+watch(jadwalTanggal, (newValue) => {
+  emit('update:schedule', newValue)
+})
+
+// Format date for display
+const formattedTanggalPemeriksaan = computed(() => {
+  if (!props.tanggalPemeriksaan) return ''
+  try {
+    const date =
+      props.tanggalPemeriksaan instanceof Date
+        ? props.tanggalPemeriksaan
+        : parseISO(props.tanggalPemeriksaan)
+    return format(date, 'dd MMMM yyyy', { locale: localeID })
+  } catch {
+    return props.tanggalPemeriksaan.toString()
+  }
+})
+
+// Handle submit
+function handleSubmit() {
+  emit('submit', {
+    tanggalPemeriksaan: props.tanggalPemeriksaan
+      ? typeof props.tanggalPemeriksaan === 'string'
+        ? props.tanggalPemeriksaan
+        : format(props.tanggalPemeriksaan, 'yyyy-MM-dd')
+      : undefined,
+    jadwalTanggalPemeriksaan: jadwalTanggal.value,
+  })
+}
+
+// Table data for Jadwal Ruang Tindakan
+const scheduleData = [
+  {
+    no: 1,
+    namaJenis: 'Ruang Tindakan',
+    jenisPemeriksaan: 'KEMOTERAPI',
+  },
+]
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    size="lg"
+    title="Verifikasi Jadwal Pasien"
+    @update:open="$emit('update:open', $event)"
+  >
+    <div class="space-y-6 py-4">
+      <!-- Jadwal Ruang Tindakan Section -->
+      <div class="space-y-3">
+        <h4 class="text-base font-semibold">Jadwal Ruang Tindakan</h4>
+        <div class="overflow-hidden rounded-md border">
+          <Table>
+            <TableHeader class="bg-gray-50">
+              <TableRow>
+                <TableHead class="font-semibold">NO</TableHead>
+                <TableHead class="font-semibold">NAMA JENIS</TableHead>
+                <TableHead class="font-semibold">JENIS PEMERIKSAAN</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow v-for="(row, index) in scheduleData" :key="index">
+                <TableCell>{{ row.no }}</TableCell>
+                <TableCell>{{ row.namaJenis }}</TableCell>
+                <TableCell>{{ row.jenisPemeriksaan }}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      <!-- Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">Tanggal Pemeriksaan</label>
+        <Input
+          :model-value="formattedTanggalPemeriksaan"
+          :disabled="true"
+          class="bg-gray-100 text-gray-700"
+          readonly
+        />
+      </div>
+
+      <!-- Jadwal Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">
+          Jadwal Tanggal Pemeriksaan
+          <span class="text-red-500">*</span>
+        </label>
+        <DatepickerSingle
+          v-model="jadwalTanggal"
+          placeholder="Pilih Jadwal"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <!-- Action Button -->
+      <div class="flex justify-end pt-4">
+        <Button
+          type="button"
+          :disabled="isLoading || !jadwalTanggal"
+          class="bg-gradient-to-r from-orange-500 to-orange-400 hover:from-orange-600 hover:to-orange-500 text-white shadow-md"
+          @click="handleSubmit"
+        >
+          <Icon name="i-lucide-calendar-check" class="mr-2 h-4 w-4" />
+          Simpan Jadwal
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
diff --git a/app/components/app/chemotherapy/dropdown-action-process.vue b/app/components/app/chemotherapy/dropdown-action-process.vue
new file mode 100644
index 00000000..56e14886
--- /dev/null
+++ b/app/components/app/chemotherapy/dropdown-action-process.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Proses',
+    onClick: () => {
+      process()
+    },
+    icon: 'i-lucide-pencil',
+  },
+]
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'Process'
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/app/chemotherapy/entry-form.vue b/app/components/app/chemotherapy/entry-form.vue
new file mode 100644
index 00000000..39113d63
--- /dev/null
+++ b/app/components/app/chemotherapy/entry-form.vue
@@ -0,0 +1,302 @@
+<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 Input from '~/components/pub/ui/input/Input.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { chemotherapySchema } from "~/schemas/chemotherapy.schema"
+
+interface Props {
+  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 items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+const emit = defineEmits<{
+  submit: [values: any, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(chemotherapySchema),
+  initialValues: {
+    namaPasien: '',
+    tanggalLahir: '',
+    noRM: '',
+    alamat: '',
+    beratBadan: '',
+    tinggiBadan: '',
+    diagnosa: '',
+    siklus: '',
+    periodeAwal: '',
+    periodeAkhir: '',
+    tanggalKemoterapi: '',
+    dokterKRJ: '',
+  },
+})
+
+// Define form fields
+const [namaPasien, namaPasienAttrs] = defineField('namaPasien')
+const [tanggalLahir, tanggalLahirAttrs] = defineField('tanggalLahir')
+const [noRM, noRMAttrs] = defineField('noRM')
+const [alamat, alamatAttrs] = defineField('alamat')
+const [beratBadan, beratBadanAttrs] = defineField('beratBadan')
+const [tinggiBadan, tinggiBadanAttrs] = defineField('tinggiBadan')
+const [diagnosa, diagnosaAttrs] = defineField('diagnosa')
+const [siklus, siklusAttrs] = defineField('siklus')
+const [periodeAwal, periodeAwalAttrs] = defineField('periodeAwal')
+const [periodeAkhir, periodeAkhirAttrs] = defineField('periodeAkhir')
+const [tanggalKemoterapi, tanggalKemoterapiAttrs] = defineField('tanggalKemoterapi')
+const [dokterKRJ, dokterKRJAttrs] = defineField('dokterKRJ')
+
+// Set initial values if provided
+if (props.values) {
+  // Object.entries(props.values).forEach(([key, value]) => {
+  //   if (value !== undefined) {
+  //     const field = defineField(key)[0]
+  //     field.value = value
+  //   }
+  // })
+}
+
+const resetForm = () => {
+  // Object.keys(meta.value.initialValues).forEach((key) => {
+  //   const field = defineField(key)[0]
+  //   field.value = ''
+  // })
+}
+
+function onSubmitForm() {
+  const formData = {
+    namaPasien: namaPasien.value,
+    tanggalLahir: tanggalLahir.value,
+    noRM: noRM.value,
+    alamat: alamat.value,
+    beratBadan: beratBadan.value,
+    tinggiBadan: tinggiBadan.value,
+    diagnosa: diagnosa.value,
+    siklus: siklus.value,
+    periodeAwal: periodeAwal.value,
+    periodeAkhir: periodeAkhir.value,
+    tanggalKemoterapi: tanggalKemoterapi.value,
+    dokterKRJ: dokterKRJ.value,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form @submit.prevent>
+    <!-- Data Pasien Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Data Pasien</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Nama Pasien</Label>
+          <Field :errMessage="errors.namaPasien">
+            <Input
+              v-model="namaPasien"
+              v-bind="namaPasienAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nama pasien"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Lahir</Label>
+          <Field :errMessage="errors.tanggalLahir">
+            <DatePicker
+              v-model="tanggalLahir"
+              v-bind="tanggalLahirAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal lahir"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">No. RM</Label>
+          <Field :errMessage="errors.noRM">
+            <Input
+              v-model="noRM"
+              v-bind="noRMAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nomor RM"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Alamat</Label>
+          <Field :errMessage="errors.alamat">
+            <Input
+              v-model="alamat"
+              v-bind="alamatAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan alamat"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Berat Badan</Label>
+          <Field :errMessage="errors.beratBadan">
+            <Input
+              v-model="beratBadan"
+              v-bind="beratBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan berat badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tinggi Badan</Label>
+          <Field :errMessage="errors.tinggiBadan">
+            <Input
+              v-model="tinggiBadan"
+              v-bind="tinggiBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan tinggi badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Diagnosa</Label>
+          <Field :errMessage="errors.diagnosa">
+            <Combobox
+              id="diagnose"
+              v-model="diagnosa"
+              v-bind="diagnosaAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Tentukan diagnosa pasien"
+              search-placeholder="Cari diagnosa"
+              empty-message="Diagnosa tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Protokol Kemoterapi Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Protokol Kemoterapi</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Siklus</Label>
+          <Field :errMessage="errors.siklus">
+            <Input
+              v-model="siklus"
+              v-bind="siklusAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan siklus"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Periode</Label>
+          <div class="flex items-center gap-4">
+            <Field
+              :errMessage="errors.periodeAwal"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAwal"
+                v-bind="periodeAwalAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Mulai Periode"
+              />
+            </Field>
+            <span>Sampai</span>
+            <Field
+              :errMessage="errors.periodeAkhir"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAkhir"
+                v-bind="periodeAkhirAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Akhir Periode"
+              />
+            </Field>
+          </div>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Kemoterapi</Label>
+          <Field :errMessage="errors.tanggalKemoterapi">
+            <DatepickerSingle
+              v-model="tanggalKemoterapi"
+              v-bind="tanggalKemoterapiAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal kemoterapi"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Dokter Ruang Tindakan</Label>
+          <Field :errMessage="errors.dokterKRJ">
+            <Combobox
+              id="doctor"
+              v-model="dokterKRJ"
+              v-bind="dokterKRJAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih dokter"
+              search-placeholder="Cari dokter"
+              empty-message="Dokter tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Form Actions -->
+    <div class="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/chemotherapy/list-admin.vue b/app/components/app/chemotherapy/list-admin.vue
new file mode 100644
index 00000000..a201f2a1
--- /dev/null
+++ b/app/components/app/chemotherapy/list-admin.vue
@@ -0,0 +1,37 @@
+<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.admin'
+
+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/chemotherapy/list-cfg.admin.ts b/app/components/app/chemotherapy/list-cfg.admin.ts
new file mode 100644
index 00000000..38d77121
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.admin.ts
@@ -0,0 +1,80 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('./dropdown-action-process.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/chemotherapy/list-cfg.medicine.ts b/app/components/app/chemotherapy/list-cfg.medicine.ts
new file mode 100644
index 00000000..103452f5
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.medicine.ts
@@ -0,0 +1,69 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 60 },
+    { width: 200 },
+    { width: 100 },
+    { width: 100 },
+    { width: 150 },
+    { width: 80 },
+    { width: 200 },
+    { width: 120 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'NAMA OBAT' },
+      { label: 'DOSIS' },
+      { label: 'SATUAN' },
+      { label: 'RUTE PEMBERIAN' },
+      { label: 'HARI' },
+      { label: 'CATATAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'namaObat',
+    'dosis',
+    'satuan',
+    'rute',
+    'hari',
+    'catatan',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/chemotherapy/list-cfg.protocol.ts b/app/components/app/chemotherapy/list-cfg.protocol.ts
new file mode 100644
index 00000000..da678c0f
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.protocol.ts
@@ -0,0 +1,62 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'TANGGAL' },
+      { label: 'SIKLUS' },
+      { label: 'PERIODE KEMOTERAPI' },
+      { label: 'KEHADIRAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'tanggal',
+    'siklus',
+    'periode',
+    'kehadiran',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/chemotherapy/list-cfg.ts b/app/components/app/chemotherapy/list-cfg.ts
new file mode 100644
index 00000000..29c24e6f
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.ts
@@ -0,0 +1,80 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/chemotherapy/list-cfg.verification.ts b/app/components/app/chemotherapy/list-cfg.verification.ts
new file mode 100644
index 00000000..e75aa615
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.verification.ts
@@ -0,0 +1,78 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 180 },
+    { width: 150 },
+    { width: 100 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggalMasuk',
+    'pjBerkasRm',
+    'dokter',
+    'jenisRuangan',
+    'jenisTindakan',
+    'tanggalJadwalTindakan',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/chemotherapy/list-cfg.visit.ts b/app/components/app/chemotherapy/list-cfg.visit.ts
new file mode 100644
index 00000000..cb242d62
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.visit.ts
@@ -0,0 +1,99 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+type VisitDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 150 }, // TANGGAL MASUK
+    { width: 180 }, // PJ BERKAS RM
+    { width: 200 }, // DOKTER
+    { width: 150 }, // JENIS RUANGAN
+    { width: 150 }, // JENIS TINDAKAN
+    { width: 180 }, // TANGGAL JADWAL TINDAKAN
+    { width: 150 }, // STATUS
+    { width: 120 }, // AKSI
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggal_masuk',
+    'pj_berkas_rm',
+    'dokter',
+    'jenis_ruangan',
+    'jenis_tindakan',
+    'tanggal_jadwal_tindakan',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'nama', label: 'Nama' },
+  ],
+
+  parses: {
+    tanggal_masuk: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_masuk) return '-'
+      try {
+        const date = typeof recX.tanggal_masuk === 'string' ? parseISO(recX.tanggal_masuk) : recX.tanggal_masuk
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_masuk.toString()
+      }
+    },
+    tanggal_jadwal_tindakan: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_jadwal_tindakan) return '-'
+      try {
+        const date =
+          typeof recX.tanggal_jadwal_tindakan === 'string'
+            ? parseISO(recX.tanggal_jadwal_tindakan)
+            : recX.tanggal_jadwal_tindakan
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_jadwal_tindakan.toString()
+      }
+    },
+  },
+
+  components: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/chemotherapy/list-verification.vue b/app/components/app/chemotherapy/list-verification.vue
new file mode 100644
index 00000000..93120f69
--- /dev/null
+++ b/app/components/app/chemotherapy/list-verification.vue
@@ -0,0 +1,37 @@
+<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.verification'
+
+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/chemotherapy/list.medicine.vue b/app/components/app/chemotherapy/list.medicine.vue
new file mode 100644
index 00000000..748c8cb9
--- /dev/null
+++ b/app/components/app/chemotherapy/list.medicine.vue
@@ -0,0 +1,76 @@
+<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.medicine'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+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">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Protokol Obat Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Daftar obat-obatan yang digunakan dalam protokol kemoterapi.</p>
+        </div>
+        <button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
+          <i class="ri-add-line"></i>
+          Tambah Obat Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari obat..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <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/chemotherapy/list.protocol.vue b/app/components/app/chemotherapy/list.protocol.vue
new file mode 100644
index 00000000..7b5c3234
--- /dev/null
+++ b/app/components/app/chemotherapy/list.protocol.vue
@@ -0,0 +1,75 @@
+<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.protocol'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+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">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Protokol Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Rangkaian prosedur kemoterapi yang terintegrasi dan konsisten.</p>
+        </div>
+        <button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
+          <i class="ri-add-line"></i>
+          Tambah Protokol Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari protokol..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <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/chemotherapy/list.register.vue b/app/components/app/chemotherapy/list.register.vue
new file mode 100644
index 00000000..131afc04
--- /dev/null
+++ b/app/components/app/chemotherapy/list.register.vue
@@ -0,0 +1,71 @@
+<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.protocol'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+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">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan.</p>
+        </div>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari jadwal pemeriksaan..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <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/chemotherapy/list.visit.vue b/app/components/app/chemotherapy/list.visit.vue
new file mode 100644
index 00000000..de451f31
--- /dev/null
+++ b/app/components/app/chemotherapy/list.visit.vue
@@ -0,0 +1,45 @@
+<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.visit'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  verify: [rec: any]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+
+// Provide verify handler to child components via provide/inject
+function handleVerify(rec: any) {
+  emit('verify', rec)
+}
+
+provide('verify-handler', handleVerify)
+</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/chemotherapy/list.vue b/app/components/app/chemotherapy/list.vue
new file mode 100644
index 00000000..19642581
--- /dev/null
+++ b/app/components/app/chemotherapy/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>
\ No newline at end of file
diff --git a/app/components/app/chemotherapy/sample.ts b/app/components/app/chemotherapy/sample.ts
new file mode 100644
index 00000000..082cde66
--- /dev/null
+++ b/app/components/app/chemotherapy/sample.ts
@@ -0,0 +1,49 @@
+export type ChemotherapyData = {
+  id: number
+  tanggal: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: ChemotherapyData[] = [
+  {
+    id: 1,
+    tanggal: '12 Agustus 2025',
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    tanggal: '11 Agustus 2025',
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]
diff --git a/app/components/app/chemotherapy/status-badge.vue b/app/components/app/chemotherapy/status-badge.vue
new file mode 100644
index 00000000..1a7d94ca
--- /dev/null
+++ b/app/components/app/chemotherapy/status-badge.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusMap: Record<string, { text: string; variant: 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline' }> = {
+  'belum_terverifikasi': { text: 'Belum Terverifikasi', variant: 'secondary' },
+  'terverifikasi': { text: 'Terverifikasi', variant: 'positive' },
+  'ditolak': { text: 'Ditolak', variant: 'destructive' },
+}
+
+const statusInfo = computed(() => {
+  const status = props.rec.status?.toLowerCase() || props.rec.status_code?.toLowerCase() || 'belum_terverifikasi'
+  return statusMap[status] || statusMap['belum_terverifikasi']
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="statusInfo.variant">
+      {{ statusInfo.text }}
+    </Badge>
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/verify-button.vue b/app/components/app/chemotherapy/verify-button.vue
new file mode 100644
index 00000000..1d9c2d3a
--- /dev/null
+++ b/app/components/app/chemotherapy/verify-button.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get verify handler from parent via inject
+const verifyHandler = inject<(rec: any) => void>('verify-handler', null)
+
+function handleVerify() {
+  if (verifyHandler) {
+    verifyHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      variant="outline"
+      class="border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100 hover:text-orange-700"
+      @click="handleVerify"
+    >
+      Verifikasi
+    </Button>
+  </div>
+</template>
+
diff --git a/app/components/app/control-letter/_common/select-date.vue b/app/components/app/control-letter/_common/select-date.vue
new file mode 100644
index 00000000..057d0a63
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-date.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
+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
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :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>
+            <Input
+              id="birthDate"
+              type="date"
+              min="1900-01-01"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/_common/select-dpjp.vue b/app/components/app/control-letter/_common/select-dpjp.vue
new file mode 100644
index 00000000..2053ebdb
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-dpjp.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const doctors = ref<Array<Item>>([])
+
+async function fetchDpjp(specialistId: string, subspecialistId: string) {
+  doctors.value = await getDoctorLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    includes: 'employee-person',
+    // "unit-id": parseInt(unitId),
+    "specialist-code": String(specialistId),
+    "subspecialist-code": String(subspecialistId),
+  }, true)
+}
+
+// const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+
+watch([ selectedSpecialistId, selectedSubSpecialistId], () => {
+  if (selectedSpecialistId.value && selectedSubSpecialistId.value) {
+    console.log(`Select Doctor`)
+    fetchDpjp( selectedSpecialistId.value, selectedSubSpecialistId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :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>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="doctors"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              :is-disabled="selectedSubSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/_common/select-specialist.vue b/app/components/app/control-letter/_common/select-specialist.vue
new file mode 100644
index 00000000..cd5ee923
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-specialist.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSpecialistLabelList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const specialists = ref<Array<Item>>([])
+
+async function fetchSpecialists(unitId: string) {
+  specialists.value = await getSpecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "unit-id": String(unitId),
+  }, true)
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+
+function handleSpecialistChange(selected: string) {
+  selectedSpecialistId.value = selected ?? null
+}
+
+watch([selectedUnitId], () => {
+  if (selectedUnitId.value) {
+    fetchSpecialists(selectedUnitId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Spesialis
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="specialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSpecialistChange"
+              :is-disabled="selectedUnitId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>
+  </DE.Block>
+</template>
diff --git a/app/components/app/control-letter/_common/select-subspecialist.vue b/app/components/app/control-letter/_common/select-subspecialist.vue
new file mode 100644
index 00000000..61567c0c
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-subspecialist.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const subspecialists = ref<Array<Item>>([])
+
+async function fetchSubSpecialists(specialistId: string) {
+  subspecialists.value = await getSubspecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "specialist-code": String(specialistId),
+  }, true)
+}
+
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+function handleSubSpecialistChange(selected: string) {
+  selectedSubSpecialistId.value = selected ?? null
+}
+
+watch([selectedSpecialistId], () => {
+  if (selectedSpecialistId.value) {
+    fetchSubSpecialists(selectedSpecialistId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Sub Spesialis
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="subspecialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSubSpecialistChange"
+              :is-disabled="selectedSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>    
+  </DE.Block>
+</template>
diff --git a/app/components/app/control-letter/_common/select-unit.vue b/app/components/app/control-letter/_common/select-unit.vue
new file mode 100644
index 00000000..afe0ca0a
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-unit.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const units = ref<Array<Item>>([])
+
+async function fetchData() {
+  units.value = await getUnitLabelList({}, true)
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+function handleDataChange(selected: string) {
+  selectedUnitId.value = selected ?? null
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :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>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="units"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleDataChange"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/entry-form.vue b/app/components/app/control-letter/entry-form.vue
new file mode 100644
index 00000000..2517e8b1
--- /dev/null
+++ b/app/components/app/control-letter/entry-form.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectSpeciality from './_common/select-specialist.vue'
+import SelectDpjp from './_common/select-dpjp.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import SelectUnit from './_common/select-unit.vue'
+import SelectSubspecialist from './_common/select-subspecialist.vue'
+import SelectSpecialist from './_common/select-specialist.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+
+  selectedUnitId?: number | null
+  selectedSpecialistId?: number | null
+  selectedSubSpecialistId?: number | null
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <DE.Block :col-count="2" :cell-flex="false">
+      <InputBase
+        field-name="sepStatus"
+        label="Status Sep"
+        placeholder="Status Sep"
+        :is-disabled="true"
+      />
+      <SelectDate
+        field-name="date"
+        label="Tanggal Rencana Kontrol"
+        :errors="errors"
+        is-required
+      />
+      <DE.Cell :col-span="2">
+        <DE.Block :col-count="4" :cell-flex="false">
+          <SelectUnit
+            field-name="unit_code"
+            label="Unit"
+            placeholder="Pilih Unit"
+            :errors="errors"
+            is-required
+          />
+          <SelectSpecialist
+            field-name="specialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectSubspecialist
+            field-name="subspecialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectDpjp
+            field-name="doctor_code"
+            label="DPJP"
+            placeholder="Pilih DPJP"
+            :errors="errors"
+            is-required
+          />
+        </DE.Block>
+      </DE.Cell>
+    </DE.Block>    
+  </Form>
+</template>
diff --git a/app/components/app/control-letter/list.cfg.ts b/app/components/app/control-letter/list.cfg.ts
new file mode 100644
index 00000000..3eb7bd84
--- /dev/null
+++ b/app/components/app/control-letter/list.cfg.ts
@@ -0,0 +1,64 @@
+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: 180}, {}, {}, {}, {}, {width: 30},],
+
+  headers: [
+    [
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Spesialis' },
+      { label: 'Sub Spesialis' },
+      { label: 'DPJP' },
+      { label: 'Status SEP' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'specialist.name', 'subspecialist.name', 'doctor.employee.person.name', 'sep_status', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+    specialist_subspecialist: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      // const { person } = rec as Patient
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    sep_status(_rec) {
+      return 'SEP Internal'
+    },
+  },
+}
diff --git a/app/components/app/control-letter/list.vue b/app/components/app/control-letter/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/control-letter/list.vue
@@ -0,0 +1,31 @@
+<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'
+
+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/control-letter/preview.vue b/app/components/app/control-letter/preview.vue
new file mode 100644
index 00000000..e10a2b91
--- /dev/null
+++ b/app/components/app/control-letter/preview.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import { cn, } from '~/lib/utils'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  instance: ControlLetter | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: string): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// Computed addresses from nested data
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+function onClick(type: string) {
+  emit('click', type)
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div :class="cn('min-h-[50vh] space-y-2',)">
+    <DetailRow label="Tgl Rencana Kontrol">{{ props.instance?.date ? new Date(props.instance?.date).toLocaleDateString('id-ID') : '-' }}</DetailRow>
+    <DetailRow label="Unit">{{ props.instance?.unit.name || '-' }}</DetailRow>
+    <DetailRow label="Spesialis">{{ props.instance?.specialist.name || '-' }}</DetailRow>
+    <DetailRow label="Sub Spesialis">{{ props.instance?.subspecialist.name || '-' }}</DetailRow>
+    <DetailRow label="DPJP">{{ props.instance?.doctor.employee.person.name || '-' }}</DetailRow>
+    <DetailRow label="Status SEP">{{ 'SEP INTERNAL' }}</DetailRow>
+  </div>
+  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBaEd @click="onClick" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/division-position/entry.vue b/app/components/app/division-position/entry.vue
new file mode 100644
index 00000000..da4782c0
--- /dev/null
+++ b/app/components/app/division-position/entry.vue
@@ -0,0 +1,192 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genDivisionPosition } from '~/models/division-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  divisionId: number
+  employees: 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: DivisionPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: DivisionPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail division
+    division_id: props.divisionId,
+
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-division-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </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/division-position/list-cfg.ts b/app/components/app/division-position/list-cfg.ts
index e35627d2..cc153cc5 100644
--- a/app/components/app/division-position/list-cfg.ts
+++ b/app/components/app/division-position/list-cfg.ts
@@ -1,5 +1,6 @@
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
 
 type SmallDetailDto = any
 
@@ -10,9 +11,9 @@ export const config: Config = {
 
   headers: [
     [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Divisi Induk' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Divisi ' },
       { label: 'Karyawan' },
       { label: 'Status Kepala' },
       { label: '' },
@@ -32,8 +33,13 @@ export const config: Config = {
       return recX.division?.name || '-'
     },
     employee: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.employee?.name || '-'
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
     },
     head: (rec: unknown): unknown => {
       const recX = rec as SmallDetailDto
diff --git a/app/components/app/division/detail/index.vue b/app/components/app/division/detail/index.vue
new file mode 100644
index 00000000..dd5a4c59
--- /dev/null
+++ b/app/components/app/division/detail/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Division } from '~/models/division'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  division: Division
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ division.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ division.name || '-' }}</DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/division/detail/list-cfg.ts b/app/components/app/division/detail/list-cfg.ts
new file mode 100644
index 00000000..76c3b9c8
--- /dev/null
+++ b/app/components/app/division/detail/list-cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: '#' },
+      { label: 'Kode Jabatan' },
+      { label: 'Nama Jabatan' },
+      { label: 'Pengisi Jabatan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/division/detail/list.vue b/app/components/app/division/detail/list.vue
new file mode 100644
index 00000000..4bbebb57
--- /dev/null
+++ b/app/components/app/division/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-division',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/division/list-cfg.ts b/app/components/app/division/list-cfg.ts
index 54ed06a6..2d7f93ba 100644
--- a/app/components/app/division/list-cfg.ts
+++ b/app/components/app/division/list-cfg.ts
@@ -3,17 +3,12 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.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: 'Divisi Induk' },
-    { label: '' },
-  ]],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]],
 
   keys: ['code', 'name', 'parent', 'action'],
 
@@ -44,4 +39,4 @@ export const config: Config = {
   },
 
   htmls: {},
-}
\ No newline at end of file
+}
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 25bdf9d8..9c24a0c6 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -1,354 +1,493 @@
 <script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
+// 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'
+import { Input } from '~/components/pub/ui/input'
+import Select from '~/components/pub/ui/select/Select.vue'
 import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-import { Form } from '~/components/pub/ui/form'
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
 
-import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
-import { mapToComboboxOptList } from '~/lib/utils'
+// Types
+import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
+import type { PatientEntity } from '~/models/patient'
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
 
-interface DivisionFormData {
-  name: string
-  code: string
-  parentId: string
-}
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
 
 const props = defineProps<{
-  division: {
-    msg: {
-      placeholder: string
-      search: string
-      empty: string
-    }
-  }
-  items: {
-    value: string
-    label: string
-    code: string
-  }[]
-  schema: any
-  initialValues?: Partial<DivisionFormData>
-  errors?: FormErrors
+  isLoading?: boolean
+  isReadonly?: boolean
+  isSepValid?: boolean
+  isCheckingSep?: boolean
+  doctor?: any[]
+  subSpecialist?: any[]
+  specialists?: TreeItem[]
+  payments: any[]
+  participantGroups?: any[]
+  seps: any[]
+  patient?: PatientEntity | null | undefined
+  objects?: any
 }>()
 
 const emit = defineEmits<{
-  submit: [values: DivisionFormData, resetForm: () => void]
-  cancel: [resetForm: () => void]
-  click: (e: Event) => void
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
 }>()
 
-const relationshipOpts = mapToComboboxOptList(relationshipCodes)
-const educationOpts = mapToComboboxOptList(educationCodes)
-const occupationOpts = mapToComboboxOptList(occupationCodes)
-const genderOpts = mapToComboboxOptList(genderCodes)
+// Validation schema
+const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
+  validationSchema: toTypedSchema(IntegrationEncounterSchema),
+})
 
-const formSchema = toTypedSchema(props.schema)
+// Bind fields and extract attrs
+const [doctorId, doctorIdAttrs] = defineField('doctorId')
+const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
+const [registerDate, registerDateAttrs] = defineField('registerDate')
+const [paymentType, paymentTypeAttrs] = defineField('paymentType')
+const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
+const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
+const [sepType, sepTypeAttrs] = defineField('sepType')
+const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
+const [patientName, patientNameAttrs] = defineField('patientName')
+const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
+const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
+const patientId = ref('')
 
-// Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
-  const formData: DivisionFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    parentId: values.parentId || '',
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+
+// SEP validation state from props
+const isSepValid = computed(() => props.isSepValid || false)
+const isCheckingSep = computed(() => props.isCheckingSep || false)
+
+const doctorOpts = computed(() => {
+  // Add default option
+  const defaultOption = [{ label: 'Pilih', value: '' }]
+  // Add doctors from props
+  const doctors = props.doctor || []
+  return [...defaultOption, ...doctors]
+})
+
+const isJKNPayment = computed(() => paymentType.value === 'jkn')
+
+async function onFetchChildren(parentId: string): Promise<void> {
+  console.log('onFetchChildren', parentId)
+}
+
+// Watch specialist/subspecialist selection to fetch doctors
+watch(subSpecialistId, async (newValue) => {
+  if (newValue) {
+    console.log('SubSpecialist changed:', newValue)
+    // Reset doctor selection
+    doctorId.value = ''
+    // Emit fetch event to parent
+    emit('fetch', { subSpecialistId: newValue })
   }
-  emit('submit', formData, resetForm)
-}
-const doctorOpts = ref([
-  { label: 'Pilih', value: null },
-  { label: 'Dr. A', value: 1 },
-])
-const paymentOpts = ref([
-  { label: 'Umum', value: 'umum' },
-  { label: 'BPJS', value: 'bpjs' },
-])
-const sepOpts = ref([
-  { label: 'Rujukan Internal', value: 'ri' },
-  { label: 'SEP Rujukan', value: 'sr' },
-])
+})
 
-// file refs untuk tombol "Pilih Berkas"
-const sepFileInput = ref<HTMLInputElement | null>(null)
-const sippFileInput = ref<HTMLInputElement | null>(null)
+// Watch SEP number changes to notify parent
+watch(sepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
 
-function pickSepFile() {
-  sepFileInput.value?.click()
-}
-function pickSippFile() {
-  sippFileInput.value?.click()
-}
+// Sync props to form fields
+watch(
+  () => props.objects,
+  (objects) => {
+    if (objects && Object.keys(objects).length > 0) {
+      patientName.value = objects?.patientName || ''
+      nationalIdentity.value = objects?.nationalIdentity || ''
+      medicalRecordNumber.value = objects?.medicalRecordNumber || ''
+      doctorId.value = objects?.doctorId || ''
+      subSpecialistId.value = objects?.subSpecialistId || ''
+      registerDate.value = objects?.registerDate || ''
+      paymentType.value = objects?.paymentType || ''
+      patientCategory.value = objects?.patientCategory || ''
+      cardNumber.value = objects?.cardNumber || ''
+      sepType.value = objects?.sepType || ''
+      sepNumber.value = objects?.sepNumber || ''
+    }
+  },
+  { deep: true, immediate: true },
+)
 
-function onSepFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  // set ke form / emit / simpan di state sesuai form library-mu
-  console.log('sep file', f)
-}
-
-function onSippFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  console.log('sipp file', f)
-}
+watch(
+  () => props.patient,
+  (patient) => {
+    if (patient && Object.keys(patient).length > 0) {
+      patientId.value = patient?.id ? String(patient.id) : ''
+      patientName.value = patient?.person?.name || ''
+      nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
+      medicalRecordNumber.value = patient?.number || ''
+    }
+  },
+  { deep: true, immediate: true },
+)
 
 function onAddSep() {
-  // contoh handler tombol "+" di sebelah No. SEP
-  console.log('open modal tambah SEP')
+  const formValues = {
+    patientId: patientId.value || '',
+    doctorCode: doctorId.value,
+    subSpecialistCode: subSpecialistId.value,
+    registerDate: registerDate.value,
+    cardNumber: cardNumber.value,
+    paymentType: paymentType.value,
+    sepType: sepType.value
+  }
+  emit('event', 'add-sep', formValues)
 }
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
+  emit('event', 'save', values)
+})
+
+// Expose submit method for parent component
+const formRef = ref<HTMLFormElement | null>(null)
+
+function submitForm() {
+  console.log('🔵 submitForm called, formRef:', formRef.value)
+  console.log('🔵 Form values:', {
+    doctorId: doctorId.value,
+    subSpecialistId: subSpecialistId.value,
+    registerDate: registerDate.value,
+    paymentType: paymentType.value,
+  })
+  console.log('🔵 Form errors:', errors.value)
+  console.log('🔵 Form meta:', meta.value)
+  
+  // Trigger form submit using native form submit
+  // This will trigger validation and onSubmit handler
+  if (formRef.value) {
+    console.log('🔵 Calling formRef.value.requestSubmit()')
+    formRef.value.requestSubmit()
+  } else {
+    console.warn('⚠️ formRef.value is null, cannot submit form')
+    // Fallback: directly call onSubmit handler
+    // Create a mock event object
+    const mockEvent = {
+      preventDefault: () => {},
+      target: formRef.value || {},
+    } as SubmitEvent
+    
+    // Call onSubmit directly
+    console.log('🔵 Calling onSubmit with mock event')
+    onSubmit(mockEvent)
+  }
+}
+
+defineExpose({
+  submitForm,
+})
 </script>
 
 <template>
-  <Form
-    v-slot="{ handleSubmit, resetForm }"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :initial-values="initialValues"
-  >
-    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
-      <div class="flex flex-col justify-between">
-        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
-          Data Pasien
+  <div class="mx-auto w-full">
+    <form
+      ref="formRef"
+      @submit.prevent="onSubmit"
+      class="grid gap-6 p-4"
+    >
+      <!-- Data Pasien -->
+      <div class="flex flex-col gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <div class="flex items-center gap-2">
+          <span class="text-sm">sudah pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'search')"
+          >
+            <Icon
+              name="i-lucide-search"
+              class="h-5 w-5"
+            />
+            Cari Pasien
+          </Button>
+          <span class="text-sm">belum pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'add')"
+          >
+            <Icon
+              name="i-lucide-plus"
+              class="h-5 w-5"
+            />
+            Tambah Pasien Baru
+          </Button>
         </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>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">Nama Pasien</Label>
+          <Field :errMessage="errors.patientName">
+            <Input
+              id="patientName"
+              v-model="patientName"
+              v-bind="patientNameAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">NIK</Label>
+          <Field :errMessage="errors.nationalIdentity">
+            <Input
+              id="nationalIdentity"
+              v-model="nationalIdentity"
+              v-bind="nationalIdentityAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">No. RM</Label>
+          <Field :errMessage="errors.medicalRecordNumber">
+            <Input
+              id="medicalRecordNumber"
+              v-model="medicalRecordNumber"
+              v-bind="medicalRecordNumberAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <hr />
+
+      <!-- Data Kunjungan -->
+      <h3 class="text-lg font-semibold">Data Kunjungan</h3>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Dokter
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.doctorId">
+            <Combobox
+              id="doctorId"
+              v-model="doctorId"
+              v-bind="doctorIdAttrs"
+              :items="doctorOpts"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Dokter"
+              search-placeholder="Cari Dokter"
+              empty-message="Dokter tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.subSpecialistId">
+            <TreeSelect
+              id="subSpecialistId"
+              v-model="subSpecialistId"
+              v-bind="subSpecialistIdAttrs"
+              :data="specialists || []"
+              :on-fetch-children="onFetchChildren"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Tanggal Daftar
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.registerDate">
+            <DatepickerSingle
+              id="registerDate"
+              v-model="registerDate"
+              v-bind="registerDateAttrs"
+              placeholder="Pilih tanggal"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Jenis Pembayaran
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.paymentType">
+            <Select
+              id="paymentType"
+              v-model="paymentType"
+              v-bind="paymentTypeAttrs"
+              :items="payments"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Pembayaran"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <!-- BPJS Fields (conditional) -->
+      <template v-if="isJKNPayment">
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <Cell>
+            <Label height="compact">
+              Kelompok Peserta
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.patientCategory">
+              <Select
+                id="patientCategory"
+                v-model="patientCategory"
+                v-bind="patientCategoryAttrs"
+                :items="participantGroups || []"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Kelompok Peserta"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label height="compact">
+              No. Kartu BPJS
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.cardNumber">
+              <Input
+                id="cardNumber"
+                v-model="cardNumber"
+                v-bind="cardNumberAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Masukkan nomor kartu BPJS"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label height="compact">
+              Jenis SEP
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.sepType">
+              <Select
+                id="sepType"
+                v-model="sepType"
+                v-bind="sepTypeAttrs"
+                :items="seps"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Jenis SEP"
+              />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <Cell>
+            <Label height="compact">
+              No. SEP
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.sepNumber">
+              <div class="flex gap-2">
+                <Input
+                  id="sepNumber"
+                  v-model="sepNumber"
+                  v-bind="sepNumberAttrs"
+                  placeholder="Tambah SEP terlebih dahulu"
+                  class="flex-1"
+                  :disabled="isLoading || isReadonly"
+                />
+                <Button
+                  v-if="!isSepValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  :disabled="isCheckingSep || isLoading || isReadonly"
+                  @click="onAddSep"
+                >
+                  <Icon
+                    v-if="isCheckingSep"
+                    name="i-lucide-loader-2"
+                    class="h-4 w-4 animate-spin"
+                  />
+                  <span v-else>+</span>
+                </Button>
+                <Button
+                  v-else
+                  variant="outline"
+                  type="button"
+                  class="bg-green-500 text-white hover:bg-green-600"
+                  size="sm"
+                  disabled
+                >
+                  <Icon
+                    name="i-lucide-check"
+                    class="h-4 w-4"
+                  />
+                </Button>
+              </div>
+            </Field>
+          </Cell>
+
+          <FileUpload
+            field-name="sepFile"
+            label="Dokumen SEP"
+            placeholder="Unggah dokumen SEP"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+
+          <FileUpload
+            field-name="sippFile"
+            label="Dokumen SIPP"
+            placeholder="Unggah dokumen SIPP"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+        </Block>
+      </template>
     </form>
-  </Form>
+  </div>
 </template>
diff --git a/app/components/app/icd/list-cfg.ts b/app/components/app/icd/list-cfg.ts
index c413e737..44a43eb4 100644
--- a/app/components/app/icd/list-cfg.ts
+++ b/app/components/app/icd/list-cfg.ts
@@ -7,94 +7,18 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const config: Config = {
-  cols: [
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 120 },
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 100 },
-    {},
-    { width: 50 },
-  ],
+  cols: [{}, {}, {}, {}],
 
-  headers: [
-    [
-      { label: 'Nama' },
-      { label: 'Rekam Medis' },
-      { label: 'KTP' },
-      { label: 'Tgl Lahir' },
-      { label: 'Umur' },
-      { label: 'JK' },
-      { label: 'Pendidikan' },
-      { label: 'Status' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
 
-  keys: [
-    'name',
-    'medicalRecord_number',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'status',
-    'action',
-  ],
+  keys: ['code', 'name', 'indName', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
   ],
 
-  parses: {
-    name: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-    },
-    identity_number: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
-      }
-      return recX.identity_number
-    },
-    birth_date: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.birth_date == 'object' && recX.birth_date) {
-        return (recX.birth_date as Date).toLocaleDateString()
-      } else if (typeof recX.birth_date == 'string') {
-        return (recX.birth_date as string).substring(0, 10)
-      }
-      return recX.birth_date
-    },
-    patient_age: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.birth_date?.split('T')[0]
-    },
-    gender: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-        return 'Tidak Diketahui'
-      }
-      return recX.gender_code
-    },
-    education: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-        return recX.education_code
-      } else if (typeof recX.education_code) {
-        return recX.education_code
-      }
-      return '-'
-    },
-  },
+  parses: {},
 
   components: {
     action(rec, idx) {
diff --git a/app/components/app/icd/multiselect-picker.vue b/app/components/app/icd/multiselect-picker.vue
index ce4dbd80..e8f03084 100644
--- a/app/components/app/icd/multiselect-picker.vue
+++ b/app/components/app/icd/multiselect-picker.vue
@@ -2,7 +2,7 @@
 import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
-const modelValue = defineModel<any | null>()
+const modelValue = defineModel<any[]>('modelValue', { default: [] })
 </script>
 
 <template>
diff --git a/app/components/app/icd/preview.vue b/app/components/app/icd/preview.vue
index 36bb193c..3c3d7d1f 100644
--- a/app/components/app/icd/preview.vue
+++ b/app/components/app/icd/preview.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Trash2 } from 'lucide-vue-next'
-// import { Button } from '@/components/ui/button'
-// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 
 interface Diagnosa {
   id: number
@@ -10,10 +7,10 @@ interface Diagnosa {
   icd: string
 }
 
-const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])
+const modelValue = defineModel<Diagnosa[]>({ default: [] })
 
 function removeItem(id: number) {
-  list.value = list.value.filter((item) => item.id !== id)
+  modelValue.value = modelValue.value.filter((item) => item.id !== id)
 }
 </script>
 
@@ -30,12 +27,19 @@ function removeItem(id: number) {
       </TableHeader>
 
       <TableBody>
-        <TableRow v-for="(item, i) in list" :key="item.id">
+        <TableRow
+          v-for="(item, i) in modelValue"
+          :key="item.id"
+        >
           <TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
-          <TableCell>{{ item.diagnosa }}</TableCell>
-          <TableCell>{{ item.icd }}</TableCell>
+          <TableCell>{{ item.code }}</TableCell>
+          <TableCell>{{ item.name }}</TableCell>
           <TableCell class="text-center">
-            <Button variant="ghost" size="icon" @click="removeItem(item.id)">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="removeItem(item.id)"
+            >
               <Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
             </Button>
           </TableCell>
diff --git a/app/components/app/installation-position/entry-detail.vue b/app/components/app/installation-position/entry-detail.vue
new file mode 100644
index 00000000..a6bfd113
--- /dev/null
+++ b/app/components/app/installation-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { InstallationPositionFormData } from '~/schemas/installation-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genInstallationPosition } from '~/models/installation-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  installationId: number
+  employees: 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: InstallationPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: InstallationPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail installation
+    installation_id: props.installationId,
+
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-installation-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/installation-position/entry-form.vue b/app/components/app/installation-position/entry-form.vue
new file mode 100644
index 00000000..4f7885a1
--- /dev/null
+++ b/app/components/app/installation-position/entry-form.vue
@@ -0,0 +1,207 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { InstallationPositionFormData } from '~/schemas/installation-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genInstallationPosition } from '~/models/installation-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  installations: any[]
+  employees: 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: InstallationPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [installation, installationAttrs] = defineField('installation_id')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.installation_id !== undefined)
+    installation.value = props.values.installation_id ? Number(props.values.installation_id) : null
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  installation.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: InstallationPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    installation_id: installation.value || null,
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-installation-position"
+    @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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Instalasi</Label>
+        <Field :errMessage="errors.installation_id">
+          <Combobox
+            id="installation"
+            v-model="installation"
+            v-bind="installationAttrs"
+            :items="installations"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Instalasi"
+            search-placeholder="Cari Instalasi"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/installation-position/list.cfg.ts b/app/components/app/installation-position/list.cfg.ts
new file mode 100644
index 00000000..fe3f6c9c
--- /dev/null
+++ b/app/components/app/installation-position/list.cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Instalasi ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'installation.name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/installation-position/list.vue b/app/components/app/installation-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/installation-position/list.vue
@@ -0,0 +1,39 @@
+<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/installation/detail/index.vue b/app/components/app/installation/detail/index.vue
new file mode 100644
index 00000000..8a668d1c
--- /dev/null
+++ b/app/components/app/installation/detail/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Installation } from '~/models/installation'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  installation: Installation
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ installation.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ installation.name || '-' }}</DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/installation/detail/list.cfg.ts b/app/components/app/installation/detail/list.cfg.ts
new file mode 100644
index 00000000..bf341ff9
--- /dev/null
+++ b/app/components/app/installation/detail/list.cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/installation/detail/list.vue b/app/components/app/installation/detail/list.vue
new file mode 100644
index 00000000..b5884cfd
--- /dev/null
+++ b/app/components/app/installation/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-installation',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/installation/list-cfg.ts b/app/components/app/installation/list.cfg.ts
similarity index 83%
rename from app/components/app/installation/list-cfg.ts
rename to app/components/app/installation/list.cfg.ts
index f64ecea8..e2a39d80 100644
--- a/app/components/app/installation/list-cfg.ts
+++ b/app/components/app/installation/list.cfg.ts
@@ -3,19 +3,12 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.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: 'Encounter Class' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]],
 
   keys: ['code', 'name', 'encounterClass_code', 'action'],
 
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index 1be60a60..6ad7dd81 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { config } from './list-cfg'
+import { config } from './list.cfg'
 
 interface Props {
   data: any[]
@@ -31,6 +31,9 @@ function handlePageChange(page: number) {
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />
-    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </div>
 </template>
diff --git a/app/components/app/mcu-order-item/list-entry.cfg.ts b/app/components/app/mcu-order-item/list-entry.cfg.ts
new file mode 100644
index 00000000..89d85dce
--- /dev/null
+++ b/app/components/app/mcu-order-item/list-entry.cfg.ts
@@ -0,0 +1,43 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+      { label: 'Catatan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrc.mcuSrcCategory.name', 'note'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+
+  components: {
+    note(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: input,
+      }
+    },
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/mcu-order-item/list-entry.vue b/app/components/app/mcu-order-item/list-entry.vue
new file mode 100644
index 00000000..6c93c5ac
--- /dev/null
+++ b/app/components/app/mcu-order-item/list-entry.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { config } from './list-entry.cfg'
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  requestItem: []
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
+    v-bind="config"
+    :rows="data"
+  />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('requestItem')">
+      <Icon name="i-lucide-plus" />
+      Pilih Item
+    </Button>
+  </div>
+</template>
diff --git a/app/components/app/mcu-order-item/list.cfg.ts b/app/components/app/mcu-order-item/list.cfg.ts
new file mode 100644
index 00000000..2b054379
--- /dev/null
+++ b/app/components/app/mcu-order-item/list.cfg.ts
@@ -0,0 +1,18 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+export const config: Config = {
+  cols: [{}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrcCategory.name'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+}
diff --git a/app/components/app/mcu-order-item/list.vue b/app/components/app/mcu-order-item/list.vue
new file mode 100644
index 00000000..ef7438c6
--- /dev/null
+++ b/app/components/app/mcu-order-item/list.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { McuOrderItem } from '~/models/mcu-order-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border"
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/mcu-order/detail.vue b/app/components/app/mcu-order/detail.vue
new file mode 100644
index 00000000..fe161595
--- /dev/null
+++ b/app/components/app/mcu-order/detail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuOrder } from '~/models/mcu-order';
+
+const props = defineProps<{
+  data: McuOrder
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data?.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/mcu-order/entry.vue b/app/components/app/mcu-order/entry.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/mcu-order/list-pk.vue b/app/components/app/mcu-order/list-pk.vue
new file mode 100644
index 00000000..df296419
--- /dev/null
+++ b/app/components/app/mcu-order/list-pk.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>
diff --git a/app/components/app/mcu-order/list.vue b/app/components/app/mcu-order/list.vue
new file mode 100644
index 00000000..df296419
--- /dev/null
+++ b/app/components/app/mcu-order/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>
diff --git a/app/components/app/mcu-src-category/switcher.vue b/app/components/app/mcu-src-category/switcher.vue
new file mode 100644
index 00000000..78c54acb
--- /dev/null
+++ b/app/components/app/mcu-src-category/switcher.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuSrcCategory } from '~/models/mcu-src-category';
+
+const model = defineModel()
+const props = defineProps<{
+  data: McuSrcCategory[]
+}>()
+const emit = defineEmits<{
+  pick: [category: McuSrcCategory]
+}>()
+
+if (!model.value && props.data.length > 0) {
+  model.value = props.data[0]?.code
+}
+
+function pick(category: McuSrcCategory) {
+  model.value = category.code
+  emit('pick', category)
+}
+
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Kategori
+    </div>
+    <div class="-mx-1 [&_button]:mx-1 ">
+      <Button v-for="item, idx in data" :variant="model === item.code ? 'default' : 'outline'" @click="pick(item)">
+        {{ item.name }}
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/mcu-src/picker-accordion.vue b/app/components/app/mcu-src/picker-accordion.vue
new file mode 100644
index 00000000..a42834f9
--- /dev/null
+++ b/app/components/app/mcu-src/picker-accordion.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { McuSrc } from '~/models/mcu-src';
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+const data = defineModel({ type: Array as PropType<McuOrderItem[]>, required: true })
+defineProps<{
+  dataSource: McuSrc[]
+  // data: number[]
+}>()
+
+const emit = defineEmits<{
+  pick: [item: McuSrc]
+}>()
+
+function pick(item: McuSrc) {
+  emit('pick', item)
+  // if (data.value.some(e => e.mcuSrc_id === item.id)) {
+  //   const pos = data.value.map(e => e.mcuSrc_id).indexOf(item.id)
+  //   data.value.splice(pos, 1)
+  // } else {
+  //   data.value.push({
+  //     id: 0,
+  //     mcuOrder_id: 0,
+  //     mcuSrc_id: item.id,
+  //     createdAt: "",
+  //     updatedAt: "",
+  //   })
+  // }
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Daftar Item
+    </div>
+    <div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
+      <div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
+        <Button 
+          :variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
+          type="button"
+          @click="pick(item)"
+        > 
+          {{ item.name }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/medicine-mix/list-entry.ts b/app/components/app/medicine-mix/list-entry.ts
new file mode 100644
index 00000000..03202670
--- /dev/null
+++ b/app/components/app/medicine-mix/list-entry.ts
@@ -0,0 +1,50 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: "Dosis" },
+    { label: 'Satuan' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['name', 'dose', 'uom.name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup_code || '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action: (rec: unknown, idx: number): RecComponent => {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/medicine-mix/list-entry.vue b/app/components/app/medicine-mix/list-entry.vue
new file mode 100644
index 00000000..ba0fa689
--- /dev/null
+++ b/app/components/app/medicine-mix/list-entry.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/patient/list-cfg.patient.ts b/app/components/app/patient/list-cfg.patient.ts
new file mode 100644
index 00000000..3c77bfaa
--- /dev/null
+++ b/app/components/app/patient/list-cfg.patient.ts
@@ -0,0 +1,41 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
+
+export interface PatientData {
+  id: string
+  identity: string
+  number: string
+  bpjs: string
+  name: string
+}
+
+export const config: Config = {
+  cols: [{ width: 50 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
+
+  headers: [
+    [{ label: '' }, { label: 'NO. KTP' }, { label: 'NO. RM' }, { label: 'NO. KARTU BPJS' }, { label: 'NAMA PASIEN' }],
+  ],
+
+  keys: ['check', 'identity', 'number', 'bpjs', 'name'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    check(rec, idx) {
+      return {
+        idx,
+        rec: { ...rec as object, menu: 'patient' },
+        component: SelectedRadio,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/patient/list-patient.vue b/app/components/app/patient/list-patient.vue
new file mode 100644
index 00000000..2b9902f2
--- /dev/null
+++ b/app/components/app/patient/list-patient.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PatientData } from './list-cfg.patient'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.patient'
+
+const props = defineProps<{
+  data: PatientData[]
+  selected?: string
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="props.data"
+    :selected="props.selected"
+  />
+  <PaginationView
+    v-if="paginationMeta"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+</template>
diff --git a/app/components/app/patient/view-patient.vue b/app/components/app/patient/view-patient.vue
new file mode 100644
index 00000000..e24554b7
--- /dev/null
+++ b/app/components/app/patient/view-patient.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, provide, watch } from 'vue'
+
+// Components
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import ListPatient from './list-patient.vue'
+
+// Types
+import type { PatientData } from './list-cfg.patient'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Helpers
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  open: boolean
+  patients: Array<PatientData>
+  selected: string
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'fetch', value: any): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+const debouncedSearch = refDebounced(search, 500) // 500ms debounce
+
+// Provide for radio selection - use selected prop directly
+const recSelectId = ref<number>(Number(props.selected) || 0)
+const recSelectMenu = ref<string>('patient')
+
+provide('rec_select_id', recSelectId)
+provide('rec_select_menu', recSelectMenu)
+
+function saveSelection() {
+  // Validate that a patient is selected
+  if (!props.selected || props.selected === '') {
+    console.warn('No patient selected')
+    return
+  }
+  emit('save')
+  emit('update:open', false)
+}
+
+function handlePageChange(page: number) {
+  emit('fetch', { 'page-number': page })
+}
+
+// Watch for changes in recSelectId and emit update:selected
+watch(recSelectId, (newValue) => {
+  if (newValue > 0) {
+    emit('update:selected', String(newValue))
+  }
+})
+
+// Watch for changes in selected prop
+watch(() => props.selected, (newValue) => {
+  recSelectId.value = Number(newValue) || 0
+})
+
+watch(debouncedSearch, (newValue) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    emit('fetch', { search: newValue })
+  }
+})
+</script>
+
+<template>
+  <Dialog
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Cari Pasien</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="max-w-[50%]">
+        <Input
+          v-model="search"
+          placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu"
+        />
+      </div>
+
+      <div class="overflow-x-auto rounded-lg border">
+        <ListPatient 
+          :data="patients" 
+          :selected="props.selected"
+          :pagination-meta="paginationMeta" 
+          @page-change="handlePageChange"
+        />
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button
+          variant="default"
+          class="h-[40px] min-w-[120px] text-white"
+          @click="saveSelection"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
index 5b496b2b..422ebba7 100644
--- a/app/components/app/prescription-item/list-entry.vue
+++ b/app/components/app/prescription-item/list-entry.vue
@@ -1,14 +1,30 @@
 <script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
 import { config } from './list-entry.cfg'
 
 defineProps<{
-  data: any[]
+  data: PrescriptionItem[]
 }>()
+
+const emit = defineEmits<{
+  add: [mode: 'mix' | 'non-mix']
+}>()
+
 </script>
 
 <template>
-  <PubMyUiDataTable
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
     v-bind="config"
     :rows="data"
   />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('add', 'mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+    <Button @click="emit('add', 'non-mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+  </div>
 </template>
diff --git a/app/components/app/prescription-item/list.cfg.ts b/app/components/app/prescription-item/list.cfg.ts
new file mode 100644
index 00000000..fd980bb1
--- /dev/null
+++ b/app/components/app/prescription-item/list.cfg.ts
@@ -0,0 +1,41 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+}
diff --git a/app/components/app/prescription-item/list.vue b/app/components/app/prescription-item/list.vue
new file mode 100644
index 00000000..ed64b09e
--- /dev/null
+++ b/app/components/app/prescription-item/list.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: PrescriptionItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-2 2xl:mb-3"
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
new file mode 100644
index 00000000..d9b4881e
--- /dev/null
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { LucidePlus } from 'lucide-vue-next';
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue';
+import * as Table from '~/components/pub/ui/table'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+
+import { genBase } from '~/models/_base';
+import { genMedicine } from '~/models/medicine';
+import type { MedicinemixItem } from '~/models/medicinemix-item';
+import type { PrescriptionItem } from '~/models/prescription-item';
+
+const props = defineProps<{
+  data: PrescriptionItem
+  items: MedicinemixItem[]
+}>()
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem, items: MedicinemixItem[]],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data, props.items)
+  }
+}
+
+function addItem() {
+  props.items.push({
+    ...genBase(),
+    medicineMix_id: 0,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    dose: 0,
+    uom_code: '',
+  })
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Frequensi</DE.Label>
+        <DE.Field><Input v-model="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Field><Input v-model="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Total</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
+  <Table.Table class="border mb-3 2xl:mb-4">
+    <Table.TableHeader class="[&_th]:h-8 [&_th]:2xl:h-9">
+      <Table.TableRow>
+        <Table.TableHead>Nama</Table.TableHead>
+        <Table.TableHead class="w-24">Dosis</Table.TableHead>
+        <Table.TableHead class="w-24">Satuan</Table.TableHead>
+        <Table.TableHead class="w-20">..</Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody class="[&_td]:p-0.6">
+      <Table.TableRow v-if="items.length > 0" v-for="item in items">
+        <Table.TableCell>
+          <Input v-model="item.medicine.name" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input v-model="item.dose" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input />
+        </Table.TableCell>
+      </Table.TableRow>
+      <Table.TableRow v-else>
+        <Table.TableCell colspan="4" class="!p-5 text-center">
+          Belum ada data
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <div>
+    <Button @click="addItem">
+      <LucidePlus />
+      Tambah
+    </Button>
+  </div>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
new file mode 100644
index 00000000..25970646
--- /dev/null
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+import { bigTimeUnitCodes } from '~/lib/constants'
+
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const props = defineProps<{
+  data: PrescriptionItem
+}>()
+
+type ClickType = 'close' | 'save'
+type Item = {
+  value: string
+  label: string
+}
+
+const bigTimeUnitCodeItems: Item[] = []
+
+if(!props.data.intervalUnit_code) {
+  props.data.intervalUnit_code = 'day'
+}
+
+Object.keys(bigTimeUnitCodes).forEach((key) => {
+  bigTimeUnitCodeItems.push({
+    value: key,
+    label: bigTimeUnitCodes[key] || '',
+  })
+})
+
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Frequensi</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Dosis</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Interval</DE.Label>
+      <DE.Field>
+        <Select
+          v-model="data.intervalUnit_code"
+          :items="bigTimeUnitCodeItems"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Total</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/app/prescription/detail.vue b/app/components/app/prescription/detail.vue
new file mode 100644
index 00000000..694eb9a1
--- /dev/null
+++ b/app/components/app/prescription/detail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Prescription } from '~/models/prescription'
+
+const props = defineProps<{
+  data: Prescription
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data.issuedAt?.substring(0, 10) || data.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/prescription/entry.vue b/app/components/app/prescription/entry.vue
index 3b4acf28..ef8756e8 100644
--- a/app/components/app/prescription/entry.vue
+++ b/app/components/app/prescription/entry.vue
@@ -1,32 +1,36 @@
 <template>
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div class="md:pe-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
+    <div class="md:ps-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
   </div>
 </template>
diff --git a/app/components/app/prescription/list-entry.vue b/app/components/app/prescription/list-entry.vue
new file mode 100644
index 00000000..aa768000
--- /dev/null
+++ b/app/components/app/prescription/list-entry.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { Prescription } from '~/models/prescription'
+
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import PrescriptionItemList from '~/components/app/prescription-item/list-entry.vue';
+
+interface Props {
+  data: Prescription[]
+  isLoading: boolean
+  paginationMeta?: PaginationMeta
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div v-if="isLoading" class="p-10 text-center">
+    Memuat data..
+  </div>
+  <div v-else-if="data && data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <!-- <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div> -->
+  </div>
+  <div v-else v-for="(item, idx) in data">
+    <Separator class="my-5" />
+    <div class="md:grid md:grid-cols-2 font-semibold">
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>Order #{{ data.length - idx }}</DE.Label>
+            <DE.Field>
+              2025-01-01
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Status</DE.Label>
+            <DE.Field>
+                {{ item.status_code }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>DPJP</DE.Label>
+            <DE.Field>
+                {{ item.doctor?.employee?.person.name }} 
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>PPDS</DE.Label>
+            <DE.Field>
+                {{ item.specialistIntern?.person.name }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+    </div>
+    <PrescriptionItemList :data="item.items || []" />
+  </div>
+</template>
+
+
+<!-- <Separator class="my-4 xl:my-5" />
+<AppPrescriptionEntry />
+<div class="flex content-center mb-3">
+  <div class="me-auto pt-2">
+    <div class="font-semibold md:text-sm xl:text-base">Daftar Obat</div>
+  </div>
+  <div>
+    <Button @click="addMedicine" class="me-2">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+    <Button @click="addMedicineMix">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+  </div>
+</div>
+<PrescriptionItemListEntry :data=[] /> -->
diff --git a/app/components/app/prescription/list-with-sub.vue b/app/components/app/prescription/list-with-sub.vue
new file mode 100644
index 00000000..14bc1785
--- /dev/null
+++ b/app/components/app/prescription/list-with-sub.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// import { Block, Cell } from '~/components/pub/my-ui/doc-entry/index'
+// import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+// import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Separator class="my-5" />
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Order #1</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+            2025-01-01
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Status
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama Dokter
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>PPDS</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama PPDS
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/list.vue
index 6fe27d39..ae5126ca 100644
--- a/app/components/app/prescription/list.vue
+++ b/app/components/app/prescription/list.vue
@@ -1,5 +1,37 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+import { add } from 'date-fns';
+
+interface Props {
+  data: Prescription[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
 <template>
-  <div class="p-10 text-center">
+  <div v-if="data.length == 0" class="p-10 text-center">
     <div class="mb-4 xl:mb-5">Belum Ada Data</div>
     <div>
       <Button>
@@ -8,35 +40,33 @@
       </Button>
     </div>
   </div>
-  <Separator class="my-5" />
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
-  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count="7" class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
+    <!-- <div v-if="idx < data.length - 1" class="my-8 -mx-4 border-t border-t-slate-300" /> -->
+  </template>
 </template>
diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index e48d23ec..35956ad7 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -1,91 +1,245 @@
 <script setup lang="ts">
-// helpers
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import * as z from 'zod'
-// components
+// 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'
 import { Input } from '~/components/pub/ui/input'
-import { Label } from '~/components/pub/ui/label'
-import Select from '~/components/pub/ui/select/Select.vue'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
+import Select from '~/components/pub/ui/select/Select.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
 
-const emit = defineEmits<{
-  (e: 'event', value: any): void
+// Types
+import { IntegrationBpjsSchema, type IntegrationBpjsFormData } from '~/schemas/integration-bpjs.schema'
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+
+// Helpers
+import { watch } from 'vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  isLoading?: boolean
+  isReadonly?: boolean
+  isService?: boolean
+  isShowPatient?: boolean;
+  mode?: string
+  doctors: any[]
+  diagnoses: any[]
+  facilitiesFrom: any[]
+  facilitiesTo: any[]
+  serviceTypes: any[]
+  registerMethods: any[]
+  accidents: any[]
+  purposes: any[]
+  procedures: any[]
+  assessments: any[]
+  supportCodes: any[]
+  classLevels: any[]
+  classLevelUpgrades: any[]
+  classPaySources: any[]
+  provinces: any[]
+  cities: any[]
+  districts: any[]
+  specialists?: TreeItem[]
+  objects?: any
+  values?: any
 }>()
 
-const items = [
-  { value: 'item-1', label: 'Item 1' },
-  { value: 'item-2', label: 'Item 2' },
-  { value: 'item-3', label: 'Item 3' },
-]
+const emit = defineEmits<{
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
+}>()
 
-// Validation schema
-const schema = z.object({
-  tanggalSep: z.string().min(1, 'Tanggal SEP wajib diisi'),
-  jalur: z.string().min(1, 'Pilih jalur'),
-  noBpjs: z.string().min(1, 'No. Kartu BPJS wajib diisi'),
-  noKtp: z.string().min(1, 'No. KTP wajib diisi'),
-  noRm: z.string().min(1, 'No. RM wajib diisi'),
-  namaPasien: z.string().min(1, 'Nama pasien wajib diisi'),
-  noTelp: z.string().min(1, 'Nomor telepon wajib diisi'),
-  noSuratKontrol: z.string().min(1, 'No. Surat Kontrol wajib diisi'),
-  tglSuratKontrol: z.string().min(1, 'Tanggal Surat Kontrol wajib diisi'),
-  klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
-  dpjp: z.string().min(1, 'DPJP wajib diisi'),
-  diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
-  cob: z.string().min(1, 'COB wajib diisi'),
-  katarak: z.string().min(1, 'Katarak wajib diisi'),
-  jenisProsedur: z.string().min(1, 'Jenis prosedur wajib diisi'),
-  kodePenunjang: z.string().min(1, 'Kode penunjang wajib diisi'),
+// Validation schema (moved to shared file)
+const { handleSubmit, errors, defineField } = useForm<IntegrationBpjsFormData>({
+  validationSchema: toTypedSchema(IntegrationBpjsSchema),
 })
 
-const { handleSubmit, errors, defineField } = useForm({
-  validationSchema: toTypedSchema(schema),
-})
+// Bind fields and extract attrs for consistent Field pattern
+const [sepDate, sepDateAttrs] = defineField('sepDate')
+const [serviceType, serviceTypeAttrs] = defineField('serviceType')
+const [admissionType, admissionTypeAttrs] = defineField('admissionType')
+const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
+const [nationalId, nationalIdAttrs] = defineField('nationalId')
+const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
+const [patientName, patientNameAttrs] = defineField('patientName')
+const [phoneNumber, phoneNumberAttrs] = defineField('phoneNumber')
+const [referralLetterNumber, referralLetterNumberAttrs] = defineField('referralLetterNumber')
+const [referralLetterDate, referralLetterDateAttrs] = defineField('referralLetterDate')
+const [fromClinic, fromClinicAttrs] = defineField('fromClinic')
+const [destinationClinic, destinationClinicAttrs] = defineField('destinationClinic')
+const [attendingDoctor, attendingDoctorAttrs] = defineField('attendingDoctor')
+const [initialDiagnosis, initialDiagnosisAttrs] = defineField('initialDiagnosis')
+const [cob, cobAttrs] = defineField('cob')
+const [cataract, cataractAttrs] = defineField('cataract')
+const [clinicExcecutive, clinicExcecutiveAttrs] = defineField('clinicExcecutive')
+const [procedureType, procedureTypeAttrs] = defineField('procedureType')
+const [supportCode, supportCodeAttrs] = defineField('supportCode')
+const [note, noteAttrs] = defineField('note')
+const [classLevel, classLevelAttrs] = defineField('classLevel')
+const [classLevelUpgrade, classLevelUpgradeAttrs] = defineField('classLevelUpgrade')
+const [classPaySource, classPaySourceAttrs] = defineField('classPaySource')
+const [responsiblePerson, responsiblePersonAttrs] = defineField('responsiblePerson')
+const [accident, accidentAttrs] = defineField('trafficAccident')
+const [purposeOfVisit, purposeOfVisitAttrs] = defineField('purposeOfVisit')
+const [serviceAssessment, serviceAssessmentAttrs] = defineField('serviceAssessment')
+const [lpNumber, lpNumberAttrs] = defineField('lpNumber')
+const [accidentDate, accidentDateAttrs] = defineField('accidentDate')
+const [accidentNote, accidentNoteAttrs] = defineField('accidentNote')
+const [accidentProvince, accidentProvinceAttrs] = defineField('accidentProvince')
+const [accidentCity, accidentCityAttrs] = defineField('accidentCity')
+const [accidentDistrict, accidentDistrictAttrs] = defineField('accidentDistrict')
+const [suplesi, suplesiAttrs] = defineField('suplesi')
+const [suplesiNumber, suplesiNumberAttrs] = defineField('suplesiNumber')
+const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
+const titleLetterNumber = computed(() => (admissionType.value === '3' ? 'Surat Kontrol' : 'Surat Rujukan'))
+const titleLetterDate = computed(() =>
+  admissionType.value === '3' ? 'Tanggal Surat Kontrol' : 'Tanggal Surat Rujukan',
+)
+const isAccidentally = computed(() => accident.value === '1' || accident.value === '2')
+const isProvinceSelected = computed(() => accidentProvince.value !== '')
+const isCitySelected = computed(() => accidentCity.value !== '')
+const mode = props.mode !== undefined ? props.mode : 'add'
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const isService = ref(props.isService || false)
+const isShowPatient = ref(props.isShowPatient || false)
+const isDateReload = ref(false)
 
-// Bind fields
-const [tanggalSep] = defineField('tanggalSep')
-const [jalur] = defineField('jalur')
-const [noBpjs] = defineField('noBpjs')
-const [noKtp] = defineField('noKtp')
-const [noRm] = defineField('noRm')
-const [namaPasien] = defineField('namaPasien')
-const [noTelp] = defineField('noTelp')
-const [noSuratKontrol] = defineField('noSuratKontrol')
-const [tglSuratKontrol] = defineField('tglSuratKontrol')
-const [klinikTujuan] = defineField('klinikTujuan')
-const [dpjp] = defineField('dpjp')
-const [diagnosaAwal] = defineField('diagnosaAwal')
-const [cob] = defineField('cob')
-const [katarak] = defineField('katarak')
-const [jenisProsedur] = defineField('jenisProsedur')
-const [kodePenunjang] = defineField('kodePenunjang')
+// Debounced search for bpjsNumber and nationalId
+const debouncedCardNumber = refDebounced(cardNumber, 500)
+const debouncedNationalId = refDebounced(nationalId, 500)
+
+if (mode === 'add') {
+  // Set default sepDate to current date in YYYY-MM-DD format
+  const today = new Date()
+  const year = today.getFullYear()
+  const month = String(today.getMonth() + 1).padStart(2, '0')
+  const day = String(today.getDate()).padStart(2, '0')
+  sepDate.value = `${year}-${month}-${day}`
+}
+
+async function onFetchChildren(parentId: string): Promise<void> {
+  console.log('onFetchChildren', parentId)
+}
 
 // Submit handler
 const onSubmit = handleSubmit((values) => {
-  console.log('✅ Validated form values:', values)
+  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
+  emit('event', 'save-sep', values)
+})
+
+watch(props, (value) => {
+  const objects = value.objects || ({} as any)
+  if (Object.keys(objects).length > 0) {
+    sepDate.value = objects?.registerDate || new Date().toISOString().substring(0, 10)
+    cardNumber.value = objects?.cardNumber || '-'
+    nationalId.value = objects?.nationalIdentity || '-'
+    medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
+    patientName.value = objects?.patientName || '-'
+    if (objects?.sepType === 'internal') {
+      admissionType.value = '4'
+    }
+    if (objects?.sepType === 'external') {
+      admissionType.value = '1'
+    }
+    isDateReload.value = true
+    setTimeout(() => {
+      if (objects?.letterDate) {
+        referralLetterDate.value = objects?.letterDate
+      }
+      isDateReload.value = false
+    }, 100)
+  }
+})
+
+// Watch debounced search values
+watch(debouncedCardNumber, (newValue) => {
+  if (newValue && newValue !== '-' && newValue.length >= 3) {
+    emit('event', 'search-patient-by-identifier', { text: newValue, type: 'cardNumber' })
+  }
+})
+
+watch(debouncedNationalId, (newValue) => {
+  if (newValue && newValue !== '-' && newValue.length >= 3) {
+    emit('event', 'search-patient-by-identifier', { text: newValue, type: 'indentity' })
+  }
+})
+
+onMounted(() => {
+  if (!isService.value) {
+    serviceType.value = '2'
+  }
 })
 </script>
 
 <template>
   <div class="mx-auto w-full">
-    <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
+    <form
+      @submit.prevent="onSubmit"
+      class="grid gap-6 p-4"
+    >
       <!-- Tanggal SEP & Jalur -->
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
-          <DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
-          <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label for="jalur">Jalur</Label>
-          <Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
-          <p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
-        </div>
-      </div>
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Tanggal SEP
+            <span class="ml-1 text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.sepDate">
+            <DatepickerSingle
+              id="sepDate"
+              v-model="sepDate"
+              v-bind="sepDateAttrs"
+              :disabled="true"
+              placeholder="Pilih tanggal sep"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isService">
+          <Label height="compact">Pelayanan</Label>
+          <Field :errMessage="errors.serviceType">
+            <Select
+              id="serviceType"
+              icon-name="i-lucide-chevron-down"
+              v-model="serviceType"
+              v-bind="serviceTypeAttrs"
+              :items="serviceTypes"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Pelayanan"
+              @change="emit('event', 'service-type', $event)"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">Jalur</Label>
+          <Field :errMessage="errors.admissionType">
+            <Select
+              id="admissionType"
+              icon-name="i-lucide-chevron-down"
+              v-model="admissionType"
+              v-bind="admissionTypeAttrs"
+              :items="registerMethods"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih jalur"
+              @change="emit('event', 'admission-type', $event)"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
       <hr />
 
@@ -93,187 +247,750 @@ const onSubmit = handleSubmit((values) => {
       <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
         <Button
+          v-if="isShowPatient"
           variant="outline"
-          class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          type="button"
+          class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
           @click="emit('event', 'search-patient')"
         >
-          <Icon name="i-lucide-search" class="h-5 w-5" />
+          <Icon
+            name="i-lucide-search"
+            class="h-5 w-5"
+          />
           Cari Pasien
         </Button>
       </div>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
-          <Input v-model="noBpjs" />
-          <p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>No. KTP<span class="text-red-500">*</span></Label>
-          <Input v-model="noKtp" />
-          <p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>No. RM<span class="text-red-500">*</span></Label>
-          <Input v-model="noRm" />
-          <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>Nama Pasien<span class="text-red-500">*</span></Label>
-          <Input v-model="namaPasien" />
-          <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>No. Telepon<span class="text-red-500">*</span></Label>
-          <Input v-model="noTelp" />
-          <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
-        </div>
-      </div>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            No. Kartu BPJS
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.cardNumber">
+            <Input
+              id="cardNumber"
+              v-model="cardNumber"
+              v-bind="cardNumberAttrs"
+              :disabled="false"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            No. KTP
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.nationalId">
+            <Input
+              id="nationalId"
+              v-model="nationalId"
+              v-bind="nationalIdAttrs"
+              :disabled="false"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            No. RM
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.medicalRecordNumber">
+            <Input
+              id="medicalRecordNumber"
+              v-model="medicalRecordNumber"
+              v-bind="medicalRecordNumberAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Nama Pasien
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.patientName">
+            <Input
+              id="patientName"
+              v-model="patientName"
+              v-bind="patientNameAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            No. Telepon
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.phoneNumber">
+            <Input
+              id="phoneNumber"
+              v-model="phoneNumber"
+              v-bind="phoneNumberAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
       <hr />
 
       <!-- Data SEP -->
       <h3 class="text-lg font-semibold">Data SEP</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
-          <div class="flex gap-2">
-            <Input class="flex-1" v-model="noSuratKontrol" />
-            <Button
-              variant="outline"
-              class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
-              @click="emit('event', 'search-letter')"
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            {{ titleLetterNumber }}
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.referralLetterNumber">
+            <div class="flex gap-2">
+              <Input
+                id="referralLetterNumber"
+                class="flex-1"
+                v-model="referralLetterNumber"
+                v-bind="referralLetterNumberAttrs"
+                :disabled="isLoading || isReadonly"
+                @change="
+                  emit('event', 'search-letter', { admissionType, serviceType, search: referralLetterNumber || '' })
+                "
+              />
+              <Button
+                variant="outline"
+                type="button"
+                class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+                @click="
+                  emit('event', 'open-letter', { admissionType, serviceType, search: referralLetterNumber || '' })
+                "
+              >
+                <Icon
+                  name="i-lucide-search"
+                  class="h-5 w-5"
+                />
+                Cari Data
+              </Button>
+            </div>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            {{ titleLetterDate }}
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.referralLetterDate">
+            <DatepickerSingle
+              v-if="!isDateReload"
+              id="referralLetterDate"
+              v-model="referralLetterDate"
+              v-bind="referralLetterDateAttrs"
+              :disabled="true"
+              placeholder="Pilih tanggal surat"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Klinik Eksekutif
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.cob">
+            <RadioGroup
+              v-model="clinicExcecutive"
+              v-bind="clinicExcecutiveAttrs"
+              class="flex items-center gap-2"
             >
-              <Icon name="i-lucide-search" class="h-5 w-5" />
-              Cari Data
-            </Button>
-          </div>
-          <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
-          <DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
-          <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
-        </div>
-        <div class="flex flex-row items-center gap-2">
-          <div class="flex-1">
-            <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
-            <Select
-              icon-name="i-lucide-chevron-down"
-              v-model="klinikTujuan"
-              :items="items"
-              placeholder="Pilih klinik"
-            ></Select>
-            <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
-          </div>
-          <div>
-            <Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
-            <RadioGroup v-model="cob" class="flex items-center gap-2">
               <div class="flex items-center space-x-2">
-                <RadioGroupItem value="Ya" id="cob-ya" />
-                <Label for="cob-ya">Ya</Label>
+                <RadioGroupItem
+                  value="yes"
+                  id="clinicExcecutive-yes"
+                />
+                <Label for="clinicExcecutive-yes">Ya</Label>
               </div>
               <div class="flex items-center space-x-2">
-                <RadioGroupItem value="Tidak" id="cob-tidak" />
-                <Label for="cob-tidak">Tidak</Label>
+                <RadioGroupItem
+                  value="no"
+                  id="clinicExcecutive-no"
+                />
+                <Label for="clinicExcecutive-no">Tidak</Label>
               </div>
             </RadioGroup>
-          </div>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>DPJP<span class="text-red-500">*</span></Label>
-          <Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
-          <p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
-          <Input v-model="diagnosaAwal" />
-          <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
-        </div>
-      </div>
+          </Field>
+        </Cell>
 
-      <!-- Catatan -->
-      <div>
-        <Label>Catatan</Label>
-        <Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
-      </div>
+        <Cell v-if="serviceType === '1'">
+          <Label height="compact">
+            Faskes Asal
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.fromClinic">
+            <Combobox
+              id="fromClinic"
+              v-model="fromClinic"
+              v-bind="fromClinicAttrs"
+              :items="facilitiesFrom"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Asal"
+              search-placeholder="Cari Asal"
+              empty-message="Item tidak ditemukan"
+              @update:searchText="emit('fetch', { menu: 'clinic-from', value: $event })"
+            />
+          </Field>
+        </Cell>
 
-      <div class="flex items-center gap-4">
-        <div>
-          <Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
-          <RadioGroup v-model="cob" class="flex items-center gap-2">
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Ya" id="cob-ya" />
-              <Label for="cob-ya">Ya</Label>
-            </div>
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Tidak" id="cob-tidak" />
-              <Label for="cob-tidak">Tidak</Label>
-            </div>
-          </RadioGroup>
-        </div>
-        <div>
-          <Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
-          <RadioGroup v-model="katarak" class="flex items-center gap-2">
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Ya" id="katarak-ya" />
-              <Label for="katarak-ya">Ya</Label>
-            </div>
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Tidak" id="katarak-tidak" />
-              <Label for="katarak-tidak">Tidak</Label>
-            </div>
-          </RadioGroup>
-        </div>
-      </div>
+        <Cell v-if="isShowPatient">
+          <Label height="compact">
+            Klinik Tujuan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.destinationClinic">
+            <Combobox
+              id="destinationClinic"
+              v-model="destinationClinic"
+              v-bind="destinationClinicAttrs"
+              :items="facilitiesTo"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Klinik"
+              search-placeholder="Cari Klinik"
+              empty-message="Item tidak ditemukan"
+              @update:searchText="emit('fetch', { menu: 'clinic-to', value: $event })"
+            />
+          </Field>
+        </Cell>
 
-      <div class="grid gap-4 md:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label class="mb-2 block">Jenis Prosedur<span class="text-red-500">*</span></Label>
-          <RadioGroup v-model="jenisProsedur" class="flex items-center gap-2">
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="procedure-one" id="procedure-one" />
-              <Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
-            </div>
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="procedure-two" id="procedure-two" />
-              <Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
-            </div>
-          </RadioGroup>
-        </div>
-      </div>
+         <Cell>
+          <Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.subSpecialistId">
+            <TreeSelect
+              id="subSpecialistId"
+              v-model="subSpecialistId"
+              v-bind="subSpecialistIdAttrs"
+              :data="specialists || []"
+              :on-fetch-children="onFetchChildren"
+            />
+          </Field>
+        </Cell>
 
-      <div class="grid gap-4 md:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label>Kode Penunjang<span class="text-red-500">*</span></Label>
-          <Select
-            icon-name="i-lucide-chevron-down"
-            v-model="kodePenunjang"
-            :items="items"
-            placeholder="Pilih Kode Penunjang"
-          ></Select>
-          <p v-if="errors.kodePenunjang" class="text-sm text-red-500">{{ errors.kodePenunjang }}</p>
-        </div>
-      </div>
+        <Cell>
+          <Label height="compact">
+            DPJP
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.attendingDoctor">
+            <Combobox
+              id="attendingDoctor"
+              v-model="attendingDoctor"
+              v-bind="attendingDoctorAttrs"
+              :items="doctors"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih DPJP"
+              search-placeholder="Cari DPJP"
+              empty-message="Item tidak ditemukan"
+              @update:searchText="emit('fetch', { menu: 'doctor', value: $event })"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Diagnosa Awal
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.initialDiagnosis">
+            <Combobox
+              id="initialDiagnosis"
+              v-model="initialDiagnosis"
+              v-bind="initialDiagnosisAttrs"
+              :items="diagnoses"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Diagnosa Awal"
+              search-placeholder="Cari Diagnosa Awal"
+              empty-message="Item tidak ditemukan"
+              @update:searchText="emit('fetch', { menu: 'diagnosis', value: $event })"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="1"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="dynamic">Catatan</Label>
+          <Field>
+            <Textarea
+              id="note"
+              v-model="note"
+              v-bind="noteAttrs"
+              class="h-[200px] w-full border-gray-400 bg-white"
+              placeholder="Masukkan catatan opsional"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        v-if="serviceType === '1'"
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="dynamic">
+            Kelas Rawat
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.classLevel">
+            <Select
+              id="classLevel"
+              v-model="classLevel"
+              v-bind="classLevelAttrs"
+              :items="classLevels"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Kelas Rawat"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="dynamic">
+            Kelas Rawat Naik
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.classLevelUpgrade">
+            <Select
+              id="classLevelUpgrade"
+              v-model="classLevelUpgrade"
+              v-bind="classLevelUpgradeAttrs"
+              :items="classLevelUpgrades"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Kelas Rawat Naik"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="dynamic">
+            Pembiayaan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.classPaySource">
+            <Select
+              id="classPaySource"
+              v-model="classPaySource"
+              v-bind="classPaySourceAttrs"
+              :items="classPaySources"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Pembiayaan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        v-if="serviceType === '1' && classLevelUpgrade !== ''"
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="1"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="dynamic">
+            Penanggung Jawab
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.responsiblePerson">
+            <Input
+              id="responsiblePerson"
+              v-model="responsiblePerson"
+              v-bind="responsiblePersonAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan penanggung jawab"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            COB
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.cob">
+            <RadioGroup
+              v-model="cob"
+              v-bind="cobAttrs"
+              class="flex items-center gap-2"
+            >
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="yes"
+                  id="cob-yes"
+                />
+                <Label for="cob-yes">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="Tidak"
+                  id="cob-no"
+                />
+                <Label for="cob-no">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Katarak
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.cataract">
+            <RadioGroup
+              v-model="cataract"
+              v-bind="cataractAttrs"
+              class="flex items-center gap-2"
+            >
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="yes"
+                  id="cataract-yes"
+                />
+                <Label for="cataract-yes">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="no"
+                  id="cataract-no"
+                />
+                <Label for="cataract-no">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Status Kecelakaan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.trafficAccident">
+            <Select
+              id="accident"
+              icon-name="i-lucide-chevron-down"
+              v-model="accident"
+              v-bind="accidentAttrs"
+              :items="accidents"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Status Kecelakaan"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            No LP
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.lpNumber">
+            <Input
+              id="lpNumber"
+              v-model="lpNumber"
+              v-bind="lpNumberAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Tanggal Kejadian
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentDate">
+            <DatepickerSingle
+              id="accidentDate"
+              v-model="accidentDate"
+              v-bind="accidentDateAttrs"
+              :disabled="true"
+              placeholder="Pilih tanggal kejadian"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Keterangan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentNote">
+            <Input
+              id="accidentNote"
+              v-model="accidentNote"
+              v-bind="accidentNoteAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Provinsi
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentProvince">
+            <Combobox
+              id="accidentProvince"
+              v-model="accidentProvince"
+              v-bind="accidentProvinceAttrs"
+              :items="provinces"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Provinsi"
+              search-placeholder="Cari Provinsi"
+              empty-message="Item tidak ditemukan"
+              @update:modelValue="emit('fetch', { menu: 'province', value: $event })"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Kota
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentCity">
+            <Combobox
+              id="accidentCity"
+              v-model="accidentCity"
+              v-bind="accidentCityAttrs"
+              :items="cities"
+              :is-disabled="isLoading || isReadonly || !isProvinceSelected"
+              placeholder="Pilih Kota"
+              search-placeholder="Cari Kota"
+              empty-message="Item tidak ditemukan"
+              @update:modelValue="emit('fetch', { menu: 'city', value: $event })"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Kecamatan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentDistrict">
+            <Combobox
+              id="accidentDistrict"
+              v-model="accidentDistrict"
+              v-bind="accidentDistrictAttrs"
+              :items="districts"
+              :is-disabled="isLoading || isReadonly || !isProvinceSelected || !isCitySelected"
+              placeholder="Pilih Kecamatan"
+              search-placeholder="Cari Kecamatan"
+              empty-message="Item tidak ditemukan"
+              @update:modelValue="emit('fetch', { menu: 'district', value: $event })"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Suplesi
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.suplesi">
+            <RadioGroup
+              v-model="suplesi"
+              v-bind="suplesiAttrs"
+              class="flex items-center gap-2"
+            >
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="yes"
+                  id="suplesi-yes"
+                />
+                <Label for="suplesi-yes">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="no"
+                  id="suplesi-no"
+                />
+                <Label for="suplesi-no">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally && suplesi === 'yes'">
+          <Label height="compact">
+            No. SEP Suplesi
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.suplesiNumber">
+            <Input
+              id="lpNumber"
+              v-model="suplesiNumber"
+              v-bind="suplesiNumberAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Tujuan Kunjungan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.purposeOfVisit">
+            <Select
+              id="purposeOfVisit"
+              icon-name="i-lucide-chevron-down"
+              v-model="purposeOfVisit"
+              v-bind="purposeOfVisitAttrs"
+              :items="purposes"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Tujuan Kunjungan"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="purposeOfVisit === '1'">
+          <Label height="compact">
+            Jenis Prosedur
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.procedureType">
+            <Select
+              id="procedureType"
+              icon-name="i-lucide-chevron-down"
+              v-model="procedureType"
+              v-bind="procedureTypeAttrs"
+              :items="procedures"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Prosedur"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="purposeOfVisit === '2'">
+          <Label height="compact">
+            Assemen Pelayanan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.serviceAssessment">
+            <Select
+              id="serviceAssessment"
+              icon-name="i-lucide-chevron-down"
+              v-model="serviceAssessment"
+              v-bind="serviceAssessmentAttrs"
+              :items="assessments"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Assemen Pelayanan"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="purposeOfVisit === '1'">
+          <Label height="compact">
+            Kode Penunjang
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.supportCode">
+            <Select
+              id="supportCode"
+              icon-name="i-lucide-chevron-down"
+              v-model="supportCode"
+              v-bind="supportCodeAttrs"
+              :items="supportCodes"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Kode Penunjang"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <!-- {{ JSON.stringify(errors, null, 2) }} -->
 
       <!-- Actions -->
       <div class="mt-6 flex justify-end gap-2">
         <Button
-          type="button"
           variant="ghost"
-          class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50"
+          type="button"
+          class="h-[40px] min-w-[120px] text-orange-400 hover:bg-green-50"
           @click="emit('event', 'history-sep')"
         >
-          <Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
+          <Icon
+            name="i-lucide-history"
+            class="h-5 w-5"
+          />
+          Riwayat SEP
+        </Button>
+        <Button
+          variant="outline"
+          type="button"
+          class="h-[40px] min-w-[120px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50 hover:text-orange-400"
+        >
+          <Icon
+            name="i-lucide-eye"
+            class="h-5 w-5"
+          />
+          Preview
         </Button>
         <Button
           type="button"
-          variant="outline"
-          class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
+          class="h-[40px] min-w-[120px] text-white"
+          :disabled="isLoading"
+          @click="onSubmit"
         >
-          <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
-        </Button>
-        <Button type="submit" class="h-[40px] min-w-[120px] text-white">
-          <Icon name="i-lucide-save" class="h-5 w-5" />
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
           Simpan
         </Button>
       </div>
diff --git a/app/components/app/sep/list-cfg.control.ts b/app/components/app/sep/list-cfg.control.ts
new file mode 100644
index 00000000..40156465
--- /dev/null
+++ b/app/components/app/sep/list-cfg.control.ts
@@ -0,0 +1,51 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 50 },
+    { width: 150 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 150 },
+  ],
+
+  headers: [
+    [
+      { label: '' },
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TANGGAL SURAT KONTROL' },
+      { label: 'NO. SEP' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'KLINIK TUJUAN' },
+      { label: 'DOKTER' },
+    ],
+  ],
+
+  keys: ['check', 'letterNumber', 'plannedDate', 'sepNumber', 'patientName', 'bpjsCardNo', 'clinic', 'doctor'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Code' },
+    { key: 'name', label: 'Name' },
+  ],
+
+  parses: {},
+
+  components: {
+    check(rec, idx) {
+      return {
+        idx,
+        rec: { ...(rec as object), menu: 'letter' },
+        component: SelectedRadio,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/sep/list-cfg.history.ts b/app/components/app/sep/list-cfg.history.ts
new file mode 100644
index 00000000..35bb656c
--- /dev/null
+++ b/app/components/app/sep/list-cfg.history.ts
@@ -0,0 +1,35 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+export interface SepHistoryData {
+  sepNumber: string
+  sepDate: string
+  referralNumber: string
+  diagnosis: string
+  serviceType: string
+  careClass: string
+}
+
+export const config: Config = {
+  cols: [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
+
+  headers: [
+    [
+      { label: 'NO. SEP' },
+      { label: 'TGL. SEP' },
+      { label: 'NO. RUJUKAN' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'JENIS PELAYANAN' },
+      { label: 'KELAS RAWAT' },
+    ],
+  ],
+
+  keys: ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass'],
+
+  delKeyNames: [{ key: 'code', label: 'Kode' }],
+
+  parses: {},
+
+  components: {},
+
+  htmls: {},
+}
diff --git a/app/components/app/sep/list-cfg.letter.ts b/app/components/app/sep/list-cfg.letter.ts
new file mode 100644
index 00000000..44458afc
--- /dev/null
+++ b/app/components/app/sep/list-cfg.letter.ts
@@ -0,0 +1,51 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
+
+export interface LetterData {
+  letterNumber: string
+  plannedDate: string
+  sepNumber: string
+  patientName: string
+  bpjsCardNo: string
+  clinic: string
+  doctor?: string
+}
+
+export const config: Config = {
+  cols: [{ width: 50 }, { width: 150 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }],
+
+  headers: [
+    [
+      { label: '' },
+      { label: 'NO. SURAT RUJUKAN' },
+      { label: 'TANGGAL SURAT RUJUKAN' },
+      { label: 'NO. SEP' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'KLINIK TUJUAN' },
+    ],
+  ],
+
+  keys: ['check', 'letterNumber', 'plannedDate', 'sepNumber', 'patientName', 'bpjsCardNo', 'clinic'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Code' },
+    { key: 'name', label: 'Name' },
+  ],
+
+  parses: {},
+
+  components: {
+    check(rec, idx) {
+      return {
+        idx,
+        rec: { ...(rec as object), menu: 'letter' },
+        component: SelectedRadio,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/sep/list-cfg.ts b/app/components/app/sep/list-cfg.ts
index 4a6784fc..e2257954 100644
--- a/app/components/app/sep/list-cfg.ts
+++ b/app/components/app/sep/list-cfg.ts
@@ -41,24 +41,24 @@ export const config: Config = {
   ],
 
   keys: [
-    'tgl_sep',
-    'no_sep',
-    'pelayanan',
-    'jalur',
-    'no_rm',
-    'nama_pasien',
-    'no_kartu_bpjs',
-    'no_surat_kontrol',
-    'tgl_surat_kontrol',
-    'klinik_tujuan',
-    'dpjp',
-    'diagnosis_awal',
+    'letterDate',
+    'letterNumber',
+    'serviceType',
+    'flow',
+    'medicalRecordNumber',
+    'patientName',
+    'cardNumber',
+    'controlLetterNumber',
+    'controlLetterDate',
+    'clinicDestination',
+    'attendingDoctor',
+    'diagnosis',
     'action',
   ],
 
   delKeyNames: [
-    { key: 'no_sep', label: 'NO. SEP' },
-    { key: 'nama_pasien', label: 'Nama Pasien' },
+    { key: 'letterNumber', label: 'NO. SEP' },
+    { key: 'patientName', label: 'Nama Pasien' },
   ],
 
   parses: {},
diff --git a/app/components/app/sep/list-cfg.visit.ts b/app/components/app/sep/list-cfg.visit.ts
new file mode 100644
index 00000000..3de1f0a3
--- /dev/null
+++ b/app/components/app/sep/list-cfg.visit.ts
@@ -0,0 +1,50 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+export interface SepVisitData {
+  letterNumber: string
+  letterDate: string
+  sepNumber: string
+  patientName: string
+  bpjsNumber: string
+  poly: string
+  diagnosis: string
+  serviceType: string
+  careClass: string
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TGL RENCANA KONTROL' },
+      { label: 'NO. SEP' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'JENIS PELAYANAN' },
+      { label: 'KELAS RAWAT' },
+    ],
+  ],
+
+  keys: ['letterNumber', 'letterDate', 'sepNumber', 'patientName', 'bpjsNumber', 'diagnosis', 'serviceType', 'careClass'],
+
+  delKeyNames: [{ key: 'code', label: 'Kode' }],
+
+  parses: {},
+
+  components: {},
+
+  htmls: {},
+}
diff --git a/app/components/app/sep/list-history.vue b/app/components/app/sep/list-history.vue
new file mode 100644
index 00000000..fdad0791
--- /dev/null
+++ b/app/components/app/sep/list-history.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { SepHistoryData } from './list-cfg.history'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.history'
+
+const props = defineProps<{
+  data: SepHistoryData[]
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="props.data"
+  />
+  <PaginationView
+    v-if="paginationMeta"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+</template>
diff --git a/app/components/app/sep/list-letter.vue b/app/components/app/sep/list-letter.vue
new file mode 100644
index 00000000..b4b9b3fe
--- /dev/null
+++ b/app/components/app/sep/list-letter.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { LetterData } from './list-cfg.letter'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config as configControl } from './list-cfg.control'
+import { config as configLetter } from './list-cfg.letter'
+
+const props = defineProps<{
+  data: LetterData[]
+  menu?: string
+  selected?: string
+  paginationMeta?: PaginationMeta
+}>()
+
+const menu = props.menu || 'control'
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="menu === 'control' ? configControl : configLetter"
+    :rows="props.data"
+    :selected="props.selected"
+  />
+  <PaginationView
+    v-if="paginationMeta"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+</template>
+
diff --git a/app/components/app/sep/list-visit.vue b/app/components/app/sep/list-visit.vue
new file mode 100644
index 00000000..ed6aec77
--- /dev/null
+++ b/app/components/app/sep/list-visit.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { SepVisitData } from './list-cfg.visit'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.history'
+
+const props = defineProps<{
+  data: SepVisitData[]
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="props.data"
+  />
+  <PaginationView
+    v-if="paginationMeta"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+</template>
diff --git a/app/components/app/sep/list.vue b/app/components/app/sep/list.vue
index f44166e2..2afaa2cc 100644
--- a/app/components/app/sep/list.vue
+++ b/app/components/app/sep/list.vue
@@ -1,23 +1,11 @@
 <script setup lang="ts">
 import { config } from './list-cfg'
 
-interface SepData {
-  tgl_sep: string
-  no_sep: string
-  pelayanan: string
-  jalur: string
-  no_rm: string
-  nama_pasien: string
-  no_kartu_bpjs: string
-  no_surat_kontrol: string
-  tgl_surat_kontrol: string
-  klinik_tujuan: string
-  dpjp: string
-  diagnosis_awal: string
-}
+// Types
+import type { VclaimSepData } from '~/models/vclaim'
 
 const props = defineProps<{
-  data: SepData[]
+  data: VclaimSepData[]
 }>()
 </script>
 
diff --git a/app/components/app/sep/print-preview.vue b/app/components/app/sep/print-preview.vue
new file mode 100644
index 00000000..92ba7324
--- /dev/null
+++ b/app/components/app/sep/print-preview.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue"
+import { Card, CardContent } from "~/components/pub/ui/card"
+import { Separator } from "~/components/pub/ui/separator"
+
+// Simulasi data dari API
+const route = useRoute()
+const sepData = ref<any>(null)
+
+onMounted(async () => {
+  // contoh fetch data API (ganti dengan endpoint kamu)
+  const id = route.params.id
+  const res = await fetch(`/api/sep/${id}`)
+  sepData.value = await res.json()
+})
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 space-y-4">
+    <div class="flex items-center justify-between">
+      <h1 class="text-lg font-semibold">Preview SEP</h1>
+      <p class="text-sm text-muted-foreground">
+      </p>
+    </div>
+
+    <Card class="p-6">
+      <CardContent class="space-y-4">
+        <!-- Header -->
+        <div class="flex items-start justify-between">
+          <div class="flex items-center gap-3">
+            <img
+              src="/bpjs-logo.png"
+              alt="BPJS"
+              class="h-10 w-auto"
+            />
+            <div>
+              <p class="font-semibold">SURAT ELIGIBILITAS PESERTA</p>
+              <p>RSUD dr. Saiful Anwar</p>
+            </div>
+          </div>
+          <p class="text-sm text-right">
+            Peserta: {{ sepData?.peserta?.jenisPeserta || "-" }}
+          </p>
+        </div>
+
+        <Separator />
+
+        <!-- Content -->
+        <div class="grid grid-cols-2 gap-8 text-sm">
+          <!-- Left -->
+          <div class="space-y-1">
+            <p>No. SEP : {{ sepData?.noSEP }}</p>
+            <p>Tgl. SEP : {{ sepData?.tglSEP }}</p>
+            <p>No. Kartu : {{ sepData?.noKartu }}</p>
+            <p>Nama Peserta : {{ sepData?.nama }}</p>
+            <p>Tgl. Lahir : {{ sepData?.tglLahir }} Kelamin: {{ sepData?.kelamin }}</p>
+            <p>No. Telepon : {{ sepData?.telepon }}</p>
+            <p>Sub/Spesialis : {{ sepData?.spesialis }}</p>
+            <p>Dokter : {{ sepData?.dokter }}</p>
+            <p>Faskes Perujuk : {{ sepData?.faskes }}</p>
+            <p>Diagnosa Awal : {{ sepData?.diagnosa }}</p>
+            <p>Catatan : {{ sepData?.catatan }}</p>
+          </div>
+
+          <!-- Right -->
+          <div class="space-y-1">
+            <p>Jns. Rawat : {{ sepData?.jenisRawat }}</p>
+            <p>Jns. Kunjungan : {{ sepData?.jenisKunjungan }}</p>
+            <p>Poli Perujuk : {{ sepData?.poliPerujuk }}</p>
+            <p>Kls. Hak : {{ sepData?.kelasHak }}</p>
+            <p>Kls. Rawat : {{ sepData?.kelasRawat }}</p>
+            <p>Penjamin : {{ sepData?.penjamin }}</p>
+
+            <div class="mt-6 text-center">
+              <p class="font-semibold">Persetujuan</p>
+              <p>Pasien/Keluarga Pasien</p>
+              <img
+                :src="sepData?.qrCodeUrl"
+                alt="QR Code"
+                class="h-24 mx-auto mt-2"
+              />
+              <p class="font-semibold mt-2">{{ sepData?.nama }}</p>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Footer -->
+        <div class="text-xs text-muted-foreground leading-snug space-y-1">
+          <p>*Saya menyetujui BPJS Kesehatan untuk:</p>
+          <ul class="list-disc pl-5">
+            <li>membuka dan atau menggunakan informasi medis Pasien untuk keperluan administrasi dan pembiayaan</li>
+            <li>memberikan akses informasi kepada tenaga medis di RSUD Dr. Saiful Anwar</li>
+            <li>Penjaminan lainnya sesuai ketentuan yang berlaku</li>
+          </ul>
+          <p class="pt-2">
+            Cetakan ke {{ sepData?.cetakanKe || 1 }} |
+            {{ sepData?.tglCetak }}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>
diff --git a/app/components/app/sep/small-entry.vue b/app/components/app/sep/small-entry.vue
deleted file mode 100644
index a5372099..00000000
--- a/app/components/app/sep/small-entry.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
-import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import { Form } from '~/components/pub/ui/form'
-import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
-
-import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
-import { mapToComboboxOptList } from '~/lib/utils'
-
-interface DivisionFormData {
-  name: string
-  code: string
-  parentId: string
-}
-
-const props = defineProps<{
-  division: {
-    msg: {
-      placeholder: string
-      search: string
-      empty: string
-    }
-  }
-  items: {
-    value: string
-    label: string
-    code: string
-  }[]
-  schema: any
-  initialValues?: Partial<DivisionFormData>
-  errors?: FormErrors
-}>()
-
-const emit = defineEmits<{
-  submit: [values: DivisionFormData, resetForm: () => void]
-  cancel: [resetForm: () => void]
-}>()
-
-const relationshipOpts = mapToComboboxOptList(relationshipCodes)
-const educationOpts = mapToComboboxOptList(educationCodes)
-const occupationOpts = mapToComboboxOptList(occupationCodes)
-const genderOpts = mapToComboboxOptList(genderCodes)
-
-const formSchema = toTypedSchema(props.schema)
-
-// Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
-  const formData: DivisionFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    parentId: values.parentId || '',
-  }
-  emit('submit', formData, resetForm)
-}
-const doctorOpts = ref([
-  { label: 'Pilih', value: null },
-  { label: 'Dr. A', value: 1 },
-])
-const paymentOpts = ref([
-  { label: 'Umum', value: 'umum' },
-  { label: 'BPJS', value: 'bpjs' },
-])
-const sepOpts = ref([
-  { label: 'Rujukan Internal', value: 'ri' },
-  { label: 'SEP Rujukan', value: 'sr' },
-])
-
-// file refs untuk tombol "Pilih Berkas"
-const sepFileInput = ref<HTMLInputElement | null>(null)
-const sippFileInput = ref<HTMLInputElement | null>(null)
-
-function pickSepFile() {
-  sepFileInput.value?.click()
-}
-function pickSippFile() {
-  sippFileInput.value?.click()
-}
-
-function onSepFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  // set ke form / emit / simpan di state sesuai form library-mu
-  console.log('sep file', f)
-}
-
-function onSippFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  console.log('sipp file', f)
-}
-
-function onAddSep() {
-  // contoh handler tombol "+" di sebelah No. SEP
-  console.log('open modal tambah SEP')
-}
-</script>
-
-<template>
-  <Form
-    v-slot="{ handleSubmit, resetForm }"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :initial-values="initialValues"
-  >
-    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
-      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-        <div class="flex flex-col justify-between">
-          <div class="p-2">
-            <h2 class="text-md font-semibold">Data Kunjungan</h2>
-          </div>
-          <Block>
-            <!-- Tanggal Daftar (DatePicker) -->
-            <FieldGroup :column="3">
-              <Label label-for="register_date">Dengan Rujukan</Label>
-              <Field id="register_date" :errors="errors">
-                <FormField v-slot="{ componentField }" name="register_date">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="bpjs_number"
-                        v-bind="componentField"
-                        placeholder="Pilih jenis pembayaran terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- Jenis Pembayaran (Combobox) -->
-            <FieldGroup :column="3">
-              <Label label-for="payment_type">Rujukan</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>
-            </FieldGroup>
-
-            <FieldGroup :column="3">
-              <Label label-for="bpjs_number">No. Rujukan</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>
-            </FieldGroup>
-
-            <!-- No. Kartu BPJS -->
-            <FieldGroup :column="2">
-              <Label label-for="bpjs_number">Tanggal Rujukan</Label>
-              <Field id="bpjs_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="bpjs_number">
-                  <FormItem>
-                    <FormControl>
-                      <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- Jenis SEP -->
-            <FieldGroup :column="2">
-              <Label label-for="sep_type">Diagnosis</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>
-            </FieldGroup>
-            <!-- No. SEP (input + tombol +) -->
-
-            <FieldGroup>
-              <Label label-for="sep_type">Status Kecelakaan</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>
-            </FieldGroup>
-          </Block>
-        </div>
-      </div>
-    </form>
-  </Form>
-</template>
diff --git a/app/components/app/sep/table-history-sep.vue b/app/components/app/sep/table-history-sep.vue
deleted file mode 100644
index bfe00e51..00000000
--- a/app/components/app/sep/table-history-sep.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from '~/components/pub/ui/dialog'
-import { Input } from '~/components/pub/ui/input'
-
-const props = defineProps<{
-  open: boolean
-  histories: Array<{
-    no_sep: string
-    tgl_sep: string
-    no_rujukan: string
-    diagnosis: string
-    pelayanan: string
-    kelas: string
-  }>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-}>()
-
-const search = ref('')
-
-const filteredHistories = computed(() => {
-  const histories = props.histories || []
-  return histories.filter((p) => p.no_sep.includes(search.value))
-})
-</script>
-
-<template>
-  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child></DialogTrigger>
-    <DialogContent class="max-w-[50%]">
-      <DialogHeader>
-        <DialogTitle>History SEP</DialogTitle>
-      </DialogHeader>
-
-      <!-- Input Search -->
-      <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
-      </div>
-
-      <!-- Table -->
-      <div class="overflow-x-auto rounded-lg border">
-        <table class="w-full text-sm">
-          <thead class="bg-gray-100">
-            <tr class="text-left">
-              <th class="p-2">NO. SEP</th>
-              <th class="p-2">TGL. SEP</th>
-              <th class="p-2">NO. RUJUKAN</th>
-              <th class="p-2">DIAGNOSIS AWAL</th>
-              <th class="p-2">JENIS PELAYANAN</th>
-              <th class="p-2">KELAS RAWAT</th>
-            </tr>
-          </thead>
-          <tbody class="font-normal">
-            <tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
-              <td class="p-2">{{ p.no_sep }}</td>
-              <td class="p-2">{{ p.tgl_sep }}</td>
-              <td class="p-2">{{ p.no_rujukan }}</td>
-              <td class="p-2">{{ p.diagnosis }}</td>
-              <td class="p-2">{{ p.pelayanan }}</td>
-              <td class="p-2">{{ p.kelas }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Footer -->
-      <DialogFooter>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</template>
diff --git a/app/components/app/sep/table-search-letter.vue b/app/components/app/sep/table-search-letter.vue
deleted file mode 100644
index 64e65ff6..00000000
--- a/app/components/app/sep/table-search-letter.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from '~/components/pub/ui/dialog'
-import { Button } from '~/components/pub/ui/button'
-import { Input } from '~/components/pub/ui/input'
-import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
-
-const props = defineProps<{
-  open: boolean
-  letters: Array<{
-    noSurat: string
-    tglRencana: string
-    noSep: string
-    namaPasien: string
-    noBpjs: string
-    klinik: string
-    dokter: string
-  }>
-  selected: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-  (e: 'update:selected', value: string): void
-  (e: 'save'): void
-}>()
-
-const search = ref('')
-
-const filteredLetters = computed(() => {
-  const letters = props.letters || []
-  return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
-})
-
-function saveSelection() {
-  emit('save')
-  emit('update:open', false)
-}
-</script>
-
-<template>
-  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child></DialogTrigger>
-    <DialogContent class="max-w-[50%]">
-      <DialogHeader>
-        <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
-      </DialogHeader>
-
-      <!-- Input Search -->
-      <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
-      </div>
-
-      <!-- Table -->
-      <div class="overflow-x-auto rounded-lg border">
-        <table class="w-full text-sm">
-          <thead class="bg-gray-100">
-            <tr class="text-left">
-              <th class="p-2"></th>
-              <th class="p-2">NO. SURAT KONTROL</th>
-              <th class="p-2">TGL RENCANA KONTROL</th>
-              <th class="p-2">NO. SEP</th>
-              <th class="p-2">NAMA PASIEN</th>
-              <th class="p-2">NO. KARTU BPJS</th>
-              <th class="p-2">KLINIK</th>
-              <th class="p-2">DOKTER</th>
-            </tr>
-          </thead>
-          <tbody class="font-normal">
-            <tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
-              <td class="p-2">
-                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
-                  <RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
-                </RadioGroup>
-              </td>
-              <td class="p-2">{{ p.noSurat }}</td>
-              <td class="p-2">{{ p.tglRencana }}</td>
-              <td class="p-2">{{ p.noSep }}</td>
-              <td class="p-2">{{ p.namaPasien }}</td>
-              <td class="p-2">{{ p.noBpjs }}</td>
-              <td class="p-2">{{ p.klinik }}</td>
-              <td class="p-2">{{ p.dokter }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Footer -->
-      <DialogFooter>
-        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
-          <Icon name="i-lucide-save" class="h-5 w-5" />
-          Simpan
-        </Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</template>
diff --git a/app/components/app/sep/table-search-patient.vue b/app/components/app/sep/table-search-patient.vue
deleted file mode 100644
index 13a78651..00000000
--- a/app/components/app/sep/table-search-patient.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from '~/components/pub/ui/dialog'
-import { Button } from '~/components/pub/ui/button'
-import { Input } from '~/components/pub/ui/input'
-import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
-
-const props = defineProps<{
-  open: boolean
-  patients: Array<{
-    ktp: string
-    rm: string
-    bpjs: string
-    nama: string
-  }>
-  selected: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-  (e: 'update:selected', value: string): void
-  (e: 'save'): void
-}>()
-
-const search = ref('')
-const filteredPatients = computed(() => {
-  const patients = props.patients || []
-  return patients.filter(
-    (p) =>
-      p.ktp.includes(search.value) ||
-      p.rm.includes(search.value) ||
-      p.bpjs.includes(search.value) ||
-      p.nama.toLowerCase().includes(search.value.toLowerCase()),
-  )
-})
-
-function saveSelection() {
-  emit('save')
-  emit('update:open', false)
-}
-</script>
-
-<template>
-  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child></DialogTrigger>
-    <DialogContent class="max-w-3xl">
-      <DialogHeader>
-        <DialogTitle>Cari Pasien</DialogTitle>
-      </DialogHeader>
-
-      <!-- Input Search -->
-      <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
-      </div>
-
-      <!-- Table -->
-      <div class="overflow-x-auto rounded-lg border">
-        <table class="w-full text-sm">
-          <thead class="bg-gray-100">
-            <tr class="text-left">
-              <th class="p-2"></th>
-              <th class="p-2">NO. KTP</th>
-              <th class="p-2">NO. RM</th>
-              <th class="p-2">NO. KARTU BPJS</th>
-              <th class="p-2">NAMA PASIEN</th>
-            </tr>
-          </thead>
-          <tbody class="font-normal">
-            <tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
-              <td class="p-2">
-                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
-                  <RadioGroupItem :id="p.ktp" :value="p.ktp" />
-                </RadioGroup>
-              </td>
-              <td class="p-2">{{ p.ktp }}</td>
-              <td class="p-2">{{ p.rm }}</td>
-              <td class="p-2">{{ p.bpjs }}</td>
-              <td class="p-2">{{ p.nama }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Footer -->
-      <DialogFooter>
-        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
-          <Icon name="i-lucide-save" class="h-5 w-5" />
-          Simpan
-        </Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</template>
diff --git a/app/components/app/sep/view-history.vue b/app/components/app/sep/view-history.vue
new file mode 100644
index 00000000..a6a6091c
--- /dev/null
+++ b/app/components/app/sep/view-history.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// Components
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import ListHistory from './list-history.vue'
+
+// Types
+import type { SepHistoryData } from './list-cfg.history'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+const props = defineProps<{
+  open: boolean
+  histories: Array<SepHistoryData>
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+</script>
+
+<template>
+  <Dialog
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-[50%]">
+      <DialogHeader>
+        <DialogTitle>History SEP</DialogTitle>
+      </DialogHeader>
+
+      <div class="overflow-x-auto rounded-lg border">
+        <ListHistory :data="histories" :pagination-meta="paginationMeta" />
+      </div>
+
+      <DialogFooter></DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/sep/view-letter.vue b/app/components/app/sep/view-letter.vue
new file mode 100644
index 00000000..e1c0ecf2
--- /dev/null
+++ b/app/components/app/sep/view-letter.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, provide, watch } from 'vue'
+
+// Components
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import ListLetter from './list-letter.vue'
+
+// Types
+import type { LetterData } from './list-cfg.letter'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Helpers
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  open: boolean
+  menu?: string
+  letters: Array<LetterData>
+  selected: string
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'fetch', value: any): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+const debouncedSearch = refDebounced(search, 500) // 500ms debounce
+
+// Provide for radio selection - use selected prop directly
+const recSelectId = ref<string>(props.selected || '')
+const recSelectMenu = ref<string>('letter')
+
+provide('rec_select_id', recSelectId)
+provide('rec_select_menu', recSelectMenu)
+
+function saveSelection() {
+  // Validate that a letter is selected
+  if (!props.selected || props.selected === '') {
+    console.warn('No letter selected')
+    return
+  }
+  emit('save')
+  emit('update:open', false)
+}
+
+function handlePageChange(page: number) {
+  emit('fetch', { 'page-number': page })
+}
+
+// Watch for changes in recSelectId and emit update:selected
+watch(recSelectId, (newValue) => {
+  if (newValue && newValue !== '') {
+    emit('update:selected', newValue)
+  }
+})
+
+// Watch for changes in selected prop
+watch(() => props.selected, (newValue) => {
+  recSelectId.value = newValue || ''
+})
+
+watch(debouncedSearch, (newValue) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    emit('fetch', { search: newValue })
+  }
+})
+</script>
+
+<template>
+  <Dialog
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Search Control Letter</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="max-w-[50%]">
+        <Input
+          v-model="search"
+          placeholder="Search by Control Letter No. / SEP No."
+        />
+      </div>
+
+      <div class="overflow-x-auto rounded-lg border">
+        <ListLetter 
+          :data="letters" 
+          :menu="props.menu"
+          :selected="props.selected"
+          :pagination-meta="paginationMeta" 
+          @page-change="handlePageChange"
+        />
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button
+          variant="default"
+          class="h-[40px] min-w-[120px] text-white"
+          @click="saveSelection"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
+          Save
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/soapi/early-entry.vue b/app/components/app/soapi/early-entry.vue
index 146a25d4..4d2367be 100644
--- a/app/components/app/soapi/early-entry.vue
+++ b/app/components/app/soapi/early-entry.vue
@@ -63,13 +63,13 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
 
 <template>
   <form id="entry-form">
-    {{ errors }}
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
         <Cell>
@@ -285,7 +285,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'diagnosa')"
+              @click="emit('modal', 'diagnosa')"
             >
               + Pilih Diagnosa
             </Button>
@@ -298,7 +298,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'prosedur')"
+              @click="emit('modal', 'prosedur')"
             >
               + Pilih Prosedur
             </Button>
@@ -307,8 +307,8 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
       </Block>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
+        <AppIcdPreview v-model="icdPreview.procedures" />
       </div>
 
       <Block :colCount="3">
diff --git a/app/components/app/soapi/early-rehab-entry.vue b/app/components/app/soapi/early-rehab-entry.vue
index 2cafbcac..e4ec3114 100644
--- a/app/components/app/soapi/early-rehab-entry.vue
+++ b/app/components/app/soapi/early-rehab-entry.vue
@@ -85,6 +85,7 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
@@ -452,10 +453,18 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 
       <div class="my-2">
         <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+
+        <Button
+          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+          type="button"
+          @click="emit('click', 'fungsional')"
+        >
+          + Pilih Prosedur
+        </Button>
       </div>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
       </div>
 
       <div class="my-2">
diff --git a/app/components/app/soapi/entry.vue b/app/components/app/soapi/entry.vue
index 2ee2cefb..e7eecf32 100644
--- a/app/components/app/soapi/entry.vue
+++ b/app/components/app/soapi/entry.vue
@@ -43,5 +43,6 @@ defineExpose({ validate })
     @click="$emit('click', $event)"
     @submit="$emit('submit', $event)"
     @cancel="$emit('cancel', $event)"
+    @modal="$emit('modal', $event)"
   />
 </template>
diff --git a/app/components/app/soapi/function-entry.vue b/app/components/app/soapi/function-entry.vue
index 3e192c47..01276c03 100644
--- a/app/components/app/soapi/function-entry.vue
+++ b/app/components/app/soapi/function-entry.vue
@@ -86,6 +86,8 @@ const validate = async () => {
 
 defineExpose({ validate })
 
+const icdPreview = inject('icdPreview')
+
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 const disorders = ref<string[]>([])
 const therapies = ref<string[]>([])
@@ -558,33 +560,33 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
           <Button
             class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
             type="button"
-            @click="emits('click', 'prosedur')"
+            @click="emit('click', 'diagnosa')"
           >
             + Pilih Prosedur
           </Button>
-          <AppIcdPreview />
+          <AppIcdPreview v-model="icdPreview.diagnoses" />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Fungsional (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emit('click', 'fungsional')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview v-model="icdPreview.fungsional" />
         </div>
         <div>
           <span class="text-md">Diagnosa Medis (ICD-X)</span>
           <Button
             class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
             type="button"
-            @click="emits('click', 'prosedur')"
+            @click="emit('click', 'prosedur')"
           >
             + Pilih Prosedur
           </Button>
-          <AppIcdPreview />
-        </div>
-        <div>
-          <span class="text-md">Diagnosa Medis (ICD-X)</span>
-          <Button
-            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
-            type="button"
-            @click="emits('click', 'prosedur')"
-          >
-            + Pilih Prosedur
-          </Button>
-          <AppIcdPreview />
+          <AppIcdPreview v-model="icdPreview.procedures" />
         </div>
       </div>
 
diff --git a/app/components/app/soapi/list-cfg.ts b/app/components/app/soapi/list-cfg.ts
index 6fa11bda..648297c4 100644
--- a/app/components/app/soapi/list-cfg.ts
+++ b/app/components/app/soapi/list-cfg.ts
@@ -6,46 +6,21 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
-  cols: [
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 120 },
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 100 },
-    {},
-    { width: 50 },
-  ],
+  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
 
   headers: [
     [
-      { label: 'Nama' },
-      { label: 'Rekam Medis' },
-      { label: 'KTP' },
-      { label: 'Tgl Lahir' },
-      { label: 'Umur' },
-      { label: 'JK' },
-      { label: 'Pendidikan' },
+      { label: 'Tanggal' },
+      { label: 'DPJP' },
+      { label: 'Keluhan & Riwayat' },
+      { label: 'Pemeriksaan' },
+      { label: 'Diagnosa' },
       { label: 'Status' },
-      { label: '' },
+      { label: 'Aksi' },
     ],
   ],
 
-  keys: [
-    'name',
-    'medicalRecord_number',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'status',
-    'action',
-  ],
+  keys: ['time', 'employee_id', 'main_complaint', 'encounter_id', 'diagnose', 'status', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -53,45 +28,34 @@ export const config: Config = {
   ],
 
   parses: {
-    name: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    time(rec: any) {
+      return rec.time ? new Date(rec.time).toLocaleDateString() : ''
     },
-    identity_number: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
+    main_complaint(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        console.log('parsed', parsed)
+        return parsed?.['prim-compl'] || '-'
+      } catch {
+        return '-'
       }
-      return recX.identity_number
     },
-    birth_date: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.birth_date === 'object' && recX.birth_date) {
-        return (recX.birth_date as Date).toLocaleDateString()
-      } else if (typeof recX.birth_date === 'string') {
-        return recX.birth_date.substring(0, 10)
+    diagnose(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        const diagnose = parsed?.diagnose || []
+        return diagnose.map((d: any) => d.name).join(', ')
+      } catch {
+        return '-'
       }
-      return recX.birth_date
-    },
-    patient_age: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.birth_date?.split('T')[0]
-    },
-    gender: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-        return 'Tidak Diketahui'
-      }
-      return recX.gender_code
-    },
-    education: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
-        return recX.education_code
-      } else if (typeof recX.education_code !== 'undefined') {
-        return recX.education_code
-      }
-      return '-'
     },
   },
 
diff --git a/app/components/app/specialist-position/entry-detail.vue b/app/components/app/specialist-position/entry-detail.vue
new file mode 100644
index 00000000..f21ff65f
--- /dev/null
+++ b/app/components/app/specialist-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { SpecialistPositionFormData } from '~/schemas/specialist-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genSpecialistPosition } from '~/models/specialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialistId: number
+  employees: 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: SpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail specialist
+    specialist_id: props.specialistId,
+
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-specialist-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </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/specialist-position/entry-form.vue b/app/components/app/specialist-position/entry-form.vue
new file mode 100644
index 00000000..be031219
--- /dev/null
+++ b/app/components/app/specialist-position/entry-form.vue
@@ -0,0 +1,207 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { SpecialistPositionFormData } from '~/schemas/specialist-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genSpecialistPosition } from '~/models/specialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialists: any[]
+  employees: 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: SpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [specialist, specialistAttrs] = defineField('specialist_id')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.specialist_id !== undefined)
+    specialist.value = props.values.specialist_id ? Number(props.values.specialist_id) : null
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  specialist.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    specialist_id: specialist.value || null,
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-specialist-position"
+    @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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Spesialis</Label>
+        <Field :errMessage="errors.specialist_id">
+          <Combobox
+            id="specialist"
+            v-model="specialist"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Spesialis"
+            search-placeholder="Cari Spesialis"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </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/specialist-position/list.cfg.ts b/app/components/app/specialist-position/list.cfg.ts
new file mode 100644
index 00000000..35f49c20
--- /dev/null
+++ b/app/components/app/specialist-position/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Spesialis ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'specialist.name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/specialist-position/list.vue b/app/components/app/specialist-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/specialist-position/list.vue
@@ -0,0 +1,39 @@
+<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/specialist/detail/index.vue b/app/components/app/specialist/detail/index.vue
new file mode 100644
index 00000000..3f32a78f
--- /dev/null
+++ b/app/components/app/specialist/detail/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Specialist } from '~/models/specialist'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  specialist: Specialist
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ specialist.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ specialist.name || '-' }}</DetailRow>
+  <DetailRow label="Unit">
+    {{ [specialist.unit?.code, specialist.unit?.name].filter(Boolean).join(' / ') || '-' }}
+  </DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/specialist/detail/list.cfg.ts b/app/components/app/specialist/detail/list.cfg.ts
new file mode 100644
index 00000000..8faf9e61
--- /dev/null
+++ b/app/components/app/specialist/detail/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/specialist/detail/list.vue b/app/components/app/specialist/detail/list.vue
new file mode 100644
index 00000000..da83e7ca
--- /dev/null
+++ b/app/components/app/specialist/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-specialist',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/specialist/list-cfg.ts b/app/components/app/specialist/list-cfg.ts
index 8ed75f28..010358c4 100644
--- a/app/components/app/specialist/list-cfg.ts
+++ b/app/components/app/specialist/list-cfg.ts
@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 export const config: Config = {
   cols: [{}, {}, {}, { width: 50 }],
 
-  headers: [
-    [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Unit' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Nama Unit' }, { label: '' }]],
 
-  keys: ['code', 'name', 'unit', 'action'],
+  keys: ['code', 'name', 'unit.name', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -29,10 +22,6 @@ export const config: Config = {
       const recX = rec as SmallDetailDto
       return `${recX.name}`.trim()
     },
-    unit: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.unit_id || '-'
-    },
   },
 
   components: {
diff --git a/app/components/app/subspecialist-position/entry-detail.vue b/app/components/app/subspecialist-position/entry-detail.vue
new file mode 100644
index 00000000..fd3f91b7
--- /dev/null
+++ b/app/components/app/subspecialist-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { SubSpecialistPositionFormData } from '~/schemas/subspecialist-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genSubSpecialistPosition } from '~/models/subspecialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  subspecialistId: number
+  employees: 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: SubSpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SubSpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail specialist
+    subspecialist_id: props.subspecialistId,
+
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-specialist-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </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/subspecialist-position/entry-form.vue b/app/components/app/subspecialist-position/entry-form.vue
new file mode 100644
index 00000000..c897b2f5
--- /dev/null
+++ b/app/components/app/subspecialist-position/entry-form.vue
@@ -0,0 +1,207 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { SubSpecialistPositionFormData } from '~/schemas/subspecialist-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genSubSpecialistPosition } from '~/models/subspecialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  subSpecialists: any[]
+  employees: 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: SubSpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [subSpecialist, subSpecialistAttrs] = defineField('subspecialist_id')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.subspecialist_id !== undefined)
+    subSpecialist.value = props.values.subspecialist_id ? Number(props.values.subspecialist_id) : null
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  subSpecialist.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SubSpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    subspecialist_id: subSpecialist.value || null,
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-specialist-position"
+    @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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Sub Spesialis</Label>
+        <Field :errMessage="errors.subspecialist_id">
+          <Combobox
+            id="specialist"
+            v-model="subSpecialist"
+            v-bind="subSpecialistAttrs"
+            :items="subSpecialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Sub Spesialis"
+            search-placeholder="Cari Sub Spesialis"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </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/subspecialist-position/list.cfg.ts b/app/components/app/subspecialist-position/list.cfg.ts
new file mode 100644
index 00000000..028bc7bf
--- /dev/null
+++ b/app/components/app/subspecialist-position/list.cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { SubSpecialistPosition } from '~/models/subspecialist-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Sub Spesialis ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'subspecialist', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SubSpecialistPosition
+      return recX.subspecialist?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as SubSpecialistPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/subspecialist-position/list.vue b/app/components/app/subspecialist-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/subspecialist-position/list.vue
@@ -0,0 +1,39 @@
+<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/subspecialist/detail/index.vue b/app/components/app/subspecialist/detail/index.vue
new file mode 100644
index 00000000..154acf75
--- /dev/null
+++ b/app/components/app/subspecialist/detail/index.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Subspecialist } from '~/models/subspecialist'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  subspecialist: Subspecialist
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ subspecialist.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ subspecialist.name || '-' }}</DetailRow>
+  <DetailRow label="Spesialis">
+    {{ [subspecialist.specialist?.code, subspecialist.specialist?.name].filter(Boolean).join(' / ') || '-' }}
+  </DetailRow>
+  <DetailRow label="Unit">
+    {{
+      [subspecialist.specialist?.unit?.code, subspecialist.specialist?.unit?.name].filter(Boolean).join(' / ') || '-'
+    }}
+  </DetailRow>
+  <DetailRow label="Instalasi">
+    {{
+      [subspecialist.specialist?.unit?.installation?.code, subspecialist.specialist?.unit?.installation?.name]
+        .filter(Boolean)
+        .join(' / ') || '-'
+    }}
+  </DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/subspecialist/detail/list.cfg.ts b/app/components/app/subspecialist/detail/list.cfg.ts
new file mode 100644
index 00000000..8faf9e61
--- /dev/null
+++ b/app/components/app/subspecialist/detail/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/subspecialist/detail/list.vue b/app/components/app/subspecialist/detail/list.vue
new file mode 100644
index 00000000..11431e25
--- /dev/null
+++ b/app/components/app/subspecialist/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-subspecialist',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/subspecialist/list-cfg.ts b/app/components/app/subspecialist/list-cfg.ts
index 7e9e7b79..99d34169 100644
--- a/app/components/app/subspecialist/list-cfg.ts
+++ b/app/components/app/subspecialist/list-cfg.ts
@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 export const config: Config = {
   cols: [{}, {}, {}, { width: 50 }],
 
-  headers: [
-    [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Specialis' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]],
 
-  keys: ['code', 'name', 'specialist', 'action'],
+  keys: ['code', 'name', 'specialist.name', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/app/subspecialist/list.vue b/app/components/app/subspecialist/list.vue
index 1be60a60..2f7908cb 100644
--- a/app/components/app/subspecialist/list.vue
+++ b/app/components/app/subspecialist/list.vue
@@ -31,6 +31,9 @@ function handlePageChange(page: number) {
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />
-    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </div>
 </template>
diff --git a/app/components/app/unit-position/entry-detail.vue b/app/components/app/unit-position/entry-detail.vue
new file mode 100644
index 00000000..fb84e41a
--- /dev/null
+++ b/app/components/app/unit-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { UnitPositionFormData } from '~/schemas/unit-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genUnitPosition } from '~/models/unit-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  unitId: number
+  employees: 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: UnitPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: UnitPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail unit
+    unit_id: props.unitId,
+
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-unit-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </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/unit-position/entry-form.vue b/app/components/app/unit-position/entry-form.vue
new file mode 100644
index 00000000..b6ab8609
--- /dev/null
+++ b/app/components/app/unit-position/entry-form.vue
@@ -0,0 +1,206 @@
+<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 Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { UnitPositionFormData } from '~/schemas/unit-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genUnitPosition } from '~/models/unit-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  units: any[]
+  employees: 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: UnitPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [unit, unitAttrs] = defineField('unit_id')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.unit_id !== undefined) unit.value = props.values.unit_id ? Number(props.values.unit_id) : null
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  unit.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: UnitPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    unit_id: unit.value || null,
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-unit-position"
+    @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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Unit</Label>
+        <Field :errMessage="errors.unit_id">
+          <Combobox
+            id="unit"
+            v-model="unit"
+            v-bind="unitAttrs"
+            :items="units"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Unit"
+            search-placeholder="Cari Unit"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </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/unit-position/list.cfg.ts b/app/components/app/unit-position/list.cfg.ts
new file mode 100644
index 00000000..fb5e319b
--- /dev/null
+++ b/app/components/app/unit-position/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Unit ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'unit.name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/unit-position/list.vue b/app/components/app/unit-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/unit-position/list.vue
@@ -0,0 +1,39 @@
+<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/unit/detail/index.vue b/app/components/app/unit/detail/index.vue
new file mode 100644
index 00000000..9b38aa2b
--- /dev/null
+++ b/app/components/app/unit/detail/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Unit } from '~/models/unit'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  unit: Unit
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ unit.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ unit.name || '-' }}</DetailRow>
+  <!-- <DetailRow label="Nama Instalasi">{{ unit.installation?.name || '-' }}</DetailRow> -->
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/unit/detail/list.cfg.ts b/app/components/app/unit/detail/list.cfg.ts
new file mode 100644
index 00000000..8faf9e61
--- /dev/null
+++ b/app/components/app/unit/detail/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/unit/detail/list.vue b/app/components/app/unit/detail/list.vue
new file mode 100644
index 00000000..f878d14c
--- /dev/null
+++ b/app/components/app/unit/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-unit',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/content/bpjs/control-letter/list.vue b/app/components/content/bpjs/control-letter/list.vue
new file mode 100644
index 00000000..66ed00a5
--- /dev/null
+++ b/app/components/content/bpjs/control-letter/list.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+
+// #region Imports
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+import FilterDialog from '~/components/pub/my-ui/nav-header/filter-dialog.vue'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+    isFormEntryDialogOpen.value = true
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const refExportNav: RefExportNav = {
+  onExportCsv: () => {
+    // open filter modal
+    console.log(`Export CSV Clicked`)
+  },
+}
+
+const isFormEntryDialogOpen = ref(false)
+const isHistoryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+
+const filterPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
+async function getPatientSummary() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+function handleFiltering() {
+  console.log('Confirmed action: Filter')
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showProcess:
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break
+
+    case ActionEvents.showDetail:
+      isHistoryDialogOpen.value = true
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <!-- 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
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
+      </template>
+<template v-else>
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
+      </template>
+</div>
+</div>
+-->
+
+  <FilterDialog :prep="{ ...filterPrep }" 
+    :ref-search-nav="refSearchNav" 
+    :ref-export-nav="refExportNav" 
+    :enable-search="false"
+    :enable-date-range="false"/>
+
+  <AppBpjsControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    title="Filter"
+  >
+    <AppBpjsControlLetterFilter @submit="handleFiltering" />
+  </Dialog>
+
+  <Dialog
+    v-model:open="isHistoryDialogOpen"
+    title="Log History Surat Kontrol">
+    <AppBpjsControlLetterCommonHistoryDialog />
+  </Dialog>
+
+  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.firstName">
+          <strong>Nama:</strong>
+          {{ record.firstName }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.cellphone }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/chemotherapy/admin-list.vue b/app/components/content/chemotherapy/admin-list.vue
new file mode 100644
index 00000000..be6d5810
--- /dev/null
+++ b/app/components/content/chemotherapy/admin-list.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { format } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { Button } from '~/components/pub/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+import Input from '~/components/pub/ui/input/Input.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
+import AppChemotherapyListAdmin from '~/components/app/chemotherapy/list-admin.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Sample data - replace with actual API call
+import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
+
+
+const route = useRoute()
+const recId = ref(0)
+const recAction = ref('')
+const recItem = ref<any>(null)
+
+const search = ref('')
+const mode = route.params.mode as string || 'admin'
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: null,
+  to: null,
+})
+
+// Format date range for display
+const dateRangeDisplay = computed(() => {
+  if (dateRange.value.from && dateRange.value.to) {
+    return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
+  }
+  return '12 Agustus 2025 - 32 Agustus 2025' // Default display
+})
+
+// Filter + search (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ChemotherapyData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+// Pagination meta
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: filtered.value.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: Math.ceil(filtered.value.length / 10),
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  paginationMeta.page = page
+  paginationMeta.hasNext = page < paginationMeta.totalPage
+  paginationMeta.hasPrev = page > 1
+}
+
+function handleFilter() {
+  // TODO: Implement filter logic
+  console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
+}
+
+// Provide proses handler for action button
+function handleProses(rec: any) {
+  // Navigate to verification page with record
+  navigateTo(`/outpation-action/chemotherapy/verification?id=${rec.id}`)
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case 'Process':
+      navigateTo(`/outpation-action/chemotherapy/${mode}/${recId.value}/verification`)
+      break
+    case 'Verification':
+      break
+  }
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('proses-handler', handleProses)
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <!-- Header Section -->
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Administrasi Pasien Rawat Jalan Kemoterapi</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
+      </p>
+    </div>
+
+    <!-- Search and Filter Bar -->
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <!-- Search Input -->
+      <div class="relative">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Input
+          v-model="search"
+          placeholder="Cari Nama /No.RM"
+          class="w-64 pl-9"
+        />
+      </div>
+
+      <!-- Date Range Picker -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
+          >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            {{ dateRangeDisplay }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <RangeCalendar />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Filter Button -->
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
+        @click="handleFilter"
+      >
+        <FilterIcon class="mr-2 h-4 w-4" />
+        Filter
+      </Button>
+    </div>
+
+    <!-- Data Table -->
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyListAdmin
+        :data="filtered"
+        :pagination-meta="paginationMeta"
+        @page-change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
diff --git a/app/components/content/chemotherapy/list.vue b/app/components/content/chemotherapy/list.vue
new file mode 100644
index 00000000..d4104f03
--- /dev/null
+++ b/app/components/content/chemotherapy/list.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Components
+import AppChemotherapyList from '~/components/app/chemotherapy/list.vue'
+
+// Samples
+import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
+
+const search = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+
+// filter + pencarian sederhana (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ChemotherapyData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
+      </p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <div class="flex items-center gap-2">
+        <input
+          v-model="search"
+          placeholder="Cari Nama / No.RM"
+          class="w-64 rounded border px-3 py-2"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input
+          v-model="dateFrom"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <span class="text-sm text-gray-500">-</span>
+        <input
+          v-model="dateTo"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+      </div>
+
+      <button class="ml-auto rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">Filter</button>
+    </div>
+
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/content/chemotherapy/process.vue b/app/components/content/chemotherapy/process.vue
new file mode 100644
index 00000000..7f355b4b
--- /dev/null
+++ b/app/components/content/chemotherapy/process.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import EncounterHome from '~/components/content/encounter/home.vue'
+</script>
+
+<template>
+  <EncounterHome classes="chemotherapy" />
+</template>
diff --git a/app/components/content/chemotherapy/protocol.vue b/app/components/content/chemotherapy/protocol.vue
new file mode 100644
index 00000000..82050d79
--- /dev/null
+++ b/app/components/content/chemotherapy/protocol.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Types
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Components
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
+
+// Services
+import { getDetail } from '~/services/encounter.service'
+
+const route = useRoute()
+const router = useRouter()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
+  },
+})
+
+// Dummy data so AppEncounterQuickInfo can render in development/storybook
+// Replace with real API result when available (see commented fetch below)
+const data = ref<any>({
+  patient: {
+    number: 'RM-2025-0001',
+    person: {
+      name: 'John Doe',
+      birthDate: '1980-01-01T00:00:00Z',
+      gender_code: 'M',
+      addresses: [
+        { address: 'Jl. Contoh No.1, Jakarta' }
+      ],
+      frontTitle: '',
+      endTitle: ''
+    }
+  },
+  visitDate: new Date().toISOString(),
+  unit: { name: 'Onkologi' },
+  responsible_doctor: null,
+  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } }
+})
+
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
+  {
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
+  },
+  {
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
+  },
+]
+
+const paginationMeta: PaginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+const tabs: TabItem[] = [
+  { value: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
+  { value: 'chemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
+]
+
+onMounted(async () => {
+  // const id = typeof route.query.id == 'string' ? parseInt(route.query.id) : 0
+  // const dataRes = await getDetail(id, {
+  //   includes:
+  //     'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
+  // })
+  // const dataResBody = dataRes.body ?? null
+  // data.value = dataResBody?.data ?? null
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    </div>
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
+  </div>
+</template>
diff --git a/app/components/content/chemotherapy/verification.vue b/app/components/content/chemotherapy/verification.vue
new file mode 100644
index 00000000..3243547a
--- /dev/null
+++ b/app/components/content/chemotherapy/verification.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { format } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { Button } from '~/components/pub/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+import Input from '~/components/pub/ui/input/Input.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
+import AppChemotherapyListVerification from '~/components/app/chemotherapy/list-verification.vue'
+import DialogVerification from '~/components/app/chemotherapy/dialog-verification.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+const route = useRoute()
+const router = useRouter()
+
+// Sample patient data - replace with actual API call
+const patientData = ref({
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  jenisPembayaran: 'PKS',
+  noBilling: '18291822',
+  tanggalLahir: '23 April 1992',
+  usia: '33 tahun',
+  jenisKelamin: 'Laki-Laki (L)',
+  diagnosis: 'C34.9 - Karsinoma Paru',
+  klinik: 'Penyakit Dalam',
+})
+
+// Sample schedule data - replace with actual API call
+const scheduleData = ref([
+  {
+    id: 1,
+    tanggalMasuk: '12 Agustus 2025',
+    pjBerkasRm: 'TPP Rawat Jalan',
+    dokter: 'Dr. Andreas Sutaji',
+    jenisRuangan: 'Ruang Tindakan',
+    jenisTindakan: 'KEMOTERAPI',
+    tanggalJadwalTindakan: '-',
+    status: 'belum_terverifikasi',
+    tanggalPemeriksaan: '2025-08-12',
+  },
+])
+
+const search = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: null,
+  to: null,
+})
+
+// Format date range for display
+const dateRangeDisplay = computed(() => {
+  if (dateRange.value.from && dateRange.value.to) {
+    return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
+  }
+  return '12 Agustus 2025 - 32 Agustus 2025' // Default display
+})
+
+// Filter + search (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return scheduleData.value.filter((r: any) => {
+    if (q) {
+      return r.dokter.toLowerCase().includes(q) || patientData.value.noRm.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+// Pagination meta
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: filtered.value.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: Math.ceil(filtered.value.length / 10),
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  paginationMeta.page = page
+  paginationMeta.hasNext = page < paginationMeta.totalPage
+  paginationMeta.hasPrev = page > 1
+}
+
+function handleFilter() {
+  // TODO: Implement filter logic
+  console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
+}
+
+// Dialog verification state
+const isDialogVerificationOpen = ref(false)
+const selectedSchedule = ref<any>(null)
+
+// Provide verify handler for verify button
+function handleVerify(rec: any) {
+  selectedSchedule.value = rec
+  isDialogVerificationOpen.value = true
+}
+
+provide('verify-handler', handleVerify)
+
+function handleDialogSubmit(data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }) {
+  // TODO: Implement submit logic
+  console.log('Verification submitted', data)
+  isDialogVerificationOpen.value = false
+  // Refresh data after verification
+}
+
+function handleBackToAdmin() {
+  router.push('/outpation-action/chemotherapy/admin')
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <!-- Back Button -->
+    <div class="mb-4">
+      <Button
+        variant="outline"
+        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+        @click="handleBackToAdmin"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Kembali ke Administrasi Kunjungan
+      </Button>
+    </div>
+
+    <!-- Data Pasien Section -->
+    <div class="mb-6 rounded-md border bg-white p-4 shadow-sm">
+      <h3 class="mb-4 text-lg font-semibold">Data Pasien:</h3>
+      <div class="grid grid-cols-2 gap-6">
+        <!-- Left Column -->
+        <div class="space-y-3">
+          <div class="flex">
+            <span class="w-48 font-medium">No. RM:</span>
+            <span>{{ patientData.noRm }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Nama:</span>
+            <span>{{ patientData.nama }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Jenis Pembayaran:</span>
+            <span>{{ patientData.jenisPembayaran }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">No Billing:</span>
+            <span>{{ patientData.noBilling }}</span>
+          </div>
+        </div>
+        <!-- Right Column -->
+        <div class="space-y-3">
+          <div class="flex">
+            <span class="w-48 font-medium">Tanggal Lahir / Usia:</span>
+            <span>{{ patientData.tanggalLahir }} / {{ patientData.usia }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Jenis Kelamin:</span>
+            <span>{{ patientData.jenisKelamin }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Diagnosis:</span>
+            <span>{{ patientData.diagnosis }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Klinik:</span>
+            <span>{{ patientData.klinik }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Header Section -->
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Verifikasi Jadwal Pasien</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Pantau riwayat masuk, dokter penanggung jawab, dan status pasien secara real-time.
+      </p>
+    </div>
+
+    <!-- Search and Filter Bar -->
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <!-- Search Input -->
+      <div class="relative">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Input
+          v-model="search"
+          placeholder="Cari Nama /No.RM"
+          class="w-64 pl-9"
+        />
+      </div>
+
+      <!-- Date Range Picker -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
+          >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            {{ dateRangeDisplay }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <RangeCalendar />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Filter Button -->
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
+        @click="handleFilter"
+      >
+        <FilterIcon class="mr-2 h-4 w-4" />
+        Filter
+      </Button>
+    </div>
+
+    <!-- Data Table -->
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyListVerification
+        :data="filtered"
+        :pagination-meta="paginationMeta"
+        @page-change="handlePageChange"
+      />
+    </div>
+
+    <!-- Dialog Verification -->
+    <DialogVerification
+      v-model:open="isDialogVerificationOpen"
+      :tanggal-pemeriksaan="selectedSchedule?.tanggalPemeriksaan"
+      :jadwal-tanggal-pemeriksaan="selectedSchedule?.jadwalTanggalPemeriksaan"
+      @submit="handleDialogSubmit"
+    />
+  </div>
+</template>
+
diff --git a/app/components/content/control-letter/add.vue b/app/components/content/control-letter/add.vue
new file mode 100644
index 00000000..44f03a2f
--- /dev/null
+++ b/app/components/content/control-letter/add.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { ExposedForm } from '~/types/form'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import {  handleActionSave,} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { type ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const controlLetter: ControlLetter = await composeFormData()
+  let createdControlLetterId = 0
+
+  const response = await handleActionSave(
+    controlLetter,
+    () => { },
+    () => { },
+    toast,
+  )
+
+  const data = (response?.body?.data ?? null)
+  if (!data) return
+  createdControlLetterId = data.id
+
+  // // If has callback provided redirect to callback with patientData
+  if (props.callbackUrl) {
+    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+  }
+
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd" />
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/control-letter/detail.vue b/app/components/content/control-letter/detail.vue
new file mode 100644
index 00000000..d9019d57
--- /dev/null
+++ b/app/components/content/control-letter/detail.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { Patient } from '~/models/patient'
+import type { Person } from '~/models/person'
+import { getDetail } from '~/services/control-letter.service'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const controlLetter = ref<ControlLetter | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Surat Kontrol',
+  icon: 'i-lucide-newspaper',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId, {
+    includes: "unit,specialist,subspecialist,doctor-employee-person",
+  })
+  if (result.success) {
+    controlLetter.value = result.body?.data
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": controlLetterId },
+      })
+      break
+
+    case 'back':
+      goBack()
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
+
+  <AppControlLetterPreview :instance="controlLetter" @click="handleAction" />
+</template>
diff --git a/app/components/content/control-letter/edit.vue b/app/components/content/control-letter/edit.vue
new file mode 100644
index 00000000..99a5c282
--- /dev/null
+++ b/app/components/content/control-letter/edit.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+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'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+import { getDetail, update } from '~/services/control-letter.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import { withBase } from '~/models/_base'
+import type { Person } from '~/models/person'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import type { ControlLetter } from '~/models/control-letter'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import { formatDateYyyyMmDd } from '~/lib/date'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const isConfirmationOpen = ref(false)
+const controlLetter = ref({})
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId)
+  if (result.success) {
+    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    selectedUnitId.value = responseData?.unit_code
+    selectedSpecialistId.value = responseData?.specialist_code
+    selectedSubSpecialistId.value = responseData?.subspecialist_code
+
+    controlLetter.value = responseData
+    controlLetterForm.value?.setValues(responseData)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const response = await handleActionEdit(
+    controlLetterId,
+    await composeFormData(),
+    () => { },
+    () => { },
+    toast,
+  )
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+  
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation
+    v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd"
+  />
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/control-letter/list.vue b/app/components/content/control-letter/list.vue
new file mode 100644
index 00000000..c9353057
--- /dev/null
+++ b/app/components/content/control-letter/list.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Imports
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/control-letter.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+// #endregion
+
+// #region State
+const props = defineProps<{
+  encounter?: Encounter
+}>()
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'control-letter',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+  addNav: {
+    label: "Surat Kontrol",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-control-letter-add',
+        params: { id: encounterId },
+      }),
+  },
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getListData()
+})
+// #endregion
+
+// #region Functions
+async function getListData() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching Data:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await remove(record.id)
+      if (result.success) {
+        toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <WarningAlert v-if="!isRequirementsMet"
+    class="mb-5"
+    text="Syarat pembuatan surat kontrol belum terpenuhi"
+    :description="[
+      'Lanjutan Penatalaksanaan Pasien harus pulang/KRS.',
+      'Status Resume Medis harus tervalidasi.'
+    ]" />
+
+  <div v-else>
+    <Header v-model:search="searchInput"
+      :prep="{ ...headerPrep }"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch" />
+
+    <AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/content/cp-lab-order/entry.vue b/app/components/content/cp-lab-order/entry.vue
new file mode 100644
index 00000000..4d0aa002
--- /dev/null
+++ b/app/components/content/cp-lab-order/entry.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU items
+const items = ref<McuOrderItem[]>([])
+
+// MCU Categories
+const mcuSrcCategoryRes = await getMcuCategoryList()
+const mcuSrcCategories = mcuSrcCategoryRes.body?.data
+const selectedMcuSrcCategory_code = ref('')
+
+// MCU Sources
+const mcuSrcs = ref<McuSrc[]>([])
+
+// const {
+//   data: items,
+//   fetchData: getItems,
+// } = usePaginatedList<McuOrderItem> ({
+//   fetchFn: async ({ page, search }) => {
+//     const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
+//     if (result.success) {
+//       items.value = result.body.data
+//     }
+//     return { success: result.success || false, body: result.body || {} }
+//   },
+//   entityName: 'mcu-order-item',
+// })
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail dan List Item Order Radiologi ',
+  icon: 'i-lucide-box',
+}
+
+const pickerDialogOpen = ref(false)
+
+onMounted(async () => {
+  await getItems()
+})
+
+watch(selectedMcuSrcCategory_code, async () => {
+  const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
+  mcuSrcs.value = res.body?.data
+})
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+async function pickItem(item: McuSrc) {
+  const exItem = items.value.find(e => e.mcuSrc_id === item.id)
+  if (exItem) {
+    await removeMcuOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createMcuOrderItem({
+      mcuOrder_id: intId,
+      mcuSrc_id: item.id,
+    })
+    await getItems()
+  }
+}
+
+async function getItems() {
+  const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
+  if (itemsRes.success) {
+      items.value = itemsRes.body.data
+  } else {
+    items.value = []
+  }
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="items"
+    @requestItem="requestItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
+    <McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
+</template>
diff --git a/app/components/content/cp-lab-order/list.vue b/app/components/content/cp-lab-order/list.vue
new file mode 100644
index 00000000..73b9361c
--- /dev/null
+++ b/app/components/content/cp-lab-order/list.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "cp-lab",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab PK',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      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 getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id, scope_code: "cp-lab" }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>
diff --git a/app/components/content/cp-lab-order/main.vue b/app/components/content/cp-lab-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/cp-lab-order/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 019e64a9..4fa8605d 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -54,6 +54,7 @@ const {
       sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
+      includes: 'division,Employee.Person',
     })
     return { success: result.success || false, body: result.body || {} }
   },
@@ -61,7 +62,7 @@ const {
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Divisi',
+  title: 'Divisi - Posisi',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -105,12 +106,12 @@ watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getCurrentDivisionDetail(recId.value)
-      title.value = 'Detail Divisi'
+      title.value = 'Detail Divisi Position'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentDivisionDetail(recId.value)
-      title.value = 'Edit Divisi'
+      title.value = 'Edit Divisi Position'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -120,9 +121,19 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
-  employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
-  await getDivisionList()
+  try {
+    divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    await getDivisionList()
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
 })
 </script>
 
@@ -142,7 +153,7 @@ onMounted(async () => {
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
-    :title="!!recItem ? title : 'Tambah Divisi'"
+    :title="!!recItem ? title : 'Tambah Divisi Position'"
     size="lg"
     prevent-outside
     @update:open="
diff --git a/app/components/content/division/detail.vue b/app/components/content/division/detail.vue
new file mode 100644
index 00000000..8b7d2e92
--- /dev/null
+++ b/app/components/content/division/detail.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Division } from '~/models/division'
+import { getDetail as getDetailDivision } from '~/services/division.service'
+
+// #region division positions
+import { config } from '~/components/app/division/detail/list-cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Types
+import { DivisionPositionSchema, type DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/division-position.handler'
+
+// Services
+import { getList, getDetail as getDetailDivisionPosition } from '~/services/division-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  divisionId: number
+}>()
+const division = ref<Division>({} as Division)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'division-id': props.divisionId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'division-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+const headerPrep: HeaderPrep = {
+  title: 'Detail Divisi',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Jabatan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailDivision(props.divisionId)
+    if (result.success) {
+      division.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  console.log(recId, recAction)
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailDivisionPosition(recId.value)
+      title.value = 'Edit Jabatan'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppDivisionDetail :division="division" />
+  <div class="h-6"></div>
+
+  <LazyAppDivisionDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Jabatan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDivisionPositionEntry
+      :schema="DivisionPositionSchema"
+      :division-id="divisionId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DivisionPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getDivisionPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getDivisionPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDivisionPositionList, 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/list.vue b/app/components/content/division/list.vue
index 9ccefc56..0456891b 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -13,7 +13,7 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
-import type { Division } from "~/models/division"
+import type { Division } from '~/models/division'
 import type { TreeItem } from '~/models/_base'
 
 // Handlers
@@ -78,6 +78,7 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recAction.value = ''
       recItem.value = null
       recId.value = 0
       isFormEntryDialogOpen.value = true
@@ -104,9 +105,23 @@ const getCurrentDivisionDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentDivisionDetail(recId.value)
-      title.value = 'Detail Divisi'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-division-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentDivisionDetail(recId.value)
diff --git a/app/components/content/encounter/assesment-function/add.vue b/app/components/content/encounter/assesment-function/add.vue
deleted file mode 100644
index 128cf74a..00000000
--- a/app/components/content/encounter/assesment-function/add.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>halo</div>
-</template>
diff --git a/app/components/content/encounter/assesment-function/list.vue b/app/components/content/encounter/assesment-function/list.vue
deleted file mode 100644
index 48d50bc9..00000000
--- a/app/components/content/encounter/assesment-function/list.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import AssesmentFunctionList from '~/components/app/encounter/assesment-function/list.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-
-const props = defineProps<{
-  label: string
-}>()
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: props.label,
-  icon: 'i-lucide-users',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
-  },
-}
-
-async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
-</script>
-
-<template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AssesmentFunctionList :data="data" />
-  </div>
-</template>
diff --git a/app/components/content/encounter/entry.vue b/app/components/content/encounter/entry.vue
index 9e6b19f7..78297754 100644
--- a/app/components/content/encounter/entry.vue
+++ b/app/components/content/encounter/entry.vue
@@ -1,51 +1,775 @@
 <script setup lang="ts">
-import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Components
+import { toast } from '~/components/pub/ui/toast'
+import { Button } from '~/components/pub/ui/button'
+import AppEncounterEntryForm from '~/components/app/encounter/entry-form.vue'
+import AppViewPatient from '~/components/app/patient/view-patient.vue'
+
+// Types
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+
+// Constants
+import { paymentTypes, sepRefTypeCodes, participantGroups } from '~/lib/constants.vclaim'
+
+// Services
+import {
+  getList as getSpecialistList,
+  getValueTreeItems as getSpecialistTreeItems,
+} from '~/services/specialist.service'
+import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
+import { create as createEncounter, getDetail as getEncounterDetail, update as updateEncounter } from '~/services/encounter.service'
+import { getList as getSepList } from '~/services/vclaim-sep.service'
+
+// Helpers
+import { refDebounced } from '@vueuse/core'
+
+// Handlers
+import {
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  getPatientsList,
+  getPatientCurrent,
+  getPatientByIdentifierSearch,
+} from '~/handlers/patient.handler'
+
+// Stores
+import { useUserStore } from '~/stores/user'
 
 const props = defineProps<{
   id: number
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
   formType: string
 }>()
 
-const isOpen = ref(false)
-const data = ref([])
+const route = useRoute()
+const userStore = useUserStore()
+const openPatient = ref(false)
 const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
+const paymentsList = ref<Array<{ value: string; label: string }>>([])
+const sepsList = ref<Array<{ value: string; label: string }>>([])
+const participantGroupsList = ref<Array<{ value: string; label: string }>>([])
+const specialistsTree = ref<TreeItem[]>([])
+const specialistsData = ref<any[]>([]) // Store full specialist data with id
+const doctorsList = ref<Array<{ value: string; label: string }>>([])
+const recSelectId = ref<number | null>(null)
+const isSaving = ref(false)
+const isLoadingDetail = ref(false)
+const formRef = ref<InstanceType<typeof AppEncounterEntryForm> | null>(null)
+const encounterData = ref<any>(null)
+const formObjects = ref<any>({})
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
+// SEP validation state
+const isSepValid = ref(false)
+const isCheckingSep = ref(false)
+const sepNumber = ref('')
+const debouncedSepNumber = refDebounced(sepNumber, 500)
 
-onMounted(() => {
-  getPatientList()
+// Computed for edit mode
+const isEditMode = computed(() => props.id > 0)
+
+// Computed for save button disable state
+const isSaveDisabled = computed(() => {
+  return !selectedPatient.value || !selectedPatientObject.value || isSaving.value || isLoadingDetail.value
 })
 
-function onClick(e: 'search' | 'add') {
-  console.log('click', e)
-  if (e === 'search') {
-    isOpen.value = true
-  } else if (e === 'add') {
-    navigateTo('/client/patient/add')
+function getListPath(): string {
+  if (props.classCode === 'ambulatory' && props.subClassCode === 'rehab') {
+    return '/rehab/encounter'
+  }
+  if (props.classCode === 'ambulatory' && props.subClassCode === 'reg') {
+    return '/outpatient/encounter'
+  }
+  if (props.classCode === 'emergency') {
+    return '/emergency/encounter'
+  }
+  if (props.classCode === 'inpatient') {
+    return '/inpatient/encounter'
+  }
+  return '/encounter' // fallback
+}
+
+function handleSavePatient() {
+  selectedPatientObject.value = null
+  setTimeout(() => {
+    getPatientCurrent(selectedPatient.value)
+  }, 150)
+}
+
+function toKebabCase(str: string): string {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
+
+function toNavigateSep(values: any) {
+  const queryParams = new URLSearchParams()
+  if (values['subSpecialistCode']) {
+    const isSub = isSubspecialist(values['subSpecialistCode'], specialistsTree.value)
+    if (!isSub) {
+      values['specialistCode'] = values['subSpecialistCode']
+      delete values['subSpecialistCode']
+    }
+  }
+
+  Object.keys(values).forEach((field) => {
+    if (values[field]) {
+      queryParams.append(toKebabCase(field), values[field])
+    }
+  })
+
+  navigateTo('/integration/bpjs/sep/add' + `?${queryParams.toString()}`)
+}
+
+async function handleSaveEncounter(formValues: any) {
+  // Validate patient is selected
+  if (!selectedPatient.value || !selectedPatientObject.value) {
+    toast({
+      title: 'Gagal',
+      description: 'Pasien harus dipilih terlebih dahulu',
+      variant: 'destructive',
+    })
+    return
+  }
+
+  try {
+    isSaving.value = true
+
+    // Get employee_id from user store
+    const employeeId = userStore.user?.employee_id || userStore.user?.employee?.id || 0
+
+    // Format date to ISO format
+    const formatDate = (dateString: string): string => {
+      if (!dateString) return ''
+      const date = new Date(dateString)
+      return date.toISOString()
+    }
+
+    // Get specialist_id and subspecialist_id from TreeSelect value (code)
+    const { specialist_id, subspecialist_id } = getSpecialistIdsFromCode(formValues.subSpecialistId || '')
+
+    // Build payload
+    const payload: any = {
+      patient_id: selectedPatientObject.value?.id || Number(selectedPatient.value),
+      registeredAt: formatDate(formValues.registerDate),
+      visitDate: formatDate(formValues.registerDate),
+      class_code: props.classCode || '',
+      subClass_code: props.subClassCode || '',
+      infra_id: null,
+      unit_id: null,
+      appointment_doctor_id: Number(formValues.doctorId),
+      responsible_doctor_id: Number(formValues.doctorId),
+      paymentType: formValues.paymentType,
+      cardNumber: formValues.cardNumber,
+      refSource_name: '',
+      appointment_id: null,
+    }
+
+    if (employeeId && employeeId > 0) {
+      payload.adm_employee_id = employeeId
+    }
+
+    // Add specialist_id and subspecialist_id if available
+    if (specialist_id) {
+      payload.specialist_id = specialist_id
+    }
+    if (subspecialist_id) {
+      payload.subspecialist_id = subspecialist_id
+    }
+
+    let paymentMethod = 'cash'
+    if (formValues.paymentType === 'jkn' || formValues.paymentType === 'jkmm') {
+      paymentMethod = 'insurance'
+    } else if (formValues.paymentType === 'spm') {
+      paymentMethod = 'cash'
+    } else if (formValues.paymentType === 'pks') {
+      paymentMethod = 'membership'
+    }
+
+    if (paymentMethod === 'insurance') {
+      payload.paymentMethod_code = paymentMethod
+      payload.insuranceCompany_id = null
+      payload.member_number = formValues.cardNumber
+      payload.ref_number = formValues.sepNumber
+    }
+
+    // Add visitMode_code and allocatedVisitCount only if classCode is ambulatory
+    if (props.classCode === 'ambulatory') {
+      payload.visitMode_code = 'adm'
+      payload.allocatedVisitCount = 0
+    }
+
+    // Call encounter service - use update if edit mode, create otherwise
+    let result
+    if (isEditMode.value) {
+      result = await updateEncounter(props.id, payload)
+    } else {
+      result = await createEncounter(payload)
+    }
+
+    if (result.success) {
+      toast({
+        title: 'Berhasil',
+        description: isEditMode.value ? 'Kunjungan berhasil diperbarui' : 'Kunjungan berhasil dibuat',
+        variant: 'default',
+      })
+      // Redirect to list page
+      await navigateTo(getListPath())
+    } else {
+      const errorMessage = result.body?.message || (isEditMode.value ? 'Gagal memperbarui kunjungan' : 'Gagal membuat kunjungan')
+      toast({
+        title: 'Gagal',
+        description: errorMessage,
+        variant: 'destructive',
+      })
+    }
+  } catch (error: any) {
+    console.error('Error saving encounter:', error)
+    toast({
+      title: 'Gagal',
+      description: error?.message || (isEditMode.value ? 'Gagal memperbarui kunjungan' : 'Gagal membuat kunjungan'),
+      variant: 'destructive',
+    })
+  } finally {
+    isSaving.value = false
   }
 }
 
+async function handleEvent(menu: string, value?: any) {
+  if (menu === 'search') {
+    getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
+      openPatient.value = true
+    })
+  } else if (menu === 'add') {
+    navigateTo('/client/patient/add')
+  } else if (menu === 'add-sep') {
+    // If SEP is already valid, don't navigate
+    if (isSepValid.value) {
+      return
+    }
+    recSelectId.value = null
+    toNavigateSep({
+      isService: 'false',
+      sourcePath: route.path,
+      resource: `${props.classCode}-${props.subClassCode}`,
+      ...value,
+    })
+  } else if (menu === 'sep-number-changed') {
+    // Update sepNumber when it changes in form (only if different to prevent loop)
+    if (sepNumber.value !== value) {
+      sepNumber.value = value || ''
+    }
+  } else if (menu === 'save') {
+    await handleSaveEncounter(value)
+  } else if (menu === 'cancel') {
+    navigateTo(getListPath())
+  }
+}
+
+// Handle save button click
+function handleSaveClick() {
+  console.log('🔵 handleSaveClick called')
+  console.log('🔵 formRef:', formRef.value)
+  console.log('🔵 isSaveDisabled:', isSaveDisabled.value)
+  console.log('🔵 selectedPatient:', selectedPatient.value)
+  console.log('🔵 selectedPatientObject:', selectedPatientObject.value)
+  console.log('🔵 isSaving:', isSaving.value)
+  console.log('🔵 isLoadingDetail:', isLoadingDetail.value)
+  
+  if (formRef.value && typeof formRef.value.submitForm === 'function') {
+    console.log('🔵 Calling formRef.value.submitForm()')
+    formRef.value.submitForm()
+  } else {
+    console.error('❌ formRef.value is null or submitForm is not a function')
+  }
+}
+
+/**
+ * Validate SEP number
+ */
+async function validateSepNumber(sepNumberValue: string) {
+  // Reset validation if SEP number is empty
+  if (!sepNumberValue || sepNumberValue.trim() === '') {
+    isSepValid.value = false
+    isCheckingSep.value = false
+    return
+  }
+
+  // Only check if payment type is JKN
+  // We need to check from formObjects
+  const paymentType = formObjects.value?.paymentType
+  if (paymentType !== 'jkn') {
+    isSepValid.value = false
+    return
+  }
+
+  try {
+    isCheckingSep.value = true
+    const result = await getSepList({ number: sepNumberValue.trim() })
+    
+    // Check if SEP is found
+    // If response is not null, SEP is found
+    // If response is null with metaData code "201", SEP is not found
+    if (result.success && result.body?.response !== null) {
+      isSepValid.value = true
+    } else {
+      // SEP not found (response null with metaData code "201")
+      isSepValid.value = false
+    }
+  } catch (error) {
+    console.error('Error checking SEP:', error)
+    isSepValid.value = false
+  } finally {
+    isCheckingSep.value = false
+  }
+}
+
+// Watch debounced SEP number to validate
+watch(debouncedSepNumber, async (newValue) => {
+  await validateSepNumber(newValue)
+})
+
+// Watch payment type to reset SEP validation
+watch(
+  () => formObjects.value?.paymentType,
+  (newValue) => {
+    isSepValid.value = false
+    // If payment type is not JKN, clear SEP number
+    if (newValue !== 'jkn') {
+      sepNumber.value = ''
+    }
+  },
+)
+
+async function handleFetchSpecialists() {
+  try {
+    const specialistsResult = await getSpecialistList({ 'page-size': 100, includes: 'subspecialists' })
+    if (specialistsResult.success) {
+      const specialists = specialistsResult.body?.data || []
+      specialistsData.value = specialists // Store full data for mapping
+      specialistsTree.value = getSpecialistTreeItems(specialists)
+    }
+  } catch (error) {
+    console.error('Error fetching specialist-subspecialist tree:', error)
+  }
+}
+
+/**
+ * Helper function to check if a value exists in the specialistsTree
+ * Returns true if it's a leaf node (subspecialist), false if parent node (specialist)
+ */
+function isSubspecialist(value: string, items: TreeItem[]): boolean {
+  for (const item of items) {
+    if (item.value === value) {
+      // If this item has children, it's not selected, so skip
+      // If this is the selected item, check if it has children in the tree
+      return false // This means it's a specialist, not a subspecialist
+    }
+    if (item.children) {
+      for (const child of item.children) {
+        if (child.value === value) {
+          // This is a subspecialist (leaf node)
+          return true
+        }
+      }
+    }
+  }
+  return false
+}
+
+/**
+ * Helper function to get specialist/subspecialist code from ID
+ * Returns code string or null if not found
+ */
+function getSpecialistCodeFromId(id: number | null | undefined): string | null {
+  if (!id) return null
+
+  // First check if encounter has specialist object with code
+  if (encounterData.value?.specialist?.id === id) {
+    return encounterData.value.specialist.code || null
+  }
+
+  // Search in specialistsData
+  for (const specialist of specialistsData.value) {
+    if (specialist.id === id) {
+      return specialist.code || null
+    }
+    // Check subspecialists
+    if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
+      for (const subspecialist of specialist.subspecialists) {
+        if (subspecialist.id === id) {
+          return subspecialist.code || null
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Helper function to get subspecialist code from ID
+ * Returns code string or null if not found
+ */
+function getSubspecialistCodeFromId(id: number | null | undefined): string | null {
+  if (!id) return null
+
+  // First check if encounter has subspecialist object with code
+  if (encounterData.value?.subspecialist?.id === id) {
+    return encounterData.value.subspecialist.code || null
+  }
+
+  // Search in specialistsData
+  for (const specialist of specialistsData.value) {
+    if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
+      for (const subspecialist of specialist.subspecialists) {
+        if (subspecialist.id === id) {
+          return subspecialist.code || null
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Helper function to find specialist_id and subspecialist_id from TreeSelect value (code)
+ * Returns { specialist_id: number | null, subspecialist_id: number | null }
+ */
+function getSpecialistIdsFromCode(code: string): { specialist_id: number | null; subspecialist_id: number | null } {
+  if (!code) {
+    return { specialist_id: null, subspecialist_id: null }
+  }
+
+  // Check if it's a subspecialist
+  const isSub = isSubspecialist(code, specialistsTree.value)
+
+  if (isSub) {
+    // Find subspecialist and its parent specialist
+    for (const specialist of specialistsData.value) {
+      if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
+        for (const subspecialist of specialist.subspecialists) {
+          if (subspecialist.code === code) {
+            return {
+              specialist_id: specialist.id ? Number(specialist.id) : null,
+              subspecialist_id: subspecialist.id ? Number(subspecialist.id) : null,
+            }
+          }
+        }
+      }
+    }
+  } else {
+    // It's a specialist
+    for (const specialist of specialistsData.value) {
+      if (specialist.code === code) {
+        return {
+          specialist_id: specialist.id ? Number(specialist.id) : null,
+          subspecialist_id: null,
+        }
+      }
+    }
+  }
+
+  return { specialist_id: null, subspecialist_id: null }
+}
+
+async function handleFetchDoctors(subSpecialistId: string | null = null) {
+  try {
+    // Build filter based on selection type
+    const filterParams: any = { 'page-size': 100, includes: 'employee-Person' }
+
+    if (!subSpecialistId) {
+      const doctors = await getDoctorValueLabelList(filterParams)
+      doctorsList.value = doctors
+      return
+    }
+
+    // Check if the selectd value is a subspecialist or specialist
+    const isSub = isSubspecialist(subSpecialistId, specialistsTree.value)
+
+    if (isSub) {
+      // If selected is subspecialist, filter by subspecialist-id
+      filterParams['subspecialist-id'] = subSpecialistId
+    } else {
+      // If selected is specialist, filter by specialist-id
+      filterParams['specialist-id'] = subSpecialistId
+    }
+
+    const doctors = await getDoctorValueLabelList(filterParams)
+    doctorsList.value = doctors
+  } catch (error) {
+    console.error('Error fetching doctors:', error)
+    doctorsList.value = []
+  }
+}
+
+function handleFetch(value?: any) {
+  if (value?.subSpecialistId) {
+    // handleFetchDoctors(value.subSpecialistId)
+  }
+}
+
+async function handleInit() {
+  selectedPatientObject.value = null
+  paymentsList.value = Object.keys(paymentTypes).map((item) => ({
+    value: item.toString(),
+    label: paymentTypes[item],
+  })) as any
+  sepsList.value = Object.keys(sepRefTypeCodes).map((item) => ({
+    value: item.toString(),
+    label: sepRefTypeCodes[item],
+  })) as any
+  participantGroupsList.value = Object.keys(participantGroups).map((item) => ({
+    value: item.toString(),
+    label: participantGroups[item],
+  })) as any
+  // Fetch tree data
+  await handleFetchDoctors()
+  await handleFetchSpecialists()
+}
+
+/**
+ * Load encounter detail data for edit mode
+ */
+async function loadEncounterDetail() {
+  if (!isEditMode.value || props.id <= 0) {
+    return
+  }
+
+  try {
+    isLoadingDetail.value = true
+    // Include patient, person, specialist, and subspecialist in the response
+    const result = await getEncounterDetail(props.id, {
+      includes: 'patient,patient-person,specialist,subspecialist',
+    })
+    if (result.success && result.body?.data) {
+      encounterData.value = result.body.data
+      await mapEncounterToForm(encounterData.value)
+      // Set loading to false after mapping is complete
+      isLoadingDetail.value = false
+    } else {
+      toast({
+        title: 'Gagal',
+        description: 'Gagal memuat data kunjungan',
+        variant: 'destructive',
+      })
+      // Redirect to list page if encounter not found
+      await navigateTo(getListPath())
+    }
+  } catch (error: any) {
+    console.error('Error loading encounter detail:', error)
+    toast({
+      title: 'Gagal',
+      description: error?.message || 'Gagal memuat data kunjungan',
+      variant: 'destructive',
+    })
+    // Redirect to list page on error
+    await navigateTo(getListPath())
+  } finally {
+    isLoadingDetail.value = false
+  }
+}
+
+/**
+ * Map encounter data to form fields
+ */
+async function mapEncounterToForm(encounter: any) {
+  if (!encounter) return
+
+  // Set patient data - use data from response if available
+  if (encounter.patient) {
+    selectedPatient.value = String(encounter.patient.id)
+    selectedPatientObject.value = encounter.patient
+    // Only fetch patient if person data is missing
+    if (!encounter.patient.person) {
+      await getPatientCurrent(selectedPatient.value)
+    }
+  }
+
+  // Map form fields
+  const formData: any = {}
+
+  // Patient data (readonly, populated from selected patient)
+  // Use encounter.patient.person which is already in the response
+  if (encounter.patient?.person) {
+    formData.patientName = encounter.patient.person.name || ''
+    formData.nationalIdentity = encounter.patient.person.residentIdentityNumber || ''
+    formData.medicalRecordNumber = encounter.patient.number || ''
+  } else if (selectedPatientObject.value?.person) {
+    // Fallback to selectedPatientObject if encounter.patient.person is not available
+    formData.patientName = selectedPatientObject.value.person.name || ''
+    formData.nationalIdentity = selectedPatientObject.value.person.residentIdentityNumber || ''
+    formData.medicalRecordNumber = selectedPatientObject.value.number || ''
+  }
+
+  // Doctor ID
+  const doctorId = encounter.appointment_doctor_id || encounter.responsible_doctor_id
+  if (doctorId) {
+    formData.doctorId = String(doctorId)
+  }
+
+  // Specialist/Subspecialist - use helper function to get code from ID
+  // Priority: subspecialist_id > specialist_id
+  if (encounter.subspecialist_id) {
+    const subspecialistCode = getSubspecialistCodeFromId(encounter.subspecialist_id)
+    if (subspecialistCode) {
+      formData.subSpecialistId = subspecialistCode
+    }
+  } else if (encounter.specialist_id) {
+    const specialistCode = getSpecialistCodeFromId(encounter.specialist_id)
+    if (specialistCode) {
+      formData.subSpecialistId = specialistCode
+    }
+  }
+  
+  // Fallback: if encounter has specialist/subspecialist object with code
+  if (!formData.subSpecialistId) {
+    if (encounter.subspecialist?.code) {
+      formData.subSpecialistId = encounter.subspecialist.code
+    } else if (encounter.specialist?.code) {
+      formData.subSpecialistId = encounter.specialist.code
+    }
+  }
+
+  // Register date
+  if (encounter.registeredAt) {
+    // Convert ISO date to local date string (YYYY-MM-DD)
+    const date = new Date(encounter.registeredAt)
+    formData.registerDate = date.toISOString().split('T')[0]
+  } else if (encounter.visitDate) {
+    const date = new Date(encounter.visitDate)
+    formData.registerDate = date.toISOString().split('T')[0]
+  }
+
+  // Payment data - use fields directly from encounter
+  // Map paymentMethod_code to paymentType
+  if (encounter.paymentMethod_code) {
+    // Map paymentMethod_code to paymentType
+    // 'insurance' typically means JKN/JKMM
+    if (encounter.paymentMethod_code === 'insurance') {
+      formData.paymentType = 'jkn' // Default to JKN for insurance
+    } else {
+      // For other payment methods, use the code directly if it matches
+      // Otherwise default to 'spm'
+      const validPaymentTypes = ['jkn', 'jkmm', 'spm', 'pks']
+      if (validPaymentTypes.includes(encounter.paymentMethod_code)) {
+        formData.paymentType = encounter.paymentMethod_code
+      } else {
+        formData.paymentType = 'spm' // Default to SPM
+      }
+    }
+  } else {
+    // If paymentMethod_code is empty or null, default to 'spm'
+    formData.paymentType = 'spm'
+  }
+
+  // Map payment fields directly from encounter
+  formData.cardNumber = encounter.member_number || ''
+  formData.sepNumber = encounter.ref_number || ''
+
+  // Note: patientCategory and sepType might not be available in the response
+  // These fields might need to be set manually or fetched from other sources
+
+  // Set form objects for the form component
+  formObjects.value = formData
+
+  // Update sepNumber for validation
+  if (formData.sepNumber) {
+    sepNumber.value = formData.sepNumber
+  }
+
+  // Fetch doctors based on specialist/subspecialist selection
+  if (formData.subSpecialistId) {
+    await handleFetchDoctors(formData.subSpecialistId)
+  }
+}
+
+provide('rec_select_id', recSelectId)
 provide('table_data_loader', isLoading)
+
+onMounted(async () => {
+  await handleInit()
+  // Load encounter detail if in edit mode
+  if (isEditMode.value) {
+    await loadEncounterDetail()
+  }
+})
 </script>
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-user" class="me-2" />
-    <span class="font-semibold">{{ props.formType }}</span> Kunjungan
+    <Icon
+      name="i-lucide-user"
+      class="me-2"
+    />
+    <span class="font-semibold">{{ props.formType }}</span>
+    Kunjungan
   </div>
-  <AppEncounterEntryForm @click="onClick" />
-  <AppSepSmallEntry v-if="props.id" />
 
-  <Dialog v-model:open="isOpen" title="Cari Pasien" size="xl" prevent-outside>
-    <AppPatientPicker :data="data" />
-  </Dialog>
+  <AppEncounterEntryForm
+    ref="formRef"
+    :is-loading="isLoadingDetail"
+    :is-sep-valid="isSepValid"
+    :is-checking-sep="isCheckingSep"
+    :payments="paymentsList"
+    :seps="sepsList"
+    :participant-groups="participantGroupsList"
+    :specialists="specialistsTree"
+    :doctor="doctorsList"
+    :patient="selectedPatientObject"
+    :objects="formObjects"
+    @event="handleEvent"
+    @fetch="handleFetch"
+  />
+
+  <AppViewPatient
+    v-model:open="openPatient"
+    v-model:selected="selectedPatient"
+    :patients="patients"
+    :pagination-meta="paginationMeta"
+    @fetch="
+      (value) => {
+        if (value.search && value.search.length >= 3) {
+          // Use identifier search for specific searches (NIK, RM, etc.)
+          getPatientByIdentifierSearch(value.search)
+        } else {
+          // Use regular search for general searches
+          getPatientsList({ ...value, 'page-size': 10, includes: 'person' })
+        }
+      }
+    "
+    @save="handleSavePatient"
+  />
+
+  <!-- Footer Actions -->
+  <div class="mt-6 flex justify-end gap-2 border-t border-t-slate-300 pt-4">
+    <Button
+      variant="outline"
+      type="button"
+      class="h-[40px] min-w-[120px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50 hover:text-orange-400"
+      @click="handleEvent('cancel')"
+    >
+      <Icon
+        name="i-lucide-x"
+        class="h-5 w-5"
+      />
+      Batal
+    </Button>
+    <Button
+      type="button"
+      class="h-[40px] min-w-[120px] text-white"
+      :disabled="isSaveDisabled"
+      @click="handleSaveClick"
+    >
+      <Icon
+        name="i-lucide-save"
+        class="h-5 w-5"
+      />
+      Simpan
+    </Button>
+  </div>
 </template>
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
new file mode 100644
index 00000000..1f2c2943
--- /dev/null
+++ b/app/components/content/encounter/home.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { getDetail } from '~/services/encounter.service'
+
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
+import Consultation from '~/components/content/consultation/list.vue'
+import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
+import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps<{
+  classes?: string
+}>()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
+  },
+})
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+// const dataRes = await getDetail(id, {
+//   includes:
+//     'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
+// })
+// const dataResBody = dataRes.body ?? null
+// const data = dataResBody?.data ?? null
+
+// Dummy data so AppEncounterQuickInfo can render in development/storybook
+// Replace with real API result when available (see commented fetch below)
+const data = ref<any>({
+  patient: {
+    number: 'RM-2025-0001',
+    person: {
+      name: 'John Doe',
+      birthDate: '1980-01-01T00:00:00Z',
+      gender_code: 'M',
+      addresses: [{ address: 'Jl. Contoh No.1, Jakarta' }],
+      frontTitle: '',
+      endTitle: '',
+    },
+  },
+  visitDate: new Date().toISOString(),
+  unit: { name: 'Onkologi' },
+  responsible_doctor: null,
+  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } },
+})
+
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
+  {
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
+  },
+  {
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
+  },
+]
+
+const paginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+const tabsRaws: TabItem[] = [
+  {
+    value: 'status',
+    label: 'Status Masuk/Keluar',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Status,
+    props: { encounter: data },
+  },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalAssesmentList,
+  },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalRehabList,
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    groups: ['ambulatory', 'rehabilitation'],
+    component: AssesmentFunctionList,
+  },
+  { value: 'therapy-protocol', groups: ['ambulatory', 'rehabilitation'], label: 'Protokol Terapi' },
+  {
+    value: 'chemotherapy-protocol',
+    label: 'Protokol Kemoterapi',
+    groups: ['chemotherapy'],
+    component: ProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  {
+    value: 'chemotherapy-medicine',
+    label: 'Protokol Obat Kemoterapi',
+    groups: ['chemotherapy'],
+    component: MedicineProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  { value: 'report', label: 'Laporan Tindakan', groups: ['chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'education-assessment',
+    label: 'Asesmen Kebutuhan Edukasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+  },
+  { value: 'consent', label: 'General Consent', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'prescription',
+    label: 'Order Obat',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: PrescriptionList,
+  },
+  { value: 'device', label: 'Order Alkes', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-radiology', label: 'Order Radiologi', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'medical-action', label: 'Order Ruang Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-result', label: 'Hasil Penunjang', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'consultation',
+    label: 'Konsultasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Consultation,
+    props: { encounter: data },
+  },
+  { value: 'resume', label: 'Resume', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'control', label: 'Surat Kontrol', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'screening', label: 'Skrinning MPP', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', groups: ['ambulatory', 'rehabilitation'] },
+  { value: 'price-list', label: 'Tarif Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+]
+
+const tabs = computed(() => {
+  return tabsRaws
+    .filter((tab: TabItem) => tab.groups ? tab.groups.some((group: string) => props.classes?.includes(group)) : true)
+    .map((tab: TabItem) => {
+      return { ...tab, props: { ...tab.props, encounter: data } }
+    })
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    </div>
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
+  </div>
+</template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index 76f32415..655a553d 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -1,14 +1,27 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { Summary } from '~/components/pub/my-ui/summary-card/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+// Components
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Types
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+// Services
+import { getList as getEncounterList, remove as removeEncounter } from '~/services/encounter.service'
+
+// UI
+import { toast } from '~/components/pub/ui/toast'
 
 const props = defineProps<{
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
   type: string
 }>()
 
@@ -21,13 +34,27 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
 
 const hreaderPrep: HeaderPrep = {
   title: 'Kunjungan',
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/rehab/encounter/add'),
+    onClick: () => {
+      if (props.classCode === 'ambulatory' && props.subClassCode === 'rehab') {
+        navigateTo('/rehab/encounter/add')
+      }
+      if (props.classCode === 'ambulatory' && props.subClassCode === 'reg') {
+        navigateTo('/outpatient/encounter/add')
+      }
+      if (props.classCode === 'emergency') {
+        navigateTo('/emergency/encounter/add')
+      }
+      if (props.classCode === 'inpatient') {
+        navigateTo('/inpatient/encounter/add')
+      }
+    },
   },
 }
 
@@ -47,40 +74,119 @@ const refSearchNav: RefSearchNav = {
 
 // Loading state management
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/encounter?includes=patient,patient-person')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+/**
+ * Get base path for encounter routes based on classCode and subClassCode
+ */
+function getBasePath(): string {
+  if (props.classCode === 'ambulatory' && props.subClassCode === 'rehab') {
+    return '/rehab/encounter'
   }
-  isLoading.isTableLoading = false
+  if (props.classCode === 'ambulatory' && props.subClassCode === 'reg') {
+    return '/outpatient/encounter'
+  }
+  if (props.classCode === 'emergency') {
+    return '/emergency/encounter'
+  }
+  if (props.classCode === 'inpatient') {
+    return '/inpatient/encounter'
+  }
+  return '/encounter' // fallback
 }
 
-onMounted(() => {
-  getPatientList()
-})
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  try {
+    const params: any = { includes: 'patient,patient-person' }
+    if (props.classCode) {
+      params['class-code'] = props.classCode
+    }
+    if (props.subClassCode) {
+      params['sub-class-code'] = props.subClassCode
+    }
+    const result = await getEncounterList(params)
+    if (result.success) {
+      data.value = result.body?.data || []
+    }
+  } catch (error) {
+    console.error('Error fetching encounter list:', error)
+  } finally {
+    isLoading.isTableLoading = false
+  }
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removeEncounter(record.id)
+      if (result.success) {
+        toast({
+          title: 'Berhasil',
+          description: 'Kunjungan berhasil dihapus',
+          variant: 'default',
+        })
+        await getPatientList() // Refresh list
+      } else {
+        const errorMessage = result.body?.message || 'Gagal menghapus kunjungan'
+        toast({
+          title: 'Gagal',
+          description: errorMessage,
+          variant: 'destructive',
+        })
+      }
+    } catch (error: any) {
+      console.error('Error deleting encounter:', error)
+      toast({
+        title: 'Gagal',
+        description: error?.message || 'Gagal menghapus kunjungan',
+        variant: 'destructive',
+      })
+    } finally {
+      // Reset state
+      recId.value = 0
+      recAction.value = ''
+      recItem.value = null
+      isRecordConfirmationOpen.value = false
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+  isRecordConfirmationOpen.value = false
+}
 
 watch(
   () => recAction.value,
   () => {
-    console.log('recAction.value', recAction.value)
+    if (recAction.value === ActionEvents.showConfirmDelete) {
+      isRecordConfirmationOpen.value = true
+      return
+    }
+    
+    const basePath = getBasePath()
+    
     if (props.type === 'encounter') {
       if (recAction.value === 'showDetail') {
-        navigateTo(`/rehab/encounter/${recId.value}/detail`)
+        navigateTo(`${basePath}/${recId.value}/detail`)
       } else if (recAction.value === 'showEdit') {
-        navigateTo(`/rehab/encounter/${recId.value}/edit`)
+        navigateTo(`${basePath}/${recId.value}/edit`)
       } else if (recAction.value === 'showProcess') {
-        navigateTo(`/rehab/encounter/${recId.value}/process`)
+        navigateTo(`${basePath}/${recId.value}/process`)
       } else {
         // handle other actions
       }
     } else if (props.type === 'registration') {
+      // Handle registration type if needed
       if (recAction.value === 'showDetail') {
-        navigateTo(`/rehab/registration/${recId.value}/detail`)
+        navigateTo(`${basePath.replace('/encounter', '/registration')}/${recId.value}/detail`)
       } else if (recAction.value === 'showEdit') {
-        navigateTo(`/rehab/registration/${recId.value}/edit`)
+        navigateTo(`${basePath.replace('/encounter', '/registration')}/${recId.value}/edit`)
       } else if (recAction.value === 'showProcess') {
-        navigateTo(`/rehab/registration/${recId.value}/process`)
+        navigateTo(`${basePath.replace('/encounter', '/registration')}/${recId.value}/process`)
       } else {
         // handle other actions
       }
@@ -92,6 +198,10 @@ provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+onMounted(() => {
+  getPatientList()
+})
 </script>
 
 <template>
@@ -101,7 +211,10 @@ provide('table_data_loader', isLoading)
   />
   <Separator class="my-4 xl:my-5" />
 
-  <Filter :ref-search-nav="refSearchNav" />
+  <Filter
+    :prep="hreaderPrep"
+    :ref-search-nav="refSearchNav"
+  />
 
   <AppEncounterList :data="data" />
 
@@ -111,6 +224,38 @@ provide('table_data_loader', isLoading)
     size="lg"
     prevent-outside
   >
-    <AppEncounterFilter />
+    <AppEncounterFilter
+      :installation="{
+        msg: { placeholder: 'Pilih' },
+        items: [],
+      }"
+      :schema="{}"
+    />
   </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.patient?.person?.name">
+          <strong>Pasien:</strong>
+          {{ record.patient.person.name }}
+        </p>
+        <p v-if="record?.class_code">
+          <strong>Kelas:</strong>
+          {{ record.class_code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 9b6308f2..318026e3 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -11,12 +11,15 @@ import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 
 // PLASE ORDER BY TAB POSITION
 import Status from '~/components/content/encounter/status.vue'
-import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
-import PrescriptionList from '~/components/content/prescription/list.vue'
+import Prescription from '~/components/content/prescription/main.vue'
+import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
+import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 import ResumeList from '~/components/content/resume/list.vue'
+import ControlLetterList from '~/components/content/control-letter/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -39,21 +42,32 @@ const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
-  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    component: EarlyMedicalAssesmentList,
+    props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
+  },
   {
     value: 'rehab-medical-assessment',
     label: 'Pengkajian Awal Medis Rehabilitasi Medis',
     component: EarlyMedicalRehabList,
+    props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    component: AssesmentFunctionList,
+    props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
   },
-  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'consent', label: 'General Consent' },
   { value: 'patient-note', label: 'CPRJ' },
-  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
+  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
   { value: 'device', label: 'Order Alkes' },
-  { value: 'mcu-radiology', label: 'Order Radiologi' },
-  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
   { value: 'mcu-lab-pa', label: 'Order Lab PA' },
   { value: 'medical-action', label: 'Order Ruang Tindakan' },
@@ -61,6 +75,8 @@ const tabs: TabItem[] = [
   { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
   { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
   { value: 'control', label: 'Surat Kontrol' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
   { value: 'screening', label: 'Skrinning MPP' },
   { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
 ]
diff --git a/app/components/content/installation-position/list.vue b/app/components/content/installation-position/list.vue
new file mode 100644
index 00000000..ea60ee04
--- /dev/null
+++ b/app/components/content/installation-position/list.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppInstallationPositionList from '~/components/app/installation-position/list.vue'
+import AppInstallationPositionEntryForm from '~/components/app/installation-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InstallationPositionSchema, type InstallationPositionFormData } from '~/schemas/installation-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/installation-position.service'
+import { getValueLabelList as getInstallationLabelList } from '~/services/installation.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const installations = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'installation,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'installation-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Instalasi - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    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 getCurrentInstallationDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      title.value = 'Detail Instalasi - Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Edit Instalasi - Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    installations.value = await getInstallationLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppInstallationPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Instalasi - Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppInstallationPositionEntryForm
+      :schema="InstallationPositionSchema"
+      :employees="employees"
+      :installations="installations"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationPositionList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getInstallationPositionList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationPositionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/installation/detail.vue b/app/components/content/installation/detail.vue
new file mode 100644
index 00000000..0f12ad8c
--- /dev/null
+++ b/app/components/content/installation/detail.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Installation } from '~/models/installation'
+import { getDetail as getDetailInstallation } from '~/services/installation.service'
+
+// #region installtaion positions
+import { config } from '~/components/app/installation/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Types
+import { type InstallationPositionFormData, InstallationPositionSchema } from '~/schemas/installation-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation-position.handler'
+
+// Services
+import { getList, getDetail as getDetailInstallationPosition } from '~/services/installation-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  installationId: number
+}>()
+const installation = ref<Installation>({} as Installation)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'installation-id': props.installationId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'installation-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Instalasi',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Jabatan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailInstallation(props.installationId)
+    if (result.success) {
+      installation.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  console.log(recId, recAction)
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailInstallationPosition(recId.value)
+      title.value = 'Edit Jabatan'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppInstallationDetail :installation="installation" />
+  <div class="h-6"></div>
+
+  <AppInstallationDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Jabatan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppInstallationPositionEntryDetail
+      :schema="InstallationPositionSchema"
+      :installation-id="Number(installationId)"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getInstallationPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationPositionList, 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/installation/entry.ts b/app/components/content/installation/entry.ts
deleted file mode 100644
index c003a029..00000000
--- a/app/components/content/installation/entry.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as z from 'zod'
-
-export const installationConf = {
-  msg: {
-    placeholder: '---pilih encounter class (fhir7)',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-    { value: '4', label: 'Observation', code: 'OBSENC' },
-    { value: '5', label: 'Pre-admission', code: 'PRENC' },
-    { value: '6', label: 'Short Stay', code: 'SS' },
-    { value: '7', label: 'Virtual', code: 'VR' },
-    { value: '8', label: 'Home Health', code: 'HH' },
-  ],
-}
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama instalasi harus diisi',
-    })
-    .min(3, 'Nama instalasi minimal 3 karakter'),
-
-  code: z
-    .string({
-      required_error: 'Kode instalasi harus diisi',
-    })
-    .min(3, 'Kode instalasi minimal 3 karakter'),
-
-  encounterClassCode: z
-    .string({
-      required_error: 'Kelompok encounter class harus dipilih',
-    })
-    .min(1, 'Kelompok encounter class harus dipilih'),
-})
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index 31486097..553d7ebb 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -102,9 +102,23 @@ const getCurrentInstallationDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentInstallationDetail(recId.value)
-      title.value = 'Detail Instalasi'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-installation-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentInstallationDetail(recId.value)
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
new file mode 100644
index 00000000..4b3fa663
--- /dev/null
+++ b/app/components/content/prescription/entry.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+import { getDetail } from '~/services/prescription.service'
+import Detail from '~/components/app/prescription/detail.vue'
+import { getList as getPrescriptionItemList } from '~/services/prescription-item.service'
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import { type PrescriptionItem } from '~/models/prescription-item'
+
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
+import { create } from '~/services/prescription-item.service';
+
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+
+import {
+  recItem,
+} from '~/handlers/prescription-item.handler'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+// const route = useRoute()
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data || null
+const items = ref(data?.items || [])
+
+const {
+  data: prescriptionItems,
+  fetchData: getMyList,
+} = usePaginatedList<PrescriptionItem> ({
+  fetchFn: async ({ page, search }) => {
+    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription-item',
+})
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Tambah Order Obat / Resep',
+  icon: 'i-lucide-box',
+}
+
+const mixDialogOpen = ref(false)
+const nonMixDialogOpen = ref(false)
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function addItem(mode: 'mix' | 'non-mix') {
+  if (mode === 'mix') {
+    mixDialogOpen.value = true
+  } else if (mode === 'non-mix') {
+    nonMixDialogOpen.value = true
+  }
+}
+
+function saveMix() {
+  create({data})
+}
+
+function saveNonMix(data: PrescriptionItem) {
+  create({data})
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="prescriptionItems"
+    @add="addItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="mixDialogOpen"
+    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <MixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveMix"
+    />
+  </Dialog>
+
+  <Dialog
+    v-model:open="nonMixDialogOpen"
+    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <NonMixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveNonMix"
+    />
+  </Dialog>
+</template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index f8059b9d..844cb04f 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -1,37 +1,82 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { toast } from '~/components/pub/ui/toast'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionRemove,
+  handleActionSave,
+} from '~/handlers/prescription.handler'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Services
+import { getList, getDetail } from '~/services/prescription.service'
+import List from '~/components/app/prescription/list.vue'
+import type { Prescription } from '~/models/prescription'
 
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  fetchData: getMyList,
+} = usePaginatedList<Prescription>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription'
 })
 
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
 const headerPrep: HeaderPrep = {
-  title: 'Resep Obat',
-  icon: 'i-lucide-panel-bottom',
+  title: 'Order Obat',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
@@ -40,33 +85,82 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-onMounted(() => {
-  getMaterialList()
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Konsultasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      break
+  }
 })
 
-async function getMaterialList() {
-  isLoading.dataListLoading = true
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})
 
-  // const resp = await xfetch('/api/v1/material')
-  // if (resp.success) {
-  //   data.value = (resp.body as Record<string, any>).data
-  // }
-
-  isLoading.dataListLoading = false
+function cancel(data: Prescription) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
 }
+
+function edit(data: Prescription) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: Prescription) {
+}
+
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...headerPrep }" />
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
 
-  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
-
-  <AppPrescriptionEntry />
-
-  <PrescriptionItemListEntry :data=[] />
-  <div>
-    <Button>
-      Tambah
-    </Button>
-  </div>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/prescription/main.vue b/app/components/content/prescription/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/prescription/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/content/radiology-order/entry.vue b/app/components/content/radiology-order/entry.vue
new file mode 100644
index 00000000..4d0aa002
--- /dev/null
+++ b/app/components/content/radiology-order/entry.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU items
+const items = ref<McuOrderItem[]>([])
+
+// MCU Categories
+const mcuSrcCategoryRes = await getMcuCategoryList()
+const mcuSrcCategories = mcuSrcCategoryRes.body?.data
+const selectedMcuSrcCategory_code = ref('')
+
+// MCU Sources
+const mcuSrcs = ref<McuSrc[]>([])
+
+// const {
+//   data: items,
+//   fetchData: getItems,
+// } = usePaginatedList<McuOrderItem> ({
+//   fetchFn: async ({ page, search }) => {
+//     const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
+//     if (result.success) {
+//       items.value = result.body.data
+//     }
+//     return { success: result.success || false, body: result.body || {} }
+//   },
+//   entityName: 'mcu-order-item',
+// })
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail dan List Item Order Radiologi ',
+  icon: 'i-lucide-box',
+}
+
+const pickerDialogOpen = ref(false)
+
+onMounted(async () => {
+  await getItems()
+})
+
+watch(selectedMcuSrcCategory_code, async () => {
+  const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
+  mcuSrcs.value = res.body?.data
+})
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+async function pickItem(item: McuSrc) {
+  const exItem = items.value.find(e => e.mcuSrc_id === item.id)
+  if (exItem) {
+    await removeMcuOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createMcuOrderItem({
+      mcuOrder_id: intId,
+      mcuSrc_id: item.id,
+    })
+    await getItems()
+  }
+}
+
+async function getItems() {
+  const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
+  if (itemsRes.success) {
+      items.value = itemsRes.body.data
+  } else {
+    items.value = []
+  }
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="items"
+    @requestItem="requestItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
+    <McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
+</template>
diff --git a/app/components/content/radiology-order/list.vue b/app/components/content/radiology-order/list.vue
new file mode 100644
index 00000000..b2c8571d
--- /dev/null
+++ b/app/components/content/radiology-order/list.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "rad",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Radiologi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      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 getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Radiologi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Radiologi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>
diff --git a/app/components/content/radiology-order/main.vue b/app/components/content/radiology-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/radiology-order/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 61107232..3a916c4d 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -1,113 +1,552 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+// Components
+import AppSepEntryForm from '~/components/app/sep/entry-form.vue'
+import AppViewPatient from '~/components/app/patient/view-patient.vue'
+import AppViewHistory from '~/components/app/sep/view-history.vue'
+import AppViewLetter from '~/components/app/sep/view-letter.vue'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import type { SepHistoryData } from '~/components/app/sep/list-cfg.history'
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+
+// Constants
+import {
+  serviceTypes,
+  serviceAssessments,
+  registerMethods,
+  trafficAccidents,
+  supportCodes,
+  procedureTypes,
+  purposeOfVisits,
+  classLevels,
+  classLevelUpgrades,
+  classPaySources,
+} from '~/lib/constants.vclaim'
+
+// Services
+import {
+  getList as getSpecialistList,
+  getValueTreeItems as getSpecialistTreeItems,
+} from '~/services/specialist.service'
+import { getValueLabelList as getProvinceList } from '~/services/vclaim-region-province.service'
+import { getValueLabelList as getCityList } from '~/services/vclaim-region-city.service'
+import { getValueLabelList as getDistrictList } from '~/services/vclaim-region-district.service'
+import { getValueLabelList as getDoctorLabelList } from '~/services/vclaim-doctor.service'
+import { getValueLabelList as getHealthFacilityLabelList } from '~/services/vclaim-healthcare.service'
+import { getValueLabelList as getDiagnoseLabelList } from '~/services/vclaim-diagnose.service'
+import { getList as getMemberList } from '~/services/vclaim-member.service'
+import { getList as getHospitalLetterList } from '~/services/vclaim-reference-hospital-letter.service'
+import { getList as getControlLetterList } from '~/services/vclaim-control-letter.service'
+import { getList as getMonitoringHistoryList } from '~/services/vclaim-monitoring-history.service'
+import { create as createSep, makeSepData } from '~/services/vclaim-sep.service'
+
+// Handlers
+import {
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  getPatientsList,
+  getPatientCurrent,
+  getPatientByIdentifierSearch,
+} from '~/handlers/patient.handler'
+
+const route = useRoute()
 const openPatient = ref(false)
 const openLetter = ref(false)
 const openHistory = ref(false)
-const selectedPatient = ref('3456512345678880')
-const selectedLetter = ref('SK22334442')
+const selectedLetter = ref('')
+const selectedObjects = ref<any>({})
+const selectedServiceType = ref<string>('')
+const selectedAdmissionType = ref<string>('')
+const histories = ref<Array<SepHistoryData>>([])
+const letters = ref<Array<any>>([])
+const doctors = ref<Array<{ value: string | number; label: string }>>([])
+const diagnoses = ref<Array<{ value: string | number; label: string }>>([])
+const facilitiesFrom = ref<Array<{ value: string | number; label: string }>>([])
+const facilitiesTo = ref<Array<{ value: string | number; label: string }>>([])
+const supportCodesList = ref<Array<{ value: string; label: string }>>([])
+const serviceTypesList = ref<Array<{ value: string; label: string }>>([])
+const registerMethodsList = ref<Array<{ value: string; label: string }>>([])
+const accidentsList = ref<Array<{ value: string; label: string }>>([])
+const purposeOfVisitsList = ref<Array<{ value: string; label: string }>>([])
+const proceduresList = ref<Array<{ value: string; label: string }>>([])
+const assessmentsList = ref<Array<{ value: string; label: string }>>([])
+const provincesList = ref<Array<{ value: string; label: string }>>([])
+const citiesList = ref<Array<{ value: string; label: string }>>([])
+const districtsList = ref<Array<{ value: string; label: string }>>([])
+const classLevelsList = ref<Array<{ value: string; label: string }>>([])
+const classLevelUpgradesList = ref<Array<{ value: string; label: string }>>([])
+const classPaySourcesList = ref<Array<{ value: string; label: string }>>([])
+const isServiceHidden = ref(false)
+const isSaveLoading = ref(false)
+const isLetterReadonly = ref(false)
+const specialistsTree = ref<TreeItem[]>([])
+const resourceType = ref('')
+const resourcePath = ref('')
 
-const patients = [
-  {
-    ktp: '3456512345678880',
-    rm: 'RM23311224',
-    bpjs: '334423213214',
-    nama: 'Ahmad Baidowi',
-  },
-  {
-    ktp: '345678804565123',
-    rm: 'RM23455667',
-    bpjs: '33442367656',
-    nama: 'Bian Maulana',
-  },
-]
+async function getMonitoringHistoryMappers() {
+  histories.value = []
+  const dateFirst = new Date()
+  const dateLast = new Date()
+  dateLast.setMonth(dateFirst.getMonth() - 3)
+  const cardNumber =
+    selectedPatientObject.value?.person?.residentIdentityNumber || selectedPatientObject.value?.number || ''
+  const result = await getMonitoringHistoryList({
+    cardNumber: cardNumber,
+    startDate: dateFirst.toISOString().substring(0, 10),
+    endDate: dateLast.toISOString().substring(0, 10),
+  })
+  if (result && result.success && result.body) {
+    const historiesRaw = result.body?.response?.histori || []
+    if (!historiesRaw) return
+    historiesRaw.forEach((result: any) => {
+      histories.value.push({
+        sepNumber: result.noSep,
+        sepDate: result.tglSep,
+        referralNumber: result.noRujukan,
+        diagnosis:
+          result.diagnosa && typeof result.diagnosa === 'string' && result.diagnosa.length > 20
+            ? result.diagnosa.toString().substring(0, 17) + '...'
+            : '-',
+        serviceType: !result.jnsPelayanan ? '-' : result.jnsPelayanan === '1' ? 'Rawat Jalan' : 'Rawat Inap',
+        careClass: result.kelasRawat,
+      })
+    })
+  }
+}
 
-const letters = [
-  {
-    noSurat: 'SK22334442',
-    tglRencana: '12 Agustus 2025',
-    noSep: 'SEP3232332',
-    namaPasien: 'Ahmad Baidowi',
-    noBpjs: '33442331214',
-    klinik: 'Penyakit Dalam',
-    dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
-  },
-  {
-    noSurat: 'SK99120039',
-    tglRencana: '12 Agustus 2025',
-    noSep: 'SEP4443232',
-    namaPasien: 'Bian Maulana',
-    noBpjs: '33442367656',
-    klinik: 'Gigi',
-    dokter: 'dr. Achmad Suparjo',
-  },
-]
+async function getLetterMappers(admissionType: string, search: string) {
+  letters.value = []
+  let result = null
+  if (admissionType !== '3') {
+    result = await getHospitalLetterList({
+      letterNumber: search,
+    })
+  } else {
+    result = await getControlLetterList({
+      letterNumber: search,
+      mode: 'by-control',
+    })
+    if (result && result.success && result.body) {
+      const lettersRaw = result.body?.response || null
+      if (!lettersRaw) {
+        result = await getControlLetterList({
+          letterNumber: search,
+          mode: 'by-card',
+        })
+      }
+    }
+    if (result && result.success && result.body) {
+      const lettersRaw = result.body?.response || null
+      if (!lettersRaw) {
+        result = await getControlLetterList({
+          letterNumber: search,
+          mode: 'by-sep',
+        })
+      }
+    }
+  }
+  if (result && result.success && result.body) {
+    const lettersRaw = result.body?.response || null
+    if (!lettersRaw) return
+    if (admissionType === '3') {
+      letters.value = [
+        {
+          letterNumber: lettersRaw.noSuratKontrol || '',
+          plannedDate: lettersRaw.tglRencanaKontrol || '',
+          sepNumber: lettersRaw.sep.noSep || '',
+          patientName: lettersRaw.sep.peserta.nama || '',
+          bpjsCardNo: lettersRaw.sep.peserta.noKartu,
+          clinic: lettersRaw.sep.poli || '',
+          doctor: lettersRaw.sep.namaDokter || '',
+        },
+      ]
+    } else {
+      // integrate ke sep ---
+      // "rujukan": {
+      //           "noRujukan": "0212R0300625B000006", // rujukan?.noKunjungan
+      //           "ppkRujukan": "0212R030",
+      //           "tglRujukan": "2025-06-26",
+      //           "asalRujukan": "2" // asalFaskes
+      //       },
+      // "jnsPelayanan": "2",
+      // "ppkPelayanan": "1323R001",
+      // "poli": {
+      //  "tujuan": "URO", // rujukan?.poliRujukan?.kode
+      // },
+      // "klsRawat": {
+      //           "pembiayaan": "",
+      //           "klsRawatHak": "2", // peserta.hakKelas?.kode
+      //           "klsRawatNaik": "",
+      //           "penanggungJawab": ""
+      //       },
 
-const histories = [
-  {
-    no_sep: "SP23311224",
-    tgl_sep: "12 Agustus 2025",
-    no_rujukan: "123444",
-    diagnosis: "C34.9 – Karsinoma Paru",
-    pelayanan: "Rawat Jalan",
-    kelas: "Kelas II",
-  },
-  {
-    no_sep: "SP23455667",
-    tgl_sep: "11 Agustus 2025",
-    no_rujukan: "2331221",
-    diagnosis: "K35 – Apendisitis akut",
-    pelayanan: "Rawat Jalan",
-    kelas: "Kelas II",
-  },
-]
+      letters.value = [
+        {
+          letterNumber: lettersRaw?.rujukan?.noKunjungan || '',
+          plannedDate: lettersRaw?.rujukan?.tglKunjungan || '',
+          sepNumber: lettersRaw?.rujukan?.informasi?.eSEP || '-',
+          patientName: lettersRaw?.rujukan?.peserta.nama || '',
+          bpjsCardNo: lettersRaw?.rujukan?.peserta.noKartu || '',
+          clinic: lettersRaw?.rujukan?.poliRujukan.nama || '',
+          doctor: '',
+          information: {
+            facility: lettersRaw?.asalFaskes || '',
+            diagnoses: lettersRaw?.rujukan?.diagnosa?.kode || '',
+            serviceType: lettersRaw?.rujukan?.pelayanan?.kode || '',
+            classLevel: lettersRaw?.rujukan?.peserta?.hakKelas?.kode || '',
+            poly: lettersRaw?.rujukan?.poliRujukan?.kode || '',
+            cardNumber: lettersRaw?.rujukan?.peserta?.noKartu || '',
+            patientName: lettersRaw?.rujukan?.peserta?.nama || '',
+            patientPhone: lettersRaw?.rujukan?.peserta?.mr?.noTelepon || '',
+            medicalRecordNumber: lettersRaw?.rujukan?.peserta?.mr?.noMR || '',
+          },
+        },
+      ]
+    }
+  }
+}
 
-function handleSavePatient() {
-  console.log('Pasien dipilih:', selectedPatient.value)
+async function getPatientInternalMappers(id: string) {
+  try {
+    await getPatientCurrent(id)
+    if (selectedPatientObject.value) {
+      const patient = selectedPatientObject.value
+      selectedObjects.value['cardNumber'] = '-'
+      selectedObjects.value['nationalIdentity'] = patient?.person?.residentIdentityNumber || '-'
+      selectedObjects.value['medicalRecordNumber'] = patient?.number || '-'
+      selectedObjects.value['patientName'] = patient?.person?.name || '-'
+      selectedObjects.value['phoneNumber'] = patient?.person?.contacts?.[0]?.value || '-'
+    }
+  } catch (err) {
+    console.error('Failed to load patient from query params:', err)
+  }
+}
+
+async function getPatientExternalMappers(id: string, type: string) {
+  try {
+    const result = await getMemberList({
+      mode: type,
+      number: id,
+      date: new Date().toISOString().substring(0, 10),
+    })
+    if (result && result.success && result.body) {
+      const memberRaws = result.body?.response || null
+      selectedObjects.value['cardNumber'] = memberRaws?.peserta?.noKartu || ''
+      selectedObjects.value['nationalIdentity'] = memberRaws?.peserta?.nik || ''
+      selectedObjects.value['medicalRecordNumber'] = memberRaws?.peserta?.mr?.noMR || ''
+      selectedObjects.value['patientName'] = memberRaws?.peserta?.nama || ''
+      selectedObjects.value['phoneNumber'] = memberRaws?.peserta?.mr?.noTelepon || ''
+      selectedObjects.value['classLevel'] = memberRaws?.peserta?.hakKelas?.kode || ''
+      selectedObjects.value['status'] = memberRaws?.statusPeserta?.kode || ''
+    }
+  } catch (err) {
+    console.error('Failed to load patient from query params:', err)
+  }
 }
 
 function handleSaveLetter() {
-  console.log('Letter dipilih:', selectedLetter.value)
+  // Find the selected letter and get its plannedDate
+  const selectedLetterData = letters.value.find((letter) => letter.letterNumber === selectedLetter.value)
+  if (selectedLetterData && selectedLetterData.plannedDate) {
+    selectedObjects.value['letterDate'] = selectedLetterData.plannedDate
+  }
 }
 
-function handleEvent(value: string) {
-  if (value === 'search-patient') {
-    openPatient.value = true
+async function handleSavePatient() {
+  selectedPatientObject.value = null
+  await getPatientInternalMappers(selectedPatient.value)
+}
+
+async function handleEvent(menu: string, value: any) {
+  if (menu === 'admission-type') {
+    selectedAdmissionType.value = value
     return
   }
-  if (value === 'search-letter') {
+  if (menu === 'service-type') {
+    selectedServiceType.value = value
+    doctors.value = await getDoctorLabelList({
+      serviceType: selectedServiceType.value || 1,
+      serviceDate: new Date().toISOString().substring(0, 10),
+      specialistCode: 0,
+    })
+  }
+  if (menu === 'search-patient') {
+    getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
+      openPatient.value = true
+    })
+    return
+  }
+  if (menu === 'search-patient-by-identifier') {
+    const text = value.text
+    const type = value.type
+    const prevCardNumber = selectedPatientObject.value?.person?.residentIdentityNumber || ''
+    if (type === 'indentity' && text !== prevCardNumber) {
+      await getPatientByIdentifierSearch(text)
+      await getPatientExternalMappers(text, 'by-identity')
+    }
+    if (type === 'cardNumber' && text !== prevCardNumber) {
+      await getPatientExternalMappers(text, 'by-card')
+    }
+    return
+  }
+  if (menu === 'search-letter') {
+    isLetterReadonly.value = false
+    getLetterMappers(value.admissionType, value.search).then(() => {
+      if (letters.value.length > 0) {
+        const copyObjects = { ...selectedObjects.value }
+        selectedObjects.value = {}
+        selectedLetter.value = letters.value[0].letterNumber
+        isLetterReadonly.value = true
+        setTimeout(() => {
+          selectedObjects.value = copyObjects
+          selectedObjects.value['letterDate'] = letters.value[0].plannedDate
+        }, 100)
+      }
+    })
+    return
+  }
+  if (menu === 'open-letter') {
     openLetter.value = true
     return
   }
-  if (value === 'history-sep') {
-    openHistory.value = true
+  if (menu === 'history-sep') {
+    getMonitoringHistoryMappers().then(() => {
+      openHistory.value = true
+    })
     return
   }
-  if (value === 'back') {
-    navigateTo('/bpjs/sep')
+  if (menu === 'back') {
+    navigateTo('/integration/bpjs/sep')
+  }
+  if (menu === 'save-sep') {
+    isSaveLoading.value = true
+    // value.destinationClinic = value.destinationClinic || ''
+    createSep(makeSepData(value))
+      .then((res) => {
+        const body = res?.body
+        const code = body?.metaData?.code
+        const message = body?.metaData?.message
+        if (code && code !== '200') {
+          toast({ title: 'Gagal', description: message || 'Gagal membuat SEP', variant: 'destructive' })
+          return
+        }
+        toast({ title: 'Berhasil', description: 'SEP berhasil dibuat', variant: 'default' })
+        if (resourceType.value === 'encounter') {
+          navigateTo(resourcePath.value)
+          return
+        }
+        navigateTo('/integration/bpjs/sep')
+      })
+      .catch((err) => {
+        console.error('Failed to save SEP:', err)
+        toast({ title: 'Gagal', description: err?.message || 'Gagal membuat SEP', variant: 'destructive' })
+      })
+      .finally(() => {
+        isSaveLoading.value = false
+      })
   }
 }
+
+async function handleFetch(params: any) {
+  const menu = params.menu || ''
+  const value = params.value || ''
+  if (menu === 'diagnosis') {
+    diagnoses.value = await getDiagnoseLabelList({ diagnosa: value })
+  }
+  if (menu === 'clinic-from') {
+    facilitiesFrom.value = await getHealthFacilityLabelList({
+      healthcare: value,
+      healthcareType: selectedServiceType.value || 1,
+    })
+  }
+  if (menu === 'clinic-to') {
+    facilitiesTo.value = await getHealthFacilityLabelList({
+      healthcare: value,
+      healthcareType: selectedServiceType.value || 1,
+    })
+  }
+  if (menu === 'province') {
+    citiesList.value = await getCityList({ province: value })
+    districtsList.value = []
+  }
+  if (menu === 'city') {
+    districtsList.value = await getDistrictList({ city: value })
+  }
+}
+
+async function handleFetchSpecialists() {
+  try {
+    const specialistsResult = await getSpecialistList({ 'page-size': 100, includes: 'subspecialists' })
+    if (specialistsResult.success) {
+      const specialists = specialistsResult.body?.data || []
+      specialistsTree.value = getSpecialistTreeItems(specialists)
+    }
+  } catch (error) {
+    console.error('Error fetching specialist-subspecialist tree:', error)
+  }
+}
+
+async function handleInit() {
+  const facilities = await getHealthFacilityLabelList({
+    healthcare: 'Puskesmas',
+    healthcareType: selectedLetter.value || 1,
+  })
+  diagnoses.value = await getDiagnoseLabelList({ diagnosa: 'paru' })
+  facilitiesFrom.value = facilities
+  facilitiesTo.value = facilities
+  doctors.value = await getDoctorLabelList({
+    serviceType: selectedServiceType.value || 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+  })
+  provincesList.value = await getProvinceList()
+  serviceTypesList.value = Object.keys(serviceTypes).map((item) => ({
+    value: item.toString(),
+    label: serviceTypes[item],
+  })) as any
+  registerMethodsList.value = Object.keys(registerMethods)
+    .filter((item) => ![''].includes(item))
+    .map((item) => ({
+      value: item.toString(),
+      label: registerMethods[item],
+    })) as any
+  accidentsList.value = Object.keys(trafficAccidents).map((item) => ({
+    value: item.toString(),
+    label: trafficAccidents[item],
+  })) as any
+  purposeOfVisitsList.value = Object.keys(purposeOfVisits).map((item) => ({
+    value: item.toString(),
+    label: purposeOfVisits[item],
+  })) as any
+  proceduresList.value = Object.keys(procedureTypes).map((item) => ({
+    value: item.toString(),
+    label: procedureTypes[item],
+  })) as any
+  assessmentsList.value = Object.keys(serviceAssessments).map((item) => ({
+    value: item.toString(),
+    label: `${item.toString()} - ${serviceAssessments[item]}`,
+  })) as any
+  supportCodesList.value = Object.keys(supportCodes).map((item) => ({
+    value: item.toString(),
+    label: `${item.toString()} - ${supportCodes[item]}`,
+  })) as any
+  classLevelsList.value = Object.keys(classLevels).map((item) => ({
+    value: item.toString(),
+    label: classLevels[item],
+  })) as any
+  classLevelUpgradesList.value = Object.keys(classLevelUpgrades).map((item) => ({
+    value: item.toString(),
+    label: classLevelUpgrades[item],
+  })) as any
+  classPaySourcesList.value = Object.keys(classPaySources).map((item) => ({
+    value: item.toString(),
+    label: classPaySources[item],
+  })) as any
+  await handleFetchSpecialists()
+  if (route.query) {
+    const queries = route.query as any
+    isServiceHidden.value = queries['is-service'] === 'true'
+    selectedObjects.value = {}
+    if (queries['resource']) resourceType.value = queries['resource']
+    if (queries['resource-path']) resourcePath.value = queries['resource-path']
+    if (queries['doctor-code']) selectedObjects.value['doctorCode'] = queries['doctor-code']
+    if (queries['specialist-code']) selectedObjects.value['subSpecialistCode'] = queries['specialist-code']
+    if (queries['sub-specialist-code']) selectedObjects.value['subSpecialistCode'] = queries['sub-specialist-code']
+    if (queries['card-number']) selectedObjects.value['cardNumber'] = queries['card-number']
+    if (queries['register-date']) selectedObjects.value['registerDate'] = queries['register-date']
+    if (queries['sep-type']) selectedObjects.value['sepType'] = queries['sep-type']
+    if (queries['sep-number']) selectedObjects.value['sepNumber'] = queries['sep-number']
+    if (queries['register-date']) selectedObjects.value['registerDate'] = queries['register-date']
+    if (queries['payment-type']) selectedObjects.value['paymentType'] = queries['payment-type']
+    if (queries['patient-id']) {
+      await getPatientInternalMappers(queries['patient-id'])
+    }
+    if (queries['card-number']) {
+      const resultMember = await getMemberList({
+        mode: 'by-card',
+        number: queries['card-number'],
+        date: new Date().toISOString().substring(0, 10),
+      })
+      console.log(resultMember)
+    }
+    delete selectedObjects.value['is-service']
+  }
+}
+
+onMounted(async () => {
+  await handleInit()
+})
 </script>
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-panel-bottom" class="me-2" />
-    <span class="font-semibold">Tambah</span> SEP
+    <Icon
+      name="i-lucide-panel-bottom"
+      class="me-2"
+    />
+    <span class="font-semibold">Tambah</span>
+    SEP
   </div>
-  <AppSepEntryForm @event="handleEvent" />
-  <AppSepTableSearchPatient
+  <AppSepEntryForm
+    :is-save-loading="isSaveLoading"
+    :is-service="isServiceHidden"
+    :doctors="doctors"
+    :diagnoses="diagnoses"
+    :facilities-from="facilitiesFrom"
+    :facilities-to="facilitiesTo"
+    :service-types="serviceTypesList"
+    :register-methods="registerMethodsList"
+    :accidents="accidentsList"
+    :purposes="purposeOfVisitsList"
+    :procedures="proceduresList"
+    :assessments="assessmentsList"
+    :support-codes="supportCodesList"
+    :provinces="provincesList"
+    :cities="citiesList"
+    :districts="districtsList"
+    :class-levels="classLevelsList"
+    :class-level-upgrades="classLevelUpgradesList"
+    :class-pay-sources="classPaySourcesList"
+    :specialists="specialistsTree"
+    :objects="selectedObjects"
+    @fetch="handleFetch"
+    @event="handleEvent"
+  />
+  <AppViewPatient
     v-model:open="openPatient"
     v-model:selected="selectedPatient"
     :patients="patients"
+    :pagination-meta="paginationMeta"
+    @fetch="
+      (value) => {
+        if (value.search && value.search.length >= 3) {
+          // Use identifier search for specific searches (NIK, RM, etc.)
+          getPatientByIdentifierSearch(value.search)
+        } else {
+          // Use regular search for general searches
+          getPatientsList({ ...value, 'page-size': 10, includes: 'person' })
+        }
+      }
+    "
     @save="handleSavePatient"
   />
-  <AppSepTableSearchLetter
-    v-model:open="openLetter"
-    v-model:selected="selectedLetter"
-    :letters="letters"
-    @save="handleSaveLetter"
-  />
-  <AppSepTableHistorySep
+  <AppViewHistory
     v-model:open="openHistory"
     :histories="histories"
   />
-
+  <AppViewLetter
+    v-model:open="openLetter"
+    :letters="letters"
+    :menu="selectedAdmissionType !== '3' ? 'control' : 'reference'"
+    :selected="selectedLetter"
+    :pagination-meta="{ recordCount: 0, page: 1, pageSize: 10, totalPage: 0 } as any"
+    @fetch="(value) => getLetterMappers(value.admissionType, value.search)"
+    @save="handleSaveLetter"
+  />
 </template>
diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index 9a6cd8db..013b076a 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// Components
 import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
@@ -9,10 +10,19 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '~/components/pub/ui/dropdown-menu'
+import AppSepList from '~/components/app/sep/list.vue'
+
+// Icons
 import { X, Check } from 'lucide-vue-next'
 
+// Types
+import type { VclaimSepData } from '~/models/vclaim'
+
+// Services
+import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
+
 const search = ref('')
-const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
+const dateRange = ref('12 Agustus 2025 - 31 Agustus 2025')
 const open = ref(false)
 
 const sepData = {
@@ -21,21 +31,6 @@ const sepData = {
   nama: 'Kenzie',
 }
 
-interface SepData {
-  tgl_sep: string
-  no_sep: string
-  pelayanan: string
-  jalur: string
-  no_rm: string
-  nama_pasien: string
-  no_kartu_bpjs: string
-  no_surat_kontrol: string
-  tgl_surat_kontrol: string
-  klinik_tujuan: string
-  dpjp: string
-  diagnosis_awal: string
-}
-
 const paginationMeta = reactive<PaginationMeta>({
   recordCount: 0,
   page: 1,
@@ -49,53 +44,7 @@ function handlePageChange(page: number) {
   console.log('pageChange', page)
 }
 
-const data = ref<SepData[]>([])
-
-// contoh data dummy
-const rows = [
-  {
-    tgl_sep: '12 Agustus 2025',
-    no_sep: 'SP23311224',
-    pelayanan: 'Rawat Jalan',
-    jalur: 'Kontrol',
-    no_rm: 'RM23311224',
-    nama_pasien: 'Ahmad Baidowi',
-    no_kartu_bpjs: '334423231214',
-    no_surat_kontrol: 'SK22334442',
-    tgl_surat_kontrol: '13 Agustus 2024',
-    klinik_tujuan: 'Penyakit dalam',
-    dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
-    diagnosis_awal: 'C34.9 - Karsinoma Paru',
-  },
-  {
-    tgl_sep: '12 Agustus 2025',
-    no_sep: 'SP23311224',
-    pelayanan: 'Rawat Jalan',
-    jalur: 'Kontrol',
-    no_rm: 'RM001234',
-    nama_pasien: 'Kenzie',
-    no_kartu_bpjs: '12301234',
-    no_surat_kontrol: '123456',
-    tgl_surat_kontrol: '10 Agustus 2024',
-    klinik_tujuan: 'Penyakit dalam',
-    dpjp: 'Dr. Andreas Sutaji',
-    diagnosis_awal: 'Bronchitis',
-  },
-  {
-    tgl_sep: '11 Agustus 2025',
-    no_sep: 'SP23455667',
-    pelayanan: 'Rawat Jalan',
-    jalur: 'Kontrol',
-    no_rm: 'RM001009',
-    nama_pasien: 'Abraham Sulaiman',
-    no_kartu_bpjs: '334235',
-    no_surat_kontrol: '123334',
-    tgl_surat_kontrol: '11 Agustus 2024',
-    klinik_tujuan: 'Penyakit dalam',
-    dpjp: 'Dr. Andreas Sutaji',
-    diagnosis_awal: 'Paru-paru basah',
-  },
-]
+const data = ref<VclaimSepData[]>([])
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -123,18 +72,64 @@ const headerPrep: HeaderPrep = {
   addNav: {
     label: 'Tambah',
     onClick: () => {
-      navigateTo('/bpjs/sep/add')
+      navigateTo('/integration/bpjs/sep/add')
     },
   },
 }
 
-async function getSepList() {
+async function getMonitoringVisitMappers() {
   isLoading.dataListLoading = true
-  data.value = [...rows]
+  data.value = []
+
+  const dateFirst = new Date()
+  const result = await geMonitoringVisitList({
+    date: dateFirst.toISOString().substring(0, 10),
+    serviceType: 1,
+  })
+
+  if (result && result.success && result.body) {
+    const visitsRaw = result.body?.response?.sep || []
+
+    if (!visitsRaw) {
+      isLoading.dataListLoading = false
+      return
+    }
+
+    visitsRaw.forEach((result: any) => {
+      // Format pelayanan: "R.Inap" -> "Rawat Inap", "1" -> "Rawat Jalan", dll
+      let serviceType = result.jnsPelayanan || '-'
+      if (serviceType === 'R.Inap') {
+        serviceType = 'Rawat Inap'
+      } else if (serviceType === '1' || serviceType === 'R.Jalan') {
+        serviceType = 'Rawat Jalan'
+      }
+
+      data.value.push({
+        letterDate: result.tglSep || '-',
+        letterNumber: result.noSep || '-',
+        serviceType: serviceType,
+        flow: '-',
+        medicalRecordNumber: '-',
+        patientName: result.nama || '-',
+        cardNumber: result.noKartu || '-',
+        controlLetterNumber: result.noRujukan || '-',
+        controlLetterDate: result.tglPlgSep || '-',
+        clinicDestination: result.poli || '-',
+        attendingDoctor: '-',
+        diagnosis: result.diagnosa || '-',
+        careClass: result.kelasRawat || '-',
+      })
+    })
+  }
+
   isLoading.dataListLoading = false
 }
 
-function exportCsv() {
+async function getSepList() {
+  await getMonitoringVisitMappers()
+}
+
+function exportCsv() {  
   console.log('Ekspor CSV dipilih')
   // tambahkan logic untuk generate CSV
 }
@@ -169,19 +164,29 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+  <div class="p-4">
     <Header :prep="{ ...headerPrep }" />
     <!-- Filter Bar -->
     <div class="my-2 flex flex-wrap items-center gap-2">
       <!-- Search -->
-      <Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
+      <Input
+        v-model="search"
+        placeholder="Cari No. SEP / No. Kartu BPJS..."
+        class="w-72"
+      />
 
       <!-- Date Range -->
       <Popover>
         <PopoverTrigger as-child>
-          <Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
+          <Button
+            variant="outline"
+            class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal"
+          >
             {{ dateRange }}
-            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+            <Icon
+              name="i-lucide-calendar"
+              class="h-5 w-5"
+            />
           </Button>
         </PopoverTrigger>
         <PopoverContent class="p-2">
@@ -196,24 +201,34 @@ provide('table_data_loader', isLoading)
             variant="outline"
             class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
           >
-            <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
+            <Icon
+              name="i-lucide-download"
+              class="h-5 w-5"
+            />
+            Ekspor
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent class="w-40">
-          <DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
-          <DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
+          <DropdownMenuItem @click="exportCsv">Ekspor CSV</DropdownMenuItem>
+          <DropdownMenuItem @click="exportExcel">Ekspor Excel</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
 
-    <div class="rounded-md border p-4">
-      <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
+    <div class="mt-4">
+      <AppSepList
+        v-if="!isLoading.dataListLoading"
+        :data="data"
+      />
     </div>
 
     <!-- Pagination -->
     <template v-if="paginationMeta">
       <div v-if="paginationMeta.totalPage > 1">
-        <PubMyUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+        <PubMyUiPagination
+          :pagination-meta="paginationMeta"
+          @page-change="handlePageChange"
+        />
       </div>
     </template>
 
@@ -226,9 +241,7 @@ provide('table_data_loader', isLoading)
           <DialogTitle>Hapus SEP</DialogTitle>
         </DialogHeader>
 
-        <DialogDescription class="text-gray-700">
-          Apakah anda yakin ingin menghapus SEP dengan data:
-        </DialogDescription>
+        <DialogDescription class="text-gray-700">Apakah anda yakin ingin menghapus SEP dengan data:</DialogDescription>
 
         <div class="mt-4 space-y-2 text-sm">
           <p>No. SEP : {{ sepData.no_sep }}</p>
@@ -237,11 +250,21 @@ provide('table_data_loader', isLoading)
         </div>
 
         <DialogFooter class="mt-6 flex justify-end gap-3">
-          <Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
-            <X class="mr-1 h-4 w-4" /> Tidak
+          <Button
+            variant="outline"
+            class="border-green-600 text-green-600 hover:bg-green-50"
+            @click="open = false"
+          >
+            <X class="mr-1 h-4 w-4" />
+            Tidak
           </Button>
-          <Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
-            <Check class="mr-1 h-4 w-4" /> Ya
+          <Button
+            variant="destructive"
+            class="bg-red-600 hover:bg-red-700"
+            @click="handleDelete"
+          >
+            <Check class="mr-1 h-4 w-4" />
+            Ya
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/app/components/content/soapi/entry.vue b/app/components/content/soapi/entry.vue
index 7b4ab9d4..ee3c7c32 100644
--- a/app/components/content/soapi/entry.vue
+++ b/app/components/content/soapi/entry.vue
@@ -11,7 +11,7 @@ import FunctionForm from './form-function.vue'
 const route = useRoute()
 const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
 
-const { mode, openForm, backToList } = useQueryMode('mode')
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
 
 const formMap = {
   'early-medical-assessment': EarlyForm,
@@ -26,7 +26,8 @@ const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
   <div>
     <SoapiList
       v-if="mode === 'list'"
-      @add="openForm"
+      @add="goToEntry"
+      @edit="goToEntry"
     />
 
     <component
diff --git a/app/components/content/soapi/form-function.vue b/app/components/content/soapi/form-function.vue
index ade9e4d1..9f281d86 100644
--- a/app/components/content/soapi/form-function.vue
+++ b/app/components/content/soapi/form-function.vue
@@ -2,14 +2,23 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.vue'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { FunctionSoapiSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+const { backToList } = useQueryMode('mode')
 
 const route = useRoute()
-const isOpen = ref(false)
-const data = ref([])
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const isOpenFungsional = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const fungsional = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const selectedFungsional = ref<any>(null)
 const schema = FunctionSoapiSchema
 const payload = ref({
   encounter_id: 0,
@@ -60,29 +69,55 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
   }
   isLoading.isTableLoading = false
 }
 
 onMounted(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
-function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+function handleClick(type: string) {
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  } else if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
 }
-
 const entryRehabRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
+    if (
+      selectedProcedure.value?.length > 0 ||
+      selectedDiagnose.value?.length > 0 ||
+      selectedFungsional.value?.length > 0
+    ) {
+      result.data.procedure = selectedProcedure.value || []
+      result.data.diagnose = selectedDiagnose.value || []
+      result.data.fungsional = selectedFungsional.value || []
+    }
     console.log('data', result.data)
     handleActionSave(
       {
@@ -99,7 +134,23 @@ async function actionHandler(type: string) {
   }
 }
 
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+    icdPreview.value.fungsional = selectedFungsional.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
 provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
 </script>
 <template>
   <Entry
@@ -107,17 +158,52 @@ provide('table_data_loader', isLoading)
     v-model="model"
     :schema="schema"
     type="function"
-    @modal="handleOpen"
+    @click="handleClick"
   />
   <div class="my-2 flex justify-end py-2">
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
+    v-model:open="isOpenProcedure"
     title="Pilih Prosedur"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedProcedure"
+      :data="procedures"
+    />
+
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Diagnosa"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenFungsional"
+    title="Pilih Fungsional"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedFungsional"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
   </Dialog>
 </template>
diff --git a/app/components/content/soapi/form-rehab.vue b/app/components/content/soapi/form-rehab.vue
index 655063f9..4130f562 100644
--- a/app/components/content/soapi/form-rehab.vue
+++ b/app/components/content/soapi/form-rehab.vue
@@ -2,14 +2,20 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.vue'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { EarlyRehabSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+const { backToList } = useQueryMode('mode')
 
 const route = useRoute()
-const isOpen = ref(false)
-const data = ref([])
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
 const schema = EarlyRehabSchema
 const payload = ref({
   encounter_id: 0,
@@ -65,29 +71,46 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
   }
   isLoading.isTableLoading = false
 }
 
 onMounted(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
 function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+  if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
 }
 
 const entryRehabRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
+    if (selectedDiagnose.value?.length > 0) {
+      result.data.diagnose = selectedDiagnose.value || []
+    }
     console.log('data', result.data)
     handleActionSave(
       {
@@ -104,7 +127,22 @@ async function actionHandler(type: string) {
   }
 }
 
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
 provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
 </script>
 <template>
   <Entry
@@ -112,17 +150,23 @@ provide('table_data_loader', isLoading)
     v-model="model"
     :schema="schema"
     type="early-rehab"
-    @modal="handleOpen"
+    @click="handleOpen"
   />
   <div class="my-2 flex justify-end py-2">
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
-    title="Pilih Prosedur"
+    v-model:open="isOpenDiagnose"
+    title="Pilih Fungsional"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
   </Dialog>
 </template>
diff --git a/app/components/content/soapi/form.vue b/app/components/content/soapi/form.vue
index 794daef9..c963a091 100644
--- a/app/components/content/soapi/form.vue
+++ b/app/components/content/soapi/form.vue
@@ -2,14 +2,20 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.vue'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { EarlySchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
+const { backToList } = useQueryMode('mode')
 const route = useRoute()
-const isOpen = ref(false)
-const data = ref([])
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
 const schema = EarlySchema
 const payload = ref({
   encounter_id: 0,
@@ -38,29 +44,50 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
   }
   isLoading.isTableLoading = false
 }
 
 onMounted(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
 function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  }
 }
 
 const entryRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
   const result = await entryRef.value?.validate()
   if (result?.valid) {
+    if (selectedProcedure.value?.length > 0 || selectedDiagnose.value?.length > 0) {
+      result.data.procedure = selectedProcedure.value || []
+      result.data.diagnose = selectedDiagnose.value || []
+    }
+
     console.log('data', result.data)
     handleActionSave(
       {
@@ -77,7 +104,22 @@ async function actionHandler(type: string) {
   }
 }
 
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
 provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
 </script>
 <template>
   <Entry
@@ -91,11 +133,32 @@ provide('table_data_loader', isLoading)
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
+    v-model:open="isOpenProcedure"
     title="Pilih Prosedur"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedProcedure"
+      :data="procedures"
+    />
+
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Diagnosa"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
   </Dialog>
 </template>
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
index a240a65f..5a960d5d 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -1,16 +1,41 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/soapi/list.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 
-const props = defineProps<{
-  label: string
-}>()
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
+import { handleActionRemove } from '~/handlers/soapi-early.handler'
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+  label: string
+}
+const route = useRoute()
+const props = defineProps<Props>()
 const emits = defineEmits(['add', 'edit'])
 
 const data = ref([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isLoading = ref(false)
+const isReadonly = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const paginationMeta = ref<PaginationMeta>(null)
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -24,13 +49,7 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+const typeCode = ref('')
 
 const hreaderPrep: HeaderPrep = {
   title: props.label,
@@ -41,15 +60,86 @@ const hreaderPrep: HeaderPrep = {
   },
 }
 
-async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
+const { recordId } = useQueryCRUDRecordId()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
+
+onMounted(async () => {
+  await getMyList()
+})
+
+async function getMyList() {
+  const url = `/api/v1/soapi?type-code=${typeCode.value}?includes=encounter`
+  const resp = await xfetch(url)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
 }
 
-onMounted(() => {
-  getPatientList()
+function handlePageChange(page: number) {
+  emits('pageChange', page)
+}
+
+function handleBack() {
+  recordId.value = ''
+  backToList()
+}
+
+watch(
+  () => type.value,
+  (val) => {
+    if (val) {
+      if (val === 'early-medical-assessment') {
+        typeCode.value = 'early-medic'
+      } else if (val === 'rehab-medical-assessment') {
+        typeCode.value = 'early-rehab'
+      } else if (val === 'function-assessment') {
+        typeCode.value = 'function'
+      }
+      getMyList()
+    }
+  },
+)
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      emits('edit')
+      isReadonly.value = false
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          mode: 'entry',
+          'record-id': recId.value,
+        },
+      })
+      break
+
+    case ActionEvents.showDetail:
+      emits('edit')
+      isReadonly.value = true
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          mode: 'entry',
+          'record-id': recId.value,
+        },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+
+    case ActionEvents.showAdd:
+      recordId.value = ''
+      goToEntry()
+      emits('add')
+      break
+  }
 })
 
 provide('rec_id', recId)
@@ -59,7 +149,39 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    :prep="{ ...hreaderPrep }"
+    :ref-search-nav="refSearchNav"
+  />
+  <List :data="data" />
 
-  <AssesmentFunctionList :data="data" />
+  <PaginationView
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/specialist-position/list.vue b/app/components/content/specialist-position/list.vue
new file mode 100644
index 00000000..1ebf697e
--- /dev/null
+++ b/app/components/content/specialist-position/list.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSpecialistPositionList from '~/components/app/specialist-position/list.vue'
+import AppSpecialistPositionEntryForm from '~/components/app/specialist-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/specialist-position/list.cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type SpecialistPositionFormData, SpecialistPositionSchema } from '~/schemas/specialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/specialist-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/specialist-position.service'
+import { getValueLabelList as getValueLabelSpecialistList } from '~/services/specialist.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const specialists = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'specialist,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'specialist-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Spesialis - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      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 getCurrentSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Detail Spesialis Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Edit Spesialis Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    specialists.value = await getValueLabelSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+  <AppSpecialistPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Spesialis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSpecialistPositionEntryForm
+      :schema="SpecialistPositionSchema"
+      :specialists="specialists"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSpecialistList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getSpecialistList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSpecialistList, 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/specialist/detail.vue b/app/components/content/specialist/detail.vue
new file mode 100644
index 00000000..df4e79b6
--- /dev/null
+++ b/app/components/content/specialist/detail.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Specialist } from '~/models/specialist'
+import { getDetail as getDetailSpecialist } from '~/services/specialist.service'
+
+// #region specialist positions
+import { config } from '~/components/app/specialist/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+// Types
+import { type SpecialistPositionFormData, SpecialistPositionSchema } from '~/schemas/specialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/specialist-position.handler'
+
+// Services
+import { getList, getDetail as getDetailSpecialistPosition } from '~/services/specialist-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  specialistId: number
+}>()
+const specialist = ref<Specialist>({} as Specialist)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    console.log(props.specialistId)
+    const result = await getList({
+      'specialist-id': props.specialistId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'specialist-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Spesialis',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailSpecialist(props.specialistId, {
+      includes: 'unit',
+    })
+    if (result.success) {
+      specialist.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailSpecialistPosition(recId.value)
+      title.value = 'Edit Posisi'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppSpecialistDetail :specialist="specialist" />
+  <div class="h-6"></div>
+
+  <AppSpecialistDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSpecialistPositionEntryDetail
+      :schema="SpecialistPositionSchema"
+      :specialist-id="specialistId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPositionList, 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/specialist/entry.ts b/app/components/content/specialist/entry.ts
deleted file mode 100644
index c89302c2..00000000
--- a/app/components/content/specialist/entry.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as z from 'zod'
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama spesialisasi harus diisi',
-    })
-    .min(3, 'Nama spesialisasi minimal 3 karakter'),
-
-  code: z
-    .string({
-      required_error: 'Kode spesialisasi harus diisi',
-    })
-    .min(3, 'Kode spesialisasi minimal 3 karakter'),
-
-  installationId: z
-    .string({
-      required_error: 'Instalasi harus dipilih',
-    })
-    .min(1, 'Instalasi harus dipilih'),
-
-  unitId: z
-    .string({
-      required_error: 'Unit harus dipilih',
-    })
-    .min(1, 'Unit harus dipilih'),
-})
-
-// Unit mapping berdasarkan installation
-export const installationUnitMapping: Record<string, string[]> = {
-  '1': ['1', '3', '5'],
-  '2': ['2', '4', '6'],
-  '3': ['7', '8', '9', '10', '11'],
-}
-
-export const unitConf = {
-  msg: {
-    placeholder: '---pilih unit',
-    search: 'kode, nama unit',
-    empty: 'unit tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Instalasi Medis', code: 'MED' },
-    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
-    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
-    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
-    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
-    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
-    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
-    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
-    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
-    { value: '10', label: 'Instalasi SDM', code: 'HR' },
-    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
-    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
-    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
-    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
-    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
-    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
-    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
-    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
-    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
-    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
-  ],
-}
-
-export const installationConf = {
-  msg: {
-    placeholder: '---pilih instalasi',
-    search: 'kode, nama instalasi',
-    empty: 'instalasi tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-  ],
-}
-
-// Helper function untuk filter unit berdasarkan installation
-export function getFilteredUnits(installationId: string) {
-  if (!installationId || !installationUnitMapping[installationId]) {
-    return []
-  }
-
-  const allowedUnitIds = installationUnitMapping[installationId]
-  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
-}
-
-// Helper function untuk membuat unit config yang ter-filter
-export function createFilteredUnitConf(installationId: string) {
-  return {
-    ...unitConf,
-    items: getFilteredUnits(installationId),
-  }
-}
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 9bbf755f..ca293026 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -103,9 +103,23 @@ const getCurrentSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentSpecialistDetail(recId.value)
-      title.value = 'Detail Spesialis'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-specialist-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentSpecialistDetail(recId.value)
diff --git a/app/components/content/subspecialist-position/list.vue b/app/components/content/subspecialist-position/list.vue
new file mode 100644
index 00000000..4c833ce2
--- /dev/null
+++ b/app/components/content/subspecialist-position/list.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSubSpecialistPositionList from '~/components/app/subspecialist-position/list.vue'
+import AppSubSpecialistPositionEntryForm from '~/components/app/subspecialist-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/subspecialist-position/list.cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import {
+  type SubSpecialistPositionFormData,
+  SubSpecialistPositionSchema,
+} from '~/schemas/subspecialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/subspecialist-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/subspecialist-position.service'
+import { getValueLabelList as getValueLabelSubSpecialistList } from '~/services/subspecialist.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const subSpecialists = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSubSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'subspecialist,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'subspecialist-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sub Spesialis - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      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 getCurrentSubSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  console.log(result)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Detail Sub Spesialis Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Edit Sub Spesialis Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    subSpecialists.value = await getValueLabelSubSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppSubSpecialistPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Sub Spesialis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSubSpecialistPositionEntryForm
+      :schema="SubSpecialistPositionSchema"
+      :sub-specialists="subSpecialists"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSubSpecialistList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getSubSpecialistList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSubSpecialistList, 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/subspecialist/detail.vue b/app/components/content/subspecialist/detail.vue
new file mode 100644
index 00000000..d432eb22
--- /dev/null
+++ b/app/components/content/subspecialist/detail.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Subspecialist } from '~/models/subspecialist'
+import { getDetail as getDetailSubSpecialist } from '~/services/subspecialist.service'
+
+// #region subspecialist positions
+import { config } from '~/components/app/subspecialist/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+// Types
+import {
+  type SubSpecialistPositionFormData,
+  SubSpecialistPositionSchema,
+} from '~/schemas/subspecialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/subspecialist-position.handler'
+
+// Services
+import { getList, getDetail as getDetailSubSpecialistPosition } from '~/services/subspecialist-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  subspecialistId: number
+}>()
+const subSpecialist = ref<Subspecialist>({} as Subspecialist)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    console.log(props.subspecialistId)
+    const result = await getList({
+      'subspecialist-id': props.subspecialistId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'subspecialist-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Sub Spesialis',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailSubSpecialist(props.subspecialistId, {
+      includes: 'specialist,specialist.Unit,specialist.Unit.Installation',
+    })
+    if (result.success) {
+      subSpecialist.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailSubSpecialistPosition(recId.value)
+      title.value = 'Edit Posisi'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppSubspecialistDetail :subspecialist="subSpecialist" />
+  <div class="h-6"></div>
+
+  <AppSubspecialistDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSubspecialistPositionEntryDetail
+      :schema="SubSpecialistPositionSchema"
+      :subspecialist-id="subspecialistId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPositionList, 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/subspecialist/entry.ts b/app/components/content/subspecialist/entry.ts
deleted file mode 100644
index 5a93847d..00000000
--- a/app/components/content/subspecialist/entry.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as z from 'zod'
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama spesialisasi harus diisi',
-    })
-    .min(3, 'Nama spesialisasi minimal 3 karakter'),
-
-  code: z
-    .string({
-      required_error: 'Kode spesialisasi harus diisi',
-    })
-    .min(3, 'Kode spesialisasi minimal 3 karakter'),
-
-  installationId: z
-    .string({
-      required_error: 'Instalasi harus dipilih',
-    })
-    .min(1, 'Instalasi harus dipilih'),
-
-  unitId: z
-    .string({
-      required_error: 'Unit harus dipilih',
-    })
-    .min(1, 'Unit harus dipilih'),
-  specialistId: z
-    .string({
-      required_error: 'Specialist harus dipilih',
-    })
-    .min(1, 'Specialist harus dipilih'),
-})
-
-// Unit mapping berdasarkan installation
-export const installationUnitMapping: Record<string, string[]> = {
-  '1': ['1', '3'],
-  '2': ['2', '3'],
-  '3': ['1', '2', '3'],
-}
-
-export const unitConf = {
-  msg: {
-    placeholder: '---pilih unit',
-    search: 'kode, nama unit',
-    empty: 'unit tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Instalasi Medis', code: 'MED' },
-    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
-    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
-  ],
-}
-
-export const specialistConf = {
-  msg: {
-    placeholder: '---pilih specialist',
-    search: 'kode, nama specialist',
-    empty: 'specialist tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Spesialis Jantung', code: 'CARD' },
-    { value: '2', label: 'Spesialis Mata', code: 'OPHT' },
-    { value: '3', label: 'Spesialis Bedah', code: 'SURG' },
-    { value: '4', label: 'Spesialis Anak', code: 'PEDI' },
-    { value: '5', label: 'Spesialis Kandungan', code: 'OBGY' },
-  ],
-}
-
-export const installationConf = {
-  msg: {
-    placeholder: '---pilih instalasi',
-    search: 'kode, nama instalasi',
-    empty: 'instalasi tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-  ],
-}
-
-// Helper function untuk filter unit berdasarkan installation
-export function getFilteredUnits(installationId: string) {
-  if (!installationId || !installationUnitMapping[installationId]) {
-    return []
-  }
-
-  const allowedUnitIds = installationUnitMapping[installationId]
-  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
-}
-
-// Helper function untuk membuat unit config yang ter-filter
-export function createFilteredUnitConf(installationId: string) {
-  return {
-    ...unitConf,
-    items: getFilteredUnits(installationId),
-  }
-}
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index e2c6db52..bb1b63f5 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -103,9 +103,23 @@ const getCurrentSubSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentSubSpecialistDetail(recId.value)
-      title.value = 'Detail Sub Spesialis'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-subspecialist-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentSubSpecialistDetail(recId.value)
diff --git a/app/components/content/unit-position/list.vue b/app/components/content/unit-position/list.vue
new file mode 100644
index 00000000..55ab3f29
--- /dev/null
+++ b/app/components/content/unit-position/list.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppUnitPositionList from '~/components/app/unit-position/list.vue'
+import AppUnitPositionEntryForm from '~/components/app/unit-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/unit-position/list.cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type UnitPositionFormData, UnitPositionSchema } from '~/schemas/unit-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/unit-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/unit-position.service'
+import { getValueLabelList as getValueLabelUnitList } from '~/services/unit.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const units = ref<{ value: string; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getListUnit,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'unit,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'unit-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      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 getCurrentUnitDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Detail Unit Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Edit Unit Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    units.value = await getValueLabelUnitList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppUnitPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Unit Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppUnitPositionEntryForm
+      :schema="UnitPositionSchema"
+      :units="units"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: UnitPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getListUnit, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getListUnit, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getListUnit, 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/unit/detail.vue b/app/components/content/unit/detail.vue
new file mode 100644
index 00000000..6c51624f
--- /dev/null
+++ b/app/components/content/unit/detail.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Unit } from '~/models/unit'
+import { getDetail as getDetailUnit } from '~/services/unit.service'
+
+// #region installtaion positions
+import { config } from '~/components/app/unit/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Types
+import { type UnitPositionFormData, UnitPositionSchema } from '~/schemas/unit-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/unit-position.handler'
+
+// Services
+import { getList, getDetail as getDetailUnitPosition } from '~/services/unit-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  unitId: number
+}>()
+const unit = ref<Unit>({} as Unit)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    console.log(props.unitId)
+    const result = await getList({
+      'unit-id': props.unitId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'unit-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Unit',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailUnit(props.unitId)
+    if (result.success) {
+      unit.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  console.log(recId, recAction)
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailUnitPosition(recId.value)
+      title.value = 'Edit Posisi'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppUnitDetail :unit="unit" />
+  <div class="h-6"></div>
+
+  <AppUnitDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppUnitPositionEntryDetail
+      :schema="UnitPositionSchema"
+      :unit-id="unitId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: UnitPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPositionList, 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/unit/entry.ts b/app/components/content/unit/entry.ts
deleted file mode 100644
index bf85a0ed..00000000
--- a/app/components/content/unit/entry.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as z from 'zod'
-
-export const unitConf = {
-  msg: {
-    placeholder: '--- pilih instalasi',
-    search: 'kode, nama instalasi',
-    empty: 'instalasi tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Instalasi Medis', code: 'MED' },
-    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
-    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
-    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
-    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
-    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
-    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
-    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
-    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
-    { value: '10', label: 'Instalasi SDM', code: 'HR' },
-    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
-    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
-    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
-    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
-    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
-    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
-    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
-    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
-    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
-    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
-  ],
-}
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama unit harus diisi',
-    })
-    .min(1, 'Nama unit harus diisi'),
-
-  code: z
-    .string({
-      required_error: 'Kode unit harus diisi',
-    })
-    .min(1, 'Kode unit harus diisi'),
-  parentId: z.preprocess(
-    (input: unknown) => {
-      if (typeof input === 'string') {
-        // Handle empty string case
-        if (input.trim() === '') {
-          return 0
-        }
-        return Number(input)
-      }
-
-      return input
-    },
-    z
-      .number({
-        required_error: 'Instalasi induk harus dipilih',
-      })
-      .refine((num) => num > 0, 'Instalasi induk harus dipilih'),
-  ),
-})
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 03edd231..34b647ef 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -103,9 +103,23 @@ const getCurrentUnitDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentUnitDetail(recId.value)
-      title.value = 'Detail Unit'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-unit-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentUnitDetail(recId.value)
diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index 4f51e42c..a14b2137 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-const navMenu = ref([])
+type NavGroup = {
+  heading?: string
+  items: any[]
+}
+
+const { getActiveRole } = useUserStore()
+
+const navMenu = ref<NavGroup[]>([])
 
 const teams: {
   name: string
@@ -12,7 +19,14 @@ const teams: {
     plan: 'Saiful Anwar Hospital',
   },
 ]
-const sidebar = {
+
+type Sidebar = {
+  collapsible: 'offcanvas' | 'icon' | 'none'
+  side: 'left' | 'right'
+  variant: 'sidebar' | 'floating' | 'inset'
+}
+
+const sidebar: Sidebar = {
   collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
   side: 'left', // 'left' | 'right'
   variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
@@ -29,18 +43,34 @@ onMounted(async () => {
   await setMenu()
 })
 
+async function setMenu() {
+  const activeRole = getActiveRole()
+  const activeRoleParts = activeRole ? activeRole.split('|') : []
+  const role = activeRoleParts[0]+(activeRoleParts.length > 1 ? `-${activeRoleParts[1]}` : '')
+  try {
+    const res = await fetch(`/side-menu-items/${role.toLowerCase()}.json`)
+    const rawMenu = await res.text()
+    navMenu.value = JSON.parse(rawMenu)
+  } catch (e) {
+    const res = await fetch(`/side-menu-items/blank.json`)
+    const rawMenu = await res.text()
+    navMenu.value = JSON.parse(rawMenu)
+  }
+}
+
 function resolveNavItemComponent(item: any): any {
   if ('children' in item) return resolveComponent('LayoutSidebarNavGroup')
 
   return resolveComponent('LayoutSidebarNavLink')
 }
 
-async function setMenu() {
-  const position_code = 'sys'
-  const res = await fetch(`/side-menu-items/${position_code}.json`)
-  const rawMenu = await res.text()
-  navMenu.value = JSON.parse(rawMenu)
-}
+watch(getActiveRole, async () => {
+  await setMenu()
+  // const activeRole = getActiveRole()
+  // const res = await fetch(`/side-menu-items/${activeRole}.json`)
+  // const rawMenu = await res.text()
+  // navMenu.value = JSON.parse(rawMenu)
+})
 </script>
 
 <template>
diff --git a/app/components/layout/SidebarNavFooter.vue b/app/components/layout/SidebarNavFooter.vue
index 68d8d9a2..2c1e942c 100644
--- a/app/components/layout/SidebarNavFooter.vue
+++ b/app/components/layout/SidebarNavFooter.vue
@@ -10,8 +10,8 @@ import { useSidebar } from '~/components/pub/ui/sidebar'
 // }>()
 
 const { isMobile } = useSidebar()
-const { logout } = useUserStore()
-const userStore = useUserStore().user
+const { user, logout, setActiveRole, getActiveRole } = useUserStore()
+// const userStore = useUserStore().user
 
 function handleLogout() {
   navigateTo('/auth/login')
@@ -32,19 +32,19 @@ const showModalTheme = ref(false)
               class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar class="h-8 w-8 rounded-lg">
-                <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                <AvatarImage src="" :alt="user.user_name || 'system'" />
                 <AvatarFallback class="rounded-lg">
                   {{
-                    userStore?.user_name
+                    user.user_name
                       ?.split(' ')
-                      .map((n) => n[0])
+                      .map((n: string) => n[0])
                       .join('') || ''
                   }}
                 </AvatarFallback>
               </Avatar>
               <div class="grid flex-1 text-left text-sm leading-tight">
-                <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
-                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
+                <span class="truncate text-xs">{{ user.user_email || '' }}</span>
               </div>
               <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
             </SidebarMenuButton>
@@ -52,35 +52,40 @@ const showModalTheme = ref(false)
           <DropdownMenuContent
             class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg bg-white"
             :side="isMobile ? 'bottom' : 'right'"
-            align="end"
+            :align="'end'"
           >
             <DropdownMenuLabel class="p-0 font-normal">
               <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar class="h-8 w-8 rounded-lg">
-                  <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                  <AvatarImage src="" :alt="user.user_name || 'system'" />
                   <AvatarFallback class="rounded-lg">
                     {{
-                      userStore?.user_name
+                      user.user_name
                         ?.split(' ')
-                        .map((n) => n[0])
+                        .map((n: string) => n[0])
                         .join('') || ''
                     }}
                   </AvatarFallback>
                 </Avatar>
                 <div class="grid flex-1 text-left text-sm leading-tight">
-                  <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
-                  <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                  <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
+                  <span class="truncate text-xs">{{ user.user_email || '' }}</span>
                 </div>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
+            <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
+              <Icon name="i-lucide-user" />
+              Profile
+            </DropdownMenuItem>
+            <template v-if="user.roles.length > 1">
+              <DropdownMenuSeparator />
+              <DropdownMenuItem v-for="role in user.roles" class="hover:bg-gray-100" @click="setActiveRole(role)">
                 <Icon name="i-lucide-user" />
-                Profile
+                {{ role }}
+                <Icon name="i-lucide-check" class="ml-auto" v-if="getActiveRole() === role" />
               </DropdownMenuItem>
-            </DropdownMenuGroup>
+            </template>
             <DropdownMenuSeparator />
             <DropdownMenuItem class="hover:bg-gray-100" @click="handleLogout">
               <Icon name="i-lucide-log-out" />
diff --git a/app/components/pub/my-ui/alert/warning-alert.vue b/app/components/pub/my-ui/alert/warning-alert.vue
new file mode 100644
index 00000000..afdbe7ae
--- /dev/null
+++ b/app/components/pub/my-ui/alert/warning-alert.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils';
+
+const props = withDefaults(defineProps<{
+  text?: string
+  description?: string | string[]
+  class?: string
+}>(), {
+
+})
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-4 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
+        props.class
+    )">
+        <Icon name="i-lucide-triangle-alert" class="h-12 w-12 align-middle transition-colors" />
+        <div class="">
+            <p class="font-medium text-base">{{text}}</p>
+            <ul class="list-disc list-inside">
+                <li v-for="(desc, index) in (Array.isArray(description) ? description : [description])" :key="index">
+                    {{ desc }}
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/badge/status-badge.vue b/app/components/pub/my-ui/badge/status-badge.vue
new file mode 100644
index 00000000..ba8a7ea6
--- /dev/null
+++ b/app/components/pub/my-ui/badge/status-badge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+import { activeStatusCodes } from '~/lib/constants';
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusText = computed(() => {
+  const code: keyof typeof activeStatusCodes = props.rec.status_code === 1 ? `active` : `inactive`
+  return activeStatusCodes[code]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index 23505393..713edd57 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -16,22 +16,23 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'update:modelValue': [value: string]
+  'update:searchText': [value: string]
 }>()
 
 const open = ref(false)
-
+const searchText = ref('')
+const debouncedSearchText = refDebounced(searchText, 500) // 500ms debounce
 const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
 
 const displayText = computed(() => {
-  console.log(selectedItem)
   if (selectedItem.value?.label) {
     return selectedItem.value.label
   }
   return props.placeholder || 'Pilih item'
 })
 
-watch(props, () => {
-  console.log(props.modelValue)
+watch(debouncedSearchText, (newValue) => {
+  emit('update:searchText', newValue)
 })
 
 const searchableItems = computed(() => {
@@ -106,6 +107,11 @@ function onSelect(item: Item) {
           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}`"
+          @input="
+            (evt: any) => {
+              searchText = evt?.target?.value || ''
+            }
+          "
         />
         <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
           {{ emptyMessage || 'Item tidak ditemukan.' }}
diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
index 82a3b3cd..e4864f7f 100644
--- a/app/components/pub/my-ui/combobox/index.ts
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -20,4 +20,17 @@ export function recStrToItem(input: Record<string, string>): Item[] {
   return items
 }
 
+export function objectsToItems(input: object[], key = 'id', label = 'name'): Item[] {
+  const items: Item[] = []
+  for (const item of input) {
+    if (item.hasOwnProperty(key) && item.hasOwnProperty(label)) {
+      items.push({
+        value: item[key as keyof typeof item], // the hasOwnProperty check should be enough
+        label: item[label as keyof typeof item], // the hasOwnProperty check should be enough
+      })
+    }
+  }
+  return items
+}
+
 export { default as Combobox } from './combobox.vue'
diff --git a/app/components/pub/my-ui/comp-tab/comp-tab.vue b/app/components/pub/my-ui/comp-tab/comp-tab.vue
index de045bce..69a47ef2 100644
--- a/app/components/pub/my-ui/comp-tab/comp-tab.vue
+++ b/app/components/pub/my-ui/comp-tab/comp-tab.vue
@@ -12,14 +12,14 @@ const emit = defineEmits<{
 }>()
 
 function changeTab(value: string) {
-  activeTab.value = value;
-  emit('changeTab', value);
+  activeTab.value = value
+  emit('changeTab', value)
 }
 </script>
 
 <template>
   <!-- Tabs -->
-  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
     <Button
       v-for="tab in data"
       :key="tab.value"
@@ -34,10 +34,12 @@ function changeTab(value: string) {
   <!-- Active Tab Content -->
   <div class="mt-4 rounded-md border p-4">
     <component
-      v-if="data.find((t) => t.value === activeTab)?.component"
       :is="data.find((t) => t.value === activeTab)?.component"
-      :label="data.find((t) => t.value === activeTab)?.label"
-      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+      v-bind="data.find((t) => t.value === activeTab)?.props"
     />
+    <!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- :is="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
+    <!-- :label="data.find((t) => t.value === activeTab)?.label" -->
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/pub/my-ui/comp-tab/type.ts b/app/components/pub/my-ui/comp-tab/type.ts
index e6faacce..ba21d0b7 100644
--- a/app/components/pub/my-ui/comp-tab/type.ts
+++ b/app/components/pub/my-ui/comp-tab/type.ts
@@ -2,5 +2,6 @@ export interface TabItem {
   value: string
   label: string
   component?: any
+  groups?: string[]
   props?: Record<string, any>
 }
diff --git a/app/components/pub/my-ui/confirmation/confirmation.vue b/app/components/pub/my-ui/confirmation/confirmation.vue
index 590f328d..b5c328aa 100644
--- a/app/components/pub/my-ui/confirmation/confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/confirmation.vue
@@ -71,7 +71,7 @@ function handleCancel() {
   <Dialog v-model:open="isOpen" :title="title" :size="size">
     <div class="space-y-4">
       <!-- Icon dan pesan -->
-      <div class="flex items-start gap-3">
+      <div class="flex items-center gap-3">
         <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
         <div class="flex-1">
           <p class="text-sm text-muted-foreground leading-relaxed">
diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index 9d88ffee..431df276 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isRef } from 'vue';
+import { isRef } from 'vue'
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -19,14 +19,21 @@ const loader = inject('table_data_loader') as DataTableLoader
 // local state utk selection
 const selected = ref<any[]>([])
 
-function toggleSelection(row: any) {
-  if (props.selectMode === 'single') {
+function toggleSelection(row: any, event?: Event) {
+  if (event) event.stopPropagation() // cegah event bubble ke TableRow
+
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
+
+  // gunakan pembanding berdasarkan id atau stringify data
+  const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
+
+  if (!isMultiple) {
+    // mode single
     selected.value = [row]
     emit('update:modelValue', row)
   } else {
-    const idx = selected.value.findIndex((r) => r === row)
-    if (idx >= 0) {
-      selected.value.splice(idx, 1)
+    if (findIndex >= 0) {
+      selected.value.splice(findIndex, 1)
     } else {
       selected.value.push(row)
     }
@@ -35,23 +42,22 @@ function toggleSelection(row: any) {
 }
 
 function deepFetch(data: Record<string, any>, key: string): string {
-  let result = '';
+  let result = ''
   const keys = key.split('.')
-  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
   for (let i = 0; i < keys.length; i++) {
     let idx = keys[i] || ''
     if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
       if (i == keys.length - 1) {
-        return lastVal[idx];
+        return lastVal[idx]
       } else {
-        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+        lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
       }
     }
   }
-  return result;
+  return result
 }
 
-
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -70,7 +76,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
+    <TableHeader
+      v-if="headers"
+      class="bg-gray-50 dark:bg-gray-800"
+    >
       <TableRow v-for="(hr, hrIdx) in headers">
         <TableHead
           v-for="(th, idx) in headers[hrIdx]"
@@ -85,15 +94,25 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
     <TableBody v-if="loader?.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
+      <TableRow
+        v-for="n in getSkeletonSize"
+        :key="`skeleton-${n}`"
+      >
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-skel-${n}-${cellIndex}`"
+          class="border"
+        >
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground dark:bg-gray-700" />
         </TableCell>
       </TableRow>
     </TableBody>
     <TableBody v-else-if="rows.length === 0">
       <TableRow>
-        <TableCell :colspan="keys.length" class="py-8 text-center">
+        <TableCell
+          :colspan="keys.length"
+          class="py-8 text-center"
+        >
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />
             <span class="ml-2">Tidak ada data tersedia</span>
@@ -106,8 +125,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
         v-for="(row, rowIndex) in rows"
         :key="`row-${rowIndex}`"
         :class="{
-          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
-          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
+          'bg-green-50':
+            props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
+          'bg-blue-50':
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
+            selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"
       >
@@ -116,14 +138,23 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           <input
             v-if="props.selectMode === 'single'"
             type="radio"
-            :checked="selected.includes(row)"
-            @change="toggleSelection(row)"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
+          />
+          <input
+            v-else
+            type="checkbox"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
           />
-          <input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
         </TableCell>
 
         <!-- lanjut render cell normal -->
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+        >
           <!-- existing cell renderer -->
           <component
             :is="components?.[key]?.(row, rowIndex).component"
@@ -133,9 +164,12 @@ function handleActionCellClick(event: Event, _cellRef: string) {
             v-bind="components[key]?.(row, rowIndex).props"
           />
           <template v-else>
-            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
+            <div
+              v-if="htmls?.[key]"
+              v-html="htmls?.[key]?.(row, rowIndex)"
+            ></div>
             <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch(row as any, key) }}
             </template>
           </template>
         </TableCell>
diff --git a/app/components/pub/my-ui/data/dropdown-action-dud.vue b/app/components/pub/my-ui/data/dropdown-action-dud.vue
index 71979c7c..dfcf1ada 100644
--- a/app/components/pub/my-ui/data/dropdown-action-dud.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-dud.vue
@@ -2,9 +2,14 @@
 import type { LinkItem, ListItemDto } from './types'
 import { ActionEvents } from './types'
 
-const props = defineProps<{
+interface Props {
   rec: ListItemDto
-}>()
+  size?: 'default' | 'sm' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})
 
 const recId = inject<Ref<number>>('rec_id')!
 const recAction = inject<Ref<string>>('rec_action')!
@@ -58,7 +63,7 @@ function del() {
     <DropdownMenu>
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
-          size="lg"
+          :size="size"
           class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
         >
           <Icon
diff --git a/app/components/pub/my-ui/data/select-radio.vue b/app/components/pub/my-ui/data/select-radio.vue
new file mode 100644
index 00000000..9163c9d3
--- /dev/null
+++ b/app/components/pub/my-ui/data/select-radio.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, inject, type Ref } from 'vue'
+// Components
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  rec: { id: string; name: string; menu: string }
+  selected?: string
+}>()
+
+const emit = defineEmits<{
+  // No emits needed - using provide/inject
+}>()
+
+const record = props.rec || {}
+const recId = inject('rec_select_id') as Ref<number>
+const recMenu = inject('rec_select_menu') as Ref<string>
+const selected = computed(() => recId.value === Number(record.id) ? record.id : '')
+
+function handleSelection(value: string) {
+  if (value === record.id) {
+    recId.value = Number(record.id) || 0
+    recMenu.value = record.menu || ''
+  }
+}
+</script>
+
+<template>
+  <RadioGroup
+    :model-value="selected"
+    @update:model-value="handleSelection"
+  >
+    <RadioGroupItem
+      :id="record.id"
+      :value="record.id"
+    />
+  </RadioGroup>
+</template>
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index c86e1752..f949d1e5 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -8,6 +8,7 @@ export interface ListItemDto {
 }
 
 export type ComponentType = Component
+export type ComponentWithProps = { component: Component, props: Record<string, any> }
 
 export interface ButtonNav {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
@@ -41,17 +42,23 @@ export interface RefSearchNav {
   onClear: () => void
 }
 
+export interface RefExportNav {
+  onExportPdf?: () => void
+  onExportCsv?: () => void
+  onExportExcel?: () => void
+}
+
 // prepared header for relatively common usage
 export interface HeaderPrep {
   title?: string
   icon?: string
+  components?: ComponentWithProps[]
   refSearchNav?: RefSearchNav
   quickSearchNav?: QuickSearchNav
   filterNav?: ButtonNav
   addNav?: ButtonNav
   printNav?: ButtonNav
 }
-
 export interface KeyLabel {
   key: string
   label: string
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
index e38e12fa..a84c8edb 100644
--- a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
@@ -6,6 +6,7 @@ const props = defineProps<{
   class?: string
 }>()
 
+const enableDraft = props.enableDraft ?? true
 const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
 const additionalClass = props.class ?? ''
 const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
diff --git a/app/components/pub/my-ui/nav-footer/ba.vue b/app/components/pub/my-ui/nav-footer/ba.vue
new file mode 100644
index 00000000..2b8e7767
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+function onClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button
+      class="bg-gray-400"
+      type="button"
+      @click="onClick"
+    >
+      <Icon
+        name="i-lucide-arrow-left"
+        class="me-2 align-middle"
+      />
+      Back
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ok.vue b/app/components/pub/my-ui/nav-footer/ok.vue
new file mode 100644
index 00000000..da2f69ea
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ok.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'ok'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button type="button" @click="onClick('ok')">
+        <Icon name="i-lucide-x"  />
+        OK
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-header/filter-dialog.vue b/app/components/pub/my-ui/nav-header/filter-dialog.vue
new file mode 100644
index 00000000..c0d5b854
--- /dev/null
+++ b/app/components/pub/my-ui/nav-header/filter-dialog.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
+}>()
+
+// function emitSearchNavClick() {
+//   props.refSearchNav?.onClick()
+// }
+//
+// function onInput(event: Event) {
+//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+// }
+//
+// function btnClick() {
+//   props.prep?.addNav?.onClick?.()
+// }
+
+const searchQuery = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+
+function onFilterClick() {
+  console.log('Search:', searchQuery.value)
+  console.log('Date Range:', dateRange.value)
+  props.refSearchNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
+      
+      <Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
+        <FilterIcon class="mr-2 size-4" />
+        Filter
+      </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
index 01b1ab55..74f6d8dc 100644
--- a/app/components/pub/my-ui/nav-header/filter.vue
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -5,11 +5,13 @@ import type { Ref } from 'vue'
 import type { DateRange } from 'radix-vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { cn } from '~/lib/utils'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
   prep: HeaderPrep
   refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
 }>()
 
 // function emitSearchNavClick() {
@@ -34,9 +36,18 @@ const df = new DateFormatter('en-US', {
   dateStyle: 'medium',
 })
 
+// Get current date
+const today = new Date()
+const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())
+
+// Get date 1 month ago
+const oneMonthAgo = new Date(today)
+oneMonthAgo.setMonth(today.getMonth() - 1)
+const oneMonthAgoCalendar = new CalendarDate(oneMonthAgo.getFullYear(), oneMonthAgo.getMonth() + 1, oneMonthAgo.getDate())
+
 const value = ref({
-  start: new CalendarDate(2022, 1, 20),
-  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+  start: oneMonthAgoCalendar,
+  end: todayCalendar,
 }) as Ref<DateRange>
 
 function onFilterClick() {
@@ -48,7 +59,7 @@ function onFilterClick() {
 
 <template>
   <header>
-    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
+    <div class="flex items-center gap-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" />
@@ -88,6 +99,30 @@ function onFilterClick() {
         <FilterIcon class="mr-2 size-4" />
         Filter
       </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
     </div>
   </header>
 </template>
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index 63535847..7aa5e4f2 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -30,15 +30,24 @@ function btnClick() {
       <div class="flex items-center">
         <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
           <Icon
-            :name="props.prep.icon!"
+            :name="prep.icon!"
             class="mr-2 align-middle md:size-6"
           />
-          {{ props.prep.title }}
+          {{ prep.title }}
         </div>
       </div>
       <div class="flex items-center">
+        <div v-if="prep.components">
+          <template v-for="cwp in prep.components">
+            <component
+              :is="cwp.component"
+              class="mr-2"
+              v-bind="cwp.props"
+            />
+          </template>
+        </div>
         <div
-          v-if="props.refSearchNav"
+          v-if="refSearchNav"
           class="text-lg text-gray-900"
         >
           <Input
diff --git a/app/components/pub/my-ui/pagination/pagination-view.vue b/app/components/pub/my-ui/pagination/pagination-view.vue
index 149d425e..8a2271b4 100644
--- a/app/components/pub/my-ui/pagination/pagination-view.vue
+++ b/app/components/pub/my-ui/pagination/pagination-view.vue
@@ -4,6 +4,10 @@ import Pagination from './pagination.vue'
 
 const props = defineProps<{
   paginationMeta: PaginationMeta
+  conf?: {
+    showInfo: boolean
+    showControl: boolean
+  }
 }>()
 
 const emit = defineEmits<{
@@ -17,8 +21,10 @@ function handlePageChange(page: number) {
 
 <template>
   <Pagination
-  v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
-  :pagination-meta="paginationMeta"
-  @page-change="handlePageChange"
+    v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
+    :pagination-meta="paginationMeta"
+    :show-info="conf?.showInfo"
+    :show-control="conf?.showControl"
+    @page-change="handlePageChange"
   />
 </template>
diff --git a/app/components/pub/my-ui/pagination/pagination.vue b/app/components/pub/my-ui/pagination/pagination.vue
index 4ba0da5f..9b1618c3 100644
--- a/app/components/pub/my-ui/pagination/pagination.vue
+++ b/app/components/pub/my-ui/pagination/pagination.vue
@@ -15,11 +15,13 @@ interface Props {
   paginationMeta: PaginationMeta
   onPageChange?: (page: number) => void
   showInfo?: boolean
+  showControl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   onPageChange: undefined,
   showInfo: true,
+  showControl: true,
 })
 
 const emit = defineEmits<{
@@ -65,7 +67,7 @@ const formattedRecordCount = computed(() => {
 })
 
 const startRecord = computed(() => {
-  const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+  const start = (props.paginationMeta.page - 1) * props.paginationMeta.pageSize + 1
   return Number(start).toLocaleString('id-ID')
 })
 
@@ -77,53 +79,95 @@ const endRecord = computed(() => {
 function getButtonClass(pageNumber: number) {
   const digits = pageNumber.toString().length
 
-  if (digits >= 4) { // 1000+ (1k+)
+  if (digits >= 4) {
+    // 1000+ (1k+)
     return 'h-9 px-4 min-w-12'
-  } else if (digits === 3) { // 100-999
+  } else if (digits === 3) {
+    // 100-999
     return 'h-9 px-3 min-w-10'
-  } else { // 1-99
+  } else {
+    // 1-99
     return 'w-9 h-9 p-0'
   }
 }
 </script>
 
 <template>
-  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
+  <div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
     <!-- Info text -->
-    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
-      Menampilkan {{ startRecord }}
-      hingga {{ Number(endRecord).toLocaleString('id-ID') }}
-      dari {{ formattedRecordCount }} data
+    <div
+      v-if="showInfo && endRecord > 0"
+      class="shrink-0 text-sm text-muted-foreground"
+    >
+      Menampilkan {{ startRecord }} hingga {{ Number(endRecord).toLocaleString('id-ID') }} dari
+      {{ formattedRecordCount }} data
+    </div>
+    <div
+      v-else
+      class="shrink-0"
+    >
+      -
     </div>
-    <div v-else class="shrink-0">-</div>
 
     <!-- Spacer untuk memastikan ada ruang di tengah -->
-    <div class="flex-1 min-w-4"></div>
+    <div class="min-w-4 flex-1"></div>
 
     <!-- Pagination controls -->
-    <div class="shrink-0">
+    <div
+      v-if="showControl"
+      class="shrink-0"
+    >
       <Pagination
-v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
-        :items-per-page="paginationMeta.pageSize" show-edges
->
-        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
-          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+        v-slot="{ page }"
+        :total="paginationMeta.recordCount"
+        :sibling-count="1"
+        :page="paginationMeta.page"
+        :items-per-page="paginationMeta.pageSize"
+        show-edges
+      >
+        <PaginationList
+          v-slot="{ items }"
+          class="flex items-center gap-1"
+        >
+          <PaginationFirst
+            :disabled="!paginationMeta.hasPrev"
+            @click="handleFirst"
+          />
+          <PaginationPrev
+            :disabled="!paginationMeta.hasPrev"
+            @click="handlePrev"
+          />
 
           <template v-for="(item, index) in items">
             <PaginationListItem
-v-if="item.type === 'page'" :key="index" :value="item.value" as-child
+              v-if="item.type === 'page'"
+              :key="index"
+              :value="item.value"
+              as-child
               @click="handlePageChange(item.value)"
->
-              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
+            >
+              <Button
+                :class="getButtonClass(item.value)"
+                :variant="item.value === page ? 'default' : 'outline'"
+              >
                 {{ item.value }}
               </Button>
             </PaginationListItem>
-            <PaginationEllipsis v-else :key="item.type" :index="index" />
+            <PaginationEllipsis
+              v-else
+              :key="item.type"
+              :index="index"
+            />
           </template>
 
-          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
-          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+          <PaginationNext
+            :disabled="!paginationMeta.hasNext"
+            @click="handleNext"
+          />
+          <PaginationLast
+            :disabled="!paginationMeta.hasNext"
+            @click="handleLast"
+          />
         </PaginationList>
       </Pagination>
     </div>
diff --git a/app/components/pub/my-ui/toggle/provided-toggle.vue b/app/components/pub/my-ui/toggle/provided-toggle.vue
new file mode 100644
index 00000000..f028118c
--- /dev/null
+++ b/app/components/pub/my-ui/toggle/provided-toggle.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, inject } from "vue"
+// import Toggle from '~/components/pub/ui/toggle/Toggle.vue'
+
+const props = defineProps<{
+  label: string,
+  providedKey?: string,
+  variant?: 'default' | 'outline' | null | undefined
+}>()
+
+const model = defineModel<boolean>()
+const provideKey = props.providedKey || 'toggle-provide'
+const { updateProvidedVal }  = inject(provideKey)
+
+watch(model, (newVal) => {
+  updateProvidedVal(newVal)
+})
+</script>
+
+<template>
+  <Button
+    @click="() => model = !model"
+    :variant="model ? 'default' : 'outline'"
+  >
+    {{ label }}
+  </Button>
+  <!-- <Toggle
+    v-model="xval"
+    :variant="variant ?? 'default'"
+    :aria-label="label"
+  >
+  </Toggle> -->
+  <!-- {{ xval }} -->
+</template>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index c4063089..43c75876 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'md:h8 2xl:h-9 px-4 py-2',
+        default: 'md:h-8 2xl:h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
diff --git a/app/components/pub/ui/toggle/index.ts b/app/components/pub/ui/toggle/index.ts
index 07acae50..9486e903 100644
--- a/app/components/pub/ui/toggle/index.ts
+++ b/app/components/pub/ui/toggle/index.ts
@@ -4,16 +4,16 @@ import { cva } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center rounded-md text-xs 2xl:text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
   {
     variants: {
       variant: {
         default: 'bg-transparent',
         outline:
-          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-slate-300 bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-9 px-3',
+        default: 'md:h-8 2xl:h-9 px-3',
         sm: 'h-8 px-2',
         lg: 'h-10 px-3',
       },
diff --git a/app/handlers/control-letter.handler.ts b/app/handlers/control-letter.handler.ts
new file mode 100644
index 00000000..b096a178
--- /dev/null
+++ b/app/handlers/control-letter.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/control-letter.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/installation-position.handler.ts b/app/handlers/installation-position.handler.ts
new file mode 100644
index 00000000..e3cfcf38
--- /dev/null
+++ b/app/handlers/installation-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/installation-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/mcu-order-item.handler.ts b/app/handlers/mcu-order-item.handler.ts
new file mode 100644
index 00000000..62e1861e
--- /dev/null
+++ b/app/handlers/mcu-order-item.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/mcu-order.handler.ts b/app/handlers/mcu-order.handler.ts
new file mode 100644
index 00000000..4b114dfc
--- /dev/null
+++ b/app/handlers/mcu-order.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/mcu-order.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/mcu-src-category.handler.ts b/app/handlers/mcu-src-category.handler.ts
new file mode 100644
index 00000000..8369666b
--- /dev/null
+++ b/app/handlers/mcu-src-category.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/mcu-src-category.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
index f87eaf71..198b3a22 100644
--- a/app/handlers/patient.handler.ts
+++ b/app/handlers/patient.handler.ts
@@ -1,8 +1,128 @@
 // Handlers
 import { genCrudHandler } from '~/handlers/_handler'
 
+// Types
+import type { PatientEntity } from '~/models/patient'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
 // Services
-import { postPatient as create, patchPatient as update, removePatient as remove } from '~/services/patient.service'
+import {
+  postPatient as create,
+  patchPatient as update,
+  removePatient as remove,
+  getPatientDetail,
+  getPatients,
+  getPatientByIdentifier,
+} from '~/services/patient.service'
+
+const isPatientsLoading = ref(false)
+const patients = ref<Array<{ id: string; identity: string; number: string; bpjs: string; name: string }>>([])
+const selectedPatient = ref<string>('')
+const selectedPatientObject = ref<PatientEntity | null>(null)
+const paginationMeta = ref<PaginationMeta>({
+  recordCount: 0,
+  page: 1,
+  pageSize: 10,
+  totalPage: 5,
+  hasNext: false,
+  hasPrev: false,
+})
+
+function mapPatientToRow(patient: PatientEntity) {
+  const identity = patient?.person?.residentIdentityNumber || '-'
+  const number = patient?.number || '-'
+  const bpjs = '-'
+  const name = patient?.person?.name || '-'
+  return { id: patient.id ? String(patient.id) : '-', identity, number, bpjs, name }
+}
+
+function mapPaginationMetaToRow(meta: any) {
+  const recordCount = meta['record_totalCount'] ? Number(meta['record_totalCount']) : 0
+  const currentCount = meta['record_currentCount'] ? Number(meta['record_currentCount']) : 0
+  const page = meta['page_number'] ? Number(meta['page_number']) : 1
+  const pageSize = meta['page_size'] ? Number(meta['page_size']) : 10
+  const totalPage = Math.ceil(recordCount / pageSize)
+
+  return {
+    recordCount,
+    page,
+    pageSize,
+    totalPage,
+    hasNext: currentCount < recordCount && page < totalPage,
+    hasPrev: page > 1,
+  }
+}
+
+async function getPatientsList(params: any = { 'page-size': 10 }) {
+  try {
+    isPatientsLoading.value = true
+    patients.value = []
+    paginationMeta.value = {} as PaginationMeta
+    const result = await getPatients(params)
+    if (result && result.success && result.body && Array.isArray(result.body.data)) {
+      const meta = result.body.meta
+      patients.value = result.body.data.map(mapPatientToRow)
+      paginationMeta.value = mapPaginationMetaToRow(meta)
+    } else {
+      patients.value = [] // fallback to empty array
+    }
+  } catch (err) {
+    console.error('Failed to fetch patients for SEP search:', err)
+    patients.value = []
+  } finally {
+    isPatientsLoading.value = false
+  }
+}
+
+async function getPatientCurrent(id: string) {
+  try {
+    const result = await getPatientDetail(Number(id))
+    if (result && result.success && result.body && result.body.data) {
+      const patient = result.body.data || null
+      selectedPatientObject.value = patient
+    }
+  } catch (err) {
+    console.error('Failed to fetch patient:', err)
+  }
+}
+
+async function getPatientByIdentifierSearch(search: string) {
+  try {
+    isPatientsLoading.value = true
+    patients.value = []
+    paginationMeta.value = {} as PaginationMeta
+    const result = await getPatientByIdentifier(search)
+    if (result && result.success && result.body) {
+      if (result.type === 'resident-identity' && result.body.data) {
+        patients.value = [mapPatientToRow(result.body.data)]
+      } else if (result.type === 'identity') {
+        patients.value = Array.isArray(result.body.data) ? result.body.data.map(mapPatientToRow) : result.body.data ? [mapPatientToRow(result.body.data)] : []
+      } else {
+        const meta = result.body.meta
+        patients.value = Array.isArray(result.body.data) ? result.body.data.map(mapPatientToRow) : result.body.data ? [mapPatientToRow(result.body.data)] : []
+        paginationMeta.value = mapPaginationMetaToRow(meta)
+      }
+    } else {
+      patients.value = [] // fallback to empty array
+    }
+  } catch (err) {
+    console.error('Failed to fetch patients by identifier:', err)
+    patients.value = []
+  } finally {
+    isPatientsLoading.value = false
+  }
+}
+
+export {
+  isPatientsLoading,
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  getPatientsList,
+  getPatientCurrent,
+  getPatientByIdentifierSearch,
+}
 
 export const {
   recId,
diff --git a/app/handlers/prescription-item.handler.ts b/app/handlers/prescription-item.handler.ts
new file mode 100644
index 00000000..70450970
--- /dev/null
+++ b/app/handlers/prescription-item.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/prescription.handler.ts b/app/handlers/prescription.handler.ts
new file mode 100644
index 00000000..62e1861e
--- /dev/null
+++ b/app/handlers/prescription.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/specialist-position.handler.ts b/app/handlers/specialist-position.handler.ts
new file mode 100644
index 00000000..859070ba
--- /dev/null
+++ b/app/handlers/specialist-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/specialist-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/subspecialist-position.handler.ts b/app/handlers/subspecialist-position.handler.ts
new file mode 100644
index 00000000..42473f86
--- /dev/null
+++ b/app/handlers/subspecialist-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/subspecialist-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/unit-position.handler.ts b/app/handlers/unit-position.handler.ts
new file mode 100644
index 00000000..1cf4994b
--- /dev/null
+++ b/app/handlers/unit-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/unit-position.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.vclaim.ts b/app/lib/constants.vclaim.ts
new file mode 100644
index 00000000..84fe5d52
--- /dev/null
+++ b/app/lib/constants.vclaim.ts
@@ -0,0 +1,94 @@
+export const serviceTypes: Record<string, string> = {
+  '1': 'Rawat Inap',
+  '2': 'Rawat Jalan',
+}
+
+export const registerMethods: Record<string, string> = {
+  '1': 'Rujukan',
+  '2': 'IGD',
+  '3': 'Kontrol',
+  '4': 'Rujukan Internal',
+}
+
+export const classLevels: Record<string, string> = {
+  '1': 'Kelas 1',
+  '2': 'Kelas 2',
+  '3': 'Kelas 3',
+}
+
+export const classLevelUpgrades: Record<string, string> = {
+  '1': 'VVIP',
+  '2': 'VIP',
+  '3': 'Kelas 1',
+  '4': 'Kelas 2',
+  '5': 'Kelas 3',
+  '6': 'ICCU',
+  '7': 'ICU',
+  '8': 'Diatas Kelas 1',
+}
+
+export const classPaySources: Record<string, string> = {
+  '1': 'Pribadi',
+  '2': 'Pemberi Kerja',
+  '3': 'Asuransi Kesehatan Tambahan',
+}
+
+export const procedureTypes: Record<string, string> = {
+  '0': 'Prosedur tidak berkelanjutan',
+  '1': 'Prosedur dan terapi berkelanjutan',
+}
+
+export const purposeOfVisits: Record<string, string> = {
+  '0': 'Normal',
+  '1': 'Prosedur',
+  '2': 'Konsul Dokter',
+}
+
+export const trafficAccidents: Record<string, string> = {
+  '0': 'Bukan Kecelakaan lalu lintas [BKLL]',
+  '1': 'KLL dan Bukan Kecelakaan Kerja [BKK]',
+  '2': 'KLL dan KK',
+  '3': 'KK',
+}
+
+export const supportCodes: Record<string, string> = {
+  '1': 'Radioterapi',
+  '2': 'Kemoterapi',
+  '3': 'Rehabilitasi Medik',
+  '4': 'Rehabilitasi Psikososial',
+  '5': 'Transfusi Darah',
+  '6': 'Pelayanan Gigi',
+  '7': 'Laboratorium',
+  '8': 'USG',
+  '9': 'Farmasi',
+  '10': 'Lain-Lain',
+  '11': 'MRI',
+  '12': 'HEMODIALISA',
+}
+
+export const serviceAssessments: Record<string, string> = {
+  '1': 'Poli spesialis tidak tersedia pada hari sebelumnya',
+  '2': 'Jam Poli telah berakhir pada hari sebelumnya',
+  '3': 'Dokter Spesialis yang dimaksud tidak praktek pada hari sebelumnya',
+  '4': 'Atas Instruksi RS',
+  '5': 'Tujuan Kontrol',
+}
+
+export const paymentTypes: Record<string, string> = {
+  jkn: 'JKN (Jaminan Kesehatan Nasional)',
+  jkmm: 'JKMM (Jaminan Kesehatan Mandiri)',
+  spm: 'SPM (Sistem Pembayaran Mandiri)',
+  pks: 'PKS (Pembiayaan Kesehatan Sosial)',
+}
+
+export const sepRefTypeCodes: Record<string, string> = {
+  internal: 'Rujukan Internal',
+  external: 'Faskes Lain',
+}
+
+export const participantGroups: Record<string, string> = {
+  pbi: 'PBI (Penerima Bantuan Iuran)',
+  ppu: 'PPU (Pekerja Penerima Upah)',
+  pbu: 'PBU (Pekerja Bukan Penerima Upah)',
+  bp: 'BP (Bukan Pekerja)',
+}
\ No newline at end of file
diff --git a/app/lib/date.ts b/app/lib/date.ts
index 502a6cfb..2c7b92cf 100644
--- a/app/lib/date.ts
+++ b/app/lib/date.ts
@@ -41,4 +41,12 @@ export function getAge(dateString: string, comparedDate?: string): { idFormat: s
 		idFormat,
 		extFormat
 	};
+}
+
+export function formatDateYyyyMmDd(isoDateString: string): string {
+	const date = new Date(isoDateString);
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate()).padStart(2, '0');
+	return `${year}-${month}-${day}`;
 }
\ No newline at end of file
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
index c527a8cc..ab7b5550 100644
--- a/app/lib/page-permission.ts
+++ b/app/lib/page-permission.ts
@@ -2,43 +2,67 @@ import type { RoleAccess } from '~/models/role'
 
 export const PAGE_PERMISSIONS = {
   '/patient': {
-    doctor: ['R'],
-    nurse: ['R'],
-    admisi: ['C', 'R', 'U', 'D'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/doctor': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['R'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['R'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/satusehat': {
-    doctor: ['R'],
-    nurse: ['R'],
-    admisi: ['C', 'R', 'U', 'D'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
+  },
+  '/outpatient/encounter': {
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
+  },
+  '/emergency/encounter': {
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
+  },
+  '/inpatient/encounter': {
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/rehab/encounter': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['R'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['R'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/rehab/registration': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['R'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['R'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
 } as const satisfies Record<string, RoleAccess>
diff --git a/app/models/consultation.ts b/app/models/consultation.ts
index 09d050a8..595d628e 100644
--- a/app/models/consultation.ts
+++ b/app/models/consultation.ts
@@ -28,9 +28,10 @@ export interface DeleteDto {
 
 export function genCreateDto(): CreateDto {
   return {
+    date: '',
     encounter_id: 0,
     problem: '',
-    unit_id: 0,
+    dstUnit_id: 0,
   }
 }
 
diff --git a/app/models/control-letter.ts b/app/models/control-letter.ts
new file mode 100644
index 00000000..8f520212
--- /dev/null
+++ b/app/models/control-letter.ts
@@ -0,0 +1,37 @@
+import { type Base, genBase } from "./_base"
+import { genDoctor, type Doctor } from "./doctor"
+import { genEncounter, type Encounter } from "./encounter"
+import { genSpecialist, type Specialist } from "./specialist"
+import { genSubspecialist, type Subspecialist } from "./subspecialist"
+import { genUnit, type Unit } from "./unit"
+
+export interface ControlLetter extends Base {
+  encounter_id: number
+  encounter: Encounter
+  unit_id: number
+  unit: Unit
+  specialist_id: number
+  specialist: Specialist
+  subspecialist_id: number
+  subspecialist: Subspecialist
+  doctor_id: number
+  doctor: Doctor
+  date: ''
+}
+
+export function genControlLetter(): ControlLetter {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    encounter: genEncounter(),
+    unit_id: 0,
+    unit: genUnit(),
+    specialist_id: 0,
+    specialist: genSpecialist(),
+    subspecialist_id: 0,
+    subspecialist: genSubspecialist(),
+    doctor_id: 0,
+    doctor: genDoctor(),
+    date: ''
+  }
+}
diff --git a/app/models/division-position.ts b/app/models/division-position.ts
index 3bd5e63a..dc263ada 100644
--- a/app/models/division-position.ts
+++ b/app/models/division-position.ts
@@ -1,11 +1,13 @@
 import { type Base, genBase } from './_base'
-
+import type { Employee } from './employee'
 export interface DivisionPosition extends Base {
   code: string
   name: string
   headStatus?: boolean
   division_id: number
   employee_id?: number
+
+  employee?: Employee | null
 }
 
 export function genDivisionPosition(): DivisionPosition {
diff --git a/app/models/division.ts b/app/models/division.ts
index 0f6d9185..c54a0e24 100644
--- a/app/models/division.ts
+++ b/app/models/division.ts
@@ -1,10 +1,13 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import type { DivisionPosition } from './division-position'
 export interface Division extends Base {
   code: string
   name: string
   parent_id?: number | null
   childrens?: Division[] | null
+
+  // preload
+  divisionPosition?: DivisionPosition[] | null
 }
 
 export function genDivision(): Division {
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
index 3f517476..1b631907 100644
--- a/app/models/doctor.ts
+++ b/app/models/doctor.ts
@@ -8,10 +8,11 @@ export interface Doctor extends Base {
   employee: Employee
   ihs_number: string
   sip_number: string
-  unit_id?: number
-  specialist_id?: number
+  code?: string
+  unit_icode?: number
+  specialist_icode?: number
   specialist?: Specialist
-  subspecialist_id?: number
+  subspecialist_icode?: number
   subspecialist?: Subspecialist
   bpjs_code?: string
 }
@@ -21,9 +22,9 @@ export interface CreateDto {
   employee_id: number
   ihs_number: string
   sip_number: string
-  unit_id?: number
-  specialist_id?: number
-  subspecialist_id?: number
+  unit_code?: number
+  specialist_code?: number
+  subspecialist_code?: number
   bpjs_code: string
 }
 
diff --git a/app/models/installation-position.ts b/app/models/installation-position.ts
new file mode 100644
index 00000000..199038d7
--- /dev/null
+++ b/app/models/installation-position.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+
+export interface InstallationPosition extends Base {
+  installation_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+
+  employee?: Employee | null
+}
+
+export function genInstallationPosition(): InstallationPosition {
+  return {
+    ...genBase(),
+    installation_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/mcu-order.ts b/app/models/mcu-order.ts
index e3899aab..35e4018c 100644
--- a/app/models/mcu-order.ts
+++ b/app/models/mcu-order.ts
@@ -1,14 +1,18 @@
 import { type Base, genBase } from "./_base"
+import { type Doctor, genDoctor } from "./doctor"
+import type { McuOrderItem } from "./mcu-order-item"
 
 export interface McuOrder extends Base {
   encounter_id: number
   doctor_id: number
+  doctor: Doctor
   status_code?: string
   specimenPickTime: string
   examinationDate: string
   number?: number
   temperature?: number
   mcuUrgencyLevel_code?: string
+  items: McuOrderItem[]
 }
 
 export function genMcuOrder(): McuOrder {
@@ -16,8 +20,10 @@ export function genMcuOrder(): McuOrder {
     ...genBase(),
     encounter_id: 0,
     doctor_id: 0,
+    doctor: genDoctor(),
     specimenPickTime: '',
-    examinationDate: ''
+    examinationDate: '',
+    items: []
   }
 }
 
diff --git a/app/models/prescription.ts b/app/models/prescription.ts
index 543724d2..12d5eb9d 100644
--- a/app/models/prescription.ts
+++ b/app/models/prescription.ts
@@ -1,10 +1,10 @@
+import { type Base, genBase } from "./_base";
 import { type Encounter, genEncounter } from "./encounter";
 import { type Doctor, genDoctor } from "./doctor";
 import { type PrescriptionItem } from "./prescription-item";
 import type { SpecialistIntern } from "./specialist-intern";
 
-export interface Prescription {
-  id: number
+export interface Prescription extends Base {
   encounter_id: number
   encounter: Encounter
   doctor_id: number
@@ -44,7 +44,7 @@ export interface DeleteDto {
 
 export function genPresciption(): Prescription {
   return {
-    id: 0,
+    ...genBase(),
     encounter_id: 0,
     encounter: genEncounter(),
     doctor_id: 0,
diff --git a/app/models/specialist-position.ts b/app/models/specialist-position.ts
new file mode 100644
index 00000000..727e8374
--- /dev/null
+++ b/app/models/specialist-position.ts
@@ -0,0 +1,22 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+
+export interface SpecialistPosition extends Base {
+  specialist_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+  employee?: Employee | null
+}
+
+export function genSpecialistPosition(): SpecialistPosition {
+  return {
+    ...genBase(),
+    specialist_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/specialist.ts b/app/models/specialist.ts
index b4fe1115..d3180a73 100644
--- a/app/models/specialist.ts
+++ b/app/models/specialist.ts
@@ -1,9 +1,12 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
+import type { Unit } from './unit'
+import type { Subspecialist } from "./subspecialist"
 
 export interface Specialist extends Base {
   code: string
   name: string
-  unit_id?: number | string | null
+  unit?: Unit | null
+  subspecialists?: Subspecialist[]
 }
 
 export function genSpecialist(): Specialist {
@@ -11,6 +14,6 @@ export function genSpecialist(): Specialist {
     ...genBase(),
     code: '',
     name: '',
-    unit_id: 0
+    unit_id: 0,
   }
 }
diff --git a/app/models/subspecialist-position.ts b/app/models/subspecialist-position.ts
new file mode 100644
index 00000000..28ea2287
--- /dev/null
+++ b/app/models/subspecialist-position.ts
@@ -0,0 +1,25 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+import type { Subspecialist } from './subspecialist'
+
+export interface SubSpecialistPosition extends Base {
+  subspecialist_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+
+  subspecialist?: Subspecialist | null
+  employee?: Employee | null
+}
+
+export function genSubSpecialistPosition(): SubSpecialistPosition {
+  return {
+    ...genBase(),
+    subspecialist_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/subspecialist.ts b/app/models/subspecialist.ts
index 6343b847..e67333e9 100644
--- a/app/models/subspecialist.ts
+++ b/app/models/subspecialist.ts
@@ -1,9 +1,11 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import { type Specialist } from './specialist'
 export interface Subspecialist extends Base {
   code: string
   name: string
   specialist_id?: number | string | null
+
+  specialist?: Specialist | null
 }
 
 export function genSubspecialist(): Subspecialist {
@@ -11,6 +13,6 @@ export function genSubspecialist(): Subspecialist {
     ...genBase(),
     code: '',
     name: '',
-    specialist_id: 0
+    specialist_id: 0,
   }
 }
diff --git a/app/models/unit-position.ts b/app/models/unit-position.ts
new file mode 100644
index 00000000..11e97806
--- /dev/null
+++ b/app/models/unit-position.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+
+export interface UnitPosition extends Base {
+  unit_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+
+  employee?: Employee | null
+}
+
+export function genUnitPosition(): UnitPosition {
+  return {
+    ...genBase(),
+    unit_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/unit.ts b/app/models/unit.ts
index 142f0570..ba8ba5a1 100644
--- a/app/models/unit.ts
+++ b/app/models/unit.ts
@@ -1,9 +1,11 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import { type Installation } from '~/models/installation'
 export interface Unit extends Base {
   code: string
   name: string
   installation_id?: number | string | null
+
+  installation?: Installation | null
 }
 
 export function genUnit(): Unit {
diff --git a/app/models/vclaim.ts b/app/models/vclaim.ts
new file mode 100644
index 00000000..21ffb94f
--- /dev/null
+++ b/app/models/vclaim.ts
@@ -0,0 +1,15 @@
+export interface VclaimSepData {
+  letterDate: string
+  letterNumber: string
+  serviceType: string
+  flow: string
+  medicalRecordNumber: string
+  patientName: string
+  cardNumber: string
+  controlLetterNumber: string
+  controlLetterDate: string
+  clinicDestination: string
+  attendingDoctor: string
+  diagnosis: string
+  careClass: string
+}
diff --git a/app/pages/(features)/emergency/encounter/[id]/edit.vue b/app/pages/(features)/emergency/encounter/[id]/edit.vue
new file mode 100644
index 00000000..92d263d7
--- /dev/null
+++ b/app/pages/(features)/emergency/encounter/[id]/edit.vue
@@ -0,0 +1,56 @@
+<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: 'Edit Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/emergency/encounter']
+
+const { checkRole, hasUpdateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canUpdate = hasUpdateAccess(roleAccess)
+
+// Get encounter ID from route params
+const encounterId = computed(() => {
+  const id = route.params.id
+  return typeof id === 'string' ? parseInt(id) : 0
+})
+</script>
+
+<template>
+  <div v-if="canUpdate">
+    <ContentEncounterEntry
+      :id="encounterId"
+      class-code="emergency"
+      sub-class-code="emg"
+      form-type="Edit"
+    />
+  </div>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
+
diff --git a/app/pages/(features)/emergency/encounter/add.vue b/app/pages/(features)/emergency/encounter/add.vue
new file mode 100644
index 00000000..aa382643
--- /dev/null
+++ b/app/pages/(features)/emergency/encounter/add.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/emergency/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry
+      :id="0"
+      class-code="emergency"
+      sub-class-code="emg"
+      form-type="Tambah"
+    />
+  </div>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/emergency/encounter/index.vue b/app/pages/(features)/emergency/encounter/index.vue
index 50485cec..ed05c25e 100644
--- a/app/pages/(features)/emergency/encounter/index.vue
+++ b/app/pages/(features)/emergency/encounter/index.vue
@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+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: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/emergency/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="emergency"
+        sub-class-code="emg"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/inpatient/encounter/[id]/edit.vue b/app/pages/(features)/inpatient/encounter/[id]/edit.vue
new file mode 100644
index 00000000..2df3d4f6
--- /dev/null
+++ b/app/pages/(features)/inpatient/encounter/[id]/edit.vue
@@ -0,0 +1,56 @@
+<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: 'Edit Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/inpatient/encounter']
+
+const { checkRole, hasUpdateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canUpdate = hasUpdateAccess(roleAccess)
+
+// Get encounter ID from route params
+const encounterId = computed(() => {
+  const id = route.params.id
+  return typeof id === 'string' ? parseInt(id) : 0
+})
+</script>
+
+<template>
+  <div v-if="canUpdate">
+    <ContentEncounterEntry
+      :id="encounterId"
+      class-code="inpatient"
+      sub-class-code="icu"
+      form-type="Edit"
+    />
+  </div>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
+
diff --git a/app/pages/(features)/inpatient/encounter/add.vue b/app/pages/(features)/inpatient/encounter/add.vue
new file mode 100644
index 00000000..bd827f79
--- /dev/null
+++ b/app/pages/(features)/inpatient/encounter/add.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/inpatient/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry
+      :id="0"
+      class-code="inpatient"
+      sub-class-code="icu"
+      form-type="Tambah"
+    />
+  </div>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/inpatient/encounter/index.vue b/app/pages/(features)/inpatient/encounter/index.vue
index 50485cec..7c9d1ac5 100644
--- a/app/pages/(features)/inpatient/encounter/index.vue
+++ b/app/pages/(features)/inpatient/encounter/index.vue
@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+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: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/inpatient/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="inpatient"
+        sub-class-code="vk"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/integration/bpjs/control-letter/index.vue b/app/pages/(features)/integration/bpjs/control-letter/index.vue
new file mode 100644
index 00000000..8dcb9006
--- /dev/null
+++ b/app/pages/(features)/integration/bpjs/control-letter/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: 'Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+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 = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentBpjsControlLetterList type="encounter" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/integration/bpjs/sep/add.vue b/app/pages/(features)/integration/bpjs/sep/add.vue
index 5db12aac..0658780b 100644
--- a/app/pages/(features)/integration/bpjs/sep/add.vue
+++ b/app/pages/(features)/integration/bpjs/sep/add.vue
@@ -22,12 +22,12 @@ const { checkRole, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
+// if (!hasAccess) {
+//   throw createError({
+//     statusCode: 403,
+//     statusMessage: 'Access denied',
+//   })
+// }
 
 // Define permission-based computed properties
 const canCreate = true // hasCreateAccess(roleAccess)
diff --git a/app/pages/(features)/integration/bpjs/sep/index.vue b/app/pages/(features)/integration/bpjs/sep/index.vue
index b8ec57c4..d99dbb5d 100644
--- a/app/pages/(features)/integration/bpjs/sep/index.vue
+++ b/app/pages/(features)/integration/bpjs/sep/index.vue
@@ -22,9 +22,9 @@ const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  navigateTo('/403')
-}
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
 
 // Define permission-based computed properties
 const canRead = true // hasReadAccess(roleAccess)
diff --git a/app/pages/(features)/org-src/division-position/index.vue b/app/pages/(features)/org-src/division-position/index.vue
new file mode 100644
index 00000000..53551b48
--- /dev/null
+++ b/app/pages/(features)/org-src/division-position/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 Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDivisionPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/division/[id]/index.vue b/app/pages/(features)/org-src/division/[id]/index.vue
new file mode 100644
index 00000000..658652d9
--- /dev/null
+++ b/app/pages/(features)/org-src/division/[id]/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: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDivisionDetail :division-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/installation-position/index.vue b/app/pages/(features)/org-src/installation-position/index.vue
new file mode 100644
index 00000000..0b525098
--- /dev/null
+++ b/app/pages/(features)/org-src/installation-position/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 Instalasi',
+  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">
+    <ContentInstallationPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/installation/[id]/index.vue b/app/pages/(features)/org-src/installation/[id]/index.vue
new file mode 100644
index 00000000..0264dd65
--- /dev/null
+++ b/app/pages/(features)/org-src/installation/[id]/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: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentInstallationDetail :installation-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/specialist-position/index.vue b/app/pages/(features)/org-src/specialist-position/index.vue
new file mode 100644
index 00000000..a2e29428
--- /dev/null
+++ b/app/pages/(features)/org-src/specialist-position/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 Spesialis',
+  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">
+    <ContentSpecialistPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/specialist/[id]/index.vue b/app/pages/(features)/org-src/specialist/[id]/index.vue
new file mode 100644
index 00000000..c5554a71
--- /dev/null
+++ b/app/pages/(features)/org-src/specialist/[id]/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: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSpecialistDetail :specialist-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/subspecialist-position/index.vue b/app/pages/(features)/org-src/subspecialist-position/index.vue
new file mode 100644
index 00000000..650ae9ee
--- /dev/null
+++ b/app/pages/(features)/org-src/subspecialist-position/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 Sub Spesialis',
+  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">
+    <ContentSubspecialistPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/subspecialist/[id]/index.vue b/app/pages/(features)/org-src/subspecialist/[id]/index.vue
new file mode 100644
index 00000000..7bd0b8ee
--- /dev/null
+++ b/app/pages/(features)/org-src/subspecialist/[id]/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: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSubspecialistDetail :subspecialist-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/unit-position/index.vue b/app/pages/(features)/org-src/unit-position/index.vue
new file mode 100644
index 00000000..c40a0654
--- /dev/null
+++ b/app/pages/(features)/org-src/unit-position/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 Unit Posisi',
+  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">
+    <ContentUnitPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/unit/[id]/index.vue b/app/pages/(features)/org-src/unit/[id]/index.vue
new file mode 100644
index 00000000..1230b57c
--- /dev/null
+++ b/app/pages/(features)/org-src/unit/[id]/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: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentUnitDetail :unit-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/[id]/edit.vue b/app/pages/(features)/outpatient/encounter/[id]/edit.vue
new file mode 100644
index 00000000..9713675f
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/[id]/edit.vue
@@ -0,0 +1,56 @@
+<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: 'Edit Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/outpatient/encounter']
+
+const { checkRole, hasUpdateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canUpdate = hasUpdateAccess(roleAccess)
+
+// Get encounter ID from route params
+const encounterId = computed(() => {
+  const id = route.params.id
+  return typeof id === 'string' ? parseInt(id) : 0
+})
+</script>
+
+<template>
+  <div v-if="canUpdate">
+    <ContentEncounterEntry
+      :id="encounterId"
+      class-code="ambulatory"
+      sub-class-code="reg"
+      form-type="Edit"
+    />
+  </div>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
+
diff --git a/app/pages/(features)/outpatient/encounter/[id]/index.vue b/app/pages/(features)/outpatient/encounter/[id]/index.vue
new file mode 100644
index 00000000..1864cf2c
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/[id]/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Surat Kontrol',
+  contentFrame: 'cf-container-md',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentOutpatientEncounterDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/add.vue b/app/pages/(features)/outpatient/encounter/add.vue
new file mode 100644
index 00000000..948b16c6
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/add.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/outpatient/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry
+      :id="0"
+      class-code="ambulatory"
+      sub-class-code="reg"
+      form-type="Tambah"
+    />
+  </div>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/index.vue b/app/pages/(features)/outpatient/encounter/index.vue
index 50485cec..1e679c5d 100644
--- a/app/pages/(features)/outpatient/encounter/index.vue
+++ b/app/pages/(features)/outpatient/encounter/index.vue
@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+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: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/outpatient/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="ambulatory"
+        sub-class-code="reg"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/index.vue b/app/pages/(features)/outpation-action/cemotherapy/index.vue
deleted file mode 100644
index 50485cec..00000000
--- a/app/pages/(features)/outpation-action/cemotherapy/index.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-  const route = useRoute();
-</script>
-
-<template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
-  </div>
-</template>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue b/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
new file mode 100644
index 00000000..ef936ff2
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
@@ -0,0 +1,47 @@
+<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'
+import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
+import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kemoterapi Admin',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => 'Verifikasi Jadwal Pasien',
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
+
+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 = true // hasReadAccess(roleAccess)
+
+const mode = computed(() => route.params.mode as string)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyVerification />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
new file mode 100644
index 00000000..cf33691a
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
@@ -0,0 +1,55 @@
+<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'
+import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
+import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kemoterapi Admin',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => {
+    const mode = route.params.mode as string
+    if (mode === 'admin') {
+      return 'Administrasi Pasien Rawat Jalan Kemoterapi'
+    } else if (mode === 'series') {
+      return 'Proses Jadwal Pasien'
+    }
+    return route.meta.title as string
+  },
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
+
+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 = true // hasReadAccess(roleAccess)
+
+const mode = computed(() => route.params.mode as string)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyAdminList v-if="mode === 'admin'" />
+      <ContentChemotherapyProcess v-else-if="mode === 'series'" />
+      <Error v-else :status-code="404" status-message="Mode tidak ditemukan" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
+
diff --git a/app/pages/(features)/outpation-action/chemotherapy/index.vue b/app/pages/(features)/outpation-action/chemotherapy/index.vue
new file mode 100644
index 00000000..a2dfdea5
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Redirect to list page - the process page is now at [id]/index.vue
+const route = useRoute()
+navigateTo('/outpation-action/chemotherapy/list')
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/list.vue b/app/pages/(features)/outpation-action/chemotherapy/list.vue
new file mode 100644
index 00000000..a141baaa
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/list.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: 'Daftar Kempterapi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+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 = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/examination-queue/index.vue b/app/pages/(features)/rehab/encounter-queue/index.vue
similarity index 100%
rename from app/pages/(features)/rehab/examination-queue/index.vue
rename to app/pages/(features)/rehab/encounter-queue/index.vue
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
new file mode 100644
index 00000000..cc5d182f
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
@@ -0,0 +1,41 @@
+<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: 'Update Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterEdit />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
new file mode 100644
index 00000000..612315ad
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Surat Kontrol',
+  contentFrame: 'cf-container-md',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
new file mode 100644
index 00000000..1070a29f
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.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: 'Tambah Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+const callbackUrl = route.query['return-path'] as string | undefined
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterAdd :callback-url="callbackUrl" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/edit.vue
index 77b0dd3e..02dc5428 100644
--- a/app/pages/(features)/rehab/encounter/[id]/edit.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/edit.vue
@@ -6,7 +6,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah Kunjungan',
+  title: 'Edit Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
@@ -18,7 +18,7 @@ useHead({
 
 const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
 
-const { checkRole, hasCreateAccess } = useRBAC()
+const { checkRole, hasUpdateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
@@ -30,12 +30,26 @@ if (!hasAccess) {
 }
 
 // Define permission-based computed properties
-const canCreate = hasCreateAccess(roleAccess)
+const canUpdate = hasUpdateAccess(roleAccess)
+
+// Get encounter ID from route params
+const encounterId = computed(() => {
+  const id = route.params.id
+  return typeof id === 'string' ? parseInt(id) : 0
+})
 </script>
 
 <template>
-  <div v-if="canCreate">
-    <ContentEncounterEntry :id="1" form-type="Edit" />
+  <div v-if="canUpdate">
+    <ContentEncounterEntry
+      :id="encounterId"
+      class-code="ambulatory"
+      sub-class-code="rehab"
+      form-type="Edit"
+    />
   </div>
-  <Error v-else :status-code="403" />
+  <Error
+    v-else
+    :status-code="403"
+  />
 </template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
index 3fa7525a..abd0efa7 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -22,15 +22,15 @@ const { checkRole, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
+// if (!hasAccess) {
+//   throw createError({
+//     statusCode: 403,
+//     statusMessage: 'Access denied',
+//   })
+// }
 
 // Define permission-based computed properties
-const canCreate = hasCreateAccess(roleAccess)
+const canCreate = true // hasCreateAccess(roleAccess)
 </script>
 
 <template>
diff --git a/app/pages/(features)/rehab/encounter/add.vue b/app/pages/(features)/rehab/encounter/add.vue
index f20b90c1..fe7dd98c 100644
--- a/app/pages/(features)/rehab/encounter/add.vue
+++ b/app/pages/(features)/rehab/encounter/add.vue
@@ -35,7 +35,15 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry form-type="Tambah" />
+    <ContentEncounterEntry
+      :id="0"
+      class-code="ambulatory"
+      sub-class-code="rehab"
+      form-type="Tambah"
+    />
   </div>
-  <Error v-else :status-code="403" />
+  <Error
+    v-else
+    :status-code="403"
+  />
 </template>
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
index 7a8564a8..f50ad954 100644
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -5,7 +5,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['system', 'emp-doc', 'emp-nur', 'emp-reg', 'emp-pha', 'emp-pay', 'emp-mng'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
@@ -23,18 +23,25 @@ const { checkRole, hasReadAccess } = useRBAC()
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  navigateTo('/403')
+  // navigateTo('/403')
 }
 
 // Define permission-based computed properties
-const canRead = hasReadAccess(roleAccess)
+const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList type="encounter" />
+      <ContentEncounterList
+        class-code="ambulatory"
+        sub-class-code="rehab"
+        type="encounter"
+      />
     </div>
-    <Error v-else :status-code="403" />
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/rehab/examination/index.vue b/app/pages/(features)/rehab/examination/index.vue
deleted file mode 100644
index 806b2650..00000000
--- a/app/pages/(features)/rehab/examination/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Examination</div>
-</template>
diff --git a/app/schemas/chemotherapy.schema.ts b/app/schemas/chemotherapy.schema.ts
new file mode 100644
index 00000000..212e5358
--- /dev/null
+++ b/app/schemas/chemotherapy.schema.ts
@@ -0,0 +1,73 @@
+import { z } from 'zod'
+
+const dateStringSchema = z.string().min(1)
+
+export const chemotherapySchema = z.object({
+  // Data Pasien
+  namaPasien: z.string({
+    required_error: 'Nama pasien harus diisi',
+  }).min(1, 'Nama pasien harus diisi'),
+  
+  tanggalLahir: z.string({
+    required_error: 'Tanggal lahir harus diisi',
+  }).min(1, 'Tanggal lahir harus diisi'),
+  
+  noRM: z.string({
+    required_error: 'Nomor RM harus diisi',
+  }).min(1, 'Nomor RM harus diisi'),
+  
+  alamat: z.string({
+    required_error: 'Alamat harus diisi',
+  }).min(1, 'Alamat harus diisi'),
+  
+  beratBadan: z.union([
+    z.string(),
+    z.number()
+  ]).transform(val => val === '' ? null : Number(val))
+    .refine(val => val === null || (val >= 0 && val <= 500), {
+      message: 'Berat badan harus di antara 0-500 kg',
+    }),
+  
+  tinggiBadan: z.union([
+    z.string(),
+    z.number()
+  ]).transform(val => val === '' ? null : Number(val))
+    .refine(val => val === null || (val >= 0 && val <= 300), {
+      message: 'Tinggi badan harus di antara 0-300 cm',
+    }),
+  
+  diagnosa: z.string({
+    required_error: 'Diagnosa harus dipilih',
+  }).min(1, 'Diagnosa harus dipilih'),
+
+  // Protokol Kemoterapi
+  siklus: z.string({
+    required_error: 'Siklus harus diisi',
+  }).min(1, 'Siklus harus diisi'),
+  
+  periodeAwal: z.string({
+    required_error: 'Periode awal harus diisi',
+  }).min(1, 'Periode awal harus diisi'),
+  
+  periodeAkhir: dateStringSchema.refine((val) => {
+    if (!val) return false
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, {
+    message: 'Format tanggal tidak valid'
+  }),
+
+  tanggalKemoterapi: dateStringSchema.refine((val) => {
+    if (!val) return false
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, {
+    message: 'Format tanggal tidak valid'
+  }),
+  
+  dokterKRJ: z.string({
+    required_error: 'Dokter harus dipilih',
+  }).refine(val => val !== '', {
+    message: 'Dokter harus dipilih',
+  }),
+})
\ No newline at end of file
diff --git a/app/schemas/control-letter.schema.ts b/app/schemas/control-letter.schema.ts
new file mode 100644
index 00000000..c82ffaac
--- /dev/null
+++ b/app/schemas/control-letter.schema.ts
@@ -0,0 +1,47 @@
+import { z } from 'zod'
+
+const ControlLetterSchema = z.object({
+  sepStatus: z.string({
+    required_error: 'Mohon isi status SEP',
+  }).default('SEP Internal'),
+  unit_code: z.string({
+    required_error: 'Mohon isi Unit',
+  }),
+  specialist_code: z.string({
+    required_error: 'Mohon isi Spesialis',
+  }),
+  subspecialist_code: z.string({
+    required_error: 'Mohon isi Sub Spesialis',
+  }),
+  doctor_code: z.string({
+    required_error: 'Mohon isi DPJP',
+  }),
+  encounter_code: z.string().optional(),
+  date: z.string({
+    required_error: 'Mohon lengkapi Tanggal Kontrol',
+  })
+    .refine(
+      (date) => {
+        // Jika kosong, return false untuk required validation
+        if (!date || date.trim() === '') return false
+
+        // Jika ada isi, validasi format tanggal
+        try {
+          const dateObj = new Date(date)
+          // Cek apakah tanggal valid dan tahun >= 1900
+          return !isNaN(dateObj.getTime()) && dateObj.getFullYear() >= 1900
+        } catch {
+          return false
+        }
+      },
+      {
+        message: 'Mohon lengkapi Tanggal Kontrol dengan format yang valid',
+      },
+    )
+    .transform((dateStr) => new Date(dateStr).toISOString()),
+})
+
+type ControlLetterFormData = z.infer<typeof ControlLetterSchema>
+
+export { ControlLetterSchema }
+export type { ControlLetterFormData }
diff --git a/app/schemas/installation-position.schema.ts b/app/schemas/installation-position.schema.ts
new file mode 100644
index 00000000..5990fc6c
--- /dev/null
+++ b/app/schemas/installation-position.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+import type { InstallationPosition } from '~/models/installation-position'
+
+const InstallationPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  installation_id: z.union([
+    z.string({ required_error: 'Instalasi Induk harus diisi' }),
+    z.number({ required_error: 'Instalasi Induk harus diisi' }),
+  ]),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+type InstallationPositionFormData = z.infer<typeof InstallationPositionSchema> & Partial<InstallationPosition>
+
+export { InstallationPositionSchema }
+export type { InstallationPositionFormData }
diff --git a/app/schemas/integration-bpjs.schema.ts b/app/schemas/integration-bpjs.schema.ts
new file mode 100644
index 00000000..47206edf
--- /dev/null
+++ b/app/schemas/integration-bpjs.schema.ts
@@ -0,0 +1,255 @@
+import { z } from 'zod'
+
+const ERROR_MESSAGES = {
+  required: {
+    sepDate: 'Tanggal wajib diisi',
+    serviceType: 'Jenis Pelayanan wajib diisi',
+    admissionType: 'Jenis Pendaftaran wajib diisi',
+    cardNumber: 'No. Kartu BPJS wajib diisi',
+    nationalId: 'Nomor ID wajib diisi',
+    medicalRecordNumber: 'Nomor Rekam Medis wajib diisi',
+    patientName: 'Nama wajib diisi',
+    phoneNumber: 'Nomor Telepon wajib diisi',
+    referralLetterNumber: 'Nomor Surat Kontrol wajib diisi',
+    referralLetterDate: 'Tanggal Surat Kontrol wajib diisi',
+    fromClinic: 'Faskes Asal wajib diisi',
+    destinationClinic: 'Klinik Tujuan wajib diisi',
+    attendingDoctor: 'Dokter wajib diisi',
+    initialDiagnosis: 'Diagnosa Awal wajib diisi',
+    cob: 'COB wajib diisi',
+    cataract: 'Katarak wajib diisi',
+    clinicExcecutive: 'Klinkik eksekutif wajib diisi',
+    subSpecialistId: 'Subspesialis wajib diisi',
+    procedureType: 'Jenis Prosedur wajib diisi',
+    supportCode: 'Kode Penunjang wajib diisi',
+    note: 'Catatan wajib diisi',
+    trafficAccident: 'Kejadian lalu lintas wajib diisi',
+    purposeOfVisit: 'Tujuan Kunjungan wajib diisi',
+    serviceAssessment: 'Assemen Pelayanan wajib diisi',
+    lpNumber: 'Nomor LP wajib diisi',
+    accidentDate: 'Tanggal Kejadian lalu lintas wajib diisi',
+    accidentNote: 'Keterangan Kejadian lalu lintas wajib diisi',
+    accidentProvince: 'Provinsi Kejadian lalu lintas wajib diisi',
+    accidentCity: 'Kota Kejadian lalu lintas wajib diisi',
+    accidentDistrict: 'Kecamatan Kejadian lalu lintas wajib diisi',
+    suplesi: 'Suplesi wajib diisi',
+    suplesiNumber: 'Nomor Suplesi wajib diisi',
+    classLevel: 'Kelas Rawat wajib diisi',
+    classLevelUpgrade: 'Kelas Rawat Naik wajib diisi',
+    classPaySource: 'Pembiayaan wajib diisi',
+    responsiblePerson: 'Penanggung Jawab wajib diisi',
+  },
+}
+
+const IntegrationBpjsSchema = z
+  .object({
+    sepDate: z.string({ required_error: ERROR_MESSAGES.required.sepDate }).min(1, ERROR_MESSAGES.required.sepDate),
+    serviceType: z
+      .string({ required_error: ERROR_MESSAGES.required.serviceType })
+      .min(1, ERROR_MESSAGES.required.serviceType)
+      .optional(),
+    admissionType: z
+      .string({ required_error: ERROR_MESSAGES.required.admissionType })
+      .min(1, ERROR_MESSAGES.required.admissionType),
+    cardNumber: z
+      .string({ required_error: ERROR_MESSAGES.required.cardNumber })
+      .min(1, ERROR_MESSAGES.required.cardNumber),
+    nationalId: z
+      .string({ required_error: ERROR_MESSAGES.required.nationalId })
+      .min(1, ERROR_MESSAGES.required.nationalId),
+    medicalRecordNumber: z
+      .string({ required_error: ERROR_MESSAGES.required.medicalRecordNumber })
+      .min(1, ERROR_MESSAGES.required.medicalRecordNumber),
+    patientName: z
+      .string({ required_error: ERROR_MESSAGES.required.patientName })
+      .min(1, ERROR_MESSAGES.required.patientName),
+    phoneNumber: z
+      .string({ required_error: ERROR_MESSAGES.required.phoneNumber })
+      .min(1, ERROR_MESSAGES.required.phoneNumber),
+    referralLetterNumber: z
+      .string({ required_error: ERROR_MESSAGES.required.referralLetterNumber })
+      .min(1, ERROR_MESSAGES.required.referralLetterNumber).optional(),
+    referralLetterDate: z
+      .string({ required_error: ERROR_MESSAGES.required.referralLetterDate })
+      .min(1, ERROR_MESSAGES.required.referralLetterDate).optional(),
+    fromClinic: z
+      .string({ required_error: ERROR_MESSAGES.required.fromClinic })
+      .min(1, ERROR_MESSAGES.required.fromClinic)
+      .optional(),
+    destinationClinic: z
+      .string({ required_error: ERROR_MESSAGES.required.destinationClinic })
+      .min(1, ERROR_MESSAGES.required.destinationClinic),
+    attendingDoctor: z
+      .string({ required_error: ERROR_MESSAGES.required.attendingDoctor })
+      .min(1, ERROR_MESSAGES.required.attendingDoctor),
+    initialDiagnosis: z
+      .string({ required_error: ERROR_MESSAGES.required.initialDiagnosis })
+      .min(1, ERROR_MESSAGES.required.initialDiagnosis),
+    cob: z.string({ required_error: ERROR_MESSAGES.required.cob }).min(1, ERROR_MESSAGES.required.cob),
+    cataract: z.string({ required_error: ERROR_MESSAGES.required.cataract }).min(1, ERROR_MESSAGES.required.cataract),
+    clinicExcecutive: z
+      .string({ required_error: ERROR_MESSAGES.required.clinicExcecutive })
+      .min(1, ERROR_MESSAGES.required.clinicExcecutive),
+    subSpecialistId: z
+      .string({ required_error: ERROR_MESSAGES.required.subSpecialistId })
+      .min(1, ERROR_MESSAGES.required.subSpecialistId)
+      .optional(),
+    procedureType: z
+      .string({ required_error: ERROR_MESSAGES.required.procedureType })
+      .min(1, ERROR_MESSAGES.required.procedureType)
+      .optional(),
+    supportCode: z
+      .string({ required_error: ERROR_MESSAGES.required.supportCode })
+      .min(1, ERROR_MESSAGES.required.supportCode)
+      .optional(),
+    note: z.string({ required_error: ERROR_MESSAGES.required.note }).min(1, ERROR_MESSAGES.required.note).optional(),
+    trafficAccident: z
+      .string({ required_error: ERROR_MESSAGES.required.trafficAccident })
+      .min(1, ERROR_MESSAGES.required.trafficAccident)
+      .optional(),
+    purposeOfVisit: z
+      .string({ required_error: ERROR_MESSAGES.required.purposeOfVisit })
+      .min(1, ERROR_MESSAGES.required.purposeOfVisit)
+      .optional(),
+    serviceAssessment: z
+      .string({ required_error: ERROR_MESSAGES.required.serviceAssessment })
+      .min(1, ERROR_MESSAGES.required.serviceAssessment)
+      .optional(),
+    lpNumber: z.string({ required_error: ERROR_MESSAGES.required.lpNumber }).optional(),
+    accidentDate: z.string({ required_error: ERROR_MESSAGES.required.accidentDate }).optional(),
+    accidentNote: z.string({ required_error: ERROR_MESSAGES.required.accidentNote }).optional(),
+    accidentProvince: z.string({ required_error: ERROR_MESSAGES.required.accidentProvince }).optional(),
+    accidentCity: z.string({ required_error: ERROR_MESSAGES.required.accidentCity }).optional(),
+    accidentDistrict: z.string({ required_error: ERROR_MESSAGES.required.accidentDistrict }).optional(),
+    suplesi: z.string({ required_error: ERROR_MESSAGES.required.suplesi }).optional(),
+    suplesiNumber: z.string({ required_error: ERROR_MESSAGES.required.suplesiNumber }).optional(),
+    classLevel: z.string({ required_error: ERROR_MESSAGES.required.classLevel }).optional(),
+    classLevelUpgrade: z.string({ required_error: ERROR_MESSAGES.required.classLevelUpgrade }).optional(),
+    classPaySource: z.string({ required_error: ERROR_MESSAGES.required.classPaySource }).optional(),
+    responsiblePerson: z.string({ required_error: ERROR_MESSAGES.required.responsiblePerson }).optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.trafficAccident && data.trafficAccident.trim() !== '') {
+        return data.accidentDate && data.accidentDate.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.accidentDate,
+      path: ['accidentDate'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.trafficAccident && data.trafficAccident.trim() !== '') {
+        return data.accidentProvince && data.accidentProvince.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.accidentProvince,
+      path: ['accidentProvince'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.trafficAccident && data.trafficAccident.trim() !== '') {
+        return data.accidentCity && data.accidentCity.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.accidentCity,
+      path: ['accidentCity'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.trafficAccident && data.trafficAccident.trim() !== '') {
+        return data.accidentDistrict && data.accidentDistrict.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.accidentDistrict,
+      path: ['accidentDistrict'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.trafficAccident && data.trafficAccident.trim() !== '') {
+        return data.suplesi && data.suplesi.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.suplesi,
+      path: ['suplesi'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.trafficAccident && data.trafficAccident.trim() !== '' && data.suplesi?.trim() === 'yes') {
+        return data.suplesiNumber && data.suplesiNumber.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.suplesiNumber,
+      path: ['suplesiNumber'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.serviceType === '1') {
+        return data.classLevel && data.classLevel.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.classLevel,
+      path: ['classLevel'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.serviceType === '1') {
+        return data.classLevelUpgrade && data.classLevelUpgrade.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.classLevelUpgrade,
+      path: ['classLevelUpgrade'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.serviceType === '1' && data.classLevelUpgrade?.trim() !== '') {
+        return data.classPaySource && data.classPaySource.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.classPaySource,
+      path: ['classPaySource'],
+    },
+  )
+  .refine(
+    (data) => {
+      if (data.serviceType === '1' && data.classPaySource?.trim() !== '') {
+        return data.responsiblePerson && data.responsiblePerson.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.responsiblePerson,
+      path: ['responsiblePerson'],
+    },
+  )
+
+type IntegrationBpjsFormData = z.infer<typeof IntegrationBpjsSchema>
+
+export { IntegrationBpjsSchema }
+export type { IntegrationBpjsFormData }
diff --git a/app/schemas/integration-encounter.schema.ts b/app/schemas/integration-encounter.schema.ts
new file mode 100644
index 00000000..32327328
--- /dev/null
+++ b/app/schemas/integration-encounter.schema.ts
@@ -0,0 +1,133 @@
+import { z } from 'zod'
+
+const ERROR_MESSAGES = {
+  required: {
+    doctorId: 'Dokter wajib diisi',
+    registerDate: 'Tanggal Daftar wajib diisi',
+    paymentType: 'Jenis Pembayaran wajib diisi',
+    subSpecialistId: 'Subspesialis wajib diisi',
+    patientCategory: 'Kelompok Peserta wajib diisi',
+    cardNumber: 'No. Kartu BPJS wajib diisi',
+    sepType: 'Jenis SEP wajib diisi',
+    sepNumber: 'No. SEP wajib diisi',
+  },
+}
+
+const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+
+const IntegrationEncounterSchema = z
+  .object({
+    // Patient data (readonly, populated from selected patient)
+    patientName: z.string().optional(),
+    nationalIdentity: z.string().optional(),
+    medicalRecordNumber: z.string().optional(),
+    
+    // Visit data
+    doctorId: z
+      .string({ required_error: ERROR_MESSAGES.required.doctorId })
+      .min(1, ERROR_MESSAGES.required.doctorId),
+    subSpecialistId: z
+      .string({ required_error: ERROR_MESSAGES.required.subSpecialistId })
+      .min(1, ERROR_MESSAGES.required.subSpecialistId)
+      .optional(),
+    registerDate: z
+      .string({ required_error: ERROR_MESSAGES.required.registerDate })
+      .min(1, ERROR_MESSAGES.required.registerDate),
+    paymentType: z
+      .string({ required_error: ERROR_MESSAGES.required.paymentType })
+      .min(1, ERROR_MESSAGES.required.paymentType),
+    
+    // BPJS related fields
+    patientCategory: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.patientCategory)
+      .optional(),
+    cardNumber: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.cardNumber)
+      .optional(),
+    sepType: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.sepType)
+      .optional(),
+    sepNumber: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.sepNumber)
+      .optional(),
+    
+    // File uploads
+    sepFile: 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' }),
+    sippFile: 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(
+    (data) => {
+      // If payment type is jkn, then patient category is required
+      if (data.paymentType === 'jkn') {
+        return data.patientCategory && data.patientCategory.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.patientCategory,
+      path: ['patientCategory'],
+    },
+  )
+  .refine(
+    (data) => {
+      // If payment type is jkn, then card number is required
+      if (data.paymentType === 'jkn') {
+        return data.cardNumber && data.cardNumber.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.cardNumber,
+      path: ['cardNumber'],
+    },
+  )
+  .refine(
+    (data) => {
+      // If payment type is jkn, then SEP type is required
+      if (data.paymentType === 'jkn') {
+        return data.sepType && data.sepType.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.sepType,
+      path: ['sepType'],
+    },
+  )
+  .refine(
+    (data) => {
+      // If payment type is jkn and SEP type is selected, then SEP number is required
+      if (data.paymentType === 'jkn' && data.sepType && data.sepType.trim() !== '') {
+        return data.sepNumber && data.sepNumber.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.sepNumber,
+      path: ['sepNumber'],
+    },
+  )
+
+type IntegrationEncounterFormData = z.infer<typeof IntegrationEncounterSchema>
+
+export { IntegrationEncounterSchema }
+export type { IntegrationEncounterFormData }
+
diff --git a/app/schemas/prescription-item.schema.ts b/app/schemas/prescription-item.schema.ts
new file mode 100644
index 00000000..7c3ca7d3
--- /dev/null
+++ b/app/schemas/prescription-item.schema.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const PrescriptionItemSchema = z.object({
+})
+
+type PrescriptionItemFormData = z.infer<typeof PrescriptionItemSchema> & PrescriptionItem
+
+export { PrescriptionItemSchema }
+export type { PrescriptionItemFormData }
diff --git a/app/schemas/prescription.schema.ts b/app/schemas/prescription.schema.ts
new file mode 100644
index 00000000..1e23f642
--- /dev/null
+++ b/app/schemas/prescription.schema.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod'
+import type { Prescription } from '~/models/prescription'
+
+const PrescriptionSchema = z.object({
+    'encounter-id': z.number().nullable().optional(),
+})
+
+type PrescriptionFormData = z.infer<typeof PrescriptionSchema> & Prescription
+
+export { PrescriptionSchema }
+export type { PrescriptionFormData }
diff --git a/app/schemas/specialist-position.schema.ts b/app/schemas/specialist-position.schema.ts
new file mode 100644
index 00000000..7aacef37
--- /dev/null
+++ b/app/schemas/specialist-position.schema.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import type { SpecialistPosition } from '~/models/specialist-position'
+
+const SpecialistPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  specialist_id: z
+    .union([
+      z.string({ required_error: 'Spesialis harus diisi' }),
+      z.number({ required_error: 'Spesialis harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+
+type SpecialistPositionFormData = z.infer<typeof SpecialistPositionSchema> & Partial<SpecialistPosition>
+
+export { SpecialistPositionSchema }
+export type { SpecialistPositionFormData }
diff --git a/app/schemas/subspecialist-position.schema.ts b/app/schemas/subspecialist-position.schema.ts
new file mode 100644
index 00000000..7f458e7b
--- /dev/null
+++ b/app/schemas/subspecialist-position.schema.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import type { SubSpecialistPosition } from '~/models/subspecialist-position'
+
+const SubSpecialistPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  subspecialist_id: z
+    .union([
+      z.string({ required_error: 'Spesialis harus diisi' }),
+      z.number({ required_error: 'Spesialis harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+
+type SubSpecialistPositionFormData = z.infer<typeof SubSpecialistPositionSchema> & Partial<SubSpecialistPosition>
+
+export { SubSpecialistPositionSchema }
+export type { SubSpecialistPositionFormData }
diff --git a/app/schemas/unit-position.schema.ts b/app/schemas/unit-position.schema.ts
new file mode 100644
index 00000000..2422b9a1
--- /dev/null
+++ b/app/schemas/unit-position.schema.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import type { UnitPosition } from '~/models/unit-position'
+
+const UnitPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  unit_id: z
+    .union([
+      z.string({ required_error: 'Unit Induk harus diisi' }),
+      z.number({ required_error: 'Unit Induk harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+
+type UnitPositionFormData = z.infer<typeof UnitPositionSchema> & Partial<UnitPosition>
+
+export { UnitPositionSchema }
+export type { UnitPositionFormData }
diff --git a/app/services/control-letter.service.ts b/app/services/control-letter.service.ts
new file mode 100644
index 00000000..29b3722b
--- /dev/null
+++ b/app/services/control-letter.service.ts
@@ -0,0 +1,28 @@
+// Base
+import * as base from './_crud-base'
+
+// Constants
+import { encounterClassCodes } from '~/lib/constants'
+
+const path = '/api/v1/control-letter'
+const name = 'control-letter'
+
+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, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+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)
+}
\ No newline at end of file
diff --git a/app/services/doctor.service.ts b/app/services/doctor.service.ts
index 64ab22e9..e6ae0051 100644
--- a/app/services/doctor.service.ts
+++ b/app/services/doctor.service.ts
@@ -3,7 +3,7 @@ import * as base from './_crud-base'
 import type { Doctor } from "~/models/doctor";
 
 const path = '/api/v1/doctor'
-const name = 'device'
+const name = 'doctor'
 
 export function create(data: any) {
   return base.create(path, data, name)
@@ -25,14 +25,16 @@ export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
 
-export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+export async function getValueLabelList(params: any = null, useCodeAsValue = false): 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: Doctor) => ({
-      value: item.id,
-      label: item.employee.person.name,
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
+      label: item.employee?.person?.name || '',
     }))
   }
   return data
diff --git a/app/services/employee.service.ts b/app/services/employee.service.ts
index 366ef71e..3121e7a2 100644
--- a/app/services/employee.service.ts
+++ b/app/services/employee.service.ts
@@ -1,4 +1,5 @@
 // Base
+import type { Employee } from '~/models/employee'
 import * as base from './_crud-base'
 
 const path = '/api/v1/employee'
@@ -29,9 +30,9 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
   const result = await getList(params)
   if (result.success) {
     const resultData = result.body?.data || []
-    data = resultData.map((item: any) => ({
-      value: item.id ? Number(item.id) : item.code,
-      label: item.person.name,
+    data = resultData.map((item: Employee) => ({
+      value: item.id,
+      label: `${item.person.frontTitle} ${item.person.name} ${item.person.endTitle}`.trim(),
     }))
   }
   return data
diff --git a/app/services/installation-position.service.ts b/app/services/installation-position.service.ts
new file mode 100644
index 00000000..13d5e914
--- /dev/null
+++ b/app/services/installation-position.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Installation } from '~/models/installation'
+
+const path = '/api/v1/installation-position'
+const name = 'installation'
+
+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: Installation) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/mcu-order-item.service.ts b/app/services/mcu-order-item.service.ts
new file mode 100644
index 00000000..b7ffbbfe
--- /dev/null
+++ b/app/services/mcu-order-item.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-order-item'
+const name = 'mcu-order-item'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/mcu-order.service.ts b/app/services/mcu-order.service.ts
new file mode 100644
index 00000000..77e023d7
--- /dev/null
+++ b/app/services/mcu-order.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-order'
+const name = 'mcu-order'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/mcu-src-category.service.ts b/app/services/mcu-src-category.service.ts
new file mode 100644
index 00000000..c154b1dc
--- /dev/null
+++ b/app/services/mcu-src-category.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-src-category'
+const name = 'mcu-src-category'
+
+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/mcu-src.service.ts b/app/services/mcu-src.service.ts
new file mode 100644
index 00000000..a7a466b8
--- /dev/null
+++ b/app/services/mcu-src.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-src'
+const name = 'mcu-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)
+}
diff --git a/app/services/patient.service.ts b/app/services/patient.service.ts
index 7591f356..6a7742c3 100644
--- a/app/services/patient.service.ts
+++ b/app/services/patient.service.ts
@@ -40,6 +40,22 @@ export async function getPatientDetail(id: number) {
   }
 }
 
+export async function getPatientByIdentifier(search: string) {
+  try {
+    const urlPath = search.length === 16 ? `by-resident-identity/search=${encodeURIComponent(search)}` : `/search/${search}`
+    const url = `${mainUrl}/${urlPath}`
+    const resp = await xfetch(url, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    result.type = urlPath.includes('by-resident-identity') ? 'resident-identity' : 'identity'
+    return result
+  } catch (error) {
+    console.error('Error fetching patient by identifier:', error)
+    throw new Error('Failed to get patient by identifier')
+  }
+}
+
 export async function postPatient(record: any) {
   try {
     const resp = await xfetch(mainUrl, 'POST', record)
diff --git a/app/services/prescription-item.service.ts b/app/services/prescription-item.service.ts
new file mode 100644
index 00000000..22649e14
--- /dev/null
+++ b/app/services/prescription-item.service.ts
@@ -0,0 +1,23 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/prescription-item'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/prescription.service.ts b/app/services/prescription.service.ts
new file mode 100644
index 00000000..150357ab
--- /dev/null
+++ b/app/services/prescription.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/prescription'
+const name = 'prescription'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/specialist-position.service.ts b/app/services/specialist-position.service.ts
new file mode 100644
index 00000000..6966ca60
--- /dev/null
+++ b/app/services/specialist-position.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/specialist-position'
+const name = 'specialist-position'
+
+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/specialist.service.ts b/app/services/specialist.service.ts
index c2c34e3f..d4c81b5c 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.service.ts
@@ -3,6 +3,7 @@ import * as base from './_crud-base'
 
 // Types
 import type { Specialist } from '~/models/specialist'
+import type { TreeItem } from '~/models/_base'
 
 const path = '/api/v1/specialist'
 const name = 'specialist'
@@ -15,8 +16,8 @@ export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id, name)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {
@@ -27,16 +28,35 @@ export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
 
-export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+export async function getValueLabelList(params: any = null, useCodeAsValue = false): Promise<{ value: string; label: string }[]> {
   let data: { value: string; label: string }[] = []
   const result = await getList(params)
   if (result.success) {
     const resultData = result.body?.data || []
     data = resultData.map((item: Specialist) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.name,
       parent: item.unit_id ? Number(item.unit_id) : null,
     }))
   }
   return data
 }
+
+/**
+ * Convert specialist response to TreeItem[] with subspecialist children
+ * @param specialists Array of specialist objects from API
+ * @returns TreeItem[]
+ */
+export function getValueTreeItems(specialists: any[], byCode = true): TreeItem[] {
+  return specialists.map((specialist: Specialist) => ({
+    value: byCode ? String(specialist.code) : String(specialist.id),
+    label: specialist.name,
+    hasChildren: Array.isArray(specialist.subspecialists) && specialist.subspecialists.length > 0,
+    children:
+      Array.isArray(specialist.subspecialists) && specialist.subspecialists.length > 0
+        ? getValueTreeItems(specialist.subspecialists)
+        : undefined,
+  }))
+}
diff --git a/app/services/subspecialist-position.service.ts b/app/services/subspecialist-position.service.ts
new file mode 100644
index 00000000..9653100b
--- /dev/null
+++ b/app/services/subspecialist-position.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/subspecialist-position'
+const name = 'subspecialist-position'
+
+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/subspecialist.service.ts b/app/services/subspecialist.service.ts
index 94e70a09..f13c715f 100644
--- a/app/services/subspecialist.service.ts
+++ b/app/services/subspecialist.service.ts
@@ -15,8 +15,8 @@ export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id, name)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {
@@ -27,13 +27,15 @@ export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
 
-export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+export async function getValueLabelList(params: any = null, useCodeAsValue = false): Promise<{ value: string; label: string }[]> {
   let data: { value: string; label: string }[] = []
   const result = await getList(params)
   if (result.success) {
     const resultData = result.body?.data || []
     data = resultData.map((item: Subspecialist) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.name,
       parent: item.specialist_id ? Number(item.specialist_id) : null,
     }))
diff --git a/app/services/unit-position.service.ts b/app/services/unit-position.service.ts
new file mode 100644
index 00000000..ee9cf89c
--- /dev/null
+++ b/app/services/unit-position.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/unit-position'
+const name = 'unit-position'
+
+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/unit.service.ts b/app/services/unit.service.ts
index 438625f1..402504b6 100644
--- a/app/services/unit.service.ts
+++ b/app/services/unit.service.ts
@@ -2,7 +2,7 @@
 import * as base from './_crud-base'
 
 // Types
-import type { Unit } from "~/models/unit";
+import type { Unit } from '~/models/unit'
 
 const path = '/api/v1/unit'
 const name = 'unit'
@@ -27,13 +27,15 @@ export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
 
-export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+export async function getValueLabelList(params: any = null, useCodeAsValue = false): 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: Unit) => ({
-      value: item.id,
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.name,
     }))
   }
diff --git a/app/services/vclaim-control-letter.service.ts b/app/services/vclaim-control-letter.service.ts
new file mode 100644
index 00000000..007e91c5
--- /dev/null
+++ b/app/services/vclaim-control-letter.service.ts
@@ -0,0 +1,29 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim-swagger/RencanaKontrol'
+const name = 'rencana-kontrol'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.letterNumber && params.mode === 'by-control') {
+    url += `/noSuratKontrol/${params.letterNumber}`
+  }
+  if (params?.letterNumber && params.mode === 'by-card') {
+    url += `/noka/${params.letterNumber}`
+  }
+  if (params?.letterNumber && params.mode === 'by-sep') {
+    url += `/${params.letterNumber}`
+  }
+  if (params?.letterNumber && params.mode === 'by-schedule') {
+    url += `/jadwalDokter?jeniskontrol=${params.controlType}&kodepoli=${params.poliCode}&tanggalkontrol=${params.controlDate}`
+    delete params.controlType
+    delete params.poliCode
+    delete params.controlDate
+  }
+  if (params) {
+    delete params.letterNumber
+    delete params.mode
+  }
+  return base.getList(url, params, name)
+}
\ No newline at end of file
diff --git a/app/services/vclaim-diagnose-referral.service.ts b/app/services/vclaim-diagnose-referral.service.ts
new file mode 100644
index 00000000..34b94780
--- /dev/null
+++ b/app/services/vclaim-diagnose-referral.service.ts
@@ -0,0 +1,9 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/diagnose-prb'
+const name = 'diagnose-referral'
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
diff --git a/app/services/vclaim-diagnose.service.ts b/app/services/vclaim-diagnose.service.ts
new file mode 100644
index 00000000..a676f516
--- /dev/null
+++ b/app/services/vclaim-diagnose.service.ts
@@ -0,0 +1,28 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/diagnose'
+const name = 'diagnose'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params && params?.diagnosa) {
+    url += `/${params.diagnosa}`
+    delete params.diagnosa
+  }
+  return base.getList(url, params, 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?.response?.diagnosa || []
+    const resultUnique = [...new Map(resultData.map((item: any) => [item.kode, item])).values()]
+    data = resultUnique.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: `${item.kode} - ${item.nama}`,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-doctor.service.ts b/app/services/vclaim-doctor.service.ts
new file mode 100644
index 00000000..0d5ec9dc
--- /dev/null
+++ b/app/services/vclaim-doctor.service.ts
@@ -0,0 +1,36 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/responsible-doctor'
+const name = 'responsible-doctor'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.serviceType) {
+    url += `/${params.serviceType}`
+    delete params.serviceType
+  }
+  if (params?.serviceDate) {
+    url += `/${params.serviceDate}`
+    delete params.serviceDate
+  }
+  if (params?.specialistCode || (Number(params.specialistCode) === 0)) {
+    url += `/${params.specialistCode}`
+    delete params.specialistCode
+  }
+  return base.getList(url, params, 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?.response?.list || []
+    const resultUnique = [...new Map(resultData.map((item: any) => [item.kode, item])).values()]
+    data = resultUnique.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: `${item.kode} - ${item.nama}`,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-healthcare.service.ts b/app/services/vclaim-healthcare.service.ts
new file mode 100644
index 00000000..09cc0089
--- /dev/null
+++ b/app/services/vclaim-healthcare.service.ts
@@ -0,0 +1,32 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/healthcare'
+const name = 'healthcare'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.healthcare) {
+    url += `/${params.healthcare}`
+    delete params.healthcare
+  }
+  if (params?.healthcareType) {
+    url += `/${params.healthcareType}`
+    delete params.healthcareType
+  }
+  return base.getList(url, params, 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?.response?.faskes || []
+    const resultUnique = [...new Map(resultData.map((item: any) => [item.kode, item])).values()]
+    data = resultUnique.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: `${item.kode} - ${item.nama}`,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-medicine.service.ts b/app/services/vclaim-medicine.service.ts
new file mode 100644
index 00000000..15a42050
--- /dev/null
+++ b/app/services/vclaim-medicine.service.ts
@@ -0,0 +1,22 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/medicine'
+const name = 'medicine'
+
+export function getList(params: any = null) {
+  return base.getList(path, params, 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?.response?.list || []
+    data = resultData.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-member.service.ts b/app/services/vclaim-member.service.ts
new file mode 100644
index 00000000..bbe054ec
--- /dev/null
+++ b/app/services/vclaim-member.service.ts
@@ -0,0 +1,21 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/member'
+const name = 'member'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.number && params.mode === 'by-identity') {
+    url += `/nik/${params.number}/${params.date}`
+  }
+  if (params?.number && params.mode === 'by-card') {
+    url += `/bpjs/${params.number}/${params.date}`
+  }
+  if (params) {
+    delete params.number
+    delete params.mode
+    delete params.date
+  }
+  return base.getList(url, params, name)
+}
diff --git a/app/services/vclaim-monitoring-history.service.ts b/app/services/vclaim-monitoring-history.service.ts
new file mode 100644
index 00000000..ac9f2113
--- /dev/null
+++ b/app/services/vclaim-monitoring-history.service.ts
@@ -0,0 +1,17 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/monitoring/hist'
+const name = 'monitoring-history'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params && params?.cardNumber) {
+    url += `/${params.cardNumber}/${params.startDate}/${params.endDate}`
+    delete params.cardNumber
+    delete params.startDate
+    delete params.endDate
+  }
+
+  return base.getList(url, params, name)
+}
diff --git a/app/services/vclaim-monitoring-visit.service.ts b/app/services/vclaim-monitoring-visit.service.ts
new file mode 100644
index 00000000..0c5da64e
--- /dev/null
+++ b/app/services/vclaim-monitoring-visit.service.ts
@@ -0,0 +1,71 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/monitoring/visit'
+const name = 'monitoring-visit'
+
+const dummyResponse = {
+  metaData: {
+    code: '200',
+    message: 'Sukses',
+  },
+  response: {
+    sep: [
+      {
+        diagnosa: 'K65.0',
+        jnsPelayanan: 'R.Inap',
+        kelasRawat: '2',
+        nama: 'HANIF ABDURRAHMAN',
+        noKartu: '0001819122189',
+        noSep: '0301R00110170000004',
+        noRujukan: '0301U01108180200084',
+        poli: null,
+        tglPlgSep: '2017-10-03',
+        tglSep: '2017-10-01',
+      },
+      {
+        diagnosa: 'I50.0',
+        jnsPelayanan: 'R.Inap',
+        kelasRawat: '3',
+        nama: 'ASRIZAL',
+        noKartu: '0002283324674',
+        noSep: '0301R00110170000005',
+        noRujukan: '0301U01108180200184',
+        poli: null,
+        tglPlgSep: '2017-10-10',
+        tglSep: '2017-10-01',
+      },
+    ],
+  },
+}
+
+export async function getList(params: any = null) {
+  try {
+    let url = path
+    if (params?.date && params.serviceType) {
+      url += `/${params.date}/${params.serviceType}`
+    }
+    if (params) {
+      delete params.date
+      delete params.serviceType
+    }
+    const resp = await base.getList(url, params, name)
+    
+    // Jika success false, return dummy response
+    if (!resp.success || !resp.body?.response) {
+      return {
+        success: true,
+        body: dummyResponse,
+      }
+    }
+    
+    return resp
+  } catch (error) {
+    // Jika terjadi error, return dummy response
+    console.error(`Error fetching ${name}s:`, error)
+    return {
+      success: true,
+      body: dummyResponse,
+    }
+  }
+}
diff --git a/app/services/vclaim-reference-hospital-letter.service.ts b/app/services/vclaim-reference-hospital-letter.service.ts
new file mode 100644
index 00000000..115f6558
--- /dev/null
+++ b/app/services/vclaim-reference-hospital-letter.service.ts
@@ -0,0 +1,16 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim-swagger/Rujukan/RS'
+const name = 'rujukan-rumah-sakit'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.letterNumber) {
+    url += `/${params.letterNumber}`
+  }
+  if (params) {
+    delete params.letterNumber
+  }
+  return base.getList(url, params, name)
+}
\ No newline at end of file
diff --git a/app/services/vclaim-reference-letter.service.ts b/app/services/vclaim-reference-letter.service.ts
new file mode 100644
index 00000000..0a721d19
--- /dev/null
+++ b/app/services/vclaim-reference-letter.service.ts
@@ -0,0 +1,16 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim-swagger/RujukanKhusus'
+const name = 'rujukan-khusus'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.letterNumber) {
+    url += `?noRujukan=${params.letterNumber}`
+  }
+  if (params) {
+    delete params.letterNumber
+  }
+  return base.getList(url, params, name)
+}
\ No newline at end of file
diff --git a/app/services/vclaim-region-city.service.ts b/app/services/vclaim-region-city.service.ts
new file mode 100644
index 00000000..4ebfca20
--- /dev/null
+++ b/app/services/vclaim-region-city.service.ts
@@ -0,0 +1,27 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/regency'
+const name = 'cities'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.province) {
+    url += `/${params.province}`
+    delete params.province
+  }
+  return base.getList(url, params, 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?.response?.list || []
+    data = resultData.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-region-district.service.ts b/app/services/vclaim-region-district.service.ts
new file mode 100644
index 00000000..0b0585a8
--- /dev/null
+++ b/app/services/vclaim-region-district.service.ts
@@ -0,0 +1,27 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/district'
+const name = 'districts'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.city) {
+    url += `/${params.city}`
+    delete params.city
+  }
+  return base.getList(url, params, 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?.response?.list || []
+    data = resultData.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-region-province.service.ts b/app/services/vclaim-region-province.service.ts
new file mode 100644
index 00000000..5d58bb26
--- /dev/null
+++ b/app/services/vclaim-region-province.service.ts
@@ -0,0 +1,22 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/province'
+const name = 'provinces'
+
+export function getList(params: any = null) {
+  return base.getList(path, params, 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?.response?.list || []
+    data = resultData.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-sep.service.ts b/app/services/vclaim-sep.service.ts
new file mode 100644
index 00000000..fdccc9c4
--- /dev/null
+++ b/app/services/vclaim-sep.service.ts
@@ -0,0 +1,95 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { IntegrationBpjsFormData } from '~/schemas/integration-bpjs.schema'
+
+const path = '/api/vclaim-swagger/sep'
+const name = 'sep'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.number) {
+    url += `/${params.number}`
+    delete params.number
+  }
+  return base.getList(url, params, name)
+}
+
+export function makeSepData(
+  data: IntegrationBpjsFormData & {
+    referralFrom?: string
+    referralTo?: string
+    referralLetterDate?: string
+    referralLetterNumber?: string
+  },
+) {
+  const content = {
+    noKartu: data.cardNumber || '',
+    tglSep: data.sepDate,
+    ppkPelayanan: data.fromClinic || '',
+    jnsPelayanan: data.admissionType ? String(data.admissionType) : '1',
+    noMR: data.medicalRecordNumber || '',
+    catatan: data.note || '',
+    diagAwal: data.initialDiagnosis || '',
+    poli: {
+      tujuan: data.destinationClinic || '',
+      eksekutif: data.clinicExcecutive === 'yes' ? '1' : '0',
+    },
+    cob: {
+      cob: data.cob === 'yes' ? '1' : '0',
+    },
+    katarak: {
+      katarak: data.cataract === 'yes' ? '1' : '0',
+    },
+    tujuanKunj: data.purposeOfVisit || '',
+    flagProcedure: data.procedureType || '',
+    kdPenunjang: data.supportCode || '',
+    assesmentPel: data.serviceAssessment || '',
+    skdp: {
+      noSurat: ['3'].includes(data.admissionType) ? data.referralLetterNumber : '',
+      kodeDPJP: ['3'].includes(data.admissionType)? data.attendingDoctor : '',
+    },
+    rujukan: {
+      asalRujukan: ['2'].includes(data.admissionType) ? data?.referralFrom || '' : '',
+      tglRujukan: ['2'].includes(data.admissionType) ? data?.referralLetterDate || '' : '',
+      noRujukan: ['2'].includes(data.admissionType) ? data?.referralLetterNumber || '' : '',
+      ppkRujukan: ['2'].includes(data.admissionType) ? data?.referralTo || '' : '',
+    },
+    klsRawat: {
+      klsRawatHak: data.classLevel || '',
+      klsRawatNaik: data.classLevelUpgrade || '',
+      pembiayaan: data.classPaySource || '',
+      penanggungJawab: data.responsiblePerson || '',
+    },
+    dpjpLayan: data.attendingDoctor || '',
+    noTelp: data.phoneNumber || '',
+    user: data.patientName || '',
+    jaminan: {
+      lakaLantas: data.trafficAccident || '0',
+      noLP: data.lpNumber || '',
+      penjamin: {
+        tglKejadian: data.accidentDate || '',
+        keterangan: data.accidentNote || '',
+        suplesi: {
+          suplesi: data.suplesi === 'yes' ? '1' : '0',
+          noSepSuplesi: data.suplesiNumber || '',
+          lokasiLaka: {
+            kdPropinsi: data.accidentProvince || '',
+            kdKabupaten: data.accidentCity || '',
+            kdKecamatan: data.accidentDistrict || '',
+          },
+        },
+      },
+    },
+  }
+  return {
+    request: {
+      t_sep: content,
+    },
+  }
+}
diff --git a/app/services/vclaim-unit.service.ts b/app/services/vclaim-unit.service.ts
new file mode 100644
index 00000000..970a3f00
--- /dev/null
+++ b/app/services/vclaim-unit.service.ts
@@ -0,0 +1,28 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/vclaim/v1/reference/unit'
+const name = 'unit'
+
+export function getList(params: any = null) {
+  let url = path
+  if (params?.unitCode) {
+    url += `/${params.unitCode}`
+    delete params.unitCode
+  }
+  return base.getList(url, params, 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?.response?.faskes || []
+    const resultUnique = [...new Map(resultData.map((item: any) => [item.kode, item])).values()]
+    data = resultUnique.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: `${item.kode} - ${item.nama}`,
+    }))
+  }
+  return data
+}
diff --git a/app/stores/user.ts b/app/stores/user.ts
index 14ab7134..97bd4665 100644
--- a/app/stores/user.ts
+++ b/app/stores/user.ts
@@ -5,12 +5,13 @@ export const useUserStore = defineStore(
     // const token = useCookie('authentication')
 
     const isAuthenticated = computed(() => !!user.value)
+
     const userRole = computed(() => {
-      const roles = user.value?.roles || []
-      return roles.map((input: string) => {
-        const parts = input.split('-')
-        return parts.length > 1 ? parts[1]: parts[0]
-      })
+      return user.value?.roles || []
+      // return roles.map((input: string) => {
+      //   const parts = input.split('|')
+      //   return parts.length > 1 ? parts[1]: parts[0]
+      // })
     })
 
     const login = async (userData: any) => {
@@ -21,12 +22,30 @@ export const useUserStore = defineStore(
       user.value = null
     }
 
+    const setActiveRole = (role: string) => {
+      if (user.value && user.value.roles.includes(role)) {
+        user.value.activeRole = role
+      }
+    }
+
+    const getActiveRole = () => {
+      if (user.value?.activeRole) {
+        return user.value.activeRole
+      }
+      if (user.value?.roles.length > 0) {
+        user.value.activeRole = user.value.roles[0]
+        return user.value.activeRole
+      }
+    }
+
     return {
       user,
       isAuthenticated,
       userRole,
       login,
       logout,
+      setActiveRole,
+      getActiveRole,
     }
   },
   {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 55cdb6bf..f4f0b231 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,8 +5,12 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   runtimeConfig: {
     API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
+    VCLAIM: process.env.NUXT_API_VCLAIM || 'http://localhost:3000',
+    VCLAIM_SWAGGER: process.env.NUXT_API_VCLAIM_SWAGGER || 'http://localhost:3000',
     public: {
       API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
+      VCLAIM: process.env.NUXT_API_VCLAIM || 'http://localhost:3000',
+      VCLAIM_SWAGGER: process.env.NUXT_API_VCLAIM_SWAGGER || 'http://localhost:3000',
     },
   },
   ssr: false,
diff --git a/public/side-menu-items/blank.json b/public/side-menu-items/blank.json
new file mode 100644
index 00000000..9d7a78b3
--- /dev/null
+++ b/public/side-menu-items/blank.json
@@ -0,0 +1,12 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/div-crd.json b/public/side-menu-items/div-crd.json
new file mode 100644
index 00000000..9d7a78b3
--- /dev/null
+++ b/public/side-menu-items/div-crd.json
@@ -0,0 +1,12 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/doc.json b/public/side-menu-items/emp-doc.json
similarity index 96%
rename from public/side-menu-items/doc.json
rename to public/side-menu-items/emp-doc.json
index e3ab2cdf..b7ecb430 100644
--- a/public/side-menu-items/doc.json
+++ b/public/side-menu-items/emp-doc.json
@@ -84,12 +84,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia/encounter"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
diff --git a/public/side-menu-items/lab.json b/public/side-menu-items/emp-lab.json
similarity index 100%
rename from public/side-menu-items/lab.json
rename to public/side-menu-items/emp-lab.json
diff --git a/public/side-menu-items/miw.json b/public/side-menu-items/emp-mid.json
similarity index 93%
rename from public/side-menu-items/miw.json
rename to public/side-menu-items/emp-mid.json
index ebb43da6..80eeee7c 100644
--- a/public/side-menu-items/miw.json
+++ b/public/side-menu-items/emp-mid.json
@@ -20,7 +20,7 @@
       {
         "title": "Rehabilitasi Medik",
         "icon": "i-lucide-bike",
-        "link": "/rehab/polyclinic-queue"
+        "link": "/rehab/encounter-queue"
       },
       {
         "title": "Rawat Inap",
diff --git a/public/side-menu-items/nur.json b/public/side-menu-items/emp-nur.json
similarity index 89%
rename from public/side-menu-items/nur.json
rename to public/side-menu-items/emp-nur.json
index 8185456c..1c993144 100644
--- a/public/side-menu-items/nur.json
+++ b/public/side-menu-items/emp-nur.json
@@ -13,10 +13,10 @@
         "children": [
           {
             "title": "Antrian Poliklinik",
-            "link": "/outpatient/polyclinic-queue"
+            "link": "/outpatient/encounter-queue"
           },
           {
-            "title": "Pendaftaran",
+            "title": "Kunjungan",
             "link": "/outpatient/encounter"
           }
         ]
@@ -30,7 +30,7 @@
             "link": "/emergency/triage"
           },
           {
-            "title": "Pemeriksaan",
+            "title": "Kunjungan",
             "link": "/emergency/encounter"
           }
         ]
@@ -42,7 +42,7 @@
         "children": [
           {
             "title": "Antrean Poliklinik",
-            "link": "/rehab/polyclinic-queue"
+            "link": "/rehab/encounter-queue"
           },
           {
             "title": "Kunjungan",
@@ -63,7 +63,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
diff --git a/public/side-menu-items/nut.json b/public/side-menu-items/emp-nut.json
similarity index 93%
rename from public/side-menu-items/nut.json
rename to public/side-menu-items/emp-nut.json
index 4368b22e..ef71282a 100644
--- a/public/side-menu-items/nut.json
+++ b/public/side-menu-items/emp-nut.json
@@ -35,12 +35,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
diff --git a/public/side-menu-items/pha.json b/public/side-menu-items/emp-pha.json
similarity index 100%
rename from public/side-menu-items/pha.json
rename to public/side-menu-items/emp-pha.json
diff --git a/public/side-menu-items/reg.json b/public/side-menu-items/emp-reg.json
similarity index 100%
rename from public/side-menu-items/reg.json
rename to public/side-menu-items/emp-reg.json
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/system.json
similarity index 90%
rename from public/side-menu-items/sys.json
rename to public/side-menu-items/system.json
index 19491069..5bf62f36 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/system.json
@@ -17,7 +17,7 @@
           },
           {
             "title": "Antrian Poliklinik",
-            "link": "/outpatient/polyclinic-queue"
+            "link": "/outpatient/encounter-queue"
           },
           {
             "title": "Kunjungan",
@@ -57,7 +57,7 @@
           },
           {
             "title": "Antrean Poliklinik",
-            "link": "/rehab/polyclinic-queue"
+            "link": "/rehab/encounter-queue"
           },
           {
             "title": "Kunjungan",
@@ -139,7 +139,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
@@ -199,6 +199,11 @@
             "title": "Peserta",
             "icon": "i-lucide-circuit-board",
             "link": "/integration/bpjs/member"
+          },
+          {
+            "title": "Surat Kontrol",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/control-letter"
           }
         ]
       },
@@ -320,21 +325,41 @@
             "title": "Divisi",
             "link": "/org-src/division"
           },
+          {
+            "title": "Divisi - Posisi",
+            "link": "/org-src/division-position"
+          },
           {
             "title": "Instalasi",
             "link": "/org-src/installation"
           },
+          {
+            "title": "Instalasi - Posisi",
+            "link": "/org-src/installation-position"
+          },
           {
             "title": "Unit",
             "link": "/org-src/unit"
           },
+          {
+            "title": "Unit - Posisi",
+            "link": "/org-src/unit-position"
+          },
           {
             "title": "Spesialis",
             "link": "/org-src/specialist"
           },
+          {
+            "title": "Spesialis - Posisi",
+            "link": "/org-src/specialist-position"
+          },
           {
             "title": "Sub Spesialis",
             "link": "/org-src/subspecialist"
+          },
+          {
+            "title": "Sub Spesialis - Posisi",
+            "link": "/org-src/subspecialist-position"
           }
         ]
       },
diff --git a/server/api/[...req].ts b/server/api/[...req].ts
index 8404cc2a..5948eda6 100644
--- a/server/api/[...req].ts
+++ b/server/api/[...req].ts
@@ -5,11 +5,20 @@ export default defineEventHandler(async (event) => {
   const headers = getRequestHeaders(event)
   const url = getRequestURL(event)
   const config = useRuntimeConfig()
-  
-  const apiOrigin = config.public.API_ORIGIN
-  const pathname = url.pathname.replace(/^\/api/, '')
 
-  const targetUrl = apiOrigin + pathname + (url.search || '')
+  const apiOrigin = config.public.API_ORIGIN
+  const apiVclaim = config.public.VCLAIM
+  const apiVclaimSwagger = config.public.VCLAIM_SWAGGER
+  const pathname = url.pathname.replace(/^\/api/, '')
+  const isVclaim = pathname.includes('/vclaim')
+
+  let targetUrl = apiOrigin + pathname + (url.search || '')
+  if (pathname.includes('/vclaim')) {
+    targetUrl = apiVclaim + pathname.replace('/vclaim', '') + (url.search || '')
+  }
+  if (pathname.includes('/vclaim-swagger')) {
+    targetUrl = apiVclaimSwagger + pathname.replace('/vclaim-swagger', '') + (url.search || '')
+  }
 
   const verificationId = headers['verification-id'] as string | undefined
   let bearer = ''
@@ -21,8 +30,10 @@ export default defineEventHandler(async (event) => {
   }
 
   const forwardHeaders = new Headers()
-  if (headers['content-type']) forwardHeaders.set('Content-Type', headers['content-type'])
-  forwardHeaders.set('Authorization', `Bearer ${bearer}`)
+  if (!isVclaim) {
+    if (headers['content-type']) forwardHeaders.set('Content-Type', headers['content-type'])
+    forwardHeaders.set('Authorization', `Bearer ${bearer}`)
+  }
 
   let body: any
   if (['POST', 'PATCH'].includes(method!)) {
@@ -41,5 +52,15 @@ export default defineEventHandler(async (event) => {
     body,
   })
 
+  if (isVclaim) {
+    const resClone = res.clone()
+    const responseBody = await resClone.json()
+    return {
+      status: resClone.status,
+      headers: resClone.headers,
+      ...responseBody,
+    }
+  }
+
   return res
 })