diff --git a/app/assets/svg/wavey-fingerprint.svg b/app/assets/svg/wavey-fingerprint.svg
new file mode 100644
index 00000000..b281297f
--- /dev/null
+++ b/app/assets/svg/wavey-fingerprint.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg'  width='250' height='30' viewBox='0 0 1000 120'><rect fill='#000000' width='1000' height='120'/><g  fill='none' stroke='#222' stroke-width='10' stroke-opacity='1'><path d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/></g></svg>
\ No newline at end of file
diff --git a/app/components/app/cprj/entry.vue b/app/components/app/cprj/entry.vue
new file mode 100644
index 00000000..d03bbf77
--- /dev/null
+++ b/app/components/app/cprj/entry.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+const [subjective, subjectiveAttrs] = defineField('subjective')
+const [objective, objectiveAttrs] = defineField('objective')
+const [assesment, assesmentAttrs] = defineField('assesment')
+const [plan, planAttrs] = defineField('plan')
+const [review, reviewAttrs] = defineField('review')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="my-2">
+        <h1 class="font-semibold">Data Petugas</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>PPA</Label>
+            <Field>
+              <Input disabled />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Nama PPA</Label>
+            <Field>
+              <Input disabled />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Data S.O.A.P</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Subjektif</Label>
+            <Field>
+              <Textarea
+                v-model="subjective"
+                v-bind="subjectiveAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Objektif</Label>
+            <Field>
+              <Textarea
+                v-model="objective"
+                v-bind="objectiveAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Assesmen</Label>
+            <Field>
+              <Textarea
+                v-model="assesment"
+                v-bind="assesmentAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Plan</Label>
+            <Field>
+              <Textarea
+                v-model="plan"
+                v-bind="planAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Review</Label>
+            <Field>
+              <Textarea
+                v-model="review"
+                v-bind="reviewAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <Separator class="mt-8" />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/cprj/list.cfg.ts b/app/components/app/cprj/list.cfg.ts
new file mode 100644
index 00000000..a394e81d
--- /dev/null
+++ b/app/components/app/cprj/list.cfg.ts
@@ -0,0 +1,56 @@
+import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { GeneralConsent } from '~/models/general-consent'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+export const config: Config = {
+  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  headers: [
+    [
+      { label: 'Tanggal' },
+      { label: 'PPA' },
+      { label: 'Hasil' },
+      { label: 'Review & Verifikasi' },
+      { label: 'Status' },
+      { label: 'Aksi' },
+    ],
+  ],
+  keys: ['date', 'ppa', 'result', 'review', 'status', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+    date(rec) {
+      const recX = rec as GeneralConsent
+      return recX.date?.substring(0, 10) || '-'
+    },
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  } as RecStrFuncComponent,
+  htmls: {} as RecStrFuncUnknown,
+}
diff --git a/app/components/app/cprj/list.vue b/app/components/app/cprj/list.vue
new file mode 100644
index 00000000..46f595f5
--- /dev/null
+++ b/app/components/app/cprj/list.vue
@@ -0,0 +1,34 @@
+<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
+}
+const props = 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"
+    />
+    <!-- FIXME: pindahkan ke content/division/list.vue   -->
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/device-order-item/entry-form.vue b/app/components/app/device-order-item/entry-form.vue
new file mode 100644
index 00000000..3ae2d200
--- /dev/null
+++ b/app/components/app/device-order-item/entry-form.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Pubs
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import * as CB from '~/components/pub/my-ui/combobox'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+// This scope
+import type { DeviceOrderItem } from '~/models/device-order-item';
+import type { Device } from '~/models/device';
+
+// Props
+const props = defineProps<{
+  data: DeviceOrderItem
+  devices: Device[]
+}>()
+
+// Refs
+const { devices } = toRefs(props)
+const deviceItems = ref<CB.Item[]>([])
+
+// Nav actions
+type ClickType = 'close' | 'save'
+
+// Emits
+const emit = defineEmits<{
+  close: [],
+  save: [data: DeviceOrderItem],
+  'update:searchText': [value: string]
+}>()
+
+// Reactivities
+watch(devices, (data) => {
+  deviceItems.value = CB.objectsToItems(data, 'code', 'name')
+})
+
+// Functions
+function searchDeviceText(value: string) {
+  emit('update:searchText', value)
+}
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
+      <DE.Label>Nama</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          v-model="data.device_code"
+          :items="deviceItems"
+          @update:searchText="searchDeviceText"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Jumlah</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" type="number" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/device-order-item/list-entry.config.ts b/app/components/app/device-order-item/list-entry.config.ts
index f2f3ef86..d47c4368 100644
--- a/app/components/app/device-order-item/list-entry.config.ts
+++ b/app/components/app/device-order-item/list-entry.config.ts
@@ -1,36 +1,35 @@
 import { defineAsyncComponent } from 'vue'
-import type { Config } from '~/components/pub/my-ui/data-table'
-
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, { width: 200 }, { width: 100 }],
   headers: [[{ label: 'Nama' }, { label: 'Jumlah' }, { label: '' }]],
-  keys: ['name', 'count', 'action'],
+  keys: ['device.name', 'quantity', 'action'],
   delKeyNames: [
     { key: 'name', label: 'Nama' },
     { key: 'count', label: 'Jumlah' },
   ],
-  skeletonSize: 10
+  skeletonSize: 10,
   // funcParsed: {
   //   parent: (rec: unknown): unknown => {
   //     const recX = rec as SmallDetailDto
   //     return recX.parent?.name || '-'
   //   },
   // },
-  // funcComponent: {
-  //   action(rec: object, idx: any) {
-  //     const res: RecComponent = {
-  //       idx,
-  //       rec: rec as object,
-  //       component: action,
-  //       props: {
-  //         size: 'sm',
-  //       },
-  //     }
-  //     return res
-  //   },
-  // }
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  }
 }
 
diff --git a/app/components/app/device-order-item/list-entry.vue b/app/components/app/device-order-item/list-entry.vue
index 26f6691d..b6031228 100644
--- a/app/components/app/device-order-item/list-entry.vue
+++ b/app/components/app/device-order-item/list-entry.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
 import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
 import { config } from './list-entry.config'
+import type { DeviceOrderItem } from '~/models/device-order-item';
+
+defineProps<{
+  data: DeviceOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  add: []
+}>()
 </script>
 
 <template>
-  <DataTable v-bind="config" :rows="[]" class="border mb-3 2xl:mb-4" />
+  <DataTable v-bind="config" :rows="data" class="border mb-3 2xl:mb-4" />
   <div>
-    <Button>
-      Tambah
+    <Button @click="emit('add')">
+      <Icon name="i-lucide-plus" />
+      Tambah Item
     </Button>
   </div>
 </template>
diff --git a/app/components/app/device-order/confirmation-info.vue b/app/components/app/device-order/confirmation-info.vue
new file mode 100644
index 00000000..6711091f
--- /dev/null
+++ b/app/components/app/device-order/confirmation-info.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DeviceOrder } from '~/models/device-order'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+defineProps<{
+  data: DeviceOrder | null | undefined
+}>()
+</script>
+<template>
+    <DE.Block mode="preview" label-size="small" class="!mb-0">
+      <DE.Cell>
+        <DE.Label>Tgl. Order</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ data?.createdAt?.substring(0, 10) }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>DPJP</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ data?.doctor?.employee?.person?.name }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+</template>
\ No newline at end of file
diff --git a/app/components/app/device-order/entry-form.vue b/app/components/app/device-order/entry-form.vue
index bea2b6eb..4e66c441 100644
--- a/app/components/app/device-order/entry-form.vue
+++ b/app/components/app/device-order/entry-form.vue
@@ -1,6 +1,25 @@
 <script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { DeviceOrder } from '~/models/device-order';
+
+defineProps<{
+  data: DeviceOrder
+}>()
 </script>
 
 <template>
-    Test
+  <DE.Block :col-count="2" mode="preview">
+    <DE.Cell>
+      <DE.Label>Tanggal</DE.Label>
+      <DE.Field>
+        {{ data?.createdAt?.substring(0, 10) }}
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>DPJP</DE.Label>
+      <DE.Field>
+        {{ data?.doctor?.employee?.person?.name }}
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
 </template>
diff --git a/app/components/app/device-order/list.config.ts b/app/components/app/device-order/list.config.ts
index 7580c576..04a6c9fc 100644
--- a/app/components/app/device-order/list.config.ts
+++ b/app/components/app/device-order/list.config.ts
@@ -1,13 +1,18 @@
-import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import type { DeviceOrder } from '~/models/device-order'
-import { defineAsyncComponent } from 'vue'
+import type { DeviceOrderItem } from '~/models/device-order-item'
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))
 
 export const config: Config = {
-  cols: [{ width: 120 }, { }, { }, { width: 50 }],
-  headers: [[{ label: 'Tanggal' }, { label: 'DPJP' }, { label: 'Alat Kesehatan' }, { label: '' }]],
-  keys: ['createdAt', 'encounter.doctor.person.name', 'items', 'action'],
+  cols: [{ width: 120 }, { }, { }, { }, { width: 50 }],
+  headers: [[
+    { label: 'Tanggal' },
+    { label: 'DPJP' },
+    { label: 'Alat Kesehatan' },
+    { label: 'Status' },
+    { label: '' }]],
+  keys: ['createdAt', 'doctor.employee.person.name', 'items', 'status_code', 'action'],
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
@@ -16,27 +21,45 @@ export const config: Config = {
   htmls: {
     items: (rec: unknown): unknown => {
       const recX = rec as DeviceOrder
-      return recX.items?.length || 0
+      if (recX.items?.length > 0) {
+        let output = '<table><tbody>'
+        recX.items.forEach((item: DeviceOrderItem) => {
+          output += '' +
+            '<tr>'+
+              `<td class="pe-10">${item.device?.name}</td>` +
+              '<td class="w-4">:</td>' +
+              `<td class="w-10">${item.quantity}</td>` +
+            '</tr>'
+        })
+        output += '</tbody></table>'
+        return output
+      } else {
+        return '-'
+      }
+    },
+  },
+  parses: {
+    createdAt: (rec: unknown): unknown => {
+      const recX = rec as DeviceOrder
+      return recX.createdAt ? new Date(recX.createdAt).toLocaleDateString() : '-'
+    },
+    // 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,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
     },
   }
-  // funcParsed: {
-  //   parent: (rec: unknown): unknown => {
-  //     const recX = rec as SmallDetailDto
-  //     return recX.parent?.name || '-'
-  //   },
-  // },
-  // funcComponent: {
-  //   action(rec: object, idx: any) {
-  //     const res: RecComponent = {
-  //       idx,
-  //       rec: rec as object,
-  //       component: action,
-  //       props: {
-  //         size: 'sm',
-  //       },
-  //     }
-  //     return res
-  //   },
-  // }
 }
 
diff --git a/app/components/app/device-order/list.vue b/app/components/app/device-order/list.vue
index 37b24ea3..83f57dd6 100644
--- a/app/components/app/device-order/list.vue
+++ b/app/components/app/device-order/list.vue
@@ -8,12 +8,10 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 // Configs
 import { config } from './list.config'
 
-interface Props {
+defineProps<{
   data: any[]
   paginationMeta: PaginationMeta
-}
-
-defineProps<Props>()
+}>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -28,7 +26,7 @@ function handlePageChange(page: number) {
   <div class="space-y-4">
     <PubMyUiDataTable
       v-bind="config"
-      :rows="[]"
+      :rows="data"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/division-position/entry-form.vue b/app/components/app/division-position/entry-form.vue
index 2525b49b..b25c9d0c 100644
--- a/app/components/app/division-position/entry-form.vue
+++ b/app/components/app/division-position/entry-form.vue
@@ -40,7 +40,7 @@ const { defineField, errors, meta } = useForm({
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [division, divisionAttrs] = defineField('division_id')
+const [division, divisionAttrs] = defineField('division_code')
 const [employee, employeeAttrs] = defineField('employee_id')
 const [headStatus, headStatusAttrs] = defineField('headStatus')
 
@@ -62,8 +62,8 @@ const headStatusStr = computed<string>({
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.division_id !== undefined)
-    division.value = props.values.division_id ? Number(props.values.division_id) : null
+  if (props.values.division_code !== undefined)
+    division.value = props.values.division_code ? String(props.values.division_code) : 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
@@ -72,7 +72,7 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  division.value = null
+  division.value = ''
   employee.value = null
   headStatus.value = false
 }
@@ -83,7 +83,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    division_id: division.value || null,
+    division_code: division.value || '',
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -130,7 +130,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Posisi Divisi</Label>
-        <Field :errMessage="errors.division_id">
+        <Field :errMessage="errors.division_code">
           <Combobox
             id="division"
             v-model="division"
diff --git a/app/components/app/division-position/entry.vue b/app/components/app/division-position/entry.vue
index da4782c0..51babd91 100644
--- a/app/components/app/division-position/entry.vue
+++ b/app/components/app/division-position/entry.vue
@@ -18,7 +18,7 @@ import { genDivisionPosition } from '~/models/division-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  divisionId: number
+  divisionId: string
   employees: any[]
   values: any
   isLoading?: boolean
diff --git a/app/components/app/division/entry-form.vue b/app/components/app/division/entry-form.vue
index 7702fdc6..19ca8196 100644
--- a/app/components/app/division/entry-form.vue
+++ b/app/components/app/division/entry-form.vue
@@ -36,25 +36,25 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    parent_id: null,
+    parent_code: null,
   } as Partial<DivisionFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [parent, parentAttrs] = defineField('parent_id')
+const [parent, parentAttrs] = defineField('parent_code')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
+  if (props.values.parent_code !== undefined) parent.value = String(props.values.parent_code)
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  parent.value = null
+  parent.value = ''
 }
 
 // Form submission handler
@@ -63,7 +63,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    parent_id: parent.value || null,
+    parent_code: parent.value || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -108,7 +108,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Divisi Induk</Label>
-        <Field :errMessage="errors.parent_id">
+        <Field :errMessage="errors.parent_code">
           <TreeSelect
             id="parent"
             v-model="parent"
diff --git a/app/components/app/document-upload/_common/select-doc-type.vue b/app/components/app/document-upload/_common/select-doc-type.vue
new file mode 100644
index 00000000..70f78a7b
--- /dev/null
+++ b/app/components/app/document-upload/_common/select-doc-type.vue
@@ -0,0 +1,71 @@
+<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 { docTypeCode, supportingDocOpt, type docTypeCodeKey } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+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
+
+</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="supportingDocOpt"
+              :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/document-upload/entry-form.vue b/app/components/app/document-upload/entry-form.vue
new file mode 100644
index 00000000..f97a5161
--- /dev/null
+++ b/app/components/app/document-upload/entry-form.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import FileField from '~/components/pub/my-ui/form/file-field.vue'
+import SelectDocType from './_common/select-doc-type.vue'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    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="officer"
+        label="Petugas Upload"
+        placeholder="Masukkan Petugas Upload"
+        :is-disabled="true"
+      />
+      <DE.Cell :col-span="2">
+        <Separator class="w-full my-4"/>
+        <DE.Block :col-count="3" :cell-flex="false">
+          <InputBase
+            field-name="name"
+            label="Nama Dokumen"
+            placeholder="Maukkan Nama Dokumen"
+          />
+          <SelectDocType
+            field-name="type_code"
+            label="Tipe Dokumen"
+            placeholder="Pilih Jenis Dokumen"
+            :errors="errors"
+            is-required
+          />
+          <FileField
+            field-name="content"
+            label="Upload Dokumen"
+            placeholder="Unggah dokumen"
+            :errors="errors"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+        </DE.Block>
+      </DE.Cell>
+    </DE.Block>    
+  </Form>
+</template>
diff --git a/app/components/app/document-upload/list.cfg.ts b/app/components/app/document-upload/list.cfg.ts
new file mode 100644
index 00000000..979c916d
--- /dev/null
+++ b/app/components/app/document-upload/list.cfg.ts
@@ -0,0 +1,43 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import { docTypeCode, docTypeLabel, type docTypeCodeKey } from '~/lib/constants'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {width: 50},],
+
+  headers: [
+    [
+      { label: 'Nama Dokumen' },
+      { label: 'Tipe Dokumen' },
+      { label: 'Petugas Upload' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['fileName', 'type_code', 'employee.name', 'action'],
+
+  delKeyNames: [
+
+  ],
+
+  parses: {
+    type_code: (v: unknown) => {
+      return docTypeLabel[v?.type_code as docTypeCodeKey]
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+  },
+}
diff --git a/app/components/app/document-upload/list.vue b/app/components/app/document-upload/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/document-upload/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/encounter/dropdown-action.vue b/app/components/app/encounter/dropdown-action.vue
new file mode 100644
index 00000000..0cd85204
--- /dev/null
+++ b/app/components/app/encounter/dropdown-action.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/types'
+import { ActionEvents } 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 activeServicePosition = inject<Ref<string>>('activeServicePosition')! // previously: activePosition
+
+const activeKey = ref<string | null>(null)
+const linkItemsFiltered = ref<LinkItem[]>([])
+const baseLinkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    value: 'detail',
+    onClick: () => {
+      proceedItem(ActionEvents.showDetail)
+    },
+    icon: 'i-lucide-eye',
+  },
+]
+
+const medicalLinkItems: LinkItem[] = [
+  {
+    label: 'Process',
+    value: 'process',
+    onClick: () => {
+      proceedItem(ActionEvents.showProcess)
+    },
+    icon: 'i-lucide-shuffle',
+  },
+]
+
+const regLinkItems: LinkItem[] = [
+  {
+    label: 'Print',
+    value: 'print',
+    onClick: () => {
+      proceedItem(ActionEvents.showPrint)
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Batalkan',
+    value: 'cancel',
+    onClick: () => {
+      proceedItem(ActionEvents.showCancel)
+    },
+    icon: 'i-lucide-circle-x',
+  },
+  {
+    label: 'Hapus',
+    value: 'remove',
+    onClick: () => {
+      proceedItem(ActionEvents.showConfirmDelete)
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+const voidLinkItems: LinkItem[] = [
+   {
+    label: 'Nothing',
+    value: 'nothing',
+    icon: 'i-lucide-file',
+  },
+]
+
+linkItemsFiltered.value = [...baseLinkItems]
+
+getLinks()
+
+watch(activeServicePosition, () => {
+  getLinks()
+})
+
+function proceedItem(action: string) {
+  recId.value = props.rec.id || 0
+  recItem.value = props.rec
+  recAction.value = action
+}
+
+function getLinks() {
+  switch (activeServicePosition.value) {
+    case 'medical':
+      linkItemsFiltered.value = [...baseLinkItems, ...medicalLinkItems]
+      break
+    case 'registration':
+      linkItemsFiltered.value = [...baseLinkItems, ...regLinkItems]
+    case 'unit|resp':
+      linkItemsFiltered.value = [...baseLinkItems]
+      break
+    default:
+      linkItemsFiltered.value = voidLinkItems
+      break
+  }
+}
+</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 linkItemsFiltered"
+            :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/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 9c24a0c6..22acbbb8 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -20,6 +20,7 @@ import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
 // Helpers
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
 
 const props = defineProps<{
   isLoading?: boolean
@@ -92,8 +93,9 @@ watch(subSpecialistId, async (newValue) => {
   }
 })
 
-// Watch SEP number changes to notify parent
-watch(sepNumber, (newValue) => {
+// Debounced SEP number watcher: emit change only after user stops typing
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+watch(debouncedSepNumber, (newValue) => {
   emit('event', 'sep-number-changed', newValue)
 })
 
@@ -452,7 +454,11 @@ defineExpose({
                     name="i-lucide-loader-2"
                     class="h-4 w-4 animate-spin"
                   />
-                  <span v-else>+</span>
+                   <Icon
+                    v-else
+                    name="i-lucide-plus"
+                    class="h-4 w-4"
+                  />
                 </Button>
                 <Button
                   v-else
diff --git a/app/components/app/encounter/filter.vue b/app/components/app/encounter/filter-form.vue
similarity index 100%
rename from app/components/app/encounter/filter.vue
rename to app/components/app/encounter/filter-form.vue
diff --git a/app/components/app/encounter/filter-nav.vue b/app/components/app/encounter/filter-nav.vue
new file mode 100644
index 00000000..2a16d723
--- /dev/null
+++ b/app/components/app/encounter/filter-nav.vue
@@ -0,0 +1,123 @@
+<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 { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
+  onFilterClick?: () => void
+  onExportPdf?: () => void
+  onExportExcel?: () => void
+  onExportCsv?: () => void
+}>()
+
+// 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',
+})
+
+// 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: oneMonthAgoCalendar,
+  end: todayCalendar,
+}) as Ref<DateRange>
+
+// function onFilterClick() {
+//   console.log('Search:', searchQuery.value)
+//   console.log('Date Range:', dateRange.value)
+//   props.refSearchNav?.onClick()
+// }
+</script>
+
+<template>
+  <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" />
+  </div>
+
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn('w-[200px] 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>
+
+  <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 @click="onExportPdf">
+        Ekspor PDF
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="onExportCsv">
+        Ekspor CSV
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="onExportExcel">
+        Ekspor Excel
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/app/components/app/encounter/history-button-menu.vue b/app/components/app/encounter/history-button-menu.vue
new file mode 100644
index 00000000..4274a98f
--- /dev/null
+++ b/app/components/app/encounter/history-button-menu.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+// Components
+import { Button } from '~/components/pub/ui/button'
+
+const route = useRoute()
+const router = useRouter()
+
+// Track active menu item from query param
+const activeMenu = computed(() => route.query.menu as string || '')
+
+interface ButtonItems {
+  label: string
+  icon: string
+  value: string
+  type: 'icon' | 'image'
+}
+
+const itemsOne: ButtonItems[] = [
+  {
+    label: 'Data Pendaftaran',
+    icon: 'i-lucide-file',
+    value: 'register',
+    type: 'icon',
+  },
+  {
+    label: 'Status Pembayaran',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'status',
+    type: 'icon',
+  },
+  {
+    label: 'Riwayat Pasien',
+    icon: 'i-lucide-history',
+    value: 'history',
+    type: 'icon',
+  },
+  {
+    label: 'Penunjang',
+    icon: 'i-lucide-library-big',
+    value: 'support',
+    type: 'icon',
+  },
+  {
+    label: 'Resep',
+    icon: 'i-lucide-pill',
+    value: 'receipt',
+    type: 'icon',
+  },
+  {
+    label: 'DPJP',
+    icon: 'i-lucide-stethoscope',
+    value: 'doctor',
+    type: 'icon',
+  },
+  {
+    label: 'I-Care BPJS',
+    icon: '/bpjs.png',
+    value: 'bpjs',
+    type: 'image',
+  },
+  {
+    label: 'File SEP',
+    icon: 'i-lucide-file',
+    value: 'sep',
+    type: 'icon',
+  },
+]
+
+const itemsTwo: ButtonItems[] = [
+  {
+    label: 'Tarif Tindakan',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list',
+    type: 'icon',
+  },
+  {
+    label: 'Tarif Tindakan Paket',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list-package',
+    type: 'icon',
+  },
+]
+
+function handleClick(value: string) {
+  router.replace({ path: route.path, query: { menu: value } })
+}
+</script>
+
+<template>
+  <div class="my-4">
+  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">History Pasien:</h2>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsOne"
+      :key="item.value"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-300 bg-orange-400 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
+    >
+      <Icon v-if="item.type === 'icon'"
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
+      {{ item.label }}
+    </Button>
+  </div>
+  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Billing Pasien:</h2>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsTwo"
+      :key="item.value"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-300 bg-orange-400 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
+    >
+      <Icon
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      {{ item.label }}
+    </Button>
+  </div>
+  </div>
+</template>
diff --git a/app/components/app/encounter/list.cfg.ts b/app/components/app/encounter/list.cfg.ts
index 9ebbc34f..cc0b951c 100644
--- a/app/components/app/encounter/list.cfg.ts
+++ b/app/components/app/encounter/list.cfg.ts
@@ -6,7 +6,7 @@ import { getAge } from '~/lib/date'
 
 type SmallDetailDto = Encounter
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
+const action = defineAsyncComponent(() => import('./dropdown-action.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const config: Config = {
diff --git a/app/components/app/encounter/list.vue b/app/components/app/encounter/list.vue
index 1d58d6a7..801e5b4c 100644
--- a/app/components/app/encounter/list.vue
+++ b/app/components/app/encounter/list.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
 import { config } from './list.cfg'
 
 const props = defineProps<{
-  data: any[]
+  data: any[],
 }>()
 </script>
 
 <template>
-  <PubMyUiDataTable
+  <DataTable
     v-bind="config"
-    :rows="data"
+    :rows="props.data"
   />
 </template>
diff --git a/app/components/app/encounter/patient-info-collapsible.vue b/app/components/app/encounter/patient-info-collapsible.vue
new file mode 100644
index 00000000..924a8c2e
--- /dev/null
+++ b/app/components/app/encounter/patient-info-collapsible.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// Types
+import type { Encounter } from '~/models/encounter'
+
+// Components
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+    <!-- Data Pasien -->
+    <Accordion type="single" defaultValue="item-patient" collapsible>
+      <AccordionItem value="item-patient" class="border-none">
+        <AccordionTrigger class="focus:outline-none focus:ring-0">
+          <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+        </AccordionTrigger>
+        <AccordionContent>
+          <EncounterQuickInfoFull :data="props.data" :is-grid="true" />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  </div>
+</template>
diff --git a/app/components/app/encounter/patient-info.vue b/app/components/app/encounter/patient-info.vue
new file mode 100644
index 00000000..ea41199e
--- /dev/null
+++ b/app/components/app/encounter/patient-info.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// Types
+import type { Encounter } from '~/models/encounter'
+
+// Components
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+    <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+    <EncounterQuickInfoFull :data="props.data" :is-grid="false" />
+  </div>
+</template>
diff --git a/app/components/app/encounter/quick-info-full.vue b/app/components/app/encounter/quick-info-full.vue
new file mode 100644
index 00000000..4cbc5bfb
--- /dev/null
+++ b/app/components/app/encounter/quick-info-full.vue
@@ -0,0 +1,247 @@
+<script setup lang="ts">
+// Helpers
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { getAge } from '~/lib/date'
+import { cn } from "~/lib/utils"
+
+// Types
+import type { Encounter } from '~/models/encounter'
+import { paymentTypes } from '~/lib/constants.vclaim'
+
+const props = defineProps<{
+  data: Encounter
+  isGrid?: boolean
+}>()
+
+const isGrid = props.isGrid !== undefined ? props.isGrid : true
+
+// Address
+const address = computed(() => {
+  if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
+    return props.data.patient.person.addresses.map((a) => a.address).join(', ')
+  }
+  return '-'
+})
+
+// DPJP
+const dpjp = computed(() => {
+  if (props.data.responsible_doctor) {
+    const dp = props.data.responsible_doctor.employee.person
+    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
+  } else if (props.data.appointment_doctor) {
+    const dp = props.data.appointment_doctor.employee.person
+    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
+  }
+  return '-'
+})
+
+// Tgl. Lahir dengan Umur
+const birthDateFormatted = computed(() => {
+  if (!props.data.patient.person.birthDate) {
+    return '-'
+  }
+  try {
+    const ageData = getAge(props.data.patient.person.birthDate)
+    const ageYears = ageData.extFormat.split(' ')[0] || '0'
+    return `${ageData.idFormat} (${ageYears} Tahun)`
+  } catch {
+    return '-'
+  }
+})
+
+// Tgl. Masuk RS dengan waktu
+const registeredDateFormatted = computed(() => {
+  const dateStr = props.data.registeredAt || props.data.visitDate
+  if (!dateStr) {
+    return '-'
+  }
+  try {
+    const date = parseISO(dateStr)
+    return format(date, 'dd MMMM yyyy HH:mm', { locale: localeID })
+  } catch {
+    return '-'
+  }
+})
+
+// Jns. Kelamin
+const genderLabel = computed(() => {
+  const code = props.data.patient.person.gender_code
+  if (!code) return '-'
+  // Map common gender codes
+  if (code === 'M' || code === 'male' || code.toLowerCase() === 'l') {
+    return 'Laki-laki'
+  } else if (code === 'F' || code === 'female' || code.toLowerCase() === 'p') {
+    return 'Perempuan'
+  }
+  return code
+})
+
+// Jns. Pembayaran
+const paymentTypeLabel = computed(() => {
+  const code = props.data.paymentMethod_code
+  if (!code) return '-'
+
+  // Map payment method codes
+  if (code === 'insurance') {
+    return 'JKN'
+  } else if (code === 'jkn') {
+    return 'JKN'
+  } else if (code === 'jkmm') {
+    return 'JKMM'
+  } else if (code === 'spm') {
+    return 'SPM'
+  } else if (code === 'pks') {
+    return 'PKS'
+  }
+
+  // Try to get from paymentTypes constant
+  if (paymentTypes[code]) {
+    return paymentTypes[code].split(' ')[0] // Get first part (e.g., "JKN" from "JKN (Jaminan...)")
+  }
+
+  return code
+})
+
+// No. Billing - try to get from trx_number or other billing fields
+const billingNumber = computed(() => {
+  // Check if encounter has payment data with trx_number
+  if ((props.data as any).trx_number) {
+    return (props.data as any).trx_number
+  }
+  // Check if encounter has payment relation
+  if ((props.data as any).payment?.trx_number) {
+    return (props.data as any).payment.trx_number
+  }
+  return '-'
+})
+
+// Nama Ruang - from unit name or room relation
+const roomName = computed(() => {
+  if (props.data.unit?.name) {
+    return props.data.unit.name
+  }
+  // Check if there's a room relation
+  if ((props.data as any).room?.name) {
+    return (props.data as any).room.name
+  }
+  return '-'
+})
+
+// No Bed - from bed relation or field
+const bedNumber = computed(() => {
+  // Check if encounter has bed data
+  if ((props.data as any).bed?.number) {
+    return (props.data as any).bed.number
+  }
+  if ((props.data as any).bed_number) {
+    return (props.data as any).bed_number
+  }
+  return '-'
+})
+</script>
+
+<template>
+  <h2 class="mb-4 font-semibold md:text-base 2xl:text-lg">Data Pasien:</h2>
+  <!-- 4 Column Grid Layout -->
+  <div :class="cn('grid grid-cols-4 gap-4', isGrid && 'sm:grid-cols-4')">
+    <!-- No. RM -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ data.patient.number || '-' }}
+      </p>
+    </div>
+
+    <!-- Tgl. Lahir -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tgl. Lahir</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ birthDateFormatted }}
+      </p>
+    </div>
+
+    <!-- Jns. Pembayaran -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Cara Bayar</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ paymentTypeLabel }}
+      </p>
+    </div>
+
+    <!-- No Bed -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No Bed</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ bedNumber }}
+      </p>
+    </div>
+
+    <!-- Nama Pasien -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Bed</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ data.patient.person.name || '-' }}
+      </p>
+    </div>
+
+    <!-- Tgl. Masuk RS -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tgl. Masuk RS</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ registeredDateFormatted }}
+      </p>
+    </div>
+
+    <!-- No. Billing -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Billing</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ billingNumber }}
+      </p>
+    </div>
+
+    <!-- DPJP -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">DPJP</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ dpjp }}
+      </p>
+    </div>
+
+    <!-- Alamat -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Alamat</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ address }}
+      </p>
+    </div>
+
+    <!-- Jns. Kelamin -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Jns. Kelamin</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ genderLabel }}
+      </p>
+    </div>
+
+    <!-- Nama Ruang -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Ruang</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ roomName }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
index 4b223917..17e1053b 100644
--- a/app/components/app/encounter/quick-info.vue
+++ b/app/components/app/encounter/quick-info.vue
@@ -1,52 +1,52 @@
 <script setup lang="ts">
 import * as DE from '~/components/pub/my-ui/doc-entry'
+import { genderCodes } from '~/const/key-val/person';
 import type { Encounter } from '~/models/encounter'
 
 const props = defineProps<{
   data: Encounter
 }>()
 
-let address = ''
+let address = ref('')
 if (props.data.patient.person.addresses) {
-  address = props.data.patient.person.addresses.map((a) => a.address).join(', ')
+  address.value = props.data.patient.person.addresses.map((a) => a.address).join(', ')
 }
 
-let dpjp = ''
+let dpjp = ref('')
 if (props.data.responsible_doctor) {
   const dp = props.data.responsible_doctor.employee.person
-  dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
+  dpjp.value = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
 } else if (props.data.appointment_doctor) {
-  dpjp = props.data.appointment_doctor.employee.person.name
+  dpjp.value = props.data.appointment_doctor.employee.person.name
 }
 </script>
 
 <template>
-  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+  <div class="w-full">
     <!-- Data Pasien -->
     <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
       {{ data.patient.person.name }} - {{ data.patient.number }}
     </h2>
-
     <div class="grid grid-cols-3">
       <div>
-        <DE.Block
-          mode="preview"
-          labelSize="large"
-        >
+        <DE.Block mode="preview">
           <DE.Cell>
             <DE.Label class="font-semibold">No. RM</DE.Label>
+            <DE.Colon />
             <DE.Field>
               {{ data.patient.person.birthDate?.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
+            <DE.Label class="font-semibold">Jns. Kelamin</DE.Label>
+            <DE.Colon />
             <DE.Field>
-              {{ data.patient.person.gender_code }}
+              {{ genderCodes[data.patient.person.gender_code as keyof typeof genderCodes] }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
             <DE.Label class="font-semibold">Alamat</DE.Label>
+            <DE.Colon />
             <DE.Field>
               <div v-html="address"></div>
             </DE.Field>
@@ -54,35 +54,39 @@ if (props.data.responsible_doctor) {
         </DE.Block>
       </div>
       <div>
-        <DE.Block
-          mode="preview"
-          labelSize="large"
-        >
+        <DE.Block mode="preview">
           <DE.Cell>
-            <DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
+            <DE.Label position="dynamic" class="font-semibold">Tgl. Masuk</DE.Label>
+            <DE.Colon />
             <DE.Field>
               {{ data.visitDate.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">Klinik</DE.Label>
+            <DE.Label position="dynamic" class="font-semibold">Poliklinik</DE.Label>
+            <DE.Colon />
             <DE.Field>
               {{ data.unit?.name }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">DPJP</DE.Label>
+            <DE.Label position="dynamic" class="font-semibold">Klinik</DE.Label>
+            <DE.Colon />
             <DE.Field>
-              {{ dpjp }}
+              {{ data.unit?.name }}
             </DE.Field>
           </DE.Cell>
         </DE.Block>
       </div>
       <div>
-        <DE.Block
-          mode="preview"
-          labelSize="large"
-        >
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label position="dynamic" class="font-semibold">DPJP</DE.Label>
+            <DE.Colon />
+            <DE.Field>
+              {{ dpjp }}
+            </DE.Field>
+          </DE.Cell>
           <DE.Cell>
             <DE.Label
               position="dynamic"
@@ -90,6 +94,7 @@ if (props.data.responsible_doctor) {
             >
               Billing
             </DE.Label>
+            <DE.Colon class="pt-1" />
             <DE.Field class="text-base 2xl:text-lg">
               Rp. 000.000
               <!-- {{ data }} -->
diff --git a/app/components/app/encounter/quick-shortcut.vue b/app/components/app/encounter/quick-shortcut.vue
new file mode 100644
index 00000000..751b2feb
--- /dev/null
+++ b/app/components/app/encounter/quick-shortcut.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+// Components
+import { Button } from '~/components/pub/ui/button'
+
+const route = useRoute()
+const router = useRouter()
+
+// Track active menu item from query param
+const activeMenu = computed(() => route.query.menu as string || '')
+
+interface ButtonItems {
+  label: string
+  icon: string
+  value: string
+  type: 'icon' | 'image'
+}
+
+const itemsOne: ButtonItems[] = [
+  {
+    label: 'Data Pendaftaran',
+    icon: 'i-lucide-file',
+    value: 'register',
+    type: 'icon',
+  },
+  {
+    label: 'Status Pembayaran',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'status',
+    type: 'icon',
+  },
+  {
+    label: 'Riwayat Pasien',
+    icon: 'i-lucide-history',
+    value: 'history',
+    type: 'icon',
+  },
+  {
+    label: 'Penunjang',
+    icon: 'i-lucide-library-big',
+    value: 'support',
+    type: 'icon',
+  },
+  {
+    label: 'Resep',
+    icon: 'i-lucide-pill',
+    value: 'receipt',
+    type: 'icon',
+  },
+  {
+    label: 'DPJP',
+    icon: 'i-lucide-stethoscope',
+    value: 'doctor',
+    type: 'icon',
+  },
+  {
+    label: 'I-Care BPJS',
+    icon: '/bpjs.png',
+    value: 'bpjs',
+    type: 'image',
+  },
+  {
+    label: 'File SEP',
+    icon: 'i-lucide-file',
+    value: 'sep',
+    type: 'icon',
+  },
+]
+
+const itemsTwo: ButtonItems[] = [
+  {
+    label: 'Tarif Tindakan',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list',
+    type: 'icon',
+  },
+  {
+    label: 'Tarif Tindakan Paket',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list-package',
+    type: 'icon',
+  },
+]
+
+function handleClick(value: string) {
+  router.replace({ path: route.path, query: { menu: value } })
+}
+</script>
+
+<template>
+  <h2 class="mb-4 font-semibold md:text-base 2xl:text-lg">Menu Cepat:</h2>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsOne"
+      :key="item.value"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-300 bg-orange-400 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
+    >
+      <Icon v-if="item.type === 'icon'"
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
+      {{ item.label }}
+    </Button>
+  </div>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsTwo"
+      :key="item.value"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-300 bg-orange-400 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
+    >
+      <Icon
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      {{ item.label }}
+    </Button>
+  </div>
+</template>
diff --git a/app/components/app/encounter/status-badge.vue b/app/components/app/encounter/status-badge.vue
index c8d4cd06..2ddd6549 100644
--- a/app/components/app/encounter/status-badge.vue
+++ b/app/components/app/encounter/status-badge.vue
@@ -12,7 +12,7 @@ const statusCodeColors: Record<string, Variants> = {
   review: 'fresh',
   process: 'fresh',
   done: 'positive',
-  canceled: 'destructive',
+  cancel: 'destructive',
   rejected: 'destructive',
   skiped: 'negative',
 }
diff --git a/app/components/app/general-consent/entry.vue b/app/components/app/general-consent/entry.vue
new file mode 100644
index 00000000..75e30cec
--- /dev/null
+++ b/app/components/app/general-consent/entry.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+// import { ref, watch, inject } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+// Define form fields
+const [relatives, relativesAttrs] = defineField('relatives')
+const [responsibleName, responsibleNameAttrs] = defineField('responsibleName')
+const [responsiblePhone, responsiblePhoneAttrs] = defineField('responsiblePhone')
+const [informant, informantAttrs] = defineField('informant')
+const [witness1, witness1Attrs] = defineField('witness1')
+const [witness2, witness2Attrs] = defineField('witness2')
+const [tanggal, tanggalAttrs] = defineField('tanggal')
+
+// Relatives list handling
+const addRelative = () => {
+  relatives.value = [...(relatives.value || []), { name: '', phone: '' }]
+}
+
+const removeRelative = (index: number) => {
+  relatives.value = relatives.value.filter((_: any, i: number) => i !== index)
+}
+
+const validate = async () => {
+  const result = await _validate()
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+
+const icdPreview = inject('icdPreview')
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <Cell>
+          <Label dynamic>Tanggal</Label>
+          <Field>
+            <Input
+              v-model="tanggal"
+              v-bind="tanggalAttrs"
+              :disabled="props.isReadonly"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2 flex items-center justify-between">
+        <h1 class="font-semibold">Anggota Keluarga</h1>
+        <Button
+          type="button"
+          @click="addRelative"
+        >
+          + Tambah
+        </Button>
+      </div>
+
+      <div
+        v-for="(item, idx) in relatives"
+        :key="idx"
+        class="my-2 rounded-md border border-slate-300 p-4"
+      >
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nama Anggota Keluarga</Label>
+            <Field>
+              <Input v-model="relatives[idx].name" />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>No. Hp Anggota Keluarga</Label>
+            <Field>
+              <Input v-model="relatives[idx].phone" />
+            </Field>
+          </Cell>
+        </Block>
+
+        <button
+          type="button"
+          class="mt-3 text-sm text-red-500"
+          @click="removeRelative(idx)"
+        >
+          Hapus
+        </button>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <!-- Responsible Section -->
+      <div class="my-2">
+        <h1 class="font-semibold">Penanggung Jawab</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nama Penanggung Jawab</Label>
+            <Field>
+              <Input
+                v-model="responsibleName"
+                v-bind="responsibleNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>No. Hp Penanggung Jawab</Label>
+            <Field>
+              <Input
+                v-model="responsiblePhone"
+                v-bind="responsiblePhoneAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <!-- Informant -->
+      <div class="my-2">
+        <h1 class="font-semibold">Pemberi Informasi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Informant</Label>
+            <Field>
+              <Input
+                v-model="informant"
+                v-bind="informantAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <!-- Witnesses -->
+      <div class="my-2">
+        <h1 class="font-semibold">Saksi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Saksi 1</Label>
+            <Field>
+              <Input
+                v-model="witness1"
+                v-bind="witness1Attrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Saksi 2</Label>
+            <Field>
+              <Input
+                v-model="witness2"
+                v-bind="witness2Attrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/general-consent/list.cfg.ts b/app/components/app/general-consent/list.cfg.ts
new file mode 100644
index 00000000..c2f57c54
--- /dev/null
+++ b/app/components/app/general-consent/list.cfg.ts
@@ -0,0 +1,82 @@
+import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { GeneralConsent } from '~/models/general-consent'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+export const config: Config = {
+  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  headers: [
+    [
+      { label: 'Tanggal' },
+      { label: 'Anggota Keluarga' },
+      { label: 'Penanggung Jawab' },
+      { label: 'Pemberi Informasi' },
+      { label: 'Saksi 1' },
+      { label: 'Saksi 2' },
+      { label: '' },
+    ],
+  ],
+  keys: ['date', 'relatives', 'responsible', 'informant', 'witness1', 'witness2', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    date(rec) {
+      const recX = rec as GeneralConsent
+      return recX?.createdAt?.substring(0, 10) || '-'
+    },
+    relatives(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.relatives?.join(', ') || '-'
+    },
+    responsible(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.responsible || '-'
+    },
+    informant(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.informant || '-'
+    },
+    witness1(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.witness1 || '-'
+    },
+    witness2(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.witness2 || '-'
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  } as RecStrFuncComponent,
+  htmls: {} as RecStrFuncUnknown,
+}
diff --git a/app/components/app/general-consent/list.vue b/app/components/app/general-consent/list.vue
new file mode 100644
index 00000000..46f595f5
--- /dev/null
+++ b/app/components/app/general-consent/list.vue
@@ -0,0 +1,34 @@
+<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
+}
+const props = 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"
+    />
+    <!-- FIXME: pindahkan ke content/division/list.vue   -->
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/installation-position/entry-form.vue b/app/components/app/installation-position/entry-form.vue
index 4f7885a1..1bf65323 100644
--- a/app/components/app/installation-position/entry-form.vue
+++ b/app/components/app/installation-position/entry-form.vue
@@ -40,7 +40,7 @@ const { defineField, errors, meta } = useForm({
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [installation, installationAttrs] = defineField('installation_id')
+const [installation, installationAttrs] = defineField('installation_code')
 const [employee, employeeAttrs] = defineField('employee_id')
 const [headStatus, headStatusAttrs] = defineField('headStatus')
 
@@ -62,8 +62,8 @@ const headStatusStr = computed<string>({
 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.installation_code !== undefined)
+    installation.value = props.values.installation_code ? String(props.values.installation_code) : 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
@@ -83,7 +83,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    installation_id: installation.value || null,
+    installation_code: String(installation.value) || '',
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -130,7 +130,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Instalasi</Label>
-        <Field :errMessage="errors.installation_id">
+        <Field :errMessage="errors.installation_code">
           <Combobox
             id="installation"
             v-model="installation"
diff --git a/app/components/app/medicine-form/entry-form.vue b/app/components/app/medicine-form/entry-form.vue
new file mode 100644
index 00000000..fb26631e
--- /dev/null
+++ b/app/components/app/medicine-form/entry-form.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Types
+import type { BaseFormData } from '~/schemas/base.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: BaseFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medicine-group"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medicine-form/list-cfg.ts b/app/components/app/medicine-form/list-cfg.ts
new file mode 100644
index 00000000..5b66812a
--- /dev/null
+++ b/app/components/app/medicine-form/list-cfg.ts
@@ -0,0 +1,38 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medicine-form/list.vue b/app/components/app/medicine-form/list.vue
new file mode 100644
index 00000000..e4544c2f
--- /dev/null
+++ b/app/components/app/medicine-form/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-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"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
index 42989fcb..af4df34f 100644
--- a/app/components/app/medicine/entry-form.vue
+++ b/app/components/app/medicine/entry-form.vue
@@ -18,6 +18,7 @@ interface Props {
   isReadonly?: boolean
   medicineGroups?: { value: string; label: string }[]
   medicineMethods?: { value: string; label: string }[]
+  medicineForms?: { value: string; label: string }[]
   uoms?: { value: string; label: string }[]
 }
 
@@ -36,6 +37,7 @@ const { defineField, errors, meta } = useForm({
     name: '',
     medicineGroup_code: '',
     medicineMethod_code: '',
+    medicineForm_code: '',
     uom_code: '',
     stock: 0,
   },
@@ -45,6 +47,7 @@ const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [medicineGroup_code, medicineGroupAttrs] = defineField('medicineGroup_code')
 const [medicineMethod_code, medicineMethodAttrs] = defineField('medicineMethod_code')
+const [medicineForm_code, medicineFormAttrs] = defineField('medicineForm_code')
 const [uom_code, uomAttrs] = defineField('uom_code')
 const [stock, stockAttrs] = defineField('stock')
 
@@ -53,6 +56,7 @@ if (props.values) {
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.medicineGroup_code !== undefined) medicineGroup_code.value = props.values.medicineGroup_code
   if (props.values.medicineMethod_code !== undefined) medicineMethod_code.value = props.values.medicineMethod_code
+  if (props.values.medicineForm_code !== undefined) medicineForm_code.value = props.values.medicineForm_code
   if (props.values.uom_code !== undefined) uom_code.value = props.values.uom_code
   if (props.values.stock !== undefined) stock.value = props.values.stock
 }
@@ -62,6 +66,7 @@ const resetForm = () => {
   name.value = ''
   medicineGroup_code.value = ''
   medicineMethod_code.value = ''
+  medicineForm_code.value = '',
   uom_code.value = ''
   stock.value = 0
 }
@@ -72,6 +77,7 @@ function onSubmitForm() {
     name: name.value || '',
     medicineGroup_code: medicineGroup_code.value || '',
     medicineMethod_code: medicineMethod_code.value || '',
+    medicineForm_code: medicineForm_code.value || '',
     uom_code: uom_code.value || '',
     stock: stock.value || 0,
   }
@@ -138,6 +144,20 @@ function onCancelForm() {
           />
         </Field>
       </Cell>
+      <Cell>
+        <Label height="compact">Sediaan Obat</Label>
+        <Field :errMessage="errors.medicineForm_code">
+          <Select
+            id="medicineForm_code"
+            v-model="medicineForm_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih metode pemberian"
+            v-bind="medicineFormAttrs"
+            :items="props.medicineForms || []"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
       <Cell>
         <Label>Satuan</Label>
         <Field :errMessage="errors.uom_code">
diff --git a/app/components/app/medicine/list-cfg.ts b/app/components/app/medicine/list-cfg.ts
index 059022c8..5d1740f8 100644
--- a/app/components/app/medicine/list-cfg.ts
+++ b/app/components/app/medicine/list-cfg.ts
@@ -15,12 +15,13 @@ export const config: Config = {
       { label: 'Golongan' },
       { label: 'Metode Pemberian' },
       { label: 'Satuan' },
+      { label: 'Sediaan' },
       { label: 'Stok' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'group', 'method', 'unit', 'stock', 'action'],
+  keys: ['code', 'name', 'group', 'method', 'unit', 'form', 'stock', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -37,6 +38,9 @@ export const config: Config = {
     unit: (rec: unknown): unknown => {
       return (rec as SmallDetailDto).uom?.name || '-'
     },
+    form: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineForm?.name || '-'
+    },
   },
 
   components: {
diff --git a/app/components/app/prescription-item/list-entry.cfg.ts b/app/components/app/prescription-item/list-entry.cfg.ts
index 070dd65f..cfc6bdbd 100644
--- a/app/components/app/prescription-item/list-entry.cfg.ts
+++ b/app/components/app/prescription-item/list-entry.cfg.ts
@@ -11,16 +11,17 @@ export const config: Config = {
   headers: [
     [
       { label: 'Nama' },
+      { label: 'Cara Buat' },
       { label: 'Bentuk' },
       { label: 'Freq' },
       { label: 'Dosis' },
-      { label: 'Interval' },
+      // { label: 'Interval' },
       { label: 'Total' },
       { label: '' },
     ],
   ],
 
-  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+  keys: ['medicine.name', 'isMix', 'medicine.medicineForm.name', 'frequency', 'dose', 'quantity', 'action'], // 
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -28,17 +29,8 @@ export const config: Config = {
   ],
 
   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 || '-'
+    isMix: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).isMix ? 'Racikan' : 'Non Racikan'
     },
   },
 
diff --git a/app/components/app/prescription-item/list.cfg.ts b/app/components/app/prescription-item/list.cfg.ts
index fd980bb1..5a3447ef 100644
--- a/app/components/app/prescription-item/list.cfg.ts
+++ b/app/components/app/prescription-item/list.cfg.ts
@@ -12,12 +12,11 @@ export const config: Config = {
       { label: 'Bentuk' },
       { label: 'Freq' },
       { label: 'Dosis' },
-      { label: 'Interval' },
       { label: 'Total' },
     ],
   ],
 
-  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total'],
+  keys: ['medicine.name', 'medicine.medicineForm.name', 'frequency', 'dose', 'total'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/app/prescription-item/list.vue b/app/components/app/prescription-item/list.vue
index ed64b09e..d8c4c107 100644
--- a/app/components/app/prescription-item/list.vue
+++ b/app/components/app/prescription-item/list.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
 import type { PrescriptionItem } from '~/models/prescription-item';
 import { config } from './list.cfg'
 
@@ -13,7 +15,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <PubMyUiDataTable class="border mb-2 2xl:mb-3"
+  <DataTable class="border mb-2"
     v-bind="config"
     :rows="data"
   />
diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index d9b4881e..05960307 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -1,29 +1,36 @@
 <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 * as CB from '~/components/pub/my-ui/combobox'
 
 import { genBase } from '~/models/_base';
-import { genMedicine } from '~/models/medicine';
+import { type Medicine, 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[]
+  medicines: Medicine[]
 }>()
 
+const { medicines } = toRefs(props)
+const medicineItems = ref<CB.Item[]>([])
+
 type ClickType = 'close' | 'save'
 
 const emit = defineEmits<{
   close: [],
   save: [data: PrescriptionItem, items: MedicinemixItem[]],
+  'update:searchText': [value: string]
 }>()
 
+watch(medicines, (data) => {
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -42,33 +49,43 @@ function addItem() {
     uom_code: '',
   })
 }
+
+function searchMedicineText(value: string) {
+  emit('update:searchText', value)
+}
+
+function deleteItem(idx: number) {
+  props.items.splice(idx, 1)
+}
 </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.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
+      <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.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.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.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.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 :colSpan="4">
+      <DE.Label>Cara Pakai</DE.Label>
+      <DE.Field><Input v-model="data.usage" /></DE.Field>
     </DE.Cell>
   </DE.Block>
   <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
@@ -77,20 +94,29 @@ function addItem() {
       <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.TableHead class="w-24">Satuan</Table.TableHead> -->
+        <Table.TableHead class="w-10"></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.TableRow v-if="items.length > 0" v-for="item, idx in items">
         <Table.TableCell>
-          <Input v-model="item.medicine.name" />
+          <CB.Combobox
+            v-model="data.medicine_code"
+            :items="medicineItems"
+            @update:searchText="searchMedicineText"
+          />
         </Table.TableCell>
         <Table.TableCell>
           <Input v-model="item.dose" />
         </Table.TableCell>
-        <Table.TableCell>
+        <!-- <Table.TableCell>
           <Input />
+        </Table.TableCell> -->
+        <Table.TableCell class="text-center">
+          <Button class="!w-7 !h-7 !p-0 rounded-full" @click="deleteItem(idx)">
+            <Icon name="i-lucide-trash" />
+          </Button>
         </Table.TableCell>
       </Table.TableRow>
       <Table.TableRow v-else>
@@ -102,7 +128,7 @@ function addItem() {
   </Table.Table>
   <div>
     <Button @click="addItem">
-      <LucidePlus />
+      <Icon name="i-lucide-plus" class="me-2" />
       Tambah
     </Button>
   </div>
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
index 25970646..78ee9ada 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -2,40 +2,45 @@
 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 * as CB from '~/components/pub/my-ui/combobox'
 
-import { bigTimeUnitCodes } from '~/lib/constants'
+// import { bigTimeUnitCodes } from '~/lib/constants'
 
+import { type Medicine } from '~/models/medicine';
 import type { PrescriptionItem } from '~/models/prescription-item'
 
 const props = defineProps<{
   data: PrescriptionItem
+  medicines: Medicine[]
 }>()
 
+const { medicines } = toRefs(props)
+const medicineItems = ref<CB.Item[]>([])
+const medicineForm = computed(() => {
+  const medicine = props.medicines.find(m => m.code === props.data.medicine_code)
+  return medicine ? medicine.medicineForm?.name : '--tidak diketahui--'
+})
+
 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],
+  'update:searchText': [value: string]
 }>()
 
+watch(medicines, (data) => {
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -43,13 +48,23 @@ function navClick(type: ClickType) {
     emit('save', props.data)
   }
 }
+
+function searchMedicineText(value: string) {
+  emit('update:searchText', value)
+}
 </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.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
+      <DE.Label>Nama</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          v-model="data.medicine_code"
+          :items="medicineItems"
+          @update:searchText="searchMedicineText"
+        />
+      </DE.Field>
     </DE.Cell>
     <DE.Cell>
       <DE.Label>Frequensi</DE.Label>
@@ -59,11 +74,7 @@ function navClick(type: ClickType) {
       <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.Cell>
       <DE.Label>Interval</DE.Label>
       <DE.Field>
         <Select
@@ -71,16 +82,20 @@ function navClick(type: ClickType) {
           :items="bigTimeUnitCodeItems"
         />
       </DE.Field>
-    </DE.Cell>
+    </DE.Cell> -->
     <DE.Cell>
       <DE.Label>Total</DE.Label>
       <DE.Field>
-        <Input v-model="data.quantity" />
+        <Input type="number" v-model="data.quantity" />
       </DE.Field>
     </DE.Cell>
-    <DE.Cell :colSpan="5">
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="medicineForm" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="4">
         <DE.Label>Cara Pakai</DE.Label>
-        <DE.Field><Input /></DE.Field>
+        <DE.Field><Input v-model="data.usage" /></DE.Field>
     </DE.Cell>
   </DE.Block>
   <Separator class="my-5" />
diff --git a/app/components/app/prescription/detail.vue b/app/components/app/prescription/detail.vue
index 694eb9a1..21962532 100644
--- a/app/components/app/prescription/detail.vue
+++ b/app/components/app/prescription/detail.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
       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.Block mode="preview" label-size="sm" :col-count=5 class="!mb-3">
         <DE.Cell :col-span="2">
           <DE.Label class="font-semibold">DPJP</DE.Label>
           <DE.Field>
diff --git a/app/components/app/prescription/entry.vue b/app/components/app/prescription/entry.vue
index ef8756e8..28041eea 100644
--- a/app/components/app/prescription/entry.vue
+++ b/app/components/app/prescription/entry.vue
@@ -1,17 +1,25 @@
+<script setup lang="ts">
+import type { Prescription } from '~/models/prescription';
+
+defineProps<{
+  data: Prescription
+}>()
+</script>
+
 <template>
-  <div class="md:grid md:grid-cols-2 font-semibold">
+  <div class="md:grid md:grid-cols-2">
     <div class="md:pe-10">
       <PubMyUiDocEntryBlock>
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input :value="data.issuedAt || data.createdAt?.substring(0, 10)" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input v-model="data.status_code" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
       </PubMyUiDocEntryBlock>
@@ -21,16 +29,22 @@
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input v-model="data.doctor.employee.person.name" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input value="......" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
       </PubMyUiDocEntryBlock>
     </div>
   </div>
+  <!-- <div class="">
+    <Button>
+      <Icon name="i-lucide-check" />
+      Simpan
+    </Button>
+  </div> -->
 </template>
diff --git a/app/components/app/prescription/flat-list.vue b/app/components/app/prescription/flat-list.vue
new file mode 100644
index 00000000..fe0bab9c
--- /dev/null
+++ b/app/components/app/prescription/flat-list.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import * as Table from '~/components/pub/ui/table'
+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';
+
+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 v-if="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>
+  <Table.Table>
+    <Table.TableHeader>
+      <Table.TableRow>
+        <Table.TableHead class="w-28">Tgl Order</Table.TableHead>
+        <Table.TableHead>DPJP</Table.TableHead>
+        <Table.TableHead>PPDS</Table.TableHead>
+        <Table.TableHead>Jenis Obat</Table.TableHead>
+        <Table.TableHead class="text-center">Status</Table.TableHead>
+        <Table.TableHead class="w-20"></Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody>
+      <Table.TableRow v-for="item, idx in data">
+        <Table.TableCell>
+          {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }}
+        </Table.TableCell>
+        <Table.TableCell>
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </Table.TableCell>
+        <Table.TableCell>
+        </Table.TableCell>
+        <Table.TableCell>
+          <div>
+            Racikan: {{ item.items.filter(function(element){ return element.isMix}).length }}
+          </div>
+          <div>
+            Non Racikan: {{ item.items.filter(function(element){ return !element.isMix}).length }}
+          </div>
+        </Table.TableCell>
+        <Table.TableCell class="text-center">
+          {{ item.status_code }}
+        </Table.TableCell>
+        <Table.TableCell class="text-end">
+          <Nav
+            v-if="item.status_code == 'new'"
+            :small-mode="true"
+            :default-class="'flex gap-1'"
+            @click="(type) => { navClick(type, item) }"
+          />
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <template v-for="item, idx in data">
+  </template>
+</template>
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/grouped-list.vue
similarity index 95%
rename from app/components/app/prescription/list.vue
rename to app/components/app/prescription/grouped-list.vue
index ae5126ca..07d6fcaa 100644
--- a/app/components/app/prescription/list.vue
+++ b/app/components/app/prescription/grouped-list.vue
@@ -5,7 +5,6 @@ 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[]
@@ -66,7 +65,7 @@ function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void
         />
       </div>
     </DE.Block>
-    <PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
+    <PrescriptionItem :data="item.items || []" 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/prescription/list-with-sub.vue b/app/components/app/prescription/list-with-sub.vue
index 14bc1785..4d1a2cdf 100644
--- a/app/components/app/prescription/list-with-sub.vue
+++ b/app/components/app/prescription/list-with-sub.vue
@@ -1,7 +1,5 @@
 <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'
+import * as DE from '~/components/pub/my-ui/doc-entry';
 </script>
 
 <template>
@@ -17,40 +15,40 @@
   <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>
+      <DE.Block mode="preview">
+        <DE.Cell>
+          <DE.Label>Order #1</DE.Label>
+          <DE.Colon />
+          <DE.Field>
             2025-01-01
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-        <PubCustomUiDocEntryCell>
-          <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
-          <PubCustomUiDocEntryColon />
-          <PubCustomUiDocEntryField>
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell>
+          <DE.Label>Status</DE.Label>
+          <DE.Colon />
+          <DE.Field>
               Status
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-      </PubCustomUiDocEntryBlock>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
     </div>
     <div>
-      <PubCustomUiDocEntryBlock mode="preview">
-        <PubCustomUiDocEntryCell>
-          <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
-          <PubCustomUiDocEntryColon />
-          <PubCustomUiDocEntryField>
+      <DE.Block mode="preview">
+        <DE.Cell>
+          <DE.Label>DPJP</DE.Label>
+          <DE.Colon />
+          <DE.Field>
               Nama Dokter
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-        <PubCustomUiDocEntryCell>
-          <PubCustomUiDocEntryLabel>PPDS</PubCustomUiDocEntryLabel>
-          <PubCustomUiDocEntryColon />
-          <PubCustomUiDocEntryField>
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell>
+          <DE.Label>PPDS</DE.Label>
+          <DE.Colon />
+          <DE.Field>
               Nama PPDS
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-      </PubCustomUiDocEntryBlock>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
     </div>
   </div>
 </template>
diff --git a/app/components/app/resume/_common/print-btn.vue b/app/components/app/resume/_common/print-btn.vue
new file mode 100644
index 00000000..5688d007
--- /dev/null
+++ b/app/components/app/resume/_common/print-btn.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ListItemDto } from '~/components/pub/my-ui/data/types';
+
+const props = defineProps<{
+  url: string
+  btnTxt?: string
+  rec: ListItemDto
+}>()
+
+function handlePrint() {
+   navigateTo(props.url || 'https://google.com', {external: true,open: { target: "_blank" },});
+}
+</script>
+
+<template>
+  <Button 
+    class="gap-3 items-center border-orange-400 text-orange-400"
+    variant="outline" @click="handlePrint">
+    <Icon name="i-lucide-printer" class="h-4 w-4" />
+    {{ props.btnTxt || 'Lampiran' }}
+  </Button>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/_common/select-arrangement.vue b/app/components/app/resume/_common/select-arrangement.vue
new file mode 100644
index 00000000..7e236ff0
--- /dev/null
+++ b/app/components/app/resume/_common/select-arrangement.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,
+  placeholder,
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const arrangementTypeOpts = [
+  { label: 'KRS', value: "krs" },
+  { label: 'MRS', value: "mrs" },
+  { label: 'Rujuk Internal', value: "rujukInternal" },
+  { label: 'Rujuk External', value: "rujukExternal" },
+  { label: 'Meninggal', value: "meninggal" },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      v-show="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 :name="fieldName" v-slot="{ componentField, value }">
+          <FormItem>
+            <FormControl>
+              <Select 
+                v-bind="componentField" 
+                :model-value="value"
+                :items="arrangementTypeOpts"
+                :defaultValue='arrangementTypeOpts[0]?.value' 
+              />
+            </FormControl>            
+            <FormMessage />
+          </FormItem>
+        </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-concious-level.vue b/app/components/app/resume/_common/select-concious-level.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-concious-level.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/resume/_common/select-date.vue b/app/components/app/resume/_common/select-date.vue
new file mode 100644
index 00000000..74245e7e
--- /dev/null
+++ b/app/components/app/resume/_common/select-date.vue
@@ -0,0 +1,121 @@
+<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
+  isDisabled?: boolean
+  isWithTime?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+  isWithTime = false,
+} = 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 && !isDisabled"
+    >
+      {{ 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="isWithTime ? 'datetime-local' : 'date'"
+              min="1900-01-01"
+              :max="new Date().toISOString().split('T')[0]"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              @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/resume/_common/select-death-cause.vue b/app/components/app/resume/_common/select-death-cause.vue
new file mode 100644
index 00000000..a155b139
--- /dev/null
+++ b/app/components/app/resume/_common/select-death-cause.vue
@@ -0,0 +1,71 @@
+<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,
+  placeholder,
+  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
+      v-show="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/resume/_common/select-faskes.vue b/app/components/app/resume/_common/select-faskes.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-faskes.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/resume/_common/select-following-arrangement.vue b/app/components/app/resume/_common/select-following-arrangement.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-following-arrangement.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/resume/_common/select-hospital-leave-condition.vue b/app/components/app/resume/_common/select-hospital-leave-condition.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-hospital-leave-condition.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/resume/_common/select-hospital-leave-method.vue b/app/components/app/resume/_common/select-hospital-leave-method.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-hospital-leave-method.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/resume/_common/select-icd-10.vue b/app/components/app/resume/_common/select-icd-10.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-icd-10.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/resume/_common/select-icd-9.vue b/app/components/app/resume/_common/select-icd-9.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-icd-9.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/resume/_common/select-national-program-service-status.vue b/app/components/app/resume/_common/select-national-program-service-status.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-national-program-service-status.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/resume/_common/select-national-program-service.vue b/app/components/app/resume/_common/select-national-program-service.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-national-program-service.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/resume/_common/select-pain-scale.vue b/app/components/app/resume/_common/select-pain-scale.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-pain-scale.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/resume/_common/select-primary-diagnosis.vue b/app/components/app/resume/_common/select-primary-diagnosis.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-primary-diagnosis.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/resume/_common/select-secondary-diagnosis.vue b/app/components/app/resume/_common/select-secondary-diagnosis.vue
new file mode 100644
index 00000000..a155b139
--- /dev/null
+++ b/app/components/app/resume/_common/select-secondary-diagnosis.vue
@@ -0,0 +1,71 @@
+<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,
+  placeholder,
+  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
+      v-show="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/resume/_common/verify-badge.vue b/app/components/app/resume/_common/verify-badge.vue
new file mode 100644
index 00000000..8a999895
--- /dev/null
+++ b/app/components/app/resume/_common/verify-badge.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Badge, type Variants } from '~/components/pub/ui/badge'
+
+const activeStatusCodes: Record<string, string> = {
+  verified: 'Terverifikasi',
+  validated: 'Tervalidasi',
+  unverified: 'Belum Verifikasi',
+  unvalidated: 'Batal Validasi',
+}
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusText = computed(() => {
+  let code: keyof typeof activeStatusCodes = `unverified`
+  switch (props.rec.status_code) {
+    case 1:
+      code = 'verified'
+      break
+    case 2:
+      code = 'validated'
+      break
+    case 3:
+      code = 'unverified'
+      break
+    case 4:
+      code = 'unvalidated'
+      break
+    default:
+      code = 'unverified'
+      break
+  }
+  return activeStatusCodes[code]
+})
+
+const badgeVariant = computed(() => {
+  let variant: Variants = `outline`
+  switch (props.rec.status_code) {
+    case 1:
+      variant = 'secondary'
+      break
+    case 2:
+      variant = 'default'
+      break
+    case 3:
+      variant = 'outline'
+      break
+    case 4:
+      variant = 'destructive'
+      break
+    default:
+      variant = 'outline'
+      break
+  }
+  return variant
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/add.vue b/app/components/app/resume/add.vue
new file mode 100644
index 00000000..d5fa3370
--- /dev/null
+++ b/app/components/app/resume/add.vue
@@ -0,0 +1,482 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import { FieldArray } from 'vee-validate'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+import SelectArrangement from './_common/select-arrangement.vue'
+import type { ResumeArrangementType } from '~/schemas/resume.schema'
+import SelectFaskes from './_common/select-faskes.vue'
+import SelectDeathCause from './_common/select-death-cause.vue'
+import SelectIcd10 from './_common/select-icd-10.vue'
+import SelectIcd9 from './_common/select-icd-9.vue'
+import SelectConciousLevel from './_common/select-concious-level.vue'
+import SelectPainScale from './_common/select-pain-scale.vue'
+import SelectNationalProgramService from './_common/select-national-program-service.vue'
+import SelectNationalProgramServiceStatus from './_common/select-national-program-service-status.vue'
+import SelectHospitalLeaveCondition from './_common/select-hospital-leave-condition.vue'
+import SelectHospitalLeaveMethod from './_common/select-hospital-leave-method.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  resumeArrangementType: ResumeArrangementType
+  errors?: FormErrors
+}>()
+
+const isActionHistoryOpen = inject(`isActionHistoryOpen`) as Ref<boolean>
+const isConsultationHistoryOpen = inject(`isConsultationHistoryOpen`) as Ref<boolean>
+const isSupportingHistoryOpen = inject(`isSupportingHistoryOpen`) as Ref<boolean>
+const isFarmacyHistoryOpen = inject(`isFarmacyHistoryOpen`) as Ref<boolean>
+const isNationalProgramServiceHistoryOpen = inject(`isNationalProgramServiceHistoryOpen`) as Ref<boolean>
+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),
+})
+
+const DEFAULT_SECONDARY_DIAGNOSIS_VALUE = {
+  diagnosis: '',
+  icd10: '',
+  diagnosisBasis: '',
+};
+const DEFAULT_SECONDARY_ACTION_VALUE = {
+  action: '',
+  icd9: '',
+  actionBasis: '',
+};
+const DEFAULT_CONSULTATION_VALUE = {
+  consultation: '',
+  consultationReply: '',
+};
+
+const initialFormValues = {
+  secondaryDiagnosis: [DEFAULT_SECONDARY_DIAGNOSIS_VALUE],
+  secondaryOperativeNonOperativeAct: [DEFAULT_SECONDARY_ACTION_VALUE],
+  consultation: [DEFAULT_CONSULTATION_VALUE],
+}
+</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 : initialFormValues">
+
+    <!-- Pasien -->
+    <h1 class="mb-3 text-base font-medium">Pemeriksaan Pasien</h1>
+    <DE.Block :col-count="3" :cell-flex="false">
+      <SelectDate field-name="inDate" label="Tanggal Masuk" :errors="errors" :is-disabled="true" />
+      <SelectDate field-name="outDate" label="Tanggal Keluar" :errors="errors" :is-disabled="true" />      
+      <InputBase
+        field-name="doctor_id"
+        :is-disabled="true"
+        label="DPJP" placeholder="DPJP"/>
+    </DE.Block> 
+    <DE.Block class="" :cell-flex="false">   
+      <InputBase
+        class="w-2/3"
+        field-name="first_diagnosis"
+        :is-disabled="true"
+        label="Diagnosis Masuk/Rujukan" placeholder="Diagnosis Masuk/Rujukan"/>
+    </DE.Block> 
+    <DE.Block :col-count="3" :cell-flex="false">
+      <TextAreaInput field-name="supplementCheckup"
+        label="Indikasi Rawat Jalan" placeholder="Indikasi Rawat Jalan" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Keluhan Utama (Singkat & Menunjang)" placeholder="Keluhan Utama (Singkat & Menunjang)" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Pemeriksaan Fisik (Singkat & Menunjang)" placeholder="Pemeriksaan Fisik (Singkat & Menunjang)" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Riwayat Penyakit" placeholder="Riwayat Penyakit" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Diagnosa Medis" placeholder="Diagnosa Medis" :errors="errors" />
+    </DE.Block>
+    <Separator class="my-4" />
+
+
+
+    <!-- DIAGNOSIS -->
+    <h1 class="mb-3 text-base font-medium">Diagnosa</h1>
+    <h1 class="mb-3 text-base font-medium">Diagnosa Utama</h1>
+    <DE.Block :col-count="2" class="" :cell-flex="false">   
+      <InputBase
+        field-name="diagnosis"
+        label="Diagnosa" placeholder="Masukkan Diagnosa"
+        :errors="errors" is-required />
+      <SelectIcd10
+        field-name="primaryDiagnosis"
+        label="ICD 10"
+        placeholder="ICD 10"
+        :errors="errors" is-required />
+      <DE.Cell :col-span="2">
+        <TextAreaInput field-name="supplementCheckup"
+        label="Dasar Diagnosa" placeholder="Masukkan Dasar Diagnosa utama Pasien" :errors="errors" />
+      </DE.Cell>
+
+
+      <DE.Cell :col-span="2">
+        <h1 class="mb-3 text-base font-medium">Diagnosa Sekunder</h1>
+        <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+
+          <FieldArray v-slot="{ fields, push, remove }" name="secondaryDiagnosis">
+            <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+              <div class="w-full">
+                <h1 class="font-medium">Diagnosa {{ idx + 1 }}</h1>
+                <div class="flex gap-3">
+                  <InputBase
+                    :field-name="`secondaryDiagnosis[${idx}].diagnosis`"
+                    label="Diagnosa" placeholder="Masukkan Diagnosa"
+                    :errors="errors" is-required />
+                  <SelectIcd10
+                    :field-name="`secondaryDiagnosis[${idx}].icd10`"
+                    label="ICD 10"
+                    placeholder="ICD 10"
+                    :errors="errors" is-required />
+                </div>
+                <TextAreaInput :field-name="`secondaryDiagnosis[${idx}].diagnosisBasis`"
+                  label="Dasar Diagnosa" placeholder="Masukkan Dasar Diagnosa Pasien" :errors="errors" />
+              </div>
+              <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
+                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+              </Button>
+            </div>
+            <Button type="button" variant="outline"
+              class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+              @click="push(DEFAULT_SECONDARY_DIAGNOSIS_VALUE)">
+              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+              Tambah Diagnosis
+            </Button>
+          </FieldArray>
+        </div>
+      </DE.Cell>
+
+
+      
+    </DE.Block>
+    <Separator class="my-4" />
+
+
+
+
+    <!-- Tindakan OPERATIF/NON OPERATIF -->
+    <div class="mb-3 flex gap-3 items-center">
+      <h1 class="text-base font-medium">Tindakan Operatif/Non Operatif</h1>
+      <Button variant="ghost"
+        class="gap-1 items-center text-orange-400"
+        @click="isActionHistoryOpen = true">
+        <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Tindakan</Button>
+    </div>
+    <h1 class="mb-3 font-normal">Tindakan Operatif/Non Operatif Utama</h1>
+    <DE.Block :col-count="2" class="" :cell-flex="false">   
+      <InputBase
+        field-name="diagnosis"
+        label="Tindakan" placeholder="Masukkan Tindakan"
+        :errors="errors" is-required />
+      <SelectIcd9
+        field-name="primaryDiagnosis"
+        label="ICD 9"
+        placeholder="ICD 9"
+        :errors="errors" is-required />
+      <DE.Cell :col-span="2">        
+        <TextAreaInput field-name="supplementCheckup"
+          label="Dasar Tindakan" placeholder="Masukkan Dasar Tindakan utama Pasien" :errors="errors" />
+      </DE.Cell>
+
+      <DE.Cell :col-span="2">
+        <h1 class="mb-3 text-base font-medium">Tindakan Lain</h1>
+        <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+
+          <FieldArray v-slot="{ fields, push, remove }" name="secondaryOperativeNonOperativeAct">
+            <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+              <div class="w-full">
+                <h1 class="font-medium">Tindakan {{ idx + 1 }}</h1>
+                <div class="flex gap-3">
+                  <InputBase
+                    :field-name="`secondaryOperativeNonOperativeAct[${idx}].action`"
+                    label="Tindakan" placeholder="Masukkan Tindakan"
+                    :errors="errors" is-required />
+                  <SelectIcd10
+                    :field-name="`secondaryOperativeNonOperativeAct[${idx}].icd9`"
+                    label="ICD 10"
+                    placeholder="ICD 10"
+                    :errors="errors" is-required />
+                </div>
+                <TextAreaInput :field-name="`secondaryOperativeNonOperativeAct[${idx}].actionBasis`"
+                  label="Dasar Tindakan" placeholder="Masukkan Dasar Tindakan Pasien" :errors="errors" />
+              </div>
+              <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
+                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+              </Button>
+            </div>
+            <Button type="button" variant="outline"
+              class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+              @click="push(DEFAULT_SECONDARY_ACTION_VALUE)">
+              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+              Tambah Tindakan
+            </Button>
+          </FieldArray>
+        </div>
+      </DE.Cell>
+      
+    </DE.Block>    
+    <TextAreaInput :field-name="`medicalAction`"
+      label="Tindakan Medis" placeholder="Masukkan Tindakan Medis" :errors="errors" />
+    <Separator class="my-4" />
+
+
+
+    <!-- KONSULTASI -->
+    <div class="mb-3 flex gap-3 items-center">
+      <h1 class="text-base font-medium">Konsultasi</h1>
+      <Button variant="ghost"
+        class="gap-1 items-center text-orange-400"
+        @click="isConsultationHistoryOpen = true">
+        <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Konsultasi</Button>
+    </div>
+      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+        <FieldArray v-slot="{ fields, push, remove }" name="consultation">
+          <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+            <div class="w-full">
+              <h1 class="font-medium mb-1">Konsultasi {{ idx + 1 }}</h1>
+              <div class="flex gap-3">
+                <TextAreaInput :field-name="`consultation[${idx}].consultation`"
+                  label="Konsultasi" placeholder="Masukkan Konsultasi" :errors="errors" />
+                <TextAreaInput :field-name="`consultation[${idx}].consultationReply`"
+                  label="Jawaban Konsultasi" placeholder="Masukkan Jawaban Konsultasi" :errors="errors" />
+              </div>
+            </div>
+            <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
+              <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+            </Button>
+          </div>
+          <Button type="button" variant="outline"
+            class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+            @click="push(DEFAULT_CONSULTATION_VALUE)">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+            Tambah Konsultasi
+          </Button>
+        </FieldArray>
+      </div>
+    <Separator class="my-4" />
+
+
+
+    <!-- DATA PENUNJANG -->
+    <section>
+      <div class="mb-3 flex gap-3 items-center">
+        <h1 class="text-base font-medium">Data Penunjang</h1>
+        <Button variant="ghost"
+          class="gap-1 items-center text-orange-400"
+          @click="isSupportingHistoryOpen = true">
+          <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Data Penunjang</Button>
+      </div>
+      <DE.Block class="" :cell-flex="false">
+        <TextAreaInput field-name="supplementCheckup" label="Pemeriksaan Penunjang" placeholder="Masukkan Pemeriksaan Penunjang" :errors="errors" />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />
+
+
+
+    <!-- DATA Farmasi -->
+    <section>
+      <div class="mb-3 flex gap-3 items-center">
+        <h1 class="text-base font-medium">Data Farmasi</h1>
+        <Button variant="ghost"
+          class="gap-1 items-center text-orange-400"
+          @click="isFarmacyHistoryOpen = true">
+          <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Data Farmasi</Button>
+      </div>
+      <DE.Block class="items-end" :col-count="2" :cell-flex="false">
+        <TextAreaInput field-name="supplementCheckup"
+          label="Kelainan Khusus Alergi" placeholder="Masukkan Kelainan Khusus Alergi" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Kelainan Lain" placeholder="Masukkan Kelainan Lain" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Selama Dirawat" placeholder="Masukkan Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Selama Dirawat" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Waktu Pulang" placeholder="Masukkan Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Waktu Pulang" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Instruksi Tindak Lanjut/Anjuran dan Edukasi (Follow Up/Kontrol)" placeholder="Masukkan Instruksi Tindak Lanjut/Anjuran dan Edukasi (Follow Up/Kontrol)" :errors="errors" />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />
+
+
+
+    <!-- Keadaan Waktu Keluar -->
+    <section>
+      <h1 class="mb-3 font-medium">Keadaan Waktu Keluar</h1>
+      <DE.Block :col-count="4" :cell-flex="false">
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Tekanan Darah Sistol" placeholder="Masukkan Tekanan Darah Sistol"
+          right-label="mmHg" bottom-label="Contoh: 90"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Tekanan Darah Diastol" placeholder="Masukkan Tekanan Darah Diastol"
+          right-label="mmHg" bottom-label="Contoh: 60"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Pernafasan" placeholder="Masukkan Pernafasan"
+          right-label="kali / menit" bottom-label="Contoh: 20"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Denyut Jantung" placeholder="Masukkan Denyut Jantung"
+          right-label="kali / menit" bottom-label="Contoh: 20"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Suhu Tubuh" placeholder="Masukkan Suhu Tubuh"
+          right-label="'C" bottom-label="Contoh: 37"
+          :errors="errors" is-required numeric-only />
+        <SelectConciousLevel
+          :field-name="`aaaaaaaaaaa`"
+          label="Tingkat Kesadaran"
+          placeholder="Tingkat Kesadaran"
+          :errors="errors" is-required />
+        <SelectPainScale
+          :field-name="`aaaaaaaaaaa`"
+          label="Skala Nyeri"
+          placeholder="Skala Nyeri"
+          :errors="errors" is-required />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />
+
+
+
+    <!-- Program Nasional -->
+    <section>
+      <div class="mb-3 flex gap-3 items-center">
+        <h1 class="text-base font-medium">Program Nasional</h1>
+        <Button variant="ghost"
+          class="gap-1 items-center text-orange-400"
+          @click="isNationalProgramServiceHistoryOpen = true">
+          <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Program Nasional</Button>
+      </div>
+      <DE.Block :col-count="3" :cell-flex="false">
+        <SelectNationalProgramService
+          :field-name="`aaaaaaaaaaa`"
+          label="Layanan Program Nasional"
+          placeholder="Layanan Program Nasional"
+          :errors="errors" is-required />
+        <SelectNationalProgramServiceStatus
+          :field-name="`aaaaaaaaaaa`"
+          label="Status Layanan Program Nasional"
+          placeholder="Status Layanan Program Nasional"
+          :errors="errors" is-required />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />  
+
+
+
+    <!-- Penatalaksanaan -->
+    <section>
+      <h1 class="mb-3 font-medium">Penatalaksanaan</h1>
+      <DE.Block :col-count="3" :cell-flex="false">
+        <SelectArrangement
+          field-name="arrangement"
+          label="Lanjutan Penatalaksanaan"
+          placeholder="Pilih Arrangement"
+          :errors="errors" />
+        <SelectHospitalLeaveCondition
+          :field-name="`aaaaaaaaaaa`"
+          label="Kondisi Meninggalkan RS"
+          placeholder="Kondisi Meninggalkan RS"
+          :errors="errors" is-required />
+        <SelectHospitalLeaveMethod
+          :field-name="`aaaaaaaaaaa`"
+          label="Cara Keluar RS"
+          placeholder="Cara Keluar RS"
+          :errors="errors" is-required />
+      </DE.Block>
+    </section>
+
+    <DE.Cell :col-span="3"
+      v-show="resumeArrangementType === `mrs`">
+      <TextAreaInput
+        field-name="inpatientIndication"
+        label="Indikasi Rawat Jalan"
+        placeholder="Indikasi Rawat Jalan"
+        :errors="errors" />
+    </DE.Cell>
+
+    <DE.Block :col-count="3" :cell-flex="false">      
+      <SelectFaskes
+        v-show="resumeArrangementType === `rujukExternal` "
+        field-name="faskes"
+        label="Faskes"
+        placeholder="Pilih Faskes"
+        :errors="errors"
+      />
+      <InputBase
+        v-show="resumeArrangementType === `rujukExternal` "
+        field-name="clinic"
+        label="Klinik"
+        placeholder="Masukkan Klinik"
+        :errors="errors"
+      />
+
+      <SelectDate
+        v-show="resumeArrangementType === `meninggal`"
+        field-name="deathDate"
+        label="Jam Tanggal Meninggal"
+        :errors="errors"
+        :is-with-time="true" />
+      
+      <DE.Cell class="mt-2" :col-span="3" v-show="resumeArrangementType === `meninggal`">
+        <div class="w-2/3 rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+          <h1 class="mb-3 font-medium">Sebab Meninggal</h1>
+
+          <FieldArray v-slot="{ fields, push, remove }" name="deathCause">
+            <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+              <SelectDeathCause
+                :field-name="`deathCause[${idx}]`"
+                :errors="errors"
+              />
+              <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
+                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+              </Button>
+            </div>
+            <Button v-if="fields.length < 3" type="button" variant="outline"
+              class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+              @click="push(``)">
+              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+              Tambah Sebab Meninggal
+            </Button>
+          </FieldArray>
+        </div>
+      </DE.Cell>
+
+      <DE.Cell 
+        v-show="resumeArrangementType === `meninggal`"
+        :col-span="3">
+        <TextAreaInput            
+            field-name="deathCauseDescription"
+            label="Keterangan Sebab Meninggal"
+            placeholder="Keterangan Sebab Meninggal"
+            :errors="errors" />
+      </DE.Cell>
+    
+    </DE.Block>
+
+  </Form>
+</template>
diff --git a/app/components/app/resume/history-list/action-history-dialog.vue b/app/components/app/resume/history-list/action-history-dialog.vue
new file mode 100644
index 00000000..5602016e
--- /dev/null
+++ b/app/components/app/resume/history-list/action-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+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 './action-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isActionHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/action-list.cfg.ts b/app/components/app/resume/history-list/action-list.cfg.ts
new file mode 100644
index 00000000..2dad3e6a
--- /dev/null
+++ b/app/components/app/resume/history-list/action-list.cfg.ts
@@ -0,0 +1,94 @@
+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-dvvp.vue'))
+
+export const config: Config = {
+  cols: [{width: 140}, {}, {}, {width: 140}, {width: 10},],
+
+  headers: [
+    [
+      { label: 'Tanggal/Jam' },
+      { label: 'Dokter' },
+      { label: 'Tempat Layanan' },
+      { label: 'Jenis' },
+      { label: 'Jenis Pemeriksaan' },
+      { label: 'Tanggal/Jam' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'person.name', 'person.name', 'birth_date',],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/resume/history-list/consultation-history-dialog.vue b/app/components/app/resume/history-list/consultation-history-dialog.vue
new file mode 100644
index 00000000..ad1e777e
--- /dev/null
+++ b/app/components/app/resume/history-list/consultation-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+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 './consultation-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isConsultationHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/consultation-list.cfg.ts b/app/components/app/resume/history-list/consultation-list.cfg.ts
new file mode 100644
index 00000000..196c208c
--- /dev/null
+++ b/app/components/app/resume/history-list/consultation-list.cfg.ts
@@ -0,0 +1,51 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+
+const lampiranBtn = defineAsyncComponent(() => import('../_common/print-btn.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Tanggal/Jam' },
+      { label: 'Dokter' },
+      { label: 'Tempat Layanan' },
+      { label: 'KSM' },
+      { label: 'Tanggal/Jam' },
+      { label: 'Tujuan' },
+      { label: 'Dokter' },
+      { label: 'Berkas' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'person.name', 'person.name', 'birth_date','person.name', 'action', ],
+
+  parses: {
+    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
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: lampiranBtn,
+      }
+    },
+  },
+
+  htmls: {
+    
+  },
+}
diff --git a/app/components/app/resume/history-list/farmacy-history-dialog.vue b/app/components/app/resume/history-list/farmacy-history-dialog.vue
new file mode 100644
index 00000000..53bf3875
--- /dev/null
+++ b/app/components/app/resume/history-list/farmacy-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+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 './farmacy-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isFarmacyHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/farmacy-list.cfg.ts b/app/components/app/resume/history-list/farmacy-list.cfg.ts
new file mode 100644
index 00000000..75ea1e80
--- /dev/null
+++ b/app/components/app/resume/history-list/farmacy-list.cfg.ts
@@ -0,0 +1,39 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Tanggal Order' },
+      { label: 'No Resep' },
+      { label: 'Tempat Layanan' },
+      { label: 'Nama Obat' },
+      { label: 'Tanggal Disetujui' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'person.name', 'birth_date',],
+
+  parses: {
+    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
+    },
+  },
+
+  components: {
+    
+  },
+
+  htmls: {
+    
+  },
+}
diff --git a/app/components/app/resume/history-list/national-program-history-dialog.vue b/app/components/app/resume/history-list/national-program-history-dialog.vue
new file mode 100644
index 00000000..cc702227
--- /dev/null
+++ b/app/components/app/resume/history-list/national-program-history-dialog.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+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 './national-program-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  searchValue: string
+  statusValue: string
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isNationalProgramServiceHistoryOpen`) as Ref<boolean>
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:searchValue': [value: string]
+  'update:statusValue': [value: string]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+
+const statusOptions: Item[] = [
+  { value: 'all', label: 'All Statuses' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'active', label: 'Active' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'archived', label: 'Archived' },
+]
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <DE.Block :col-count="4" class="" :cell-flex="false"> 
+          <Input
+            v-model="props.searchValue"
+            class=""
+            placeholder="Cari .."/>
+          <Select
+            :items="statusOptions"
+            :model-value="props.statusValue" 
+            @update:model-value="(data) => emit('update:statusValue', data)"
+          />
+        </DE.Block>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/national-program-list.cfg.ts b/app/components/app/resume/history-list/national-program-list.cfg.ts
new file mode 100644
index 00000000..fe6d3ea0
--- /dev/null
+++ b/app/components/app/resume/history-list/national-program-list.cfg.ts
@@ -0,0 +1,30 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Nomor' },
+      { label: 'Layanan Program Nasional' },
+      { label: 'Status' },
+    ],
+  ],
+
+  keys: ['person.name', 'person.name', 'person.name',],
+
+  parses: {
+    // birth_date: (rec: unknown): unknown => {
+      
+    // },
+  },
+
+  components: {
+    
+  },
+
+  htmls: {
+    
+  },
+}
diff --git a/app/components/app/resume/history-list/supporting-history-dialog.vue b/app/components/app/resume/history-list/supporting-history-dialog.vue
new file mode 100644
index 00000000..32fb4508
--- /dev/null
+++ b/app/components/app/resume/history-list/supporting-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+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 './supporting-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isSupportingHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/supporting-list.cfg.ts b/app/components/app/resume/history-list/supporting-list.cfg.ts
new file mode 100644
index 00000000..f005042d
--- /dev/null
+++ b/app/components/app/resume/history-list/supporting-list.cfg.ts
@@ -0,0 +1,39 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Tanggal Order' },
+      { label: 'No Lab' },
+      { label: 'Nama Pemeriksaan' },
+      { label: 'Tanggal Pemeriksaan' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'birth_date',],
+
+  parses: {
+    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
+    },
+  },
+
+  components: {
+  },
+
+  htmls: {
+    // patient_address(_rec) {
+    //   return '-'
+    // },
+  },
+}
diff --git a/app/components/app/resume/list.cfg.ts b/app/components/app/resume/list.cfg.ts
new file mode 100644
index 00000000..b756b1ee
--- /dev/null
+++ b/app/components/app/resume/list.cfg.ts
@@ -0,0 +1,101 @@
+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-dvvp.vue'))
+const statusBadge = defineAsyncComponent(() => import('./_common/verify-badge.vue'))
+
+export const config: Config = {
+  cols: [{width: 140}, {}, {}, {width: 140}, {width: 10},],
+
+  headers: [
+    [
+      { label: 'Tgl Simpan' },
+      { label: 'DPJP' },
+      { label: 'KSM' },
+      { label: 'Status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['birth_date', 'number', 'person.name', '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/resume/list.vue b/app/components/app/resume/list.vue
new file mode 100644
index 00000000..0d62cc6c
--- /dev/null
+++ b/app/components/app/resume/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>
\ No newline at end of file
diff --git a/app/components/app/resume/verify-dialog.vue b/app/components/app/resume/verify-dialog.vue
new file mode 100644
index 00000000..ca4fb554
--- /dev/null
+++ b/app/components/app/resume/verify-dialog.vue
@@ -0,0 +1,98 @@
+<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 type { InstallationFormData } from '~/schemas/installation.schema'
+import TextCaptcha from '~/components/pub/my-ui/form/text-captcha.vue'
+
+
+const props = defineProps<{
+  schema: any
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const captchaRef = ref<InstanceType<typeof TextCaptcha> | null>(null)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', 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"
+  >
+    <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">
+
+          <InputBase
+            field-name="name"
+            label="Nama"
+            placeholder="Masukkan Nama"
+            :errors="errors"/>
+          <InputBase
+            field-name="email"
+            label="Email"
+            placeholder="Masukkan Email"
+            :errors="errors"/>
+
+          <div class="mt-2">
+            <Label class="" for="password">Password</Label>
+            <Field class="" id="password" :errors="errors">
+              <FormField v-slot="{ componentField }" name="password">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="password"
+                      v-bind="componentField"
+                      type="password"
+                      class="w-full"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </div>
+
+          <TextCaptcha
+            ref="captchaRef"
+            :length="5"
+            :useSpacing="true"
+            :noiseChars="true"/>
+
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
\ No newline at end of file
diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 35956ad7..0aa33178 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -143,12 +143,16 @@ watch(props, (value) => {
     nationalId.value = objects?.nationalIdentity || '-'
     medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
     patientName.value = objects?.patientName || '-'
+    phoneNumber.value = objects?.phoneNumber || '-'
     if (objects?.sepType === 'internal') {
       admissionType.value = '4'
     }
     if (objects?.sepType === 'external') {
       admissionType.value = '1'
     }
+    if (objects?.diagnoseLabel) {
+      initialDiagnosis.value = objects?.diagnoseLabel
+    }
     isDateReload.value = true
     setTimeout(() => {
       if (objects?.letterDate) {
@@ -176,6 +180,9 @@ onMounted(() => {
   if (!isService.value) {
     serviceType.value = '2'
   }
+  if (!admissionType.value) {
+    admissionType.value = '1'
+  }
 })
 </script>
 
diff --git a/app/components/app/sep/list.vue b/app/components/app/sep/list.vue
index 2afaa2cc..78a0b740 100644
--- a/app/components/app/sep/list.vue
+++ b/app/components/app/sep/list.vue
@@ -11,7 +11,8 @@ const props = defineProps<{
 
 <template>
   <PubMyUiDataTable
-    v-bind="config"
     :rows="props.data"
+    v-bind="config"
+    v-on="$attrs"
   />
 </template>
diff --git a/app/components/app/soapi/list-cfg.ts b/app/components/app/soapi/list-cfg.ts
index 648297c4..3db1b24a 100644
--- a/app/components/app/soapi/list-cfg.ts
+++ b/app/components/app/soapi/list-cfg.ts
@@ -3,7 +3,7 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
 export const config: Config = {
   cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
@@ -20,7 +20,7 @@ export const config: Config = {
     ],
   ],
 
-  keys: ['time', 'employee_id', 'main_complaint', 'encounter_id', 'diagnose', 'status', 'action'],
+  keys: ['time', 'employee_id', 'main_complaint', 'encounter', 'diagnose', 'status', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -44,6 +44,10 @@ export const config: Config = {
         return '-'
       }
     },
+    encounter(rec: any) {
+      const data = rec?.encounter ?? {}
+      return data?.class_code || '-'
+    },
     diagnose(rec: any) {
       const { value } = rec ?? {}
 
diff --git a/app/components/app/specialist-position/entry-detail.vue b/app/components/app/specialist-position/entry-detail.vue
index f21ff65f..099927f6 100644
--- a/app/components/app/specialist-position/entry-detail.vue
+++ b/app/components/app/specialist-position/entry-detail.vue
@@ -18,7 +18,7 @@ import { genSpecialistPosition } from '~/models/specialist-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  specialistId: number
+  specialistId: string
   employees: any[]
   values: any
   isLoading?: boolean
diff --git a/app/components/app/specialist-position/entry-form.vue b/app/components/app/specialist-position/entry-form.vue
index be031219..e1ef6009 100644
--- a/app/components/app/specialist-position/entry-form.vue
+++ b/app/components/app/specialist-position/entry-form.vue
@@ -40,7 +40,7 @@ const { defineField, errors, meta } = useForm({
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [specialist, specialistAttrs] = defineField('specialist_id')
+const [specialist, specialistAttrs] = defineField('specialist_code')
 const [employee, employeeAttrs] = defineField('employee_id')
 const [headStatus, headStatusAttrs] = defineField('headStatus')
 
@@ -62,8 +62,8 @@ const headStatusStr = computed<string>({
 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.specialist_code !== undefined)
+    specialist.value = props.values.specialist_code ? String(props.values.specialist_code) : 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
@@ -72,7 +72,7 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  specialist.value = null
+  specialist.value = ''
   employee.value = null
   headStatus.value = false
 }
@@ -83,7 +83,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    specialist_id: specialist.value || null,
+    specialist_code: specialist.value || '',
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -130,7 +130,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Spesialis</Label>
-        <Field :errMessage="errors.specialist_id">
+        <Field :errMessage="errors.specialist_code">
           <Combobox
             id="specialist"
             v-model="specialist"
diff --git a/app/components/app/specialist/entry-form.vue b/app/components/app/specialist/entry-form.vue
index 70c0f294..8e9175cd 100644
--- a/app/components/app/specialist/entry-form.vue
+++ b/app/components/app/specialist/entry-form.vue
@@ -36,19 +36,19 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    unit_id: 0,
+    unit_code: '',
   } as Partial<SpecialistFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [unit, unitAttrs] = defineField('unit_id')
+const [unit, unitAttrs] = defineField('unit_code')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.unit_id !== undefined) unit.value = props.values.unit_id ? String(props.values.unit_id) : null
+  if (props.values.unit_code !== undefined) unit.value = props.values.unit_code ? String(props.values.unit_code) : null
 }
 
 const resetForm = () => {
@@ -63,7 +63,7 @@ function onSubmitForm(values: any) {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    unit_id: unit.value ? Number(unit.value) : null,
+    unit_code: unit.value ? String(unit.value) : null,
   }
   emit('submit', formData, resetForm)
 }
diff --git a/app/components/app/subspecialist-position/entry-detail.vue b/app/components/app/subspecialist-position/entry-detail.vue
index fd3f91b7..2a3e5e1c 100644
--- a/app/components/app/subspecialist-position/entry-detail.vue
+++ b/app/components/app/subspecialist-position/entry-detail.vue
@@ -18,7 +18,7 @@ import { genSubSpecialistPosition } from '~/models/subspecialist-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  subspecialistId: number
+  subspecialistId: string
   employees: any[]
   values: any
   isLoading?: boolean
diff --git a/app/components/app/subspecialist-position/entry-form.vue b/app/components/app/subspecialist-position/entry-form.vue
index c897b2f5..4522d82c 100644
--- a/app/components/app/subspecialist-position/entry-form.vue
+++ b/app/components/app/subspecialist-position/entry-form.vue
@@ -40,7 +40,7 @@ const { defineField, errors, meta } = useForm({
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [subSpecialist, subSpecialistAttrs] = defineField('subspecialist_id')
+const [subSpecialist, subSpecialistAttrs] = defineField('subspecialist_code')
 const [employee, employeeAttrs] = defineField('employee_id')
 const [headStatus, headStatusAttrs] = defineField('headStatus')
 
@@ -62,8 +62,8 @@ const headStatusStr = computed<string>({
 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.subspecialist_code !== undefined)
+    subSpecialist.value = props.values.subspecialist_code ? String(props.values.subspecialist_code) : 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
@@ -83,7 +83,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    subspecialist_id: subSpecialist.value || null,
+    subspecialist_code: subSpecialist.value || null,
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -130,7 +130,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Sub Spesialis</Label>
-        <Field :errMessage="errors.subspecialist_id">
+        <Field :errMessage="errors.subspecialist_code">
           <Combobox
             id="specialist"
             v-model="subSpecialist"
diff --git a/app/components/app/subspecialist/entry-form.vue b/app/components/app/subspecialist/entry-form.vue
index 8f176fb1..14a34eff 100644
--- a/app/components/app/subspecialist/entry-form.vue
+++ b/app/components/app/subspecialist/entry-form.vue
@@ -36,20 +36,20 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    specialist_id: 0,
+    specialist_code: '',
   } as Partial<SubspecialistFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [specialist, specialistAttrs] = defineField('specialist_id')
+const [specialist, specialistAttrs] = defineField('specialist_code')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.specialist_id !== undefined)
-    specialist.value = props.values.specialist_id ? String(props.values.specialist_id) : null
+  if (props.values.specialist_code !== undefined)
+    specialist.value = props.values.specialist_code ? String(props.values.specialist_code) : null
 }
 
 const resetForm = () => {
@@ -64,7 +64,7 @@ function onSubmitForm(values: any) {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    specialist_id: specialist.value ? Number(specialist.value) : null,
+    specialist_code: specialist.value ? String(specialist.value) : "",
   }
   emit('submit', formData, resetForm)
 }
diff --git a/app/components/app/unit-position/entry-detail.vue b/app/components/app/unit-position/entry-detail.vue
deleted file mode 100644
index fb84e41a..00000000
--- a/app/components/app/unit-position/entry-detail.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<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
index b6ab8609..ea2efc09 100644
--- a/app/components/app/unit-position/entry-form.vue
+++ b/app/components/app/unit-position/entry-form.vue
@@ -40,7 +40,7 @@ const { defineField, errors, meta } = useForm({
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [unit, unitAttrs] = defineField('unit_id')
+const [unit, unitAttrs] = defineField('unit_code')
 const [employee, employeeAttrs] = defineField('employee_id')
 const [headStatus, headStatusAttrs] = defineField('headStatus')
 
@@ -62,7 +62,7 @@ const headStatusStr = computed<string>({
 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.unit_code !== undefined) unit.value = props.values.unit_code ? String(props.values.unit_code) : 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
@@ -82,7 +82,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    unit_id: unit.value || null,
+    unit_code: unit.value || '',
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -129,7 +129,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Unit</Label>
-        <Field :errMessage="errors.unit_id">
+        <Field :errMessage="errors.unit_code">
           <Combobox
             id="unit"
             v-model="unit"
diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index 1b369695..e6c80df6 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -35,20 +35,20 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    installation_id: 0,
+    installation_code: '',
   } as Partial<UnitFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [installation, installationAttrs] = defineField('installation_id')
+const [installation, installationAttrs] = defineField('installation_code')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.installation_id !== undefined)
-    installation.value = props.values.installation_id ? Number(props.values.installation_id) : null
+  if (props.values.installation_code !== undefined)
+    installation.value = props.values.installation_code ? String(props.values.installation_code) : null
 }
 
 const resetForm = () => {
@@ -62,7 +62,7 @@ function onSubmitForm() {
   const formData: UnitFormData = {
     name: name.value || '',
     code: code.value || '',
-    installation_id: installation.value ? Number(installation.value) : null,
+    installation_code: installation.value ? String(installation.value) : "",
   }
   emit('submit', formData, resetForm)
 }
diff --git a/app/components/content/chemotherapy/process.vue b/app/components/content/chemotherapy/process.vue
index 7f355b4b..2a61c468 100644
--- a/app/components/content/chemotherapy/process.vue
+++ b/app/components/content/chemotherapy/process.vue
@@ -3,5 +3,5 @@ import EncounterHome from '~/components/content/encounter/home.vue'
 </script>
 
 <template>
-  <EncounterHome classes="chemotherapy" />
+  <EncounterHome display="menu" class-code="ambulatory" sub-class-code="chemo" />
 </template>
diff --git a/app/components/content/cprj/entry.vue b/app/components/content/cprj/entry.vue
new file mode 100644
index 00000000..5769e967
--- /dev/null
+++ b/app/components/content/cprj/entry.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode'
+
+import List from './list.vue'
+import Form from './form.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+const route = useRoute()
+
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry"
+    />
+    <Form
+      v-else
+      @back="backToList"
+    />
+  </div>
+</template>
diff --git a/app/components/content/cprj/form.vue b/app/components/content/cprj/form.vue
new file mode 100644
index 00000000..ef2a51d7
--- /dev/null
+++ b/app/components/content/cprj/form.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/cprj/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 { CprjSoapiSchema } 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 fungsional = ref([])
+const schema = CprjSoapiSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'dev-record',
+  value: '',
+})
+const model = ref({
+  ppa: '',
+  ppa_name: '',
+  subjective: '',
+  objective: '',
+  assesment: '',
+  plan: '',
+  review: '',
+})
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+onMounted(() => {})
+
+const cprjRef = ref()
+async function actionHandler(type: string) {
+  if (type === 'back') {
+    backToList()
+    return
+  }
+  const result = await cprjRef.value?.validate()
+  console.log('result', result)
+  if (result?.valid) {
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    ref="cprjRef"
+    v-model="model"
+    :schema="schema"
+    type="function"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+</template>
diff --git a/app/components/content/cprj/list.vue b/app/components/content/cprj/list.vue
new file mode 100644
index 00000000..109bea6b
--- /dev/null
+++ b/app/components/content/cprj/list.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/soapi/list.vue'
+import Entry from '~/components/app/cprj/entry.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'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/consultation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+const route = useRoute()
+
+const { recordId } = useQueryCRUDRecordId()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+const id = route.params.id
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      'encounter-id': id,
+      typeCode: 'dev-record',
+      includes: 'encounter',
+      search,
+      page,
+    })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'cprj',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'CPRJ',
+  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: () => {
+      goToEntry()
+      emits('add')
+    },
+  },
+}
+
+const today = new Date()
+
+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 Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      emits('edit')
+      recordId.value = recId.value
+      console.log('recordId', recId.value)
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/device-order/entry.vue b/app/components/content/device-order/entry.vue
index 6d76d685..5d87d960 100644
--- a/app/components/content/device-order/entry.vue
+++ b/app/components/content/device-order/entry.vue
@@ -1,24 +1,177 @@
 <script setup lang="ts">
-import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-
+// Composables
 import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { toast } from '~/components/pub/ui/toast'
 
+// Pub components
+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 RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// Refs / src
+import { type Device } from '~/models/device'
+import { getList as getDeviceList } from '~/services/device.service'
+
+// Device order things
+import { getDetail, remove, submit } from '~/services/device-order.service'
+import EntryForm from '~/components/app/device-order/entry-form.vue'
+
+// Items
+import {
+  getList as getItemList,
+  create as createItem,
+  update as updateItem,
+} from '~/services/device-order-item.service'
+import {
+  recId,
+  recAction,
+  recItem,
+  handleActionRemove,
+} from '~/handlers/device-order-item.handler'
+import { genDeviceOrderItem, type DeviceOrderItem } from '~/models/device-order-item'
 import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
-import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-
-const { backToList } = useQueryCRUDMode()
+import ItemEntry from '~/components/app/device-order-item/entry-form.vue'
 
+// Header
 const headerPrep: HeaderPrep = {
   title: 'Tambah Order Alkes',
   icon: 'i-lucide-box',
 }
 
-  function navClick(type: 'cancel' | 'submit') {
-    if (type === 'cancel') {
-      backToList()
-    }
+// Device order things
+const { getQueryParam } = useQueryParam()
+const rawId = getQueryParam('id')
+const id = typeof rawId === 'string' ? parseInt(rawId) : 0
+const dataRes = await getDetail(id, { includes: 'doctor,doctor-employee,doctor-employee-person' })
+const data = ref(dataRes.body?.data || null)
+const devices = ref<Device[]>([])
+
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
+
+// Items
+const {
+    data: items,
+    isLoading,
+    fetchData: getDeviceOrderItems,
+  } = usePaginatedList({
+    fetchFn: async (params: any) => {
+      const result = await getItemList({
+        'device-order-id': id,
+        includes: 'device',
+        search: params.search,
+        sort: 'createdAt:asc',
+        'page-number': params['page-number'] || 0,
+        'page-size': params['page-size'] || 10,
+      })
+      return { success: result.success || false, body: result.body || {} }
+    },
+    entityName: 'division',
+  })
+const selectedItem = ref<DeviceOrderItem>(genDeviceOrderItem())
+const isItemDetailDialogOpen = ref(false)
+const isItemEntryDialogOpen = ref(false)
+const isItemDelConfirmDialogOpen = ref(false)
+
+selectedItem.value.deviceOrder_id = id
+
+// Last navs
+const { backToList } = useQueryCRUDMode()
+
+// Reactivities
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+watch([recId, recAction], () => {
+  let item: DeviceOrderItem | null
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      item = pickItem()
+      if (item) {
+        isItemDetailDialogOpen.value = true
+      }
+      break
+    case ActionEvents.showEdit:
+      item = pickItem()
+      if (item) {
+        isItemEntryDialogOpen.value = true
+        getDevices('', item.device_code)
+      }
+      break
+    case ActionEvents.showConfirmDelete:
+      isItemDelConfirmDialogOpen.value = true
+      break
   }
+})
+
+onMounted(async () => {
+  await getDeviceOrderItems()
+})
+
+// Functions
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  } else if (type === 'delete') {
+    isDeleteConfirmationOpen.value = true
+  } else if (type === 'submit') {
+    isSubmitConfirmationOpen.value = true
+  }
+}
+
+async function removeOrder() {
+  const res = await remove(id)
+  if (res.success) {
+    backToList()
+  }
+}
+
+async function submitOrder() {
+  const res = await submit(id)
+  if (res.success) {
+    backToList()
+  }
+}
+
+function addItem() {
+  isItemEntryDialogOpen.value = true
+}
+
+async function getDevices(value: string, code?: string) {
+  const res = await getDeviceList({ 'search': value, 'code': code })
+  if (res.success) {
+    devices.value = res.body.data
+  } else {
+    devices.value = []
+  }
+}
+
+function pickItem(): DeviceOrderItem | null {
+  const item = items.value.find(item => item.id === recId.value)
+  selectedItem.value = item
+  return item
+}
+
+async function saveItem() {
+  let res: any;
+  if(!selectedItem.value.id) {
+    res = await createItem(selectedItem.value)
+  } else {
+    res = await updateItem(selectedItem.value.id, selectedItem.value)
+  }
+  if (res.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getDeviceOrderItems()
+    isItemEntryDialogOpen.value = false
+    selectedItem.value = genDeviceOrderItem()
+  }
+}
+
 </script>
 
 <template>
@@ -28,10 +181,74 @@ const headerPrep: HeaderPrep = {
     class="mb-4 xl:mb-5"
   />
 
-  <ItemListEntry />
+  <EntryForm :data="data" @add="addItem" />
+
+  <ItemListEntry :data="items" @add="addItem" />
+
   <Separator class="my-5" />
 
   <div class="w-full flex justify-center">
     <Nav @click="navClick" />
   </div>
+
+  <!-- Confirm delete -->
+  <RecordConfirmation
+    v-model:open="isDeleteConfirmationOpen"
+    action="delete"
+    :record="data"
+    @confirm="removeOrder()"
+  />
+
+  <!-- Confirm submit -->
+  <RecordConfirmation
+    v-model:open="isSubmitConfirmationOpen"
+    customTitle="Ajukan Order"
+    customMessage="Akan dilakukan pengajuan order alat kesehatan"
+    customConfirmText="Ajukan"
+    :record="data"
+    @confirm="submitOrder"
+    @cancel=""
+  />
+
+  <!-- Item entry -->
+  <Dialog
+    v-model:open="isItemEntryDialogOpen"
+    title="Item Order"
+    size="lg"
+    prevent-outside
+  >
+    <ItemEntry
+      :data="selectedItem"
+      :devices="devices"
+      @close="isItemEntryDialogOpen = false"
+      @save="saveItem"
+      @update:searchText="getDevices"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isItemDelConfirmDialogOpen"
+    action="delete"
+    size="md"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDeviceOrderItems, toast)"
+    @cancel=""
+  >
+    <DE.Block mode="preview" label-size="small">
+      <DE.Cell>
+        <DE.Label>Nama</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.device.name }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.quantity }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/device-order/list.vue b/app/components/content/device-order/list.vue
index e62a2fbd..1ffa324d 100644
--- a/app/components/content/device-order/list.vue
+++ b/app/components/content/device-order/list.vue
@@ -1,69 +1,39 @@
 <script setup lang="ts">
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
 // Components
-import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import List from '~/components/app/device-order/list.vue'
-
-// Helpers
-import { usePaginatedList } from '~/composables/usePaginatedList'
 import { toast } from '~/components/pub/ui/toast'
-// import { useQueryMode } from '~/composables/useQueryMode'
-import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { type DeviceOrderFormData, DeviceOrderSchema  } from '~/schemas/device-order.schema'
-import type { DeviceOrder } from "~/models/device-order";
 
-// Handlers
+// Device order things
 import {
   recId,
   recAction,
   recItem,
   isReadonly,
-  isProcessing,
-  isFormEntryDialogOpen,
-  isRecordConfirmationOpen,
-  onResetState,
   handleActionSave,
-  handleActionEdit,
   handleActionRemove,
-  handleCancelForm,
 } from '~/handlers/device-order.handler'
+import { getList, submit } from '~/services/device-order.service'
+import type { ToastFn } from '~/handlers/_handler'
+import { type DeviceOrder } from "~/models/device-order";
+import ConfirmationInfo from '~/components/app/device-order/confirmation-info.vue'
 
-// Services
-import { getList } from '~/services/device-order.service'
+// Props
+const props = defineProps<{
+  encounter_id: number
+}>()
 
-const route = useRoute()
-const title = ref('')
-
-// const { mode, openForm, backToList } = useQueryMode()
-const { mode, goToEntry, backToList } = useQueryCRUDMode()
-const { recordId } = useQueryCRUDRecordId()
-
-const {
-  data,
-  isLoading,
-  paginationMeta,
-  searchInput,
-  handlePageChange,
-  handleSearch,
-  fetchData: getMyList,
-} = usePaginatedList({
-  fetchFn: async (params: any) => {
-    const result = await getList({
-      search: params.search,
-      sort: 'createdAt:asc',
-      'page-number': params['page-number'] || 0,
-      'page-size': params['page-size'] || 10,
-      includes: 'parent,childrens',
-    })
-    return { success: result.success || false, body: result.body || {} }
-  },
-  entityName: 'device-order',
-})
+const encounter_id = props.encounter_id
 
+// Header
+const voidFn = () => {}
 const headerPrep: HeaderPrep = {
   title: 'Order Alkes',
   icon: 'i-lucide-box',
@@ -85,21 +55,88 @@ const headerPrep: HeaderPrep = {
       recItem.value = null
       recId.value = 0
       isReadonly.value = false
-      // await handleActionSave(recItem, getMyList, () => {}, () => {})
-      goToEntry()
+      const saveResp = await handleActionSave({ encounter_id }, voidFn, voidFn, voidFn)
+      if (saveResp.success) {
+        setQueryParams({
+          'mode': 'entry',
+          'id': saveResp.body?.data?.id.toString()
+        })
+      }
     },
   },
 }
 
+// List
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'encounter-id': encounter_id,
+      search: params.search,
+      includes: 'doctor,doctor-employee,doctor-employee-person,items,items-device',
+      page: params.page,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device-order',
+})
+
+// Selected item
+const selectedItem = ref<DeviceOrder | null>()
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
+const { setQueryParams } = useQueryParam()
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-// Watch for row actions when recId or recAction changes
-onMounted(async () => {
-  await getMyList()
+watch([recId, recAction], () => {
+  let item: DeviceOrder | null
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      setQueryParams({
+        'mode': 'entry',
+        'id': recId.value.toString()
+      })
+      break
+    case ActionEvents.showConfirmSubmit:
+      selectedItem.value = pickItem()
+      isSubmitConfirmationOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      selectedItem.value = pickItem()
+      isDeleteConfirmationOpen.value = true
+      break
+  }
+  recAction.value = '';
 })
+
+async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
+  const result = await submit(id)
+  if (result.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
+  }
+}
+
+function pickItem(): DeviceOrder | null {
+  const item = data.value.find(item => item.id === recId.value)
+  selectedItem.value = item
+  return item
+}
 </script>
 
 <template>
@@ -108,38 +145,39 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
 
   <List
+    v-if="!isLoading.dataListLoading"
     :data="data"
     :pagination-meta="paginationMeta"
     @page-change="handlePageChange"
   />
+  <!-- 
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+   -->
 
-  <!-- Record Confirmation Modal -->
+  <!-- Submit Record Confirmation Modal -->
   <RecordConfirmation
-    v-model:open="isRecordConfirmationOpen"
+    v-model:open="isSubmitConfirmationOpen"
+    customTitle="Ajukan Order"
+    customMessage="Akan dilakukan pengajuan order alat kesehatan"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
+  >
+    <ConfirmationInfo :data="selectedItem" />
+  </RecordConfirmation>
+
+  <!-- Del Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isDeleteConfirmationOpen"
     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>
+    <ConfirmationInfo :data="selectedItem" />
   </RecordConfirmation>
 </template>
diff --git a/app/components/content/device-order/main.vue b/app/components/content/device-order/main.vue
index ae5a9ca8..ff8722de 100644
--- a/app/components/content/device-order/main.vue
+++ b/app/components/content/device-order/main.vue
@@ -3,10 +3,14 @@
 import List from './list.vue'
 import Entry from './entry.vue'
 
-const { mode } = useQueryMode()
+defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
 </script>
 
 <template>
-  <List v-if="mode === 'list'" />
-  <Entry v-else />
+  <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 4fa8605d..10bbc4e2 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -105,12 +105,12 @@ const getCurrentDivisionDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentDivisionDetail(recId.value)
+      getCurrentDivisionDetail(recItem.value.code)
       title.value = 'Detail Divisi Position'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getCurrentDivisionDetail(recId.value)
+      getCurrentDivisionDetail(recItem.value.code)
       title.value = 'Edit Divisi Position'
       isReadonly.value = false
       break
@@ -122,7 +122,7 @@ watch([recId, recAction], () => {
 
 onMounted(async () => {
   try {
-    divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+    divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 }, true)
     employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
     await getDivisionList()
   } catch (err) {
@@ -172,9 +172,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: DivisionPositionFormData | Record<string, any>, resetForm: () => void) => {
-          console.log(values)
-          if (recId > 0) {
-            handleActionEdit(recId, values, getDivisionList, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getDivisionList, resetForm, toast)
             return
           }
           handleActionSave(values, getDivisionList, resetForm, toast)
@@ -189,7 +188,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getDivisionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getDivisionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/division/detail.vue b/app/components/content/division/detail.vue
index 8b7d2e92..e059702b 100644
--- a/app/components/content/division/detail.vue
+++ b/app/components/content/division/detail.vue
@@ -47,7 +47,7 @@ const title = ref('')
 
 // #region Props & Emits
 const props = defineProps<{
-  divisionId: number
+  divisionId: string
 }>()
 const division = ref<Division>({} as Division)
 // #endregion
@@ -152,7 +152,7 @@ watch([recId, recAction], () => {
   console.log(recId, recAction)
   switch (recAction.value) {
     case ActionEvents.showEdit:
-      getDetailDivisionPosition(recId.value)
+      getDetailDivisionPosition(recItem.value.code)
       title.value = 'Edit Jabatan'
       isReadonly.value = false
       isFormEntryDialogOpen.value = true
@@ -201,8 +201,8 @@ watch([recId, recAction], () => {
       @submit="
         (values: DivisionPositionFormData | Record<string, any>, resetForm: () => void) => {
           console.log(values)
-          if (recId > 0) {
-            handleActionEdit(recId, values, getDivisionPositionList, onResetState, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getDivisionPositionList, onResetState, toast)
             return
           }
           handleActionSave(values, getDivisionPositionList, onResetState, toast)
@@ -215,7 +215,7 @@ watch([recId, recAction], () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getDivisionPositionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getDivisionPositionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index 0456891b..ecfd0cb1 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -105,26 +105,23 @@ const getCurrentDivisionDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      if (Number(recId.value) > 0) {
-        const id = Number(recId.value)
+      if (recItem.value.code.length > 0) {
+        navigateTo({
+          name: 'org-src-division-id',
+          params: {
+            id: recItem.value.code,
+          },
+        })
 
         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)
+      getCurrentDivisionDetail(recItem.value.code)
       title.value = 'Edit Divisi'
       isReadonly.value = false
       break
@@ -146,7 +143,7 @@ watch(
     if (result.success) {
       const currentData = result.body.data || []
       const normalizedData = currentData.filter((division: Division) => !division.parent_id)
-      divisionsTrees.value = getValueTreeItems(normalizedData)
+      divisionsTrees.value = getValueTreeItems(normalizedData, true)
     }
   },
 )
@@ -190,9 +187,9 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: DivisionFormData | Record<string, any>, resetForm: () => void) => {
-          console.log(values)
-          if (recId > 0) {
-            handleActionEdit(recId, values, getDivisionList, resetForm, toast)
+          // console.log(values)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getDivisionList, resetForm, toast)
             return
           }
           handleActionSave(values, getDivisionList, resetForm, toast)
@@ -207,7 +204,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getDivisionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getDivisionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
new file mode 100644
index 00000000..9d099189
--- /dev/null
+++ b/app/components/content/document-upload/add.vue
@@ -0,0 +1,128 @@
+<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 { handleActionSave,} from '~/handlers/supporting-document.handler'
+import { toast } from '~/components/pub/ui/toast'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
+import { toFormData } from '~/lib/utils'
+import { uploadAttachment } from '~/services/supporting-document.service'
+
+// #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 inputForm = ref<ExposedForm<any> | null>(null)
+const { user } = useUserStore()
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+const initialValues = {
+  officer: user.user_name,
+}
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+
+async function handleConfirmAdd() {
+  const inputData = await composeFormData()
+  const inputFormData: FormData = toFormData(inputData)
+
+  const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
+  const data = (response?.body?.data ?? null)
+  if (!data) return
+
+  // // If has callback provided redirect to callback with patientData
+  if (props.callbackUrl) {
+    navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
+  }
+  goBack()
+}
+
+async function composeFormData(): Promise<any> {
+  inputForm.value?.setValues({
+    ...inputForm.value?.values,
+    ref_id: encounterId,
+    upload_employee_id: user.employee_id
+  })
+
+  const [inputFormState,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [inputFormState]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) {
+    toast({ title: 'Form validation failed', variant: 'destructive',})
+    return Promise.reject('Form validation failed')
+  }
+  const formData = inputFormState?.values
+  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
+}
+// #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">
+    <h1>Upload Dokumen</h1>
+  </div>
+  <AppDocumentUploadEntryForm
+    ref="inputForm"
+    :schema="DocumentUploadSchema"
+    :initial-values="initialValues"
+  />
+
+  <div class="mb-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/document-upload/edit.vue b/app/components/content/document-upload/edit.vue
new file mode 100644
index 00000000..c4033fb2
--- /dev/null
+++ b/app/components/content/document-upload/edit.vue
@@ -0,0 +1,134 @@
+<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 { handleActionSave,} from '~/handlers/supporting-document.handler'
+import { toast } from '~/components/pub/ui/toast'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
+import { getDetail } from '~/services/supporting-document.service'
+
+// #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 docId = typeof route.params.document_id == 'string' ? parseInt(route.params.document_id) : 0
+const inputForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+const { user } = useUserStore()
+const initialValues = {
+  officer: user.user_name,
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(docId)
+  if (result.success) {
+    inputForm.value?.setValues(result.body.data)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const inputData = await composeFormData()
+  let createdDataId = 0
+
+  // const response = await handleActionSave(
+  //   inputData,
+  //   () => { },
+  //   () => { },
+  //   toast,
+  // )
+
+  // const data = (response?.body?.data ?? null)
+  // if (!data) return
+  // createdDataId = data.id
+
+  // // // If has callback provided redirect to callback with patientData
+  // if (props.callbackUrl) {
+  //   navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
+  // }
+  // goBack()
+}
+
+async function composeFormData(): Promise<any> {
+  const [inputFormState,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [inputFormState]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = inputFormState?.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
+}
+// #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">
+    <h1>Upload Dokumen</h1>
+  </div>
+  <AppDocumentUploadEntryForm
+    ref="inputForm"
+    :schema="DocumentUploadSchema"
+    :initial-values="initialValues"
+  />
+
+  <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/document-upload/list.vue b/app/components/content/document-upload/list.vue
new file mode 100644
index 00000000..7f7631d9
--- /dev/null
+++ b/app/components/content/document-upload/list.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+// #region Imports
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import type { HeaderPrep, RefSearchNav, } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { getList, remove } from '~/services/supporting-document.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import { unauthorizedToast } from '~/lib/utils'
+// #endregion
+
+
+// #region Permission
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const { getPagePermissions } = useRBAC()
+const pagePermission = getPagePermissions(roleAccess)
+
+// const {user,userRole} = useUserStore()
+// const {getUserPermissions} = useRBAC()
+// #endregion
+
+// #region State
+const props = defineProps<{
+  encounter?: Encounter
+  refresh: () => void
+}>()
+
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({
+    'encounter-id': encounterId,
+    // includes: "employee",
+    ...params,
+  }),
+  entityName: 'encounter-document',
+})
+
+const isDocPreviewDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const timestamp = ref<number>(0)
+
+const headerPrep: HeaderPrep = {
+  title: "Upload Dokumen",
+  icon: 'i-lucide-newspaper',
+}
+if (pagePermission.canCreate) {
+  headerPrep.addNav = {
+    label: "Upload Dokumen",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-document-upload-add',
+        params: { id: encounterId },
+      }),
+   }
+}
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+})
+// #endregion
+
+// #region Functions
+
+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' })
+        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('timestamp', timestamp)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction, timestamp], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      isDocPreviewDialogOpen.value = true
+      break
+
+    case ActionEvents.showEdit:
+      if(pagePermission.canUpdate){
+        navigateTo({
+          name: 'rehab-encounter-id-document-upload-document_id-edit',
+          params: { id: encounterId, "document_id": recId.value },
+        })
+      } else {
+        unauthorizedToast()
+      }
+      break
+
+    case ActionEvents.showConfirmDelete:
+      if(pagePermission.canDelete){
+        isRecordConfirmationOpen.value = true
+      } else {
+        unauthorizedToast()
+      }
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }"
+      v-model:search="searchInput"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch"
+  />
+  <AppDocumentUploadList :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?.name">
+            <strong>Nama:</strong>
+            {{ record?.name }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+
+  <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
+    <DocPreviewDialog :link="recItem?.filePath" />
+  </Dialog>
+</template>
diff --git a/app/components/content/encounter/detail.vue b/app/components/content/encounter/detail.vue
new file mode 100644
index 00000000..5f2255c5
--- /dev/null
+++ b/app/components/content/encounter/detail.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Components
+import EncounterPatientInfo from '~/components/app/encounter/patient-info.vue'
+
+// Models
+import { genEncounter } from '~/models/encounter'
+
+// Handlers
+import { getEncounterData } from '~/handlers/encounter-process.handler'
+
+const route = useRoute()
+const router = useRouter()
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const data = ref<any>(genEncounter())
+const isShowPatient = computed(() => data.value && data.value?.patient?.person)
+
+async function getData() {
+  data.value = await getEncounterData(id)
+}
+
+onMounted(async () => {
+  await getData()
+})
+
+function handleClick(type: string) {
+  if (type === 'draft') {
+    router.back()
+  }
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
+    </div>
+    <EncounterPatientInfo v-if="isShowPatient" :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/encounter/entry.vue b/app/components/content/encounter/entry.vue
index 78297754..228d165e 100644
--- a/app/components/content/encounter/entry.vue
+++ b/app/components/content/encounter/entry.vue
@@ -1,42 +1,14 @@
 <script setup lang="ts">
 // 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'
+import { useEncounterEntry } from '~/handlers/encounter-entry.handler'
 
 const props = defineProps<{
   id: number
@@ -46,54 +18,43 @@ const props = defineProps<{
 }>()
 
 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>({})
 
-// SEP validation state
-const isSepValid = ref(false)
-const isCheckingSep = ref(false)
-const sepNumber = ref('')
+const {
+  paymentsList,
+  sepNumber,
+  sepsList,
+  participantGroupsList,
+  specialistsTree,
+  doctorsList,
+  recSelectId,
+  isLoadingDetail,
+  formObjects,
+  openPatient,
+  isSepValid,
+  isCheckingSep,
+  isSaveDisabled,
+  isSaving,
+  isLoading,
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  toNavigateSep,
+  getListPath,
+  handleInit,
+  loadEncounterDetail,
+  handleSaveEncounter,
+  getPatientsList,
+  getPatientCurrent,
+  getPatientByIdentifierSearch,
+  getIsSubspecialist,
+  getValidateSepNumber,
+  handleFetchDoctors,
+} = useEncounterEntry(props)
+
 const debouncedSepNumber = refDebounced(sepNumber, 500)
 
-// 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 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(() => {
@@ -101,140 +62,15 @@ function handleSavePatient() {
   }, 150)
 }
 
-function toKebabCase(str: string): string {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+function handleSaveClick() {
+  if (formRef.value && typeof formRef.value.submitForm === 'function') {
+    formRef.value.submitForm()
+  }
 }
 
-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
+function handleFetch(value?: any) {
+  if (value?.subSpecialistId) {
+    handleFetchDoctors(value.subSpecialistId)
   }
 }
 
@@ -246,11 +82,9 @@ async function handleEvent(menu: string, value?: any) {
   } 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,
@@ -258,10 +92,7 @@ async function handleEvent(menu: string, value?: any) {
       ...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 || ''
-    }
+    await getValidateSepNumber(String(value || ''))
   } else if (menu === 'save') {
     await handleSaveEncounter(value)
   } else if (menu === 'cancel') {
@@ -269,432 +100,26 @@ async function handleEvent(menu: string, value?: any) {
   }
 }
 
-// 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')
-  }
-}
+provide('rec_select_id', recSelectId)
+provide('table_data_loader', isLoading)
 
-/**
- * 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)
+  await getValidateSepNumber(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) {
+  if (props.id > 0) {
     await loadEncounterDetail()
   }
 })
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
deleted file mode 100644
index 1f2c2943..00000000
--- a/app/components/content/encounter/home.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<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 655a553d..31c11326 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -1,30 +1,40 @@
 <script setup lang="ts">
-// 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
+///// Imports
+// Pub components
 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 { toast } from '~/components/pub/ui/toast'
 import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import * as CH from '~/components/pub/my-ui/content-header'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { useSidebar } from '~/components/pub/ui/sidebar/utils'
+
+// App libs
+import { getServicePosition } from '~/lib/roles' // previously getPositionAs
 
 // Services
-import { getList as getEncounterList, remove as removeEncounter } from '~/services/encounter.service'
+import { getList as getEncounterList, remove as removeEncounter, cancel as cancelEncounter } from '~/services/encounter.service'
 
-// UI
-import { toast } from '~/components/pub/ui/toast'
+// Apps
+import Content from '~/components/app/encounter/list.vue'
+import FilterNav from '~/components/app/encounter/filter-nav.vue'
+import FilterForm from '~/components/app/encounter/filter-form.vue'
 
+// Props
 const props = defineProps<{
-  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient'
   subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
-  type: string
+  canCreate?: boolean
+  canUpdate?: boolean
+  canDelete?: boolean
 }>()
 
+///// Declarations and Flows
+// Sidebar automation
+const { setOpen } = useSidebar()
+setOpen(true)
+
+// Main data
 const data = ref([])
 const isLoading = reactive<DataTableLoader>({
   summary: false,
@@ -33,66 +43,88 @@ const isLoading = reactive<DataTableLoader>({
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
-const isFormEntryDialogOpen = ref(false)
+const isFilterFormDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
+const isRecordCancelOpen = ref(false)
 
-const hreaderPrep: HeaderPrep = {
+// Headers
+const hreaderPrep: CH.Config = {
   title: 'Kunjungan',
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
     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')
-      }
+      navigateTo(`/${props.classCode}/encounter/add`)
     },
   },
 }
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-    isFormEntryDialogOpen.value = true
-    console.log(' 1open filter modal')
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
+if (!props.canCreate) {
+  delete hreaderPrep.addNav
 }
 
-// Loading state management
+// Filters
+const filter = ref<{
+  installation: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<any>
+  errors?: any
+}>({
+  installation: {
+    msg: {
+      placeholder: 'Pilih',
+    },
+    items: [],
+  },
+  schema: {},
+})
 
-/**
- * Get base path for encounter routes based on classCode and subClassCode
- */
-function getBasePath(): 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
-}
+// Role reactivities
+const { getActiveRole } = useUserStore()
+const activeServicePosition = ref(getServicePosition(getActiveRole()))
+provide('activeServicePosition', activeServicePosition)
+watch(getActiveRole, (role? : string) => {
+  activeServicePosition.value = getServicePosition(role)
+})
 
+// Recrod reactivities
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+watch(() => recAction.value, () => {
+  const basePath = `/${props.classCode}/encounter`
+  // console.log(`${basePath}/${recId.value}`, recAction.value)
+  // return
+  if (recAction.value === ActionEvents.showConfirmDelete) {
+    isRecordConfirmationOpen.value = true
+  } else if (recAction.value === ActionEvents.showCancel) {
+    isRecordCancelOpen.value = true
+  } else if (recAction.value === ActionEvents.showDetail) {
+    navigateTo(`${basePath}/${recId.value}`)
+  } else if (recAction.value === ActionEvents.showEdit) {
+    navigateTo(`${basePath}/${recId.value}/edit`)
+  } else if (recAction.value === ActionEvents.showProcess) {
+    navigateTo(`${basePath}/${recId.value}/process`)
+  } else if (recAction.value === ActionEvents.showConfirmDelete) {
+    isRecordConfirmationOpen.value = true
+  }
+  recAction.value = '' // reset
+})
+
+onMounted(() => {
+  getPatientList()
+})
+
+/////// Functions
 async function getPatientList() {
   isLoading.isTableLoading = true
   try {
@@ -114,6 +146,43 @@ async function getPatientList() {
   }
 }
 
+// Handle confirmation result
+async function handleConfirmCancel(record: any, action: string) {
+  if (action === 'deactivate' && record?.id) {
+    try {
+      const result = await cancelEncounter(record.id)
+      if (result.success) {
+        toast({
+          title: 'Berhasil',
+          description: 'Kunjungan berhasil dibatalkan',
+          variant: 'default',
+        })
+        await getPatientList() // Refresh list
+      } else {
+        const errorMessage = result.body?.message || 'Gagal membatalkan kunjungan'
+        toast({
+          title: 'Gagal',
+          description: errorMessage,
+          variant: 'destructive',
+        })
+      }
+    } catch (error: any) {
+      console.error('Error cancellation encounter:', error)
+      toast({
+        title: 'Gagal',
+        description: error?.message || 'Gagal membatalkan kunjungan',
+        variant: 'destructive',
+      })
+    } finally {
+      // Reset state
+      recId.value = 0
+      recAction.value = ''
+      recItem.value = null
+      isRecordCancelOpen.value = false
+    }
+  }
+}
+
 // Handle confirmation result
 async function handleConfirmDelete(record: any, action: string) {
   if (action === 'delete' && record?.id) {
@@ -156,90 +225,72 @@ function handleCancelConfirmation() {
   recId.value = 0
   recAction.value = ''
   recItem.value = null
-  isRecordConfirmationOpen.value = false
+  isRecordCancelOpen.value = false
 }
 
-watch(
-  () => recAction.value,
-  () => {
-    if (recAction.value === ActionEvents.showConfirmDelete) {
-      isRecordConfirmationOpen.value = true
-      return
-    }
-    
-    const basePath = getBasePath()
-    
-    if (props.type === 'encounter') {
-      if (recAction.value === 'showDetail') {
-        navigateTo(`${basePath}/${recId.value}/detail`)
-      } else if (recAction.value === 'showEdit') {
-        navigateTo(`${basePath}/${recId.value}/edit`)
-      } else if (recAction.value === 'showProcess') {
-        navigateTo(`${basePath}/${recId.value}/process`)
-      } else {
-        // handle other actions
-      }
-    } else if (props.type === 'registration') {
-      // Handle registration type if needed
-      if (recAction.value === 'showDetail') {
-        navigateTo(`${basePath.replace('/encounter', '/registration')}/${recId.value}/detail`)
-      } else if (recAction.value === 'showEdit') {
-        navigateTo(`${basePath.replace('/encounter', '/registration')}/${recId.value}/edit`)
-      } else if (recAction.value === 'showProcess') {
-        navigateTo(`${basePath.replace('/encounter', '/registration')}/${recId.value}/process`)
-      } else {
-        // handle other actions
-      }
-    }
-  },
-)
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
-
-onMounted(() => {
-  getPatientList()
-})
+function handleRemoveConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+  isRecordConfirmationOpen.value = false
+}
 </script>
 
 <template>
-  <Header
-    :prep="{ ...hreaderPrep }"
-    :ref-search-nav="refSearchNav"
-  />
-  <Separator class="my-4 xl:my-5" />
+  <CH.ContentHeader v-bind="hreaderPrep">
+    <FilterNav
+      @onFilterClick="() => isFilterFormDialogOpen = true"
+      @onExportPdf="() => {}"
+      @onExportExcel="() => {}"
+      @nExportCsv="() => {}"
+    />
+  </CH.ContentHeader>
 
-  <Filter
-    :prep="hreaderPrep"
-    :ref-search-nav="refSearchNav"
-  />
-
-  <AppEncounterList :data="data" />
+  <Content :data="data" />
 
+  <!-- Filter -->
   <Dialog
-    v-model:open="isFormEntryDialogOpen"
+    v-model:open="isFilterFormDialogOpen"
     title="Filter"
     size="lg"
     prevent-outside
   >
-    <AppEncounterFilter
-      :installation="{
-        msg: { placeholder: 'Pilih' },
-        items: [],
-      }"
-      :schema="{}"
-    />
+    <FilterForm v-bind="filter"  />
   </Dialog>
 
-  <!-- Record Confirmation Modal -->
+  <!-- Batal -->
   <RecordConfirmation
+    v-model:open="isRecordCancelOpen"
+    custom-title="Batalkan Kunjungan"
+    custom-message="Apakah anda yakin ingin membatalkan kunjungan pasien berikut?"
+    action="deactivate"
+    :record="recItem"
+    @confirm="handleConfirmCancel"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p v-if="record?.patient?.person?.name">
+          <strong>Nama:</strong>
+          {{ record.patient.person.name }}
+        </p>
+        <p v-if="record?.medical_record_number">
+          <strong>No RM:</strong>
+          {{ record.medical_record_number }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+
+  <!-- Hapus -->
+  <RecordConfirmation
+    v-if="canDelete"
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
     @confirm="handleConfirmDelete"
-    @cancel="handleCancelConfirmation"
+    @cancel="handleRemoveConfirmation"
   >
     <template #default="{ record }">
       <div class="text-sm">
@@ -258,4 +309,11 @@ onMounted(() => {
       </div>
     </template>
   </RecordConfirmation>
+  <Dialog
+    title="Hapus data"
+    size="md"
+    v-model:open="isRecordConfirmationOpen"
+  >
+    Hak akses tidak memenuhi kriteria untuk proses ini.
+  </Dialog>
 </template>
diff --git a/app/components/content/encounter/process-bu.vue b/app/components/content/encounter/process-bu.vue
new file mode 100644
index 00000000..02fc7495
--- /dev/null
+++ b/app/components/content/encounter/process-bu.vue
@@ -0,0 +1,114 @@
+<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'
+
+import { genEncounter } from '~/models/encounter'
+
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import DeviceOrder from '~/components/content/device-order/main.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 Cprj from '~/components/content/cprj/entry.vue'
+import DocUploadList from '~/components/content/document-upload/list.vue'
+import GeneralConsentList from '~/components/content/general-consent/entry.vue'
+import ResumeList from '~/components/content/resume/list.vue'
+import ControlLetterList from '~/components/content/control-letter/list.vue'
+
+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 } })
+  },
+})
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const data = ref(genEncounter())
+
+async function fetchDetail() {
+  const res = await getDetail(id, {
+    includes:
+      'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,EncounterDocuments',
+  })
+  if (res.body?.data) data.value = res.body?.data
+}
+
+onMounted(() => {
+  fetchDetail()
+})
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
+  {
+    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: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
+  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
+  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
+  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
+  { value: 'device', label: 'Order Alkes' },
+  { 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' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
+  { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
+  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
+  { value: 'screening', label: 'Skrinning MPP' },
+  {
+    value: 'supporting-document',
+    label: 'Upload Dokumen Pendukung',
+    component: DocUploadList,
+    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/process.vue b/app/components/content/encounter/process.vue
index 5caa55fb..b9e8355f 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -1,95 +1,142 @@
 <script setup lang="ts">
-//
 import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+///// Imports
+// Pubs components
+import ContentSwitcher from '~/components/pub/my-ui/content-switcher/content-switcher.vue'
+import { useSidebar } from '~/components/pub/ui/sidebar/utils'
+import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
+import ContentNavBa from '~/components/pub/my-ui/nav-content/ba.vue'
 
-import { getDetail } from '~/services/encounter.service'
+// App libs
+import { getServicePosition } from '~/lib/roles' // previously getPositionAs
 
-//
-import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
-import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+// App Models
+import { genEncounter, type Encounter } from '~/models/encounter'
 
-// PLASE ORDER BY TAB POSITION
-import Status from '~/components/content/encounter/status.vue'
-import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
-import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
-import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
-import Prescription from '~/components/content/prescription/main.vue'
-import Radiology from '~/components/content/radiology-order/main.vue'
-import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
-import MicroLabOrder from '~/components/content/micro-lab-order/main.vue'
-import Consultation from '~/components/content/consultation/list.vue'
-import ControlLetterList from '~/components/content/control-letter/list.vue'
+// Handlers
+import type { EncounterProps } from '~/handlers/encounter-init.handler'
+import { getEncounterData } from '~/handlers/encounter-process.handler'
+import { getMenuItems } from "~/handlers/encounter-init.handler"
 
+// App Components
+import EncounterPatientInfo from '~/components/app/encounter/quick-info.vue'
+import EncounterHistoryButtonMenu from '~/components/app/encounter/quick-shortcut.vue'
+
+///// Declarations and Flows
+// Props
+const props = defineProps<{
+  classCode: EncounterProps['classCode']
+  subClassCode?: EncounterProps['subClassCode']
+}>()
+
+// Common preparations
 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 } })
+const { user, userActiveRole, getActiveRole } = useUserStore()
+const activeRole = getActiveRole()
+const activePosition = ref(getServicePosition(activeRole))
+const menus = ref([] as any)
+const activeMenu = computed({
+  get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
+  set: (value: string) => {
+    router.replace({ path: route.path, query: { menu: value } })
   },
 })
 
 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
+const data = ref<Encounter>(genEncounter())
+const isShowPatient = computed(() => data.value && data.value?.patient?.person)
 
-const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
+const { setOpen } = useSidebar()
+setOpen(false)
+
+if (activePosition.value === 'none') { // if user position is none, redirect to home page
+  router.push('/')
+}
+
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
   {
-    value: 'early-medical-assessment',
-    label: 'Pengkajian Awal Medis',
-    component: EarlyMedicalAssesmentList,
-    props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
   },
   {
-    value: 'rehab-medical-assessment',
-    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
-    component: EarlyMedicalRehabList,
-    props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
   },
-  {
-    value: 'function-assessment',
-    label: 'Asesmen Fungsi',
-    component: AssesmentFunctionList,
-    props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
-  },
-  { 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: Prescription, props: { encounter_id: data.id } },
-  { value: 'device', label: 'Order Alkes' },
-  { 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: 'micro-lab-order', label: 'Order Lab Mikro', component: CpLabOrder, props: { encounter_id: data.id } },
-  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
-  { value: 'medical-action', label: 'Order Ruang Tindakan' },
-  { value: 'mcu-result', label: 'Hasil Penunjang' },
-  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
-  { 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' },
 ]
+
+const paginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+// Reacrtivities
+watch(getActiveRole, () => {
+  activePosition.value = getServicePosition(userActiveRole)
+  initMenus()
+})
+
+onMounted(async () => {
+  await getData()
+  initMenus()
+})
+
+///// Functions
+function handleClick(type: string) {
+  if (type === 'draft') {
+    router.back()
+  }
+}
+
+function initMenus() {
+  menus.value = getMenuItems(id, props, user, {
+    encounter: data.value
+  } as any, {
+    protocolTheraphy: paginationMeta,
+    protocolChemotherapy: paginationMeta,
+    medicineProtocolChemotherapy: paginationMeta,
+  })
+}
+
+async function getData() {
+  data.value = await getEncounterData(id)
+}
 </script>
 
 <template>
   <div class="w-full">
-    <div class="mb-4">
-      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    <div class="bg-white dark:bg-slate-800 p-4 2xl:p-5">
+      <div class="mb-4 flex">
+        <div>
+          <ContentNavBa label="Kembali" @click="handleClick" />
+        </div>
+        <!-- <div class="ms-auto pe-3 pt-1 text-end text-xl 2xl:text-2xl font-semibold">
+            Pasien: {{ data.patient.person.name }} --- No. RM: {{ data.patient.number }}
+        </div> -->
+      </div>
+      <ContentSwitcher :active="1" :height="150">
+        <template v-slot:content1>
+          <EncounterPatientInfo v-if="isShowPatient" :data="data" />
+        </template>
+        <template v-slot:content2>
+          <EncounterHistoryButtonMenu v-if="isShowPatient" />
+        </template>
+      </ContentSwitcher>
     </div>
-    <AppEncounterQuickInfo :data="data" />
-    <CompTab
-      :data="tabs"
-      :initial-active-tab="activeTab"
-      @change-tab="activeTab = $event"
-    />
+    <SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
   </div>
 </template>
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 19e5d913..0db6034c 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -110,6 +110,7 @@ watch([recId, recAction], () => {
       getCurrentMaterialDetail(recId.value)
       title.value = 'Edit Perlengkapan'
       isReadonly.value = false
+      isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true
@@ -158,7 +159,7 @@ onMounted(async () => {
       @submit="
         (values: MaterialFormData, resetForm: any) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getEquipmentList, resetForm, toast)
+            handleActionEdit(recItem.code, values, getEquipmentList, resetForm, toast)
             return
           }
           handleActionSave(values, getEquipmentList, resetForm, toast)
@@ -173,7 +174,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getEquipmentList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getEquipmentList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/general-consent/entry.vue b/app/components/content/general-consent/entry.vue
new file mode 100644
index 00000000..5769e967
--- /dev/null
+++ b/app/components/content/general-consent/entry.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode'
+
+import List from './list.vue'
+import Form from './form.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+const route = useRoute()
+
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry"
+    />
+    <Form
+      v-else
+      @back="backToList"
+    />
+  </div>
+</template>
diff --git a/app/components/content/general-consent/form.vue b/app/components/content/general-consent/form.vue
new file mode 100644
index 00000000..738adca1
--- /dev/null
+++ b/app/components/content/general-consent/form.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/general-consent/entry.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { GeneralConsentSchema } from '~/schemas/general-consent.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/general-consent.handler'
+import { create } from '~/services/generate-file.service'
+// Services
+import { getDetail } from '~/services/general-consent.service'
+const { backToList } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+
+const route = useRoute()
+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 = GeneralConsentSchema
+const payload = ref({
+  encounter_id: 0,
+  value: '',
+})
+const model = ref({
+  relatives: [],
+  responsibleName: '',
+  responsiblePhone: '',
+  informant: '',
+  witness1: '',
+  witness2: '',
+})
+
+const fileUrl = ref('')
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getDiagnoses() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/diagnose-src')
+  if (resp.success) {
+    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(() => {
+  const mode = route.query.mode
+  const recordId = route.query['record-id']
+
+  if (mode === 'entry' && recordId) {
+    loadEntryForEdit(+recordId)
+  }
+})
+
+// TODO: mapping data detail when edit
+const loadEntryForEdit = async (id: number) => {
+  const result = await getDetail(id)
+
+  if (result?.success) {
+    const data = result.body?.data || {}
+
+    const value = JSON.parse(data.value || '{}')
+    model.value.witness1 = value?.witness1 || ''
+    model.value.witness2 = value?.witness2 || ''
+    model.value.informant = value?.informant || ''
+    model.value.responsibleName = value?.responsible || ''
+    model.value.responsiblePhone = value?.responsiblePhone || ''
+    model.value.relatives = value?.relatives || []
+    console.log('model', model.value)
+  }
+}
+
+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 entryGeneralConsent = ref()
+async function actionHandler(type: string) {
+  if (type === 'back') {
+    backToList()
+    return
+  }
+  if (type === 'print') {
+    const data = await getDetail(recordId.value)
+    const detail = data.body?.data
+    fileUrl.value = detail?.fileUrl
+    isOpenDiagnose.value = true
+    return
+  }
+  const result = await entryGeneralConsent.value?.validate()
+  if (result?.valid) {
+    if (result.data.relatives.length > 0) {
+      result.data.relatives = result.data.relatives.map((item: any) => {
+        return item.name
+      })
+    }
+
+    console.log('data', result)
+    const resp = await handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+      },
+      () => {},
+      () => {},
+      toast,
+    )
+    const data = resp.body?.data
+    if (data) {
+      const resp2 = await create({
+        entityType_code: 'encounter',
+        ref_id: data?.id,
+        type_code: 'general-consent',
+      })
+      console.log('resp2', resp2.body?.data)
+      backToList()
+    }
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+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
+    ref="entryGeneralConsent"
+    v-model="model"
+    :schema="schema"
+    @click="handleClick"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Preview General Content"
+    size="xl"
+    prevent-outside
+  >
+    <embed
+      style="width: 100%; height: 90vh"
+      :src="fileUrl"
+    />
+  </Dialog>
+</template>
diff --git a/app/components/content/general-consent/list.vue b/app/components/content/general-consent/list.vue
new file mode 100644
index 00000000..4cf269ee
--- /dev/null
+++ b/app/components/content/general-consent/list.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/general-consent/list.vue'
+import Entry from '~/components/app/general-consent/entry.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 { GeneralConsentSchema, type GeneralConsentFormData } from '~/schemas/general-consent.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/general-consent.handler'
+
+// Services
+import { getList, getDetail } from '~/services/general-consent.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+const router = useRouter()
+const route = useRoute()
+
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({ 'encounter-id': props.encounter.id, includes: '', search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'general-consent',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'General Consent',
+  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: () => {
+      goToEntry()
+    },
+  },
+}
+
+const goEdit = (id: string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+const today = new Date()
+
+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, () => {
+  console.log('recId', recId.value)
+  if (recAction.value === ActionEvents.showEdit) {
+    goEdit(recId.value)
+    return
+  } else {
+    isRecordConfirmationOpen.value = true
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/installation-position/list.vue b/app/components/content/installation-position/list.vue
index ea60ee04..734406e8 100644
--- a/app/components/content/installation-position/list.vue
+++ b/app/components/content/installation-position/list.vue
@@ -108,7 +108,7 @@ watch([recId, recAction], () => {
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getCurrentInstallationDetail(recId.value)
+      getCurrentInstallationDetail(recItem.value.code)
       title.value = 'Edit Instalasi - Posisi'
       isReadonly.value = false
       break
@@ -120,7 +120,7 @@ watch([recId, recAction], () => {
 
 onMounted(async () => {
   try {
-    installations.value = await getInstallationLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+    installations.value = await getInstallationLabelList({ sort: 'createdAt:asc', 'page-size': 100 }, true)
     employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
   } catch (err) {
     console.log(err)
@@ -169,8 +169,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getInstallationPositionList, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getInstallationPositionList, resetForm, toast)
             return
           }
           handleActionSave(values, getInstallationPositionList, resetForm, toast)
@@ -185,7 +185,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getInstallationPositionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getInstallationPositionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/installation/detail.vue b/app/components/content/installation/detail.vue
index 0f12ad8c..bd0d2988 100644
--- a/app/components/content/installation/detail.vue
+++ b/app/components/content/installation/detail.vue
@@ -47,7 +47,7 @@ const title = ref('')
 
 // #region Props & Emits
 const props = defineProps<{
-  installationId: number
+  installationId: string
 }>()
 const installation = ref<Installation>({} as Installation)
 // #endregion
@@ -153,7 +153,7 @@ watch([recId, recAction], () => {
   console.log(recId, recAction)
   switch (recAction.value) {
     case ActionEvents.showEdit:
-      getDetailInstallationPosition(recId.value)
+      getDetailInstallationPosition(recItem.value.code)
       title.value = 'Edit Jabatan'
       isReadonly.value = false
       isFormEntryDialogOpen.value = true
@@ -202,8 +202,8 @@ watch([recId, recAction], () => {
       @submit="
         (values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
           console.log(values)
-          if (recId > 0) {
-            handleActionEdit(recId, values, getInstallationPositionList, onResetState, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getInstallationPositionList, onResetState, toast)
             return
           }
           handleActionSave(values, getInstallationPositionList, onResetState, toast)
@@ -216,7 +216,7 @@ watch([recId, recAction], () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getInstallationPositionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getInstallationPositionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index 553d7ebb..6f12c90b 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -102,26 +102,23 @@ const getCurrentInstallationDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      if (Number(recId.value) > 0) {
-        const id = Number(recId.value)
+      if (recItem.value.code.length > 0) {
+        navigateTo({
+          name: 'org-src-installation-id',
+          params: {
+            id: recItem.value.code,
+          },
+        })
 
         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)
+      getCurrentInstallationDetail(recItem.value.code)
       title.value = 'Edit Instalasi'
       isReadonly.value = false
       break
@@ -171,8 +168,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getInstallationList, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getInstallationList, resetForm, toast)
             return
           }
           handleActionSave(values, getInstallationList, resetForm, toast)
@@ -187,7 +184,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getInstallationList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getInstallationList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/medicine-form/list.vue b/app/components/content/medicine-form/list.vue
new file mode 100644
index 00000000..1ca9eefe
--- /dev/null
+++ b/app/components/content/medicine-form/list.vue
@@ -0,0 +1,193 @@
+<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 AppMedicineFormList from '~/components/app/medicine-form/list.vue'
+import AppMedicineFormEntryForm from '~/components/app/medicine-form/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 { BaseSchema, type BaseFormData } from '~/schemas/base.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-form.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medicine-form.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineFormList,
+} = 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,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-form',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sediaan Obat',
+  icon: 'i-lucide-medicine-bottle',
+  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 getCurrentMedicineFormDetail = 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:
+      getCurrentMedicineFormDetail(recId.value)
+      title.value = 'Detail Sediaan Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineFormDetail(recId.value)
+      title.value = 'Edit Sediaan Obat'
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineFormList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppMedicineFormList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Sediaan Obat'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicineFormEntryForm
+      :schema="BaseSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: BaseFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recItem.code, values, getMedicineFormList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMedicineFormList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recItem.code, getMedicineFormList, 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/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 80faf1ab..6c695d72 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -108,6 +108,7 @@ watch([recId, recAction], () => {
       getCurrentMedicineGroupDetail(recId.value)
       title.value = 'Edit Kelompok Obat'
       isReadonly.value = false
+      isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true
@@ -154,7 +155,7 @@ onMounted(async () => {
       @submit="
         (values: BaseFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
+            handleActionEdit(recItem.code, values, getMedicineGroupList, resetForm, toast)
             return
           }
           handleActionSave(values, getMedicineGroupList, resetForm, toast)
@@ -169,7 +170,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getMedicineGroupList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index 9e0e5d01..2c8fb8c6 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -108,6 +108,7 @@ watch([recId, recAction], () => {
       getCurrentMedicineMethodDetail(recId.value)
       title.value = 'Edit Metode Obat'
       isReadonly.value = false
+      isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true
@@ -154,7 +155,7 @@ onMounted(async () => {
       @submit="
         (values: BaseFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+            handleActionEdit(recItem.code, values, getMedicineMethodList, resetForm, toast)
             return
           }
           handleActionSave(values, getMedicineMethodList, resetForm, toast)
@@ -169,7 +170,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getMedicineMethodList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index 27470776..bfbf8750 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -37,10 +37,12 @@ import {
 import { getList, getDetail } from '~/services/medicine.service'
 import { getValueLabelList as getMedicineGroupList } from '~/services/medicine-group.service'
 import { getValueLabelList as getMedicineMethodList } from '~/services/medicine-method.service'
+import { getValueLabelList as getMedicineFormList } from '~/services/medicine-form.service'
 import { getValueLabelList as getUomList } from '~/services/uom.service'
 
 const medicineGroups = ref<{ value: string; label: string }[]>([])
 const medicineMethods = ref<{ value: string; label: string }[]>([])
+const medicineForms = ref<{ value: string; label: string }[]>([])
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
@@ -59,7 +61,7 @@ const {
       sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
-      includes: 'medicineGroup,medicineMethod,uom',
+      includes: 'medicineGroup,medicineMethod,medicineForm,uom',
     })
     return { success: result.success || false, body: result.body || {} }
   },
@@ -116,6 +118,7 @@ watch([recId, recAction], () => {
     case ActionEvents.showEdit:
       getCurrentMedicineDetail(recId.value)
       title.value = 'Edit Obat'
+      isFormEntryDialogOpen.value = true
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -127,6 +130,7 @@ watch([recId, recAction], () => {
 onMounted(async () => {
   medicineGroups.value = await getMedicineGroupList({ sort: 'createdAt:asc', 'page-size': 100 })
   medicineMethods.value = await getMedicineMethodList({ sort: 'createdAt:asc', 'page-size': 100 })
+  medicineForms.value = await getMedicineFormList({ sort: 'createdAt:asc', 'page-size': 100 })
   uoms.value = await getUomList({ sort: 'createdAt:asc', 'page-size': 100 })
   await getMedicineList()
 })
@@ -163,13 +167,14 @@ onMounted(async () => {
       :values="recItem"
       :medicineGroups="medicineGroups"
       :medicineMethods="medicineMethods"
+      :medicineForms="medicineForms"
       :uoms="uoms"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
       @submit="
         (values: MedicineFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getMedicineList, resetForm, toast)
+            handleActionEdit(recItem.code, values, getMedicineList, resetForm, toast)
             return
           }
           handleActionSave(values, getMedicineList, resetForm, toast)
@@ -184,7 +189,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getMedicineList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getMedicineList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
index 4b3fa663..46768432 100644
--- a/app/components/content/prescription/entry.vue
+++ b/app/components/content/prescription/entry.vue
@@ -1,86 +1,215 @@
 <script setup lang="ts">
+import { type HeaderPrep, ActionEvents } from '~/components/pub/my-ui/data/types'
 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 RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { toast } from '~/components/pub/ui/toast'
 
 import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
-import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 
+// Medicine
+import { type Medicine } from '~/models/medicine'
+import { getList as getMedicineList } from '~/services/medicine.service'
+
+// Prescription
 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 Detail from '~/components/app/prescription/detail.vue'
+import Entry from '~/components/app/prescription/entry.vue'
+import { remove, submit } from '~/services/prescription.service'
 
+// Prescription items
 import {
+  getList as getItemList,
+  create as createItem,
+  update as updateItem,
+} from '~/services/prescription-item.service'
+import {
+  recId,
+  recAction,
   recItem,
+  isRecordConfirmationOpen,
+  handleActionRemove,
 } from '~/handlers/prescription-item.handler'
 
-// props
+import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
+import { type MedicinemixItem } from '~/models/medicinemix-item';
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
+
+// 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 || [])
+// Prescriptions 
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
 
+// Prescription Items
+const isItemDetailDialogOpen = ref(false)
+
+// Prescription
+const { getQueryParam } = useQueryParam()
+const rawId = getQueryParam('id')
+const id = typeof rawId === 'string' ? parseInt(rawId) : 0
+const dataRes = await getDetail(id, { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' })
+const data = ref(dataRes.body?.data || null)
+
+// Prescription Items
+const getItemsOpt = { 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' }
 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
-    }
+  data: items,
+  isLoading,
+  fetchData: getPrescriptionItems,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getItemList({
+      ...getItemsOpt,
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'prescription-item',
+  entityName: 'division',
 })
 
+
+// const items = ref<PrescriptionItem[]>([])
+const mixItem = ref<PrescriptionItem>(genPrescriptionItem())
+const medicinemixItems = ref<MedicinemixItem[]>([])
+const nonMixItem = ref<PrescriptionItem>(genPrescriptionItem())
+
+mixItem.value.prescription_id = id
+nonMixItem.value.prescription_id = id
+
 const { backToList } = useQueryCRUDMode()
 
 const headerPrep: HeaderPrep = {
-  title: 'Tambah Order Obat / Resep',
+  title: 'Pembuatan Order Obat / Resep',
   icon: 'i-lucide-box',
 }
 
-const mixDialogOpen = ref(false)
-const nonMixDialogOpen = ref(false)
+const mixDialogOpenStatus = ref(false)
+const nonMixDialogOpenStatus = ref(false)
+const medicines = ref<Medicine[]>([])
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+watch([recId, recAction], () => {
+  let item: PrescriptionItem | null
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      item = pickItem()
+      if (item) {
+        isItemDetailDialogOpen.value = true
+      }
+      break
+    case ActionEvents.showEdit:
+      item = pickItem()
+      if (item) {
+        if(item.isMix) {
+          mixDialogOpenStatus.value = true
+        } else {
+          nonMixDialogOpenStatus.value = true
+        }
+        getMedicines('', item.medicine_code)
+      }
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getPrescriptionItems()
+})
 
 function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
   if (type === 'back') {
     backToList()
+  } else if (type === 'delete') {
+    isDeleteConfirmationOpen.value = true
+  } else if (type === 'submit') {
+    isSubmitConfirmationOpen.value = true
   }
 }
 
+async function removePrescription() {
+  const res = await remove(id)
+  if (res.success) {
+    backToList()
+  }
+  // handleActionRemove(recId.value, getItems, toast)
+}
+
+async function submitPrescription() {
+  const res = await submit(id)
+  if (res.success) {
+    backToList()
+  }
+  // handleActionRemove(recId.value, getItems, toast)
+}
+
 function addItem(mode: 'mix' | 'non-mix') {
   if (mode === 'mix') {
-    mixDialogOpen.value = true
+    mixDialogOpenStatus.value = true
   } else if (mode === 'non-mix') {
-    nonMixDialogOpen.value = true
+    nonMixDialogOpenStatus.value = true
   }
 }
 
-function saveMix() {
-  create({data})
+async function saveMix() {
+  const res = await createItem(mixItem.value)
+  if (res.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getPrescriptionItems()
+    mixDialogOpenStatus.value = false
+  }
 }
 
-function saveNonMix(data: PrescriptionItem) {
-  create({data})
+async function saveNonMix() {
+  let res: any;
+  if(!nonMixItem.value.id) {
+    res = await createItem(nonMixItem.value)
+  } else {
+    res = await updateItem(nonMixItem.value.id, nonMixItem.value)
+  }
+  if (res.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getPrescriptionItems()
+    nonMixDialogOpenStatus.value = false
+  }
+}
+
+async function getMedicines(value: string, code?: string) {
+  const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm', 'code': code })
+  if (res.success) {
+    medicines.value = res.body.data
+  } else {
+    medicines.value = []
+  }
+}
+
+function pickItem(): PrescriptionItem | null {
+  const item = items.value.find(item => item.id === recId.value)
+  if (!item) {
+    return null
+  }
+  if(item.isMix) {
+    mixItem.value = item
+  } else {
+    nonMixItem.value = item
+  }
+  return item
 }
 </script>
 
@@ -91,42 +220,147 @@ function saveNonMix(data: PrescriptionItem) {
     class="mb-4 xl:mb-5"
   />
 
-  <Detail :data="data" />
+  <Entry :data="data" />
+
+  <!-- <div class="mb-8">
+    <Button>
+      <Icon name="i-lucide-check" />
+      Simpan
+    </Button>
+  </div> -->
 
   <ItemListEntry
-    :data="prescriptionItems"
+    :data="items"
     @add="addItem"/>
+
   <Separator class="my-5" />
 
   <div class="w-full flex justify-center">
     <Nav @click="navClick" />
   </div>
 
+  <!-- Confirm delete -->
+  <RecordConfirmation
+    v-model:open="isDeleteConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="removePrescription()"
+  />
+
+  <!-- Confirm submit -->
+  <RecordConfirmation
+    v-model:open="isSubmitConfirmationOpen"
+    action="delete"
+    customTitle="Ajukan Resep"
+    customMessage="Proses akan mengajukan resep ini untuk diproses lebih lanjut. Lanjutkan?"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="submitPrescription"
+    @cancel=""
+  />
+
+  <!-- Mix form -->
   <Dialog
-    v-model:open="mixDialogOpen"
-    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
-    size="xl"
+    v-model:open="mixDialogOpenStatus"
+    title="Pembuatan Racikan"
+    size="lg"
     prevent-outside
   >
     <MixItemEntry
-      :data="data"
-      :items="items"
-      @close="mixDialogOpen = false"
+      :data="mixItem"
+      :items="medicinemixItems"
+      :medicines="medicines"
+      @close="mixDialogOpenStatus = false"
       @save="saveMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
 
+  <!-- Non mix form -->
   <Dialog
-    v-model:open="nonMixDialogOpen"
-    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
-    size="xl"
+    v-model:open="nonMixDialogOpenStatus"
+    title="Pembuatan Non Racikan"
+    size="lg"
     prevent-outside
   >
     <NonMixItemEntry
-      :data="data"
-      :items="items"
-      @close="mixDialogOpen = false"
+      :data="nonMixItem"
+      :medicines="medicines"
+      @close="mixDialogOpenStatus = false"
       @save="saveNonMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
+
+  <!-- Detail item -->
+  <Dialog
+    v-model:open="isItemDetailDialogOpen"
+    title="Detail Obat"
+    size="lg"
+    prevent-outside
+  >
+    <DE.Block mode="preview" label-size="small">
+      <DE.Cell>
+        <DE.Label>Nama</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.medicine.name }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.dose }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.medicine.medicineForm.name }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Jumlah</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.quantity }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.Usage }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+  </Dialog>
+
+  <!-- Confirm delete items -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPrescriptionItems, 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/prescription/list.vue b/app/components/content/prescription/list.vue
index 844cb04f..afd012f6 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+// Composables
 import { usePaginatedList } from '~/composables/usePaginatedList'
 
+// Pubs component
 import { toast } from '~/components/pub/ui/toast'
-import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
@@ -12,7 +14,6 @@ import {
   recAction,
   recItem,
   isReadonly,
-  isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionRemove,
   handleActionSave,
@@ -20,17 +21,17 @@ import {
 
 // Services
 import { getList, getDetail } from '~/services/prescription.service'
-import List from '~/components/app/prescription/list.vue'
+import FlatList from '~/components/app/prescription/flat-list.vue'
+import Grouped from '~/components/app/prescription/grouped-list.vue'
 import type { Prescription } from '~/models/prescription'
-
-const props = defineProps<{
-  encounter_id: number
-}>()
+import { submit } from '~/services/prescription.service'
+import type { ToastFn } from '~/handlers/_handler'
 
 const route = useRoute()
 const { setQueryParams } = useQueryParam()
 
 const title = ref('')
+const isSubmitConfirmationOpen = ref(false)
 
 const plainEid = route.params.id
 const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
@@ -42,21 +43,40 @@ const {
   searchInput,
   fetchData: getMyList,
 } = usePaginatedList<Prescription>({
-  fetchFn: async ({ page, search }) => {
+  fetchFn: async (params: any) => {
     const result = await getList({
-      search,
-      page,
       'encounter-id': encounter_id,
-      includes: 'doctor,doctor-employee,doctor-employee-person',
+      includes: 'doctor,doctor-employee,doctor-employee-person,items,items-medicine,items-medicine-medicineForm',
+      search: params.search,
+      page: params.page,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
     })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'prescription'
 })
 
+function updateProvidedVal(val: boolean) {
+  flatMode.value = val
+}
+const flatMode = ref(false)
+const flatModeLabel = ref('Mode Flat: Tidak')
+provide('flatMode', { flatMode, updateProvidedVal })
+watch(flatMode, (newVal) => {
+  flatModeLabel.value = newVal ? 'Mode Flat: Ya' : 'Mode Flat: Tidak'
+})
+
+const vFn = () => {} // Void function
 const headerPrep: HeaderPrep = {
   title: 'Order Obat',
   icon: 'i-lucide-box',
+  components: [
+    {
+      component: defineAsyncComponent(() => import('~/components/pub/my-ui/toggle/provided-toggle.vue')),
+      props: { variant: 'outline', label: flatModeLabel, providedKey: 'flatMode' }
+    },
+  ],
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
@@ -71,11 +91,17 @@ const headerPrep: HeaderPrep = {
   addNav: {
     label: 'Tambah',
     icon: 'i-lucide-plus',
-    onClick: () => {
+    onClick: async () => {
       recItem.value = null
       recId.value = 0
-      isFormEntryDialogOpen.value = true
       isReadonly.value = false
+      const saveResp = await handleActionSave({ encounter_id }, vFn, vFn, vFn)
+      if (saveResp.success) {
+        setQueryParams({
+          'mode': 'entry',
+          'id': saveResp.body?.data?.id.toString()
+        })
+      }
     },
   },
 }
@@ -85,53 +111,13 @@ 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 Konsultasi'
-      isReadonly.value = true
-      break
-    case ActionEvents.showEdit:
-      getMyDetail(recId.value)
-      title.value = 'Edit Konsultasi'
-      isReadonly.value = false
-      break
-    case ActionEvents.showConfirmDelete:
-      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()
-      })
-    }
-  }
-})
-
-function cancel(data: Prescription) {
+function confirmCancel(data: Prescription) {
   recId.value = data.id
   recItem.value = data
   isRecordConfirmationOpen.value = true
 }
 
-function edit(data: Prescription) {
+function goToEdit(data: Prescription) {
   setQueryParams({
     'mode': 'entry',
     'id': data.id.toString()
@@ -139,21 +125,45 @@ function edit(data: Prescription) {
   recItem.value = data
 }
 
-function submit(data: Prescription) {
+function confirmSubmit(data: Prescription) {
+  recId.value = data.id
+  recItem.value = data
+  isSubmitConfirmationOpen.value = true
 }
 
+async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
+  const result = await submit(id)
+  if (result.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
+  }
+}
 </script>
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <List
-    v-if="!isLoading.dataListLoading"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @cancel="cancel"
-    @edit="edit"
-    @submit="submit"
-  />
+  <template v-if="!flatMode">
+    <Grouped 
+      v-if="!isLoading.dataListLoading"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @cancel="confirmCancel"
+      @edit="goToEdit"
+      @submit="confirmSubmit"
+    />
+  </template>
+  <template v-else>
+    <FlatList
+      v-if="!isLoading.dataListLoading"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @cancel="confirmCancel"
+      @edit="goToEdit"
+      @submit="confirmSubmit"
+    />
+  </template>
 
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
@@ -162,5 +172,37 @@ function submit(data: Prescription) {
     @confirm="() => handleActionRemove(recId, getMyList, toast)"
     @cancel=""
   >
+    <div class="flex mb-2">
+      <div class="w-20">Tanggal</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.createdAt.substring(0, 10) }}</div>
+    </div>
+    <div class="flex">
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
+    </div>
+  </RecordConfirmation>
+
+  <RecordConfirmation
+    v-model:open="isSubmitConfirmationOpen"
+    action="delete"
+    customTitle="Ajukan Resep"
+    customMessage="Proses akan mengajukan resep ini untuk diproses lebih lanjut. Lanjutkan?"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <div class="flex mb-2">
+      <div class="w-20">Tanggal</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.createdAt.substring(0, 10) }}</div>
+    </div>
+    <div class="flex">
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
+    </div>
   </RecordConfirmation>
 </template>
diff --git a/app/components/content/resume/add.vue b/app/components/content/resume/add.vue
new file mode 100644
index 00000000..6fda4bf8
--- /dev/null
+++ b/app/components/content/resume/add.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import type { ExposedForm } from '~/types/form';
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { ResumeSchema } from '~/schemas/resume.schema';
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date';
+import type { DateRange } from 'radix-vue';
+import { getPatients } from '~/services/patient.service';
+import ActionHistoryDialog from '~/components/app/resume/history-list/action-history-dialog.vue';
+import ConsultationHistoryDialog from '~/components/app/resume/history-list/consultation-history-dialog.vue';
+import SupportingHistoryDialog from '~/components/app/resume/history-list/supporting-history-dialog.vue';
+import FarmacyHistoryDialog from '~/components/app/resume/history-list/farmacy-history-dialog.vue';
+import NationalProgramHistoryDialog from '~/components/app/resume/history-list/national-program-history-dialog.vue';
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+const actionHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const consultationHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const supportingHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const farmacyHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const nationalProgramServiceHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+const isActionHistoryOpen = ref<boolean>(false)
+const isConsultationHistoryOpen = ref<boolean>(false)
+const isSupportingHistoryOpen = ref<boolean>(false)
+const isFarmacyHistoryOpen = ref<boolean>(false)
+const isNationalProgramServiceHistoryOpen = ref<boolean>(false)
+
+provide(`isActionHistoryOpen`, isActionHistoryOpen)
+provide(`isConsultationHistoryOpen`, isConsultationHistoryOpen)
+provide(`isSupportingHistoryOpen`, isSupportingHistoryOpen)
+provide(`isFarmacyHistoryOpen`, isFarmacyHistoryOpen)
+provide(`isNationalProgramServiceHistoryOpen`, isNationalProgramServiceHistoryOpen)
+
+const defaultDate = {
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}
+
+const actionHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const consultationHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const supportingHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const farmacyHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const nationalProgramServiceSearch = ref<string>('')
+const nationalProgramServiceSelectedStatus = ref<string>('all')
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  // handleActionClick('submit')
+  console.log(`tersubmit wak`)
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+    // const patient: Patient = await composeFormData()
+    // let createdPatientId = 0
+
+    // const response = await handleActionSave(
+    //   patient,
+    //   () => {},
+    //   () => {},
+    //   toast,
+    // )
+
+    // const data = (response?.body?.data ?? null) as PatientBase | null
+    // if (!data) return
+    // createdPatientId = data.id
+
+    // If has callback provided redirect to callback with patientData
+    // if (props.callbackUrl) {
+    //   await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
+    //   return
+    // }
+
+    // Navigate to patient list or show success message
+    // await navigateTo('/outpatient/encounter')
+    // return
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+    // handleCancelForm()
+  }
+}
+// #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 Resume</div>
+  <AppResumeAdd 
+    ref="personPatientForm"
+    :schema="ResumeSchema"
+    :resume-arrangement-type="personPatientForm?.values.arrangement"/>
+  
+  <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"
+  />
+
+  <ActionHistoryDialog
+    v-model:is-modal-open="isActionHistoryOpen"
+    v-model:date-value="actionHistoryDateValue"
+    :data="actionHistoryData.data.value"
+    :pagination-meta="actionHistoryData.paginationMeta"
+    @page-change="actionHistoryData.handlePageChange"
+  />
+
+  <p v-if="isConsultationHistoryOpen === true">aaaaaaaaaaaaaaa</p>
+  <ConsultationHistoryDialog
+    v-model:is-modal-open="isConsultationHistoryOpen"
+    v-model:date-value="consultationHistoryDateValue"
+    :data="consultationHistoryData.data.value"
+    :pagination-meta="consultationHistoryData.paginationMeta"
+    @page-change="consultationHistoryData.handlePageChange"
+  />
+
+  <SupportingHistoryDialog
+    v-model:is-modal-open="isSupportingHistoryOpen"
+    v-model:date-value="supportingHistoryDateValue"
+    :data="supportingHistoryData.data.value"
+    :pagination-meta="supportingHistoryData.paginationMeta"
+    @page-change="supportingHistoryData.handlePageChange"
+  />
+
+  <FarmacyHistoryDialog
+    v-model:is-modal-open="isFarmacyHistoryOpen"
+    v-model:date-value="farmacyHistoryDateValue"
+    :data="farmacyHistoryData.data.value"
+    :pagination-meta="farmacyHistoryData.paginationMeta"
+    @page-change="farmacyHistoryData.handlePageChange"
+  />
+
+  <NationalProgramHistoryDialog
+    v-model:is-modal-open="isNationalProgramServiceHistoryOpen"
+    v-model:search-value="nationalProgramServiceSearch"
+    v-model:status-value="nationalProgramServiceSelectedStatus"
+    :data="nationalProgramServiceHistoryData.data.value"
+    :pagination-meta="nationalProgramServiceHistoryData.paginationMeta"
+    @page-change="nationalProgramServiceHistoryData.handlePageChange"
+  />
+</template>
diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
new file mode 100644
index 00000000..4b5b5001
--- /dev/null
+++ b/app/components/content/resume/list.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+
+// #region Imports
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import 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 SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import type { ExposedForm } from '~/types/form'
+import { VerificationSchema } from '~/schemas/verification.schema'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import { unauthorizedToast } from '~/lib/utils'
+// #endregion
+
+
+// #region Permission
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const { getPagePermissions } = useRBAC()
+const pagePermission = getPagePermissions(roleAccess)
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const verificationInputForm = ref<ExposedForm<any> | null>(null)
+const isVerifyDialogOpen = ref(false)
+const isDocPreviewDialogOpen = 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 isCaptchaValid = ref(false)
+provide('isCaptchaValid', isCaptchaValid)
+
+const headerPrep: HeaderPrep = {
+  title: "Resume",
+  icon: 'i-lucide-newspaper',
+  }
+  if (pagePermission.canCreate) {
+    headerPrep.addNav = {
+      label: "Resume",
+      onClick: () => navigateTo('/resume/add'),
+    }
+  }
+// #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
+  }
+}
+
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    // const patient: Patient = await composeFormData()
+    // let createdPatientId = 0
+
+    // const response = await handleActionSave(
+    //   patient,
+    //   () => {},
+    //   () => {},
+    //   toast,
+    // )
+
+    // const data = (response?.body?.data ?? null) as PatientBase | null
+    // if (!data) return
+    // createdPatientId = data.id
+
+    // If has callback provided redirect to callback with patientData
+    // if (props.callbackUrl) {
+    //   await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
+    //   return
+    // }
+
+    // Navigate to patient list or show success message
+    // await navigateTo('/outpatient/encounter')
+    // return
+  }
+
+  if (eventType === 'back') {
+    isVerifyDialogOpen.value = false
+  }
+}
+
+async function handleConfirmDelete() {
+  try {
+      const result = await removePatient(recId.value)
+      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
+}
+// #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.showVerify:
+        if(pagePermission.canUpdate) { 
+          isVerifyDialogOpen.value = true
+        } else {
+          unauthorizedToast()
+        }
+        break
+      case ActionEvents.showValidate:
+        if(pagePermission.canUpdate) {        
+          isRecordConfirmationOpen.value = true
+        } else {
+          unauthorizedToast()
+        }
+        break
+      case ActionEvents.showPrint:
+        isDocPreviewDialogOpen.value = true
+        break
+    }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <!-- <AppTherapyProtocolList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"/> -->
+  <AppResumeList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"/>
+
+  <Dialog v-model:open="isVerifyDialogOpen" title="Verifikasi">
+    <AppResumeVerifyDialog
+      ref="verificationInputForm"
+      :schema="VerificationSchema" />
+    <div class="flex justify-end">
+      <Action v-show="isCaptchaValid" :enable-draft="false" @click="handleActionClick" />
+    </div>
+  </Dialog>
+
+  <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
+    <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
+  </Dialog>
+  
+  <Confirmation
+    v-model:open="isRecordConfirmationOpen"
+    title="Validasi Data"
+    message="Apakah Anda yakin ingin menvalidasi data ini?"
+    confirm-text="Validasi"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  />
+</template>
\ No newline at end of file
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 3a916c4d..6e91f464 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -1,483 +1,59 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { onMounted } from 'vue'
 
 // 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'
+// Handler
+import useIntegrationSepEntry from '~/handlers/integration-sep-entry.handler'
 
-// 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 {
+const {
+  histories,
+  letters,
   patients,
+  doctors,
+  diagnoses,
+  facilitiesFrom,
+  facilitiesTo,
+  supportCodesList,
+  serviceTypesList,
+  registerMethodsList,
+  accidentsList,
+  purposeOfVisitsList,
+  proceduresList,
+  assessmentsList,
+  provincesList,
+  citiesList,
+  districtsList,
+  classLevelsList,
+  classLevelUpgradesList,
+  classPaySourcesList,
+  isServiceHidden,
+  isSaveLoading,
+  isLetterReadonly,
+  isLoadingPatient,
+  openPatient,
+  openLetter,
+  openHistory,
+  selectedLetter,
+  selectedObjects,
+  selectedServiceType,
+  selectedAdmissionType,
+  specialistsTree,
   selectedPatient,
-  selectedPatientObject,
   paginationMeta,
+  getLetterMappers,
   getPatientsList,
-  getPatientCurrent,
   getPatientByIdentifierSearch,
-} from '~/handlers/patient.handler'
-
-const route = useRoute()
-const openPatient = ref(false)
-const openLetter = ref(false)
-const openHistory = ref(false)
-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('')
-
-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,
-      })
-    })
-  }
-}
-
-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": ""
-      //       },
-
-      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 || '',
-          },
-        },
-      ]
-    }
-  }
-}
-
-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() {
-  // 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
-  }
-}
-
-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 (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 (menu === 'history-sep') {
-    getMonitoringHistoryMappers().then(() => {
-      openHistory.value = true
-    })
-    return
-  }
-  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']
-  }
-}
+  handleSaveLetter,
+  handleSavePatient,
+  handleEvent,
+  handleFetch,
+  handleInit,
+} = useIntegrationSepEntry()
 
 onMounted(async () => {
   await handleInit()
diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index 013b076a..5850ea54 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -1,8 +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'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import {
   DropdownMenu,
@@ -11,141 +8,48 @@ import {
   DropdownMenuItem,
 } from '~/components/pub/ui/dropdown-menu'
 import AppSepList from '~/components/app/sep/list.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
 
 // Icons
 import { X, Check } from 'lucide-vue-next'
 
-// Types
-import type { VclaimSepData } from '~/models/vclaim'
+// Libraries
+import useIntegrationSepList from '~/handlers/integration-sep-list.handler'
 
-// Services
-import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
+// use handler to provide state and functions
+const {
+  recId,
+  recAction,
+  recItem,
+  data,
+  dateSelection,
+  dateRange,
+  serviceType,
+  serviceTypesList,
+  search,
+  open,
+  sepData,
+  headerPrep,
+  paginationMeta,
+  isLoading,
+  getSepList,
+  setServiceTypes,
+  setDateRange,
+  handleExportCsv,
+  handleExportExcel,
+  handleRowSelected,
+  handlePageChange,
+  handleRemove,
+} = useIntegrationSepList()
 
-const search = ref('')
-const dateRange = ref('12 Agustus 2025 - 31 Agustus 2025')
-const open = ref(false)
-
-const sepData = {
-  no_sep: 'SP23311224',
-  kartu: '001234',
-  nama: 'Kenzie',
-}
-
-const paginationMeta = reactive<PaginationMeta>({
-  recordCount: 0,
-  page: 1,
-  pageSize: 10,
-  totalPage: 5,
-  hasNext: false,
-  hasPrev: false,
-})
-
-function handlePageChange(page: number) {
-  console.log('pageChange', page)
-}
-
-const data = ref<VclaimSepData[]>([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const headerPrep: HeaderPrep = {
-  title: 'Daftar SEP Prosedur',
-  icon: 'i-lucide-panel-bottom',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => {
-      navigateTo('/integration/bpjs/sep/add')
-    },
-  },
-}
-
-async function getMonitoringVisitMappers() {
-  isLoading.dataListLoading = true
-  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
-}
-
-async function getSepList() {
-  await getMonitoringVisitMappers()
-}
-
-function exportCsv() {  
-  console.log('Ekspor CSV dipilih')
-  // tambahkan logic untuk generate CSV
-}
-
-function exportExcel() {
-  console.log('Ekspor Excel dipilih')
-  // tambahkan logic untuk generate Excel
-}
-
-function handleDelete() {
-  console.log('Data dihapus:', sepData)
-  open.value = false
-}
+// expose provides so component can also use provide/inject if needed
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 
 watch(
-  () => recAction.value,
+  [recId, recAction],
   () => {
     if (recAction.value === 'showConfirmDel') {
       open.value = true
@@ -153,14 +57,26 @@ watch(
   },
 )
 
+watch(
+  () => dateSelection.value,
+  (val) => {
+    if (!val) return
+    setDateRange()
+  },
+  { deep: true },
+)
+
+watch(
+  () => serviceType.value,
+  () => {
+    getSepList()
+  },
+)
+
 onMounted(() => {
+  setServiceTypes()
   getSepList()
 })
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
 </script>
 
 <template>
@@ -169,100 +85,77 @@ provide('table_data_loader', isLoading)
     <!-- 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" />
+
+      <!-- Filter -->
+      <div class="w-72">
+        <Select id="serviceType" icon-name="i-lucide-chevron-down" v-model="serviceType" :items="serviceTypesList"
+          placeholder="Pilih Pelayanan" />
+      </div>
 
       <!-- 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">
-          <Calendar mode="range" />
+          <RangeCalendar v-model="dateSelection" />
         </PopoverContent>
       </Popover>
 
       <!-- Export -->
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button
-            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"
-            />
+          <Button 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
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent class="w-40">
-          <DropdownMenuItem @click="exportCsv">Ekspor CSV</DropdownMenuItem>
-          <DropdownMenuItem @click="exportExcel">Ekspor Excel</DropdownMenuItem>
+          <DropdownMenuItem @click="handleExportCsv">Ekspor CSV</DropdownMenuItem>
+          <DropdownMenuItem @click="handleExportExcel">Ekspor Excel</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
 
     <div class="mt-4">
-      <AppSepList
-        v-if="!isLoading.dataListLoading"
-        :data="data"
-      />
+      <AppSepList v-if="!isLoading.dataListLoading" :data="data" @update:modelValue="handleRowSelected" />
     </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>
 
     <!-- Trigger button -->
     <Dialog v-model:open="open">
       <DialogTrigger as-child></DialogTrigger>
-
       <DialogContent class="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>Hapus SEP</DialogTitle>
         </DialogHeader>
-
         <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>
-          <p>No. Kartu BPJS : {{ sepData.kartu }}</p>
-          <p>Nama Pasien : {{ sepData.nama }}</p>
+          <p><strong>No. SEP:</strong> {{ sepData.sepNumber }}</p>
+          <p><strong>No. Kartu BPJS:</strong> {{ sepData.cardNumber }}</p>
+          <p><strong>Nama Pasien:</strong> {{ sepData.patientName }}</p>
         </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"
-          >
+          <Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="() => {
+            recId = 0
+            recAction = ''
+            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"
-          >
+          <Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleRemove">
             <Check class="mr-1 h-4 w-4" />
             Ya
           </Button>
diff --git a/app/components/content/soapi/entry.vue b/app/components/content/soapi/entry.vue
index ee3c7c32..d4e960f3 100644
--- a/app/components/content/soapi/entry.vue
+++ b/app/components/content/soapi/entry.vue
@@ -24,12 +24,7 @@ const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
 
 <template>
   <div>
-    <SoapiList
-      v-if="mode === 'list'"
-      @add="goToEntry"
-      @edit="goToEntry"
-    />
-
+    <SoapiList v-if="mode === 'list'" />
     <component
       v-else
       :is="ActiveForm"
diff --git a/app/components/content/soapi/form.vue b/app/components/content/soapi/form.vue
index c963a091..4ec0d85e 100644
--- a/app/components/content/soapi/form.vue
+++ b/app/components/content/soapi/form.vue
@@ -8,7 +8,8 @@ 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 { goToEntry, backToList } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDMode('record-id')
 const route = useRoute()
 const isOpenProcedure = ref(false)
 const isOpenDiagnose = ref(false)
@@ -20,7 +21,7 @@ const schema = EarlySchema
 const payload = ref({
   encounter_id: 0,
   time: '',
-  typeCode: 'early',
+  typeCode: 'early-medic',
   value: '',
 })
 
@@ -46,7 +47,7 @@ const isLoading = reactive<DataTableLoader>({
 
 async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/diagnose-src')
+  const resp = await xfetch(`/api/v1/soapi/${recordId}`)
   if (resp.success) {
     diagnoses.value = (resp.body as Record<string, any>).data
   }
@@ -77,6 +78,7 @@ function handleOpen(type: string) {
 
 const entryRef = ref()
 async function actionHandler(type: string) {
+  console.log(type)
   if (type === 'back') {
     backToList()
     return
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
index 5a960d5d..a23d8434 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -22,10 +22,14 @@ interface Props {
   encounter: Encounter
   label: string
 }
-const route = useRoute()
 const props = defineProps<Props>()
 const emits = defineEmits(['add', 'edit'])
 
+const { recordId } = useQueryCRUDRecordId()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+const router = useRouter()
+const route = useRoute()
+
 const data = ref([])
 const encounterId = ref<number>(props?.encounter?.id || 0)
 const title = ref('')
@@ -56,13 +60,10 @@ const hreaderPrep: HeaderPrep = {
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => emits('add'),
+    onClick: () => goToEntry(),
   },
 }
 
-const { recordId } = useQueryCRUDRecordId()
-const { goToEntry, backToList } = useQueryCRUDMode('mode')
-
 const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
 
 onMounted(async () => {
@@ -70,13 +71,24 @@ onMounted(async () => {
 })
 
 async function getMyList() {
-  const url = `/api/v1/soapi?type-code=${typeCode.value}?includes=encounter`
+  const url = `/api/v1/soapi?typeCode=${typeCode.value}&includes=encounter,employee&encounter-id=${route.params.id}`
   const resp = await xfetch(url)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
 }
 
+const goEdit = (id: string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
 function handlePageChange(page: number) {
   emits('pageChange', page)
 }
@@ -142,6 +154,14 @@ watch([recId, recAction], () => {
   }
 })
 
+// watch(recId, () => {
+//   console.log('recId', recId.value)
+//   console.log('recIdaacin', recAction.value)
+//   if (recAction.value === 'showEdit') {
+//     goEdit(recId.value)
+//   }
+// })
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
diff --git a/app/components/content/specialist-position/list.vue b/app/components/content/specialist-position/list.vue
index 1ebf697e..cc176400 100644
--- a/app/components/content/specialist-position/list.vue
+++ b/app/components/content/specialist-position/list.vue
@@ -105,12 +105,12 @@ const getCurrentSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentSpecialistDetail(recId.value)
+      getCurrentSpecialistDetail(recItem.value.code)
       title.value = 'Detail Spesialis Posisi'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getCurrentSpecialistDetail(recId.value)
+      getCurrentSpecialistDetail(recItem.value.code)
       title.value = 'Edit Spesialis Posisi'
       isReadonly.value = false
       break
@@ -122,7 +122,7 @@ watch([recId, recAction], () => {
 
 onMounted(async () => {
   try {
-    specialists.value = await getValueLabelSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+    specialists.value = await getValueLabelSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 }, true)
     employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
   } catch (err) {
     console.log(err)
@@ -169,8 +169,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: SpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getSpecialistList, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getSpecialistList, resetForm, toast)
             return
           }
           handleActionSave(values, getSpecialistList, resetForm, toast)
@@ -184,7 +184,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getSpecialistList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getSpecialistList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/specialist/detail.vue b/app/components/content/specialist/detail.vue
index df4e79b6..8ff00c7d 100644
--- a/app/components/content/specialist/detail.vue
+++ b/app/components/content/specialist/detail.vue
@@ -48,7 +48,7 @@ const title = ref('')
 
 // #region Props & Emits
 const props = defineProps<{
-  specialistId: number
+  specialistId: string
 }>()
 const specialist = ref<Specialist>({} as Specialist)
 // #endregion
@@ -154,7 +154,7 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showEdit:
-      getDetailSpecialistPosition(recId.value)
+      getDetailSpecialistPosition(recItem.value.code)
       title.value = 'Edit Posisi'
       isReadonly.value = false
       isFormEntryDialogOpen.value = true
@@ -203,8 +203,8 @@ watch([recId, recAction], () => {
       @submit="
         (values: SpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
           console.log(values)
-          if (recId > 0) {
-            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getPositionList, onResetState, toast)
             return
           }
           handleActionSave(values, getPositionList, onResetState, toast)
@@ -217,7 +217,7 @@ watch([recId, recAction], () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getPositionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getPositionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index ca293026..ea96710b 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -103,26 +103,23 @@ const getCurrentSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      if (Number(recId.value) > 0) {
-        const id = Number(recId.value)
+      if (recItem.value.code.length > 0) {
+        navigateTo({
+          name: 'org-src-specialist-id',
+          params: {
+            id: recItem.value.code,
+          },
+        })
 
         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)
+      getCurrentSpecialistDetail(recItem.value.code)
       title.value = 'Edit Spesialis'
       isReadonly.value = false
       break
@@ -133,7 +130,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  units.value = await getUnitList()
+  units.value = await getUnitList({}, true)
   await getSpecialistList()
 })
 </script>
@@ -172,8 +169,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: SpecialistFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getSpecialistList, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getSpecialistList, resetForm, toast)
             return
           }
           handleActionSave(values, getSpecialistList, resetForm, toast)
@@ -188,7 +185,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getSpecialistList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getSpecialistList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/subspecialist-position/list.vue b/app/components/content/subspecialist-position/list.vue
index 4c833ce2..02b0a676 100644
--- a/app/components/content/subspecialist-position/list.vue
+++ b/app/components/content/subspecialist-position/list.vue
@@ -110,12 +110,12 @@ const getCurrentSubSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentSubSpecialistDetail(recId.value)
+      getCurrentSubSpecialistDetail(recItem.value.code)
       title.value = 'Detail Sub Spesialis Posisi'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getCurrentSubSpecialistDetail(recId.value)
+      getCurrentSubSpecialistDetail(recItem.value.code)
       title.value = 'Edit Sub Spesialis Posisi'
       isReadonly.value = false
       break
@@ -127,7 +127,7 @@ watch([recId, recAction], () => {
 
 onMounted(async () => {
   try {
-    subSpecialists.value = await getValueLabelSubSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+    subSpecialists.value = await getValueLabelSubSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 }, true)
     employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
   } catch (err) {
     console.log(err)
@@ -176,8 +176,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getSubSpecialistList, onResetState, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getSubSpecialistList, onResetState, toast)
             return
           }
           handleActionSave(values, getSubSpecialistList, onResetState, toast)
@@ -192,7 +192,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getSubSpecialistList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getSubSpecialistList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/subspecialist/detail.vue b/app/components/content/subspecialist/detail.vue
index d432eb22..165484a4 100644
--- a/app/components/content/subspecialist/detail.vue
+++ b/app/components/content/subspecialist/detail.vue
@@ -51,7 +51,7 @@ const title = ref('')
 
 // #region Props & Emits
 const props = defineProps<{
-  subspecialistId: number
+  subspecialistId: string
 }>()
 const subSpecialist = ref<Subspecialist>({} as Subspecialist)
 // #endregion
@@ -157,7 +157,7 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showEdit:
-      getDetailSubSpecialistPosition(recId.value)
+      getDetailSubSpecialistPosition(recItem.value.code)
       title.value = 'Edit Posisi'
       isReadonly.value = false
       isFormEntryDialogOpen.value = true
@@ -206,8 +206,8 @@ watch([recId, recAction], () => {
       @submit="
         (values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
           console.log(values)
-          if (recId > 0) {
-            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getPositionList, onResetState, toast)
             return
           }
           handleActionSave(values, getPositionList, onResetState, toast)
@@ -220,7 +220,7 @@ watch([recId, recAction], () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getPositionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getPositionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index bb1b63f5..a9925ad2 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -103,26 +103,23 @@ const getCurrentSubSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      if (Number(recId.value) > 0) {
-        const id = Number(recId.value)
+      if (recItem.value.code.length > 0) {
+        navigateTo({
+          name: 'org-src-subspecialist-id',
+          params: {
+            id: recItem.value.code,
+          },
+        })
 
         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)
+      getCurrentSubSpecialistDetail(recItem.value.code)
       title.value = 'Edit Sub Spesialis'
       isReadonly.value = false
       break
@@ -133,7 +130,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  specialists.value = await getSpecialistsList()
+  specialists.value = await getSpecialistsList({}, true)
   await getSubSpecialistList()
 })
 </script>
@@ -172,8 +169,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: SubspecialistFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getSubSpecialistList, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getSubSpecialistList, resetForm, toast)
             return
           }
           handleActionSave(values, getSubSpecialistList, resetForm, toast)
@@ -188,7 +185,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getSubSpecialistList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getSubSpecialistList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index da22a976..4f50199f 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -163,7 +163,7 @@ onMounted(async () => {
       @submit="
         (values: DeviceFormData, resetForm: any) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getToolsList, resetForm, toast)
+            handleActionEdit(recItem.code, values, getToolsList, resetForm, toast)
             return
           }
           handleActionSave(values, getToolsList, resetForm, toast)
@@ -178,7 +178,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getToolsList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getToolsList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/unit-position/list.vue b/app/components/content/unit-position/list.vue
index 55ab3f29..e0ffc5f2 100644
--- a/app/components/content/unit-position/list.vue
+++ b/app/components/content/unit-position/list.vue
@@ -106,12 +106,12 @@ const getCurrentUnitDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentUnitDetail(recId.value)
+      getCurrentUnitDetail(recItem.value.code)
       title.value = 'Detail Unit Posisi'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getCurrentUnitDetail(recId.value)
+      getCurrentUnitDetail(recItem.value.code)
       title.value = 'Edit Unit Posisi'
       isReadonly.value = false
       break
@@ -123,7 +123,7 @@ watch([recId, recAction], () => {
 
 onMounted(async () => {
   try {
-    units.value = await getValueLabelUnitList({ sort: 'createdAt:asc', 'page-size': 100 })
+    units.value = await getValueLabelUnitList({ sort: 'createdAt:asc', 'page-size': 100 }, true)
     employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
   } catch (err) {
     console.log(err)
@@ -172,8 +172,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: UnitPositionFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getListUnit, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getListUnit, resetForm, toast)
             return
           }
           handleActionSave(values, getListUnit, resetForm, toast)
@@ -187,7 +187,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getListUnit, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getListUnit, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/unit/detail.vue b/app/components/content/unit/detail.vue
index 6c51624f..17070c35 100644
--- a/app/components/content/unit/detail.vue
+++ b/app/components/content/unit/detail.vue
@@ -47,7 +47,7 @@ const title = ref('')
 
 // #region Props & Emits
 const props = defineProps<{
-  unitId: number
+  unitId: string
 }>()
 const unit = ref<Unit>({} as Unit)
 // #endregion
@@ -152,7 +152,7 @@ watch([recId, recAction], () => {
   console.log(recId, recAction)
   switch (recAction.value) {
     case ActionEvents.showEdit:
-      getDetailUnitPosition(recId.value)
+      getDetailUnitPosition(recItem.value.code)
       title.value = 'Edit Posisi'
       isReadonly.value = false
       isFormEntryDialogOpen.value = true
@@ -201,8 +201,8 @@ watch([recId, recAction], () => {
       @submit="
         (values: UnitPositionFormData | Record<string, any>, resetForm: () => void) => {
           console.log(values)
-          if (recId > 0) {
-            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getPositionList, onResetState, toast)
             return
           }
           handleActionSave(values, getPositionList, onResetState, toast)
@@ -215,7 +215,7 @@ watch([recId, recAction], () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getPositionList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getPositionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 34b647ef..2e281ddb 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -103,26 +103,22 @@ const getCurrentUnitDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      if (Number(recId.value) > 0) {
-        const id = Number(recId.value)
-
+      if (recItem.value.code.length > 0) {  
+        navigateTo({
+          name: 'org-src-unit-id',
+          params: {
+            id: recItem.value.code,
+          },
+        })
         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)
+      getCurrentUnitDetail(recItem.value.code)
       title.value = 'Edit Unit'
       isReadonly.value = false
       break
@@ -133,7 +129,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  installations.value = await getInstallationList()
+  installations.value = await getInstallationList({}, true)
   await getUnitList()
 })
 </script>
@@ -172,8 +168,8 @@ onMounted(async () => {
       :is-readonly="isReadonly"
       @submit="
         (values: UnitFormData | Record<string, any>, resetForm: () => void) => {
-          if (recId > 0) {
-            handleActionEdit(recId, values, getUnitList, resetForm, toast)
+          if (recItem?.code.length > 0) {
+            handleActionEdit(recItem.code, values, getUnitList, resetForm, toast)
             return
           }
           handleActionSave(values, getUnitList, resetForm, toast)
@@ -188,7 +184,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getUnitList, toast)"
+    @confirm="() => handleActionRemove(recItem.code, getUnitList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index a14b2137..2ee07219 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -48,9 +48,18 @@ async function setMenu() {
   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)
+    const parsedMenu = JSON.parse(rawMenu)
+
+    const { user } = useUserStore()
+    if(user.unit_code == 'rehab') {
+      parsedMenu[0].heading = 'Rehab Medik'
+      parsedMenu[0].items = parsedMenu[0].items.filter((item: any) => item.title != 'IGD')
+    }
+
+    navMenu.value = parsedMenu
   } catch (e) {
     const res = await fetch(`/side-menu-items/blank.json`)
     const rawMenu = await res.text()
diff --git a/app/components/pub/my-ui/comp-menu/comp-menu.vue b/app/components/pub/my-ui/comp-menu/comp-menu.vue
new file mode 100644
index 00000000..fab41dde
--- /dev/null
+++ b/app/components/pub/my-ui/comp-menu/comp-menu.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { type TabItem } from '../comp-tab/type'
+
+const props = defineProps<{
+  initialActiveMenu: string
+  data: TabItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveMenu)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="mt-4 flex gap-4">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
+        <button
+          v-for="menu in data"
+          :key="menu.value"
+          :data-active="activeMenu === menu.value"
+          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.value)"
+        >
+          {{ menu.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Active Menu Content -->
+    <div v-if="data.find((m) => m.value === activeMenu)?.component" class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+      <component
+        :is="data.find((m) => m.value === activeMenu)?.component"
+        v-bind="data.find((m) => m.value === activeMenu)?.props"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/comp-tab/type.ts b/app/components/pub/my-ui/comp-tab/type.ts
index ba21d0b7..6ca710fa 100644
--- a/app/components/pub/my-ui/comp-tab/type.ts
+++ b/app/components/pub/my-ui/comp-tab/type.ts
@@ -3,5 +3,7 @@ export interface TabItem {
   label: string
   component?: any
   groups?: string[]
+  classCode?: string[]
+  subClassCode?: string[]
   props?: Record<string, any>
 }
diff --git a/app/components/pub/my-ui/content-header/content-header.vue b/app/components/pub/my-ui/content-header/content-header.vue
new file mode 100644
index 00000000..be5700a4
--- /dev/null
+++ b/app/components/pub/my-ui/content-header/content-header.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { Config } from './index'
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<Config>()
+
+const emit = defineEmits<{
+  'update:searchModelValue': [value: string]
+  'search': [value: string]
+}>()
+
+// Quick search
+const search = ref(props.quickSearchNav?.modelValue || props.refSearchNav?.modelValue || '')
+const debouncedSearch = refDebounced(search, props.quickSearchNav?.debounceDuration || 500)
+
+// Computed search model for v-model
+const searchModel = computed({
+  get: () => search.value,
+  set: (value: string) => {
+    search.value = value
+    emit('update:searchModelValue', value)
+  },
+})
+
+// Watch for external changes to modelValue
+watch(() => props.quickSearchNav?.modelValue, (newValue) => {
+  if (newValue !== props.quickSearchNav?.modelValue) {
+    search.value = newValue || ''
+  }
+})
+
+// Watch debounced search and emit search event
+watch(debouncedSearch, (newValue) => {
+  const minLength = props.quickSearchNav?.minLength || 3
+  // Only search if meets minimum length or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= minLength) {
+    emit('search', newValue)
+    props.refSearchNav?.onInput(newValue)
+  }
+})
+
+// Handle clear search
+function clearSearch() {
+  searchModel.value = ''
+  props.quickSearchNav?.onClear()
+  props.refSearchNav?.onClear()
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between pb-4 2xl:pb-5 ">
+    <div class="flex items-center">
+      <div class="ml-3 text-lg font-semibold text-gray-900">
+        <Icon v-if="icon" :name="icon" class="mr-2 size-4 md:size-6 align-middle" />
+        {{ title }}
+      </div>
+    </div>
+
+    <div class="flex items-center [&>*]:ms-2">
+      <!-- Slot -->
+      <slot />
+
+      <!-- Search Section -->
+      <div v-if="quickSearchNav || refSearchNav" class="relative">
+        <Input
+          v-model="searchModel"
+          name="search"
+          type="text"
+          :class="quickSearchNav?.inputClass || refSearchNav?.inputClass"
+          :placeholder="quickSearchNav?.placeholder || refSearchNav?.placeholder || 'Cari (min. 3 karakter)...'"
+        />
+
+        <button
+          v-if="search.length > 0"
+          class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+          type="button"
+          @click="clearSearch"
+        >
+          <Icon name="i-lucide-x" class="h-4 w-4" />
+        </button>
+
+        <div
+          v-if="quickSearchNav && quickSearchNav.showValidationFeedback !== false && searchModel.length > 0 && searchModel.length < (quickSearchNav.minLength || 3)"
+          class="absolute -bottom-6 left-0 text-xs text-amber-600 whitespace-nowrap"
+        >
+          Minimal {{ quickSearchNav.minLength || 3 }} karakter untuk mencari
+        </div>
+      </div>
+
+      <!-- Add Button -->
+      <div v-if="addNav" class="flex items-center">
+        <Button
+          class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm"
+          :class="addNav.classVal"
+          :variant="(addNav.variant as any) || 'default'"
+          @click="addNav?.onClick"
+        >
+          <Icon :name="addNav.icon || 'i-lucide-plus'" class="mr-2 h-4 w-4 align-middle" />
+          {{ addNav.label }}
+        </Button>
+      </div>
+
+      <!-- Filter Button -->
+      <div v-if="filterNav" class="flex items-center">
+        <Button
+          class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+          :class="filterNav.classVal"
+          :variant="(filterNav.variant as any) || 'default'"
+          @click="filterNav?.onClick"
+        >
+          <Icon :name="filterNav.icon || 'i-lucide-filter'" class="mr-2 h-4 w-4 align-middle" />
+          {{ filterNav.label }}
+        </Button>
+      </div>
+
+      <!-- Print Button -->
+      <div v-if="printNav" class="flex items-center">
+        <Button
+          class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+          :class="printNav.classVal"
+          :variant="(printNav.variant as any) || 'default'"
+          @click="printNav?.onClick"
+        >
+          <Icon :name="printNav.icon || 'i-lucide-printer'" class="mr-2 h-4 w-4 align-middle" />
+          {{ printNav.label }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/content-header/index.ts b/app/components/pub/my-ui/content-header/index.ts
new file mode 100644
index 00000000..7c07f9d5
--- /dev/null
+++ b/app/components/pub/my-ui/content-header/index.ts
@@ -0,0 +1,59 @@
+export type ComponentWithProps = { component: Component, props: Record<string, any> }
+
+export interface ButtonNav {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  classVal?: string
+  classValExt?: string
+  icon?: string
+  label: string
+  onClick?: () => void
+}
+
+// can type directly
+export interface QuickSearchNav {
+  modelValue?: string
+  placeholder?: string
+  inputClass?: string
+  inputPlaceHolder?: string
+  minLength?: number
+  btnClass?: string
+  btnIcon?: string
+  btnLabel?: string
+  showValidationFeedback?: boolean
+  debounceDuration?: number
+  searchParams: object
+  onSubmit?: (searchParams: object) => void
+  onClear: () => void
+}
+
+// callback on event
+export interface RefSearchNav {
+  modelValue?: string
+  placeholder?: string
+  inputClass?: string
+  inputPlaceHolder?: string
+  btnClass?: string
+  btnIcon?: string
+  onInput: (val: string) => void
+  onClick: () => void
+  onClear: () => void
+}
+
+export interface RefExportNav {
+  onExportPdf?: () => void
+  onExportCsv?: () => void
+  onExportExcel?: () => void
+}
+
+export interface Config {
+  title?: string
+  icon?: string
+  components?: ComponentWithProps[]
+  quickSearchNav?: QuickSearchNav
+  refSearchNav?: RefSearchNav // either ref or quick
+  filterNav?: ButtonNav
+  addNav?: ButtonNav
+  printNav?: ButtonNav
+}
+
+export { default as ContentHeader } from './content-header.vue'
diff --git a/app/components/pub/my-ui/content-switcher/content-switcher.vue b/app/components/pub/my-ui/content-switcher/content-switcher.vue
new file mode 100644
index 00000000..3b79f193
--- /dev/null
+++ b/app/components/pub/my-ui/content-switcher/content-switcher.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const props = defineProps<{
+  height?: number
+  activeTab?: 1 | 2
+}>()
+
+const activeTab = ref(props.activeTab || 1)
+
+function handleClick(value: 1 | 2) {
+  activeTab.value = value
+}
+</script>
+
+<template>
+  <div class="content-switcher" :style="`height: ${height || 200}px`">
+    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
+      <div class="content-wrapper">
+        <div>
+          <slot name="content1" />
+        </div>
+      </div>
+      <div class="content-nav">
+        <button @click="handleClick(1)">
+          <Icon name="i-lucide-chevron-right" />
+        </button>
+      </div>
+    </div>
+    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
+      <div class="content-nav">
+        <button @click="handleClick(2)">
+          <Icon name="i-lucide-chevron-left" />
+        </button>
+      </div>
+      <div class="content-wrapper">
+        <div>
+          <slot name="content2" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .content-switcher {
+    @apply flex overflow-hidden gap-3
+  }
+  .content-switcher > * {
+    @apply border border-slate-300 rounded-md flex overflow-hidden
+  }
+
+  .content-wrapper {
+    @apply p-4 2xl:p-5 overflow-hidden grow
+  }
+  .inactive .content-wrapper {
+    @apply p-0 w-0
+  }
+
+  .content-nav {
+    @apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  }
+
+  .content-nav button {
+    @apply pt-2 px-2 h-full w-full
+  }
+
+  /* .content-switcher .inactive > .content-wrapper {
+    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
+  } */
+  .content-switcher .inactive {
+    @apply w-16 transition-all duration-500 ease-in-out
+  }
+  .content-switcher .inactive > .content-nav {
+    @apply w-full transition-all duration-100 ease-in-out
+  }
+
+  .content-switcher .active {
+    @apply grow transition-all duration-500 ease-in-out
+  }
+  .content-switcher .active > .content-nav {
+    @apply w-0 transition-all duration-100 ease-in-out
+  }
+  /* .content-switcher .active > .content-wrapper {
+    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
+  } */
+
+</style>
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 431df276..408b6d9d 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -85,7 +85,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           v-for="(th, idx) in headers[hrIdx]"
           :key="`head-${idx}`"
           :class="`border ${th.classVal || ''}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}${cols[idx].widthUnit ?? 'px'}` : '' }"
         >
           {{ th.label }}
         </TableHead>
diff --git a/app/components/pub/my-ui/data/dropdown-action-dd.vue b/app/components/pub/my-ui/data/dropdown-action-dd.vue
new file mode 100644
index 00000000..a6a99c9a
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-dd.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './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 timestamp = inject<Ref<number>>('timestamp')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+  timestamp.value = Date.now()
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+  timestamp.value = Date.now()
+}
+</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/pub/my-ui/data/dropdown-action-dud.vue b/app/components/pub/my-ui/data/dropdown-action-dud.vue
index dfcf1ada..71979c7c 100644
--- a/app/components/pub/my-ui/data/dropdown-action-dud.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-dud.vue
@@ -2,14 +2,9 @@
 import type { LinkItem, ListItemDto } from './types'
 import { ActionEvents } from './types'
 
-interface Props {
+const props = defineProps<{
   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')!
@@ -63,7 +58,7 @@ function del() {
     <DropdownMenu>
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
-          :size="size"
+          size="lg"
           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/dropdown-action-dvvp.vue b/app/components/pub/my-ui/data/dropdown-action-dvvp.vue
new file mode 100644
index 00000000..00e15096
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-dvvp.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './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: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Verifikasi',
+    onClick: () => {
+      verify()
+    },
+    icon: 'i-lucide-check',
+  },
+  {
+    label: 'Validasi',
+    onClick: () => {
+      validate()
+    },
+    icon: 'i-lucide-check-check',
+  },
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function verify() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showVerify
+  recItem.value = props.rec
+}
+
+function validate() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showValidate
+  recItem.value = props.rec
+}
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  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/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index cf251cc8..cdbb81f9 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -42,6 +42,12 @@ 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
@@ -65,6 +71,7 @@ export interface KeyNames {
 
 export interface LinkItem {
   label: string
+  value?: string
   icon?: string
   href?: string // to cover the needs of stating full external origins full url
   action?: string // for local paths
@@ -78,6 +85,10 @@ export const ActionEvents = {
   showEdit: 'showEdit',
   showDetail: 'showDetail',
   showProcess: 'showProcess',
+  showCancel: 'showCancel',
+  showVerify: 'showVerify',
+  showValidate: 'showValidate',
+  showPrint: 'showPrint',
 }
 
 export interface DataTableLoader {
diff --git a/app/components/pub/my-ui/doc-entry/colon.vue b/app/components/pub/my-ui/doc-entry/colon.vue
index a6d379f5..6c3b3100 100644
--- a/app/components/pub/my-ui/doc-entry/colon.vue
+++ b/app/components/pub/my-ui/doc-entry/colon.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-
+const { class: classProp } = defineProps<{
+  class?: string
+}>()
 </script>
 
 <template>
-  <div class="w-5 text-center">:</div>    
+  <div :class="`w-4 ps-1 ${classProp}`">:</div>
 </template>
diff --git a/app/components/pub/my-ui/form/file-field.vue b/app/components/pub/my-ui/form/file-field.vue
index bc6a86c9..31885a6f 100644
--- a/app/components/pub/my-ui/form/file-field.vue
+++ b/app/components/pub/my-ui/form/file-field.vue
@@ -62,7 +62,7 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
               @change="onFileChange($event, handleChange)"
               type="file"
               :disabled="isDisabled"
-              v-bind="componentField"
+              v-bind="{ onBlur: componentField.onBlur }" 
               :placeholder="placeholder"
               :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
             />
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index a3743734..c31b2073 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -63,14 +63,14 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem :class="`relative`">
+        <FormItem :class="cn(`relative`,)">
           <FormControl>
             <Input
               :disabled="isDisabled"
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"
@@ -84,6 +84,6 @@ function handleInput(event: Event) {
         </FormItem>
       </FormField>
     </DE.Field>
-    <p v-show="bottomLabel" class="text-gray-400">{{ bottomLabel }}</p>    
+    <p v-show="bottomLabel" class="text-gray-400 mt-1">{{ bottomLabel }}</p>    
   </DE.Cell>
 </template>
diff --git a/app/components/pub/my-ui/form/text-area-input.vue b/app/components/pub/my-ui/form/text-area-input.vue
new file mode 100644
index 00000000..c7b7c794
--- /dev/null
+++ b/app/components/pub/my-ui/form/text-area-input.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  placeholder: string
+  label: string
+  errors?: FormErrors
+  class?: string
+  colSpan?: number
+  numericOnly?: boolean
+  maxLength?: number
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  let value = target.value
+
+  // Filter numeric only jika diperlukan
+  if (props.numericOnly) {
+    value = value.replace(/\D/g, '')
+  }
+
+  // Batasi panjang maksimal jika diperlukan
+  if (props.maxLength && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength)
+  }
+
+  // Update value jika ada perubahan
+  if (target.value !== value) {
+    target.value = value
+    // Trigger input event untuk update form
+    target.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label
+      class="mb-1"
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Textarea
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :maxlength="maxLength"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              autocomplete="off"
+              aria-autocomplete="none"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+              @input="handleInput"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/form/text-captcha.vue b/app/components/pub/my-ui/form/text-captcha.vue
new file mode 100644
index 00000000..de9d7f4b
--- /dev/null
+++ b/app/components/pub/my-ui/form/text-captcha.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, computed, watch, defineEmits, defineProps, onMounted, nextTick, defineExpose } from 'vue'
+import Input from '~/components/pub/ui/input/Input.vue';
+import Button from '~/components/pub/ui/button/Button.vue';
+import waveyFingerprint from '~/assets/svg/wavey-fingerprint.svg'
+
+/**
+ * TextCaptcha props:
+ * - length: number of characters in the core captcha
+ * - caseSensitive: whether validation is case sensitive
+ * - useSpacing: show spaced-out characters (visual obfuscation only)
+ * - noiseChars: include random noise characters visually (not required to type)
+ */
+const props = defineProps({
+  length: { type: Number, default: 6 },
+  caseSensitive: { type: Boolean, default: false },
+  useSpacing: { type: Boolean, default: true },
+  noiseChars: { type: Boolean, default: false }, // adds random noise characters to display
+  refreshCooldownMs: { type: Number, default: 500 }, // guard repeated refresh
+})
+
+const emit = defineEmits<{
+  (e: 'update:valid', valid: boolean): void
+  (e: 'validated', valid: boolean): void
+  (e: 'change', value: string): void
+}>()
+
+// Internal state
+const raw = ref('')            // the canonical captcha value (what user must match, ignoring visual noise)
+const display = ref('')        // randomized visual representation (may include spacing/noise)
+const input = ref('')          // user typed value
+const lastRefresh = ref(0)
+const valid = inject('isCaptchaValid') as Ref<boolean>
+const errorMessage = ref('')
+
+/** Characters excluding ambiguous ones: 0/O, 1/l/I etc. */
+const CHARS = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz'
+
+function randomChar() {
+  return CHARS.charAt(Math.floor(Math.random() * CHARS.length))
+}
+
+/** Generate the canonical captcha string */
+function genRaw(len = props.length) {
+  let s = ''
+  for (let i = 0; i < len; i++) s += randomChar()
+  return s
+}
+
+/** Create a visually obfuscated display string (spacing, noise, random case) */
+function genDisplay(base: string) {
+  const arr: string[] = []
+  for (const ch of base) {
+    // toggle case randomly (only for letters)
+    const c = /[A-Za-z]/.test(ch) && Math.random() > 0.5 ? (Math.random() > 0.5 ? ch.toLowerCase() : ch.toUpperCase()) : ch
+    arr.push(c)
+    if (props.useSpacing && Math.random() > 0.3) arr.push(' ') // random space
+  }
+  return arr.join('')
+}
+
+/** Refresh captcha */
+function refresh() {
+  const now = Date.now()
+  if (now - lastRefresh.value < props.refreshCooldownMs) return
+  lastRefresh.value = now
+
+  raw.value = genRaw(props.length)
+  display.value = genDisplay(raw.value)
+  input.value = ''
+  valid.value = false
+  errorMessage.value = ''
+  // emit change so parent knows new value (but we don't send the raw canonical in production)
+  emit('change', display.value)
+}
+
+/** Normalize input and canonical for comparison */
+function normalizeForCompare(s: string) {
+  const normalized = s.replace(/\s+/g, '') // strip spaces
+  return props.caseSensitive ? normalized : normalized.toLowerCase()
+}
+
+/** Validate the current input */
+function validate() {
+  const left = normalizeForCompare(input.value)
+  const right = normalizeForCompare(raw.value)
+  if (!input.value) {
+    valid.value = false
+    errorMessage.value = 'Please enter the captcha text.'
+  } else if (left === right) {
+    valid.value = true
+    errorMessage.value = ''
+  } else {
+    valid.value = false
+    errorMessage.value = 'Captcha does not match.'
+  }
+  emit('update:valid', valid.value)
+  emit('validated', valid.value)
+  return valid.value
+}
+
+// expose a refresh method to parent via ref
+defineExpose({ refresh, validate, isValid: computed(() => valid.value) })
+
+// generate on mount
+onMounted(() => refresh())
+
+// // re-validate whenever input changes (lightweight)
+// watch(input, () => {
+//   // we don't auto-pass until the user explicitly validate (but we can optionally live-validate)
+//   // Here we perform live feedback but still emit validated only when called
+//   const left = normalizeForCompare(input.value)
+//   const right = normalizeForCompare(raw.value)
+//   valid.value = !!input.value && left === right
+//   // emit a live update so the parent can disable submit accordingly
+//   emit('update:valid', valid.value)
+// })
+</script>
+
+<template>
+  <div class="space-y-2 w-full max-w-sm">
+    <div class="flex items-center justify-between gap-3">
+      <!-- Captcha visual box -->
+      <div
+        role="img"
+        aria-label="Text captcha, type the characters shown"
+        tabindex="0"
+        class="select-none p-3 rounded-md border border-gray-200 text-white text-xl font-mono tracking-wider text-center w-full"
+      >
+        <span class="inline-block" v-html="display"></span>
+      </div>
+
+      <!-- Refresh -->
+      <div class="flex-shrink-0">
+        <Button variant="ghost" type="button" @click="refresh" title="Refresh captcha">
+          <Icon name="i-lucide-refresh-cw" />
+        </Button>
+      </div>
+    </div>
+
+    <!-- Input -->
+    <div class="flex gap-3 items-start">
+        <div class="flex-grow">
+            <Input
+                v-model="input"
+                :aria-invalid="valid ? 'false' : 'true'"
+                inputmode="text"
+                placeholder="Type the captcha text"
+                @keyup.enter="validate"
+            />
+            <p v-if="errorMessage" class="text-xs text-red-500 mt-1">{{ errorMessage }}</p>
+            <p v-else-if="valid" class="text-xs text-green-500 mt-1">Correct</p>
+            <p v-else class="text-xs text-gray-500 mt-1">Not case-sensitive</p>
+        </div>
+        <Button variant="outline" type="button" @click="validate" title="Validate"
+            class="border-orange-400">
+            <Icon name="i-lucide-check" class="text-orange-400" />
+        </Button>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+/* small nicety: make noise/spaced display look irregular */
+div[role="img"] {
+  background: url('~/assets/svg/wavey-fingerprint.svg') repeat center;
+}
+
+div[role="img"] span {
+  letter-spacing: 0.12em;
+  font-weight: 600;
+  user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/menus/submenu.vue b/app/components/pub/my-ui/menus/submenu.vue
new file mode 100644
index 00000000..ecfeb054
--- /dev/null
+++ b/app/components/pub/my-ui/menus/submenu.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { type EncounterItem } from "~/handlers/encounter-init.handler";
+
+const props = defineProps<{
+  initialActiveMenu: string
+  data: EncounterItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveMenu)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="flex">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-56 2xl:w-64 flex-shrink-0 rounded-md border bg-white dark:bg-slate-800 shadow-sm">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto px-2 py-3">
+        <button
+          v-for="menu in data"
+          :key="menu.id"
+          :data-active="activeMenu === menu.id"
+          class="w-full rounded-md px-4 py-3 text-left text-xs 2xl:text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.id)">
+          {{ menu.title }}
+        </button>
+      </div>
+    </div>
+    <!-- Active Menu Content -->
+    <div class="p-4 2xl:p-5 flex-grow">
+      <div v-if="data.find((m) => m.id === activeMenu)?.component"
+        class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+        <component
+          :is="data.find((m) => m.id === activeMenu)?.component"
+          v-bind="data.find((m) => m.id === activeMenu)?.props" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/modal/doc-preview-dialog.vue b/app/components/pub/my-ui/modal/doc-preview-dialog.vue
new file mode 100644
index 00000000..26534456
--- /dev/null
+++ b/app/components/pub/my-ui/modal/doc-preview-dialog.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  link: string
+}>()
+
+const emit = defineEmits<{
+  // submit: [values: InstallationFormData, resetForm: () => void]
+  // cancel: [resetForm: () => void]
+}>()
+
+// Form cancel handler
+// function onCancelForm({ resetForm }: { resetForm: () => void }) {
+//   emit('cancel', resetForm)
+// }
+function onExternalLink() {
+  navigateTo(props.link, {external: true,open: { target: "_blank" },});
+}
+</script>
+
+<template>
+  <Button variant="link" class="absolute top-4 right-16" @click="onExternalLink">
+    Open in Browser
+    <Icon name="i-lucide-external-link" class="h-4 w-4" />
+  </Button>
+  <div class="border border-gray-400 rounded-lg w-full h-[80vh] overflow-hidden">
+    <embed style="width: 100%; height: 100%" :src="props.link" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/nav-content/ba.vue b/app/components/pub/my-ui/nav-content/ba.vue
index c31fe72c..5ebb6386 100644
--- a/app/components/pub/my-ui/nav-content/ba.vue
+++ b/app/components/pub/my-ui/nav-content/ba.vue
@@ -20,7 +20,7 @@ function onClick(type: ClickType) {
     @click="onClick('draft')"
     class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <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>
     {{ props.label }}
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 8c292758..11d6e9e3 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
@@ -30,8 +30,8 @@ function onClick(type: ClickType) {
         Back
       </Button>
     </div>
-    <div>
-      <Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
+    <div v-show="props.enableDraft">
+      <Button variant="secondary" type="button" @click="onClick('draft')">
         <Icon name="i-lucide-file" />
         Draft
       </Button>
@@ -43,4 +43,4 @@ function onClick(type: ClickType) {
       </Button>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index 7aa5e4f2..18eb2624 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -37,6 +37,10 @@ function btnClick() {
         </div>
       </div>
       <div class="flex items-center">
+        <!-- For components as slots -->
+        <slot />
+
+        <!-- For components passed by props -->
         <div v-if="prep.components">
           <template v-for="cwp in prep.components">
             <component
diff --git a/app/components/pub/my-ui/nav-header/search.vue b/app/components/pub/my-ui/nav-header/search.vue
index 6e42c36f..db7f7e99 100644
--- a/app/components/pub/my-ui/nav-header/search.vue
+++ b/app/components/pub/my-ui/nav-header/search.vue
@@ -32,7 +32,7 @@ function btnClick() {
         />
       </div>
       <div v-if="prep.addNav" class="m-2 flex items-center">
-        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+        <Button size="default" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
           <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
           {{ prep.addNav.label }}
         </Button>
diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
index a48e9a2b..f81649bd 100644
--- a/app/composables/useQueryCRUD.ts
+++ b/app/composables/useQueryCRUD.ts
@@ -19,7 +19,17 @@ export function useQueryCRUDMode(key: string = 'mode') {
   })
 
   const goToEntry = () => (mode.value = 'entry')
-  const backToList = () =>(mode.value = 'list')
+  const backToList = () => {
+    router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        mode: 'list',
+        // HAPUS record-id
+        'record-id': undefined,
+      },
+    })
+  }
 
   return { mode, goToEntry, backToList }
 }
diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
index ced57e3e..60cfd9d1 100644
--- a/app/composables/useRBAC.ts
+++ b/app/composables/useRBAC.ts
@@ -1,4 +1,12 @@
-import type { Permission, RoleAccess } from '~/models/role'
+import type { Permission, RoleAccesses } from '~/models/role'
+import { systemCode } from '~/const/common/role'
+
+export interface PageOperationPermission {
+  canRead: boolean
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+}
 
 /**
  * Check if user has access to a page
@@ -7,19 +15,27 @@ export function useRBAC() {
   // NOTE: this roles was dummy for testing only, it should taken from the user store
   const authStore = useUserStore()
 
-  const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
-    const roles = authStore.userRole
-    return roles.some((role: string) => (role in roleAccess) || role === 'system') // system by-passes this check
+  const checkRole = (roleAccesses: RoleAccesses, _userRoles?: string[]): boolean => {
+    const activeRole = authStore.getActiveRole() || ''
+    if (activeRole === systemCode) {
+      return true
+    }
+    return (activeRole in roleAccesses);
   }
 
-  const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
-    const roles = authStore.userRole
-    return roles.some((role: string) => roleAccess[role]?.includes(permission) || role === 'system') // system by-passes this check
+  const checkPermission = (roleAccesses: RoleAccesses, permission: Permission, _userRoles?: string[]): boolean => {
+    const activeRole = authStore.getActiveRole() || ''
+    if (activeRole === systemCode) {
+      return true
+    }
+    if (activeRole in roleAccesses && roleAccesses[activeRole]) {
+      return roleAccesses[activeRole].includes(permission)
+    }
+    return false
   }
 
-  const getUserPermissions = (roleAccess: RoleAccess, _userRoles?: string[]): Permission[] => {
-    const roles = authStore.userRole
-    // const roles = ['admisi']
+  const getUserPermissions = (roleAccess: RoleAccesses, _userRoles?: string[]): Permission[] => {
+    const roles = authStore.userRoles
     const permissions = new Set<Permission>()
 
     roles.forEach((role: string) => {
@@ -31,10 +47,17 @@ export function useRBAC() {
     return Array.from(permissions)
   }
 
-  const hasCreateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'C')
-  const hasReadAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'R')
-  const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
-  const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
+  const hasCreateAccess = (roleAccess: RoleAccesses) => checkPermission(roleAccess, 'C')
+  const hasReadAccess = (roleAccess: RoleAccesses) => checkPermission(roleAccess, 'R')
+  const hasUpdateAccess = (roleAccess: RoleAccesses) => checkPermission(roleAccess, 'U')
+  const hasDeleteAccess = (roleAccess: RoleAccesses) => checkPermission(roleAccess, 'D')
+
+  const getPagePermissions = (roleAccess: RoleAccesses): PageOperationPermission => ({
+      canRead : hasReadAccess(roleAccess),
+      canCreate: hasCreateAccess(roleAccess),
+      canUpdate: hasUpdateAccess(roleAccess),
+      canDelete: hasDeleteAccess(roleAccess),
+  })
 
   return {
     checkRole,
@@ -44,5 +67,7 @@ export function useRBAC() {
     hasReadAccess,
     hasUpdateAccess,
     hasDeleteAccess,
+    getPagePermissions,
+
   }
 }
diff --git a/app/const/common/role.ts b/app/const/common/role.ts
new file mode 100644
index 00000000..a0d4565a
--- /dev/null
+++ b/app/const/common/role.ts
@@ -0,0 +1,36 @@
+export const systemCode = 'system'
+
+export const rehabInstCode = 'rehab'
+export const rehabUnitCode = 'rehab'
+
+export const headPosCode = 'head' // head position
+export const respPosCode = 'resp' // responsible position, verificator
+
+export type UnitLevel =
+  'inst' | // installation
+  'unit' | // unit / poly
+  'spec' | // specialist
+  'subspec' // subspecialist
+
+export const medicalRoles = [
+  'emp|doc', // doctor
+  'emp|nur', // nurse
+  'emp|miw', // midwife
+  'emp|thr', // therapist
+  'emp|nut', // nutritionist
+  'emp|pha', // pharmacy
+  'emp|lab'  // laborant
+]
+
+export const serviceRoles = [
+  'emp|reg',
+  ...medicalRoles,
+]
+
+export function genSpecHeadCode(unit_level: UnitLevel, unit_code: string): string {
+  return `${unit_level}|${unit_code}|${headPosCode}`
+}
+
+export function genUnitRespCode(unit_level: UnitLevel, unit_code: string): string {
+  return `${unit_level}|${unit_code}|${respPosCode}`
+}
diff --git a/app/const/key-val/clinical.ts b/app/const/key-val/clinical.ts
new file mode 100644
index 00000000..d6a37b43
--- /dev/null
+++ b/app/const/key-val/clinical.ts
@@ -0,0 +1,226 @@
+export type SubjectCode = 'detail' | 'pri-complain' | 'sec-complain' | 'cur-disea-hist' | 'pas-disea-hist' | 'fam-disea-hist' | 'alg-hist' | 'alg-react' | 'med-hist' | 'blood-type'
+export type ObjectCode = 'detail' | 'consc-level' | 'consc-level-det' | 'syst-bp' | 'diast-bp' | 'pulse' | 'resp-rate' | 'hear-rt' | 'neuro-cranialis' | 'sensoris' | 'reflect-fisio' | 'reflect-pato' | 'autonom-neuron' | 'neck-rom' | 'body-rom' | 'aga-rom' | 'agb-rom' | 'neck-mmt' | 'body-mmt' | 'aga-mmt' | 'agb-mmt' | 'localis' | 'medical-trouble' | 'rehab-medic-trouble' | 'temp' | 'spo2' | 'weight' | 'height' | 'head-to-toe'
+export type AssessmentCode = 'detail' | 'early-med-diag' | 'late-med-diag' | 'sec-med-diag' | 'early-func-diag' | 'late-func-diag' | 'sec-func-diag' | 'patient-dev'
+export type PlanCode = 'detail' | 'plan'
+export type InstructionCode = 'detail' | 'medical-act' | 'supporting-exam' | 'therapy' | 'medication' | 'material' | 'rehab-program' | 'physic-modal' | 'exercise' | 'ortes-protesa' | 'education' | 'other'
+export type HeadToToeCode = 'head' | 'eye' | 'ear' | 'nose' | 'mouth-throat' | 'head-others' | 'thorax' | 'heart' | 'lung' | 'abdomen' | 'liver' | 'back' | 'ekstremitas' | 'gender' | 'rectum' | 'neuron' | 'body-others'
+export type McuUrgencyLevelCode = 'cito' | 'cito-igd' | 'ponek' | 'blood-gas' | 'priority-form' | 'routine'
+export type McuScopeCode = 'cp-lab' | 'mic-lab' | 'ap-lab' | 'rad'
+export type SoapiTypeCode = 'early-medic' | 'early-rehab' | 'function' | 'progress' | 'dev-record' | 'kfr-adm' | 'kfr-series'
+export type MedicalActionTypeCode = 'chemo' | 'hemo' | 'thalasemia' | 'echocardio' | 'spirometry'
+export type VehicleTypeCode = 'ambulance' | 'transport' | 'hearse'
+export type GeneralEduCode = 'right-obg' | 'general-consent' | 'service' | 'alt-care-src' | 'home-plan' | 'home-care' | 'orientation' | 'fall-risk-prevention' | 'alt-care' | 'act-delay' | 'others'
+export type SpecialEduCode = 'disease-diag-dev' | 'safe-med-usage' | 'side-effect' | 'diet' | 'pain-mgmt' | 'medical-eq-usage' | 'rehab-technique' | 'prevention-act'
+export type EduAssessmentCode = 'learn-ability' | 'learn-will' | 'obstacle' | 'learn-method' | 'lang' | 'lang-obstacle' | 'belief'
+export type AbilityCode = 'able' | 'not-able'
+export type WillCode = 'ready' | 'interested' | 'not-interested'
+export type MedObstacleCode = 'hearing' | 'sight' | 'physical' | 'emotional' | 'cognitif'
+export type LearnMethodCode = 'demo' | 'discuss-leaflet'
+export type LangClassCode = 'ind' | 'region' | 'foreign'
+export type TranslatorSrcCode = 'team' | 'family'
+
+export const subjectCodes: Record<SubjectCode, string> = {
+  detail: 'Detail',
+  'pri-complain': 'Keluhan Utama',
+  'sec-complain': 'Secondary Complaint',
+  'cur-disea-hist': 'Current Disease History',
+  'pas-disea-hist': 'Past Disease History',
+  'fam-disea-hist': 'Family Disease History',
+  'alg-hist': 'Allergic Hist',
+  'alg-react': 'Allergic Reaction',
+  'med-hist': 'Medication Hist',
+  'blood-type': 'Golongan Darah',
+}
+
+export const objectCodes: Record<ObjectCode, string> = {
+  detail: 'Detail',
+  'consc-level': 'Tingkat Kesadaran',
+  'consc-level-det': 'Detail Tingkat Kesadaran',
+  'syst-bp': 'Tekanan Darah Systolic',
+  'diast-bp': 'Tekanan Darah Diastolic',
+  'pulse': 'Nadi',
+  'resp-rate': 'Pernafasan',
+  'hear-rt': 'Detak Jantung',
+  'neuro-cranialis': 'Neurologist Cranialist',
+  'sensoris': 'Sensoris',
+  'reflect-fisio': 'Refleks Fisiologi',
+  'reflect-pato': 'Refleks Patologi',
+  'autonom-neuron': 'Saraf Otonom',
+  'neck-rom': 'ROM - Leher',
+  'body-rom': 'ROM - Batang Tubuh',
+  'aga-rom': 'ROM - AGA',
+  'agb-rom': 'ROM - AGB',
+  'neck-mmt': 'MMT - Leher',
+  'body-mmt': 'MMT - Batang Tubuh',
+  'aga-mmt': 'MMT - AGA',
+  'agb-mmt': 'MMT - AGB',
+  'localis': 'Status Lokalis',
+  'medical-trouble': 'Masalah Medis',
+  'rehab-medic-trouble': 'Masalah Rehab Medik',
+  'temp': 'Suhu',
+  'spo2': 'SpO2',
+  'weight': 'Berat Badan',
+  'height': 'Tinggi Badan',
+  'head-to-toe': 'Kepala Sampai Kaki',
+}
+
+export const assessmentCodes: Record<AssessmentCode, string> = {
+  detail: 'Detail',
+  'early-med-diag': 'Diagnosis Medis Awal',
+  'late-med-diag': 'Diagnosis Medis Akhir',
+  'sec-med-diag': 'Diagnosis Medis Sekunder',
+  'early-func-diag': 'Diagnosis Fungsi Awal',
+  'late-func-diag': 'Diagnosis Fungsi Akhir',
+  'sec-func-diag': 'Diagnosis Fungsi Sekunder',
+  'patient-dev': 'Catatan Perkembangan Patient',
+}
+
+export const planCodes: Record<PlanCode, string> = {
+  detail: 'Detail',
+  'plan': 'Rencana',
+}
+
+export const instructionCodes: Record<InstructionCode, string> = {
+  detail: 'Detail Instruksi',
+  'medical-act': 'Tindakan medis',
+  'supporting-exam': 'Pemeriksaan Penunjang',
+  'therapy': 'Terapi',
+  'medication': 'Obat',
+  'material': 'BMHP',
+  'rehab-program': 'Program Rehab',
+  'physic-modal': 'Modalitas Fisik',
+  'exercise': 'Latihan',
+  'ortes-protesa': 'Ortesa Protesa',
+  'education': 'Edukasi',
+  'other': 'Lain-lain',
+}
+
+export const headToToeCodes: Record<HeadToToeCode, string> = {
+  head: 'Kepala',
+  eye: 'Mata',
+  ear: 'Telinga',
+  nose: 'Hidung',
+  'mouth-throat': 'Mulut - Tenggorokan',
+  'head-others': 'Kepala - Lainnya',
+  thorax: 'Toraks',
+  heart: 'Jantung',
+  lung: 'Paru',
+  abdomen: 'Perut',
+  liver: 'Hati',
+  back: 'Punggung',
+  ekstremitas: 'Ekstermitas',
+  gender: 'Kelamin',
+  rectum: 'Dubur',
+  neuron: 'Syaraf',
+  'body-others': 'Badan - Lainnya',
+}
+
+export const mcuUrgencyLevelCodes: Record<McuUrgencyLevelCode, string> = {
+  cito: 'CITO',
+  'cito-igd': 'CITO IGD',
+  ponek: 'PONEK',
+  'blood-gas': 'Analisa Gas Darah',
+  'priority-form': 'Form Prioritas',
+  routine: 'Pemeriksaan Rutin',
+}
+
+export const mcuScopeCodes: Record<McuScopeCode, string> = {
+  'cp-lab': 'Laboratorium',
+  'mic-lab': 'Microbacterial Laboratorium',
+  'ap-lab': 'Patology Anatomy Laboratorium',
+  rad: 'Radiology',
+}
+
+export const soapiTypeCodes: Record<SoapiTypeCode, string> = {
+  'early-medic': 'Kajian Awal Medis',
+  'early-rehab': 'Kajian Awal Rehab Medik',
+  'function': 'Assessmen Fungsi',
+  'progress': 'CPPT',
+  'dev-record': 'Catatan Perkembangan',
+  'kfr-adm': 'Soapi Untuk KFR',
+  'kfr-series': 'Soapi Untuk KFR',
+}
+
+export const medicalActionTypeCodes: Record<MedicalActionTypeCode, string> = {
+  chemo: 'Kemoterapi',
+  hemo: 'Hemofilia',
+  thalasemia: 'Talasemi',
+  echocardio: 'Echokardio',
+  spirometry: 'Spirometri',
+}
+
+export const vehicleTypeCodes: Record<VehicleTypeCode, string> = {
+  ambulance: 'Ambulans',
+  transport: 'Transport',
+  hearse: 'Jenazah',
+}
+
+export const generalEduCodes: Record<GeneralEduCode, string> = {
+  'right-obg': 'Hak dan kewajiban pasien dan keluarga',
+  'general-consent': 'General Consent',
+  'service': 'Pelayanan yang disediakan (jam pelayanan, akses pelayanan dan proses pelayanan)',
+  'alt-care-src': 'Sumber alternatif asuhan di tempat lain/faskes lain',
+  'home-plan': 'Rencana tindakan di rumah',
+  'home-care': 'Kebutuhan perawatan di rumah',
+	'orientation': 'Orientasi ruangan',
+  'fall-risk-prevention': 'Pencegahan risiko jatuh',
+  'alt-care': 'Alternatif pelayanan',
+  'act-delay': 'Penundaan Tindakan',
+  'others': 'Lain - lain',
+}
+
+export const specialEduCodes: Record<SpecialEduCode, string> = {
+  'disease-diag-dev': 'Diagnosa penyakit dan perkembangannya',
+  'safe-med-usage': 'Penggunaan obat yang aman,',
+  'side-effect': 'efek samping dan reaksi obat',
+  'diet': 'Diet/Nutrisi',
+  'pain-mgmt': 'Managemen nyeri',
+  'medical-eq-usage': 'Penggunaan Peralatan Medis',
+  'rehab-technique': 'Tehnik Rehabilitasi',
+  'prevention-act': 'Tindakan pencegahan (cuci tangan, pemasangan gelang)',
+}
+
+export const eduAssessmentCodes: Record<EduAssessmentCode, string> = {
+  'learn-ability': 'Kemampuan Belajar',
+  'learn-will': 'Kemauan Belajar',
+  'obstacle': 'Hambatan',
+  'learn-method': 'Metode Pembelajaran',
+  'lang': 'Bahasa',
+  'lang-obstacle': 'Hambatan Bahasa',
+  'belief': 'Keyakinan',
+}
+
+export const abilityCodes: Record<AbilityCode, string> = {
+  able: 'Mampu',
+  'not-able': 'Tidak Mampu',
+}
+
+export const willCodes: Record<WillCode, string> = {
+  ready: 'Siap',
+  interested: 'Tertarik',
+  'not-interested': 'Tidak Tertarik',
+}
+
+export const medObstacleCodes: Record<MedObstacleCode, string> = {
+  hearing: 'Pendengaran',
+  sight: 'Penglihatan',
+  physical: 'Fisik',
+  emotional: 'Emosional',
+  cognitif: 'Kognitif',
+}
+
+export const learnMethodCodes: Record<LearnMethodCode, string> = {
+  demo: 'Demonstrasi',
+  'discuss-leaflet': 'Diskusi Leaflet',
+}
+
+export const langClassCodes: Record<LangClassCode, string> = {
+  ind: 'Indonesia',
+  region: 'Daerah',
+  foreign: 'Asing',
+}
+
+export const translatorSrcCodes: Record<TranslatorSrcCode, string> = {
+  team: 'Tim Penerjemah',
+  family: 'Keluarga',
+}
diff --git a/app/const/key-val/common.ts b/app/const/key-val/common.ts
new file mode 100644
index 00000000..81e0f1ae
--- /dev/null
+++ b/app/const/key-val/common.ts
@@ -0,0 +1,84 @@
+export type ActiveStatusCode = 'active' | 'inactive'
+export type DataStatusCode = 'new' | 'review' | 'process' | 'done' | 'canceled' | 'rejected' | 'skipped'
+export type DataApprovalCode = 'new' | 'approved' | 'rejected'
+export type DataAvailabilityCode = 'review' | 'available' | 'unavailble'
+export type DataVerifiedCode = 'new' | 'verified' | 'rejected'
+export type UserStatusCode = 'new' | 'active' | 'inactive' | 'blocked' | 'suspended'
+export type ProcessStatusCode = 'success' | 'failed'
+export type TimeUnitCode = 'sec' | 'min' | 'hour' | 'day' | 'week' | 'month' | 'year'
+export type DayCode = '0' | '1' | '2' | '3' | '4' | '5' | '6'
+export type PaymentMethodCode = 'cash' | 'debit' | 'credit' | 'insurance' | 'membership'
+
+export const activeStatusCodes: Record<ActiveStatusCode, string> = {
+  active: 'Aktif',
+  inactive: 'Tidak Aktif',
+}
+
+export const dataStatusCodes: Record<DataStatusCode, string> = {
+  new: 'Baru',
+  review: 'Review',
+  process: 'Proses',
+  done: 'Selesai',
+  canceled: 'Dibatalkan',
+  rejected: 'Ditolak',
+  skipped: 'Dilewati',
+}
+
+export const dataApprovalCodes: Record<DataApprovalCode, string> = {
+  new: 'Baru',
+  approved: 'Diterima',
+  rejected: 'Ditolak',
+}
+
+export const dataAvailabilityCodes: Record<DataAvailabilityCode, string> = {
+  review: 'Konfirmasi',
+  available: 'Tersedia',
+  unavailble: 'Tidak Tersedia',
+}
+
+export const dataVerifiedCodes: Record<DataVerifiedCode, string> = {
+  new: 'Baru',
+  verified: 'Terverifikasi',
+  rejected: 'Ditolak',
+}
+
+export const userStatusCodes: Record<UserStatusCode, string> = {
+  new: 'Baru',
+  active: 'Aktif',
+  inactive: 'Tidak Aktif',
+  blocked: 'Diblokir',
+  suspended: 'Dibekukan',
+}
+
+export const processStatusCodes: Record<ProcessStatusCode, string> = {
+  success: 'Sukses',
+  failed: 'Gagal',
+}
+
+export const timeUnitCodes: Record<TimeUnitCode, string> = {
+  sec: 'Detik',
+  min: 'Menit',
+  hour: 'Jam',
+  day: 'Hari',
+  week: 'Minggu',
+  month: 'Bulan',
+  year: 'Tahun',
+}
+
+export const dayCodes: Record<DayCode, string> = {
+  '0': 'Minggu',
+  '1': '',
+  '2': '',
+  '3': '',
+  '4': '',
+  '5': '',
+  '6': 'Sabtu',
+}
+
+export const paymentMethodCodes: Record<PaymentMethodCode, string> = {
+  cash: 'Cash',
+  debit: 'Debit',
+  credit: 'Kredit',
+  insurance: 'Asuransi',
+  membership: 'Membership',
+}
diff --git a/app/const/key-val/encounter.ts b/app/const/key-val/encounter.ts
new file mode 100644
index 00000000..edd8ea29
--- /dev/null
+++ b/app/const/key-val/encounter.ts
@@ -0,0 +1,141 @@
+export type QueueStatusCode = 'wait' | 'proc' | 'done' | 'cancel' | 'skip'
+export type EncounterClassCode = 'ambulatory' | 'emergency' | 'inpatient'
+export type DischargeMethodCode = 'home' | 'home-request' | 'consul-back' | 'consul-poly' | 'consul-executive' | 'consul-ch-day' | 'emergency' | 'emergency-covid' | 'inpatient' | 'external' | 'death' | 'death-on-arrival' | 'run-away'
+export type PolySwitchCode = 'consul-poly' | 'consul-executive'
+export type RefTypeCode = 'none' | 'gov' | 'private' | 'bpjs'
+export type TransportationCode = 'ambulance' | 'car' | 'motor-cycle' | 'other'
+export type PersonConditionCode = 'res' | 'emg' | 'urg' | 'lurg' | 'nurg' | 'doa'
+export type AmbulatoryClassCode = 'reg' | 'rehab' | 'chemo'
+export type EmergencyClassCode = 'emg' | 'eon'
+export type InpatientClassCode = 'op' | 'icu' | 'hcu' | 'vk'
+export type ChemoClassCode = 'adm' | 'act'
+export type AmbulanceFacilityCode = 'std' | 'icu'
+export type AmbulanceNeedsCode = 'assist' | 'non-assist'
+export type DocTypeCode = 'person-resident-number' | 'person-driving-license' | 'person-passport' | 'person-family-card' | 'encounter-patient' | 'encounter-suport' | 'encounter-other' | 'mcu-item-result' | 'vclaim-sep' | 'vclaim-sipp' | 'general-consent'
+export type AltPaymentMethodCode = 'jkn' | 'jkmm' | 'spm' | 'pks' | 'umum'
+export type SEPRefTypCode = 'internal' | 'external'
+export type VisitModeCode = 'adm' | 'readm' | 'series'
+
+export const queueStatusCodes: Record<QueueStatusCode, string> = {
+  wait: 'Tunggu',
+  proc: 'Proses',
+  done: 'Selesai',
+  cancel: 'Batal',
+  skip: 'Dilewati',
+}
+
+export const encounterClassCodes: Record<EncounterClassCode, string> = {
+  ambulatory: 'Rawat Jalan',
+  emergency: 'Gawat Darurat',
+  inpatient: 'Rawat Inap',
+}
+
+export const dischageMethodCodes: Record<DischargeMethodCode, string> = {
+  home: 'Pulang',
+  'home-request': 'Pulang Atas Permintaan Sendiri',
+  'consul-back': 'Konsultasi Balik / Lanjutan',
+  'consul-poly': 'Konsultasi Poliklinik Lain',
+  'consul-executive': 'Konsultasi Antar Dokter Eksekutif',
+  'consul-ch-day': 'Konsultasi Hari Lain',
+  emergency: 'Rujuk IGD',
+  'emergency-covid': 'Rujuk IGD Covid',
+  inpatient: 'Rujuk Rawat Inap',
+  external: 'Rujuk Faskes Lain',
+  death: 'Meninggal',
+  'death-on-arrival': 'Meninggal Saat Tiba',
+  'run-away': 'Kabur / Lari',
+}
+
+export const polySwitchCode: Record<PolySwitchCode, string> = {
+  'consul-poly': 'Konsultasi Poliklinik Lain',
+  'consul-executive': 'Konsultasi Antar Dokter Eksekutif',
+}
+
+export const refTypeCode: Record<RefTypeCode, string> = {
+  none: 'Tidak Ada',
+  gov: 'Pemerintah',
+  private: 'Swasta',
+  bpjs: 'BPJS',
+}
+
+export const transportationCode: Record<TransportationCode, string> = {
+  ambulance: 'Ambulans',
+  car: 'Mobil',
+  'motor-cycle': 'Motor',
+  other: 'Lainnya',
+}
+
+export const personConditionCode: Record<PersonConditionCode, string> = {
+  res: 'Resutiasi',
+  emg: 'Darurat',
+  urg: 'Mendesak',
+  lurg: 'Kurang Mendesak',
+  nurg: 'Mendesak',
+  doa: 'Meninggal Saat Tiba',
+}
+
+export const ambulatoryClassCode: Record<AmbulatoryClassCode, string> = {
+  reg: 'Reguler',
+  rehab: 'Rehab Medik',
+  chemo: 'Kemoterapi',
+}
+
+export const emergencyClassCode: Record<EmergencyClassCode, string> = {
+  emg: 'Darurat',
+  eon: 'Ponek',
+}
+
+export const inpatientClassCode: Record<InpatientClassCode, string> = {
+  op: 'Rawat Inap',
+  icu: 'ICU',
+  hcu: 'HCU',
+  vk: 'Kamar Bersalin',
+}
+
+export const chemoClassCode: Record<ChemoClassCode, string> = {
+  adm: 'Administrasi',
+  act: 'Tindakan',
+}
+
+export const ambulanceFacilityCode: Record<AmbulanceFacilityCode, string> = {
+  std: 'Standar',
+  icu: 'ICU',
+}
+
+export const ambulanceNeedsCode: Record<AmbulanceNeedsCode, string> = {
+  assist: 'Dengan Pendampingan',
+  'non-assist': 'Tanpa Pendampingan',
+}
+
+export const docTypeCode: Record<DocTypeCode, string> = {
+  'person-resident-number': '',
+  'person-driving-license': '',
+  'person-passport': '',
+  'person-family-card': '',
+  'encounter-patient': '',
+  'encounter-suport': '',
+  'encounter-other': '',
+  'mcu-item-result': '',
+  'vclaim-sep': '',
+  'vclaim-sipp': '',
+  'general-consent': '',
+}
+
+export const altPaymentMethodCode: Record<AltPaymentMethodCode, string> = {
+  jkn: 'JKN',
+  jkmm: 'JKMM',
+  spm: 'SPM',
+  pks: 'PKS',
+  umum: 'Umum',
+}
+
+export const sepRefTypCode: Record<SEPRefTypCode, string> = {
+  internal: 'Rujukan Internal',
+  external: 'Faskes Lain',
+}
+
+export const visitModeCode: Record<VisitModeCode, string> = {
+  adm: 'Administrasi',
+  readm: 'Administrasi',
+  series: 'Tindakan',
+}
diff --git a/app/const/key-val/org.ts b/app/const/key-val/org.ts
new file mode 100644
index 00000000..49f16e68
--- /dev/null
+++ b/app/const/key-val/org.ts
@@ -0,0 +1,69 @@
+export type InfragroupCode = 'building' | 'floor' | 'warehouse' | 'room' | 'chamber' | 'bed' | 'counter' | 'public-screen'
+export type ItemGroupCode = 'infra' | 'medicine' | 'device' | 'material' | 'employee-fee' | 'doctor-fee'
+export type UnitTypeCode = 'reg' | 'exa' | 'pay' | 'pha' | 'lab' | 'rad'
+export type ContractStatusCode = 'system' | 'employee' | 'intern' | 'other'
+export type EmployeePositionCode = 'reg' | 'nur' | 'doc' | 'miw' | 'thr' | 'nut' | 'lab' | 'pha' | 'nom'
+export type InternPositionCode = 'specialist' | 'nurse' | 'non-medic'
+export type DoctorFeeTypeCodes = 'outpatient' | 'emergency' | 'inpatient' | 'medic-rehab'
+
+export const infragroupCodes: Record<InfragroupCode, string> = {
+  building: 'Bangunan',
+  floor: 'Lantai',
+  warehouse: 'Gudang / Depo',
+  room: 'Ruang',
+  chamber: 'Kamar',
+  bed: 'Ranjang',
+  counter: 'Counter',
+  'public-screen': 'Public Screen',
+}
+
+export const itemGroupCodes: Record<ItemGroupCode, string> = {
+  infra: 'Infrastruktur',
+  medicine: 'Obat',
+  device: 'Peralatan',
+  material: 'Perlengkapan',
+  'employee-fee': 'Gaji Karyawan',
+  'doctor-fee': 'Gaji Dokter',
+}
+
+export const unitTypeCodes: Record<UnitTypeCode, string> = {
+  reg: 'Registrasi',
+  exa: 'Pemeriksaan',
+  pay: 'Pembayaran',
+  pha: 'Farmasai',
+  lab: 'Laboratorium',
+  rad: 'Radiologi',
+}
+
+export const contractStatusCodes: Record<ContractStatusCode, string> = {
+  system: 'Sistem',
+  employee: 'Pegawai',
+  intern: 'Magang',
+  other: 'Lainnya',
+}
+
+export const employeePositionCodes: Record<EmployeePositionCode, string> = {
+  reg: 'Admisi / Pendaftaran',
+  nur: 'Perawat',
+  doc: 'Dokter',
+  miw: 'Bidan',
+  thr: 'Terapis',
+  nut: 'Ahli Gisi',
+  lab: 'Laboran',
+  pha: 'Farmasi',
+  nom: 'Non Medis',
+}
+
+export const internPositionCodes: Record<InternPositionCode, string> = {
+  specialist: 'PPDS',
+  nurse: 'Perawat',
+  'non-medic': 'Non Medis',
+}
+
+export const doctorFeeTypeCodes: Record<DoctorFeeTypeCodes, string> = {
+  outpatient: 'Rawat Jalan',
+  emergency: 'Darurat',
+  inpatient: 'Rawat Inap',
+  'medic-rehab': 'Rehab Medik',
+}
+
diff --git a/app/const/key-val/person.ts b/app/const/key-val/person.ts
new file mode 100644
index 00000000..f4f18fdb
--- /dev/null
+++ b/app/const/key-val/person.ts
@@ -0,0 +1,80 @@
+export type GenderCode = 'male' | 'female' | 'not-stated' | 'unknown'
+export type ReligionCode = 'islam' | 'protestan' | 'katolik' | 'hindu' | 'buda' | 'konghucu'
+export type EducationCode = 'TS' | 'TK' | 'SD' | 'SMP' | 'SMA' | 'D1' | 'D2' | 'D3' | 'S1' | 'S2' | 'S3'
+export type OccupationCode = 'tidak-bekerja' | 'pns' | 'polisi' | 'tni' | 'guru' | 'wiraswasta' | 'kary-swasta' | 'lainnya'
+export type AddressLocationTypeCode = 'identity' | 'domicile'
+export type PersonContactType = 'phone' | 'm-phone' | 'email' | 'fax'
+export type RelationshipCode = 'mother' | 'father' | 'uncle' | 'aunt' | 'sibling' | 'gd-mother' | 'gd-father' | 'child' | 'nephew' | 'gd-child' | 'friend' | 'spouse' | 'self' | 'other'
+export type MaritalStatus_Code = 'S' | 'M' | 'D' | 'W'
+
+export const genderCodes: Record<GenderCode, string> = {
+  male: 'Laki',
+  female: 'Perempuan',
+  'not-stated': 'Tidak Disebutkan',
+  unknown: 'Tidak Diketahui',
+}
+
+export const religionCodes: Record<ReligionCode, string> = {
+  islam: 'Islam',
+  protestan: 'Protestan',
+  katolik: 'Katolik',
+  hindu: 'Hindu',
+  buda: 'Buda',
+  konghucu: 'Konghucu',
+}
+
+export const educationCodes: Record<EducationCode, string> = {
+  TS: 'TS',
+  TK: 'TK',
+  SD: 'SD',
+  SMP: 'SMP',
+  SMA: 'SMA',
+  D1: 'D1',
+  D2: 'D2',
+  D3: 'D3',
+  S1: 'S1',
+  S2: 'S2',
+  S3: 'S3',
+}
+
+export const occupationCodes: Record<OccupationCode, string> = {
+  'tidak-bekerja': 'Tidak Bekerja',
+  pns: 'Pegawai Negeri Sipil',
+  polisi: 'Polisi',
+  tni: 'TNI',
+  guru: 'Guru',
+  wiraswasta: 'Wiraswasta',
+  'kary-swasta': 'Karyawan Swasta',
+  lainnya: 'Lainnya',
+}
+
+export const personContactTypes: Record<PersonContactType, string> = {
+  phone: 'Telepon',
+  'm-phone': 'HP / Ponsel',
+  email: 'Email',
+  fax: 'Fax',
+}
+
+export const relationshipCodes: Record<RelationshipCode, string> = {
+  mother: 'Ibu',
+  father: 'Ayah',
+  uncle: 'Paman',
+  aunt: 'Bibi',
+  sibling: 'Saudara',
+  'gd-mother': 'Nenek',
+  'gd-father': 'Kakek',
+  child: 'Anak',
+  nephew: 'Keponakan',
+  'gd-child': 'Cucu',
+  friend: 'Teman',
+  spouse: 'Pasangan (Suami / Istri)',
+  self: 'Diri sendiri',
+  other: 'Lainnya',
+}
+
+export const maritalStatusCodes: Record<MaritalStatus_Code, string> = {
+  S: 'Single (Belum Kawin)',
+  M: 'Married (Kawin)',
+  D: 'Divorced (Cerai Hidup)',
+  W: 'Widowed (Cerai Mati)',
+}
diff --git a/app/const/page-permission/ambulatory.ts b/app/const/page-permission/ambulatory.ts
new file mode 100644
index 00000000..453f59c3
--- /dev/null
+++ b/app/const/page-permission/ambulatory.ts
@@ -0,0 +1,57 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/ambulatory/registration-queue': {
+    'emp|reg': ['R', 'U', 'D'],
+  },
+  '/ambulatory/encounter-queue': {
+    'emp|nur': ['R', 'U', 'D'],
+  },
+  '/ambulatory/encounter': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|thr': ['R'],
+    'emp|miw': ['R'],
+    'emp|nut': ['R'],
+    'emp|pha': ['R'],
+    'emp|lab': ['R'],
+    'emp|rad': ['R'],
+  },
+  '/ambulatory/encounter/add': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/ambulatory/encounter/[id]': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|thr': ['R'],
+    'emp|miw': ['R'],
+    'emp|nut': ['R'],
+    'emp|pha': ['R'],
+    'emp|lab': ['R'],
+    'emp|rad': ['R'],
+  },
+  '/ambulatory/encounter/[id]/edit': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/ambulatory/encounter/[id]/process': {
+    'emp|doc': ['R', 'U'],
+    'emp|nur': ['R', 'U'],
+    'emp|thr': ['R', 'U'],
+    'emp|miw': ['R', 'U'],
+    'emp|nut': ['R', 'U'],
+    'emp|pha': ['R', 'U'],
+    'emp|lab': ['R', 'U'],
+    'emp|rad': ['R', 'U'],
+  },
+  '/ambulatory/consulation': {
+    'emp|doc': ['R'],
+  },
+  '/ambulatory/consulation/[id]/process': {
+    'emp|doc': ['R', 'U'],
+  },
+}
diff --git a/app/const/page-permission/chemo.ts b/app/const/page-permission/chemo.ts
new file mode 100644
index 00000000..8796999e
--- /dev/null
+++ b/app/const/page-permission/chemo.ts
@@ -0,0 +1,32 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/chemo/verification': {
+    'emp|reg': ['R'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+  },
+  '/chemo/verification/[id]': {
+    'emp|reg': ['R'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+  },
+  '/chemo/verification/[id]/process': {
+    'emp|doc': ['R', 'U'],
+    'emp|nur': ['R', 'U'],
+  },
+  '/chemo/action': {
+    'emp|reg': ['R', 'U', 'D'],
+  },
+  '/chemo/action/[id]': {
+    'emp|reg': ['R', 'U', 'D'],
+  },
+  '/chemo/action/[id]/process': {
+    'emp|doc': ['R', 'U'],
+    'emp|nur': ['R', 'U'],
+    'emp|thr': ['R', 'U'],
+  },
+}
diff --git a/app/const/page-permission/chemoteraphy.ts b/app/const/page-permission/chemoteraphy.ts
new file mode 100644
index 00000000..6a1af6d5
--- /dev/null
+++ b/app/const/page-permission/chemoteraphy.ts
@@ -0,0 +1,16 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/chemotherapy/adm': {
+    'emp|reg': ['R'],
+    'emp|nur': ['R', 'U', 'D'],
+  },
+  '/outpatient/series': {
+    'emp|nur': ['R', 'U', 'D'],
+    'emp|doc': ['R', 'U', 'D'],
+    'emp|thr': ['R', 'U', 'D'],
+  },
+}
diff --git a/app/const/page-permission/emergency.ts b/app/const/page-permission/emergency.ts
new file mode 100644
index 00000000..cfbab478
--- /dev/null
+++ b/app/const/page-permission/emergency.ts
@@ -0,0 +1,67 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/emergency/triage': {
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+  },
+  '/emergency/triage/add': {
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+  },
+  '/emergency/triage/[id]': {
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+  },
+  '/emergency/triage/[id]/edit': {
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+  },
+  '/emergency/encounter': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|thr': ['R'],
+    'emp|miw': ['R'],
+    'emp|nut': ['R'],
+    'emp|pha': ['R'],
+    'emp|lab': ['R'],
+    'emp|rad': ['R'],
+  },
+  '/emergency/encounter/add': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/emergency/encounter/[id]': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|thr': ['R'],
+    'emp|miw': ['R'],
+    'emp|nut': ['R'],
+    'emp|pha': ['R'],
+    'emp|lab': ['R'],
+    'emp|rad': ['R'],
+  },
+  '/emergency/encounter/[id]/edit': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/emergency/encounter/[id]/process': {
+    'emp|doc': ['R', 'U'],
+    'emp|nur': ['R', 'U'],
+    'emp|thr': ['R', 'U'],
+    'emp|miw': ['R', 'U'],
+    'emp|nut': ['R', 'U'],
+    'emp|pha': ['R', 'U'],
+    'emp|lab': ['R', 'U'],
+    'emp|rad': ['R', 'U'],
+  },
+  '/emergency/consulation': {
+    'emp|doc': ['R'],
+  },
+  '/emergency/consulation/[id]/process': {
+    'emp|doc': ['R', 'U'],
+  },
+}
diff --git a/app/const/page-permission/human-src.ts b/app/const/page-permission/human-src.ts
new file mode 100644
index 00000000..1698f3e5
--- /dev/null
+++ b/app/const/page-permission/human-src.ts
@@ -0,0 +1,25 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/human-src/employee': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
+  },
+  '/human-src/employee/add': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
+  },
+  '/human-src/employee/[id]/edit': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
+  },
+  '/human-src/intern': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
+  },
+  '/human-src/intern/add': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
+  },
+  '/human-src/intern/[id]/edit': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
+  },
+}
diff --git a/app/const/page-permission/inpatient.ts b/app/const/page-permission/inpatient.ts
new file mode 100644
index 00000000..b116c5fa
--- /dev/null
+++ b/app/const/page-permission/inpatient.ts
@@ -0,0 +1,57 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/inpatient/request': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/inpatient/request/[id]/detail': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/inpatient/encounter': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|thr': ['R'],
+    'emp|miw': ['R'],
+    'emp|nut': ['R'],
+    'emp|pha': ['R'],
+    'emp|lab': ['R'],
+    'emp|rad': ['R'],
+  },
+  '/inpatient/encounter/add': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/inpatient/encounter/[id]': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|thr': ['R'],
+    'emp|miw': ['R'],
+    'emp|nut': ['R'],
+    'emp|pha': ['R'],
+    'emp|lab': ['R'],
+    'emp|rad': ['R'],
+  },
+  '/inpatient/encounter/[id]/edit': {
+    'emp|reg': ['C', 'R', 'U', 'D'],
+  },
+  '/inpatient/encounter/[id]/process': {
+    'emp|doc': ['R', 'U'],
+    'emp|nur': ['R', 'U'],
+    'emp|thr': ['R', 'U'],
+    'emp|miw': ['R', 'U'],
+    'emp|nut': ['R', 'U'],
+    'emp|pha': ['R', 'U'],
+    'emp|lab': ['R', 'U'],
+    'emp|rad': ['R', 'U'],
+  },
+  '/inpatient/consulation': {
+    'emp|doc': ['R'],
+  },
+  '/inpatient/consulation/[id]/process': {
+    'emp|doc': ['R', 'U'],
+  },
+}
diff --git a/app/const/page-permission/mcu-src.ts b/app/const/page-permission/mcu-src.ts
new file mode 100644
index 00000000..85ad5f71
--- /dev/null
+++ b/app/const/page-permission/mcu-src.ts
@@ -0,0 +1,19 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/muc-src/checkup': {
+    'emp|lab': ['C', 'R', 'U', 'D'],
+  },
+  '/muc-src/checkup-category': {
+    'emp|lab': ['C', 'R', 'U', 'D'],
+  },
+  '/mcu-src/antibiotic-src': {
+    'emp|lab': ['C', 'R', 'U', 'D'],
+  },
+  '/mcu-src/antibiotic-src-category': {
+    'emp|lab': ['C', 'R', 'U', 'D'],
+  }
+}
diff --git a/app/const/page-permission/org-src.ts b/app/const/page-permission/org-src.ts
new file mode 100644
index 00000000..9bd9eb68
--- /dev/null
+++ b/app/const/page-permission/org-src.ts
@@ -0,0 +1,31 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/infra-src/bed': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+  '/infra-src/chamber': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+  '/infra-src/room': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+  '/infra-src/warehouse': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+  '/infra-src/building': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+  '/infra-src/floor': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+  '/infra-src/counter': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+  '/infra-src/public-screen': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+  },
+}
diff --git a/app/const/page-permission/tools-equipment.ts b/app/const/page-permission/tools-equipment.ts
new file mode 100644
index 00000000..dd112ae8
--- /dev/null
+++ b/app/const/page-permission/tools-equipment.ts
@@ -0,0 +1,27 @@
+import type { Permission } from "~/models/role";
+
+// Should we define the keys first?
+// export type Keys = 'key1' | 'key2' | 'key3' | etc
+
+export const permissions: Record<string, Record<string, Permission[]>> = {
+  '/tools-equipment-src/medicine': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+  },
+  '/tools-equipment-src/medicine-method': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+  },
+  '/tools-equipment-src/medicine-type': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+  },
+  '/tools-equipment-src/medicine-form': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+  },
+  '/tools-equipment-src/device-src': {
+    'div|fin': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+  },
+}
diff --git a/app/handlers/device-order.handler.ts b/app/handlers/device-order.handler.ts
index b1df996b..ab6f8fb5 100644
--- a/app/handlers/device-order.handler.ts
+++ b/app/handlers/device-order.handler.ts
@@ -1,8 +1,9 @@
 // Handlers
 import { genCrudHandler } from '~/handlers/_handler'
+import type { DeviceOrder } from '~/models/device-order'
 
 // Services
-import { create, update, remove } from '~/services/device-order-item.service'
+import { create, update, remove } from '~/services/device-order.service'
 
 export const {
   recId,
@@ -17,7 +18,7 @@ export const {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} = genCrudHandler({
+} = genCrudHandler<DeviceOrder>({
   create,
   update,
   remove,
diff --git a/app/handlers/encounter-entry.handler.ts b/app/handlers/encounter-entry.handler.ts
new file mode 100644
index 00000000..71594ebf
--- /dev/null
+++ b/app/handlers/encounter-entry.handler.ts
@@ -0,0 +1,596 @@
+import { ref, reactive, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+// Components
+import { toast } from '~/components/pub/ui/toast'
+
+// Models
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import { paymentTypes, sepRefTypeCodes, participantGroups } from '~/lib/constants.vclaim'
+
+// Stores
+import { useUserStore } from '~/stores/user'
+
+// 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'
+
+// Handlers
+import {
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  getPatientsList,
+  getPatientCurrent,
+  getPatientByIdentifierSearch,
+} from '~/handlers/patient.handler'
+
+export function useEncounterEntry(props: {
+  id: number
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+}) {
+  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[]>([])
+  const doctorsList = ref<Array<{ value: string; label: string }>>([])
+  const recSelectId = ref<number | null>(null)
+  const isSaving = ref(false)
+  const isLoadingDetail = ref(false)
+  const encounterData = ref<any>(null)
+  const formObjects = ref<any>({})
+  const isSepValid = ref(false)
+  const isCheckingSep = ref(false)
+  const sepNumber = ref('')
+  const vclaimReference = ref<any>(null)
+
+  const isEditMode = computed(() => props.id > 0)
+
+  const isSaveDisabled = computed(() => {
+    return !selectedPatient.value || !selectedPatientObject.value || isSaving.value || isLoadingDetail.value
+  })
+
+  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'
+  }
+
+  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 = getIsSubspecialist(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-vclaim/sep/add' + `?${queryParams.toString()}`)
+  }
+
+  function getIsSubspecialist(value: string, items: TreeItem[]): boolean {
+    for (const item of items) {
+      if (item.value === value) {
+        return false
+      }
+      if (item.children) {
+        for (const child of item.children) {
+          if (child.value === value) {
+            return true
+          }
+        }
+      }
+    }
+    return false
+  }
+
+  function getSpecialistCodeFromId(id: number | null | undefined): string | null {
+    if (!id) return null
+
+    if (encounterData.value?.specialist?.id === id) {
+      return encounterData.value.specialist.code || null
+    }
+
+    for (const specialist of specialistsData.value) {
+      if (specialist.id === id) {
+        return specialist.code || null
+      }
+      if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
+        for (const subspecialist of specialist.subspecialists) {
+          if (subspecialist.id === id) {
+            return subspecialist.code || null
+          }
+        }
+      }
+    }
+
+    return null
+  }
+
+  function getSubspecialistCodeFromId(id: number | null | undefined): string | null {
+    if (!id) return null
+
+    if (encounterData.value?.subspecialist?.id === id) {
+      return encounterData.value.subspecialist.code || null
+    }
+
+    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
+  }
+
+  function getSpecialistIdsFromCode(code: string): { specialist_id: number | null; subspecialist_id: number | null } {
+    if (!code) {
+      return { specialist_id: null, subspecialist_id: null }
+    }
+
+    const isSub = getIsSubspecialist(code, specialistsTree.value)
+
+    if (isSub) {
+      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 {
+      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 getValidateSepNumber(sepNumberValue: string) {
+    vclaimReference.value = null
+    if (!sepNumberValue || sepNumberValue.trim() === '') {
+      isSepValid.value = false
+      isCheckingSep.value = false
+      return
+    }
+
+    try {
+      isSepValid.value = false
+      isCheckingSep.value = true
+      const result = await getSepList({ number: sepNumberValue.trim() })
+      if (result.success && result.body?.response !== null) {
+        const response = result.body?.response || {}
+        if (Object.keys(response).length > 0) {
+          formObjects.value.patientName = response.peserta?.nama || '-'
+          formObjects.value.medicalRecordNumber = response.peserta?.noMr || '-'
+          formObjects.value.cardNumber = response.peserta?.noKartu || '-'
+          formObjects.value.registerDate = response.tglSep || null
+          vclaimReference.value = {
+            noSep: response.noSep || sepNumberValue.trim(),
+            tglRujukan: response.tglSep ? new Date(response.tglSep).toISOString() : null,
+            ppkDirujuk: response.noRujukan || 'rssa',
+            jnsPelayanan: response.jnsPelayanan === 'Rawat Jalan' ? '2' : response.jnsPelayanan === 'Rawat Inap' ? '1' : null,
+            catatan: response.catatan || '',
+            diagRujukan: response.diagnosa || '',
+            tipeRujukan: response.tujuanKunj?.kode ?? '0',
+            poliRujukan: response.poli || '',
+            user: '',
+          }
+        }
+        isSepValid.value = result.body?.metaData?.code === '200'
+      }
+    } catch (error) {
+      console.error('Error checking SEP:', error)
+      isSepValid.value = false
+    } finally {
+      isCheckingSep.value = false
+    }
+  }
+
+  async function handleFetchSpecialists() {
+    try {
+      const specialistsResult = await getSpecialistList({ 'page-size': 100, includes: 'subspecialists' })
+      if (specialistsResult.success) {
+        const specialists = specialistsResult.body?.data || []
+        specialistsData.value = specialists
+        specialistsTree.value = getSpecialistTreeItems(specialists)
+      }
+    } catch (error) {
+      console.error('Error fetching specialist-subspecialist tree:', error)
+    }
+  }
+
+  async function handleFetchDoctors(subSpecialistId: string | null = null) {
+    try {
+      const filterParams: any = { 'page-size': 100, includes: 'employee-Person' }
+
+      if (!subSpecialistId) {
+        const doctors = await getDoctorValueLabelList(filterParams, true)
+        doctorsList.value = doctors
+        return
+      }
+
+      const isSub = getIsSubspecialist(subSpecialistId, specialistsTree.value)
+
+      if (isSub) {
+        filterParams['subspecialist-id'] = subSpecialistId
+      } else {
+        filterParams['specialist-id'] = subSpecialistId
+      }
+
+      const doctors = await getDoctorValueLabelList(filterParams, true)
+      doctorsList.value = doctors
+    } catch (error) {
+      console.error('Error fetching doctors:', error)
+      doctorsList.value = []
+    }
+  }
+
+  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
+    await handleFetchDoctors()
+    await handleFetchSpecialists()
+    if (route.query) {
+      formObjects.value = { ...formObjects.value }
+      const queries = route.query as any
+      if (queries['sep-number']) {
+        formObjects.value.sepNumber = queries['sep-number']
+        formObjects.value.paymentType = 'jkn'
+      }
+    }
+  }
+
+  async function loadEncounterDetail() {
+    if (!isEditMode.value || props.id <= 0) {
+      return
+    }
+
+    try {
+      isLoadingDetail.value = true
+      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)
+        isLoadingDetail.value = false
+      } else {
+        toast({
+          title: 'Gagal',
+          description: 'Gagal memuat data kunjungan',
+          variant: 'destructive',
+        })
+        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',
+      })
+      await navigateTo(getListPath())
+    } finally {
+      isLoadingDetail.value = false
+    }
+  }
+
+  async function mapEncounterToForm(encounter: any) {
+    if (!encounter) return
+
+    if (encounter.patient) {
+      selectedPatient.value = String(encounter.patient.id)
+      selectedPatientObject.value = encounter.patient
+      if (!encounter.patient.person) {
+        await getPatientCurrent(selectedPatient.value)
+      }
+    }
+
+    const formData: any = {}
+    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) {
+      formData.patientName = selectedPatientObject.value.person.name || ''
+      formData.nationalIdentity = selectedPatientObject.value.person.residentIdentityNumber || ''
+      formData.medicalRecordNumber = selectedPatientObject.value.number || ''
+    }
+
+    const doctorId = encounter.appointment_doctor_id || encounter.responsible_doctor_id
+    if (doctorId) {
+      formData.doctorId = String(doctorId)
+    }
+
+    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
+      }
+    }
+
+    if (!formData.subSpecialistId) {
+      if (encounter.subspecialist?.code) {
+        formData.subSpecialistId = encounter.subspecialist.code
+      } else if (encounter.specialist?.code) {
+        formData.subSpecialistId = encounter.specialist.code
+      }
+    }
+
+    if (encounter.registeredAt) {
+      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]
+    }
+
+    if (encounter.paymentMethod_code) {
+      if (encounter.paymentMethod_code === 'insurance') {
+        formData.paymentType = 'jkn'
+      } else {
+        const validPaymentTypes = ['jkn', 'jkmm', 'spm', 'pks']
+        if (validPaymentTypes.includes(encounter.paymentMethod_code)) {
+          formData.paymentType = encounter.paymentMethod_code
+        } else {
+          formData.paymentType = 'spm'
+        }
+      }
+    } else {
+      formData.paymentType = 'spm'
+    }
+
+    formData.cardNumber = encounter.member_number || ''
+    formData.sepNumber = encounter.ref_number || ''
+    formObjects.value = formData
+
+    if (formData.sepNumber) {
+      sepNumber.value = formData.sepNumber
+    }
+    if (formData.subSpecialistId) {
+      await handleFetchDoctors(formData.subSpecialistId)
+    }
+  }
+
+  async function handleSaveEncounter(formValues: any) {
+    if (!selectedPatient.value || !selectedPatientObject.value) {
+      toast({
+        title: 'Gagal',
+        description: 'Pasien harus dipilih terlebih dahulu',
+        variant: 'destructive',
+      })
+      return
+    }
+
+    try {
+      isSaving.value = true
+
+      const employeeId = userStore.user?.employee_id || userStore.user?.employee?.id || 0
+
+      const formatDate = (dateString: string): string => {
+        if (!dateString) return ''
+        const date = new Date(dateString)
+        return date.toISOString()
+      }
+
+      const { specialist_id, subspecialist_id } = getSpecialistIdsFromCode(formValues.subSpecialistId || '')
+
+      const patientId = formValues.patient_id || selectedPatientObject.value?.id || Number(selectedPatient.value)
+
+      const registeredAtValue = formValues.registeredAt || formValues.registerDate || ''
+      const visitDateValue = formValues.visitDate || formValues.registeredAt || formValues.registerDate || ''
+      const memberNumber = formValues.member_number ?? formValues.cardNumber ?? formValues.memberNumber ?? null
+      const refNumber = formValues.ref_number ?? formValues.sepNumber ?? formValues.refNumber ?? null
+
+      let paymentMethodCode = formValues.paymentMethod_code ?? null
+      if (!paymentMethodCode) {
+        if (formValues.paymentType === 'jkn' || formValues.paymentType === 'jkmm') {
+          paymentMethodCode = 'insurance'
+        } else if (formValues.paymentType === 'spm') {
+          paymentMethodCode = 'cash'
+        } else if (formValues.paymentType === 'pks') {
+          paymentMethodCode = 'membership'
+        } else {
+          paymentMethodCode = 'cash'
+        }
+      }
+
+      const payload: any = {
+        patient_id: patientId,
+        appointment_doctor_code: formValues.doctorId || null,
+        class_code: props.classCode || '',
+        subClass_code: props.subClassCode || '',
+        infra_id: formValues.infra_id ?? null,
+        unit_code: userStore?.user?.unit_code ?? null,
+        refSource_name: formValues.refSource_name ?? 'RSSA',
+        refTypeCode: formValues.paymentType === 'jkn' ? 'bpjs' : '',
+        vclaimReference: vclaimReference.value ?? null,
+        paymentType: formValues.paymentType,
+        registeredAt: formatDate(registeredAtValue),
+        visitDate: formatDate(visitDateValue),
+      }
+
+      if (props.classCode !== 'inpatient') {
+        delete payload.infra_id
+      }
+      if (employeeId && employeeId > 0) {
+        payload.adm_employee_id = employeeId
+      }
+      if (specialist_id) {
+        payload.specialist_id = specialist_id
+      }
+      if (subspecialist_id) {
+        payload.subspecialist_id = subspecialist_id
+      }
+      if (paymentMethodCode) {
+        payload.paymentMethod_code = paymentMethodCode
+      }
+      
+      if (paymentMethodCode === 'insurance') {
+        payload.insuranceCompany_id = formValues.insuranceCompany_id ?? null
+        if (memberNumber) payload.member_number = memberNumber
+        if (refNumber) payload.ref_number = refNumber
+        if (formValues.refTypeCode) payload.refTypeCode = formValues.refTypeCode
+        if (formValues.vclaimReference) payload.vclaimReference = formValues.vclaimReference
+      } else {
+        if (paymentMethodCode === 'membership' && memberNumber) {
+          payload.member_number = memberNumber
+        }
+        if (refNumber) {
+          payload.ref_number = refNumber
+        }
+      }
+
+      if (props.classCode === 'ambulatory') {
+        payload.visitMode_code = 'adm'
+        payload.allocatedVisitCount = 0
+      }
+
+      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',
+        })
+        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
+    }
+  }
+
+  return {
+    patients,
+    paymentsList,
+    sepsList,
+    sepNumber,
+    participantGroupsList,
+    specialistsTree,
+    doctorsList,
+    recSelectId,
+    isSaving,
+    isLoadingDetail,
+    encounterData,
+    formObjects,
+    openPatient,
+    isSepValid,
+    isCheckingSep,
+    isEditMode,
+    isSaveDisabled,
+    isLoading,
+    selectedPatient,
+    selectedPatientObject,
+    paginationMeta,
+    loadEncounterDetail,
+    mapEncounterToForm,
+    toKebabCase,
+    toNavigateSep,
+    getListPath,
+    getSpecialistCodeFromId,
+    getSubspecialistCodeFromId,
+    getIsSubspecialist,
+    getSpecialistIdsFromCode,
+    getPatientsList,
+    getPatientCurrent,
+    getPatientByIdentifierSearch,
+    getValidateSepNumber,
+    handleFetchSpecialists,
+    handleFetchDoctors,
+    handleInit,
+    handleSaveEncounter,
+  }
+}
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
new file mode 100644
index 00000000..886be1a1
--- /dev/null
+++ b/app/handlers/encounter-init.handler.ts
@@ -0,0 +1,491 @@
+import { isValidDate } from '~/lib/date'
+import { medicalRoles } from '~/const/common/role'
+
+export interface EncounterItem {
+  id: string
+  title: string
+  classCode?: string[]
+  unit?: string
+  afterId?: string
+  component?: any
+  props?: Record<string, any>
+}
+
+export interface EncounterProps {
+  classCode: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+}
+
+export interface EncounterListData {
+  encounter?: any
+  status?: any
+  medicalAssessment?: any
+  medicalAssessmentRehab: any
+  functionAssessment?: any
+  protocolTheraphy?: any
+  protocolChemotherapy?: any
+  medicineProtocolChemotherapy?: any
+  consultation?: any
+  letterOfControl?: any
+}
+
+const StatusAsync = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+const AssesmentFunctionListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const EarlyMedicalAssesmentListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const EarlyMedicalRehabListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const ChemoProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.protocol.vue'))
+const ChemoMedicineProtocolListAsync = defineAsyncComponent(
+  () => import('~/components/app/chemotherapy/list.medicine.vue'),
+)
+const DeviceOrderAsync = defineAsyncComponent(() => import('~/components/content/device-order/main.vue'))
+const PrescriptionAsync = defineAsyncComponent(() => import('~/components/content/prescription/main.vue'))
+const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
+const CprjAsync = defineAsyncComponent(() => import('~/components/content/cprj/entry.vue'))
+const RadiologyAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
+const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
+const DocUploadListAsync = defineAsyncComponent(() => import('~/components/content/document-upload/list.vue'))
+const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
+const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/list.vue'))
+const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
+
+const defaultKeys: Record<string, any> = {
+  status: {
+    id: 'status',
+    title: 'Status Masuk/Keluar',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  earlyMedicalAssessment: {
+    id: 'early-medical-assessment',
+    title: 'Pengkajian Awal Medis',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  rehabMedicalAssessment: {
+    id: 'rehab-medical-assessment',
+    title: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'rehab',
+    afterId: 'early-medical-assessment',
+  },
+  functionAssessment: {
+    id: 'function-assessment',
+    title: 'Asesmen Fungsi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'rehab',
+    afterId: 'rehab-medical-assessment',
+  },
+  therapyProtocol: {
+    id: 'therapy-protocol',
+    classCode: ['ambulatory'],
+    title: 'Protokol Terapi',
+    unit: 'rehab',
+    afterId: 'function-assessment',
+  },
+  chemotherapyProtocol: {
+    id: 'chemotherapy-protocol',
+    title: 'Protokol Kemoterapi',
+    classCode: ['ambulatory'],
+    unit: 'chemo',
+    afterId: 'early-medical-assessment',
+  },
+  chemotherapyMedicine: {
+    id: 'chemotherapy-medicine',
+    title: 'Protokol Obat Kemoterapi',
+    classCode: ['ambulatory'],
+    unit: 'chemo',
+    afterId: 'chemotherapy-protocol',
+  },
+  educationAssessment: {
+    id: 'education-assessment',
+    title: 'Asesmen Kebutuhan Edukasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  consent: {
+    id: 'consent',
+    title: 'General Consent',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  patientNote: {
+    id: 'patient-note',
+    title: 'CPRJ',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  prescription: {
+    id: 'prescription',
+    title: 'Order Obat',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  device: {
+    id: 'device-order',
+    title: 'Order Alkes',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  mcuRadiology: {
+    id: 'mcu-radiology',
+    title: 'Order Radiologi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  mcuLabPc: {
+    id: 'mcu-lab-pc',
+    title: 'Order Lab PK',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  mcuLabMicro: {
+    id: 'mcu-lab-micro',
+    title: 'Order Lab Mikro',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  mcuLabPa: {
+    id: 'mcu-lab-pa',
+    title: 'Order Lab PA',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  medicalAction: {
+    id: 'medical-action',
+    title: 'Order Ruang Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  mcuResult: {
+    id: 'mcu-result',
+    title: 'Hasil Penunjang',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  consultation: {
+    id: 'consultation',
+    title: 'Konsultasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  resume: {
+    id: 'resume',
+    title: 'Resume',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  control: {
+    id: 'control',
+    title: 'Surat Kontrol',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  screening: {
+    id: 'screening',
+    title: 'Skrinning MPP',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  supportingDocument: {
+    id: 'supporting-document',
+    title: 'Upload Dokumen Pendukung',
+    classCode: ['ambulatory'],
+    unit: 'rehab',
+  },
+  priceList: {
+    id: 'price-list',
+    title: 'Tarif Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+}
+
+export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
+  return items.filter((item) => item.classCode?.includes(classCode))
+}
+
+export function getItemsByUnit(unit: string, items: EncounterItem[]) {
+  return items.filter((item) => item.unit === unit)
+}
+
+export function getItemsByIds(ids: string[], items: EncounterItem[]) {
+  return items.filter((item) => ids.includes(item.id))
+}
+
+export function getIndexById(id: string, items: EncounterItem[]) {
+  return items.findIndex((item) => item.id === id)
+}
+
+export const getItemsAll = (classCode: string, unit: string, items: EncounterItem[]) => {
+  const prevItems = [...items]
+  let updateItems = getItemsByClassCode(classCode, prevItems)
+  updateItems = getItemsByUnit(unit, updateItems)
+  return updateItems
+}
+
+export function insertItemByAfterId(id: string, items: EncounterItem[], newItem: EncounterItem) {
+  const index = getIndexById(id, items)
+  if (index > -1) {
+    items.splice(index + 1, 0, newItem)
+  }
+}
+
+export function injectComponents(id: string | number, data: EncounterListData, meta: EncounterListData) {
+  const currentKeys = { ...defaultKeys }
+  if (currentKeys?.status) {
+    currentKeys.status['component'] = StatusAsync
+    currentKeys.status['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.earlyMedicalAssessment) {
+    currentKeys.earlyMedicalAssessment['component'] = EarlyMedicalAssesmentListAsync
+    currentKeys.earlyMedicalAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'early-medic',
+      label: currentKeys.earlyMedicalAssessment['title'],
+    }
+  }
+  if (currentKeys?.rehabMedicalAssessment) {
+    currentKeys.rehabMedicalAssessment['component'] = EarlyMedicalRehabListAsync
+    currentKeys.rehabMedicalAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'early-rehab',
+      label: currentKeys.rehabMedicalAssessment['title'],
+    }
+  }
+  if (currentKeys?.functionAssessment) {
+    currentKeys.functionAssessment['component'] = AssesmentFunctionListAsync
+    currentKeys.functionAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'function',
+      label: currentKeys.functionAssessment['title'],
+    }
+  }
+  if (currentKeys?.therapyProtocol) {
+    // TODO: add component for therapyProtocol
+    currentKeys.therapyProtocol['component'] = null
+    currentKeys.therapyProtocol['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.protocolTheraphy,
+    }
+  }
+  if (currentKeys?.chemotherapyProtocol) {
+    currentKeys.chemotherapyProtocol['component'] = ChemoProtocolListAsync
+    currentKeys.chemotherapyProtocol['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.protocolChemotherapy,
+    }
+  }
+  if (currentKeys?.chemotherapyMedicine) {
+    currentKeys.chemotherapyMedicine['component'] = ChemoMedicineProtocolListAsync
+    currentKeys.chemotherapyMedicine['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.medicineProtocolChemotherapy,
+    }
+  }
+  if (currentKeys?.educationAssessment) {
+    // TODO: add component for education assessment
+    currentKeys.educationAssessment['component'] = null
+    currentKeys.educationAssessment['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.consent) {
+    currentKeys.consent['component'] = GeneralConsentListAsync
+    currentKeys.consent['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.patientNote) {
+    currentKeys.patientNote['component'] = CprjAsync
+    currentKeys.patientNote['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.prescription) {
+    currentKeys.prescription['component'] = PrescriptionAsync
+    currentKeys.prescription['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.device) {
+    currentKeys.device['component'] = DeviceOrderAsync
+    currentKeys.device['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.mcuRadiology) {
+    currentKeys.mcuRadiology['component'] = RadiologyAsync
+    currentKeys.mcuRadiology['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.mcuLabPc) {
+    currentKeys.mcuLabPc['component'] = CpLabOrderAsync
+    currentKeys.mcuLabPc['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.mcuLabMicro) {
+    // TODO: add component for mcuLabMicro
+    currentKeys.mcuLabMicro['component'] = null
+    currentKeys.mcuLabMicro['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.mcuLabPa) {
+    // TODO: add component for mcuLabPa
+    currentKeys.mcuLabPa['component'] = null
+    currentKeys.mcuLabPa['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.medicalAction) {
+    // TODO: add component for medicalAction
+    currentKeys.medicalAction['component'] = null
+    currentKeys.medicalAction['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.mcuResult) {
+    // TODO: add component for mcuResult
+    currentKeys.mcuResult['component'] = null
+    currentKeys.mcuResult['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.consultation) {
+    currentKeys.consultation['component'] = ConsultationAsync
+    currentKeys.consultation['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.resume) {
+    currentKeys.resume['component'] = ResumeListAsync
+    currentKeys.resume['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.control) {
+    currentKeys.control['component'] = ControlLetterListAsync
+    currentKeys.control['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.screening) {
+    // TODO: add component for screening
+    currentKeys.screening['component'] = null
+    currentKeys.screening['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.supportingDocument) {
+    currentKeys.supportingDocument['component'] = DocUploadListAsync
+    currentKeys.supportingDocument['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.priceList) {
+    // TODO: add component for priceList
+    currentKeys.priceList['component'] = null
+    currentKeys.priceList['props'] = { encounter_id: id }
+  }
+
+  return currentKeys
+}
+
+export function mergeArrayAt<T>(arraysOne: T[], arraysTwo: T[] | T, deleteCount = 0): T[] {
+  const prevItems = arraysOne.slice()
+  if (!prevItems) return prevItems
+  const nextItems = Array.isArray(arraysTwo) ? arraysTwo : [arraysTwo]
+  if (nextItems.length === 0) return prevItems
+  // determine insertion position using the first item's `id` if available
+  const firstId = (nextItems[0] as any)?.afterId || (prevItems[0] as any)?.id
+  let pos = prevItems.length
+  if (typeof firstId === 'string') {
+    const index = prevItems.findIndex((item: any) => item.id === firstId)
+    pos = index < 0 ? Math.max(prevItems.length + index, 0) : Math.min(index, prevItems.length)
+  }
+  prevItems.splice(pos, deleteCount, ...nextItems)
+  return prevItems
+}
+
+// Function to map API response to Encounter structure
+export function mapResponseToEncounter(result: any): any {
+  if (!result) return null
+
+  // Check if patient and patient.person exist (minimal validation)
+  if (!result.patient || !result.patient.person) {
+    return null
+  }
+
+  const mapped: any = {
+    id: result.id || 0,
+    patient_id: result.patient_id || result.patient?.id || 0,
+    patient: {
+      id: result.patient?.id || 0,
+      number: result.patient?.number || '',
+      person: {
+        id: result.patient?.person?.id || 0,
+        name: result.patient?.person?.name || '',
+        birthDate: result.patient?.person?.birthDate || null,
+        gender_code: result.patient?.person?.gender_code || '',
+        residentIdentityNumber: result.patient?.person?.residentIdentityNumber || null,
+        frontTitle: result.patient?.person?.frontTitle || '',
+        endTitle: result.patient?.person?.endTitle || '',
+        addresses: result.patient?.person?.addresses || [],
+      },
+    },
+    registeredAt: result.registeredAt || result.patient?.registeredAt || null,
+    class_code: result.class_code || '',
+    unit_id: result.unit_id || 0,
+    unit: result.unit || null,
+    specialist_id: result.specialist_id || null,
+    subspecialist_id: result.subspecialist_id || null,
+    visitDate: isValidDate(result.visitDate)
+      ? result.visitDate
+      : result.registeredAt || result.patient?.registeredAt || null,
+    adm_employee_id: result.adm_employee_id || 0,
+    appointment_doctor_id: result.appointment_doctor_id || null,
+    responsible_doctor_id: result.responsible_doctor_id || null,
+    appointment_doctor: result.appointment_doctor || null,
+    responsible_doctor: result.responsible_doctor || null,
+    refSource_name: result.refSource_name || null,
+    appointment_id: result.appointment_id || null,
+    earlyEducation: result.earlyEducation || null,
+    medicalDischargeEducation: result.medicalDischargeEducation || '',
+    admDischargeEducation: result.admDischargeEducation || null,
+    discharge_method_code: result.discharge_method_code || null,
+    discharge_reason: result.dischargeReason || result.discharge_reason || null,
+    discharge_date: result.discharge_date || null,
+    status_code: result.status_code || '',
+    // Payment related fields
+    paymentMethod_code:
+      result.paymentMethod_code && result.paymentMethod_code.trim() !== '' ? result.paymentMethod_code : null,
+    trx_number: result.trx_number || null,
+    member_number: result.member_number || null,
+    ref_number: result.ref_number || null,
+  }
+
+  return mapped
+}
+
+export function getMenuItems(
+  id: string | number,
+  props: any,
+  user: any,
+  data: EncounterListData,
+  meta: any,
+) {
+  console.log(props)
+  // const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
+  const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode
+  const currentKeys = injectComponents(id, data, meta)
+  const defaultItems: EncounterItem[] = Object.values(currentKeys)
+  const listItemsForOutpatientRehab = mergeArrayAt(
+    getItemsAll('ambulatory', 'all', defaultItems),
+    getItemsAll('ambulatory', 'rehab', defaultItems),
+  )
+  const listItemsForOutpatientChemo = mergeArrayAt(
+    getItemsAll('ambulatory', 'all', defaultItems),
+    getItemsAll('ambulatory', 'chemo', defaultItems),
+  )
+  const listItems: Record<string, Record<string, Record<string, any>>> = {
+    'installation|ambulatory': {
+      'unit|rehab': {
+        items: listItemsForOutpatientRehab,
+        roles: medicalRoles,
+      },
+      'unit|chemo': {
+        items: listItemsForOutpatientChemo,
+        roles: medicalRoles,
+      },
+      all: getItemsAll('ambulatory', 'all', defaultItems),
+    },
+    'installation|emergency': {
+      all: getItemsAll('emergency', 'all', defaultItems),
+    },
+    'installation|inpatient': {
+      all: getItemsAll('inpatient', 'all', defaultItems),
+    },
+  }
+  const currentListItems = listItems[`installation|${normalClassCode}`]
+  if (!currentListItems) return []
+  const unitCode = user?.unit_code ? `unit|${user.unit_code}` : 'all'
+  const currentUnitItems: any = currentListItems[`${unitCode}`]
+  if (!currentUnitItems) return []
+  let menus = []
+  if (currentUnitItems.roles && currentUnitItems.roles?.includes(user.activeRole)) {
+    menus = [...currentUnitItems.items]
+  } else {
+    menus = unitCode !== 'all' && currentUnitItems?.items ? [...currentUnitItems.items] : [...currentUnitItems]
+  }
+  return menus
+}
diff --git a/app/handlers/encounter-process.handler.ts b/app/handlers/encounter-process.handler.ts
new file mode 100644
index 00000000..67850da4
--- /dev/null
+++ b/app/handlers/encounter-process.handler.ts
@@ -0,0 +1,32 @@
+// Services
+import { getDetail } from '~/services/encounter.service'
+
+// Handlers
+import { mapResponseToEncounter } from '~/handlers/encounter-init.handler'
+
+export async function getEncounterData(id: string | number) {
+  let data = null
+  try {
+    const dataRes = await getDetail(id, {
+      includes:
+        'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person',
+    })
+    const dataResBody = dataRes.body ?? null
+    const result = dataResBody?.data ?? null
+
+    if (result) {
+      const mappedData = mapResponseToEncounter(result)
+      if (mappedData) {
+        data = mappedData
+      } else {
+        data = null
+      }
+    } else {
+      data = null
+    }
+  } catch (error) {
+    console.error('Error fetching encounter data:', error)
+    data = null
+  }
+  return data
+}
\ No newline at end of file
diff --git a/app/handlers/general-consent.handler.ts b/app/handlers/general-consent.handler.ts
new file mode 100644
index 00000000..2f949f3f
--- /dev/null
+++ b/app/handlers/general-consent.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/general-consent.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/integration-sep-entry.handler.ts b/app/handlers/integration-sep-entry.handler.ts
new file mode 100644
index 00000000..ad267bef
--- /dev/null
+++ b/app/handlers/integration-sep-entry.handler.ts
@@ -0,0 +1,691 @@
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+// Components
+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'
+
+export function useIntegrationSepEntry() {
+  const userStore = useUserStore()
+  const route = useRoute()
+
+  const openPatient = ref(false)
+  const openLetter = ref(false)
+  const openHistory = ref(false)
+  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 isLoadingPatient = ref(false)
+  const specialistsTree = ref<TreeItem[]>([])
+  const resourceType = ref('')
+  const resourcePath = ref('')
+
+  /**
+   * Map letter data to form fields for save-sep
+   * Maps data from letters.value[0].information to selectedObjects and form values
+   */
+  function mapLetterDataToForm(formValues: any): any {
+    if (selectedAdmissionType.value === '3' || letters.value.length === 0) {
+      return formValues
+    }
+
+    const letterData = letters.value[0]
+    const info = letterData.information || {}
+
+    // Map data to selectedObjects for form population
+    if (info.cardNumber) {
+      selectedObjects.value['cardNumber'] = info.cardNumber
+    }
+    if (info.medicalRecordNumber) {
+      selectedObjects.value['medicalRecordNumber'] = info.medicalRecordNumber
+    }
+    if (info.patientPhone) {
+      selectedObjects.value['phoneNumber'] = info.patientPhone
+    }
+    if (info.classLevel) {
+      selectedObjects.value['classLevel'] = info.classLevel
+    }
+
+    // Map data to formValues for makeSepData
+    const mappedValues = { ...formValues }
+
+    // response.rujukan.peserta.noKartu → cardNumber (noKartu)
+    if (info.cardNumber) {
+      mappedValues.cardNumber = info.cardNumber
+    }
+
+    // response.rujukan.tglKunjungan → referralLetterDate (rujukan.tglRujukan)
+    if (letterData.plannedDate) {
+      mappedValues.referralLetterDate = letterData.plannedDate
+    }
+
+    // response.rujukan.noKunjungan → referralLetterNumber (rujukan.noRujukan)
+    if (letterData.letterNumber) {
+      mappedValues.referralLetterNumber = letterData.letterNumber
+    }
+
+    // response.rujukan.provPerujuk.kode → fromClinic (rujukan.ppkRujukan)
+    if (info.destination) {
+      mappedValues.referralTo = info.destination
+    }
+
+    // response.rujukan.poliRujukan.kode → polyCode
+    if (info.poly) {
+      mappedValues.polyCode = info.poly
+    }
+
+    // response.asalFaskes → asalRujukan (1 = Faskes 1, 2 = Faskes RS)
+    // Map facility to referralFrom (asalRujukan)
+    if (info.facility) {
+      mappedValues.referralFrom = info.facility
+    }
+
+    // response.rujukan.diagnosa.kode → initialDiagnosis (diagAwal)
+    if (info.diagnoses) {
+      mappedValues.initialDiagnosis = info.diagnoses
+    }
+
+    // response.rujukan.poliRujukan.kode → destinationClinic (poli.tujuan)
+    if (info.poly) {
+      mappedValues.destinationClinic = info.poly
+    }
+
+    // response.rujukan.peserta.hakKelas.kode → classLevel (klsRawat.klsRawatHak)
+    if (info.classLevel) {
+      mappedValues.classLevel = info.classLevel
+    }
+
+    // response.rujukan.peserta.mr.noMR → medicalRecordNumber (noMR)
+    if (info.medicalRecordNumber) {
+      mappedValues.medicalRecordNumber = info.medicalRecordNumber
+    }
+
+    // response.rujukan.peserta.mr.noTelepon → phoneNumber (noTelp)
+    if (info.patientPhone) {
+      mappedValues.phoneNumber = info.patientPhone
+    }
+
+    return mappedValues
+  }
+
+  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,
+        })
+      })
+    }
+  }
+
+  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 {
+        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 || '',
+              diagnose: 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 || '',
+              identity: lettersRaw?.rujukan?.peserta?.nik || '',
+              patientName: lettersRaw?.rujukan?.peserta?.nama || '',
+              patientPhone: lettersRaw?.rujukan?.peserta?.mr?.noTelepon || '',
+              medicalRecordNumber: lettersRaw?.rujukan?.peserta?.mr?.noMR || '',
+              destination: lettersRaw?.rujukan?.provPerujuk?.kode || '',
+            },
+          },
+        ]
+      }
+    }
+  }
+
+  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 {
+      isLoadingPatient.value = true
+      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 || ''
+      }
+      isLoadingPatient.value = false
+    } catch (err) {
+      console.error('Failed to load patient from query params:', err)
+      isLoadingPatient.value = false
+    }
+  }
+
+  function handleSaveLetter() {
+    // 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
+    }
+  }
+
+  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 (menu === 'service-type') {
+      selectedServiceType.value = value
+      doctors.value = await getDoctorLabelList({
+        serviceType: selectedServiceType.value || '2',
+        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') {
+      if (isLoadingPatient.value) return
+      const text = value.text
+      const type = value.type
+      const prevCardNumber = selectedObjects.value['cardNumber'] || ''
+      const prevNationalIdentity = selectedObjects.value['nationalIdentity'] || ''
+      if (type === 'indentity' && text !== prevNationalIdentity) {
+        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(async () => {
+        if (letters.value.length > 0) {
+          const copyObjects = { ...selectedObjects.value }
+          const letter = letters.value[0]
+          selectedObjects.value = {}
+          selectedLetter.value = letter.letterNumber
+          isLetterReadonly.value = true
+          if (letter.information || letter.clinic) {
+            const poly = value.admissionType === '3' ? letter.clinic : letter.information?.poly
+            if (poly) {
+              const resultControl = await getControlLetterList({
+                mode: 'by-schedule',
+                controlDate: letter.plannedDate,
+                controlType: selectedServiceType.value,
+                polyCode: poly,
+              })
+              if (resultControl && resultControl.success && resultControl.body) {
+                const resultData = resultControl.body?.response?.list || []
+                const resultUnique = [...new Map(resultData.map((item: any) => [item.kodeDokter, item])).values()]
+                const controlLetters = resultUnique.map((item: any) => ({
+                  value: item.kodeDokter ? String(item.kodeDokter) : '',
+                  label: `${item.kodeDokter} - ${item.namaDokter} - ${item.jadwalPraktek} (${item.kapasitas})`,
+                }))
+                doctors.value = controlLetters
+              }
+            }
+          }
+          setTimeout(async () => {
+            selectedObjects.value = copyObjects
+            selectedObjects.value['letterDate'] = letter.plannedDate
+            selectedObjects.value['cardNumber'] = letter.information?.cardNumber || ''
+            selectedObjects.value['nationalIdentity'] = letter.information?.identity || ''
+            selectedObjects.value['medicalRecordNumber'] = letter.information?.medicalRecordNumber || ''
+            selectedObjects.value['patientName'] = letter.information?.patientName || ''
+            selectedObjects.value['phoneNumber'] = letter.information?.patientPhone || ''
+            selectedObjects.value['facility'] = letter.information?.facility || ''
+            selectedObjects.value['diagnose'] = letter.information?.diagnose || ''
+            selectedObjects.value['serviceType'] = letter.information?.serviceType || ''
+            selectedObjects.value['classLevel'] = letter.information?.classLevel || ''
+            selectedObjects.value['poly'] = letter.information?.poly || ''
+            selectedObjects.value['destination'] = letter.information?.destination || ''
+            if (!!selectedObjects.value['diagnose']) {
+              const diagnoseRes: any = await getDiagnoseLabelList({ diagnosa: selectedObjects.value['diagnose'] })
+              diagnoses.value = diagnoseRes
+              if (diagnoseRes && diagnoseRes.length > 0) {
+                selectedObjects.value['diagnoseLabel'] = diagnoseRes[0].value
+              }
+            }
+          }, 250)
+        }
+      })
+      return
+    }
+    if (menu === 'open-letter') {
+      openLetter.value = true
+      return
+    }
+    if (menu === 'history-sep') {
+      getMonitoringHistoryMappers().then(() => {
+        openHistory.value = true
+      })
+      return
+    }
+    if (menu === 'sep-number-changed') {
+      // Update sepNumber when it changes in form (only if different to prevent loop)
+    }
+    if (menu === 'back') {
+      navigateTo('/integration/bpjs-vclaim/sep')
+    }
+    if (menu === 'save-sep') {
+      isSaveLoading.value = true
+
+      // Map letter data to form if admissionType !== '3' and letters.value has data
+      let mappedValues = value
+      if (selectedAdmissionType.value !== '3') {
+        if (letters.value.length > 0) {
+          // Map data from letters.value to form values
+          mappedValues = mapLetterDataToForm(value)
+        } else {
+          // Fallback: use getPatientExternalMappers if letters.value is empty
+          // Get card number from form values or selectedObjects
+          const cardNumberToSearch = value.cardNumber || selectedObjects.value['cardNumber'] || ''
+          if (cardNumberToSearch && cardNumberToSearch !== '-') {
+            await getPatientExternalMappers(cardNumberToSearch, 'by-card')
+            // Update mappedValues with data from getPatientExternalMappers
+            if (selectedObjects.value['cardNumber']) {
+              mappedValues.cardNumber = selectedObjects.value['cardNumber']
+            }
+            if (selectedObjects.value['medicalRecordNumber']) {
+              mappedValues.medicalRecordNumber = selectedObjects.value['medicalRecordNumber']
+            }
+            if (selectedObjects.value['phoneNumber']) {
+              mappedValues.phoneNumber = selectedObjects.value['phoneNumber']
+            }
+            if (selectedObjects.value['classLevel']) {
+              mappedValues.classLevel = selectedObjects.value['classLevel']
+            }
+          }
+        }
+      }
+
+      if (!value.destinationClinic) {
+        mappedValues.destinationClinic = selectedObjects.value['destination'] || ''
+      }
+      if (!value.clinicExcecutive) {
+        mappedValues.clinicExcecutive = 'no'
+      }
+
+      mappedValues.userName = userStore.user?.user_name || ''
+
+      createSep(makeSepData(mappedValues))
+        .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 (!!resourcePath.value) {
+            navigateTo({ path: resourcePath.value, query: { 'sep-number': body?.response?.sep?.noSep || '-' } })
+            return
+          }
+          navigateTo('/integration/bpjs-vclaim/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 || 2,
+      })
+    }
+    if (menu === 'clinic-to') {
+      facilitiesTo.value = await getHealthFacilityLabelList({
+        healthcare: value,
+        healthcareType: selectedServiceType.value || 2,
+      })
+    }
+    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() {
+    selectedServiceType.value = '2'
+    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 || '2',
+      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['source-path']) resourcePath.value = queries['source-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']
+    }
+  }
+
+  return {
+    openPatient,
+    openLetter,
+    openHistory,
+    selectedLetter,
+    selectedObjects,
+    selectedServiceType,
+    selectedAdmissionType,
+    histories,
+    letters,
+    doctors,
+    diagnoses,
+    facilitiesFrom,
+    facilitiesTo,
+    supportCodesList,
+    serviceTypesList,
+    registerMethodsList,
+    accidentsList,
+    purposeOfVisitsList,
+    proceduresList,
+    assessmentsList,
+    provincesList,
+    citiesList,
+    districtsList,
+    classLevelsList,
+    classLevelUpgradesList,
+    classPaySourcesList,
+    isServiceHidden,
+    isSaveLoading,
+    isLetterReadonly,
+    isLoadingPatient,
+    specialistsTree,
+    resourceType,
+    resourcePath,
+    patients,
+    selectedPatient,
+    paginationMeta,
+    getMonitoringHistoryMappers,
+    getLetterMappers,
+    getPatientInternalMappers,
+    getPatientExternalMappers,
+    getPatientsList,
+    getPatientByIdentifierSearch,
+    handleSaveLetter,
+    mapLetterDataToForm,
+    handleSavePatient,
+    handleEvent,
+    handleFetch,
+    handleFetchSpecialists,
+    handleInit,
+  }
+}
+
+export default useIntegrationSepEntry
diff --git a/app/handlers/integration-sep-list.handler.ts b/app/handlers/integration-sep-list.handler.ts
new file mode 100644
index 00000000..94cdccce
--- /dev/null
+++ b/app/handlers/integration-sep-list.handler.ts
@@ -0,0 +1,284 @@
+import { ref, reactive } from 'vue'
+// Components
+import { toast } from '~/components/pub/ui/toast'
+// Types
+import type { Ref as VueRef } from 'vue'
+import type { DateRange } from 'radix-vue'
+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'
+import type { VclaimSepData } from '~/models/vclaim'
+// Libraries
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
+import { getFormatDateId } from '~/lib/date'
+import { downloadCsv, downloadXls } from '~/lib/download'
+import { serviceTypes } from '~/lib/constants.vclaim'
+import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
+import { remove as removeSepData, makeSepDataForRemove } from '~/services/vclaim-sep.service'
+
+const headerKeys = [
+  'letterDate',
+  'letterNumber',
+  'serviceType',
+  'flow',
+  'medicalRecordNumber',
+  'patientName',
+  'cardNumber',
+  'controlLetterNumber',
+  'controlLetterDate',
+  'clinicDestination',
+  'attendingDoctor',
+  'diagnosis',
+  'careClass',
+]
+
+const headerLabels = [
+  'Tanggal SEP',
+  'No. SEP',
+  'Jenis Pelayanan',
+  'Alur',
+  'No. Rekam Medis',
+  'Nama Pasien',
+  'No. Kartu BPJS',
+  'No. Surat Kontrol',
+  'Tgl Surat Kontrol',
+  'Poli Tujuan',
+  'Dokter Penanggung Jawab',
+  'Diagnosa',
+  'Kelas Perawatan',
+]
+
+export function useIntegrationSepList() {
+  const userStore = useUserStore()
+  const today = new Date()
+  const initCalDate = (d: Date) => new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+
+  const recId = ref<number>(0)
+  const recAction = ref<string>('')
+  const recItem = ref<any>(null)
+
+  const data = ref<VclaimSepData[]>([])
+  const dateSelection = ref({ start: initCalDate(today), end: initCalDate(today) }) as VueRef<DateRange>
+  const dateRange = ref(`${getFormatDateId(today)} - ${getFormatDateId(today)}`)
+  const serviceType = ref('2')
+  const serviceTypesList = ref<any[]>([])
+  const search = ref('')
+  const open = ref(false)
+  
+  const sepData = ref({
+    sepNumber: '',
+    cardNumber: '',
+    patientName: '',
+  })
+  
+  const refSearchNav: RefSearchNav = {
+    onClick: () => {},
+    onInput: (_val: string) => {},
+    onClear: () => {},
+  }
+
+  const headerPrep: HeaderPrep = {
+    title: 'Daftar SEP Prosedur',
+    icon: 'i-lucide-panel-bottom',
+    addNav: {
+      label: 'Tambah',
+      onClick: () => {
+        navigateTo('/integration/bpjs-vclaim/sep/add')
+      },
+    },
+  }
+  
+  const paginationMeta = reactive<PaginationMeta>({
+    recordCount: 0,
+    page: 1,
+    pageSize: 10,
+    totalPage: 5,
+    hasNext: false,
+    hasPrev: false,
+  })
+  
+  const isLoading = reactive<DataTableLoader>({
+    isTableLoading: false,
+  })
+
+  const getDateFilter = () => {
+    let dateFilter = ''
+    const isTimeLocal = true
+    const dateFirst =
+      dateSelection.value && dateSelection.value.start
+        ? dateSelection.value.start.toDate(getLocalTimeZone())
+        : new Date()
+    if (isTimeLocal && dateSelection.value && dateSelection.value.end) {
+      const { year, month, day } = dateSelection.value.end
+      dateFilter = `${year}-${month}-${day}`
+    } else {
+      dateFilter = dateFirst.toISOString().substring(0, 10)
+    }
+    return dateFilter
+  }
+
+  const getMonitoringVisitMappers = async () => {
+    isLoading.dataListLoading = true
+    data.value = []
+    const dateFilter = getDateFilter()
+    const result = await geMonitoringVisitList({
+      date: dateFilter || '',
+      serviceType: serviceType.value,
+    })
+
+    if (result && result.success && result.body) {
+      const visitsRaw = result.body?.response?.sep || []
+      if (!visitsRaw) {
+        isLoading.dataListLoading = false
+        return
+      }
+      visitsRaw.forEach((result: any) => {
+        let st = result.jnsPelayanan || '-'
+        if (st === 'R.Inap') st = 'Rawat Inap'
+        else if (st === '1' || st === 'R.Jalan') st = 'Rawat Jalan'
+
+        data.value.push({
+          letterDate: result.tglSep || '-',
+          letterNumber: result.noSep || '-',
+          serviceType: st,
+          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
+  }
+
+  const getSepList = async () => {
+    await getMonitoringVisitMappers()
+  }
+
+  const setServiceTypes = () => {
+    serviceTypesList.value = Object.keys(serviceTypes).map((item) => ({
+      value: item.toString(),
+      label: serviceTypes[item],
+    })) as any
+  }
+
+  const setDateRange = () => {
+    const startCal = dateSelection.value.start
+    const endCal = dateSelection.value.end
+    const s = startCal ? startCal.toDate(getLocalTimeZone()) : today
+    const e = endCal ? endCal.toDate(getLocalTimeZone()) : today
+    dateRange.value = `${getFormatDateId(s)} - ${getFormatDateId(e)}`
+  }
+
+  const handleExportCsv = () => {
+    if (!data.value || data.value.length === 0) {
+      toast({ title: 'Kosong', description: 'Tidak ada data untuk diekspor', variant: 'destructive' })
+      return
+    }
+
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const dateStr = `${yyyy}-${mm}-${dd}`
+    const filename = `file-sep-${dateStr}.csv`
+    downloadCsv(headerKeys, headerLabels, data.value, filename, ',', true)
+  }
+
+  const handleExportExcel = async () => {
+    if (!data.value || data.value.length === 0) {
+      toast({ title: 'Kosong', description: 'Tidak ada data untuk diekspor', variant: 'destructive' })
+      return
+    }
+
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const dateStr = `${yyyy}-${mm}-${dd}`
+    const filename = `file-sep-${dateStr}.xlsx`
+    try {
+      await downloadXls(headerKeys, headerLabels, data.value, filename, 'SEP Data')
+    } catch (err: any) {
+      console.error('exportExcel error', err)
+      toast({ title: 'Gagal', description: err?.message || 'Gagal mengekspor data ke Excel', variant: 'destructive' })
+    }
+  }
+
+  const handleRowSelected = (row: any) => {
+    if (!row) return
+    sepData.value.sepNumber = row.letterNumber || ''
+    sepData.value.cardNumber = row.cardNumber || ''
+    sepData.value.patientName = row.patientName || ''
+    recItem.value = row
+    recId.value = (row && (row.id || row.recId)) || 0
+  }
+
+  const handlePageChange = (page: number) => {
+    console.log('pageChange', page)
+  }
+
+  const handleRemove = async () => {
+    try {
+      const result = await removeSepData(
+        makeSepDataForRemove({ ...sepData.value, userName: userStore.user?.user_name }),
+      )
+      const backendMessage = result?.body?.message || result?.message || null
+      const backendStatus = result?.body?.status || result?.status || null
+
+      if (
+        backendMessage === 'success' ||
+        (backendStatus === 'error' && backendMessage === 'Decrypt failed: illegal base64 data at input byte 16')
+      ) {
+        await getSepList()
+        toast({ title: 'Berhasil', description: backendMessage || 'Data berhasil dihapus', variant: 'default' })
+      } else {
+        toast({ title: 'Gagal', description: backendMessage || 'Gagal menghapus data', variant: 'destructive' })
+      }
+    } catch (err: any) {
+      console.error('handleRemove error', err)
+      toast({
+        title: 'Gagal',
+        description: err?.message || 'Terjadi kesalahan saat menghapus data',
+        variant: 'destructive',
+      })
+    } finally {
+      recId.value = 0
+      recAction.value = ''
+      open.value = false
+    }
+  }
+
+  return {
+    recId,
+    recAction,
+    recItem,
+    data,
+    dateSelection,
+    dateRange,
+    serviceType,
+    serviceTypesList,
+    search,
+    open,
+    sepData,
+    headerPrep,
+    refSearchNav,
+    paginationMeta,
+    isLoading,
+    getSepList,
+    setServiceTypes,
+    setDateRange,
+    handleExportCsv,
+    handleExportExcel,
+    handleRowSelected,
+    handlePageChange,
+    handleRemove,
+  }
+}
+
+export default useIntegrationSepList
diff --git a/app/handlers/medicine-form.handler.ts b/app/handlers/medicine-form.handler.ts
new file mode 100644
index 00000000..6fcadb4c
--- /dev/null
+++ b/app/handlers/medicine-form.handler.ts
@@ -0,0 +1,21 @@
+import { createCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/medicine-form.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = createCrudHandler({
+  post: create,
+  patch: update,
+  remove: remove,
+})
diff --git a/app/handlers/prescription.handler.ts b/app/handlers/prescription.handler.ts
index 62e1861e..10bea176 100644
--- a/app/handlers/prescription.handler.ts
+++ b/app/handlers/prescription.handler.ts
@@ -1,4 +1,4 @@
-import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { genCrudHandler } from '~/handlers/_handler'
 import { create, update, remove } from '~/services/prescription.service'
 
 export const {
diff --git a/app/handlers/supporting-document.handler.ts b/app/handlers/supporting-document.handler.ts
new file mode 100644
index 00000000..70b29612
--- /dev/null
+++ b/app/handlers/supporting-document.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/supporting-document.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index dd52a9c8..a79ecb98 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,7 +2,12 @@
 import CardContent from '~/components/pub/ui/card/CardContent.vue'
 
 const route = useRoute()
+
+
 const contentFrame = computed(() => route.meta.contentFrame)
+const contentPadding = computed(() => route.meta.contentPadding || 'p-4 2xl:p-5')
+const contentUseCard = computed(() => route.meta.contentUseCard === false ? false : true)
+console.log(route.meta.contentUseCard,contentUseCard)
 const contentFrameClass = computed(() => {
   switch (contentFrame.value) {
     case 'cf-container-2xl':
@@ -28,13 +33,14 @@ const contentFrameClass = computed(() => {
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div :class="`w-full p-4 2xl:p-5 flex justify-center ${contentFrameClass}`">
+      <div :class="`w-full flex justify-center ${contentPadding} ${contentFrameClass}`">
         <div v-if="contentFrame !== 'cf-no-frame'">
-          <Card>
+          <Card v-if="contentUseCard">
             <CardContent>
               <slot />
             </CardContent>
           </Card>
+          <slot v-else />
         </div>
         <slot v-else />
       </div>
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 3a52b22e..9cde7f73 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -8,7 +8,7 @@ export const dataStatusCodes: Record<string, string> = {
   review: 'Review',
   process: 'Proses',
   done: 'Selesai',
-  canceled: 'Dibatalkan',
+  cancel: 'Dibatalkan',
   rejected: 'Ditolak',
   skiped: 'Dilewati',
 }
@@ -383,3 +383,45 @@ export const medicalActionTypeCode: Record<string, string> = {
 } as const
 
 export type medicalActionTypeCodeKey = keyof typeof medicalActionTypeCode
+
+export const encounterDocTypeCode: Record<string, string> = {
+  "person-resident-number": 'person-resident-number',
+  "person-driving-license": 'person-driving-license',
+  "person-passport": 'person-passport',
+  "person-family-card": 'person-family-card',
+  "mcu-item-result": 'mcu-item-result',
+  "vclaim-sep": 'vclaim-sep',
+  "vclaim-sipp": 'vclaim-sipp',
+} as const
+export type encounterDocTypeCodeKey = keyof typeof encounterDocTypeCode
+export const encounterDocOpt: { label: string; value: encounterDocTypeCodeKey }[] = [
+  { label: 'KTP', value: 'person-resident-number' },
+  { label: 'SIM', value: 'person-driving-license' },
+  { label: 'Passport', value: 'person-passport' },
+  { label: 'Kartu Keluarga', value: 'person-family-card' },
+  { label: 'Hasil MCU', value: 'mcu-item-result' },
+  { label: 'Klaim SEP', value: 'vclaim-sep' },
+  { label: 'Klaim SIPP', value: 'vclaim-sipp' },
+]
+
+
+export const docTypeCode = {
+  "encounter-patient": 'encounter-patient',
+  "encounter-support": 'encounter-support',
+  "encounter-other": 'encounter-other',
+  "vclaim-sep": 'vclaim-sep',
+  "vclaim-sipp": 'vclaim-sipp',
+} as const
+export const docTypeLabel = {
+  "encounter-patient": 'Data Pasien',
+  "encounter-support": 'Data Penunjang',
+  "encounter-other": 'Lain - Lain',
+  "vclaim-sep": 'SEP',
+  "vclaim-sipp": 'SIPP',
+} as const
+export type docTypeCodeKey = keyof typeof docTypeCode
+export const supportingDocOpt = [
+  { label: 'Data Pasien', value: 'encounter-patient' },
+  { label: 'Data Penunjang', value: 'encounter-support' },
+  { label: 'Lain - Lain', value: 'encounter-other' },
+]
diff --git a/app/lib/date.ts b/app/lib/date.ts
index 2c7b92cf..982c3c5b 100644
--- a/app/lib/date.ts
+++ b/app/lib/date.ts
@@ -1,46 +1,69 @@
+const monthsInId = [
+  'Januari',
+  'Februari',
+  'Maret',
+  'April',
+  'Mei',
+  'Juni',
+  'Juli',
+  'Agustus',
+  'September',
+  'Oktober',
+  'November',
+  'Desember',
+]
+
 export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
-	const birthDate = new Date(dateString);
-	const today = new Date();
+  const birthDate = new Date(dateString)
+  const today = new Date()
 
-	if (comparedDate) {
-		const comparedDateObj = new Date(comparedDate);
-		today.setFullYear(comparedDateObj.getFullYear());
-		today.setMonth(comparedDateObj.getMonth());
-		today.setDate(comparedDateObj.getDate());
-	}
+  if (comparedDate) {
+    const comparedDateObj = new Date(comparedDate)
+    today.setFullYear(comparedDateObj.getFullYear())
+    today.setMonth(comparedDateObj.getMonth())
+    today.setDate(comparedDateObj.getDate())
+  }
 
-	// Format the date part
-	const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
-	const idFormat = birthDate.toLocaleDateString('id-ID', options);
+  // Format the date part
+  const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' }
+  const idFormat = birthDate.toLocaleDateString('id-ID', options)
 
-	// Calculate age
-	let years = today.getFullYear() - birthDate.getFullYear();
-	let months = today.getMonth() - birthDate.getMonth();
-	let days = today.getDate() - birthDate.getDate();
+  // Calculate age
+  let years = today.getFullYear() - birthDate.getFullYear()
+  let months = today.getMonth() - birthDate.getMonth()
+  let days = today.getDate() - birthDate.getDate()
 
-	if (months < 0 || (months === 0 && days < 0)) {
-		years--;
-		months += 12;
-	}
+  if (months < 0 || (months === 0 && days < 0)) {
+    years--
+    months += 12
+  }
 
-	if (days < 0) {
-		const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
-		days += prevMonth.getDate();
-		months--;
-	}
+  if (days < 0) {
+    const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0)
+    days += prevMonth.getDate()
+    months--
+  }
 
-	// Format the age part
-	let extFormat = '';
-	if ([years, months, days].filter(Boolean).join(' ')) {
-		extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
-	} else {
-		extFormat = '0';
-	}
+  // Format the age part
+  let extFormat = ''
+  if ([years, months, days].filter(Boolean).join(' ')) {
+    extFormat = `${years} Tahun ${months} Bulan ${days} Hari`
+  } else {
+    extFormat = '0'
+  }
 
-	return {
-		idFormat,
-		extFormat
-	};
+  return {
+    idFormat,
+    extFormat,
+  }
+}
+
+// Date selection: default to today - today
+export function getFormatDateId(date: Date) {
+  const dd = String(date.getDate()).padStart(2, '0')
+  const mm = monthsInId[date.getMonth()]
+  const yyyy = date.getFullYear()
+  return `${dd} ${mm} ${yyyy}`
 }
 
 export function formatDateYyyyMmDd(isoDateString: string): string {
@@ -49,4 +72,17 @@ export function formatDateYyyyMmDd(isoDateString: string): string {
 	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
+}
+
+// Function to check if date is invalid (like "0001-01-01T00:00:00Z")
+export function isValidDate(dateString: string | null | undefined): boolean {
+  if (!dateString) return false
+  // Check for invalid date patterns
+  if (dateString.startsWith('0001-01-01')) return false
+  try {
+    const date = new Date(dateString)
+    return !isNaN(date.getTime())
+  } catch {
+    return false
+  }
+}
diff --git a/app/lib/download.ts b/app/lib/download.ts
new file mode 100644
index 00000000..eb996432
--- /dev/null
+++ b/app/lib/download.ts
@@ -0,0 +1,154 @@
+/**
+ * Download data as CSV file.
+ *
+ * @param headers - Array of header names. If omitted and data is array of objects, keys will be taken from first object.
+ * @param data - Array of rows. Each row can be either an object (key -> value) or an array of values.
+ * @param filename - optional file name to use for downloaded file
+ * @param delimiter - csv delimiter (default is comma)
+ * @param addBOM - add UTF-8 BOM to the file to make Excel detect UTF-8 correctly
+ * Usage examples:
+ * 1) With headers and array of objects
+ * downloadCsv(['name', 'age'], [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}], 'people.csv');
+ * 2) Without headers (automatically uses object keys)
+ * downloadCsv(null, [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}], 'people.csv');
+ * 3) With array-of-arrays
+ * downloadCsv(['col1', 'col2'], [['a', 'b'], ['c', 'd']], 'matrix.csv');
+ */
+export function downloadCsv(
+  headers: string[] | null,
+  headerLabels: string[],
+  data: Array<Record<string, any> | any[]>,
+  filename = 'data.csv',
+  delimiter = ',',
+  addBOM = true,
+) {
+  if (!Array.isArray(data) || data.length === 0) {
+    // still create an empty CSV containing only headers
+    const csvHeader = headers ? headers.join(delimiter) : ''
+    const csvString = addBOM ? '\uFEFF' + csvHeader : csvHeader
+    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.setAttribute('download', filename)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    return
+  }
+
+  // if headers not provided and rows are objects, take keys from first object
+  let _headers: string[] | null = headers
+  if (!_headers) {
+    const firstRow = data[0]
+    if (typeof firstRow === 'object' && !Array.isArray(firstRow)) {
+      _headers = Object.keys(firstRow)
+    } else if (Array.isArray(firstRow)) {
+      // if rows are arrays and no headers provided, we won't add header row
+      _headers = null
+    }
+  }
+
+  const escape = (val: unknown) => {
+    if (val === null || typeof val === 'undefined') return ''
+    const str = String(val)
+    const needsQuoting = str.includes(delimiter) || str.includes('\n') || str.includes('\r') || str.includes('"')
+    if (!needsQuoting) return str
+    return '"' + str.replace(/"/g, '""') + '"'
+  }
+
+  const rows: string[] = data.map((row) => {
+    if (Array.isArray(row)) {
+      return row.map(escape).join(delimiter)
+    }
+    // object row - map using headers if available, otherwise use object values
+    if (_headers && Array.isArray(_headers)) {
+      return _headers.map((h) => escape((row as Record<string, any>)[h])).join(delimiter)
+    }
+    return Object.values(row).map(escape).join(delimiter)
+  })
+
+  const headerRow = headerLabels ? headerLabels.join(delimiter) : _headers ? _headers.join(delimiter) : null
+  const csvString = (addBOM ? '\uFEFF' : '') + [headerRow, ...rows].filter(Boolean).join('\r\n')
+
+  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.setAttribute('download', filename)
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+/**
+ * Download data as XLS (Excel) file using xlsx library.
+ *
+ * @param headers - Array of header names. If omitted and data is array of objects, keys will be taken from first object.
+ * @param data - Array of rows. Each row can be either an object (key -> value) or an array of values.
+ * @param filename - optional file name to use for downloaded file (default: 'data.xlsx')
+ * @param sheetName - optional sheet name in workbook (default: 'Sheet1')
+ * Usage examples:
+ * 1) With headers and array of objects
+ * await downloadXls(['name', 'age'], [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}], 'people.xlsx');
+ * 2) Without headers (automatically uses object keys)
+ * await downloadXls(null, [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}], 'people.xlsx');
+ * 3) With custom sheet name
+ * await downloadXls(['col1', 'col2'], [['a', 'b'], ['c', 'd']], 'matrix.xlsx', 'MyData');
+ */
+export async function downloadXls(
+  headers: string[] | null,
+  headerLabels: string[],
+  data: Array<Record<string, any> | any[]>,
+  filename = 'data.xlsx',
+  sheetName = 'Sheet1',
+) {
+  // Dynamically import xlsx to avoid server-side issues
+  const { utils, write } = await import('xlsx')
+  const { saveAs } = await import('file-saver')
+
+  if (!Array.isArray(data) || data.length === 0) {
+    // Create empty sheet with headers only
+    const ws = utils.aoa_to_sheet(headers ? [headers] : [[]])
+    const wb = utils.book_new()
+    utils.book_append_sheet(wb, ws, sheetName)
+    const wbout = write(wb, { bookType: 'xlsx', type: 'array' })
+    saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
+    return
+  }
+
+  // if headers not provided and rows are objects, take keys from first object
+  let _headers: string[] | null = headers
+  if (!_headers) {
+    const firstRow = data[0]
+    if (typeof firstRow === 'object' && !Array.isArray(firstRow)) {
+      _headers = Object.keys(firstRow)
+    } else if (Array.isArray(firstRow)) {
+      _headers = null
+    }
+  }
+
+  // Convert data rows to 2D array
+  const rows: any[][] = data.map((row) => {
+    if (Array.isArray(row)) {
+      return row
+    }
+    // object row - map using headers if available, otherwise use object values
+    if (_headers && Array.isArray(_headers)) {
+      return _headers.map((h) => (row as Record<string, any>)[h] ?? '')
+    }
+    return Object.values(row)
+  })
+
+  // Combine headers/labels and rows for sheet
+  // If caller provided headerLabels (as display labels), prefer them.
+  const sheetHeader = headerLabels ? headerLabels : _headers ? _headers : null
+  const sheetData = sheetHeader ? [sheetHeader, ...rows] : rows
+
+  // Create worksheet and workbook
+  const ws = utils.aoa_to_sheet(sheetData)
+  const wb = utils.book_new()
+  utils.book_append_sheet(wb, ws, sheetName)
+
+  // Write and save file
+  const wbout = write(wb, { bookType: 'xlsx', type: 'array' })
+  saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
+}
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
index ab7b5550..807131a8 100644
--- a/app/lib/page-permission.ts
+++ b/app/lib/page-permission.ts
@@ -1,7 +1,7 @@
 import type { RoleAccess } from '~/models/role'
 
 export const PAGE_PERMISSIONS = {
-  '/patient': {
+  '/client/patient': {
     'emp|doc': ['R'],
     'emp|nur': ['R'],
     'emp|reg': ['C', 'R', 'U', 'D'],
@@ -9,13 +9,11 @@ export const PAGE_PERMISSIONS = {
     'emp|pay': ['R'],
     'emp|mng': ['R'],
   },
-  '/doctor': {
-    'emp|doc': ['C', 'R', 'U', 'D'],
-    'emp|nur': ['R'],
-    'emp|reg': ['R'],
-    'emp|pha': ['R'],
-    'emp|pay': ['R'],
-    'emp|mng': ['R'],
+  '/human-src/employee': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
+  },
+  '/human-src/intern': {
+    'div|hrd': ['C', 'R', 'U', 'D'],
   },
   '/satusehat': {
     'emp|doc': ['R'],
diff --git a/app/lib/roles.ts b/app/lib/roles.ts
new file mode 100644
index 00000000..8e6561e3
--- /dev/null
+++ b/app/lib/roles.ts
@@ -0,0 +1,16 @@
+import { medicalRoles, respPosCode } from '~/const/common/role'
+
+export function getServicePosition(role?: string): string {
+  if(!role) {
+    return 'none'
+  }
+  if (medicalRoles.includes(role)) {
+    return 'medical'
+  } else if (role === 'emp|reg') {
+    return 'registration'
+  } else if (role.includes('|resp')) {
+      return 'verificator'
+  } else {
+    return 'none'
+  }
+}
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 357d8700..67f3d04b 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,6 +1,7 @@
 import type { ClassValue } from 'clsx'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+import { toast } from '~/components/pub/ui/toast'
 
 export interface SelectOptionType<_T = string> {
   value: string
@@ -104,3 +105,59 @@ export function calculateAge(birthDate: Date | string | null | undefined): strin
     return `${years} tahun ${months} bulan`
   }
 }
+
+
+/**
+ * Converts a plain JavaScript object (including File objects) into a FormData instance.
+ * @param {object} data - The object to convert (e.g., form values).
+ * @returns {FormData} The new FormData object suitable for API submission.
+ */
+export function toFormData(data: Record<string, any>): FormData {
+  const formData = new FormData();
+
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      const value = data[key];
+
+      // Handle File objects, Blobs, or standard JSON values
+      if (value !== null && value !== undefined) {
+        // Check if the value is a File/Blob instance
+        if (value instanceof File || value instanceof Blob) {
+          // Append the file directly
+          formData.append(key, value);
+        } else if (typeof value === 'object') {
+          // Handle nested objects/arrays by stringifying them (optional, depends on API)
+          // Note: Most APIs expect nested data to be handled separately or passed as JSON string
+          // For simplicity, we stringify non-File objects.
+          formData.append(key, JSON.stringify(value));
+        } else {
+          // Append standard string, number, or boolean values
+          formData.append(key, value);
+        }
+      }
+    }
+  }
+
+  return formData;
+}
+
+export function printFormData(formData: FormData) {
+    console.log("--- FormData Contents ---");
+    // Use the entries() iterator to loop through key/value pairs
+    for (const [key, value] of formData.entries()) {
+        if (value instanceof File) {
+            console.log(`Key: ${key}, Value: [File: ${value.name}, Type: ${value.type}, Size: ${value.size} bytes]`);
+        } else {
+            console.log(`Key: ${key}, Value: "${value}"`);
+        }
+    }
+    console.log("-------------------------");
+}
+
+export function unauthorizedToast() {
+  toast({
+    title: 'Unauthorized',
+    description: 'You are not authorized to perform this action.',
+    variant: 'destructive',
+  })
+}
diff --git a/app/middleware/rbac.ts b/app/middleware/rbac.ts
index 87e8ca00..fa0c0685 100644
--- a/app/middleware/rbac.ts
+++ b/app/middleware/rbac.ts
@@ -20,7 +20,7 @@ export default defineNuxtRouteMiddleware((to) => {
     const requiredRoles = to.meta.roles as string[]
     if (requiredRoles && requiredRoles.length > 0) {
       // FIXME: change this dummy roles, when api is ready
-      const userRoles = authStore.userRole
+      const userRoles = authStore.userRoles
       // const userRoles = ['admisi']
       const hasRequiredRole = requiredRoles.some((role) => userRoles.includes(role))
 
diff --git a/app/models/device-order-item.ts b/app/models/device-order-item.ts
index fa16638a..31b3ee47 100644
--- a/app/models/device-order-item.ts
+++ b/app/models/device-order-item.ts
@@ -1,16 +1,19 @@
 import { type Base, genBase } from "./_base"
+import { genDevice, type Device } from "./device"
 
 export interface DeviceOrderItem extends Base {
   deviceOrder_id: number
-  device_id: number
-  count: number
+  device_code: string
+  device: Device
+  quantity: number
 }
 
 export function genDeviceOrderItem(): DeviceOrderItem {
   return {
     ...genBase(),
     deviceOrder_id: 0,
-    device_id: 0,
-    count: 0,
+    device_code: '',
+    device: genDevice(),
+    quantity: 0,
   }
 }
diff --git a/app/models/device-order.ts b/app/models/device-order.ts
index 884340c5..cbb682ad 100644
--- a/app/models/device-order.ts
+++ b/app/models/device-order.ts
@@ -1,15 +1,21 @@
 import { type Base, genBase } from "./_base"
+import type { DeviceOrderItem } from "./device-order-item"
+import { genDoctor, type Doctor } from "./doctor"
 
 export interface DeviceOrder extends Base {
   encounter_id: number
-  doctor_id: number
+  doctor_code: number
+  doctor: Doctor
   status_code?: string
+  items: DeviceOrderItem[]
 }
 
 export function genDeviceOrder(): DeviceOrder {
   return {
     ...genBase(),
     encounter_id: 0,
-    doctor_id: 0,
+    doctor_code: 0,
+    doctor: genDoctor(),
+    items: []
   }
 }
diff --git a/app/models/division-position.ts b/app/models/division-position.ts
index dc263ada..ebd7bfa9 100644
--- a/app/models/division-position.ts
+++ b/app/models/division-position.ts
@@ -4,7 +4,7 @@ export interface DivisionPosition extends Base {
   code: string
   name: string
   headStatus?: boolean
-  division_id: number
+  division_id: string
   employee_id?: number
 
   employee?: Employee | null
@@ -16,7 +16,7 @@ export function genDivisionPosition(): DivisionPosition {
     code: '',
     name: '',
     headStatus: false,
-    division_id: 0,
+    division_id: '',
     employee_id: 0,
   }
 }
diff --git a/app/models/encounter-document.ts b/app/models/encounter-document.ts
new file mode 100644
index 00000000..5a98ccd5
--- /dev/null
+++ b/app/models/encounter-document.ts
@@ -0,0 +1,29 @@
+import { type Base, genBase } from "./_base"
+import { docTypeLabel, } from '~/lib/constants'
+import { genEmployee, type Employee } from "./employee"
+import { genEncounter, type Encounter } from "./encounter"
+
+export interface EncounterDocument extends Base {
+  encounter_id: number
+  encounter?: Encounter
+  upload_employee_id: number
+  employee?: Employee
+  type_code: string
+  name: string
+  filePath: string
+  fileName: string
+}
+
+export function genEncounterDocument(): EncounterDocument {
+  return {
+    ...genBase(),
+    encounter_id: 2,
+    encounter: genEncounter(),
+    upload_employee_id: 0,
+    employee: genEmployee(),
+    type_code: docTypeLabel["encounter-patient"],
+    name: 'example',
+    filePath: 'https://bing.com',
+    fileName: 'example',
+  }
+}
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index fb2c0b04..85a0012d 100644
--- a/app/models/encounter.ts
+++ b/app/models/encounter.ts
@@ -1,6 +1,7 @@
 import type { DeathCause } from "./death-cause"
 import { type Doctor, genDoctor } from "./doctor"
 import { genEmployee, type Employee } from "./employee"
+import type { EncounterDocument } from "./encounter-document"
 import type { InternalReference } from "./internal-reference"
 import { type Patient, genPatient } from "./patient"
 import type { Specialist } from "./specialist"
@@ -36,7 +37,9 @@ export interface Encounter {
     discharge_date?: string
     internalReferences?: InternalReference[]
     deathCause?: DeathCause
+    paymentMethod_code?: string
     status_code: string
+    encounterDocuments: EncounterDocument[]
 }
 
 export function genEncounter(): Encounter {
@@ -54,7 +57,8 @@ export function genEncounter(): Encounter {
         appointment_doctor_id: 0,
         appointment_doctor: genDoctor(),
         medicalDischargeEducation: '',
-        status_code: ''
+        status_code: '',
+        encounterDocuments: [],
     }
 }
 
diff --git a/app/models/general-consent.ts b/app/models/general-consent.ts
new file mode 100644
index 00000000..fe3ac97a
--- /dev/null
+++ b/app/models/general-consent.ts
@@ -0,0 +1,49 @@
+export interface GeneralConsent {
+  id: number
+  encounter_id: number
+  value: string
+}
+
+export interface ValueCreateDto {
+  relatives: string[]
+  responsibleName: string
+  responsiblePhone: string
+  informant: string
+  witness1: string
+  witness2: string
+}
+
+export interface CreateDto {
+  encounter_id: number
+  value: string
+}
+
+export interface UpdateDto {
+  id: number
+  problem: string
+  unit_id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function genCreateDto(): CreateDto {
+  return {
+    encounter_id: 0,
+    problem: '',
+    unit_id: 0,
+  }
+}
+
+export function genConsultation(): GeneralConsent {
+  return {
+    id: 0,
+    encounter_id: 0,
+    unit_id: 0,
+    doctor_id: 0,
+    problem: '',
+    solution: '',
+    repliedAt: '',
+  }
+}
diff --git a/app/models/medicine-form.ts b/app/models/medicine-form.ts
new file mode 100644
index 00000000..8ca21a2b
--- /dev/null
+++ b/app/models/medicine-form.ts
@@ -0,0 +1,38 @@
+import { type Base, genBase } from "./_base"
+
+export interface MedicineForm extends Base {
+  name: string
+  code: string
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): MedicineForm {
+  return {
+    ...genBase(),
+    name: 'name',
+    code: 'code',
+  }
+}
diff --git a/app/models/medicine.ts b/app/models/medicine.ts
index d3a04752..5aa01da4 100644
--- a/app/models/medicine.ts
+++ b/app/models/medicine.ts
@@ -1,10 +1,17 @@
+import type { MedicineFormData } from "~/schemas/medicine.schema"
 import { type Base, genBase } from "./_base"
+import type { MedicineGroup } from "./medicine-group"
+import type { MedicineMethod } from "./medicine-method"
 
 export interface Medicine extends Base {
   code: string
   name: string
-  medicineGroup_code: string
-  medicineMethod_code: string
+  medicineGroup_code?: string
+  medicineGroup?: MedicineGroup
+  medicineMethod_code?: string
+  medicineMethod?: MedicineMethod
+  medicineForm_code?: string
+  medicineForm?: MedicineFormData
   uom_code: string
   infra_id?: string | null
   stock: number
diff --git a/app/models/medicinemix-item.ts b/app/models/medicinemix-item.ts
index d2e1f973..9c055294 100644
--- a/app/models/medicinemix-item.ts
+++ b/app/models/medicinemix-item.ts
@@ -1,7 +1,7 @@
 import { type Base, genBase } from "./_base"
 import { type Medicine, genMedicine } from "./medicine";
 
-interface MedicinemixItem extends Base {
+export interface MedicinemixItem extends Base {
   id: number
   medicineMix_id: number
   medicine_id: number
@@ -35,7 +35,7 @@ export interface DeleteDto {
   id: number
 }
 
-export function MedicinemixItem(): MedicinemixItem {
+export function genMedicinemixItem(): MedicinemixItem {
   return {
     ...genBase(),
     medicineMix_id: 0,
diff --git a/app/models/prescription-item.ts b/app/models/prescription-item.ts
index 6f0d3716..3349fcbf 100644
--- a/app/models/prescription-item.ts
+++ b/app/models/prescription-item.ts
@@ -5,10 +5,10 @@ export interface PrescriptionItem {
   id: number;
   prescription_id: number;
   isMix: boolean;
-  medicine_id: number;
-  medicine: Medicine;
-  medicineMix_id: number;
-  medicineMix: Medicinemix
+  medicine_code?: string;
+  medicine?: Medicine;
+  medicineMix_id?: number;
+  medicineMix?: Medicinemix
   frequency: number;
   dose: number;
   interval: number;
@@ -29,35 +29,35 @@ export interface CreateDto {
   quantity: number;
   usage: string;
 }
- 
+
 export interface GetListDto {
   page: number
   size: number
   name?: string
 //   code?: string
 }
- 
+
 export interface GetDetailDto {
   id?: string
 }
- 
+
 export interface UpdateDto extends CreateDto {
   id?: number
 }
- 
+
 export interface DeleteDto {
   id?: string
 }
- 
-export function genPresciptionItem(): PrescriptionItem {
+
+export function genPrescriptionItem(): PrescriptionItem {
   return {
     id: 0,
     prescription_id: 0,
     isMix: false,
-    medicine_id: 0,
-    medicine: genMedicine(),
-    medicineMix_id: 0,
-    medicineMix: genMedicinemix(),
+    // medicine_code: '',
+    // medicine: genMedicine(),
+    // medicineMix_id: 0,
+    // medicineMix: genMedicinemix(),
     frequency: 0,
     dose: 0,
     interval: 0,
@@ -66,4 +66,3 @@ export function genPresciptionItem(): PrescriptionItem {
     usage: ''
   }
 }
- 
\ No newline at end of file
diff --git a/app/models/role.ts b/app/models/role.ts
index 6c6097a9..4829a02d 100644
--- a/app/models/role.ts
+++ b/app/models/role.ts
@@ -14,9 +14,9 @@ export interface AuthState {
 
 export type Permission = 'C' | 'R' | 'U' | 'D'
 
-export interface RoleAccess {
+export interface RoleAccesses {
   [role: string]: Permission[]
 }
 
-export type PagePath = keyof typeof PAGE_PERMISSIONS
-export type PagePermission = (typeof PAGE_PERMISSIONS)[PagePath]
+// export type PagePath = keyof typeof PAGE_PERMISSIONS
+// export type PagePermission = (typeof PAGE_PERMISSIONS)[PagePath]
diff --git a/app/models/specialist-position.ts b/app/models/specialist-position.ts
index 727e8374..040e1dd5 100644
--- a/app/models/specialist-position.ts
+++ b/app/models/specialist-position.ts
@@ -2,7 +2,7 @@ import { type Base, genBase } from './_base'
 import type { Employee } from './employee'
 
 export interface SpecialistPosition extends Base {
-  specialist_id: number
+  specialist_id: string
   code: string
   name: string
   headStatus?: boolean
@@ -13,7 +13,7 @@ export interface SpecialistPosition extends Base {
 export function genSpecialistPosition(): SpecialistPosition {
   return {
     ...genBase(),
-    specialist_id: 0,
+    specialist_id: '',
     code: '',
     name: '',
     headStatus: false,
diff --git a/app/models/specialist.ts b/app/models/specialist.ts
index d3180a73..2ce742d3 100644
--- a/app/models/specialist.ts
+++ b/app/models/specialist.ts
@@ -14,6 +14,6 @@ export function genSpecialist(): Specialist {
     ...genBase(),
     code: '',
     name: '',
-    unit_id: 0,
+    unit_id: '',
   }
 }
diff --git a/app/models/subspecialist-position.ts b/app/models/subspecialist-position.ts
index 28ea2287..945780d2 100644
--- a/app/models/subspecialist-position.ts
+++ b/app/models/subspecialist-position.ts
@@ -3,7 +3,7 @@ import type { Employee } from './employee'
 import type { Subspecialist } from './subspecialist'
 
 export interface SubSpecialistPosition extends Base {
-  subspecialist_id: number
+  subspecialist_id: string
   code: string
   name: string
   headStatus?: boolean
@@ -16,7 +16,7 @@ export interface SubSpecialistPosition extends Base {
 export function genSubSpecialistPosition(): SubSpecialistPosition {
   return {
     ...genBase(),
-    subspecialist_id: 0,
+    subspecialist_id: '',
     code: '',
     name: '',
     headStatus: false,
diff --git a/app/models/unit-position.ts b/app/models/unit-position.ts
index 11e97806..3e1dc426 100644
--- a/app/models/unit-position.ts
+++ b/app/models/unit-position.ts
@@ -2,7 +2,7 @@ import { type Base, genBase } from './_base'
 import type { Employee } from './employee'
 
 export interface UnitPosition extends Base {
-  unit_id: number
+  unit_id: string
   code: string
   name: string
   headStatus?: boolean
@@ -14,7 +14,7 @@ export interface UnitPosition extends Base {
 export function genUnitPosition(): UnitPosition {
   return {
     ...genBase(),
-    unit_id: 0,
+    unit_id: '',
     code: '',
     name: '',
     headStatus: false,
diff --git a/app/pages/(features)/children-action/echocardiography/index.vue b/app/pages/(features)/ambulatory/consultation/index.vue
similarity index 100%
rename from app/pages/(features)/children-action/echocardiography/index.vue
rename to app/pages/(features)/ambulatory/consultation/index.vue
diff --git a/app/pages/(features)/children-action/spirometry/index.vue b/app/pages/(features)/ambulatory/encounter-queue/index.vue
similarity index 100%
rename from app/pages/(features)/children-action/spirometry/index.vue
rename to app/pages/(features)/ambulatory/encounter-queue/index.vue
diff --git a/app/pages/(features)/outpatient/encounter/[id]/edit.vue b/app/pages/(features)/ambulatory/encounter/[id]/edit.vue
similarity index 53%
rename from app/pages/(features)/outpatient/encounter/[id]/edit.vue
rename to app/pages/(features)/ambulatory/encounter/[id]/edit.vue
index 9713675f..3c402f32 100644
--- a/app/pages/(features)/outpatient/encounter/[id]/edit.vue
+++ b/app/pages/(features)/ambulatory/encounter/[id]/edit.vue
@@ -1,50 +1,57 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+// Pubs
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
+// Models & Consts
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/ambulatory'
+
+// Apps
+import Content from '~/components/content/encounter/entry.vue'
+
+// Page meta
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   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']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/ambulatory/encounter/[id]/edit'] || {}
 const { checkRole, hasUpdateAccess } = useRBAC()
 
-// Check if user has access to this page
+// Check if user has access to this page, need to use try - catch for proper handling
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
 // Define permission-based computed properties
 const canUpdate = hasUpdateAccess(roleAccess)
 
 // Get encounter ID from route params
-const encounterId = computed(() => {
+const encounter_id = computed(() => {
   const id = route.params.id
   return typeof id === 'string' ? parseInt(id) : 0
 })
+
+// User info
+const { user } = useUserStore()
+const subClassCode = user.unit_code == 'rehab' ? 'rehab' : 'reg'
 </script>
 
 <template>
   <div v-if="canUpdate">
-    <ContentEncounterEntry
-      :id="encounterId"
+    <Content
+      :id="encounter_id"
       class-code="ambulatory"
-      sub-class-code="reg"
+      :sub-class-code="subClassCode"
       form-type="Edit"
     />
   </div>
diff --git a/app/pages/(features)/outpatient/encounter/[id]/index.vue b/app/pages/(features)/ambulatory/encounter/[id]/index.vue
similarity index 56%
rename from app/pages/(features)/outpatient/encounter/[id]/index.vue
rename to app/pages/(features)/ambulatory/encounter/[id]/index.vue
index 1864cf2c..d9609b24 100644
--- a/app/pages/(features)/outpatient/encounter/[id]/index.vue
+++ b/app/pages/(features)/ambulatory/encounter/[id]/index.vue
@@ -1,34 +1,40 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+// Pubs
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
+// Models & Consts
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/ambulatory'
+import { medicalRoles } from '~/const/common/role'
+
+// Page meta
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Detail Surat Kontrol',
+  roles: medicalRoles,
+  title: 'Detail Kunjungan',
   contentFrame: 'cf-container-md',
 })
 
+// Define common things
 const route = useRoute()
 
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
+// Prep role checking
+const roleAccess: Record<string, Permission[]> = permissions['/ambulatory/encounter/[id]'] || {}
 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 = hasReadAccess(roleAccess)
-const canRead = true
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+useHead({
+  title: () => route.meta.title as string,
+})
 </script>
 
 <template>
diff --git a/app/pages/(features)/ambulatory/encounter/[id]/process.vue b/app/pages/(features)/ambulatory/encounter/[id]/process.vue
new file mode 100644
index 00000000..cf905f9f
--- /dev/null
+++ b/app/pages/(features)/ambulatory/encounter/[id]/process.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Pubs
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+// AppS
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/ambulatory'
+import Content from '~/components/content/encounter/process.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|miw', 'emp|nut', 'emp|lab', 'emp|pha', 'emp|thr'],
+  title: 'Proses Kunjungan',
+  contentFrame: 'cf-full-width',
+  contentPadding: 'p-0',
+  contentUseCard: false
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/ambulatory/encounter/[id]/process'] || {}
+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)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content class-code="ambulatory" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/add.vue b/app/pages/(features)/ambulatory/encounter/add.vue
similarity index 53%
rename from app/pages/(features)/outpatient/encounter/add.vue
rename to app/pages/(features)/ambulatory/encounter/add.vue
index 948b16c6..0831723f 100644
--- a/app/pages/(features)/outpatient/encounter/add.vue
+++ b/app/pages/(features)/ambulatory/encounter/add.vue
@@ -1,41 +1,43 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/ambulatory'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/entry.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   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()
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/ambulatory/encounter/add'] || {}
+const { checkRole, hasReadAccess, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
 // Define permission-based computed properties
 const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry
+    <Content
       :id="0"
       class-code="ambulatory"
       sub-class-code="reg"
diff --git a/app/pages/(features)/ambulatory/encounter/index.vue b/app/pages/(features)/ambulatory/encounter/index.vue
new file mode 100644
index 00000000..99f3db06
--- /dev/null
+++ b/app/pages/(features)/ambulatory/encounter/index.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// Pubs
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+// Models & Consts
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/ambulatory'
+
+// Apps
+import Content from '~/components/content/encounter/list.vue'
+
+// Page meta
+definePageMeta({
+  // middleware: ['rbac'],
+  // roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Define common things
+const route = useRoute()
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions[route.path] || {}
+const { checkRole, hasCreateAccess, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+const canRead = hasReadAccess(roleAccess)
+if (!hasAccess || !canRead) {
+  navigateTo('/403')
+}
+const canCreate = hasCreateAccess(roleAccess)
+
+// Page needs
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// User info
+const { user } = useUserStore()
+const subClassCode = user.unit_code == 'rehab' ? 'rehab' : 'reg'
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <Content
+        class-code="ambulatory"
+        :sub-class-code="subClassCode"
+        :can-create="canCreate"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/children-action/thalasemia/index.vue b/app/pages/(features)/ambulatory/registration-queue/index.vue
similarity index 100%
rename from app/pages/(features)/children-action/thalasemia/index.vue
rename to app/pages/(features)/ambulatory/registration-queue/index.vue
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue b/app/pages/(features)/chemotherapy/[mode]/[id]/verification.vue
similarity index 100%
rename from app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
rename to app/pages/(features)/chemotherapy/[mode]/[id]/verification.vue
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue b/app/pages/(features)/chemotherapy/[mode]/index.vue
similarity index 100%
rename from app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
rename to app/pages/(features)/chemotherapy/[mode]/index.vue
diff --git a/app/pages/(features)/chemotherapy/encounter/[id]/detail.vue b/app/pages/(features)/chemotherapy/encounter/[id]/detail.vue
new file mode 100644
index 00000000..534f49b3
--- /dev/null
+++ b/app/pages/(features)/chemotherapy/encounter/[id]/detail.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/detail.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Detail Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = 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)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/chemotherapy/encounter/[id]/process.vue b/app/pages/(features)/chemotherapy/encounter/[id]/process.vue
new file mode 100644
index 00000000..030440e2
--- /dev/null
+++ b/app/pages/(features)/chemotherapy/encounter/[id]/process.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/process-next.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = 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)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content class-code="ambulatory" sub-class-code="chemo" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/encounter/add.vue b/app/pages/(features)/chemotherapy/encounter/add.vue
similarity index 51%
rename from app/pages/(features)/rehab/encounter/add.vue
rename to app/pages/(features)/chemotherapy/encounter/add.vue
index fe7dd98c..438f0773 100644
--- a/app/pages/(features)/rehab/encounter/add.vue
+++ b/app/pages/(features)/chemotherapy/encounter/add.vue
@@ -1,44 +1,46 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/entry.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   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['/rehab/encounter']
-
-const { checkRole, hasCreateAccess } = useRBAC()
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
 // Define permission-based computed properties
 const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry
+    <Content
       :id="0"
       class-code="ambulatory"
-      sub-class-code="rehab"
+      sub-class-code="chemo"
       form-type="Tambah"
     />
   </div>
diff --git a/app/pages/(features)/outpatient/encounter/index.vue b/app/pages/(features)/chemotherapy/encounter/index.vue
similarity index 62%
rename from app/pages/(features)/outpatient/encounter/index.vue
rename to app/pages/(features)/chemotherapy/encounter/index.vue
index 1e679c5d..4a8c9360 100644
--- a/app/pages/(features)/outpatient/encounter/index.vue
+++ b/app/pages/(features)/chemotherapy/encounter/index.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/list.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/outpatient/encounter']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,14 +24,20 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList
+      <Content
         class-code="ambulatory"
-        sub-class-code="reg"
+        sub-class-code="chemo"
         type="encounter"
       />
     </div>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/index.vue b/app/pages/(features)/chemotherapy/index.vue
similarity index 100%
rename from app/pages/(features)/outpation-action/chemotherapy/index.vue
rename to app/pages/(features)/chemotherapy/index.vue
diff --git a/app/pages/(features)/rehab/registration/index.vue b/app/pages/(features)/chemotherapy/list.vue
similarity index 72%
rename from app/pages/(features)/rehab/registration/index.vue
rename to app/pages/(features)/chemotherapy/list.vue
index 5b4fbfb8..34093b2d 100644
--- a/app/pages/(features)/rehab/registration/index.vue
+++ b/app/pages/(features)/chemotherapy/list.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/chemoteraphy'
 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: 'Pendaftaran',
+  title: 'Daftar Kempterapi',
   contentFrame: 'cf-full-width',
 })
 
@@ -16,7 +16,7 @@ useHead({
   title: () => route.meta.title as string,
 })
 
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+const roleAccess: Record<string, Permission[]> = permissions['/chemotherapy'] || {}
 
 const { checkRole, hasReadAccess } = useRBAC()
 
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList type="registration" />
+      <ContentChemotherapyList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/doctor/add.vue b/app/pages/(features)/doctor/add.vue
deleted file mode 100644
index a76811de..00000000
--- a/app/pages/(features)/doctor/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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 Dokter',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
-
-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">
-    <ContentDoctorAdd />
-  </div>
-  <Error v-else :status-code="403" />
-</template>
diff --git a/app/pages/(features)/outpatient/consultation/index.vue b/app/pages/(features)/echocardiography/index.vue
similarity index 100%
rename from app/pages/(features)/outpatient/consultation/index.vue
rename to app/pages/(features)/echocardiography/index.vue
diff --git a/app/pages/(features)/emergency/encounter/[id]/detail.vue b/app/pages/(features)/emergency/encounter/[id]/detail.vue
new file mode 100644
index 00000000..77babf09
--- /dev/null
+++ b/app/pages/(features)/emergency/encounter/[id]/detail.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/emergency'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/detail.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Detail Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = 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)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/emergency/encounter/[id]/process.vue
similarity index 53%
rename from app/pages/(features)/patient/index.vue
rename to app/pages/(features)/emergency/encounter/[id]/process.vue
index 1877289e..7143d512 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/app/pages/(features)/emergency/encounter/[id]/process.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/emergency'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import Content from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Pasien',
+  title: 'Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/emergency/encounter'] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,13 +23,17 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentPatientList />
-    </div>
-    <Error v-else :status-code="403" />
+  <div v-if="canRead">
+    <Content class-code="emergency" sub-class-code="emg" />
   </div>
-</template>
+  <Error v-else :status-code="403" />
+</template>
\ No newline at end of file
diff --git a/app/pages/(features)/emergency/encounter/add.vue b/app/pages/(features)/emergency/encounter/add.vue
index aa382643..d3ac86b7 100644
--- a/app/pages/(features)/emergency/encounter/add.vue
+++ b/app/pages/(features)/emergency/encounter/add.vue
@@ -1,44 +1,46 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/ambulatory'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/entry.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   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()
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
 // Define permission-based computed properties
 const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry
+    <Content
       :id="0"
       class-code="emergency"
-      sub-class-code="emg"
+      sub-class-code="reg"
       form-type="Tambah"
     />
   </div>
diff --git a/app/pages/(features)/emergency/encounter/index.vue b/app/pages/(features)/emergency/encounter/index.vue
index ed05c25e..bc83f3f2 100644
--- a/app/pages/(features)/emergency/encounter/index.vue
+++ b/app/pages/(features)/emergency/encounter/index.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/emergency'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/list.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
+// Preps role checking
 const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/emergency/encounter']
-
+const roleAccess: Record<string, Permission[]> = permissions[route.path] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,14 +25,22 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const { user } = useUserStore()
+const subClassCode = user.unit_code == 'rehab' ? 'rehab' : 'reg'
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList
+      <Content
         class-code="emergency"
-        sub-class-code="emg"
+        :sub-class-code="subClassCode"
         type="encounter"
       />
     </div>
diff --git a/app/pages/(features)/outpatient/polyclinic-queue/index.vue b/app/pages/(features)/hemophilia/index.vue
similarity index 100%
rename from app/pages/(features)/outpatient/polyclinic-queue/index.vue
rename to app/pages/(features)/hemophilia/index.vue
diff --git a/app/pages/(features)/human-src/employee/[id]/edit.vue b/app/pages/(features)/human-src/employee/[id]/edit.vue
new file mode 100644
index 00000000..00d68602
--- /dev/null
+++ b/app/pages/(features)/human-src/employee/[id]/edit.vue
@@ -0,0 +1,3 @@
+<template>
+
+</template>
diff --git a/app/pages/(features)/human-src/employee/[id]/index.vue b/app/pages/(features)/human-src/employee/[id]/index.vue
new file mode 100644
index 00000000..00d68602
--- /dev/null
+++ b/app/pages/(features)/human-src/employee/[id]/index.vue
@@ -0,0 +1,3 @@
+<template>
+
+</template>
diff --git a/app/pages/(features)/human-src/specialist-intern/add.vue b/app/pages/(features)/human-src/intern/add.vue
similarity index 100%
rename from app/pages/(features)/human-src/specialist-intern/add.vue
rename to app/pages/(features)/human-src/intern/add.vue
diff --git a/app/pages/(features)/human-src/specialist-intern/index.vue b/app/pages/(features)/human-src/intern/index.vue
similarity index 100%
rename from app/pages/(features)/human-src/specialist-intern/index.vue
rename to app/pages/(features)/human-src/intern/index.vue
diff --git a/app/pages/(features)/service-src/bed/index.vue b/app/pages/(features)/infra-src/bed/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/bed/index.vue
rename to app/pages/(features)/infra-src/bed/index.vue
diff --git a/app/pages/(features)/service-src/building/index.vue b/app/pages/(features)/infra-src/building/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/building/index.vue
rename to app/pages/(features)/infra-src/building/index.vue
diff --git a/app/pages/(features)/service-src/chamber/index.vue b/app/pages/(features)/infra-src/chamber/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/chamber/index.vue
rename to app/pages/(features)/infra-src/chamber/index.vue
diff --git a/app/pages/(features)/service-src/counter/index.vue b/app/pages/(features)/infra-src/counter/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/counter/index.vue
rename to app/pages/(features)/infra-src/counter/index.vue
diff --git a/app/pages/(features)/service-src/floor/index.vue b/app/pages/(features)/infra-src/floor/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/floor/index.vue
rename to app/pages/(features)/infra-src/floor/index.vue
diff --git a/app/pages/(features)/service-src/public-screen/index.vue b/app/pages/(features)/infra-src/public-screen/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/public-screen/index.vue
rename to app/pages/(features)/infra-src/public-screen/index.vue
diff --git a/app/pages/(features)/service-src/room/index.vue b/app/pages/(features)/infra-src/room/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/room/index.vue
rename to app/pages/(features)/infra-src/room/index.vue
diff --git a/app/pages/(features)/service-src/warehouse/index.vue b/app/pages/(features)/infra-src/warehouse/index.vue
similarity index 100%
rename from app/pages/(features)/service-src/warehouse/index.vue
rename to app/pages/(features)/infra-src/warehouse/index.vue
diff --git a/app/pages/(features)/inpatient/encounter/[id]/detail.vue b/app/pages/(features)/inpatient/encounter/[id]/detail.vue
new file mode 100644
index 00000000..45751701
--- /dev/null
+++ b/app/pages/(features)/inpatient/encounter/[id]/detail.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/inpatient'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/detail.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Detail Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = 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)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/doctor/index.vue b/app/pages/(features)/inpatient/encounter/[id]/process.vue
similarity index 54%
rename from app/pages/(features)/doctor/index.vue
rename to app/pages/(features)/inpatient/encounter/[id]/process.vue
index 078df778..0a3fbe72 100644
--- a/app/pages/(features)/doctor/index.vue
+++ b/app/pages/(features)/inpatient/encounter/[id]/process.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/inpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import Content from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Dokter',
+  title: 'Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/inpatient/encounter'] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,13 +23,17 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentDoctorList />
-    </div>
-    <Error v-else :status-code="403" />
+  <div v-if="canRead">
+    <Content class-code="inpatient" sub-class-code="vk" />
   </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
index bd827f79..e2812253 100644
--- a/app/pages/(features)/inpatient/encounter/add.vue
+++ b/app/pages/(features)/inpatient/encounter/add.vue
@@ -1,44 +1,46 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/ambulatory'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/entry.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   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()
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
 // Define permission-based computed properties
 const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry
+    <Content
       :id="0"
-      class-code="inpatient"
-      sub-class-code="icu"
+      class-code="ambulatory"
+      sub-class-code="reg"
       form-type="Tambah"
     />
   </div>
diff --git a/app/pages/(features)/inpatient/encounter/index.vue b/app/pages/(features)/inpatient/encounter/index.vue
index 7c9d1ac5..ad73d029 100644
--- a/app/pages/(features)/inpatient/encounter/index.vue
+++ b/app/pages/(features)/inpatient/encounter/index.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/inpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/list.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/inpatient/encounter']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/inpatient/encounter'] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,14 +24,24 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const { user } = useUserStore()
+const subClassCode = user.unit_code == 'rehab' ? 'rehab' : 'reg'
+
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList
+      <Content
         class-code="inpatient"
-        sub-class-code="vk"
+        :sub-class-code="subClassCode"
         type="encounter"
       />
     </div>
diff --git a/app/pages/(features)/integration/bpjs/control-letter/index.vue b/app/pages/(features)/integration/bpjs-vclaim/control-letter/index.vue
similarity index 100%
rename from app/pages/(features)/integration/bpjs/control-letter/index.vue
rename to app/pages/(features)/integration/bpjs-vclaim/control-letter/index.vue
diff --git a/app/pages/(features)/integration/bpjs/sep/add.vue b/app/pages/(features)/integration/bpjs-vclaim/sep/add.vue
similarity index 100%
rename from app/pages/(features)/integration/bpjs/sep/add.vue
rename to app/pages/(features)/integration/bpjs-vclaim/sep/add.vue
diff --git a/app/pages/(features)/integration/bpjs/sep/index.vue b/app/pages/(features)/integration/bpjs-vclaim/sep/index.vue
similarity index 100%
rename from app/pages/(features)/integration/bpjs/sep/index.vue
rename to app/pages/(features)/integration/bpjs-vclaim/sep/index.vue
diff --git a/app/pages/(features)/org-src/division/[id]/index.vue b/app/pages/(features)/org-src/division/[id]/index.vue
index 658652d9..238d90e0 100644
--- a/app/pages/(features)/org-src/division/[id]/index.vue
+++ b/app/pages/(features)/org-src/division/[id]/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentDivisionDetail :division-id="Number(route.params.id)" />
+    <ContentDivisionDetail :division-id="String(route.params.id)" />
   </template>
   <Error
     v-else
diff --git a/app/pages/(features)/org-src/installation/[id]/index.vue b/app/pages/(features)/org-src/installation/[id]/index.vue
index 0264dd65..5d9c3302 100644
--- a/app/pages/(features)/org-src/installation/[id]/index.vue
+++ b/app/pages/(features)/org-src/installation/[id]/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentInstallationDetail :installation-id="Number(route.params.id)" />
+    <ContentInstallationDetail :installation-id="String(route.params.id)" />
   </template>
   <Error
     v-else
diff --git a/app/pages/(features)/org-src/specialist/[id]/index.vue b/app/pages/(features)/org-src/specialist/[id]/index.vue
index c5554a71..bfac5def 100644
--- a/app/pages/(features)/org-src/specialist/[id]/index.vue
+++ b/app/pages/(features)/org-src/specialist/[id]/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentSpecialistDetail :specialist-id="Number(route.params.id)" />
+    <ContentSpecialistDetail :specialist-id="String(route.params.id)" />
   </template>
   <Error
     v-else
diff --git a/app/pages/(features)/org-src/subspecialist/[id]/index.vue b/app/pages/(features)/org-src/subspecialist/[id]/index.vue
index 7bd0b8ee..67075bd3 100644
--- a/app/pages/(features)/org-src/subspecialist/[id]/index.vue
+++ b/app/pages/(features)/org-src/subspecialist/[id]/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentSubspecialistDetail :subspecialist-id="Number(route.params.id)" />
+    <ContentSubspecialistDetail :subspecialist-id="String(route.params.id)" />
   </template>
   <Error
     v-else
diff --git a/app/pages/(features)/org-src/unit/[id]/index.vue b/app/pages/(features)/org-src/unit/[id]/index.vue
index 1230b57c..f118d9fc 100644
--- a/app/pages/(features)/org-src/unit/[id]/index.vue
+++ b/app/pages/(features)/org-src/unit/[id]/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentUnitDetail :unit-id="Number(route.params.id)" />
+    <ContentUnitDetail :unit-id="String(route.params.id)" />
   </template>
   <Error
     v-else
diff --git a/app/pages/(features)/outpatient/encounter/[id]/detail.vue b/app/pages/(features)/outpatient/encounter/[id]/detail.vue
new file mode 100644
index 00000000..534f49b3
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/[id]/detail.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/detail.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Detail Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = 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)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/patient/[id]/detail.vue b/app/pages/(features)/patient/[id]/detail.vue
deleted file mode 100644
index 33a36f0f..00000000
--- a/app/pages/(features)/patient/[id]/detail.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  roles: ['sys', 'doc'],
-})
-</script>
-
-<template>
-  <div>detail pasien</div>
-</template>
diff --git a/app/pages/(features)/patient/[id]/edit.vue b/app/pages/(features)/patient/[id]/edit.vue
deleted file mode 100644
index 2b7e8a31..00000000
--- a/app/pages/(features)/patient/[id]/edit.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  roles: ['sys', 'doc'],
-})
-</script>
-
-<template>
-  <div>edit pasien</div>
-</template>
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
deleted file mode 100644
index 412c2b3e..00000000
--- a/app/pages/(features)/patient/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah Pasien',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-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">
-    <ContentPatientAdd />
-  </div>
-  <Error v-else :status-code="403" />
-</template>
diff --git a/app/pages/(features)/rehab/encounter-queue/index.vue b/app/pages/(features)/rehab/encounter-queue/index.vue
deleted file mode 100644
index 8616dd19..00000000
--- a/app/pages/(features)/rehab/encounter-queue/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Examination Queue</div>
-</template>
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
deleted file mode 100644
index cc5d182f..00000000
--- a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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
deleted file mode 100644
index 612315ad..00000000
--- a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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
deleted file mode 100644
index 1070a29f..00000000
--- a/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<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
deleted file mode 100644
index 02dc5428..00000000
--- a/app/pages/(features)/rehab/encounter/[id]/edit.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<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['/rehab/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="rehab"
-      form-type="Edit"
-    />
-  </div>
-  <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 abd0efa7..9708adfd 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -2,6 +2,7 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
@@ -18,7 +19,7 @@ useHead({
 
 const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
 
-const { checkRole, hasCreateAccess } = useRBAC()
+const { checkRole, hasCreateAccess, getPagePermissions } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
@@ -30,12 +31,12 @@ const hasAccess = checkRole(roleAccess)
 // }
 
 // Define permission-based computed properties
-const canCreate = true // hasCreateAccess(roleAccess)
+const pagePermission = getPagePermissions(roleAccess)
 </script>
 
 <template>
-  <div v-if="canCreate">
-    <ContentEncounterProcess />
+    <div v-if="pagePermission.canRead">
+    <EncounterProcess class-code="ambulatory" sub-class-code="rehab" />
   </div>
   <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
deleted file mode 100644
index f50ad954..00000000
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<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: ['system', 'emp-doc', 'emp-nur', 'emp-reg', 'emp-pha', 'emp-pay', 'emp-mng'],
-  title: 'Daftar Kunjungan',
-  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">
-      <ContentEncounterList
-        class-code="ambulatory"
-        sub-class-code="rehab"
-        type="encounter"
-      />
-    </div>
-    <Error
-      v-else
-      :status-code="403"
-    />
-  </div>
-</template>
diff --git a/app/pages/(features)/rehab/registration-queue/index.vue b/app/pages/(features)/rehab/registration-queue/index.vue
deleted file mode 100644
index d06e73ad..00000000
--- a/app/pages/(features)/rehab/registration-queue/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <FlowRehabRegistrationHome />
-</template>
diff --git a/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue b/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
deleted file mode 100644
index 6a45818c..00000000
--- a/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { PagePermission } from '~/models/role'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah SEP Prosedur',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
-
-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">
-    <ContentDoctorAdd />
-  </div>
-  <PubMyUiError v-else :status-code="403" />
-</template>
diff --git a/app/pages/(features)/rehab/registration/[id]/detail.vue b/app/pages/(features)/rehab/registration/[id]/detail.vue
deleted file mode 100644
index 77c30c00..00000000
--- a/app/pages/(features)/rehab/registration/[id]/detail.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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['/rehab/registration']
-
-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="1" form-type="Detail" />
-  </div>
-  <Error v-else :status-code="403" />
-</template>
diff --git a/app/pages/(features)/rehab/registration/[id]/edit.vue b/app/pages/(features)/rehab/registration/[id]/edit.vue
deleted file mode 100644
index c6af01a9..00000000
--- a/app/pages/(features)/rehab/registration/[id]/edit.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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['/rehab/registration']
-
-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="1" form-type="Edit" />
-  </div>
-  <Error v-else :status-code="403" />
-</template>
diff --git a/app/pages/(features)/rehab/registration/add.vue b/app/pages/(features)/rehab/registration/add.vue
deleted file mode 100644
index 87053270..00000000
--- a/app/pages/(features)/rehab/registration/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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['/rehab/registration']
-
-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>
-  <template v-if="canCreate">
-    <ContentEncounterEntry form-type="Tambah" />
-  </template>
-  <Error v-else :status-code="403" />
-</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/detail.vue b/app/pages/(features)/resume/add.vue
similarity index 77%
rename from app/pages/(features)/rehab/encounter/[id]/detail.vue
rename to app/pages/(features)/resume/add.vue
index e3d45895..7cc707f9 100644
--- a/app/pages/(features)/rehab/encounter/[id]/detail.vue
+++ b/app/pages/(features)/resume/add.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: 'Resume',
   contentFrame: 'cf-full-width',
 })
 
@@ -22,20 +22,20 @@ 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>
   <div v-if="canCreate">
-    <ContentEncounterEntry :id="1" form-type="Detail" />
+    <ContentResumeAdd />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/outpatient/registration-queue/index.vue b/app/pages/(features)/spirometry/index.vue
similarity index 100%
rename from app/pages/(features)/outpatient/registration-queue/index.vue
rename to app/pages/(features)/spirometry/index.vue
diff --git a/app/pages/(features)/outpation-action/hemophilia/index.vue b/app/pages/(features)/thalasemia/index.vue
similarity index 100%
rename from app/pages/(features)/outpation-action/hemophilia/index.vue
rename to app/pages/(features)/thalasemia/index.vue
diff --git a/app/pages/(features)/outpation-action/chemotherapy/list.vue b/app/pages/(features)/tools-equipment-src/medicine-form/index.vue
similarity index 75%
rename from app/pages/(features)/outpation-action/chemotherapy/list.vue
rename to app/pages/(features)/tools-equipment-src/medicine-form/index.vue
index a141baaa..120df6ea 100644
--- a/app/pages/(features)/outpation-action/chemotherapy/list.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine-form/index.vue
@@ -6,8 +6,8 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Kempterapi',
-  contentFrame: 'cf-full-width',
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-container-lg',
 })
 
 const route = useRoute()
@@ -22,19 +22,17 @@ 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)
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentChemotherapyList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentMedicineFormList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/index.vue b/app/pages/(features)/tools-equipment-src/medicine/index.vue
index 2be85f63..25e5105e 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -5,7 +5,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: [],
   title: 'Daftar Dokter',
   contentFrame: 'cf-full-width',
 })
@@ -16,18 +16,18 @@ useHead({
   title: () => route.meta.title as string,
 })
 
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/tools-equipment-src/medicine']!
 
 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 = hasReadAccess(roleAccess)
+const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
diff --git a/app/schemas/_generate-file.ts b/app/schemas/_generate-file.ts
new file mode 100644
index 00000000..0e0b05fc
--- /dev/null
+++ b/app/schemas/_generate-file.ts
@@ -0,0 +1,5 @@
+export interface GenerateFile {
+  entityType_code: string
+  ref_id: number
+  type_code: string
+}
diff --git a/app/schemas/division-position.schema.ts b/app/schemas/division-position.schema.ts
index 65906f61..dca75129 100644
--- a/app/schemas/division-position.schema.ts
+++ b/app/schemas/division-position.schema.ts
@@ -5,7 +5,7 @@ const DivisionPositionSchema = 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(),
-  division_id: z.union([
+  division_code: z.union([
     z.string({ required_error: 'Divisi Induk harus diisi' }),
     z.number({ required_error: 'Divisi Induk harus diisi' })
   ]).optional().nullable(),
diff --git a/app/schemas/division.schema.ts b/app/schemas/division.schema.ts
index fae5afca..f8fcab6e 100644
--- a/app/schemas/division.schema.ts
+++ b/app/schemas/division.schema.ts
@@ -4,7 +4,7 @@ import type { Division } from '~/models/division'
 const DivisionSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
-  parent_id: z.union([
+  parent_code: z.union([
     z.string({ required_error: 'Divisi Induk harus diisi' }),
     z.number({ required_error: 'Divisi Induk harus diisi' })
   ]).optional().nullable(),
diff --git a/app/schemas/document-upload.schema.ts b/app/schemas/document-upload.schema.ts
new file mode 100644
index 00000000..305ec16c
--- /dev/null
+++ b/app/schemas/document-upload.schema.ts
@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+const MAX_SIZE_BYTES = 1 * 1024 * 1024 // 1MB
+
+const DocumentUploadSchema = z.object({
+  entityType_code: z.string().default('encounter'),
+  ref_id: z.number(),
+  upload_employee_id: z.number().optional(),
+  // upload_employee_id: z.number(),
+  name: z.string({    required_error: 'Mohon isi',  }),
+  type_code: z.string({    required_error: 'Mohon isi',  }),
+  content: z.custom<File>()
+          .refine((f) => f, { message: 'File tidak boleh kosong' })
+          .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 <= MAX_SIZE_BYTES, { message: 'Maksimal 1MB' }),
+})
+
+type DocumentUploadFormData = z.infer<typeof DocumentUploadSchema>
+
+export { DocumentUploadSchema }
+export type { DocumentUploadFormData }
diff --git a/app/schemas/general-consent.schema.ts b/app/schemas/general-consent.schema.ts
new file mode 100644
index 00000000..e06c7240
--- /dev/null
+++ b/app/schemas/general-consent.schema.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import type { CreateDto } from '~/models/general-consent'
+
+const GeneralConsentSchema = z.object({
+  relatives: z.array(z.object({ name: z.string(), phone: z.string() })),
+  responsibleName: z.string().optional(),
+  responsiblePhone: z.string().optional(),
+  informant: z.string().optional(),
+  witness1: z.string().optional(),
+  witness2: z.string().optional(),
+})
+
+type GeneralConsentFormData = z.infer<typeof GeneralConsentSchema> & CreateDto
+
+export { GeneralConsentSchema }
+export type { GeneralConsentFormData }
diff --git a/app/schemas/installation-position.schema.ts b/app/schemas/installation-position.schema.ts
index 5990fc6c..c869b361 100644
--- a/app/schemas/installation-position.schema.ts
+++ b/app/schemas/installation-position.schema.ts
@@ -5,7 +5,7 @@ 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([
+  installation_code: z.union([
     z.string({ required_error: 'Instalasi Induk harus diisi' }),
     z.number({ required_error: 'Instalasi Induk harus diisi' }),
   ]),
diff --git a/app/schemas/integration-bpjs.schema.ts b/app/schemas/integration-bpjs.schema.ts
index 47206edf..452735f7 100644
--- a/app/schemas/integration-bpjs.schema.ts
+++ b/app/schemas/integration-bpjs.schema.ts
@@ -78,7 +78,7 @@ const IntegrationBpjsSchema = z
       .optional(),
     destinationClinic: z
       .string({ required_error: ERROR_MESSAGES.required.destinationClinic })
-      .min(1, ERROR_MESSAGES.required.destinationClinic),
+      .min(1, ERROR_MESSAGES.required.destinationClinic).optional(),
     attendingDoctor: z
       .string({ required_error: ERROR_MESSAGES.required.attendingDoctor })
       .min(1, ERROR_MESSAGES.required.attendingDoctor),
@@ -89,7 +89,7 @@ const IntegrationBpjsSchema = z
     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),
+      .min(1, ERROR_MESSAGES.required.clinicExcecutive).optional(),
     subSpecialistId: z
       .string({ required_error: ERROR_MESSAGES.required.subSpecialistId })
       .min(1, ERROR_MESSAGES.required.subSpecialistId)
diff --git a/app/schemas/medicine.schema.ts b/app/schemas/medicine.schema.ts
index 44113777..6443be36 100644
--- a/app/schemas/medicine.schema.ts
+++ b/app/schemas/medicine.schema.ts
@@ -5,6 +5,7 @@ export const MedicineSchema = z.object({
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimal 1 karakter'),
   medicineGroup_code: z.string({ required_error: 'Kelompok obat harus diisi' }).min(1, 'Kelompok obat harus diisi'),
   medicineMethod_code: z.string({ required_error: 'Metode pemberian harus diisi' }).min(1, 'Metode pemberian harus diisi'),
+  medicineForm_code: z.string({ required_error: 'Sediaan Obat harus diisi' }).min(1, 'Sediaan Obat harus diisi'),
   uom_code: z.string({ required_error: 'Satuan harus diisi' }).min(1, 'Satuan harus diisi'),
   infra_id: z.number().nullable().optional(),
   stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' }).min(1, 'Stok harus lebih besar dari 0')),
diff --git a/app/schemas/resume.schema.ts b/app/schemas/resume.schema.ts
new file mode 100644
index 00000000..3e466a33
--- /dev/null
+++ b/app/schemas/resume.schema.ts
@@ -0,0 +1,76 @@
+import { z } from 'zod'
+import type { CreateDto } from '~/models/consultation'
+
+export type ResumeArrangementType = "krs" | "mrs" | "rujukInternal" | "rujukExternal" | "meninggal" | "other"
+
+const SecondaryDiagnosisSchema = z.object({  
+  diagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
+  icd10: z.string({ required_error: 'ICD 10 harus diisi' }),
+  diagnosisBasis: z.string({ required_error: 'Dasar Diagnosis harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+})
+
+const SecondaryActionSchema = z.object({
+  action: z.string({ required_error: 'Action harus diisi' }),
+  icd9: z.string({ required_error: 'ICD 10 harus diisi' }),
+  actionBasis: z.string({ required_error: 'Dasar Action harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+})
+
+const ConsultationSchema = z.object({
+  consultation: z.string({ required_error: 'Consultation harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+  consultationReply: z.string({ required_error: 'Jawaban Consultation harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+})
+
+const ResumeSchema = z.object({
+  inDate: z.string({ required_error: 'Tanggal harus diisi' }),
+  outDate: z.string({ required_error: 'Tanggal harus diisi' }),
+  anamnesis: z.number({ required_error: 'Anamnesis harus diisi' })
+    .min(1, 'Anamnesis minimum 1 karakter')
+    .max(2048, 'Anamnesis maksimum 2048 karakter'),
+  physicalCheckup: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+  supplementCheckup: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+
+  primaryDiagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
+  secondaryDiagnosis: z.array(SecondaryDiagnosisSchema).optional(),
+
+  primaryOperativeNonOperativeAct: z.string({ required_error: 'Diagnosis harus diisi' }),
+  secondaryOperativeNonOperativeAct: z.array(SecondaryActionSchema).optional(),
+  medikamentosa: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+
+  consultation: z.array(ConsultationSchema).optional(),
+
+  arrangement: z.custom<ResumeArrangementType>().default("krs"),
+  inpatientIndication: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+  faskes: z.string({ required_error: 'Faskes harus diisi' }).optional(),
+  clinic: z.string({ required_error: 'Klinik harus diisi' }).optional(),
+  deathDate: z.string({ required_error: 'Tanggal harus diisi' }).optional(),
+  deathCause: z.array(z.string()).optional().default([]),
+  deathCauseDescription: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter')
+    .optional(),
+  keterangan: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter')
+    .optional(),
+})
+
+type ResumeFormData = z.infer<typeof ResumeSchema> & (CreateDto)
+
+export { ResumeSchema }
+export type { ResumeFormData }
diff --git a/app/schemas/soapi.schema.ts b/app/schemas/soapi.schema.ts
index 50ade93e..2f5f8667 100644
--- a/app/schemas/soapi.schema.ts
+++ b/app/schemas/soapi.schema.ts
@@ -179,6 +179,14 @@ const InstructionSchema = z.object({
   other: z.string().default(''),
 })
 
+export const CprjSoapiSchema = z.object({
+  subjective: z.string().default(''),
+  objective: z.string().default(''),
+  assesment: z.string().default(''),
+  plan: z.string().default(''),
+  review: z.string().default(''),
+})
+
 export const SoapSchema = z.object({
   subject: SubjectSchema,
   object: ObjectSchema,
diff --git a/app/schemas/specialist-position.schema.ts b/app/schemas/specialist-position.schema.ts
index 7aacef37..3e8010bb 100644
--- a/app/schemas/specialist-position.schema.ts
+++ b/app/schemas/specialist-position.schema.ts
@@ -5,7 +5,7 @@ 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
+  specialist_code: z
     .union([
       z.string({ required_error: 'Spesialis harus diisi' }),
       z.number({ required_error: 'Spesialis harus diisi' }),
diff --git a/app/schemas/specialist.schema.ts b/app/schemas/specialist.schema.ts
index 1c536bef..c9e39285 100644
--- a/app/schemas/specialist.schema.ts
+++ b/app/schemas/specialist.schema.ts
@@ -4,7 +4,7 @@ import type { Specialist } from '~/models/specialist'
 const SpecialistSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
-  unit_id: z
+  unit_code: z
     .union([z.string({ required_error: 'Unit harus diisi' }), z.number({ required_error: 'Unit harus diisi' })])
     .optional()
     .nullable(),
diff --git a/app/schemas/subspecialist-position.schema.ts b/app/schemas/subspecialist-position.schema.ts
index 7f458e7b..d191ad9a 100644
--- a/app/schemas/subspecialist-position.schema.ts
+++ b/app/schemas/subspecialist-position.schema.ts
@@ -5,7 +5,7 @@ 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
+  subspecialist_code: z
     .union([
       z.string({ required_error: 'Spesialis harus diisi' }),
       z.number({ required_error: 'Spesialis harus diisi' }),
diff --git a/app/schemas/subspecialist.schema.ts b/app/schemas/subspecialist.schema.ts
index e4b3ec77..a4a6c0b8 100644
--- a/app/schemas/subspecialist.schema.ts
+++ b/app/schemas/subspecialist.schema.ts
@@ -4,7 +4,7 @@ import type { Subspecialist } from '~/models/subspecialist'
 const SubspecialistSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
-  specialist_id: z
+  specialist_code: z
     .union([
       z.string({ required_error: 'Spesialis harus diisi' }),
       z.number({ required_error: 'Spesialis harus diisi' }),
diff --git a/app/schemas/unit-position.schema.ts b/app/schemas/unit-position.schema.ts
index 2422b9a1..e170db10 100644
--- a/app/schemas/unit-position.schema.ts
+++ b/app/schemas/unit-position.schema.ts
@@ -5,7 +5,7 @@ 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
+  unit_code: z
     .union([
       z.string({ required_error: 'Unit Induk harus diisi' }),
       z.number({ required_error: 'Unit Induk harus diisi' }),
diff --git a/app/schemas/unit.schema.ts b/app/schemas/unit.schema.ts
index 83657224..75a19b39 100644
--- a/app/schemas/unit.schema.ts
+++ b/app/schemas/unit.schema.ts
@@ -4,7 +4,7 @@ import type { Unit } from '~/models/unit'
 const UnitSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
-  installation_id: z
+  installation_code: z
     .union([
       z.string({ required_error: 'Instalasi harus diisi' }),
       z.number({ required_error: 'Instalasi harus diisi' }),
diff --git a/app/schemas/verification.schema.ts b/app/schemas/verification.schema.ts
new file mode 100644
index 00000000..db0319cf
--- /dev/null
+++ b/app/schemas/verification.schema.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+const VerificationSchema = z.object({
+  name: z.string({
+    required_error: 'Mohon lengkapi Nama Anda',
+  }),
+  email: z.string({
+    required_error: 'Mohon lengkapi email',
+  }),
+  password: z.string({
+    required_error: 'Mohon lengkapi password',
+  }),
+})
+
+
+type VerificationFormData = z.infer<typeof VerificationSchema>
+
+export { VerificationSchema, }
+export type { VerificationFormData, }
\ No newline at end of file
diff --git a/app/services/_crud-base.ts b/app/services/_crud-base.ts
index e3c57689..bf3a89c5 100644
--- a/app/services/_crud-base.ts
+++ b/app/services/_crud-base.ts
@@ -74,6 +74,19 @@ export async function update(path: string, id: number | string, data: any, name:
   }
 }
 
+export async function updateCustom(path: string, data: any, name: string = 'item') {
+  try {
+    const resp = await xfetch(`${path}`, 'PATCH', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
+  }
+}
+
 export async function remove(path: string, id: number | string, name: string = 'item') {
   try {
     const resp = await xfetch(`${path}/${id}`, 'DELETE')
@@ -86,3 +99,16 @@ export async function remove(path: string, id: number | string, name: string = '
     throw new Error(`Failed to delete ${name}`)
   }
 }
+
+export async function removeCustom(path: string, data: any, name: string = 'item') {
+  try {
+    const resp = await xfetch(`${path}`, 'DELETE', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error deleting ${name}:`, error)
+    throw new Error(`Failed to delete ${name}`)
+  }
+}
\ No newline at end of file
diff --git a/app/services/device-order-item.service.ts b/app/services/device-order-item.service.ts
index 33b92b8c..b2eab0f4 100644
--- a/app/services/device-order-item.service.ts
+++ b/app/services/device-order-item.service.ts
@@ -5,7 +5,6 @@ const path = '/api/v1/device-order-item'
 const name = 'device-order-item'
 
 export function create(data: any) {
-  console.log('service create', data)
   return base.create(path, data, name)
 }
 
diff --git a/app/services/device-order.service.ts b/app/services/device-order.service.ts
index b8d5372c..cf70420d 100644
--- a/app/services/device-order.service.ts
+++ b/app/services/device-order.service.ts
@@ -13,8 +13,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) {
@@ -24,3 +24,16 @@ export function update(id: number | string, data: any) {
 export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
+
+export async function submit(id: number) {
+  try {
+    const resp = await xfetch(`${path}/${id}/submit`, 'PATCH')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
+  }
+}
\ No newline at end of file
diff --git a/app/services/division.service.ts b/app/services/division.service.ts
index e3285d34..21712599 100644
--- a/app/services/division.service.ts
+++ b/app/services/division.service.ts
@@ -28,13 +28,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: Division) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code 
+        : item.id ? Number(item.id) 
+          : item.code,
       label: item.name,
     }))
   }
@@ -46,10 +48,12 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
  * @param divisions Array of division objects from API
  * @returns TreeItem[]
  */
-export function getValueTreeItems(divisions: any[]): TreeItem[] {
+export function getValueTreeItems(divisions: any[], byCode = true): TreeItem[] {
   return divisions
     .map((division: Division) => ({
-      value: division.id ? String(division.id) : division.code,
+      value: byCode ? String(division.code) 
+        : String(division.id) ? String(division.id) 
+          : division.code,
       label: division.name,
       hasChildren: Array.isArray(division.childrens) && division.childrens.length > 0,
       children:
diff --git a/app/services/encounter.service.ts b/app/services/encounter.service.ts
index 6e42fd41..3643277a 100644
--- a/app/services/encounter.service.ts
+++ b/app/services/encounter.service.ts
@@ -28,6 +28,11 @@ export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
 
+export function cancel(id: number | string) {
+  let url = `${path}/${id}/cancel`
+  return base.updateCustom(url, null, name)
+}
+
 export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
   let data: { value: string; label: string }[] = []
   const result = await getList(params)
diff --git a/app/services/general-consent.service.ts b/app/services/general-consent.service.ts
new file mode 100644
index 00000000..2a6611fc
--- /dev/null
+++ b/app/services/general-consent.service.ts
@@ -0,0 +1,23 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/general-consent'
+
+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/generate-file.service.ts b/app/services/generate-file.service.ts
new file mode 100644
index 00000000..5849e3d0
--- /dev/null
+++ b/app/services/generate-file.service.ts
@@ -0,0 +1,15 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/generate-file'
+
+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)
+}
diff --git a/app/services/installation.service.ts b/app/services/installation.service.ts
index 1f1975f5..8cb3e266 100644
--- a/app/services/installation.service.ts
+++ b/app/services/installation.service.ts
@@ -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: Installation) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code 
+        : item.id ? Number(item.id) 
+          : item.code,
       label: item.name,
     }))
   }
diff --git a/app/services/medicine-form.service.ts b/app/services/medicine-form.service.ts
new file mode 100644
index 00000000..21874f5c
--- /dev/null
+++ b/app/services/medicine-form.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { MedicineForm } from '~/models/medicine-form'
+
+const path = '/api/v1/medicine-form'
+const name = 'medicine-form'
+
+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: MedicineForm) => ({
+      value: item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/prescription.service.ts b/app/services/prescription.service.ts
index 150357ab..7bdc9f51 100644
--- a/app/services/prescription.service.ts
+++ b/app/services/prescription.service.ts
@@ -1,4 +1,5 @@
 import * as base from './_crud-base'
+import { xfetch } from '~/composables/useXfetch'
 
 const path = '/api/v1/prescription'
 const name = 'prescription'
@@ -22,3 +23,16 @@ export function update(id: number | string, data: any) {
 export function remove(id: number | string) {
   return base.remove(path, id)
 }
+
+export async function submit(id: number) {
+  try {
+    const resp = await xfetch(`${path}/${id}/submit`, 'PATCH')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error submitting ${name}:`, error)
+    throw new Error(`Failed to submit ${name}`)
+  }
+}
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
index d4c81b5c..7786fcc2 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.service.ts
@@ -36,7 +36,7 @@ export async function getValueLabelList(params: any = null, useCodeAsValue = fal
     data = resultData.map((item: Specialist) => ({
       value: useCodeAsValue ? item.code
         : item.id ? Number(item.id) 
-          : item.id,
+          : item.code,
       label: item.name,
       parent: item.unit_id ? Number(item.unit_id) : null,
     }))
diff --git a/app/services/subspecialist.service.ts b/app/services/subspecialist.service.ts
index f13c715f..9425067b 100644
--- a/app/services/subspecialist.service.ts
+++ b/app/services/subspecialist.service.ts
@@ -33,9 +33,9 @@ export async function getValueLabelList(params: any = null, useCodeAsValue = fal
   if (result.success) {
     const resultData = result.body?.data || []
     data = resultData.map((item: Subspecialist) => ({
-      value: useCodeAsValue ? item.code
+      value: useCodeAsValue ? item.code 
         : item.id ? Number(item.id) 
-          : item.id,
+          : item.code,
       label: item.name,
       parent: item.specialist_id ? Number(item.specialist_id) : null,
     }))
diff --git a/app/services/supporting-document.service.ts b/app/services/supporting-document.service.ts
new file mode 100644
index 00000000..23f94820
--- /dev/null
+++ b/app/services/supporting-document.service.ts
@@ -0,0 +1,56 @@
+// Base
+import * as base from './_crud-base'
+
+// Constants
+import { uploadCode, type UploadCodeKey } from '~/lib/constants'
+
+const path = '/api/v1/encounter-document'
+const create_path = '/api/v1/upload-file'
+const name = 'encounter-document'
+
+export function create(data: any) {
+  return base.create(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)
+}
+
+export async function uploadAttachment(file: File, userId: number, key: UploadCodeKey) {
+  try {
+    const resolvedKey = uploadCode[key]
+    if (!resolvedKey) {
+      throw new Error(`Invalid upload code key: ${key}`)
+    }
+
+    // siapkan form-data body
+    const formData = new FormData()
+    formData.append('code', resolvedKey)
+    formData.append('content', file)
+
+    // kirim via xfetch
+    const resp = await xfetch(`${path}/${userId}/upload`, 'POST', formData)
+
+    // struktur hasil sama seperti patchPatient
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+
+    return result
+  } catch (error) {
+    console.error('Error uploading attachment:', error)
+    throw new Error('Failed to upload attachment')
+  }
+}
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
index 402504b6..948ac6b6 100644
--- a/app/services/unit.service.ts
+++ b/app/services/unit.service.ts
@@ -35,7 +35,7 @@ export async function getValueLabelList(params: any = null, useCodeAsValue = fal
     data = resultData.map((item: Unit) => ({
       value: useCodeAsValue ? item.code
         : item.id ? Number(item.id) 
-          : item.id,
+          : item.code,
       label: item.name,
     }))
   }
diff --git a/app/services/vclaim-control-letter.service.ts b/app/services/vclaim-control-letter.service.ts
index 007e91c5..2c638c2e 100644
--- a/app/services/vclaim-control-letter.service.ts
+++ b/app/services/vclaim-control-letter.service.ts
@@ -15,11 +15,11 @@ export function getList(params: any = null) {
   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}`
+  if (params?.controlDate && params.mode === 'by-schedule') {
+    url += `/jadwalDokter?jeniskontrol=${params.controlType}&kodepoli=${params.polyCode}&tanggalkontrol=${params.controlDate}`
     delete params.controlType
-    delete params.poliCode
     delete params.controlDate
+    delete params.polyCode
   }
   if (params) {
     delete params.letterNumber
diff --git a/app/services/vclaim-monitoring-visit.service.ts b/app/services/vclaim-monitoring-visit.service.ts
index 0c5da64e..6004673e 100644
--- a/app/services/vclaim-monitoring-visit.service.ts
+++ b/app/services/vclaim-monitoring-visit.service.ts
@@ -4,68 +4,16 @@ 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,
-    }
+  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)
+
+  return resp
 }
diff --git a/app/services/vclaim-sep.service.ts b/app/services/vclaim-sep.service.ts
index fdccc9c4..93224a4a 100644
--- a/app/services/vclaim-sep.service.ts
+++ b/app/services/vclaim-sep.service.ts
@@ -7,6 +7,9 @@ import type { IntegrationBpjsFormData } from '~/schemas/integration-bpjs.schema'
 const path = '/api/vclaim-swagger/sep'
 const name = 'sep'
 
+// TODO: temporary destinationClinic
+const destinationClinic = '1323R001'
+
 export function create(data: any) {
   return base.create(path, data, name)
 }
@@ -20,8 +23,19 @@ export function getList(params: any = null) {
   return base.getList(url, params, name)
 }
 
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function remove(payload: any) {
+  const url = `${path}`
+  return base.removeCustom(url, payload, name)
+}
+
 export function makeSepData(
   data: IntegrationBpjsFormData & {
+    userName: string
+    polyCode?: string
     referralFrom?: string
     referralTo?: string
     referralLetterDate?: string
@@ -31,13 +45,13 @@ export function makeSepData(
   const content = {
     noKartu: data.cardNumber || '',
     tglSep: data.sepDate,
-    ppkPelayanan: data.fromClinic || '',
-    jnsPelayanan: data.admissionType ? String(data.admissionType) : '1',
+    ppkPelayanan: destinationClinic || data.fromClinic || '',
+    jnsPelayanan: data.serviceType ? String(data.serviceType) : '2',
     noMR: data.medicalRecordNumber || '',
     catatan: data.note || '',
     diagAwal: data.initialDiagnosis || '',
     poli: {
-      tujuan: data.destinationClinic || '',
+      tujuan: data.polyCode || '',
       eksekutif: data.clinicExcecutive === 'yes' ? '1' : '0',
     },
     cob: {
@@ -46,19 +60,21 @@ export function makeSepData(
     katarak: {
       katarak: data.cataract === 'yes' ? '1' : '0',
     },
-    tujuanKunj: data.purposeOfVisit || '',
+    tujuanKunj: data.purposeOfVisit || '0',
     flagProcedure: data.procedureType || '',
     kdPenunjang: data.supportCode || '',
     assesmentPel: data.serviceAssessment || '',
     skdp: {
       noSurat: ['3'].includes(data.admissionType) ? data.referralLetterNumber : '',
-      kodeDPJP: ['3'].includes(data.admissionType)? data.attendingDoctor : '',
+      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 || '' : '',
+      // Handle referral data for admissionType !== '3'
+      // asalRujukan: 1 = Faskes 1, 2 = Faskes RS
+      asalRujukan: !['3'].includes(data.admissionType) ? data?.referralFrom || '' : '',
+      tglRujukan: !['3'].includes(data.admissionType) ? data?.referralLetterDate || '' : '',
+      noRujukan: !['3'].includes(data.admissionType) ? data?.referralLetterNumber || '' : '',
+      ppkRujukan: !['3'].includes(data.admissionType) ? data?.referralTo || '' : '',
     },
     klsRawat: {
       klsRawatHak: data.classLevel || '',
@@ -68,7 +84,7 @@ export function makeSepData(
     },
     dpjpLayan: data.attendingDoctor || '',
     noTelp: data.phoneNumber || '',
-    user: data.patientName || '',
+    user: data.userName || '',
     jaminan: {
       lakaLantas: data.trafficAccident || '0',
       noLP: data.lpNumber || '',
@@ -93,3 +109,14 @@ export function makeSepData(
     },
   }
 }
+
+export function makeSepDataForRemove(data: any) {
+  return {
+    request: {
+      t_sep: {
+        noSep: data.sepNumber,
+        user: data.userName,
+      },
+    },
+  }
+}
diff --git a/app/stores/user.ts b/app/stores/user.ts
index 97bd4665..f7fe9fb5 100644
--- a/app/stores/user.ts
+++ b/app/stores/user.ts
@@ -1,19 +1,21 @@
 export const useUserStore = defineStore(
   'user',
   () => {
+    // should be auth type
     const user = ref<any | null>(null)
     // const token = useCookie('authentication')
 
     const isAuthenticated = computed(() => !!user.value)
 
-    const userRole = computed(() => {
+    const userRoles = computed(() => {
       return user.value?.roles || []
-      // return roles.map((input: string) => {
-      //   const parts = input.split('|')
-      //   return parts.length > 1 ? parts[1]: parts[0]
-      // })
     })
 
+    const userActiveRole = ref('') // watched user failed, so create a ref here
+    // computed(() => {
+    //   // return user.value?.activeRole || ''
+    // })
+
     const login = async (userData: any) => {
       user.value = userData
     }
@@ -25,10 +27,11 @@ export const useUserStore = defineStore(
     const setActiveRole = (role: string) => {
       if (user.value && user.value.roles.includes(role)) {
         user.value.activeRole = role
+        userActiveRole.value = role
       }
     }
 
-    const getActiveRole = () => {
+    const getActiveRole = (): string | undefined => {
       if (user.value?.activeRole) {
         return user.value.activeRole
       }
@@ -36,12 +39,14 @@ export const useUserStore = defineStore(
         user.value.activeRole = user.value.roles[0]
         return user.value.activeRole
       }
+      return undefined
     }
 
     return {
       user,
       isAuthenticated,
-      userRole,
+      userRoles,
+      userActiveRole,
       login,
       logout,
       setActiveRole,
diff --git a/package.json b/package.json
index d415abde..08b0d87c 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,12 @@
     "date-fns": "^4.1.0",
     "embla-carousel": "^8.5.2",
     "embla-carousel-vue": "^8.5.2",
+    "file-saver": "^2.0.5",
     "h3": "^1.15.4",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.10.1",
@@ -36,6 +38,7 @@
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "6.14.0",
     "@pinia/nuxt": "^0.11.2",
+    "@types/file-saver": "^2.0.7",
     "@unocss/eslint-plugin": "^66.0.0",
     "@unocss/nuxt": "^66.0.0",
     "@vee-validate/zod": "^4.15.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ae777c3..565ff313 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
   embla-carousel-vue:
     specifier: ^8.5.2
     version: 8.6.0(vue@3.5.21)
+  file-saver:
+    specifier: ^2.0.5
+    version: 2.0.5
   h3:
     specifier: ^1.15.4
     version: 1.15.4
@@ -44,6 +47,9 @@ dependencies:
   tailwindcss-animate:
     specifier: ^1.0.7
     version: 1.0.7(tailwindcss@3.4.17)
+  xlsx:
+    specifier: ^0.18.5
+    version: 0.18.5
 
 devDependencies:
   '@antfu/eslint-config':
@@ -67,6 +73,9 @@ devDependencies:
   '@pinia/nuxt':
     specifier: ^0.11.2
     version: 0.11.2(pinia@3.0.3)
+  '@types/file-saver':
+    specifier: ^2.0.7
+    version: 2.0.7
   '@unocss/eslint-plugin':
     specifier: ^66.0.0
     version: 66.5.1(eslint@9.36.0)(typescript@5.9.2)
@@ -3182,6 +3191,10 @@ packages:
   /@types/estree@1.0.8:
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  /@types/file-saver@2.0.7:
+    resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==}
+    dev: true
+
   /@types/geojson@7946.0.16:
     resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
     dev: false
@@ -4588,6 +4601,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  /adler-32@1.3.1:
+    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -4796,12 +4814,12 @@ packages:
     dev: true
     optional: true
 
-  /my-ui64-js@1.5.1:
+  /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
 
-  /my-uiline-browser-mapping@2.8.6:
-    resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==}
+  /baseline-browser-mapping@2.8.29:
+    resolution: {integrity: sha512-sXdt2elaVnhpDNRDz+1BDx1JQoJRuNk7oVlAlbGiFkLikHCAQiccexF/9e91zVi6RCgqspl04aP+6Cnl9zRLrA==}
     hasBin: true
     dev: true
 
@@ -4845,7 +4863,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      baseline-browser-mapping: 2.8.6
+      baseline-browser-mapping: 2.8.29
       caniuse-lite: 1.0.30001743
       electron-to-chromium: 1.5.222
       node-releases: 2.0.21
@@ -4966,6 +4984,14 @@ packages:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
     dev: true
 
+  /cfb@1.2.2:
+    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      adler-32: 1.3.1
+      crc-32: 1.2.2
+    dev: false
+
   /chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -5084,6 +5110,11 @@ packages:
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
     dev: true
 
+  /codepage@1.15.0:
+    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -5244,7 +5275,6 @@ packages:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
     hasBin: true
-    dev: true
 
   /crc32-stream@6.0.0:
     resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
@@ -6754,6 +6784,10 @@ packages:
       flat-cache: 4.0.1
     dev: true
 
+  /file-saver@2.0.5:
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
+    dev: false
+
   /file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
     dev: true
@@ -6814,6 +6848,11 @@ packages:
     engines: {node: '>=0.4.x'}
     dev: true
 
+  /frac@1.1.2:
+    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
@@ -10219,6 +10258,13 @@ packages:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
 
+  /ssf@0.11.2:
+    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      frac: 1.1.2
+    dev: false
+
   /stable-hash-x@0.2.0:
     resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
     engines: {node: '>=12.0.0'}
@@ -11603,11 +11649,21 @@ packages:
       stackback: 0.0.2
     dev: true
 
+  /wmf@1.0.2:
+    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /word@0.3.0:
+    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -11648,6 +11704,20 @@ packages:
       is-wsl: 3.1.0
     dev: true
 
+  /xlsx@0.18.5:
+    resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+    dependencies:
+      adler-32: 1.3.1
+      cfb: 1.2.2
+      codepage: 1.15.0
+      crc-32: 1.2.2
+      ssf: 0.11.2
+      wmf: 1.0.2
+      word: 0.3.0
+    dev: false
+
   /xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
diff --git a/public/bpjs.png b/public/bpjs.png
new file mode 100644
index 00000000..781e19b0
Binary files /dev/null and b/public/bpjs.png differ
diff --git a/public/side-menu-items/emp-doc.json b/public/side-menu-items/emp-doc.json
index b7ecb430..292d8c5d 100644
--- a/public/side-menu-items/emp-doc.json
+++ b/public/side-menu-items/emp-doc.json
@@ -12,14 +12,14 @@
         "icon": "i-lucide-stethoscope",
         "children": [
           {
-            "title": "Triase",
+            "title": "Kunjungan",
             "icon": "i-lucide-stethoscope",
-            "link": "/outpatient/encounter"
+            "link": "/ambulatory/encounter"
           },
           {
             "title": "Konsultasi",
             "icon": "i-lucide-building-2",
-            "link": "/outpatient/consultation"
+            "link": "/ambulatory/consultation"
           }
         ]
       },
@@ -44,22 +44,6 @@
           }
         ]
       },
-      {
-        "title": "Rehabilitasi Medik",
-        "icon": "i-lucide-bike",
-        "children": [
-          {
-            "title": "Kunjungan",
-            "icon": "i-lucide-building-2",
-            "link": "/rehab/encounter"
-          },
-          {
-            "title": "Konsultasi",
-            "icon": "i-lucide-building-2",
-            "link": "/rehab/consultation"
-          }
-        ]
-      },
       {
         "title": "Rawat Inap",
         "icon": "i-lucide-building-2",
diff --git a/public/side-menu-items/emp-mid.json b/public/side-menu-items/emp-mid.json
index 80eeee7c..1c6e5aef 100644
--- a/public/side-menu-items/emp-mid.json
+++ b/public/side-menu-items/emp-mid.json
@@ -10,7 +10,7 @@
       {
         "title": "Rawat Jalan",
         "icon": "i-lucide-stethoscope",
-        "link": "/outpatient/encounter"
+        "link": "/ambulatory/encounter"
       },
       {
         "title": "IGD",
diff --git a/public/side-menu-items/emp-nur.json b/public/side-menu-items/emp-nur.json
index 1c993144..f940219e 100644
--- a/public/side-menu-items/emp-nur.json
+++ b/public/side-menu-items/emp-nur.json
@@ -13,11 +13,11 @@
         "children": [
           {
             "title": "Antrian Poliklinik",
-            "link": "/outpatient/encounter-queue"
+            "link": "/ambulatory/encounter-queue"
           },
           {
             "title": "Kunjungan",
-            "link": "/outpatient/encounter"
+            "link": "/ambulatory/encounter"
           }
         ]
       },
@@ -35,21 +35,6 @@
           }
         ]
       },
-      {
-        "title": "Rehabilitasi Medik",
-        "icon": "i-lucide-bike",
-        "link": "/rehab",
-        "children": [
-          {
-            "title": "Antrean Poliklinik",
-            "link": "/rehab/encounter-queue"
-          },
-          {
-            "title": "Kunjungan",
-            "link": "/rehab/encounter"
-          }
-        ]
-      },
       {
         "title": "Rawat Inap",
         "icon": "i-lucide-building-2",
@@ -63,12 +48,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/chemotherapy"
+        "link": "/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpation-action/hemophilia"
+        "link": "/hemophilia"
       }
     ]
   },
@@ -78,17 +63,17 @@
       {
         "title": "Thalasemi",
         "icon": "i-lucide-baby",
-        "link": "/children-action/thalasemia"
+        "link": "/thalasemia"
       },
       {
         "title": "Echocardiography",
         "icon": "i-lucide-baby",
-        "link": "/children-action/echocardiography"
+        "link": "/echocardiography"
       },
       {
         "title": "Spirometri",
         "icon": "i-lucide-baby",
-        "link": "/children-action/spirometry"
+        "link": "/spirometry"
       }
     ]
   }
diff --git a/public/side-menu-items/emp-nut.json b/public/side-menu-items/emp-nut.json
index ef71282a..43f3e503 100644
--- a/public/side-menu-items/emp-nut.json
+++ b/public/side-menu-items/emp-nut.json
@@ -10,7 +10,7 @@
       {
         "title": "Rawat Jalan",
         "icon": "i-lucide-stethoscope",
-        "link": "/outpatient/encounter"
+        "link": "/ambulatory/encounter"
       },
       {
         "title": "IGD",
diff --git a/public/side-menu-items/emp-reg.json b/public/side-menu-items/emp-reg.json
index 86d6d4ed..df874e65 100644
--- a/public/side-menu-items/emp-reg.json
+++ b/public/side-menu-items/emp-reg.json
@@ -13,11 +13,11 @@
         "children": [
           {
             "title": "Antrian Pendaftaran",
-            "link": "/outpatient/registration-queue"
+            "link": "/ambulatory/registration-queue"
           },
           {
             "title": "Kunjungan",
-            "link": "/outpatient/encounter"
+            "link": "/ambulatory/encounter"
           }
         ]
       },
@@ -26,21 +26,6 @@
         "icon": "i-lucide-zap",
         "link": "/emergency/encounter"
       },
-      {
-        "title": "Rehabilitasi Medik",
-        "icon": "i-lucide-bike",
-        "link": "/rehab",
-        "children": [
-          {
-            "title": "Antrean Pendaftaran",
-            "link": "/rehab/registration-queue"
-          },
-          {
-            "title": "Kunjungan",
-            "link": "/rehab/encounter"
-          }
-        ]
-      },
       {
         "title": "Rawat Inap",
         "icon": "i-lucide-building-2",
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
new file mode 100644
index 00000000..996c2a6b
--- /dev/null
+++ b/public/side-menu-items/sys.json
@@ -0,0 +1,350 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "link": "/ambulatory/registration-queue"
+          },
+          {
+            "title": "Antrian Poliklinik",
+            "link": "/ambulatory/encounter-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/ambulatory/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/ambulatory/consultation"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/emergency/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/emergency/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "children": [
+          {
+            "title": "Permintaan",
+            "link": "/inpatient/request"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/inpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/inpatient/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Obat - Order",
+        "icon": "i-lucide-briefcase-medical",
+        "children": [
+          {
+            "title": "Permintaan",
+            "link": "/medication/order"
+          },
+          {
+            "title": "Standing Order",
+            "link": "/medication/standing-order"
+          }
+        ]
+      },
+      {
+        "title": "Radiologi - Order",
+        "icon": "i-lucide-radio",
+        "link": "/radiology-order"
+      },
+      {
+        "title": "Lab - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/cp-lab-order"
+      },
+      {
+        "title": "Lab Mikro - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/micro-lab-order"
+      },
+      {
+        "title": "Lab PA - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/ap-lab-order"
+      },
+      {
+        "title": "Gizi",
+        "icon": "i-lucide-egg-fried",
+        "link": "/nutrition-order"
+      },
+      {
+        "title": "Pembayaran",
+        "icon": "i-lucide-banknote-arrow-up",
+        "link": "/payment"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Rajal",
+    "items": [
+      {
+        "title": "Kemoterapi",
+        "icon": "i-lucide-droplets",
+        "link": "/outpation-action/cemotherapy"
+      },
+      {
+        "title": "Hemofilia",
+        "icon": "i-lucide-droplet-off",
+        "link": "/outpation-action/hemophilia"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Anak",
+    "items": [
+      {
+        "title": "Thalasemi",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/thalasemia"
+      },
+      {
+        "title": "Echocardiography",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/echocardiography"
+      },
+      {
+        "title": "Spirometri",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/spirometry"
+      }
+    ]
+  },
+  {
+    "heading": "Client",
+    "items": [
+      {
+        "title": "Pasien",
+        "icon": "i-lucide-users",
+        "link": "/client/patient"
+      },
+      {
+        "title": "Rekam Medis",
+        "icon": "i-lucide-file-text",
+        "link": "/client/medical-record"
+      }
+    ]
+  },
+  {
+    "heading": "Integrasi",
+    "items": [
+      {
+        "title": "BPJS",
+        "icon": "i-lucide-circuit-board",
+        "children": [
+          {
+            "title": "SEP",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs-vclaim/sep"
+          },
+          {
+            "title": "Peserta",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs-vclaim/member"
+          },
+          {
+            "title": "Surat Kontrol",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs-vclaim/control-letter"
+          }
+        ]
+      },
+      {
+        "title": "SATUSEHAT",
+        "icon": "i-lucide-database",
+        "link": "/integration/satusehat"
+      }
+    ]
+  },
+  {
+    "heading": "Source",
+    "items": [
+      {
+        "title": "Peralatan dan Perlengkapan",
+        "icon": "i-lucide-layout-dashboard",
+        "children": [
+          {
+            "title": "Obat",
+            "link": "/tools-equipment-src/medicine"
+          },
+          {
+            "title": "Peralatan",
+            "link": "/tools-equipment-src/tools"
+          },
+          {
+            "title": "Perlengkapan (BMHP)",
+            "link": "/tools-equipment-src/equipment"
+          },
+          {
+            "title": "Metode Obat",
+            "link": "/tools-equipment-src/medicine-method"
+          },
+          {
+            "title": "Jenis Obat",
+            "link": "/tools-equipment-src/medicine-type"
+          },
+          {
+            "title": "Sediaan Obat",
+            "link": "/tools-equipment-src/medicine-form"
+          }
+        ]
+      },
+      {
+        "title": "Pengguna",
+        "icon": "i-lucide-user",
+        "children": [
+          {
+            "title": "Pegawai",
+            "link": "/human-src/employee"
+          },
+          {
+            "title": "PPDS",
+            "link": "/human-src/specialist-intern"
+          }
+        ]
+      },
+      {
+        "title": "Pemeriksaan Penunjang",
+        "icon": "i-lucide-layout-list",
+        "children": [
+          {
+            "title": "Checkup",
+            "link": "/mcu-src/mcu"
+          },
+          {
+            "title": "Prosedur",
+            "link": "/mcu-src/procedure"
+          },
+          {
+            "title": "Diagnosis",
+            "link": "/mcu-src/diagnose"
+          },
+          {
+            "title": "Medical Action",
+            "link": "/mcu-src/medical-action"
+          }
+        ]
+      },
+      {
+        "title": "Infrastruktur",
+        "icon": "i-lucide-layout-list",
+        "children": [
+          {
+            "title": "Kasur",
+            "link": "/infra-src/bed"
+          },
+          {
+            "title": "Kamar",
+            "link": "/infra-src/chamber"
+          },
+          {
+            "title": "Ruang",
+            "link": "/infra-src/room"
+          },
+          {
+            "title": "Depo",
+            "link": "/infra-src/warehouse"
+          },
+          {
+            "title": "Lantai",
+            "link": "/infra-src/floor"
+          },
+          {
+            "title": "Gedung",
+            "link": "/infra-src/building"
+          },
+          {
+            "title": "Counter",
+            "link": "/infra-src/counter"
+          },
+          {
+            "title": "Public Screen (Big Screen)",
+            "link": "/infra-src/public-screen"
+          }
+        ]
+      },
+      {
+        "title": "Organisasi",
+        "icon": "i-lucide-network",
+        "children": [
+          {
+            "title": "Divisi",
+            "link": "/org-src/division"
+          },
+          {
+            "title": "Instalasi",
+            "link": "/org-src/installation"
+          },
+          {
+            "title": "Unit",
+            "link": "/org-src/unit"
+          },
+          {
+            "title": "Spesialis",
+            "link": "/org-src/specialist"
+          },
+          {
+            "title": "Sub Spesialis",
+            "link": "/org-src/subspecialist"
+          }
+        ]
+      },
+      {
+        "title": "Umum",
+        "icon": "i-lucide-airplay",
+        "children": [
+          {
+            "title": "Uom",
+            "link": "/common/uom"
+          }
+        ]
+      },
+      {
+        "title": "Keuangan",
+        "icon": "i-lucide-airplay",
+        "children": [
+          {
+            "title": "Item & Pricing",
+            "link": "/common/item"
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/system.json b/public/side-menu-items/system.json
index 5bf62f36..c46775aa 100644
--- a/public/side-menu-items/system.json
+++ b/public/side-menu-items/system.json
@@ -13,19 +13,19 @@
         "children": [
           {
             "title": "Antrian Pendaftaran",
-            "link": "/outpatient/registration-queue"
+            "link": "/ambulatory/registration-queue"
           },
           {
             "title": "Antrian Poliklinik",
-            "link": "/outpatient/encounter-queue"
+            "link": "/ambulatory/encounter-queue"
           },
           {
             "title": "Kunjungan",
-            "link": "/outpatient/encounter"
+            "link": "/ambulatory/encounter"
           },
           {
             "title": "Konsultasi",
-            "link": "/outpatient/consultation"
+            "link": "/ambulatory/consultation"
           }
         ]
       },
@@ -193,17 +193,17 @@
           {
             "title": "SEP",
             "icon": "i-lucide-circuit-board",
-            "link": "/integration/bpjs/sep"
+            "link": "/integration/bpjs-vclaim/sep"
           },
           {
             "title": "Peserta",
             "icon": "i-lucide-circuit-board",
-            "link": "/integration/bpjs/member"
+            "link": "/integration/bpjs-vclaim/member"
           },
           {
             "title": "Surat Kontrol",
             "icon": "i-lucide-circuit-board",
-            "link": "/integration/bpjs/control-letter"
+            "link": "/integration/bpjs-vclaim/control-letter"
           }
         ]
       },
@@ -240,6 +240,10 @@
           {
             "title": "Jenis Obat",
             "link": "/tools-equipment-src/medicine-type"
+          },
+          {
+            "title": "Sediaan Obat",
+            "link": "/tools-equipment-src/medicine-form"
           }
         ]
       },
diff --git a/server/api/[...req].ts b/server/api/[...req].ts
index 5948eda6..c58bf7d6 100644
--- a/server/api/[...req].ts
+++ b/server/api/[...req].ts
@@ -1,7 +1,7 @@
 import { defineEventHandler, getCookie, getRequestHeaders, getRequestURL, readBody } from 'h3'
 
 export default defineEventHandler(async (event) => {
-  const { method } = event.node.req
+  const { method } = event.node.req as any
   const headers = getRequestHeaders(event)
   const url = getRequestURL(event)
   const config = useRuntimeConfig()
@@ -36,7 +36,7 @@ export default defineEventHandler(async (event) => {
   }
 
   let body: any
-  if (['POST', 'PATCH'].includes(method!)) {
+  if (['POST', 'PATCH', 'PUT', 'DELETE'].includes(method)) {
     if (headers['content-type']?.includes('multipart/form-data')) {
       body = await readBody(event)
     } else {