From 7ddb14accc1fa640ab5a728fb8d7d0dbc1dce38f Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Mon, 13 Oct 2025 16:38:23 +0700
Subject: [PATCH 01/40] dev: hotfix, added userQueryCRUD

---
 app/composables/useQueryCRUD.ts | 54 +++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 app/composables/useQueryCRUD.ts

diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
new file mode 100644
index 00000000..a5c532b7
--- /dev/null
+++ b/app/composables/useQueryCRUD.ts
@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryCRUDMode(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  type ModeType = 'list' | 'entry'
+  const mode = useState<ModeType>('route-query-' + key, () => 'list')
+  const modeSrc = computed<ModeType>({
+    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
+    set: (val) => {
+      mode.value = val
+      router.push({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  const goToEntry = () => {
+    modeSrc.value = 'entry'
+  }
+  const backToList = () => {
+    modeSrc.value = 'list'
+  }
+
+  return { mode, goToEntry, backToList }
+}
+
+export function useQueryCRUDRecordId(key: string = 'record-id') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const recordId = useState('route-query-' + key, () => '')
+  computed({
+    get: () => route.query[key],
+    set: (val: string) => {
+      recordId.value = val
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  return { recordId }
+}

From 39af6052e729186ae9eae74d435352c178873110 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Mon, 20 Oct 2025 11:22:54 +0700
Subject: [PATCH 02/40] feat/device-order-58: wip

---
 .../device-order-item/list-entry.config.ts    |  36 +++++
 .../app/device-order-item/list-entry.vue      |  13 ++
 .../app/device-order/entry-form.vue           |   6 +
 .../app/device-order/list.config.ts           |  42 +++++
 app/components/app/device-order/list.vue      |  35 +++++
 app/components/content/device-order/entry.vue |  37 +++++
 app/components/content/device-order/list.vue  | 145 ++++++++++++++++++
 app/components/content/device-order/main.vue  |  12 ++
 app/handlers/device-order-item.handler.ts     |  24 +++
 app/handlers/device-order.handler.ts          |  24 +++
 app/schemas/device-order.schema.ts            |  12 ++
 app/services/device-order-item.service.ts     |  26 ++++
 app/services/device-order.service.ts          |  26 ++++
 13 files changed, 438 insertions(+)
 create mode 100644 app/components/app/device-order-item/list-entry.config.ts
 create mode 100644 app/components/app/device-order-item/list-entry.vue
 create mode 100644 app/components/app/device-order/entry-form.vue
 create mode 100644 app/components/app/device-order/list.config.ts
 create mode 100644 app/components/app/device-order/list.vue
 create mode 100644 app/components/content/device-order/entry.vue
 create mode 100644 app/components/content/device-order/list.vue
 create mode 100644 app/components/content/device-order/main.vue
 create mode 100644 app/handlers/device-order-item.handler.ts
 create mode 100644 app/handlers/device-order.handler.ts
 create mode 100644 app/schemas/device-order.schema.ts
 create mode 100644 app/services/device-order-item.service.ts
 create mode 100644 app/services/device-order.service.ts

diff --git a/app/components/app/device-order-item/list-entry.config.ts b/app/components/app/device-order-item/list-entry.config.ts
new file mode 100644
index 00000000..f2f3ef86
--- /dev/null
+++ b/app/components/app/device-order-item/list-entry.config.ts
@@ -0,0 +1,36 @@
+import { defineAsyncComponent } from 'vue'
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+  headers: [[{ label: 'Nama' }, { label: 'Jumlah' }, { label: '' }]],
+  keys: ['name', 'count', 'action'],
+  delKeyNames: [
+    { key: 'name', label: 'Nama' },
+    { key: 'count', label: 'Jumlah' },
+  ],
+  skeletonSize: 10
+  // funcParsed: {
+  //   parent: (rec: unknown): unknown => {
+  //     const recX = rec as SmallDetailDto
+  //     return recX.parent?.name || '-'
+  //   },
+  // },
+  // funcComponent: {
+  //   action(rec: object, idx: any) {
+  //     const res: RecComponent = {
+  //       idx,
+  //       rec: rec as object,
+  //       component: action,
+  //       props: {
+  //         size: 'sm',
+  //       },
+  //     }
+  //     return res
+  //   },
+  // }
+}
+
diff --git a/app/components/app/device-order-item/list-entry.vue b/app/components/app/device-order-item/list-entry.vue
new file mode 100644
index 00000000..26f6691d
--- /dev/null
+++ b/app/components/app/device-order-item/list-entry.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import { config } from './list-entry.config'
+</script>
+
+<template>
+  <DataTable v-bind="config" :rows="[]" class="border mb-3 2xl:mb-4" />
+  <div>
+    <Button>
+      Tambah
+    </Button>
+  </div>
+</template>
diff --git a/app/components/app/device-order/entry-form.vue b/app/components/app/device-order/entry-form.vue
new file mode 100644
index 00000000..bea2b6eb
--- /dev/null
+++ b/app/components/app/device-order/entry-form.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    Test
+</template>
diff --git a/app/components/app/device-order/list.config.ts b/app/components/app/device-order/list.config.ts
new file mode 100644
index 00000000..7580c576
--- /dev/null
+++ b/app/components/app/device-order/list.config.ts
@@ -0,0 +1,42 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { DeviceOrder } from '~/models/device-order'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { }, { }, { width: 50 }],
+  headers: [[{ label: 'Tanggal' }, { label: 'DPJP' }, { label: 'Alat Kesehatan' }, { label: '' }]],
+  keys: ['createdAt', 'encounter.doctor.person.name', 'items', 'action'],
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+  skeletonSize: 10,
+  htmls: {
+    items: (rec: unknown): unknown => {
+      const recX = rec as DeviceOrder
+      return recX.items?.length || 0
+    },
+  }
+  // funcParsed: {
+  //   parent: (rec: unknown): unknown => {
+  //     const recX = rec as SmallDetailDto
+  //     return recX.parent?.name || '-'
+  //   },
+  // },
+  // funcComponent: {
+  //   action(rec: object, idx: any) {
+  //     const res: RecComponent = {
+  //       idx,
+  //       rec: rec as object,
+  //       component: action,
+  //       props: {
+  //         size: 'sm',
+  //       },
+  //     }
+  //     return res
+  //   },
+  // }
+}
+
diff --git a/app/components/app/device-order/list.vue b/app/components/app/device-order/list.vue
new file mode 100644
index 00000000..37b24ea3
--- /dev/null
+++ b/app/components/app/device-order/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.config'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="[]"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/device-order/entry.vue b/app/components/content/device-order/entry.vue
new file mode 100644
index 00000000..6d76d685
--- /dev/null
+++ b/app/components/content/device-order/entry.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+
+import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Tambah Order Alkes',
+  icon: 'i-lucide-box',
+}
+
+  function navClick(type: 'cancel' | 'submit') {
+    if (type === 'cancel') {
+      backToList()
+    }
+  }
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <ItemListEntry />
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/content/device-order/list.vue b/app/components/content/device-order/list.vue
new file mode 100644
index 00000000..e62a2fbd
--- /dev/null
+++ b/app/components/content/device-order/list.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/device-order/list.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+// import { useQueryMode } from '~/composables/useQueryMode'
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type DeviceOrderFormData, DeviceOrderSchema  } from '~/schemas/device-order.schema'
+import type { DeviceOrder } from "~/models/device-order";
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device-order.handler'
+
+// Services
+import { getList } from '~/services/device-order.service'
+
+const route = useRoute()
+const title = ref('')
+
+// const { mode, openForm, backToList } = useQueryMode()
+const { mode, goToEntry, backToList } = useQueryCRUDMode()
+const { recordId } = useQueryCRUDRecordId()
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'parent,childrens',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device-order',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Alkes',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: async () => {
+      recItem.value = null
+      recId.value = 0
+      isReadonly.value = false
+      // await handleActionSave(recItem, getMyList, () => {}, () => {})
+      goToEntry()
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/device-order/main.vue b/app/components/content/device-order/main.vue
new file mode 100644
index 00000000..ae5a9ca8
--- /dev/null
+++ b/app/components/content/device-order/main.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const { mode } = useQueryMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" />
+  <Entry v-else />
+</template>
diff --git a/app/handlers/device-order-item.handler.ts b/app/handlers/device-order-item.handler.ts
new file mode 100644
index 00000000..b1df996b
--- /dev/null
+++ b/app/handlers/device-order-item.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device-order-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/device-order.handler.ts b/app/handlers/device-order.handler.ts
new file mode 100644
index 00000000..b1df996b
--- /dev/null
+++ b/app/handlers/device-order.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device-order-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/schemas/device-order.schema.ts b/app/schemas/device-order.schema.ts
new file mode 100644
index 00000000..b0c2a56c
--- /dev/null
+++ b/app/schemas/device-order.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { DeviceOrder } from '~/models/device-order'
+
+const DeviceOrderSchema = z.object({
+  encounter_id: z.number({ required_error: 'Kode harus diisi' }),
+  doctor_id: z.number({ required_error: 'Kode harus diisi' }),
+})
+
+type DeviceOrderFormData = z.infer<typeof DeviceOrderSchema> & Partial<DeviceOrder>
+
+export { DeviceOrderSchema }
+export type { DeviceOrderFormData }
diff --git a/app/services/device-order-item.service.ts b/app/services/device-order-item.service.ts
new file mode 100644
index 00000000..33b92b8c
--- /dev/null
+++ b/app/services/device-order-item.service.ts
@@ -0,0 +1,26 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/device-order-item'
+const name = 'device-order-item'
+
+export function create(data: any) {
+  console.log('service create', data)
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/device-order.service.ts b/app/services/device-order.service.ts
new file mode 100644
index 00000000..b8d5372c
--- /dev/null
+++ b/app/services/device-order.service.ts
@@ -0,0 +1,26 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/device-order'
+const name = 'device-order'
+
+export function create(data: any) {
+  console.log('service create', data)
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}

From 7f3fe813c547c6fdc58a0194827aca885d49a344 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Thu, 23 Oct 2025 14:09:01 +0700
Subject: [PATCH 03/40] feat/device-order: wip

---
 app/components/content/device-order/list.vue | 24 ++++++++++++++------
 app/components/content/encounter/process.vue |  3 ++-
 app/handlers/device-order.handler.ts         |  5 ++--
 app/services/device-order-item.service.ts    |  1 -
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/components/content/device-order/list.vue b/app/components/content/device-order/list.vue
index e62a2fbd..8c53f244 100644
--- a/app/components/content/device-order/list.vue
+++ b/app/components/content/device-order/list.vue
@@ -32,8 +32,15 @@ import {
   handleCancelForm,
 } from '~/handlers/device-order.handler'
 
-// Services
+// 
 import { getList } from '~/services/device-order.service'
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
 
 const route = useRoute()
 const title = ref('')
@@ -57,7 +64,7 @@ const {
       sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
-      includes: 'parent,childrens',
+      includes: 'encounter',
     })
     return { success: result.success || false, body: result.body || {} }
   },
@@ -82,11 +89,14 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah',
     icon: 'i-lucide-plus',
     onClick: async () => {
-      recItem.value = null
-      recId.value = 0
-      isReadonly.value = false
-      // await handleActionSave(recItem, getMyList, () => {}, () => {})
-      goToEntry()
+      const data = {
+        encounter_id: props.encounter.id,
+      }
+      const dateResp = await handleActionSave(data, getMyList, () => {}, () => {})
+      if (dateResp.success) {
+        const currentData = dateResp.body.data || []
+        // goToEntry()
+      }
     },
   },
 }
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 6fc620b5..d4279504 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -17,6 +17,7 @@ import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
 // import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import PrescriptionList from '~/components/content/prescription/list.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import DeviceOrder from '~/components/content/device-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 
 const route = useRoute()
@@ -49,7 +50,7 @@ const tabs: TabItem[] = [
   { value: 'consent', label: 'General Consent' },
   { value: 'patient-note', label: 'CPRJ' },
   { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
-  { value: 'device', label: 'Order Alkes' },
+  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter: data } },
   { value: 'mcu-radiology', label: 'Order Radiologi' },
   { value: 'mcu-lab-pc', label: 'Order Lab PK' },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
diff --git a/app/handlers/device-order.handler.ts b/app/handlers/device-order.handler.ts
index b1df996b..25529894 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, CreateDto } 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 | CreateDto>({
   create,
   update,
   remove,
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)
 }
 

From fc308809b848512a664659a51475e634e08f06f4 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Wed, 29 Oct 2025 14:57:19 +0700
Subject: [PATCH 04/40] Feat: add UI Rehab Medik > Proses > Resume

---
 .../app/resume/_common/select-arrangement.vue |  72 +++++++
 .../app/resume/_common/select-date.vue        | 121 ++++++++++++
 .../app/resume/_common/select-death-cause.vue |  71 +++++++
 .../app/resume/_common/select-faskes.vue      |  70 +++++++
 .../_common/select-primary-diagnosis.vue      |  70 +++++++
 .../_common/select-secondary-diagnosis.vue    |  71 +++++++
 app/components/app/resume/add.vue             | 185 ++++++++++++++++++
 app/components/app/resume/list.cfg.ts         |  93 +++++++++
 app/components/app/resume/list.vue            |  43 ++++
 app/components/content/encounter/process.vue  |   3 +-
 app/components/content/resume/add.vue         | 104 ++++++++++
 app/components/content/resume/list.vue        | 151 ++++++++++++++
 .../pub/my-ui/form/text-area-input.vue        |  86 ++++++++
 .../pub/my-ui/nav-footer/ba-dr-su.vue         |   3 +-
 app/pages/(features)/resume/add.vue           |  41 ++++
 app/schemas/resume.schema.ts                  |  42 ++++
 16 files changed, 1224 insertions(+), 2 deletions(-)
 create mode 100644 app/components/app/resume/_common/select-arrangement.vue
 create mode 100644 app/components/app/resume/_common/select-date.vue
 create mode 100644 app/components/app/resume/_common/select-death-cause.vue
 create mode 100644 app/components/app/resume/_common/select-faskes.vue
 create mode 100644 app/components/app/resume/_common/select-primary-diagnosis.vue
 create mode 100644 app/components/app/resume/_common/select-secondary-diagnosis.vue
 create mode 100644 app/components/app/resume/add.vue
 create mode 100644 app/components/app/resume/list.cfg.ts
 create mode 100644 app/components/app/resume/list.vue
 create mode 100644 app/components/content/resume/add.vue
 create mode 100644 app/components/content/resume/list.vue
 create mode 100644 app/components/pub/my-ui/form/text-area-input.vue
 create mode 100644 app/pages/(features)/resume/add.vue
 create mode 100644 app/schemas/resume.schema.ts

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..9a945d44
--- /dev/null
+++ b/app/components/app/resume/_common/select-arrangement.vue
@@ -0,0 +1,72 @@
+<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: 'Pindah IGD', value: "pindahIgd" },
+  { label: 'Rujuk', value: "rujuk" },
+  { label: 'Rujuk Balik', value: "rujukBalik" },
+  { label: 'Meninggal', value: "meninggal" },
+  { label: 'Lain Lain', value: "other" },
+]
+</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-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-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/add.vue b/app/components/app/resume/add.vue
new file mode 100644
index 00000000..2e12f872
--- /dev/null
+++ b/app/components/app/resume/add.vue
@@ -0,0 +1,185 @@
+<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 SelectSecondaryDiagnosis from './_common/select-secondary-diagnosis.vue'
+import SelectPrimaryDiagnosis from './_common/select-primary-diagnosis.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'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  resumeArrangementType: ResumeArrangementType
+  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 : {}">
+    <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" />
+    </DE.Block>
+    <DE.Block :col-count="3" :cell-flex="false">
+      <TextAreaInput field-name="anamnesis" label="Anamnesis" placeholder="Anamnesis" :errors="errors" />
+      <TextAreaInput field-name="physicalCheckup" label="Pemeriksaan Fisik" placeholder="Pemeriksaan Fisik"
+        :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup" label="Pemeriksaan Penunjang" placeholder="Pemeriksaan Penunjang"
+        :errors="errors" />
+    </DE.Block>
+    <Separator class="my-4" />
+
+    <!-- DIAGNOSIS -->
+    <h1 class="mb-3 text-base font-medium">Diagnosis</h1>
+    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
+      <SelectPrimaryDiagnosis
+        field-name="primaryDiagnosis"
+        label="Diagnosis Utama"
+        placeholder="Diagnosis Utama"
+        :errors="errors" is-required />
+
+      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+        <h1 class="mb-3 font-medium">Diagnosis Sekunder</h1>
+
+        <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">
+            <SelectSecondaryDiagnosis
+              :field-name="`secondaryDiagnosis[${idx}]`"
+              :errors="errors"
+            />
+            <Button 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(``)">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+            Tambah Diagnosis
+          </Button>
+        </FieldArray>
+      </div>
+    </DE.Block>
+    <Separator class="my-4" />
+
+
+    <!-- DIAGNOSIS -->
+    <h1 class="mb-3 text-base font-medium">Tindakan Operatif/Non Operatif</h1>
+    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
+      <SelectPrimaryDiagnosis
+        field-name="primaryOperativeNonOperativeAct"
+        label="Tindakan Operatif Utama"
+        placeholder="Tindakan Operatif Utama"
+        :errors="errors" is-required />
+
+      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+        <h1 class="mb-3 font-medium">Tindakan / Prosedur</h1>
+
+        <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">
+            <SelectSecondaryDiagnosis
+              :field-name="`secondaryOperativeNonOperativeAct[${idx}]`"
+              :errors="errors"
+            />
+            <Button 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(``)">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+            Tambah Tindakan / Prosedur
+          </Button>
+        </FieldArray>
+      </div>
+    </DE.Block>
+    <Separator class="my-4" />
+
+    <DE.Block class="w-3/5" :cell-flex="false">
+      <TextAreaInput field-name="medikamentosa" label="Medikamentosa" placeholder="Medikamentosa" :errors="errors" />
+    </DE.Block>
+    <Separator class="my-4" />
+
+    <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" />
+      
+      <SelectFaskes
+        v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
+        field-name="faskes"
+        label="Faskes"
+        placeholder="Pilih Faskes"
+        :errors="errors"
+      />
+      <InputBase
+        v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
+        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="2" v-show="resumeArrangementType === `meninggal`">
+        <div class="w-full 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 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(``)">
+              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+              Tambah Sebab Meninggal
+            </Button>
+          </FieldArray>
+        </div>
+      </DE.Cell>
+
+      <TextAreaInput
+        v-show="resumeArrangementType === `other`"
+        field-name="keterangan"
+        label="Keterangan"
+        placeholder="Keterangan"
+        :errors="errors" />
+    
+    </DE.Block>
+
+  </Form>
+</template>
diff --git a/app/components/app/resume/list.cfg.ts b/app/components/app/resume/list.cfg.ts
new file mode 100644
index 00000000..38f8f5d7
--- /dev/null
+++ b/app/components/app/resume/list.cfg.ts
@@ -0,0 +1,93 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {width: 3},],
+
+  headers: [
+    [
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Spesialis/Sub Spesialis' },
+      { label: 'DPJP' },
+      { label: 'Status SEP' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/resume/list.vue b/app/components/app/resume/list.vue
new file mode 100644
index 00000000..c4c101e5
--- /dev/null
+++ b/app/components/app/resume/list.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue';
+
+interface Props {
+  data: any
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <article class="space-y-4">
+      <h1 class="font-medium text-[0.89rem]">Pemeriksaan Pasien</h1>
+    <div class="space-y-1">
+      <DetailRow label="Tanggal Masuk">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
+      <DetailRow label="Tanggal Keluar">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
+      <DetailRow label="Anamnesis">{{ `-` }}</DetailRow>
+      <DetailRow label="Pemeriksaan Fisik">{{ `-` }}</DetailRow>
+      <DetailRow label="Pemeriksaan Penunjang">{{ `-` }}</DetailRow>
+    </div>
+    <Separator class="" />
+      <h1 class="font-medium text-[0.89rem]">Diagnosis</h1>
+    <div class="space-y-1">
+      <DetailRow label="Diagnosis Utama">{{ `-` }}</DetailRow>
+      <DetailRow label="Diagnosis Sekunder">{{ `-` }}</DetailRow>
+    </div>
+    <Separator class="" />
+      <h1 class="font-medium text-[0.89rem]">Tindakan Operatif/Non Operatif</h1>
+    <div class="space-y-1">
+      <DetailRow label="Tindakan Operatif Utama">{{ `-` }}</DetailRow>
+      <DetailRow label="Tindakan /Prosedur">{{ `-` }}</DetailRow>
+      <DetailRow label="Medikamentosa">{{ `-` }}</DetailRow>
+    </div>
+    <Separator class="" />
+      <h1 class="font-medium text-[0.89rem]">Penatalaksanaan</h1>
+    <div class="space-y-1">
+      <DetailRow label="Lanjutan Penatalaksanaan">{{ `-` }}</DetailRow>
+    </div>
+  </article>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 71c7fe3d..9b6308f2 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -16,6 +16,7 @@ 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 ResumeList from '~/components/content/resume/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -58,7 +59,7 @@ const tabs: TabItem[] = [
   { 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: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
   { value: 'control', label: 'Surat Kontrol' },
   { value: 'screening', label: 'Skrinning MPP' },
   { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
diff --git a/app/components/content/resume/add.vue b/app/components/content/resume/add.vue
new file mode 100644
index 00000000..6df169c6
--- /dev/null
+++ b/app/components/content/resume/add.vue
@@ -0,0 +1,104 @@
+<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'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+// #endregion
+
+// #region Lifecycle Hooks
+// #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"
+  />
+</template>
diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
new file mode 100644
index 00000000..5c5e3658
--- /dev/null
+++ b/app/components/content/resume/list.vue
@@ -0,0 +1,151 @@
+<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 { getPatients, removePatient } from '~/services/patient.service'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const formType = ref<`a` | `b`>(`a`)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Resume",
+  icon: 'i-lucide-newspaper',
+  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
+  }
+}
+function handleFormScreening(key: string) {
+  switch (key) {
+    case 'form-a':
+      navigateTo("/screening-mpp/add/a")
+      break;
+    case 'preview-form-a':
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break;
+    case 'form-b':
+      navigateTo("/screening-mpp/add/b")
+      break;
+    case 'preview-form-b':
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break;
+    default:
+      break;
+  }
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'outpatient-encounter-id',
+        params: { id: recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      navigateTo({
+        name: 'outpatient-encounter-id-edit',
+        params: { id: recId.value },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+  <AppResumeList />
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="summaryLoading">
+        <SummaryCard
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
+      </template>
+<template v-else>
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
+      </template>
+</div>
+</div>
+-->
+</template>
\ No newline at end of file
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..7747e727
--- /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 font-medium"
+      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/nav-footer/ba-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
index 4598817b..e38e12fa 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
+  enableDraft?: boolean
   smallMode?: boolean
   defaultClass?: string
   class?: string
@@ -28,7 +29,7 @@ function onClick(type: ClickType) {
         Back
       </Button>
     </div>
-    <div>
+    <div v-show="props.enableDraft">
       <Button variant="secondary" type="button" @click="onClick('draft')">
         <Icon name="i-lucide-file" />
         Draft
diff --git a/app/pages/(features)/resume/add.vue b/app/pages/(features)/resume/add.vue
new file mode 100644
index 00000000..7cc707f9
--- /dev/null
+++ b/app/pages/(features)/resume/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Resume',
+  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()
+
+// 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 = true // hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentResumeAdd />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/schemas/resume.schema.ts b/app/schemas/resume.schema.ts
new file mode 100644
index 00000000..99539414
--- /dev/null
+++ b/app/schemas/resume.schema.ts
@@ -0,0 +1,42 @@
+import { z } from 'zod'
+import type { CreateDto } from '~/models/consultation'
+
+export type ResumeArrangementType = "krs" | "mrs" | "pindahIgd" | "rujuk" | "rujukBalik" | "meninggal" | "other"
+
+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(z.string()).optional().default([]),
+
+  primaryOperativeNonOperativeAct: z.string({ required_error: 'Diagnosis harus diisi' }),
+  secondaryOperativeNonOperativeAct: z.array(z.string()).optional().default([]),
+  medikamentosa: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+
+  arrangement: z.custom<ResumeArrangementType>().default("krs"),
+  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([]),
+  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 }

From 53bd8e7f6e2b22b03690947f52b42744a17703ee Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 7 Nov 2025 08:55:23 +0700
Subject: [PATCH 05/40] Fix: refactor rehab medik - Resume UI

---
 .../app/resume/_common/print-btn.vue          |  22 +
 .../resume/_common/select-concious-level.vue  |  70 +++
 .../_common/select-following-arrangement.vue  |  70 +++
 .../select-hospital-leave-condition.vue       |  70 +++
 .../_common/select-hospital-leave-method.vue  |  70 +++
 .../app/resume/_common/select-icd-10.vue      |  70 +++
 .../app/resume/_common/select-icd-9.vue       |  70 +++
 ...select-national-program-service-status.vue |  70 +++
 .../select-national-program-service.vue       |  70 +++
 .../app/resume/_common/select-pain-scale.vue  |  70 +++
 .../app/resume/_common/verify-badge.vue       |  67 +++
 app/components/app/resume/add.vue             | 468 ++++++++++++++----
 .../history-list/action-history-dialog.vue    |  66 +++
 .../resume/history-list/action-list.cfg.ts    |  94 ++++
 .../consultation-history-dialog.vue           |  66 +++
 .../history-list/consultation-list.cfg.ts     |  51 ++
 .../history-list/farmacy-history-dialog.vue   |  66 +++
 .../resume/history-list/farmacy-list.cfg.ts   |  39 ++
 .../national-program-history-dialog.vue       |  65 +++
 .../history-list/national-program-list.cfg.ts |  30 ++
 .../supporting-history-dialog.vue             |  66 +++
 .../history-list/supporting-list.cfg.ts       |  39 ++
 app/components/app/resume/list.cfg.ts         |  20 +-
 app/components/app/resume/list.vue            |  50 +-
 app/components/app/resume/verify-dialog.vue   |  97 ++++
 app/components/content/resume/add.vue         |  98 +++-
 app/components/content/resume/list.vue        | 142 ++++--
 .../pub/my-ui/data/dropdown-action-dvvp.vue   | 103 ++++
 app/components/pub/my-ui/data/types.ts        |   3 +
 app/components/pub/my-ui/form/input-base.vue  |   8 +-
 .../pub/my-ui/form/text-area-input.vue        |   2 +-
 app/schemas/resume.schema.ts                  |  35 +-
 32 files changed, 2142 insertions(+), 185 deletions(-)
 create mode 100644 app/components/app/resume/_common/print-btn.vue
 create mode 100644 app/components/app/resume/_common/select-concious-level.vue
 create mode 100644 app/components/app/resume/_common/select-following-arrangement.vue
 create mode 100644 app/components/app/resume/_common/select-hospital-leave-condition.vue
 create mode 100644 app/components/app/resume/_common/select-hospital-leave-method.vue
 create mode 100644 app/components/app/resume/_common/select-icd-10.vue
 create mode 100644 app/components/app/resume/_common/select-icd-9.vue
 create mode 100644 app/components/app/resume/_common/select-national-program-service-status.vue
 create mode 100644 app/components/app/resume/_common/select-national-program-service.vue
 create mode 100644 app/components/app/resume/_common/select-pain-scale.vue
 create mode 100644 app/components/app/resume/_common/verify-badge.vue
 create mode 100644 app/components/app/resume/history-list/action-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/action-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/consultation-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/consultation-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/farmacy-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/farmacy-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/national-program-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/national-program-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/supporting-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/supporting-list.cfg.ts
 create mode 100644 app/components/app/resume/verify-dialog.vue
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dvvp.vue

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-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-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/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
index 2e12f872..d1423735 100644
--- a/app/components/app/resume/add.vue
+++ b/app/components/app/resume/add.vue
@@ -8,12 +8,19 @@ 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 SelectSecondaryDiagnosis from './_common/select-secondary-diagnosis.vue'
-import SelectPrimaryDiagnosis from './_common/select-primary-diagnosis.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 SelectFollowingArrangement from './_common/select-following-arrangement.vue'
+import SelectHospitalLeaveMethod from './_common/select-hospital-leave-method.vue'
 
 const props = defineProps<{
   schema: any
@@ -22,6 +29,11 @@ const props = defineProps<{
   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()
 
@@ -31,101 +43,369 @@ defineExpose({
   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: '',
+};
 </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 : {}">
+  <Form ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}">
+
+    <!-- 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" />
-    </DE.Block>
+      <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="anamnesis" label="Anamnesis" placeholder="Anamnesis" :errors="errors" />
-      <TextAreaInput field-name="physicalCheckup" label="Pemeriksaan Fisik" placeholder="Pemeriksaan Fisik"
-        :errors="errors" />
-      <TextAreaInput field-name="supplementCheckup" label="Pemeriksaan Penunjang" placeholder="Pemeriksaan Penunjang"
-        :errors="errors" />
+      <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">Diagnosis</h1>
-    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
-      <SelectPrimaryDiagnosis
+    <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="Diagnosis Utama"
-        placeholder="Diagnosis Utama"
+        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>
 
-      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
-        <h1 class="mb-3 font-medium">Diagnosis Sekunder</h1>
 
-        <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">
-            <SelectSecondaryDiagnosis
-              :field-name="`secondaryDiagnosis[${idx}]`"
-              :errors="errors"
-            />
-            <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
-              <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+      <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>
-          </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(``)">
-            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
-            Tambah Diagnosis
-          </Button>
-        </FieldArray>
-      </div>
-    </DE.Block>
-    <Separator class="my-4" />
+          </FieldArray>
+        </div>
+      </DE.Cell>
 
 
-    <!-- DIAGNOSIS -->
-    <h1 class="mb-3 text-base font-medium">Tindakan Operatif/Non Operatif</h1>
-    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
-      <SelectPrimaryDiagnosis
-        field-name="primaryOperativeNonOperativeAct"
-        label="Tindakan Operatif Utama"
-        placeholder="Tindakan Operatif Utama"
-        :errors="errors" is-required />
-
-      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
-        <h1 class="mb-3 font-medium">Tindakan / Prosedur</h1>
-
-        <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">
-            <SelectSecondaryDiagnosis
-              :field-name="`secondaryOperativeNonOperativeAct[${idx}]`"
-              :errors="errors"
-            />
-            <Button 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(``)">
-            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
-            Tambah Tindakan / Prosedur
-          </Button>
-        </FieldArray>
-      </div>
-    </DE.Block>
-    <Separator class="my-4" />
-
-    <DE.Block class="w-3/5" :cell-flex="false">
-      <TextAreaInput field-name="medikamentosa" label="Medikamentosa" placeholder="Medikamentosa" :errors="errors" />
-    </DE.Block>
-    <Separator class="my-4" />
-
-    <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" />
       
+    </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="3" :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.Block :col-count="3" :cell-flex="false">      
       <SelectFaskes
         v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
         field-name="faskes"
@@ -148,8 +428,8 @@ defineExpose({
         :errors="errors"
         :is-with-time="true" />
       
-      <DE.Cell class="mt-2" :col-span="2" v-show="resumeArrangementType === `meninggal`">
-        <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+      <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">
@@ -158,11 +438,11 @@ defineExpose({
                 :field-name="`deathCause[${idx}]`"
                 :errors="errors"
               />
-              <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
+              <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"
+            <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" />
@@ -172,12 +452,24 @@ defineExpose({
         </div>
       </DE.Cell>
 
-      <TextAreaInput
-        v-show="resumeArrangementType === `other`"
-        field-name="keterangan"
-        label="Keterangan"
-        placeholder="Keterangan"
-        :errors="errors" />
+      <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.Cell :col-span="3"
+        v-show="resumeArrangementType === `other`">
+        <TextAreaInput
+          field-name="keterangan"
+          label="Keterangan"
+          placeholder="Keterangan"
+          :errors="errors" />
+      </DE.Cell>
     
     </DE.Block>
 
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
index 38f8f5d7..b756b1ee 100644
--- a/app/components/app/resume/list.cfg.ts
+++ b/app/components/app/resume/list.cfg.ts
@@ -4,22 +4,23 @@ import { defineAsyncComponent } from 'vue'
 import { educationCodes, genderCodes } from '~/lib/constants'
 import { calculateAge } from '~/lib/utils'
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+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: 3},],
+  cols: [{width: 140}, {}, {}, {width: 140}, {width: 10},],
 
   headers: [
     [
-      { label: 'Tgl Rencana Kontrol' },
-      { label: 'Spesialis/Sub Spesialis' },
+      { label: 'Tgl Simpan' },
       { label: 'DPJP' },
-      { label: 'Status SEP' },
+      { label: 'KSM' },
+      { label: 'Status' },
       { label: 'Action' },
     ],
   ],
 
-  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'action'],
+  keys: ['birth_date', 'number', 'person.name', 'status', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -83,6 +84,13 @@ export const config: Config = {
         component: action,
       }
     },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
 
   htmls: {
diff --git a/app/components/app/resume/list.vue b/app/components/app/resume/list.vue
index c4c101e5..0d62cc6c 100644
--- a/app/components/app/resume/list.vue
+++ b/app/components/app/resume/list.vue
@@ -2,42 +2,30 @@
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
 import { config } from './list.cfg'
-import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue';
 
 interface Props {
-  data: any
+  data: any[]
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <article class="space-y-4">
-      <h1 class="font-medium text-[0.89rem]">Pemeriksaan Pasien</h1>
-    <div class="space-y-1">
-      <DetailRow label="Tanggal Masuk">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
-      <DetailRow label="Tanggal Keluar">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
-      <DetailRow label="Anamnesis">{{ `-` }}</DetailRow>
-      <DetailRow label="Pemeriksaan Fisik">{{ `-` }}</DetailRow>
-      <DetailRow label="Pemeriksaan Penunjang">{{ `-` }}</DetailRow>
-    </div>
-    <Separator class="" />
-      <h1 class="font-medium text-[0.89rem]">Diagnosis</h1>
-    <div class="space-y-1">
-      <DetailRow label="Diagnosis Utama">{{ `-` }}</DetailRow>
-      <DetailRow label="Diagnosis Sekunder">{{ `-` }}</DetailRow>
-    </div>
-    <Separator class="" />
-      <h1 class="font-medium text-[0.89rem]">Tindakan Operatif/Non Operatif</h1>
-    <div class="space-y-1">
-      <DetailRow label="Tindakan Operatif Utama">{{ `-` }}</DetailRow>
-      <DetailRow label="Tindakan /Prosedur">{{ `-` }}</DetailRow>
-      <DetailRow label="Medikamentosa">{{ `-` }}</DetailRow>
-    </div>
-    <Separator class="" />
-      <h1 class="font-medium text-[0.89rem]">Penatalaksanaan</h1>
-    <div class="space-y-1">
-      <DetailRow label="Lanjutan Penatalaksanaan">{{ `-` }}</DetailRow>
-    </div>
-  </article>
-</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..1519446c
--- /dev/null
+++ b/app/components/app/resume/verify-dialog.vue
@@ -0,0 +1,97 @@
+<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'
+
+
+const props = defineProps<{
+  schema: any
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+  }
+  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>
+
+          <InputBase
+            class="mb-2"
+            field-name="captha"
+            label="Captha"
+            placeholder="Masukkan Captha"
+            :errors="errors"/>
+
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
\ No newline at end of file
diff --git a/app/components/content/resume/add.vue b/app/components/content/resume/add.vue
index 6df169c6..6fda4bf8 100644
--- a/app/components/content/resume/add.vue
+++ b/app/components/content/resume/add.vue
@@ -3,6 +3,14 @@ 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<{
@@ -11,14 +19,60 @@ const props = defineProps<{
 
 // 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
@@ -86,7 +140,7 @@ async function handleActionClick(eventType: string) {
   <AppResumeAdd 
     ref="personPatientForm"
     :schema="ResumeSchema"
-    :resume-arrangement-type="personPatientForm?.values.arrangement" />
+    :resume-arrangement-type="personPatientForm?.values.arrangement"/>
   
   <div class="my-2 flex justify-end py-2">
     <Action :enable-draft="false"
@@ -101,4 +155,46 @@ async function handleActionClick(eventType: string) {
     @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
index 5c5e3658..389c830d 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -10,9 +10,12 @@ 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'
 
 // #endregion
 
@@ -35,6 +38,7 @@ const refSearchNav: RefSearchNav = {
 }
 
 const formType = ref<`a` | `b`>(`a`)
+const isVerifyDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
 
@@ -69,23 +73,61 @@ async function getPatientSummary() {
     summaryLoading.value = false
   }
 }
-function handleFormScreening(key: string) {
-  switch (key) {
-    case 'form-a':
-      navigateTo("/screening-mpp/add/a")
-      break;
-    case 'preview-form-a':
-      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
-      break;
-    case 'form-b':
-      navigateTo("/screening-mpp/add/b")
-      break;
-    case 'preview-form-b':
-      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
-      break;
-    default:
-      break;
+
+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
 
@@ -99,26 +141,15 @@ provide('table_data_loader', isLoading)
 // #region Watchers
 watch([recId, recAction], () => {
   switch (recAction.value) {
-    case ActionEvents.showDetail:
-      navigateTo({
-        name: 'outpatient-encounter-id',
-        params: { id: recId.value },
-      })
+    case ActionEvents.showVerify:
+      isVerifyDialogOpen.value = true
       break
-
-    case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
-      navigateTo({
-        name: 'outpatient-encounter-id-edit',
-        params: { id: recId.value },
-      })
-      break
-
-    case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
+    case ActionEvents.showValidate:
       isRecordConfirmationOpen.value = true
       break
+    case ActionEvents.showPrint:
+      navigateTo('https://google.com', {external: true,open: { target: "_blank" },});
+      break
   }
 })
 // #endregion
@@ -126,26 +157,29 @@ watch([recId, recAction], () => {
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <AppResumeList />
 
-  <!-- Disable dulu, ayahab kalo diminta beneran -->
-  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-      <template v-if="summaryLoading">
-        <SummaryCard
-          v-for="n in 4"
-          :key="n"
-          is-skeleton
-        />
-      </template>
-<template v-else>
-        <SummaryCard
-          v-for="card in summaryData"
-          :key="card.title"
-          :stat="card"
-        />
-      </template>
-</div>
-</div>
--->
+  <!-- <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 />
+    <div class="flex justify-end">
+      <Action :enable-draft="false" @click="handleActionClick" />
+    </div>
+  </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/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 c0d283de..c86e1752 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -76,6 +76,9 @@ export const ActionEvents = {
   showEdit: 'showEdit',
   showDetail: 'showDetail',
   showProcess: 'showProcess',
+  showVerify: 'showVerify',
+  showValidate: 'showValidate',
+  showPrint: 'showPrint',
 }
 
 export interface DataTableLoader {
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index aeb4a4af..c31b2073 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -19,6 +19,8 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  rightLabel?: string
+  bottomLabel?: string
 }>()
 
 function handleInput(event: Event) {
@@ -61,14 +63,14 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem>
+        <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"
@@ -76,10 +78,12 @@ function handleInput(event: Event) {
               spellcheck="false"
               @input="handleInput"
             />
+            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
+    <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
index 7747e727..c7b7c794 100644
--- a/app/components/pub/my-ui/form/text-area-input.vue
+++ b/app/components/pub/my-ui/form/text-area-input.vue
@@ -47,7 +47,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="mb-1 font-medium"
+      class="mb-1"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
diff --git a/app/schemas/resume.schema.ts b/app/schemas/resume.schema.ts
index 99539414..3d529622 100644
--- a/app/schemas/resume.schema.ts
+++ b/app/schemas/resume.schema.ts
@@ -3,6 +3,31 @@ import type { CreateDto } from '~/models/consultation'
 
 export type ResumeArrangementType = "krs" | "mrs" | "pindahIgd" | "rujuk" | "rujukBalik" | "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' }),
@@ -17,19 +42,25 @@ const ResumeSchema = z.object({
     .max(2048, 'Uraian maksimum 2048 karakter'),
 
   primaryDiagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
-  secondaryDiagnosis: z.array(z.string()).optional().default([]),
+  secondaryDiagnosis: z.array(SecondaryDiagnosisSchema).optional(),
 
   primaryOperativeNonOperativeAct: z.string({ required_error: 'Diagnosis harus diisi' }),
-  secondaryOperativeNonOperativeAct: z.array(z.string()).optional().default([]),
+  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"),
   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')

From b2a512314b397f73ba9f3078960831dd99818526 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 7 Nov 2025 14:02:54 +0700
Subject: [PATCH 06/40] Feat: UI uplaod doc pendukung

---
 .../_common/select-doc-type.vue               |  81 ++++++++++++
 .../app/document-upload/entry-form.vue        |  77 +++++++++++
 .../app/document-upload/list.cfg.ts           |  39 ++++++
 app/components/app/document-upload/list.vue   |  31 +++++
 .../content/document-upload/add.vue           | 122 +++++++++++++++++
 .../content/document-upload/edit.vue          | 122 +++++++++++++++++
 .../content/document-upload/list.vue          | 123 ++++++++++++++++++
 app/components/content/encounter/process.vue  |   3 +-
 .../pub/my-ui/nav-footer/ba-dr-su.vue         |   6 +-
 .../document-upload/[document_id]/edit.vue    |  41 ++++++
 .../encounter/[id]/document-upload/add.vue    |  42 ++++++
 app/schemas/document-upload.schema.ts         |  13 ++
 app/services/control-letter.service.ts        |  28 ++++
 13 files changed, 725 insertions(+), 3 deletions(-)
 create mode 100644 app/components/app/document-upload/_common/select-doc-type.vue
 create mode 100644 app/components/app/document-upload/entry-form.vue
 create mode 100644 app/components/app/document-upload/list.cfg.ts
 create mode 100644 app/components/app/document-upload/list.vue
 create mode 100644 app/components/content/document-upload/add.vue
 create mode 100644 app/components/content/document-upload/edit.vue
 create mode 100644 app/components/content/document-upload/list.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
 create mode 100644 app/schemas/document-upload.schema.ts
 create mode 100644 app/services/control-letter.service.ts

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..26b1bb87
--- /dev/null
+++ b/app/components/app/document-upload/_common/select-doc-type.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+import { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const docTypeOpts : Item[] = [
+  {
+    label: 'Surat Keterangan Sehat',
+    value: 'sksehat',
+  },
+  {
+    label: 'Surat Keterangan Sakit',
+    value: 'sksakit',
+  },
+]
+</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="docTypeOpts"
+              :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..7197c02b
--- /dev/null
+++ b/app/components/app/document-upload/entry-form.vue
@@ -0,0 +1,77 @@
+<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
+
+  selectedUnitId?: number | null
+  selectedSpecialistId?: number | null
+  selectedSubSpecialistId?: number | null
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <DE.Block :col-count="2" :cell-flex="false">
+      <InputBase
+        field-name="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="doc_name"
+            label="Nama Dokumen"
+            placeholder="Maukkan Nama Dokumen"
+          />
+          <SelectDocType
+            field-name="doc_type"
+            label="Tipe Dokumen"
+            placeholder="Pilih Jenis Dokumen"
+            :errors="errors"
+            is-required
+          />
+          <FileField
+            field-name="file"
+            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..dbe2a679
--- /dev/null
+++ b/app/components/app/document-upload/list.cfg.ts
@@ -0,0 +1,39 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {width: 50},],
+
+  headers: [
+    [
+      { label: 'Nama Dokumen' },
+      { label: 'Tipe Dokumen' },
+      { label: 'Petugas Upload' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['specialist.name', 'subspecialist.name', 'subspecialist.name', 'action'],
+
+  delKeyNames: [
+
+  ],
+
+  parses: {
+  },
+
+  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/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
new file mode 100644
index 00000000..6fbc43f5
--- /dev/null
+++ b/app/components/content/document-upload/add.vue
@@ -0,0 +1,122 @@
+<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/patient.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'
+
+// #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)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const controlLetter = await composeFormData()
+  let createdControlLetterId = 0
+
+  const response = await handleActionSave(
+    controlLetter,
+    () => { },
+    () => { },
+    toast,
+  )
+
+  const data = (response?.body?.data ?? null)
+  if (!data) return
+  createdControlLetterId = data.id
+
+  // // If has callback provided redirect to callback with patientData
+  if (props.callbackUrl) {
+    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+  }
+
+  goBack()
+}
+
+async function composeFormData(): Promise<any> {
+  const [controlLetter,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+// #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"
+  />
+
+  <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..63f1fc09
--- /dev/null
+++ b/app/components/content/document-upload/edit.vue
@@ -0,0 +1,122 @@
+<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/patient.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'
+
+// #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)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const controlLetter = await composeFormData()
+  let createdControlLetterId = 0
+
+  const response = await handleActionSave(
+    controlLetter,
+    () => { },
+    () => { },
+    toast,
+  )
+
+  const data = (response?.body?.data ?? null)
+  if (!data) return
+  createdControlLetterId = data.id
+
+  // // If has callback provided redirect to callback with patientData
+  if (props.callbackUrl) {
+    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+  }
+
+  goBack()
+}
+
+async function composeFormData(): Promise<any> {
+  const [controlLetter,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+// #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"
+  />
+
+  <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..c69ac96b
--- /dev/null
+++ b/app/components/content/document-upload/list.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+// #region Imports
+import { ActionEvents } 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 { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/control-letter.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+// #endregion
+
+// #region State
+const props = defineProps<{
+  encounter?: Encounter
+}>()
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'control-letter',
+})
+
+const isRecordConfirmationOpen = ref(false)
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Upload Dokumen",
+  icon: 'i-lucide-newspaper',
+  addNav: {
+    label: "Upload Dokumen",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-document-upload-add',
+        params: { id: encounterId },
+      }),
+  },
+}
+// #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' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo("https://google.com", { external: true, open: { target: '_blank' } })
+      break
+    case ActionEvents.showEdit:
+      navigateTo({
+        name: 'rehab-encounter-id-document-upload-document_id-edit',
+        params: { id: encounterId, "document_id": recId.value },
+      })
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }"/>
+  <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?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index ad93387d..7d178303 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -16,6 +16,7 @@ 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 DocUploadList from '~/components/content/document-upload/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -72,7 +73,7 @@ const tabs: TabItem[] = [
   { value: 'resume', label: 'Resume' },
   { value: 'control', label: 'Surat Kontrol' },
   { value: 'screening', label: 'Skrinning MPP' },
-  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data } },
 ]
 </script>
 
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 4598817b..427eab0f 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
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 const props = defineProps<{
+  enableDraft?: boolean
   smallMode?: boolean
   defaultClass?: string
   class?: string
 }>()
 
+const enableDraft = props.enableDraft ?? true
 const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
 const additionalClass = props.class ?? ''
 const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
@@ -29,7 +31,7 @@ function onClick(type: ClickType) {
       </Button>
     </div>
     <div>
-      <Button variant="secondary" type="button" @click="onClick('draft')">
+      <Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
         <Icon name="i-lucide-file" />
         Draft
       </Button>
@@ -41,4 +43,4 @@ function onClick(type: ClickType) {
       </Button>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
new file mode 100644
index 00000000..8a228d55
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Update Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentDocumentUploadEdit/>
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
new file mode 100644
index 00000000..94805d12
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+const callbackUrl = route.query['return-path'] as string | undefined
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentDocumentUploadAdd :callback-url="callbackUrl" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/schemas/document-upload.schema.ts b/app/schemas/document-upload.schema.ts
new file mode 100644
index 00000000..ffd56e36
--- /dev/null
+++ b/app/schemas/document-upload.schema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+const DocumentUploadSchema = z.object({
+  officer: z.string({    required_error: 'Mohon isi',  }),
+  doc_name: z.number({    required_error: 'Mohon isi',  }),
+  doc_type: z.number({    required_error: 'Mohon isi',  }),
+  file: z.number({    required_error: 'Mohon isi',  }),
+})
+
+type DocumentUploadFormData = z.infer<typeof DocumentUploadSchema>
+
+export { DocumentUploadSchema }
+export type { DocumentUploadFormData }
diff --git a/app/services/control-letter.service.ts b/app/services/control-letter.service.ts
new file mode 100644
index 00000000..29b3722b
--- /dev/null
+++ b/app/services/control-letter.service.ts
@@ -0,0 +1,28 @@
+// Base
+import * as base from './_crud-base'
+
+// Constants
+import { encounterClassCodes } from '~/lib/constants'
+
+const path = '/api/v1/control-letter'
+const name = 'control-letter'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
\ No newline at end of file

From e62ee1b37e8b37f03ea8cd873263765544ff7c8a Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 11 Nov 2025 08:57:49 +0700
Subject: [PATCH 07/40] =?UTF-8?q?=E2=9C=A8=20feat=20(encounter):=20impleme?=
 =?UTF-8?q?nt=20general=20consent=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/general-consent/entry.vue  | 241 ++++++++++++++++++
 .../app/general-consent/list.cfg.ts           |  57 +++++
 app/components/app/general-consent/list.vue   |  34 +++
 app/components/content/encounter/process.vue  |   3 +-
 .../content/general-consent/entry.vue         |  36 +++
 .../content/general-consent/form.vue          | 181 +++++++++++++
 .../content/general-consent/list.vue          | 187 ++++++++++++++
 app/models/general-consent.ts                 |  47 ++++
 app/schemas/general-consent.schema.ts         |  13 +
 9 files changed, 798 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/general-consent/entry.vue
 create mode 100644 app/components/app/general-consent/list.cfg.ts
 create mode 100644 app/components/app/general-consent/list.vue
 create mode 100644 app/components/content/general-consent/entry.vue
 create mode 100644 app/components/content/general-consent/form.vue
 create mode 100644 app/components/content/general-consent/list.vue
 create mode 100644 app/models/general-consent.ts
 create mode 100644 app/schemas/general-consent.schema.ts

diff --git a/app/components/app/general-consent/entry.vue b/app/components/app/general-consent/entry.vue
new file mode 100644
index 00000000..8d9c8867
--- /dev/null
+++ b/app/components/app/general-consent/entry.vue
@@ -0,0 +1,241 @@
+<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 [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
+const [pastDisease, pastDiseaseAttrs] = defineField('past-disease')
+const [currentDisease, currentDiseaseAttrs] = defineField('current-disease')
+const [gcs, gcsAttrs] = defineField('gcs')
+const [respiratoryRate, respiratoryRateAttrs] = defineField('respiratory-rate')
+const [respiratoryRateType, respiratoryRateTypeAttrs] = defineField('respiratory-rate-type')
+const [pulse, pulseAttrs] = defineField('pulse')
+const [pulseType, pulseTypeAttrs] = defineField('pulse-type')
+const [rightArmBp, rightArmBpAttrs] = defineField('right-arm-bp')
+const [leftArmBp, leftArmBpAttrs] = defineField('left-arm-bp')
+const [axillaryTemp, axillaryTempAttrs] = defineField('axillary-temp')
+const [rektalTemp, rektalTempAttrs] = defineField('rektal-temp')
+const [skin, skinAttrs] = defineField('skin')
+const [head, headAttrs] = defineField('head')
+const [ear, earAttrs] = defineField('ear')
+const [nose, noseAttrs] = defineField('nose')
+const [oralCavity, oralCavityAttrs] = defineField('oral-cavity')
+const [eye, eyeAttrs] = defineField('eye')
+const [otherBodyPart, otherBodyPartAttrs] = defineField('other-body-part')
+const [neck, neckAttrs] = defineField('neck')
+const [thyroid, thyroidAttrs] = defineField('thyroid')
+const [thorax, thoraxAttrs] = defineField('thorax')
+const [heart, heartAttrs] = defineField('heart')
+const [lung, lungAttrs] = defineField('lung')
+const [abdomen, abdomenAttrs] = defineField('abdomen')
+const [heart2, heart2Attrs] = defineField('heart2')
+const [lien, lienAttrs] = defineField('lien')
+const [back, backAttrs] = defineField('back')
+const [extremity, extremityAttrs] = defineField('extremity')
+const [gender, genderAttrs] = defineField('gender')
+const [rectum, rectumAttrs] = defineField('rectum')
+const [systemSyaraf, systemSyarafAttrs] = defineField('system-syaraf')
+const [nervousSystem, nervousSystemAttrs] = defineField('nervous-system')
+const [cardioRespiratory, cardioRespiratoryAttrs] = defineField('cardio-respiratory')
+const [imaging, imagingAttrs] = defineField('imaging')
+const [laboratory, laboratoryAttrs] = defineField('laboratory')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+
+const icdPreview = inject('icdPreview')
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+const disorders = ref<string[]>([])
+const therapies = ref<string[]>([])
+const summary = ref('')
+
+const disorderOptions = [
+  'Fungsi Otot',
+  'Fungsi Sendi',
+  'Fungsi Jalan',
+  'Fungsi Syaraf',
+  'Fungsi Koordinasi',
+  'Jantung',
+  'Fungsi Respirasi',
+  'Fungsi Menelan',
+  'Fungsi Bladder',
+  'Fungsi Bowel',
+  'Fungsi Luhur',
+  'Fungsi Kontrol Postur',
+  'Fungsi Eksekusi',
+  'Fungsi Ortosa/Protesa',
+  'Gangguan Aktivitas Sehari-hari',
+  'Lainnya',
+]
+
+const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
+</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 :errMessage="errors['prim-compl']">
+            <Textarea
+              v-model="primaryComplaint"
+              v-bind="primaryComplaintAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Anggota Keluarga dan Penanggung Jawab</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Pernapasan</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRate"
+                v-bind="respiratoryRateAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRateType"
+                v-bind="respiratoryRateTypeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <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>Pernapasan</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRate"
+                v-bind="respiratoryRateAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRateType"
+                v-bind="respiratoryRateTypeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <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>Jenis</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRateType"
+                v-bind="respiratoryRateTypeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <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>Pernapasan</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRate"
+                v-bind="respiratoryRateAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRateType"
+                v-bind="respiratoryRateTypeAttrs"
+              />
+            </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..3e634d44
--- /dev/null
+++ b/app/components/app/general-consent/list.cfg.ts
@@ -0,0 +1,57 @@
+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', 'dstUnit.name', 'dstDoctor.name', 'responsible', 'problem', 'solution', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+    date(rec) {
+      const recX = rec as 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/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/content/encounter/process.vue b/app/components/content/encounter/process.vue
index ad93387d..aba72c94 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -16,6 +16,7 @@ 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 GeneralConsentList from '~/components/content/general-consent/entry.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -58,7 +59,7 @@ const tabs: TabItem[] = [
   },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
-  { value: 'consent', label: 'General Consent' },
+  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
   { value: 'patient-note', label: 'CPRJ' },
   { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
   { value: 'device', label: 'Order Alkes' },
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..146586ea
--- /dev/null
+++ b/app/components/content/general-consent/form.vue
@@ -0,0 +1,181 @@
+<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 { FunctionSoapiSchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+const { backToList } = useQueryMode('mode')
+
+const route = useRoute()
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const isOpenFungsional = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const fungsional = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const selectedFungsional = ref<any>(null)
+const schema = FunctionSoapiSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'function',
+  value: '',
+})
+const model = ref({
+  'prim-compl': '',
+  'past-disease': '',
+  'current-disease': '',
+  gcs: '',
+  'respiratory-rate': '',
+  'respiratory-rate-type': '',
+  pulse: '',
+  'pulse-type': '',
+  'right-arm-bp': '',
+  'left-arm-bp': '',
+  'axillary-temp': '',
+  'rektal-temp': '',
+  skin: '',
+  head: '',
+  ear: '',
+  nose: '',
+  'oral-cavity': '',
+  eye: '',
+  'other-body-part': '',
+  neck: '',
+  thyroid: '',
+  thorax: '',
+  heart: '',
+  lung: '',
+  abdomen: '',
+  heart2: '',
+  lien: '',
+  back: '',
+  extremity: '',
+  gender: '',
+  rectum: '',
+  'system-syaraf': '',
+  'nervous-system': '',
+  'cardio-respiratory': '',
+  imaging: '',
+  laboratory: '',
+})
+
+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(() => {
+  getProcedures()
+  getDiagnoses()
+})
+
+function handleClick(type: string) {
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  } else if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
+}
+const entryRehabRef = ref()
+async function actionHandler(type: string) {
+  if (type === 'back') {
+    backToList()
+    return
+  }
+  if (type === 'print') {
+    console.log('print')
+    isOpenDiagnose.value = true
+    return
+  }
+  const result = await entryRehabRef.value?.validate()
+  if (result?.valid) {
+    if (
+      selectedProcedure.value?.length > 0 ||
+      selectedDiagnose.value?.length > 0 ||
+      selectedFungsional.value?.length > 0
+    ) {
+      result.data.procedure = selectedProcedure.value || []
+      result.data.diagnose = selectedDiagnose.value || []
+      result.data.fungsional = selectedFungsional.value || []
+    }
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...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)
+  }
+}
+
+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="entryRehabRef"
+    v-model="model"
+    :schema="schema"
+    type="function"
+    @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
+  >
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </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..f7f53972
--- /dev/null
+++ b/app/components/content/general-consent/list.vue
@@ -0,0 +1,187 @@
+<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/consultation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/consultation.service'
+import { getValueLabelList } from '~/services/unit.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+
+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 {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({ 'encounter-id': props.encounter.id, includes: 'encounter,dstUnit', search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: '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()
+      emits('add')
+      // recItem.value = {
+      //   encounter_id: encounterId.value,
+      //   date: today.toISOString().slice(0, 10),
+      //   unit_id: 0,
+      //   problem: '',
+      // }
+      // recId.value = 0
+      // isFormEntryDialogOpen.value = true
+      // isReadonly.value = false
+    },
+  },
+}
+
+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:
+      getMyDetail(recId.value)
+      title.value = 'Edit Konsultasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+  units.value = await getValueLabelList()
+})
+</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/models/general-consent.ts b/app/models/general-consent.ts
new file mode 100644
index 00000000..c12df7ca
--- /dev/null
+++ b/app/models/general-consent.ts
@@ -0,0 +1,47 @@
+export interface GeneralConsent {
+  id: number
+  encounter_id: number
+  date?: string
+  unit_id: number
+  doctor_id?: number
+  problem: string
+  solution?: string
+  repliedAt?: string
+}
+
+export interface CreateDto {
+  encounter_id: number
+  date: string
+  problem: string
+  dstUnit_id: number
+}
+
+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/schemas/general-consent.schema.ts b/app/schemas/general-consent.schema.ts
new file mode 100644
index 00000000..8aa61fe7
--- /dev/null
+++ b/app/schemas/general-consent.schema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+import type { CreateDto } from '~/models/general-consent'
+
+const GeneralConsentSchema = z.object({
+  date: z.string({ required_error: 'Tanggal harus diisi' }),
+  dstUnit_id: z.number({ required_error: 'Unit harus diisi' }),
+  problem: z.string({ required_error: 'Uraian harus diisi' }).min(20, 'Uraian minimum 20 karakter'),
+})
+
+type GeneralConsentFormData = z.infer<typeof GeneralConsentSchema> & CreateDto
+
+export { GeneralConsentSchema }
+export type { GeneralConsentFormData }

From 270869b92832374440a7e00a76a2dc826c42a2b4 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Tue, 11 Nov 2025 14:07:46 +0700
Subject: [PATCH 08/40] Fix: Refactor Organization CRUD {id} to {code}

---
 .../app/division-position/entry-form.vue      | 12 ++++----
 .../app/division-position/entry.vue           |  2 +-
 app/components/app/division/entry-form.vue    | 12 ++++----
 .../app/installation-position/entry-form.vue  | 10 +++----
 .../app/specialist-position/entry-detail.vue  |  2 +-
 .../app/specialist-position/entry-form.vue    | 12 ++++----
 app/components/app/specialist/entry-form.vue  |  8 ++---
 .../subspecialist-position/entry-detail.vue   |  2 +-
 .../app/subspecialist-position/entry-form.vue | 10 +++----
 .../app/subspecialist/entry-form.vue          | 10 +++----
 .../app/unit-position/entry-detail.vue        |  2 +-
 .../app/unit-position/entry-form.vue          |  8 ++---
 app/components/app/unit/entry-form.vue        | 10 +++----
 .../content/division-position/list.vue        | 13 ++++-----
 app/components/content/division/detail.vue    | 10 +++----
 app/components/content/division/list.vue      | 29 +++++++++----------
 .../content/installation-position/list.vue    | 10 +++----
 .../content/installation/detail.vue           | 10 +++----
 app/components/content/installation/list.vue  | 25 +++++++---------
 .../content/specialist-position/list.vue      | 12 ++++----
 app/components/content/specialist/detail.vue  | 10 +++----
 app/components/content/specialist/list.vue    | 27 ++++++++---------
 .../content/subspecialist-position/list.vue   | 12 ++++----
 .../content/subspecialist/detail.vue          | 10 +++----
 app/components/content/subspecialist/list.vue | 27 ++++++++---------
 app/components/content/unit-position/list.vue | 12 ++++----
 app/components/content/unit/detail.vue        | 10 +++----
 app/components/content/unit/list.vue          | 28 ++++++++----------
 app/models/division-position.ts               |  4 +--
 app/models/specialist-position.ts             |  4 +--
 app/models/specialist.ts                      |  2 +-
 app/models/subspecialist-position.ts          |  4 +--
 app/models/unit-position.ts                   |  4 +--
 .../org-src/division/[id]/index.vue           |  2 +-
 .../org-src/installation/[id]/index.vue       |  2 +-
 .../org-src/specialist/[id]/index.vue         |  2 +-
 .../org-src/subspecialist/[id]/index.vue      |  2 +-
 .../(features)/org-src/unit/[id]/index.vue    |  2 +-
 app/schemas/division-position.schema.ts       |  2 +-
 app/schemas/division.schema.ts                |  2 +-
 app/schemas/installation-position.schema.ts   |  2 +-
 app/schemas/specialist-position.schema.ts     |  2 +-
 app/schemas/specialist.schema.ts              |  2 +-
 app/schemas/subspecialist-position.schema.ts  |  2 +-
 app/schemas/subspecialist.schema.ts           |  2 +-
 app/schemas/unit-position.schema.ts           |  2 +-
 app/schemas/unit.schema.ts                    |  2 +-
 app/services/division.service.ts              | 12 +++++---
 app/services/installation.service.ts          |  6 ++--
 app/services/specialist.service.ts            |  6 ++--
 app/services/subspecialist.service.ts         |  6 ++--
 app/services/unit.service.ts                  |  6 ++--
 52 files changed, 211 insertions(+), 216 deletions(-)

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/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/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
index fb84e41a..ba9ea14c 100644
--- a/app/components/app/unit-position/entry-detail.vue
+++ b/app/components/app/unit-position/entry-detail.vue
@@ -18,7 +18,7 @@ import { genUnitPosition } from '~/models/unit-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  unitId: number
+  unitId: string
   employees: any[]
   values: any
   isLoading?: boolean
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/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/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/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/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/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/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)/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/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/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/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/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/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/specialist.service.ts b/app/services/specialist.service.ts
index b18eac34..8221cd67 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.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: Specialist) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code 
+        : item.id ? Number(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 e384f059..9425067b 100644
--- a/app/services/subspecialist.service.ts
+++ b/app/services/subspecialist.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: Subspecialist) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code 
+        : item.id ? Number(item.id) 
+          : item.code,
       label: item.name,
       parent: item.specialist_id ? Number(item.specialist_id) : null,
     }))
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
index ec1ccec0..40968a69 100644
--- a/app/services/unit.service.ts
+++ b/app/services/unit.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: Unit) => ({
-      value: item.id,
+      value: useCodeAsValue ? item.code 
+        : item.id ? Number(item.id) 
+          : item.code,
       label: item.name,
     }))
   }

From 16626a2feeb158319d2e8a5c4e6c01c8035640c7 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Thu, 13 Nov 2025 11:49:28 +0700
Subject: [PATCH 09/40] feat/prescription: added submit

---
 app/components/app/prescription/list.vue      |  1 -
 app/components/content/prescription/list.vue  | 39 ++++++++++++++++---
 .../confirmation/record-confirmation.vue      |  5 ++-
 app/handlers/prescription.handler.ts          |  2 +-
 app/services/prescription.service.ts          | 14 +++++++
 5 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/list.vue
index ae5126ca..fbff7b10 100644
--- a/app/components/app/prescription/list.vue
+++ b/app/components/app/prescription/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[]
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 844cb04f..68e2069f 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -22,6 +22,8 @@ import {
 import { getList, getDetail } from '~/services/prescription.service'
 import List from '~/components/app/prescription/list.vue'
 import type { Prescription } from '~/models/prescription'
+import { submit } from '~/services/prescription.service'
+import type { ToastFn } from '~/handlers/_handler'
 
 const props = defineProps<{
   encounter_id: number
@@ -31,6 +33,7 @@ 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
@@ -125,13 +128,13 @@ watch([isFormEntryDialogOpen], async () => {
   }
 })
 
-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,9 +142,21 @@ 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>
@@ -150,9 +165,9 @@ function submit(data: Prescription) {
     v-if="!isLoading.dataListLoading"
     :data="data"
     :pagination-meta="paginationMeta"
-    @cancel="cancel"
-    @edit="edit"
-    @submit="submit"
+    @cancel="confirmCancel"
+    @edit="goToEdit"
+    @submit="confirmSubmit"
   />
 
   <RecordConfirmation
@@ -163,4 +178,16 @@ function submit(data: Prescription) {
     @cancel=""
   >
   </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=""
+  >
+  </RecordConfirmation>
 </template>
diff --git a/app/components/pub/my-ui/confirmation/record-confirmation.vue b/app/components/pub/my-ui/confirmation/record-confirmation.vue
index cff54b2b..b241b2c4 100644
--- a/app/components/pub/my-ui/confirmation/record-confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/record-confirmation.vue
@@ -119,8 +119,9 @@ function handleCancel() {
 
 <template>
   <Confirmation
-v-model:open="isOpen" :title="finalTitle" :message="finalMessage" :confirm-text="finalConfirmText"
-    :cancel-text="finalCancelText" :variant="actionConfig.variant" size="md" @confirm="handleConfirm"
+    v-model:open="isOpen" :title="finalTitle" :message="finalMessage" :confirm-text="finalConfirmText"
+    :cancel-text="finalCancelText" :variant="actionConfig.variant" size="md"
+    @confirm="handleConfirm"
     @cancel="handleCancel"
 >
     <!-- Slot untuk informasi tambahan record -->
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/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}`)
+  }
+}

From 56109564cb3c473172a86de167b7cce816a36973 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Thu, 13 Nov 2025 16:16:26 +0700
Subject: [PATCH 10/40] Feat: API Integration supporting doc upload

---
 .../_common/select-doc-type.vue               | 14 +---
 .../app/document-upload/entry-form.vue        | 10 +--
 .../app/document-upload/list.cfg.ts           |  4 +-
 app/components/app/document-upload/list.vue   |  6 +-
 .../content/document-upload/add.vue           | 46 ++++++-----
 .../content/document-upload/edit.vue          | 54 ++++++++-----
 .../content/document-upload/list.vue          | 27 ++++---
 app/components/content/encounter/process.vue  | 19 +++--
 .../pub/my-ui/data/dropdown-action-dd.vue     | 80 +++++++++++++++++++
 app/components/pub/my-ui/form/file-field.vue  |  2 +-
 app/handlers/supporting-document.handler.ts   | 24 ++++++
 app/lib/constants.ts                          | 38 +++++++++
 app/lib/utils.ts                              | 48 +++++++++++
 app/models/encounter-document.ts              | 29 +++++++
 app/models/encounter.ts                       |  5 +-
 .../rehab/encounter/[id]/process.vue          | 14 ++--
 .../(features)/rehab/encounter/index.vue      |  8 +-
 app/schemas/document-upload.schema.ts         | 19 ++++-
 app/services/supporting-document.service.ts   | 55 +++++++++++++
 19 files changed, 401 insertions(+), 101 deletions(-)
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dd.vue
 create mode 100644 app/handlers/supporting-document.handler.ts
 create mode 100644 app/models/encounter-document.ts
 create mode 100644 app/services/supporting-document.service.ts

diff --git a/app/components/app/document-upload/_common/select-doc-type.vue b/app/components/app/document-upload/_common/select-doc-type.vue
index 26b1bb87..0e86f596 100644
--- a/app/components/app/document-upload/_common/select-doc-type.vue
+++ b/app/components/app/document-upload/_common/select-doc-type.vue
@@ -2,7 +2,7 @@
 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 { supportingDocTypeCode, supportingDocOpt, type supportingDocTypeCodeKey } from '~/lib/constants'
 import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
 import { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
 
@@ -31,16 +31,6 @@ const {
   labelClass,
 } = props
 
-const docTypeOpts : Item[] = [
-  {
-    label: 'Surat Keterangan Sehat',
-    value: 'sksehat',
-  },
-  {
-    label: 'Surat Keterangan Sakit',
-    value: 'sksakit',
-  },
-]
 </script>
 
 <template>
@@ -67,7 +57,7 @@ const docTypeOpts : Item[] = [
               class="focus:ring-0 focus:ring-offset-0"
               :id="fieldName"
               v-bind="componentField"
-              :items="docTypeOpts"
+              :items="supportingDocOpt"
               :placeholder="placeholder"
               search-placeholder="Cari..."
               empty-message="Data tidak ditemukan"
diff --git a/app/components/app/document-upload/entry-form.vue b/app/components/app/document-upload/entry-form.vue
index 7197c02b..f97a5161 100644
--- a/app/components/app/document-upload/entry-form.vue
+++ b/app/components/app/document-upload/entry-form.vue
@@ -12,10 +12,6 @@ const props = defineProps<{
   schema: any
   initialValues?: any
   errors?: FormErrors
-
-  selectedUnitId?: number | null
-  selectedSpecialistId?: number | null
-  selectedSubSpecialistId?: number | null
 }>()
 
 const formSchema = toTypedSchema(props.schema)
@@ -51,19 +47,19 @@ defineExpose({
         <Separator class="w-full my-4"/>
         <DE.Block :col-count="3" :cell-flex="false">
           <InputBase
-            field-name="doc_name"
+            field-name="name"
             label="Nama Dokumen"
             placeholder="Maukkan Nama Dokumen"
           />
           <SelectDocType
-            field-name="doc_type"
+            field-name="type_code"
             label="Tipe Dokumen"
             placeholder="Pilih Jenis Dokumen"
             :errors="errors"
             is-required
           />
           <FileField
-            field-name="file"
+            field-name="content"
             label="Upload Dokumen"
             placeholder="Unggah dokumen"
             :errors="errors"
diff --git a/app/components/app/document-upload/list.cfg.ts b/app/components/app/document-upload/list.cfg.ts
index dbe2a679..508ad3ea 100644
--- a/app/components/app/document-upload/list.cfg.ts
+++ b/app/components/app/document-upload/list.cfg.ts
@@ -1,7 +1,7 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
 
 export const config: Config = {
   cols: [{}, {}, {}, {width: 50},],
@@ -15,7 +15,7 @@ export const config: Config = {
     ],
   ],
 
-  keys: ['specialist.name', 'subspecialist.name', 'subspecialist.name', 'action'],
+  keys: ['fileName', 'type_code', 'employee.name', 'action'],
 
   delKeyNames: [
 
diff --git a/app/components/app/document-upload/list.vue b/app/components/app/document-upload/list.vue
index 8274e752..dde32820 100644
--- a/app/components/app/document-upload/list.vue
+++ b/app/components/app/document-upload/list.vue
@@ -5,7 +5,7 @@ import { config } from './list.cfg'
 
 interface Props {
   data: any[]
-  paginationMeta: PaginationMeta
+  // paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -24,8 +24,8 @@ function handlePageChange(page: number) {
     <PubMyUiDataTable
       v-bind="config"
       :rows="data"
-      :skeleton-size="paginationMeta?.pageSize"
     />
-    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <!-- :skeleton-size="paginationMeta?.pageSize" -->
+    <!-- <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
   </div>
 </template>
diff --git a/app/components/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
index 6fbc43f5..5ee3d862 100644
--- a/app/components/content/document-upload/add.vue
+++ b/app/components/content/document-upload/add.vue
@@ -2,10 +2,12 @@
 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/patient.handler'
+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 { uploadAttachment } from '~/services/supporting-document.service'
+import { printFormData, toFormData } from '~/lib/utils'
 
 // #region Props & Emits
 const props = defineProps<{
@@ -16,11 +18,15 @@ const props = defineProps<{
 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
@@ -31,42 +37,42 @@ function goBack() {
   router.go(-1)
 }
 
+
 async function handleConfirmAdd() {
-  const controlLetter = await composeFormData()
-  let createdControlLetterId = 0
-
-  const response = await handleActionSave(
-    controlLetter,
-    () => { },
-    () => { },
-    toast,
-  )
+  const inputData = await composeFormData()
+  const inputFormData: FormData = toFormData(inputData)
 
+  const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
   const data = (response?.body?.data ?? null)
   if (!data) return
-  createdControlLetterId = data.id
 
   // // If has callback provided redirect to callback with patientData
   if (props.callbackUrl) {
-    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+    navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
   }
-
   goBack()
 }
 
 async function composeFormData(): Promise<any> {
-  const [controlLetter,] = await Promise.all([
+  inputForm.value?.setValues({
+    ...inputForm.value?.values,
+    ref_id: encounterId,
+    upload_employee_id: user.user_id
+  })
+
+  const [inputFormState,] = await Promise.all([
     inputForm.value?.validate(),
   ])
 
-  const results = [controlLetter]
+  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 = controlLetter?.values
-  formData.encounter_id = encounterId
+  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
@@ -82,7 +88,6 @@ async function handleActionClick(eventType: string) {
       await navigateTo(props.callbackUrl)
       return
     }
-
     goBack()
   }
 }
@@ -103,6 +108,7 @@ function handleCancelAdd() {
   <AppDocumentUploadEntryForm
     ref="inputForm"
     :schema="DocumentUploadSchema"
+    :initial-values="initialValues"
   />
 
   <div class="mb-2 flex justify-end py-2">
diff --git a/app/components/content/document-upload/edit.vue b/app/components/content/document-upload/edit.vue
index 63f1fc09..c4033fb2 100644
--- a/app/components/content/document-upload/edit.vue
+++ b/app/components/content/document-upload/edit.vue
@@ -2,10 +2,11 @@
 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/patient.handler'
+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<{
@@ -15,15 +16,26 @@ const props = defineProps<{
 // 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
@@ -32,40 +44,39 @@ function goBack() {
 }
 
 async function handleConfirmAdd() {
-  const controlLetter = await composeFormData()
-  let createdControlLetterId = 0
+  const inputData = await composeFormData()
+  let createdDataId = 0
 
-  const response = await handleActionSave(
-    controlLetter,
-    () => { },
-    () => { },
-    toast,
-  )
+  // const response = await handleActionSave(
+  //   inputData,
+  //   () => { },
+  //   () => { },
+  //   toast,
+  // )
 
-  const data = (response?.body?.data ?? null)
-  if (!data) return
-  createdControlLetterId = data.id
+  // 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=' + controlLetter.id)
-  }
-
-  goBack()
+  // // // 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 [controlLetter,] = await Promise.all([
+  const [inputFormState,] = await Promise.all([
     inputForm.value?.validate(),
   ])
 
-  const results = [controlLetter]
+  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 = controlLetter?.values
+  const formData = inputFormState?.values
   formData.encounter_id = encounterId
   return new Promise((resolve) => resolve(formData))
 }
@@ -103,6 +114,7 @@ function handleCancelAdd() {
   <AppDocumentUploadEntryForm
     ref="inputForm"
     :schema="DocumentUploadSchema"
+    :initial-values="initialValues"
   />
 
   <div class="my-2 flex justify-end py-2">
diff --git a/app/components/content/document-upload/list.vue b/app/components/content/document-upload/list.vue
index c69ac96b..94f9dd9f 100644
--- a/app/components/content/document-upload/list.vue
+++ b/app/components/content/document-upload/list.vue
@@ -4,28 +4,31 @@ import { ActionEvents } 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 { usePaginatedList } from '~/composables/usePaginatedList'
-import { getList, remove } from '~/services/control-letter.service'
+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 { genEncounterDocument } from '~/models/encounter-document'
 // #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, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
-  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
-  entityName: 'control-letter',
+const dummy = computed(() => {
+  return props.encounter?.encounterDocuments || []
 })
 
 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",
@@ -53,7 +56,7 @@ async function handleConfirmDelete(record: any, action: string) {
       const result = await remove(record.id)
       if (result.success) {
         toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
-        await fetchData()
+        props.refresh()
       } else {
         toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
       }
@@ -63,6 +66,7 @@ async function handleConfirmDelete(record: any, action: string) {
   }
 }
 
+
 function handleCancelConfirmation() {
   // Reset record state when cancelled
   recId.value = 0
@@ -75,13 +79,14 @@ function handleCancelConfirmation() {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('timestamp', timestamp)
 // #endregion
 
 // #region Watchers
-watch([recId, recAction], () => {
+watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo("https://google.com", { external: true, open: { target: '_blank' } })
+      navigateTo(recItem.value.filePath, { external: true, open: { target: '_blank' } })
       break
     case ActionEvents.showEdit:
       navigateTo({
@@ -99,7 +104,7 @@ watch([recId, recAction], () => {
 
 <template>
   <Header :prep="{ ...headerPrep }"/>
-  <AppDocumentUploadList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppDocumentUploadList :data="dummy"/>
 
   <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
       @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
@@ -111,11 +116,7 @@ watch([recId, recAction], () => {
           </p>
           <p v-if="record?.firstName">
             <strong>Nama:</strong>
-            {{ record.firstName }}
-          </p>
-          <p v-if="record?.code">
-            <strong>Kode:</strong>
-            {{ record.cellphone }}
+            {{ record.name }}
           </p>
         </div>
       </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 7d178303..1f9a37a1 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -17,6 +17,7 @@ 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 DocUploadList from '~/components/content/document-upload/list.vue'
+import { genEncounter } from '~/models/encounter'
 
 const route = useRoute()
 const router = useRouter()
@@ -30,12 +31,18 @@ const activeTab = computed({
 })
 
 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 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 dataResBody = dataRes.body ?? null
-const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
@@ -73,7 +80,7 @@ const tabs: TabItem[] = [
   { value: 'resume', label: 'Resume' },
   { value: 'control', label: 'Surat Kontrol' },
   { value: 'screening', label: 'Skrinning MPP' },
-  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data } },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data, },  },
 ]
 </script>
 
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/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/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/lib/constants.ts b/app/lib/constants.ts
index 3a52b22e..f684594e 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -383,3 +383,41 @@ 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 supportingDocTypeCode = {
+  "encounter-patient": 'encounter-patient',
+  "encounter-suport": 'encounter-suport',
+  "encounter-other": 'encounter-other',
+} as const
+export const supportingDocTypeLabel = {
+  "encounter-patient": 'Data Pasien',
+  "encounter-suport": 'Data Penunjang',
+  "encounter-other": 'Lain - Lain',
+} as const
+export type supportingDocTypeCodeKey = keyof typeof supportingDocTypeCode
+export const supportingDocOpt = [
+  { label: 'Data Pasien', value: 'encounter-patient' },
+  { label: 'Data Penunjang', value: 'encounter-suport' },
+  { label: 'Lain - Lain', value: 'encounter-other' },
+]
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 357d8700..9c0aada8 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -104,3 +104,51 @@ 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("-------------------------");
+}
\ No newline at end of file
diff --git a/app/models/encounter-document.ts b/app/models/encounter-document.ts
new file mode 100644
index 00000000..c4f9898c
--- /dev/null
+++ b/app/models/encounter-document.ts
@@ -0,0 +1,29 @@
+import { type Base, genBase } from "./_base"
+import { supportingDocOpt, supportingDocTypeCode, supportingDocTypeLabel, type supportingDocTypeCodeKey } 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: supportingDocTypeLabel["encounter-patient"],
+    name: 'example',
+    filePath: 'https://bing.com',
+    fileName: 'example',
+  }
+}
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index fb2c0b04..55fbdfa4 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"
@@ -37,6 +38,7 @@ export interface Encounter {
     internalReferences?: InternalReference[]
     deathCause?: DeathCause
     status_code: string
+    encounterDocuments: EncounterDocument[]
 }
 
 export function genEncounter(): Encounter {
@@ -54,7 +56,8 @@ export function genEncounter(): Encounter {
         appointment_doctor_id: 0,
         appointment_doctor: genDoctor(),
         medicalDischargeEducation: '',
-        status_code: ''
+        status_code: '',
+        encounterDocuments: [],
     }
 }
 
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
index 3fa7525a..abd0efa7 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -22,15 +22,15 @@ const { checkRole, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
+// if (!hasAccess) {
+//   throw createError({
+//     statusCode: 403,
+//     statusMessage: 'Access denied',
+//   })
+// }
 
 // Define permission-based computed properties
-const canCreate = hasCreateAccess(roleAccess)
+const canCreate = true // hasCreateAccess(roleAccess)
 </script>
 
 <template>
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
index 7a8564a8..9deaeb1f 100644
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -22,12 +22,12 @@ 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/document-upload.schema.ts b/app/schemas/document-upload.schema.ts
index ffd56e36..7f7de622 100644
--- a/app/schemas/document-upload.schema.ts
+++ b/app/schemas/document-upload.schema.ts
@@ -1,10 +1,21 @@
 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({
-  officer: z.string({    required_error: 'Mohon isi',  }),
-  doc_name: z.number({    required_error: 'Mohon isi',  }),
-  doc_type: z.number({    required_error: 'Mohon isi',  }),
-  file: z.number({    required_error: 'Mohon isi',  }),
+  entityType_code: z.string().default('encounter'),
+  ref_id: z.number(),
+  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>
diff --git a/app/services/supporting-document.service.ts b/app/services/supporting-document.service.ts
new file mode 100644
index 00000000..b02cec0e
--- /dev/null
+++ b/app/services/supporting-document.service.ts
@@ -0,0 +1,55 @@
+// Base
+import * as base from './_crud-base'
+
+// Constants
+import { encounterClassCodes, uploadCode, type UploadCodeKey } from '~/lib/constants'
+
+const path = '/api/v1/upload'
+const name = 'upload'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+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')
+  }
+}
\ No newline at end of file

From 1d03258f4403122fabf43148c739756191470971 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 14 Nov 2025 14:08:47 +0700
Subject: [PATCH 11/40] Fix: Typo uplaod doc type

---
 app/lib/constants.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index f684594e..430b2902 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -407,17 +407,17 @@ export const encounterDocOpt: { label: string; value: encounterDocTypeCodeKey }[
 
 export const supportingDocTypeCode = {
   "encounter-patient": 'encounter-patient',
-  "encounter-suport": 'encounter-suport',
+  "encounter-support": 'encounter-support',
   "encounter-other": 'encounter-other',
 } as const
 export const supportingDocTypeLabel = {
   "encounter-patient": 'Data Pasien',
-  "encounter-suport": 'Data Penunjang',
+  "encounter-support": 'Data Penunjang',
   "encounter-other": 'Lain - Lain',
 } as const
 export type supportingDocTypeCodeKey = keyof typeof supportingDocTypeCode
 export const supportingDocOpt = [
   { label: 'Data Pasien', value: 'encounter-patient' },
-  { label: 'Data Penunjang', value: 'encounter-suport' },
+  { label: 'Data Penunjang', value: 'encounter-support' },
   { label: 'Lain - Lain', value: 'encounter-other' },
 ]

From 60c13649d9ccc0653136bfc41e70c3ab73278a80 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 14 Nov 2025 14:55:32 +0700
Subject: [PATCH 12/40] Fix: debug Uplaod Doc

---
 app/components/app/document-upload/list.vue   |  6 ++--
 .../content/document-upload/add.vue           |  2 +-
 .../content/document-upload/list.vue          | 35 +++++++++++++------
 app/services/supporting-document.service.ts   |  7 ++--
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/app/components/app/document-upload/list.vue b/app/components/app/document-upload/list.vue
index dde32820..8274e752 100644
--- a/app/components/app/document-upload/list.vue
+++ b/app/components/app/document-upload/list.vue
@@ -5,7 +5,7 @@ import { config } from './list.cfg'
 
 interface Props {
   data: any[]
-  // paginationMeta: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -24,8 +24,8 @@ function handlePageChange(page: number) {
     <PubMyUiDataTable
       v-bind="config"
       :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
     />
-    <!-- :skeleton-size="paginationMeta?.pageSize" -->
-    <!-- <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
index 5ee3d862..7d42f4f6 100644
--- a/app/components/content/document-upload/add.vue
+++ b/app/components/content/document-upload/add.vue
@@ -57,7 +57,7 @@ async function composeFormData(): Promise<any> {
   inputForm.value?.setValues({
     ...inputForm.value?.values,
     ref_id: encounterId,
-    upload_employee_id: user.user_id
+    upload_employee_id: user.employee_id
   })
 
   const [inputFormState,] = await Promise.all([
diff --git a/app/components/content/document-upload/list.vue b/app/components/content/document-upload/list.vue
index 94f9dd9f..be690871 100644
--- a/app/components/content/document-upload/list.vue
+++ b/app/components/content/document-upload/list.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 // #region Imports
 import { ActionEvents } from '~/components/pub/my-ui/data/types'
-import type { HeaderPrep, } 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 { usePaginatedList } from '~/composables/usePaginatedList'
 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 { genEncounterDocument } from '~/models/encounter-document'
 // #endregion
 
 // #region State
@@ -20,8 +18,9 @@ const props = defineProps<{
 const route = useRoute()
 const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 
-const dummy = computed(() => {
-  return props.encounter?.encounterDocuments || []
+const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ 'encounter-id': encounterId, ...params }),
+  entityName: 'encounter-document',
 })
 
 const isRecordConfirmationOpen = ref(false)
@@ -41,6 +40,18 @@ const headerPrep: HeaderPrep = {
       }),
   },
 }
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
 // #endregion
 
 // #region Lifecycle Hooks
@@ -56,7 +67,7 @@ async function handleConfirmDelete(record: any, action: string) {
       const result = await remove(record.id)
       if (result.success) {
         toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
-        props.refresh()
+        fetchData()
       } else {
         toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
       }
@@ -103,8 +114,12 @@ watch([recId, recAction, timestamp], () => {
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }"/>
-  <AppDocumentUploadList :data="dummy"/>
+  <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">
@@ -114,9 +129,9 @@ watch([recId, recAction, timestamp], () => {
             <strong>ID:</strong>
             {{ record?.id }}
           </p>
-          <p v-if="record?.firstName">
+          <p v-if="record?.name">
             <strong>Nama:</strong>
-            {{ record.name }}
+            {{ record?.name }}
           </p>
         </div>
       </template>
diff --git a/app/services/supporting-document.service.ts b/app/services/supporting-document.service.ts
index b02cec0e..46eaffa9 100644
--- a/app/services/supporting-document.service.ts
+++ b/app/services/supporting-document.service.ts
@@ -4,11 +4,12 @@ import * as base from './_crud-base'
 // Constants
 import { encounterClassCodes, uploadCode, type UploadCodeKey } from '~/lib/constants'
 
-const path = '/api/v1/upload'
-const name = 'upload'
+const path = '/api/v1/encounter-document'
+const create_path = '/api/v1/upload'
+const name = 'encounter-document'
 
 export function create(data: any) {
-  return base.create(path, data, name)
+  return base.create(create_path, data, name)
 }
 
 export function getList(params: any = null) {

From bb0017ffcb8ec0b0a53b01ffeba3e04d3a247995 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 14 Nov 2025 15:47:11 +0700
Subject: [PATCH 13/40] Fix: refactor constList Uplaod Doc

---
 .../app/document-upload/_common/select-doc-type.vue    |  2 +-
 app/components/app/document-upload/list.cfg.ts         |  5 +++++
 app/lib/constants.ts                                   | 10 +++++++---
 app/models/encounter-document.ts                       |  4 ++--
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/components/app/document-upload/_common/select-doc-type.vue b/app/components/app/document-upload/_common/select-doc-type.vue
index 0e86f596..70f78a7b 100644
--- a/app/components/app/document-upload/_common/select-doc-type.vue
+++ b/app/components/app/document-upload/_common/select-doc-type.vue
@@ -2,7 +2,7 @@
 import type { FormErrors } from '~/types/error'
 import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import { cn, mapToComboboxOptList } from '~/lib/utils'
-import { supportingDocTypeCode, supportingDocOpt, type supportingDocTypeCodeKey } from '~/lib/constants'
+import { docTypeCode, supportingDocOpt, type docTypeCodeKey } from '~/lib/constants'
 import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
 import { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
 
diff --git a/app/components/app/document-upload/list.cfg.ts b/app/components/app/document-upload/list.cfg.ts
index 508ad3ea..7f275d31 100644
--- a/app/components/app/document-upload/list.cfg.ts
+++ b/app/components/app/document-upload/list.cfg.ts
@@ -1,5 +1,6 @@
 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'))
 
@@ -22,6 +23,10 @@ export const config: Config = {
   ],
 
   parses: {
+    type_code: (v: unknown) => {
+      console.log(v)
+      return docTypeLabel[v as docTypeCodeKey]
+    },
   },
 
   components: {
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 430b2902..48fb5c8c 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -405,17 +405,21 @@ export const encounterDocOpt: { label: string; value: encounterDocTypeCodeKey }[
 ]
 
 
-export const supportingDocTypeCode = {
+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 supportingDocTypeLabel = {
+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 supportingDocTypeCodeKey = keyof typeof supportingDocTypeCode
+export type docTypeCodeKey = keyof typeof docTypeCode
 export const supportingDocOpt = [
   { label: 'Data Pasien', value: 'encounter-patient' },
   { label: 'Data Penunjang', value: 'encounter-support' },
diff --git a/app/models/encounter-document.ts b/app/models/encounter-document.ts
index c4f9898c..5a98ccd5 100644
--- a/app/models/encounter-document.ts
+++ b/app/models/encounter-document.ts
@@ -1,5 +1,5 @@
 import { type Base, genBase } from "./_base"
-import { supportingDocOpt, supportingDocTypeCode, supportingDocTypeLabel, type supportingDocTypeCodeKey } from '~/lib/constants'
+import { docTypeLabel, } from '~/lib/constants'
 import { genEmployee, type Employee } from "./employee"
 import { genEncounter, type Encounter } from "./encounter"
 
@@ -21,7 +21,7 @@ export function genEncounterDocument(): EncounterDocument {
     encounter: genEncounter(),
     upload_employee_id: 0,
     employee: genEmployee(),
-    type_code: supportingDocTypeLabel["encounter-patient"],
+    type_code: docTypeLabel["encounter-patient"],
     name: 'example',
     filePath: 'https://bing.com',
     fileName: 'example',

From d0aa69d9a155abd09aaeb93c96e2808bddb54dfe Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 14 Nov 2025 17:12:17 +0700
Subject: [PATCH 14/40] Fix: debug table typo Uplaod Doc

---
 app/components/app/document-upload/list.cfg.ts  | 3 +--
 app/components/content/document-upload/list.vue | 6 +++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/app/document-upload/list.cfg.ts b/app/components/app/document-upload/list.cfg.ts
index 7f275d31..979c916d 100644
--- a/app/components/app/document-upload/list.cfg.ts
+++ b/app/components/app/document-upload/list.cfg.ts
@@ -24,8 +24,7 @@ export const config: Config = {
 
   parses: {
     type_code: (v: unknown) => {
-      console.log(v)
-      return docTypeLabel[v as docTypeCodeKey]
+      return docTypeLabel[v?.type_code as docTypeCodeKey]
     },
   },
 
diff --git a/app/components/content/document-upload/list.vue b/app/components/content/document-upload/list.vue
index be690871..2ddbb77c 100644
--- a/app/components/content/document-upload/list.vue
+++ b/app/components/content/document-upload/list.vue
@@ -19,7 +19,11 @@ 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, ...params }),
+  fetchFn: (params) => getList({ 
+    'encounter-id': encounterId,
+    // includes: "employee",
+    ...params,
+  }),
   entityName: 'encounter-document',
 })
 

From 224bc7cd610f4c09c62b3a1d1d2cf6d645e67a7d Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Sat, 15 Nov 2025 20:13:15 +0700
Subject: [PATCH 15/40] feat/prescription: integrated non-mix

---
 .../app/prescription-item/list-entry.cfg.ts   |  2 +-
 .../app/prescription-item/mix-entry.vue       | 32 ++++--
 .../app/prescription-item/non-mix-entry.vue   | 65 ++++++++----
 app/components/content/prescription/entry.vue | 98 ++++++++++++-------
 app/components/content/prescription/list.vue  | 10 ++
 app/models/medicine.ts                        | 11 ++-
 app/models/medicinemix-item.ts                |  4 +-
 app/models/prescription-item.ts               | 29 +++---
 8 files changed, 167 insertions(+), 84 deletions(-)

diff --git a/app/components/app/prescription-item/list-entry.cfg.ts b/app/components/app/prescription-item/list-entry.cfg.ts
index 070dd65f..19b2f3d8 100644
--- a/app/components/app/prescription-item/list-entry.cfg.ts
+++ b/app/components/app/prescription-item/list-entry.cfg.ts
@@ -20,7 +20,7 @@ export const config: Config = {
     ],
   ],
 
-  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+  keys: ['medicine.name', 'medicine.medicineForm.name', 'frequency', 'dose', 'interval', 'total', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index d9b4881e..187e9569 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -1,29 +1,37 @@
 <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[]>([])
+const selectedMedicine_code = ref<string>(props.data.medicine?.code || '')
+
 type ClickType = 'close' | 'save'
 
 const emit = defineEmits<{
   close: [],
   save: [data: PrescriptionItem, items: MedicinemixItem[]],
+  'update:searchText': [value: string]
 }>()
 
+watch(medicines, (data) => {
+  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -42,13 +50,19 @@ function addItem() {
     uom_code: '',
   })
 }
+
+function searchMedicineText(value: string) {
+  emit('update:searchText', value)
+}
 </script>
 
 <template>
-  <DE.Block :colCount="5" :cellFlex="false">
-    <DE.Cell :colSpan="5">
+  <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.Field>
+          <Input :value="data.medicineMix?.name" />
+        </DE.Field>
     </DE.Cell>
     <DE.Cell>
         <DE.Label>Frequensi</DE.Label>
@@ -66,7 +80,7 @@ function addItem() {
         <DE.Label>Total</DE.Label>
         <DE.Field><Input /></DE.Field>
     </DE.Cell>
-    <DE.Cell :colSpan="5">
+    <DE.Cell :colSpan="4">
         <DE.Label>Cara Pakai</DE.Label>
         <DE.Field><Input /></DE.Field>
     </DE.Cell>
@@ -102,7 +116,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..9115eeb9 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -2,15 +2,26 @@
 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, genMedicine } 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--'
+})
+// const selectedMedicine_code = ref<string>(props.data.medicine_code || '')
+
 type ClickType = 'close' | 'save'
 type Item = {
   value: string
@@ -23,19 +34,23 @@ if(!props.data.intervalUnit_code) {
   props.data.intervalUnit_code = 'day'
 }
 
-Object.keys(bigTimeUnitCodes).forEach((key) => {
-  bigTimeUnitCodeItems.push({
-    value: key,
-    label: bigTimeUnitCodes[key] || '',
-  })
-})
-
+// 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.objectsToItem(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -43,13 +58,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 +84,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,14 +92,18 @@ 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.Cell>
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
index 4b3fa663..3ad9d572 100644
--- a/app/components/content/prescription/entry.vue
+++ b/app/components/content/prescription/entry.vue
@@ -6,20 +6,27 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 
+// medicine
+import { type Medicine } from '~/models/medicine'
+
+// prescription
 import { getDetail } from '~/services/prescription.service'
+import { getList as getMedicineList } from '~/services/medicine.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'
 
+// prescription items
 import {
-  recItem,
-} from '~/handlers/prescription-item.handler'
+  getList as getPrescriptionItemList,
+  create as createPrescriptionItem,
+  remove as removePrescriptionItem,
+} from '~/services/prescription-item.service'
+import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import type { MedicinemixItem } from '~/models/medicinemix-item';
+
+import { recItem } from '~/handlers/prescription-item.handler'
+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<{
@@ -27,7 +34,8 @@ const props = defineProps<{
 }>()
 
 // declaration & flows
-// const route = useRoute()
+
+// Prescription
 const { getQueryParam } = useQueryParam()
 const id = getQueryParam('id')
 const dataRes = await getDetail(
@@ -35,21 +43,15 @@ const dataRes = await getDetail(
   { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
 )
 const data = dataRes.body?.data || null
-const items = ref(data?.items || [])
 
-const {
-  data: prescriptionItems,
-  fetchData: getMyList,
-} = usePaginatedList<PrescriptionItem> ({
-  fetchFn: async ({ page, search }) => {
-    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
-    if (result.success) {
-      data.value = result.body.data
-    }
-    return { success: result.success || false, body: result.body || {} }
-  },
-  entityName: 'prescription-item',
-})
+// Prescription Items
+const items = ref<PrescriptionItem[]>([])
+const mixItem = ref<PrescriptionItem>(genPrescriptionItem())
+const medicinemixItems = ref<MedicinemixItem[]>([])
+const nonMixItem = ref<PrescriptionItem>(genPrescriptionItem())
+
+mixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
+nonMixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
 
 const { backToList } = useQueryCRUDMode()
 
@@ -60,6 +62,11 @@ const headerPrep: HeaderPrep = {
 
 const mixDialogOpen = ref(false)
 const nonMixDialogOpen = ref(false)
+const medicines = ref<Medicine[]>([])
+
+onMounted(async () => {
+  await getItems()
+})
 
 function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
   if (type === 'back') {
@@ -76,11 +83,29 @@ function addItem(mode: 'mix' | 'non-mix') {
 }
 
 function saveMix() {
-  create({data})
+  createPrescriptionItem(mixItem.value)
 }
 
-function saveNonMix(data: PrescriptionItem) {
-  create({data})
+function saveNonMix() {
+  createPrescriptionItem(nonMixItem.value)
+}
+
+async function getItems() {
+  const res = await getPrescriptionItemList({ 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' })
+  if (res.success) {
+      items.value = res.body.data
+  } else {
+    items.value = []
+  }
+}
+
+async function getMedicines(value: string) {
+  const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm' })
+  if (res.success) {
+    medicines.value = res.body.data
+  } else {
+    medicines.value = []
+  }
 }
 </script>
 
@@ -94,7 +119,7 @@ function saveNonMix(data: PrescriptionItem) {
   <Detail :data="data" />
 
   <ItemListEntry
-    :data="prescriptionItems"
+    :data="items"
     @add="addItem"/>
   <Separator class="my-5" />
 
@@ -105,28 +130,31 @@ function saveNonMix(data: PrescriptionItem) {
   <Dialog
     v-model:open="mixDialogOpen"
     :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
-    size="xl"
+    size="lg"
     prevent-outside
   >
     <MixItemEntry
-      :data="data"
-      :items="items"
+      :data="mixItem"
+      :items="medicinemixItems"
+      :medicines="medicines"
       @close="mixDialogOpen = false"
       @save="saveMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
 
   <Dialog
     v-model:open="nonMixDialogOpen"
     :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
-    size="xl"
+    size="lg"
     prevent-outside
   >
     <NonMixItemEntry
-      :data="data"
-      :items="items"
+      :data="nonMixItem"
+      :medicines="medicines"
       @close="mixDialogOpen = false"
       @save="saveNonMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
 </template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 68e2069f..8d83f477 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -177,6 +177,16 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
     @confirm="() => handleActionRemove(recId, getMyList, toast)"
     @cancel=""
   >
+    <div class="flex">
+      <div class="w-40">Tanggal</div>
+      <div class="w-5 text-cneter">:</div>
+      <div class="">:</div>
+    </div>
+    <div class="flex">
+      <div class="w-40">Tanggal</div>
+      <div class="w-5 text-cneter">:</div>
+      <div class="">:</div>
+    </div>
   </RecordConfirmation>
 
   <RecordConfirmation
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

From b847886601d04a378a8551e4304f59a17810f7dc Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Sat, 15 Nov 2025 22:40:23 +0700
Subject: [PATCH 16/40] feat/prescription: more adjustment

---
 app/components/app/prescription-item/list.cfg.ts | 3 +--
 app/components/app/prescription-item/list.vue    | 4 +++-
 app/components/app/prescription/detail.vue       | 2 +-
 app/components/app/prescription/list.vue         | 2 +-
 app/components/content/prescription/list.vue     | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)

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/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/list.vue b/app/components/app/prescription/list.vue
index fbff7b10..07d6fcaa 100644
--- a/app/components/app/prescription/list.vue
+++ b/app/components/app/prescription/list.vue
@@ -65,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/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 8d83f477..5042a74b 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -50,7 +50,7 @@ const {
       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',
     })
     return { success: result.success || false, body: result.body || {} }
   },

From 391469e633de8b1e81736635dec8bcc50afa6da5 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Sun, 16 Nov 2025 08:15:19 +0700
Subject: [PATCH 17/40] feat/prescription: added group and flat list

---
 .../app/prescription-item/mix-entry.vue       |  2 +-
 .../app/prescription-item/non-mix-entry.vue   |  2 +-
 app/components/app/prescription/flat-list.vue | 88 +++++++++++++++++++
 .../{list.vue => grouped-list.vue}            |  0
 app/components/content/prescription/list.vue  | 47 ++++++++--
 .../pub/my-ui/data-table/data-table.vue       |  4 +-
 6 files changed, 130 insertions(+), 13 deletions(-)
 create mode 100644 app/components/app/prescription/flat-list.vue
 rename app/components/app/prescription/{list.vue => grouped-list.vue} (100%)

diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index 187e9569..5a3c74fd 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
index 9115eeb9..90cf3e01 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -48,7 +48,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {
diff --git a/app/components/app/prescription/flat-list.vue b/app/components/app/prescription/flat-list.vue
new file mode 100644
index 00000000..cf563ef2
--- /dev/null
+++ b/app/components/app/prescription/flat-list.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+
+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 100%
rename from app/components/app/prescription/list.vue
rename to app/components/app/prescription/grouped-list.vue
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 5042a74b..af24808f 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -20,7 +20,8 @@ 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'
 import { submit } from '~/services/prescription.service'
 import type { ToastFn } from '~/handlers/_handler'
@@ -57,9 +58,25 @@ const {
   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 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,
@@ -161,14 +178,26 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <List
-    v-if="!isLoading.dataListLoading"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @cancel="confirmCancel"
-    @edit="goToEdit"
-    @submit="confirmSubmit"
-  />
+  <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"
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..ecf2bf46 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -22,7 +22,7 @@ const selected = ref<any[]>([])
 function toggleSelection(row: any, event?: Event) {
   if (event) event.stopPropagation() // cegah event bubble ke TableRow
 
-  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' || 
 
   // gunakan pembanding berdasarkan id atau stringify data
   const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
@@ -128,7 +128,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           'bg-green-50':
             props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
           'bg-blue-50':
-            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' || 
             selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"

From 7253272681411379b732340e1d84556c914d595d Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Sun, 16 Nov 2025 11:21:02 +0700
Subject: [PATCH 18/40] feat/device-order: adjustment wip

---
 .../app/device-order/list.config.ts           |  35 ++++--
 app/components/app/device-order/list.vue      |   8 +-
 app/components/content/device-order/list.vue  | 106 +++++++++++++-----
 app/models/device-order.ts                    |   3 +
 4 files changed, 110 insertions(+), 42 deletions(-)

diff --git a/app/components/app/device-order/list.config.ts b/app/components/app/device-order/list.config.ts
index 7580c576..0e0d068d 100644
--- a/app/components/app/device-order/list.config.ts
+++ b/app/components/app/device-order/list.config.ts
@@ -1,13 +1,20 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 import type { DeviceOrder } from '~/models/device-order'
-import { defineAsyncComponent } from 'vue'
+// import type {} from 
+// import { defineAsyncComponent } from 'vue'
+
+// const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
 export const config: Config = {
-  cols: [{ width: 120 }, { }, { }, { width: 50 }],
-  headers: [[{ label: 'Tanggal' }, { label: 'DPJP' }, { label: 'Alat Kesehatan' }, { label: '' }]],
-  keys: ['createdAt', 'encounter.doctor.person.name', 'items', 'action'],
+  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' },
@@ -18,13 +25,17 @@ export const config: Config = {
       const recX = rec as DeviceOrder
       return recX.items?.length || 0
     },
-  }
-  // funcParsed: {
-  //   parent: (rec: unknown): unknown => {
-  //     const recX = rec as SmallDetailDto
-  //     return recX.parent?.name || '-'
-  //   },
-  // },
+  },
+  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 || '-'
+    // },
+  },
   // funcComponent: {
   //   action(rec: object, idx: any) {
   //     const res: RecComponent = {
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/content/device-order/list.vue b/app/components/content/device-order/list.vue
index 1d0bd0fa..6c23cfc0 100644
--- a/app/components/content/device-order/list.vue
+++ b/app/components/content/device-order/list.vue
@@ -32,21 +32,18 @@ import {
   handleCancelForm,
 } from '~/handlers/device-order.handler'
 
-// 
-import { getList } from '~/services/device-order.service'
-
-// Props
-interface Props {
-  encounter_id: number
-}
-const props = defineProps<Props>()
+// Services
+import { getList, getDetail } from '~/services/device-order.service'
 
 const route = useRoute()
-const title = ref('')
+const { setQueryParams } = useQueryParam()
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
 
 // const { mode, openForm, backToList } = useQueryMode()
 const { mode, goToEntry, backToList } = useQueryCRUDMode()
-const { recordId } = useQueryCRUDRecordId()
+// const { recordId } = useQueryCRUDRecordId()
 
 const {
   data,
@@ -59,18 +56,18 @@ const {
 } = usePaginatedList({
   fetchFn: async (params: any) => {
     const result = await getList({
+      'encounter-id': encounter_id,
       search: params.search,
-      sort: 'createdAt:asc',
+      includes: 'doctor,doctor-employee,doctor-employee-person,items',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
-      // includes: 'encounter',
-      includes: 'parent,childrens',
     })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'device-order',
 })
 
+const voidFn = () => {}
 const headerPrep: HeaderPrep = {
   title: 'Order Alkes',
   icon: 'i-lucide-box',
@@ -89,19 +86,18 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah',
     icon: 'i-lucide-plus',
     onClick: async () => {
-      const data = {
-        encounter_id: props.encounter_id,
-      }
-      const dateResp = await handleActionSave(data, getMyList, () => {}, () => {})
-      if (dateResp.success) {
-        const currentData = dateResp.body.data || []
-        // goToEntry()
-      }
       recItem.value = null
       recId.value = 0
       isReadonly.value = false
+      const saveResp = await handleActionSave({ encounter_id }, voidFn, voidFn, voidFn)
+      if (saveResp.success) {
+        setQueryParams({
+          'mode': 'entry',
+          'id': saveResp.body?.data?.id.toString()
+        })
+      }
       // await handleActionSave(recItem, getMyList, () => {}, () => {})
-      goToEntry()
+      // goToEntry()
     },
   },
 }
@@ -111,10 +107,66 @@ 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], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      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()
+//       })
+//     }
+//   }
+// })
+
+// Watch for row actions when recId or recAction changes
+// onMounted(async () => {
+//   await getMyList()
+// })
+
+// Functions
+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
+  }
+}
+
+function cancel(data: DeviceOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: DeviceOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: DeviceOrder) {
+}
+
 </script>
 
 <template>
@@ -127,8 +179,12 @@ onMounted(async () => {
   />
 
   <List
+    v-if="!isLoading.dataListLoading"
     :data="data"
     :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
     @page-change="handlePageChange"
   />
 
diff --git a/app/models/device-order.ts b/app/models/device-order.ts
index 884340c5..f2e88b0f 100644
--- a/app/models/device-order.ts
+++ b/app/models/device-order.ts
@@ -1,9 +1,11 @@
 import { type Base, genBase } from "./_base"
+import type { DeviceOrderItem } from "./device-order-item"
 
 export interface DeviceOrder extends Base {
   encounter_id: number
   doctor_id: number
   status_code?: string
+  items: DeviceOrderItem[]
 }
 
 export function genDeviceOrder(): DeviceOrder {
@@ -11,5 +13,6 @@ export function genDeviceOrder(): DeviceOrder {
     ...genBase(),
     encounter_id: 0,
     doctor_id: 0,
+    items: []
   }
 }

From 0da8701a6c725e283a23c6ce69b52b30644bab74 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Sun, 16 Nov 2025 08:15:19 +0700
Subject: [PATCH 19/40] feat/prescription: added group and flat list

---
 .../app/prescription-item/mix-entry.vue       |  2 +-
 .../app/prescription-item/non-mix-entry.vue   |  2 +-
 app/components/app/prescription/flat-list.vue | 88 +++++++++++++++++
 .../{list.vue => grouped-list.vue}            |  0
 app/components/content/prescription/list.vue  | 94 +++++++++++++++----
 .../pub/my-ui/data-table/data-table.vue       |  4 +-
 6 files changed, 168 insertions(+), 22 deletions(-)
 create mode 100644 app/components/app/prescription/flat-list.vue
 rename app/components/app/prescription/{list.vue => grouped-list.vue} (100%)

diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index 187e9569..5a3c74fd 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
index 9115eeb9..90cf3e01 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -48,7 +48,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {
diff --git a/app/components/app/prescription/flat-list.vue b/app/components/app/prescription/flat-list.vue
new file mode 100644
index 00000000..cf563ef2
--- /dev/null
+++ b/app/components/app/prescription/flat-list.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+
+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 100%
rename from app/components/app/prescription/list.vue
rename to app/components/app/prescription/grouped-list.vue
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 5042a74b..9447a748 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -1,6 +1,8 @@
 <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 Header from '~/components/pub/my-ui/nav-header/prep.vue'
@@ -20,15 +22,12 @@ 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'
 import { submit } from '~/services/prescription.service'
 import type { ToastFn } from '~/handlers/_handler'
 
-const props = defineProps<{
-  encounter_id: number
-}>()
-
 const route = useRoute()
 const { setQueryParams } = useQueryParam()
 
@@ -45,21 +44,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,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 voidFn = () => {}
 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,
@@ -74,11 +92,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 }, voidFn, voidFn, voidFn)
+      if (saveResp.success) {
+        setQueryParams({
+          'mode': 'entry',
+          'id': saveResp.body?.data?.id.toString()
+        })
+      }
     },
   },
 }
@@ -88,6 +112,28 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      break
+  }
+})
+
+// watch([isFormEntryDialogOpen], async () => {
+//   if (isFormEntryDialogOpen.value) {
+//   }
+// })
+
+// Functions
 const getMyDetail = async (id: number | string) => {
   const result = await getDetail(id)
   if (result.success) {
@@ -161,14 +207,26 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <List
-    v-if="!isLoading.dataListLoading"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @cancel="confirmCancel"
-    @edit="goToEdit"
-    @submit="confirmSubmit"
-  />
+  <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"
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..ecf2bf46 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -22,7 +22,7 @@ const selected = ref<any[]>([])
 function toggleSelection(row: any, event?: Event) {
   if (event) event.stopPropagation() // cegah event bubble ke TableRow
 
-  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' || 
 
   // gunakan pembanding berdasarkan id atau stringify data
   const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
@@ -128,7 +128,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           'bg-green-50':
             props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
           'bg-blue-50':
-            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' || 
             selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"

From 20649c5917581b1cc92b77f327bfcfccd2ed07e4 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Sun, 16 Nov 2025 19:52:22 +0700
Subject: [PATCH 20/40] feat/prescription: finalize #1 + integration + non mix
 entry

---
 .../app/prescription-item/list-entry.cfg.ts   |  18 +-
 .../app/prescription-item/mix-entry.vue       |  52 +--
 .../app/prescription-item/non-mix-entry.vue   |  14 +-
 app/components/app/prescription/entry.vue     |  18 +-
 app/components/content/prescription/entry.vue | 312 +++++++++++++++---
 app/components/content/prescription/list.vue  |  89 +----
 6 files changed, 329 insertions(+), 174 deletions(-)

diff --git a/app/components/app/prescription-item/list-entry.cfg.ts b/app/components/app/prescription-item/list-entry.cfg.ts
index 19b2f3d8..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: ['medicine.name', 'medicine.medicineForm.name', 'frequency', 'dose', '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/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index 5a3c74fd..05960307 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -18,7 +18,6 @@ const props = defineProps<{
 
 const { medicines } = toRefs(props)
 const medicineItems = ref<CB.Item[]>([])
-const selectedMedicine_code = ref<string>(props.data.medicine?.code || '')
 
 type ClickType = 'close' | 'save'
 
@@ -54,35 +53,39 @@ function addItem() {
 function searchMedicineText(value: string) {
   emit('update:searchText', value)
 }
+
+function deleteItem(idx: number) {
+  props.items.splice(idx, 1)
+}
 </script>
 
 <template>
   <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.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="4">
-        <DE.Label>Cara Pakai</DE.Label>
-        <DE.Field><Input /></DE.Field>
+      <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>
@@ -91,20 +94,29 @@ function searchMedicineText(value: string) {
       <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>
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
index 90cf3e01..78ee9ada 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -6,7 +6,7 @@ import * as CB from '~/components/pub/my-ui/combobox'
 
 // import { bigTimeUnitCodes } from '~/lib/constants'
 
-import { type Medicine, genMedicine } from '~/models/medicine';
+import { type Medicine } from '~/models/medicine';
 import type { PrescriptionItem } from '~/models/prescription-item'
 
 const props = defineProps<{
@@ -20,7 +20,6 @@ const medicineForm = computed(() => {
   const medicine = props.medicines.find(m => m.code === props.data.medicine_code)
   return medicine ? medicine.medicineForm?.name : '--tidak diketahui--'
 })
-// const selectedMedicine_code = ref<string>(props.data.medicine_code || '')
 
 type ClickType = 'close' | 'save'
 type Item = {
@@ -28,19 +27,10 @@ type Item = {
   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],
@@ -105,7 +95,7 @@ function searchMedicineText(value: string) {
     </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/entry.vue b/app/components/app/prescription/entry.vue
index ef8756e8..af59a87d 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,13 +29,13 @@
         <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>
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
index 3ad9d572..46768432 100644
--- a/app/components/content/prescription/entry.vue
+++ b/app/components/content/prescription/entry.vue
@@ -1,112 +1,216 @@
 <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
+// Medicine
 import { type Medicine } from '~/models/medicine'
-
-// prescription
-import { getDetail } from '~/services/prescription.service'
 import { getList as getMedicineList } from '~/services/medicine.service'
-import Detail from '~/components/app/prescription/detail.vue'
 
-// prescription items
+// Prescription
+import { getDetail } from '~/services/prescription.service'
+// 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 getPrescriptionItemList,
-  create as createPrescriptionItem,
-  remove as removePrescriptionItem,
+  getList as getItemList,
+  create as createItem,
+  update as updateItem,
 } from '~/services/prescription-item.service'
-import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
-import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
-import type { MedicinemixItem } from '~/models/medicinemix-item';
+import {
+  recId,
+  recAction,
+  recItem,
+  isRecordConfirmationOpen,
+  handleActionRemove,
+} from '~/handlers/prescription-item.handler'
 
-import { recItem } from '~/handlers/prescription-item.handler'
+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
+// Props
 const props = defineProps<{
   encounter_id: number
 }>()
 
-// declaration & flows
+// Prescriptions 
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
+
+// Prescription Items
+const isItemDetailDialogOpen = ref(false)
 
 // Prescription
 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 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 items = ref<PrescriptionItem[]>([])
+const getItemsOpt = { 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' }
+const {
+  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: 'division',
+})
+
+
+// const items = ref<PrescriptionItem[]>([])
 const mixItem = ref<PrescriptionItem>(genPrescriptionItem())
 const medicinemixItems = ref<MedicinemixItem[]>([])
 const nonMixItem = ref<PrescriptionItem>(genPrescriptionItem())
 
-mixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
-nonMixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
+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 getItems()
+  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() {
-  createPrescriptionItem(mixItem.value)
-}
-
-function saveNonMix() {
-  createPrescriptionItem(nonMixItem.value)
-}
-
-async function getItems() {
-  const res = await getPrescriptionItemList({ 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' })
+async function saveMix() {
+  const res = await createItem(mixItem.value)
   if (res.success) {
-      items.value = res.body.data
-  } else {
-    items.value = []
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getPrescriptionItems()
+    mixDialogOpenStatus.value = false
   }
 }
 
-async function getMedicines(value: string) {
-  const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm' })
+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>
 
 <template>
@@ -116,20 +220,49 @@ async function getMedicines(value: string) {
     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="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'"
+    v-model:open="mixDialogOpenStatus"
+    title="Pembuatan Racikan"
     size="lg"
     prevent-outside
   >
@@ -137,24 +270,97 @@ async function getMedicines(value: string) {
       :data="mixItem"
       :items="medicinemixItems"
       :medicines="medicines"
-      @close="mixDialogOpen = false"
+      @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'"
+    v-model:open="nonMixDialogOpenStatus"
+    title="Pembuatan Non Racikan"
     size="lg"
     prevent-outside
   >
     <NonMixItemEntry
       :data="nonMixItem"
       :medicines="medicines"
-      @close="mixDialogOpen = false"
+      @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 9447a748..753c6885 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -4,7 +4,7 @@ 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'
 
@@ -14,7 +14,6 @@ import {
   recAction,
   recItem,
   isReadonly,
-  isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionRemove,
   handleActionSave,
@@ -112,68 +111,6 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-// Watch for row actions when recId or recAction changes
-watch([recId, recAction], () => {
-  switch (recAction.value) {
-    case ActionEvents.showDetail:
-      getMyDetail(recId.value)
-      isReadonly.value = true
-      break
-    case ActionEvents.showEdit:
-      getMyDetail(recId.value)
-      isReadonly.value = false
-      break
-    case ActionEvents.showConfirmDelete:
-      break
-  }
-})
-
-// watch([isFormEntryDialogOpen], async () => {
-//   if (isFormEntryDialogOpen.value) {
-//   }
-// })
-
-// Functions
-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 confirmCancel(data: Prescription) {
   recId.value = data.id
   recItem.value = data
@@ -235,15 +172,15 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
     @confirm="() => handleActionRemove(recId, getMyList, toast)"
     @cancel=""
   >
-    <div class="flex">
-      <div class="w-40">Tanggal</div>
-      <div class="w-5 text-cneter">:</div>
-      <div class="">:</div>
+    <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-40">Tanggal</div>
-      <div class="w-5 text-cneter">:</div>
-      <div class="">:</div>
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
     </div>
   </RecordConfirmation>
 
@@ -257,5 +194,15 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
     @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>

From dc0bcc36066591ee157ad4b6b0bd78b50164e174 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Mon, 17 Nov 2025 09:26:29 +0700
Subject: [PATCH 21/40] Feat: integration Medicine Form

---
 .../app/medicine-form/entry-form.vue          | 119 ++++++
 app/components/app/medicine-form/list-cfg.ts  |  38 ++
 app/components/app/medicine-form/list.vue     |  35 ++
 app/components/app/medicine/entry-form.vue    |  20 +
 app/components/app/medicine/list-cfg.ts       |   6 +-
 app/components/content/medicine-form/list.vue | 193 +++++++++
 app/components/content/medicine/list.vue      |   6 +-
 app/handlers/medicine-form.handler.ts         |  21 +
 app/models/medicine-form.ts                   |  38 ++
 .../medicine-form/index.vue                   |  38 ++
 .../tools-equipment-src/medicine/index.vue    |   8 +-
 app/schemas/medicine.schema.ts                |   1 +
 app/services/medicine-form.service.ts         |  41 ++
 public/side-menu-items/sys.json               | 367 ++++++++++++++++++
 public/side-menu-items/system.json            |   4 +
 15 files changed, 929 insertions(+), 6 deletions(-)
 create mode 100644 app/components/app/medicine-form/entry-form.vue
 create mode 100644 app/components/app/medicine-form/list-cfg.ts
 create mode 100644 app/components/app/medicine-form/list.vue
 create mode 100644 app/components/content/medicine-form/list.vue
 create mode 100644 app/handlers/medicine-form.handler.ts
 create mode 100644 app/models/medicine-form.ts
 create mode 100644 app/pages/(features)/tools-equipment-src/medicine-form/index.vue
 create mode 100644 app/services/medicine-form.service.ts
 create mode 100644 public/side-menu-items/sys.json

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/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/list.vue b/app/components/content/medicine/list.vue
index 27470776..43667c33 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 || {} }
   },
@@ -127,6 +129,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,6 +166,7 @@ onMounted(async () => {
       :values="recItem"
       :medicineGroups="medicineGroups"
       :medicineMethods="medicineMethods"
+      :medicineForms="medicineForms"
       :uoms="uoms"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
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/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/pages/(features)/tools-equipment-src/medicine-form/index.vue b/app/pages/(features)/tools-equipment-src/medicine-form/index.vue
new file mode 100644
index 00000000..120df6ea
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine-form/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <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..33f16618 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -22,12 +22,12 @@ 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/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/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/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
new file mode 100644
index 00000000..700cc4b7
--- /dev/null
+++ b/public/side-menu-items/sys.json
@@ -0,0 +1,367 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "link": "/outpatient/registration-queue"
+          },
+          {
+            "title": "Antrian Poliklinik",
+            "link": "/outpatient/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/outpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/outpatient/consultation"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/emergency/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/emergency/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rehab Medik",
+        "icon": "i-lucide-bike",
+        "children": [
+          {
+            "title": "Antrean Pendaftaran",
+            "link": "/rehab/registration-queue"
+          },
+          {
+            "title": "Antrean Poliklinik",
+            "link": "/rehab/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/rehab/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/rehab/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": "Lab - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pc-lab-order"
+      },
+      {
+        "title": "Lab Mikro - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/micro-lab-order"
+      },
+      {
+        "title": "Lab PA - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pa-lab-order"
+      },
+      {
+        "title": "Radiologi - Order",
+        "icon": "i-lucide-radio",
+        "link": "/radiology-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/sep"
+          },
+          {
+            "title": "Peserta",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/member"
+          }
+        ]
+      },
+      {
+        "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": "Layanan",
+        "icon": "i-lucide-layout-list",
+        "children": [
+          {
+            "title": "Counter",
+            "link": "/service-src/counter"
+          },
+          {
+            "title": "Public Screen (Big Screen)",
+            "link": "/service-src/public-screen"
+          },
+          {
+            "title": "Kasur",
+            "link": "/service-src/bed"
+          },
+          {
+            "title": "Kamar",
+            "link": "/service-src/chamber"
+          },
+          {
+            "title": "Ruang",
+            "link": "/service-src/room"
+          },
+          {
+            "title": "Depo",
+            "link": "/service-src/warehouse"
+          },
+          {
+            "title": "Lantai",
+            "link": "/service-src/floor"
+          },
+          {
+            "title": "Gedung",
+            "link": "/service-src/building"
+          }
+        ]
+      },
+      {
+        "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 b020b948..d5e4fbb4 100644
--- a/public/side-menu-items/system.json
+++ b/public/side-menu-items/system.json
@@ -235,6 +235,10 @@
           {
             "title": "Jenis Obat",
             "link": "/tools-equipment-src/medicine-type"
+          },
+          {
+            "title": "Sediaan Obat",
+            "link": "/tools-equipment-src/medicine-form"
           }
         ]
       },

From 15ab43c1b143627892df2a9f82f418091b55ed7f Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Mon, 17 Nov 2025 10:38:21 +0700
Subject: [PATCH 22/40] Feat: add verification capthca and form adjustment

---
 app/assets/svg/wavey-fingerprint.svg          |   1 +
 .../app/resume/_common/select-arrangement.vue |   6 +-
 app/components/app/resume/add.vue             |  33 ++--
 app/components/app/resume/verify-dialog.vue   |  13 +-
 app/components/content/resume/list.vue        |  12 +-
 .../pub/my-ui/form/text-captcha.vue           | 175 ++++++++++++++++++
 app/schemas/resume.schema.ts                  |   5 +-
 app/schemas/verification.schema.ts            |  19 ++
 8 files changed, 236 insertions(+), 28 deletions(-)
 create mode 100644 app/assets/svg/wavey-fingerprint.svg
 create mode 100644 app/components/pub/my-ui/form/text-captcha.vue
 create mode 100644 app/schemas/verification.schema.ts

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/resume/_common/select-arrangement.vue b/app/components/app/resume/_common/select-arrangement.vue
index 9a945d44..7e236ff0 100644
--- a/app/components/app/resume/_common/select-arrangement.vue
+++ b/app/components/app/resume/_common/select-arrangement.vue
@@ -31,11 +31,9 @@ const {
 const arrangementTypeOpts = [
   { label: 'KRS', value: "krs" },
   { label: 'MRS', value: "mrs" },
-  { label: 'Pindah IGD', value: "pindahIgd" },
-  { label: 'Rujuk', value: "rujuk" },
-  { label: 'Rujuk Balik', value: "rujukBalik" },
+  { label: 'Rujuk Internal', value: "rujukInternal" },
+  { label: 'Rujuk External', value: "rujukExternal" },
   { label: 'Meninggal', value: "meninggal" },
-  { label: 'Lain Lain', value: "other" },
 ]
 </script>
 
diff --git a/app/components/app/resume/add.vue b/app/components/app/resume/add.vue
index d1423735..d5fa3370 100644
--- a/app/components/app/resume/add.vue
+++ b/app/components/app/resume/add.vue
@@ -19,7 +19,6 @@ 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 SelectFollowingArrangement from './_common/select-following-arrangement.vue'
 import SelectHospitalLeaveMethod from './_common/select-hospital-leave-method.vue'
 
 const props = defineProps<{
@@ -58,6 +57,12 @@ const DEFAULT_CONSULTATION_VALUE = {
   consultation: '',
   consultationReply: '',
 };
+
+const initialFormValues = {
+  secondaryDiagnosis: [DEFAULT_SECONDARY_DIAGNOSIS_VALUE],
+  secondaryOperativeNonOperativeAct: [DEFAULT_SECONDARY_ACTION_VALUE],
+  consultation: [DEFAULT_CONSULTATION_VALUE],
+}
 </script>
 
 <template>
@@ -68,7 +73,7 @@ const DEFAULT_CONSULTATION_VALUE = {
     :validation-schema="formSchema"
     :validate-on-mount="false"
     validation-mode="onSubmit"
-    :initial-values="initialValues ? initialValues : {}">
+    :initial-values="initialValues ? initialValues : initialFormValues">
 
     <!-- Pasien -->
     <h1 class="mb-3 text-base font-medium">Pemeriksaan Pasien</h1>
@@ -295,7 +300,7 @@ const DEFAULT_CONSULTATION_VALUE = {
           @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="3" :cell-flex="false">
+      <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"
@@ -405,16 +410,25 @@ const DEFAULT_CONSULTATION_VALUE = {
       </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 === `rujuk` || resumeArrangementType === `rujukBalik` "
+        v-show="resumeArrangementType === `rujukExternal` "
         field-name="faskes"
         label="Faskes"
         placeholder="Pilih Faskes"
         :errors="errors"
       />
       <InputBase
-        v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
+        v-show="resumeArrangementType === `rujukExternal` "
         field-name="clinic"
         label="Klinik"
         placeholder="Masukkan Klinik"
@@ -460,15 +474,6 @@ const DEFAULT_CONSULTATION_VALUE = {
             label="Keterangan Sebab Meninggal"
             placeholder="Keterangan Sebab Meninggal"
             :errors="errors" />
-      </DE.Cell>          
-
-      <DE.Cell :col-span="3"
-        v-show="resumeArrangementType === `other`">
-        <TextAreaInput
-          field-name="keterangan"
-          label="Keterangan"
-          placeholder="Keterangan"
-          :errors="errors" />
       </DE.Cell>
     
     </DE.Block>
diff --git a/app/components/app/resume/verify-dialog.vue b/app/components/app/resume/verify-dialog.vue
index 1519446c..ca4fb554 100644
--- a/app/components/app/resume/verify-dialog.vue
+++ b/app/components/app/resume/verify-dialog.vue
@@ -8,6 +8,7 @@ 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<{
@@ -21,6 +22,7 @@ const emit = defineEmits<{
 }>()
 
 const formSchema = toTypedSchema(props.schema)
+const captchaRef = ref<InstanceType<typeof TextCaptcha> | null>(null)
 
 // Form submission handler
 function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
@@ -83,12 +85,11 @@ const items = ref([
             </Field>
           </div>
 
-          <InputBase
-            class="mb-2"
-            field-name="captha"
-            label="Captha"
-            placeholder="Masukkan Captha"
-            :errors="errors"/>
+          <TextCaptcha
+            ref="captchaRef"
+            :length="5"
+            :useSpacing="true"
+            :noiseChars="true"/>
 
         </div>
       </div>
diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index 389c830d..ad60e0e0 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -16,6 +16,8 @@ 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'
 
 // #endregion
 
@@ -37,7 +39,7 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
-const formType = ref<`a` | `b`>(`a`)
+const verificationInputForm = ref<ExposedForm<any> | null>(null)
 const isVerifyDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
@@ -45,6 +47,8 @@ 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",
@@ -168,9 +172,11 @@ watch([recId, recAction], () => {
     @page-change="handlePageChange"/>
 
   <Dialog v-model:open="isVerifyDialogOpen" title="Verifikasi">
-    <AppResumeVerifyDialog />
+    <AppResumeVerifyDialog
+      ref="verificationInputForm"
+      :schema="VerificationSchema" />
     <div class="flex justify-end">
-      <Action :enable-draft="false" @click="handleActionClick" />
+      <Action v-show="isCaptchaValid" :enable-draft="false" @click="handleActionClick" />
     </div>
   </Dialog>
   
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/schemas/resume.schema.ts b/app/schemas/resume.schema.ts
index 3d529622..3e466a33 100644
--- a/app/schemas/resume.schema.ts
+++ b/app/schemas/resume.schema.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import type { CreateDto } from '~/models/consultation'
 
-export type ResumeArrangementType = "krs" | "mrs" | "pindahIgd" | "rujuk" | "rujukBalik" | "meninggal" | "other"
+export type ResumeArrangementType = "krs" | "mrs" | "rujukInternal" | "rujukExternal" | "meninggal" | "other"
 
 const SecondaryDiagnosisSchema = z.object({  
   diagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
@@ -53,6 +53,9 @@ const ResumeSchema = z.object({
   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(),
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

From 7ed1cc83bfa62d8c9660ff1ee61b1f96661ef45a Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Mon, 17 Nov 2025 15:04:01 +0700
Subject: [PATCH 23/40] Feat: add doc preview in Resume List

---
 app/components/content/resume/list.vue        |  8 ++++-
 .../pub/my-ui/modal/doc-preview-dialog.vue    | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 app/components/pub/my-ui/modal/doc-preview-dialog.vue

diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index ad60e0e0..d8d8c721 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -18,6 +18,7 @@ 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'
 
 // #endregion
 
@@ -41,6 +42,7 @@ const refSearchNav: RefSearchNav = {
 
 const verificationInputForm = ref<ExposedForm<any> | null>(null)
 const isVerifyDialogOpen = ref(false)
+const isDocPreviewDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
 
@@ -152,7 +154,7 @@ watch([recId, recAction], () => {
       isRecordConfirmationOpen.value = true
       break
     case ActionEvents.showPrint:
-      navigateTo('https://google.com', {external: true,open: { target: "_blank" },});
+      isDocPreviewDialogOpen.value = true
       break
   }
 })
@@ -179,6 +181,10 @@ watch([recId, recAction], () => {
       <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"
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

From dab6adc4a98820d8686c5a336172af586b883c24 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Tue, 18 Nov 2025 11:19:48 +0700
Subject: [PATCH 24/40] Fix: add role authorization in Resume

---
 app/components/content/resume/list.vue | 52 +++++++++++++++++---------
 app/composables/useRBAC.ts             | 18 +++++++++
 app/lib/utils.ts                       |  9 +++++
 3 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index d8d8c721..4b5b5001 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -19,9 +19,17 @@ 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'] }),
@@ -55,11 +63,13 @@ provide('isCaptchaValid', isCaptchaValid)
 const headerPrep: HeaderPrep = {
   title: "Resume",
   icon: 'i-lucide-newspaper',
-  addNav: {
-    label: "Resume",
-    onClick: () => navigateTo('/resume/add'),
-  },
-}
+  }
+  if (pagePermission.canCreate) {
+    headerPrep.addNav = {
+      label: "Resume",
+      onClick: () => navigateTo('/resume/add'),
+    }
+  }
 // #endregion
 
 // #region Lifecycle Hooks
@@ -146,17 +156,25 @@ provide('table_data_loader', isLoading)
 
 // #region Watchers
 watch([recId, recAction], () => {
-  switch (recAction.value) {
-    case ActionEvents.showVerify:
-      isVerifyDialogOpen.value = true
-      break
-    case ActionEvents.showValidate:
-      isRecordConfirmationOpen.value = true
-      break
-    case ActionEvents.showPrint:
-      isDocPreviewDialogOpen.value = true
-      break
-  }
+    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>
diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
index ced57e3e..fcc28144 100644
--- a/app/composables/useRBAC.ts
+++ b/app/composables/useRBAC.ts
@@ -1,5 +1,13 @@
 import type { Permission, RoleAccess } from '~/models/role'
 
+export interface PageOperationPermission {
+  canRead: boolean
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+}
+
+
 /**
  * Check if user has access to a page
  */
@@ -36,6 +44,14 @@ export function useRBAC() {
   const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
   const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
 
+  const getPagePermissions = (roleAccess: RoleAccess): PageOperationPermission => ({
+      canRead : hasReadAccess(roleAccess),
+      canCreate: hasCreateAccess(roleAccess),
+      canUpdate: hasUpdateAccess(roleAccess),
+      canDelete: hasDeleteAccess(roleAccess),
+  })
+
+
   return {
     checkRole,
     checkPermission,
@@ -44,5 +60,7 @@ export function useRBAC() {
     hasReadAccess,
     hasUpdateAccess,
     hasDeleteAccess,
+    getPagePermissions,
+    
   }
 }
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 357d8700..64248caf 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,11 @@ export function calculateAge(birthDate: Date | string | null | undefined): strin
     return `${years} tahun ${months} bulan`
   }
 }
+
+export function unauthorizedToast() {
+  toast({
+    title: 'Unauthorized',
+    description: 'You are not authorized to perform this action.',
+    variant: 'destructive',
+  })
+}
\ No newline at end of file

From c98018bb4eaacbcd05763f404b40d3d4a27899dd Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Tue, 18 Nov 2025 12:58:58 +0700
Subject: [PATCH 25/40] Squashed commit of the following:

commit bcfb4c1456b7b58c63d4969985200ceca72aee16
Merge: 1cbde57 975c87d
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Mon Nov 17 11:15:14 2025 +0700

    Merge pull request #147 from dikstub-rssa/feat/surat-kontrol-135

    Feat: Integration Rehab Medik - Surat Kontrol

commit 975c87d99af0471f62111a455fa214abc1f2e998
Merge: f582090 1cbde57
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 10:58:10 2025 +0700

    Merge branch 'dev' into feat/surat-kontrol-135

commit f582090d18fe797e9f7e0e5b8559b1e413c7c921
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Thu Nov 13 11:56:21 2025 +0700

    Fix: Refactor surat kontrol

commit a14c4a5d3c334d3ea7b9875feb5620991511d4f0
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 11 14:21:58 2025 +0700

    Fix: Refactor Surat Kontrol CRUD {id} to {code}

commit 24313adef6bd3db52f23ace0675100bea1aaefad
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 7 10:35:46 2025 +0700

    Fix: debug back btn in add, edit, detail content page

commit 59b44b5729161b3e7c014ea440f17bf98fd8b954
Merge: 99a61a0 db15ec9
Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com>
Date:   Fri Nov 7 09:11:10 2025 +0700

    Merge branch 'dev' into feat/surat-kontrol-135

commit 99a61a0bf2edf2f924d0424600e94a1d64901e48
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Thu Nov 6 08:06:01 2025 +0700

    Feat: add right & bottom label in input base component

commit db48919325a9c3a7940cb208fee71c1d42ee9a8a
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:53:43 2025 +0700

    Feat: add banner in List if requirement not met

commit bd57250f7e9bcaed8e11f6533435e3c788347286
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:26:48 2025 +0700

    Fix: refactor getDetail url param

commit a361922e32f2e8a649edaedd9cec82131aff2793
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:19:07 2025 +0700

    Feat: Add & integrate add, edit, detail page

commit 331f4a6b20194964d89eb1ada2d7661d8be8f76d
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 4 16:56:08 2025 +0700

    Feat: Integrate Control Letter

commit 2275f4dc9991a1e51d0fba31748ff88c85d40bcf
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Oct 27 14:01:58 2025 +0700

    Feat: add UI BPJS > Surat Kontrol

commit 89e0e7a2c8a20ae31ca381d3320bd81755b73c34
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Oct 27 10:21:59 2025 +0700

    Feat: add UI CRUD Surat Kontrol at Rehab Medik > kunjungan > Proses
---
 .../_common/dropdown-action.vue               |  90 +++++++
 .../control-letter/_common/history-dialog.vue |  49 ++++
 .../_common/select-date-range.vue             | 104 +++++++++
 .../_common/select-destination-polyclinic.vue |  70 ++++++
 .../_common/select-origin-polyclinic.vue      |  70 ++++++
 .../app/bpjs/control-letter/filter.vue        | 128 ++++++++++
 .../app/bpjs/control-letter/list.cfg.ts       | 108 +++++++++
 .../app/bpjs/control-letter/list.vue          |  31 +++
 .../control-letter/_common/select-date.vue    | 116 +++++++++
 .../control-letter/_common/select-dpjp.vue    |  98 ++++++++
 .../_common/select-specialist.vue             |  98 ++++++++
 .../_common/select-subspecialist.vue          |  97 ++++++++
 .../control-letter/_common/select-unit.vue    |  85 +++++++
 .../app/control-letter/entry-form.vue         |  94 ++++++++
 app/components/app/control-letter/list.cfg.ts |  64 +++++
 app/components/app/control-letter/list.vue    |  31 +++
 app/components/app/control-letter/preview.vue |  54 +++++
 .../content/bpjs/control-letter/list.vue      | 220 ++++++++++++++++++
 app/components/content/control-letter/add.vue | 133 +++++++++++
 .../content/control-letter/detail.vue         |  79 +++++++
 .../content/control-letter/edit.vue           | 162 +++++++++++++
 .../content/control-letter/list.vue           | 176 ++++++++++++++
 app/components/content/encounter/process.vue  |   3 +-
 .../pub/my-ui/alert/warning-alert.vue         |  27 +++
 .../pub/my-ui/badge/status-badge.vue          |  26 +++
 .../pub/my-ui/confirmation/confirmation.vue   |   2 +-
 app/components/pub/my-ui/data/types.ts        |   6 +
 app/components/pub/my-ui/form/input-base.vue  |   6 +-
 .../pub/my-ui/nav-header/filter-dialog.vue    |  85 +++++++
 .../pub/my-ui/nav-header/filter.vue           |  30 ++-
 app/handlers/control-letter.handler.ts        |  24 ++
 app/lib/date.ts                               |   8 +
 app/models/control-letter.ts                  |  37 +++
 app/models/doctor.ts                          |  13 +-
 .../integration/bpjs/control-letter/index.vue |  40 ++++
 .../(features)/integration/bpjs/sep/add.vue   |  12 +-
 .../(features)/integration/bpjs/sep/index.vue |   6 +-
 .../outpatient/encounter/[id]/index.vue       |  41 ++++
 .../[control_letter_id]/edit.vue              |  41 ++++
 .../[control_letter_id]/index.vue             |  41 ++++
 .../encounter/[id]/control-letter/add.vue     |  42 ++++
 app/schemas/control-letter.schema.ts          |  47 ++++
 app/services/doctor.service.ts                |  10 +-
 app/services/specialist.service.ts            |   6 +-
 app/services/subspecialist.service.ts         |   6 +-
 app/services/unit.service.ts                  |   6 +-
 public/side-menu-items/system.json            |   5 +
 47 files changed, 2696 insertions(+), 31 deletions(-)
 create mode 100644 app/components/app/bpjs/control-letter/_common/dropdown-action.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/history-dialog.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/select-date-range.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
 create mode 100644 app/components/app/bpjs/control-letter/filter.vue
 create mode 100644 app/components/app/bpjs/control-letter/list.cfg.ts
 create mode 100644 app/components/app/bpjs/control-letter/list.vue
 create mode 100644 app/components/app/control-letter/_common/select-date.vue
 create mode 100644 app/components/app/control-letter/_common/select-dpjp.vue
 create mode 100644 app/components/app/control-letter/_common/select-specialist.vue
 create mode 100644 app/components/app/control-letter/_common/select-subspecialist.vue
 create mode 100644 app/components/app/control-letter/_common/select-unit.vue
 create mode 100644 app/components/app/control-letter/entry-form.vue
 create mode 100644 app/components/app/control-letter/list.cfg.ts
 create mode 100644 app/components/app/control-letter/list.vue
 create mode 100644 app/components/app/control-letter/preview.vue
 create mode 100644 app/components/content/bpjs/control-letter/list.vue
 create mode 100644 app/components/content/control-letter/add.vue
 create mode 100644 app/components/content/control-letter/detail.vue
 create mode 100644 app/components/content/control-letter/edit.vue
 create mode 100644 app/components/content/control-letter/list.vue
 create mode 100644 app/components/pub/my-ui/alert/warning-alert.vue
 create mode 100644 app/components/pub/my-ui/badge/status-badge.vue
 create mode 100644 app/components/pub/my-ui/nav-header/filter-dialog.vue
 create mode 100644 app/handlers/control-letter.handler.ts
 create mode 100644 app/models/control-letter.ts
 create mode 100644 app/pages/(features)/integration/bpjs/control-letter/index.vue
 create mode 100644 app/pages/(features)/outpatient/encounter/[id]/index.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
 create mode 100644 app/schemas/control-letter.schema.ts

diff --git a/app/components/app/bpjs/control-letter/_common/dropdown-action.vue b/app/components/app/bpjs/control-letter/_common/dropdown-action.vue
new file mode 100644
index 00000000..9086c883
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/dropdown-action.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
+
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Log History',
+    onClick: () => {
+      history()
+    },
+    icon: 'i-lucide-logs',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+
+function history() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/history-dialog.vue b/app/components/app/bpjs/control-letter/_common/history-dialog.vue
new file mode 100644
index 00000000..00d7b32f
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/history-dialog.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps()
+
+const items = reactive([
+  { id: 1, description: 'Shipped from warehouse', createdAt: new Date(Date.now() - 86400000 * 2) },
+  { id: 2, description: 'In transit to distribution center', createdAt: new Date(Date.now() - 86400000) },
+  { id: 3, description: 'Out for delivery (Current)', createdAt: new Date() },
+])
+const itemsCount = computed(() => items.length || 0)
+</script>
+
+<template>
+  <ul :class="cn('pb-5 flex flex-col min-h-[30rem]', '')">
+    <li v-for="(item, index) in items" :key="item.id" class="flex gap-3 items-start">
+
+      <div class="flex flex-col items-center">
+        <div class="h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
+          <div :class="cn('dark:bg-white border-gray-300 rounded-full p-1.5',
+            index === 0 ? 'bg-green-500' : 'bg-transparent'
+          )">
+          </div>
+        </div>
+
+        <hr v-if="index !== itemsCount - 1" class="h-8 w-0.5 bg-gray-300 dark:bg-gray-300" aria-hidden="true">
+      </div>
+
+      <div class="flex justify-between items-center min-w-96">
+        <div class="max-w-80">
+          <time :class="cn('font-medium text-gray-800 dark:text-gray-100', '')">
+            {{ item?.createdAt.toLocaleDateString('id-ID') }}
+          </time>
+          <h1 :class="cn('text-gray-500 dark:text-gray-400', '')">{{ item.description }}</h1>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
\ No newline at end of file
diff --git a/app/components/app/bpjs/control-letter/_common/select-date-range.vue b/app/components/app/bpjs/control-letter/_common/select-date-range.vue
new file mode 100644
index 00000000..114f8542
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-date-range.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button
+                  variant="outline"
+                  :class="cn('w-full bg-white border-gray-400 justify-start text-left font-normal', !value && 'text-muted-foreground')"
+                >
+                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  <template v-if="value.start">
+                    <template v-if="value.end">
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }} -
+                      {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                  </template>
+                  <template v-else> Pick a date </template>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent class="w-auto p-0">
+                <RangeCalendar
+                  v-model="value"
+                  initial-focus
+                  :number-of-months="2"
+                  @update:start-value="(startDate) => (value.start = startDate)"
+                />
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue b/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue b/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/filter.vue b/app/components/app/bpjs/control-letter/filter.vue
new file mode 100644
index 00000000..50005069
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/filter.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+import SelectDateRange from './_common/select-date-range.vue'
+
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
+const props = defineProps<{
+  installation: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<InstallationFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  reset: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    encounterClassCode: values.encounterClassCode || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onResetForm({ resetForm }: { resetForm: () => void }) {
+  emit('reset', resetForm)
+}
+
+const items = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-7 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <SelectDateRange
+            field-name="releaseDate"
+            label="Tanggal Penerbitan"
+            placeholder="Tanggal Penerbitan"
+            :errors="errors"
+            is-required
+          />
+          <SelectDateRange
+            field-name="controlPlanDate"
+            label="Tanggal Rencana Kontrol"
+            placeholder="Tanggal Rencana Kontrol"
+            :errors="errors"
+            is-required
+          />
+          <InputBase
+            field-name="patientName"
+            label="Nama Pasien"
+            placeholder="Nama Pasien"
+          />
+          <InputBase
+            field-name="cardNumber"
+            label="Nomor Kartu"
+            placeholder="Nomor Kartu"
+          />
+          <InputBase
+            field-name="sepNumber"
+            label="Nomor SEP"
+            placeholder="Nomor SEP"
+          />
+          <SelectOriginPolyclinic
+            field-name="originPolyclinic"
+            label="Poliklinik Asal"
+            placeholder="Pilih Poliklinik Asal"
+            :errors="errors"
+            is-required
+          />
+          <SelectDestinationPolyclinic
+            field-name="destinationPolyclinic"
+            label="Poliklinik Tujuan"
+            placeholder="Pilih Poliklinik Tujuan"
+            :errors="errors"
+            is-required
+          />
+        </div>
+      </div>
+     
+      <div class="my-2 flex items-center gap-3 justify-end">
+        <Button @click="onResetForm" variant="secondary">Reset</Button>
+        <Button @click="onSubmitForm">Terapkan</Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/bpjs/control-letter/list.cfg.ts b/app/components/app/bpjs/control-letter/list.cfg.ts
new file mode 100644
index 00000000..8eb7e5f4
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/list.cfg.ts
@@ -0,0 +1,108 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('./_common/dropdown-action.vue'))
+const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {},{}, {}, {}, {}, {}, {width: 90},{width: 10},],
+
+  headers: [
+    [
+      { label: 'No Surat' },
+      { label: 'No MR' },
+      { label: 'Nama' },
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Tgl Penerbitan' },
+      { label: 'Klinik Asal' },
+      { label: 'Klinik Tujuan' },
+      { label: 'DPJP' },
+      { label: 'No SEP Asal' },
+      { label: 'Status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'birth_date',
+    'birth_date', 'number', 'person.name', 'birth_date', 'status', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/bpjs/control-letter/list.vue b/app/components/app/bpjs/control-letter/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/list.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/control-letter/_common/select-date.vue b/app/components/app/control-letter/_common/select-date.vue
new file mode 100644
index 00000000..057d0a63
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-date.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              id="birthDate"
+              type="date"
+              min="1900-01-01"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/_common/select-dpjp.vue b/app/components/app/control-letter/_common/select-dpjp.vue
new file mode 100644
index 00000000..2053ebdb
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-dpjp.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const doctors = ref<Array<Item>>([])
+
+async function fetchDpjp(specialistId: string, subspecialistId: string) {
+  doctors.value = await getDoctorLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    includes: 'employee-person',
+    // "unit-id": parseInt(unitId),
+    "specialist-code": String(specialistId),
+    "subspecialist-code": String(subspecialistId),
+  }, true)
+}
+
+// const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+
+watch([ selectedSpecialistId, selectedSubSpecialistId], () => {
+  if (selectedSpecialistId.value && selectedSubSpecialistId.value) {
+    console.log(`Select Doctor`)
+    fetchDpjp( selectedSpecialistId.value, selectedSubSpecialistId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="doctors"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              :is-disabled="selectedSubSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/_common/select-specialist.vue b/app/components/app/control-letter/_common/select-specialist.vue
new file mode 100644
index 00000000..cd5ee923
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-specialist.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSpecialistLabelList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const specialists = ref<Array<Item>>([])
+
+async function fetchSpecialists(unitId: string) {
+  specialists.value = await getSpecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "unit-id": String(unitId),
+  }, true)
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+
+function handleSpecialistChange(selected: string) {
+  selectedSpecialistId.value = selected ?? null
+}
+
+watch([selectedUnitId], () => {
+  if (selectedUnitId.value) {
+    fetchSpecialists(selectedUnitId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Spesialis
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="specialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSpecialistChange"
+              :is-disabled="selectedUnitId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>
+  </DE.Block>
+</template>
diff --git a/app/components/app/control-letter/_common/select-subspecialist.vue b/app/components/app/control-letter/_common/select-subspecialist.vue
new file mode 100644
index 00000000..61567c0c
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-subspecialist.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const subspecialists = ref<Array<Item>>([])
+
+async function fetchSubSpecialists(specialistId: string) {
+  subspecialists.value = await getSubspecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "specialist-code": String(specialistId),
+  }, true)
+}
+
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+function handleSubSpecialistChange(selected: string) {
+  selectedSubSpecialistId.value = selected ?? null
+}
+
+watch([selectedSpecialistId], () => {
+  if (selectedSpecialistId.value) {
+    fetchSubSpecialists(selectedSpecialistId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Sub Spesialis
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="subspecialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSubSpecialistChange"
+              :is-disabled="selectedSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>    
+  </DE.Block>
+</template>
diff --git a/app/components/app/control-letter/_common/select-unit.vue b/app/components/app/control-letter/_common/select-unit.vue
new file mode 100644
index 00000000..afe0ca0a
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-unit.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const units = ref<Array<Item>>([])
+
+async function fetchData() {
+  units.value = await getUnitLabelList({}, true)
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+function handleDataChange(selected: string) {
+  selectedUnitId.value = selected ?? null
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="units"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleDataChange"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/entry-form.vue b/app/components/app/control-letter/entry-form.vue
new file mode 100644
index 00000000..2517e8b1
--- /dev/null
+++ b/app/components/app/control-letter/entry-form.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectSpeciality from './_common/select-specialist.vue'
+import SelectDpjp from './_common/select-dpjp.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import SelectUnit from './_common/select-unit.vue'
+import SelectSubspecialist from './_common/select-subspecialist.vue'
+import SelectSpecialist from './_common/select-specialist.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+
+  selectedUnitId?: number | null
+  selectedSpecialistId?: number | null
+  selectedSubSpecialistId?: number | null
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <DE.Block :col-count="2" :cell-flex="false">
+      <InputBase
+        field-name="sepStatus"
+        label="Status Sep"
+        placeholder="Status Sep"
+        :is-disabled="true"
+      />
+      <SelectDate
+        field-name="date"
+        label="Tanggal Rencana Kontrol"
+        :errors="errors"
+        is-required
+      />
+      <DE.Cell :col-span="2">
+        <DE.Block :col-count="4" :cell-flex="false">
+          <SelectUnit
+            field-name="unit_code"
+            label="Unit"
+            placeholder="Pilih Unit"
+            :errors="errors"
+            is-required
+          />
+          <SelectSpecialist
+            field-name="specialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectSubspecialist
+            field-name="subspecialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectDpjp
+            field-name="doctor_code"
+            label="DPJP"
+            placeholder="Pilih DPJP"
+            :errors="errors"
+            is-required
+          />
+        </DE.Block>
+      </DE.Cell>
+    </DE.Block>    
+  </Form>
+</template>
diff --git a/app/components/app/control-letter/list.cfg.ts b/app/components/app/control-letter/list.cfg.ts
new file mode 100644
index 00000000..3eb7bd84
--- /dev/null
+++ b/app/components/app/control-letter/list.cfg.ts
@@ -0,0 +1,64 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{width: 180}, {}, {}, {}, {}, {width: 30},],
+
+  headers: [
+    [
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Spesialis' },
+      { label: 'Sub Spesialis' },
+      { label: 'DPJP' },
+      { label: 'Status SEP' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'specialist.name', 'subspecialist.name', 'doctor.employee.person.name', 'sep_status', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+    specialist_subspecialist: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      // const { person } = rec as Patient
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    sep_status(_rec) {
+      return 'SEP Internal'
+    },
+  },
+}
diff --git a/app/components/app/control-letter/list.vue b/app/components/app/control-letter/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/control-letter/list.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/control-letter/preview.vue b/app/components/app/control-letter/preview.vue
new file mode 100644
index 00000000..e10a2b91
--- /dev/null
+++ b/app/components/app/control-letter/preview.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import { cn, } from '~/lib/utils'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  instance: ControlLetter | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: string): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// Computed addresses from nested data
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+function onClick(type: string) {
+  emit('click', type)
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div :class="cn('min-h-[50vh] space-y-2',)">
+    <DetailRow label="Tgl Rencana Kontrol">{{ props.instance?.date ? new Date(props.instance?.date).toLocaleDateString('id-ID') : '-' }}</DetailRow>
+    <DetailRow label="Unit">{{ props.instance?.unit.name || '-' }}</DetailRow>
+    <DetailRow label="Spesialis">{{ props.instance?.specialist.name || '-' }}</DetailRow>
+    <DetailRow label="Sub Spesialis">{{ props.instance?.subspecialist.name || '-' }}</DetailRow>
+    <DetailRow label="DPJP">{{ props.instance?.doctor.employee.person.name || '-' }}</DetailRow>
+    <DetailRow label="Status SEP">{{ 'SEP INTERNAL' }}</DetailRow>
+  </div>
+  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBaEd @click="onClick" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/content/bpjs/control-letter/list.vue b/app/components/content/bpjs/control-letter/list.vue
new file mode 100644
index 00000000..66ed00a5
--- /dev/null
+++ b/app/components/content/bpjs/control-letter/list.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+
+// #region Imports
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+import FilterDialog from '~/components/pub/my-ui/nav-header/filter-dialog.vue'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+    isFormEntryDialogOpen.value = true
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const refExportNav: RefExportNav = {
+  onExportCsv: () => {
+    // open filter modal
+    console.log(`Export CSV Clicked`)
+  },
+}
+
+const isFormEntryDialogOpen = ref(false)
+const isHistoryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+
+const filterPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
+async function getPatientSummary() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+function handleFiltering() {
+  console.log('Confirmed action: Filter')
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showProcess:
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break
+
+    case ActionEvents.showDetail:
+      isHistoryDialogOpen.value = true
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="summaryLoading">
+        <SummaryCard
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
+      </template>
+<template v-else>
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
+      </template>
+</div>
+</div>
+-->
+
+  <FilterDialog :prep="{ ...filterPrep }" 
+    :ref-search-nav="refSearchNav" 
+    :ref-export-nav="refExportNav" 
+    :enable-search="false"
+    :enable-date-range="false"/>
+
+  <AppBpjsControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    title="Filter"
+  >
+    <AppBpjsControlLetterFilter @submit="handleFiltering" />
+  </Dialog>
+
+  <Dialog
+    v-model:open="isHistoryDialogOpen"
+    title="Log History Surat Kontrol">
+    <AppBpjsControlLetterCommonHistoryDialog />
+  </Dialog>
+
+  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.firstName">
+          <strong>Nama:</strong>
+          {{ record.firstName }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.cellphone }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/control-letter/add.vue b/app/components/content/control-letter/add.vue
new file mode 100644
index 00000000..44f03a2f
--- /dev/null
+++ b/app/components/content/control-letter/add.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { ExposedForm } from '~/types/form'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import {  handleActionSave,} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { type ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const controlLetter: ControlLetter = await composeFormData()
+  let createdControlLetterId = 0
+
+  const response = await handleActionSave(
+    controlLetter,
+    () => { },
+    () => { },
+    toast,
+  )
+
+  const data = (response?.body?.data ?? null)
+  if (!data) return
+  createdControlLetterId = data.id
+
+  // // If has callback provided redirect to callback with patientData
+  if (props.callbackUrl) {
+    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+  }
+
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd" />
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/control-letter/detail.vue b/app/components/content/control-letter/detail.vue
new file mode 100644
index 00000000..d9019d57
--- /dev/null
+++ b/app/components/content/control-letter/detail.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { Patient } from '~/models/patient'
+import type { Person } from '~/models/person'
+import { getDetail } from '~/services/control-letter.service'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const controlLetter = ref<ControlLetter | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Surat Kontrol',
+  icon: 'i-lucide-newspaper',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId, {
+    includes: "unit,specialist,subspecialist,doctor-employee-person",
+  })
+  if (result.success) {
+    controlLetter.value = result.body?.data
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": controlLetterId },
+      })
+      break
+
+    case 'back':
+      goBack()
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
+
+  <AppControlLetterPreview :instance="controlLetter" @click="handleAction" />
+</template>
diff --git a/app/components/content/control-letter/edit.vue b/app/components/content/control-letter/edit.vue
new file mode 100644
index 00000000..99a5c282
--- /dev/null
+++ b/app/components/content/control-letter/edit.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { Patient, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+import { getDetail, update } from '~/services/control-letter.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import { withBase } from '~/models/_base'
+import type { Person } from '~/models/person'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import type { ControlLetter } from '~/models/control-letter'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import { formatDateYyyyMmDd } from '~/lib/date'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const isConfirmationOpen = ref(false)
+const controlLetter = ref({})
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId)
+  if (result.success) {
+    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    selectedUnitId.value = responseData?.unit_code
+    selectedSpecialistId.value = responseData?.specialist_code
+    selectedSubSpecialistId.value = responseData?.subspecialist_code
+
+    controlLetter.value = responseData
+    controlLetterForm.value?.setValues(responseData)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const response = await handleActionEdit(
+    controlLetterId,
+    await composeFormData(),
+    () => { },
+    () => { },
+    toast,
+  )
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+  
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation
+    v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd"
+  />
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/control-letter/list.vue b/app/components/content/control-letter/list.vue
new file mode 100644
index 00000000..c9353057
--- /dev/null
+++ b/app/components/content/control-letter/list.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Imports
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/control-letter.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+// #endregion
+
+// #region State
+const props = defineProps<{
+  encounter?: Encounter
+}>()
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'control-letter',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+  addNav: {
+    label: "Surat Kontrol",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-control-letter-add',
+        params: { id: encounterId },
+      }),
+  },
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getListData()
+})
+// #endregion
+
+// #region Functions
+async function getListData() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching Data:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await remove(record.id)
+      if (result.success) {
+        toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <WarningAlert v-if="!isRequirementsMet"
+    class="mb-5"
+    text="Syarat pembuatan surat kontrol belum terpenuhi"
+    :description="[
+      'Lanjutan Penatalaksanaan Pasien harus pulang/KRS.',
+      'Status Resume Medis harus tervalidasi.'
+    ]" />
+
+  <div v-else>
+    <Header v-model:search="searchInput"
+      :prep="{ ...headerPrep }"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch" />
+
+    <AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 267fee95..3b57e7f6 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -20,6 +20,7 @@ import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 import DocUploadList from '~/components/content/document-upload/list.vue'
 import { genEncounter } from '~/models/encounter'
+import ControlLetterList from '~/components/content/control-letter/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -80,7 +81,7 @@ const tabs: TabItem[] = [
   { value: 'mcu-result', label: 'Hasil Penunjang' },
   { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
   { value: 'resume', label: 'Resume' },
-  { value: 'control', label: 'Surat Kontrol' },
+  { 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, },  },
 ]
diff --git a/app/components/pub/my-ui/alert/warning-alert.vue b/app/components/pub/my-ui/alert/warning-alert.vue
new file mode 100644
index 00000000..afdbe7ae
--- /dev/null
+++ b/app/components/pub/my-ui/alert/warning-alert.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils';
+
+const props = withDefaults(defineProps<{
+  text?: string
+  description?: string | string[]
+  class?: string
+}>(), {
+
+})
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-4 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
+        props.class
+    )">
+        <Icon name="i-lucide-triangle-alert" class="h-12 w-12 align-middle transition-colors" />
+        <div class="">
+            <p class="font-medium text-base">{{text}}</p>
+            <ul class="list-disc list-inside">
+                <li v-for="(desc, index) in (Array.isArray(description) ? description : [description])" :key="index">
+                    {{ desc }}
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/badge/status-badge.vue b/app/components/pub/my-ui/badge/status-badge.vue
new file mode 100644
index 00000000..ba8a7ea6
--- /dev/null
+++ b/app/components/pub/my-ui/badge/status-badge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+import { activeStatusCodes } from '~/lib/constants';
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusText = computed(() => {
+  const code: keyof typeof activeStatusCodes = props.rec.status_code === 1 ? `active` : `inactive`
+  return activeStatusCodes[code]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/confirmation/confirmation.vue b/app/components/pub/my-ui/confirmation/confirmation.vue
index 590f328d..b5c328aa 100644
--- a/app/components/pub/my-ui/confirmation/confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/confirmation.vue
@@ -71,7 +71,7 @@ function handleCancel() {
   <Dialog v-model:open="isOpen" :title="title" :size="size">
     <div class="space-y-4">
       <!-- Icon dan pesan -->
-      <div class="flex items-start gap-3">
+      <div class="flex items-center gap-3">
         <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
         <div class="flex-1">
           <p class="text-sm text-muted-foreground leading-relaxed">
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index a9b2586b..f27a5578 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
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index aeb4a4af..a3743734 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -19,6 +19,8 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  rightLabel?: string
+  bottomLabel?: string
 }>()
 
 function handleInput(event: Event) {
@@ -61,7 +63,7 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem>
+        <FormItem :class="`relative`">
           <FormControl>
             <Input
               :disabled="isDisabled"
@@ -76,10 +78,12 @@ function handleInput(event: Event) {
               spellcheck="false"
               @input="handleInput"
             />
+            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
+    <p v-show="bottomLabel" class="text-gray-400">{{ bottomLabel }}</p>    
   </DE.Cell>
 </template>
diff --git a/app/components/pub/my-ui/nav-header/filter-dialog.vue b/app/components/pub/my-ui/nav-header/filter-dialog.vue
new file mode 100644
index 00000000..c0d5b854
--- /dev/null
+++ b/app/components/pub/my-ui/nav-header/filter-dialog.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
+}>()
+
+// function emitSearchNavClick() {
+//   props.refSearchNav?.onClick()
+// }
+//
+// function onInput(event: Event) {
+//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+// }
+//
+// function btnClick() {
+//   props.prep?.addNav?.onClick?.()
+// }
+
+const searchQuery = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+
+function onFilterClick() {
+  console.log('Search:', searchQuery.value)
+  console.log('Date Range:', dateRange.value)
+  props.refSearchNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
+      
+      <Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
+        <FilterIcon class="mr-2 size-4" />
+        Filter
+      </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
index ab28620b..74f6d8dc 100644
--- a/app/components/pub/my-ui/nav-header/filter.vue
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -5,11 +5,13 @@ import type { Ref } from 'vue'
 import type { DateRange } from 'radix-vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { cn } from '~/lib/utils'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
   prep: HeaderPrep
   refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
 }>()
 
 // function emitSearchNavClick() {
@@ -57,7 +59,7 @@ function onFilterClick() {
 
 <template>
   <header>
-    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
+    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
       <div class="relative w-64">
         <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
         <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
@@ -97,6 +99,30 @@ function onFilterClick() {
         <FilterIcon class="mr-2 size-4" />
         Filter
       </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
     </div>
   </header>
 </template>
diff --git a/app/handlers/control-letter.handler.ts b/app/handlers/control-letter.handler.ts
new file mode 100644
index 00000000..b096a178
--- /dev/null
+++ b/app/handlers/control-letter.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/control-letter.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/lib/date.ts b/app/lib/date.ts
index 502a6cfb..2c7b92cf 100644
--- a/app/lib/date.ts
+++ b/app/lib/date.ts
@@ -41,4 +41,12 @@ export function getAge(dateString: string, comparedDate?: string): { idFormat: s
 		idFormat,
 		extFormat
 	};
+}
+
+export function formatDateYyyyMmDd(isoDateString: string): string {
+	const date = new Date(isoDateString);
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate()).padStart(2, '0');
+	return `${year}-${month}-${day}`;
 }
\ No newline at end of file
diff --git a/app/models/control-letter.ts b/app/models/control-letter.ts
new file mode 100644
index 00000000..8f520212
--- /dev/null
+++ b/app/models/control-letter.ts
@@ -0,0 +1,37 @@
+import { type Base, genBase } from "./_base"
+import { genDoctor, type Doctor } from "./doctor"
+import { genEncounter, type Encounter } from "./encounter"
+import { genSpecialist, type Specialist } from "./specialist"
+import { genSubspecialist, type Subspecialist } from "./subspecialist"
+import { genUnit, type Unit } from "./unit"
+
+export interface ControlLetter extends Base {
+  encounter_id: number
+  encounter: Encounter
+  unit_id: number
+  unit: Unit
+  specialist_id: number
+  specialist: Specialist
+  subspecialist_id: number
+  subspecialist: Subspecialist
+  doctor_id: number
+  doctor: Doctor
+  date: ''
+}
+
+export function genControlLetter(): ControlLetter {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    encounter: genEncounter(),
+    unit_id: 0,
+    unit: genUnit(),
+    specialist_id: 0,
+    specialist: genSpecialist(),
+    subspecialist_id: 0,
+    subspecialist: genSubspecialist(),
+    doctor_id: 0,
+    doctor: genDoctor(),
+    date: ''
+  }
+}
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
index 3f517476..1b631907 100644
--- a/app/models/doctor.ts
+++ b/app/models/doctor.ts
@@ -8,10 +8,11 @@ export interface Doctor extends Base {
   employee: Employee
   ihs_number: string
   sip_number: string
-  unit_id?: number
-  specialist_id?: number
+  code?: string
+  unit_icode?: number
+  specialist_icode?: number
   specialist?: Specialist
-  subspecialist_id?: number
+  subspecialist_icode?: number
   subspecialist?: Subspecialist
   bpjs_code?: string
 }
@@ -21,9 +22,9 @@ export interface CreateDto {
   employee_id: number
   ihs_number: string
   sip_number: string
-  unit_id?: number
-  specialist_id?: number
-  subspecialist_id?: number
+  unit_code?: number
+  specialist_code?: number
+  subspecialist_code?: number
   bpjs_code: string
 }
 
diff --git a/app/pages/(features)/integration/bpjs/control-letter/index.vue b/app/pages/(features)/integration/bpjs/control-letter/index.vue
new file mode 100644
index 00000000..8dcb9006
--- /dev/null
+++ b/app/pages/(features)/integration/bpjs/control-letter/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentBpjsControlLetterList type="encounter" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/integration/bpjs/sep/add.vue b/app/pages/(features)/integration/bpjs/sep/add.vue
index 5db12aac..0658780b 100644
--- a/app/pages/(features)/integration/bpjs/sep/add.vue
+++ b/app/pages/(features)/integration/bpjs/sep/add.vue
@@ -22,12 +22,12 @@ const { checkRole, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
+// if (!hasAccess) {
+//   throw createError({
+//     statusCode: 403,
+//     statusMessage: 'Access denied',
+//   })
+// }
 
 // Define permission-based computed properties
 const canCreate = true // hasCreateAccess(roleAccess)
diff --git a/app/pages/(features)/integration/bpjs/sep/index.vue b/app/pages/(features)/integration/bpjs/sep/index.vue
index b8ec57c4..d99dbb5d 100644
--- a/app/pages/(features)/integration/bpjs/sep/index.vue
+++ b/app/pages/(features)/integration/bpjs/sep/index.vue
@@ -22,9 +22,9 @@ const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  navigateTo('/403')
-}
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
 
 // Define permission-based computed properties
 const canRead = true // hasReadAccess(roleAccess)
diff --git a/app/pages/(features)/outpatient/encounter/[id]/index.vue b/app/pages/(features)/outpatient/encounter/[id]/index.vue
new file mode 100644
index 00000000..1864cf2c
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/[id]/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Surat Kontrol',
+  contentFrame: 'cf-container-md',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentOutpatientEncounterDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
new file mode 100644
index 00000000..cc5d182f
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Update Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterEdit />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
new file mode 100644
index 00000000..612315ad
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Surat Kontrol',
+  contentFrame: 'cf-container-md',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
new file mode 100644
index 00000000..1070a29f
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+const callbackUrl = route.query['return-path'] as string | undefined
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterAdd :callback-url="callbackUrl" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/schemas/control-letter.schema.ts b/app/schemas/control-letter.schema.ts
new file mode 100644
index 00000000..c82ffaac
--- /dev/null
+++ b/app/schemas/control-letter.schema.ts
@@ -0,0 +1,47 @@
+import { z } from 'zod'
+
+const ControlLetterSchema = z.object({
+  sepStatus: z.string({
+    required_error: 'Mohon isi status SEP',
+  }).default('SEP Internal'),
+  unit_code: z.string({
+    required_error: 'Mohon isi Unit',
+  }),
+  specialist_code: z.string({
+    required_error: 'Mohon isi Spesialis',
+  }),
+  subspecialist_code: z.string({
+    required_error: 'Mohon isi Sub Spesialis',
+  }),
+  doctor_code: z.string({
+    required_error: 'Mohon isi DPJP',
+  }),
+  encounter_code: z.string().optional(),
+  date: z.string({
+    required_error: 'Mohon lengkapi Tanggal Kontrol',
+  })
+    .refine(
+      (date) => {
+        // Jika kosong, return false untuk required validation
+        if (!date || date.trim() === '') return false
+
+        // Jika ada isi, validasi format tanggal
+        try {
+          const dateObj = new Date(date)
+          // Cek apakah tanggal valid dan tahun >= 1900
+          return !isNaN(dateObj.getTime()) && dateObj.getFullYear() >= 1900
+        } catch {
+          return false
+        }
+      },
+      {
+        message: 'Mohon lengkapi Tanggal Kontrol dengan format yang valid',
+      },
+    )
+    .transform((dateStr) => new Date(dateStr).toISOString()),
+})
+
+type ControlLetterFormData = z.infer<typeof ControlLetterSchema>
+
+export { ControlLetterSchema }
+export type { ControlLetterFormData }
diff --git a/app/services/doctor.service.ts b/app/services/doctor.service.ts
index 74104c2c..e6ae0051 100644
--- a/app/services/doctor.service.ts
+++ b/app/services/doctor.service.ts
@@ -1,8 +1,6 @@
 // Base
 import * as base from './_crud-base'
-
-// Types
-import type { Doctor } from '~/models/doctor'
+import type { Doctor } from "~/models/doctor";
 
 const path = '/api/v1/doctor'
 const name = 'doctor'
@@ -27,13 +25,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: Doctor) => ({
-      value: item.id ? String(item.id) : '',
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.employee?.person?.name || '',
     }))
   }
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
index b18eac34..d4c81b5c 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.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: Specialist) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.name,
       parent: item.unit_id ? Number(item.unit_id) : null,
     }))
diff --git a/app/services/subspecialist.service.ts b/app/services/subspecialist.service.ts
index e384f059..f13c715f 100644
--- a/app/services/subspecialist.service.ts
+++ b/app/services/subspecialist.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: Subspecialist) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.name,
       parent: item.specialist_id ? Number(item.specialist_id) : null,
     }))
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
index ec1ccec0..402504b6 100644
--- a/app/services/unit.service.ts
+++ b/app/services/unit.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: Unit) => ({
-      value: item.id,
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.name,
     }))
   }
diff --git a/public/side-menu-items/system.json b/public/side-menu-items/system.json
index d5e4fbb4..31890951 100644
--- a/public/side-menu-items/system.json
+++ b/public/side-menu-items/system.json
@@ -199,6 +199,11 @@
             "title": "Peserta",
             "icon": "i-lucide-circuit-board",
             "link": "/integration/bpjs/member"
+          },
+          {
+            "title": "Surat Kontrol",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/control-letter"
           }
         ]
       },

From 94e4ead8fe13ad7dc518ad87d1f3f01620791d01 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Tue, 18 Nov 2025 13:13:52 +0700
Subject: [PATCH 26/40] Fix: debug updaate medicine master

---
 app/components/content/equipment/list.vue       | 5 +++--
 app/components/content/medicine-group/list.vue  | 5 +++--
 app/components/content/medicine-method/list.vue | 5 +++--
 app/components/content/medicine/list.vue        | 5 +++--
 app/components/content/tools/list.vue           | 4 ++--
 5 files changed, 14 insertions(+), 10 deletions(-)

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/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 43667c33..bfbf8750 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -118,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:
@@ -173,7 +174,7 @@ onMounted(async () => {
       @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)
@@ -188,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/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 }">

From 9d93afed2b4fe4599fa5fad9cffa9407ae0a87b7 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Tue, 18 Nov 2025 13:26:58 +0700
Subject: [PATCH 27/40] Squashed commit of the following:

commit bcfb4c1456b7b58c63d4969985200ceca72aee16
Merge: 1cbde57 975c87d
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Mon Nov 17 11:15:14 2025 +0700

    Merge pull request #147 from dikstub-rssa/feat/surat-kontrol-135

    Feat: Integration Rehab Medik - Surat Kontrol

commit 975c87d99af0471f62111a455fa214abc1f2e998
Merge: f582090 1cbde57
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 10:58:10 2025 +0700

    Merge branch 'dev' into feat/surat-kontrol-135

commit 1cbde57cf955ae8665e4649c6d5b4a4c0b68c830
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sun Nov 16 00:44:53 2025 +0700

    dev: hotfix

    comps/pub/myui
    + updated data/types
    + updated data-table
    + updated nav-header
    + added toggle

    comps/pub/ui
    + updated button
    + updated toggle

commit ccabe0177b12182e794d71be101b78657bd9f48a
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Nov 14 16:39:21 2025 +0700

    dev: hotfix, added combobox objectsToItems

commit f582090d18fe797e9f7e0e5b8559b1e413c7c921
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Thu Nov 13 11:56:21 2025 +0700

    Fix: Refactor surat kontrol

commit 0d97ba9d25558ed784f4df43477773c41f7a004b
Merge: 02508b2 bb8df3d
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Thu Nov 13 11:52:23 2025 +0700

    Merge pull request #164 from dikstub-rssa/feeat/pendaftaran-kemoterapi-141

    Feat: Pendaftaran Kemoterapi

commit bb8df3d53aab0b5a2d858d9d41a6d8dab2d4b24d
Merge: a592a0b 02508b2
Author: riefive <rie.five@gmail.com>
Date:   Thu Nov 13 10:14:17 2025 +0700

    Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feeat/pendaftaran-kemoterapi-141

commit 02508b22de655d6046d1b6cb54deb14b8b2390cb
Merge: 6b933de 295bb81
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Thu Nov 13 07:56:31 2025 +0700

    Merge pull request #162 from dikstub-rssa/fe-prescription-56

    Fe prescription 56

commit 295bb8120f29ed51580db6d85c6bfbc22d49d2ba
Merge: 8462eba 6b933de
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Thu Nov 13 07:45:48 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 6b933de212779ecbd59fb115fe121f656a032339
Merge: f2e98fc 471c846
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:13:11 2025 +0700

    Merge pull request #156 from dikstub-rssa/feat/cp-lab-order-48

    Feat/cp lab order 48

commit f2e98fc732d895450f79cf45bb5b896daace980e
Merge: 2e899c6 9b281de
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:12:40 2025 +0700

    Merge pull request #158 from dikstub-rssa/feat/menu-structure

    Feat/menu structure

commit 471c846045a8488f09c0a30b55993076d13a3084
Merge: f676c8a 2e899c6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 07:11:46 2025 +0700

    Merge branch 'dev' into feat/cp-lab-order-48

commit 9b281de00bae69b619f1382ec8712c16650b4abb
Merge: 80383a5 2e899c6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 07:08:29 2025 +0700

    Merge branch 'dev' into feat/menu-structure

commit 2e899c602259a47da7f587c4936a69d1bb9c770b
Merge: 8effefb b7d4fcf
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:04:47 2025 +0700

    Merge pull request #157 from dikstub-rssa/feat/encounter-status-107

    Feat/encounter status 107

commit 8effefb5ad4e58dd502026c4f6be907163074410
Merge: 3f63f19 8e7f9b1
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:04:17 2025 +0700

    Merge pull request #155 from dikstub-rssa/feat/radiology-order-54

    Feat/radiology order 54

commit 80383a5f0a23144814b32be675969e19399c0ae2
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:52:31 2025 +0700

    feat/menu-structure: adjust page rehab

commit 93c9e74d081549df3a3602c29a9c4f3dc7ac7e3e
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:52:14 2025 +0700

    feat/menu-structure: adjust menu items all roles

commit f0d2bc4de1fbc418014857e798573c718f624f39
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:51:37 2025 +0700

    feat/menu-structure: update access control

commit 02c14089f100dadfc2259d288ed663d35950bf5d
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:51:03 2025 +0700

    feat/menu-structure: update role switcher

commit a14c4a5d3c334d3ea7b9875feb5620991511d4f0
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 11 14:21:58 2025 +0700

    Fix: Refactor Surat Kontrol CRUD {id} to {code}

commit e9e0e21d1b7ac2a1bd24706514ea04673fe5fb46
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Nov 11 12:30:43 2025 +0700

    feat/menu-structure: wip

commit 8e7f9b19e38cb70110f11878f3f5cd39d25fff13
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Mon Nov 10 23:17:49 2025 +0700

    feat/radiology-order-54: upgraded mcu-order/list

commit 24313adef6bd3db52f23ace0675100bea1aaefad
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 7 10:35:46 2025 +0700

    Fix: debug back btn in add, edit, detail content page

commit 59b44b5729161b3e7c014ea440f17bf98fd8b954
Merge: 99a61a0 db15ec9
Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com>
Date:   Fri Nov 7 09:11:10 2025 +0700

    Merge branch 'dev' into feat/surat-kontrol-135

commit 99a61a0bf2edf2f924d0424600e94a1d64901e48
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Thu Nov 6 08:06:01 2025 +0700

    Feat: add right & bottom label in input base component

commit 8462eba94b22f73e8a9ef10b8afaac6168246310
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 5 21:23:04 2025 +0700

    feat/prescription-56: wip

commit db48919325a9c3a7940cb208fee71c1d42ee9a8a
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:53:43 2025 +0700

    Feat: add banner in List if requirement not met

commit bd57250f7e9bcaed8e11f6533435e3c788347286
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:26:48 2025 +0700

    Fix: refactor getDetail url param

commit a361922e32f2e8a649edaedd9cec82131aff2793
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:19:07 2025 +0700

    Feat: Add & integrate add, edit, detail page

commit 331f4a6b20194964d89eb1ada2d7661d8be8f76d
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 4 16:56:08 2025 +0700

    Feat: Integrate Control Letter

commit a592a0be367f571d11f0a51619d22c0b00c56d51
Author: riefive <rie.five@gmail.com>
Date:   Tue Nov 4 15:15:38 2025 +0700

    feat(cemo): add home encounter

commit be0a761170afd9cbbb1f163bbe9ed6520b71816e
Author: riefive <rie.five@gmail.com>
Date:   Tue Nov 4 13:23:52 2025 +0700

    feat(cemo): change flow admin

commit 64fe2524fbdb2279e9df651cadaa110dc4aa8896
Author: riefive <rie.five@gmail.com>
Date:   Tue Nov 4 12:02:31 2025 +0700

    feat(cemo): enhance admin mode functionality and update series handling

commit fb7731188d249dc0f02ba276e034a1030a686b5d
Author: riefive <rie.five@gmail.com>
Date:   Mon Nov 3 15:52:35 2025 +0700

    feat(cemo): add mode adm + series

commit 89b2fb9cd95a0e60efaa139ee6efcf7ebe00a61e
Author: riefive <rie.five@gmail.com>
Date:   Mon Nov 3 15:03:56 2025 +0700

    feat(chemo): add page process and modify components

commit f676c8a4b98c037965328cbde25a523942387f53
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Nov 3 08:11:02 2025 +0700

    feat/cp-lab-order-48: wip

commit 69ffe6bd494739961dda1bbea412551bca050832
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:35:39 2025 +0700

    feat/radiology-order: added the page

commit d1369d513bf5781a03e39c51786f8485338f6e0f
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 16:08:22 2025 +0700

    feat(cemo): add list verification

commit a9ab75fd984945703f3ef7dff990811361c54696
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:35:05 2025 +0700

    feat/readiology-order: added mcu

commit 71d68e5a0ee084b586be48ddf4035735647f2f34
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 14:49:21 2025 +0700

    feat(cemo): add dialog verification and list register

commit f8d906b6c2077db0d3925b1cc4c47d026ccf9dd0
Merge: 66872c9 5f9e441
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:48:21 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 40d78a999a13c249997de573cd72864c68b219e9
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:35:05 2025 +0700

    feat/readiology-order: added mcu

commit b3502df0f8f4b0a75a95828f425bdb6edabdbf61
Merge: 831749a 7119f67
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 13:12:11 2025 +0700

    Merge branch 'feat/fe-kemoterapi' into feeat/pendaftaran-kemoterapi-141

commit 7119f67402b5261226257b3aa6e193d516f33041
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 13:09:59 2025 +0700

    feat(cemo): modify schema

commit 66872c95f8949b98e7f14cc10736c7d62e0e3b1e
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Oct 31 07:56:36 2025 +0700

    feat/prescription-56: wip

commit 45cc019ec1f37583e5e950a45a095c74ff099538
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 30 15:43:50 2025 +0700

    feat(cemo): layouting form

commit e866c0cf2ae2c3daf1b508e31b9b0ad8a28cfa69
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 30 14:41:52 2025 +0700

    feat(cemo): layouting protocol

commit dc4edc1dc0053f350cdf8ad82c4c816099285671
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 29 15:58:52 2025 +0700

    feat(cemo): show list cemo

commit 323485347300abee84439e5956815cc2dafc5cf9
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 29 15:39:55 2025 +0700

    feat(cemo): add list of cemo

commit 67ee129f4b5fdb4c75340adc0d1841d2dfdc39fc
Merge: 9919b4b 9e82d17
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 28 16:20:17 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 2275f4dc9991a1e51d0fba31748ff88c85d40bcf
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Oct 27 14:01:58 2025 +0700

    Feat: add UI BPJS > Surat Kontrol

commit 89e0e7a2c8a20ae31ca381d3320bd81755b73c34
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Oct 27 10:21:59 2025 +0700

    Feat: add UI CRUD Surat Kontrol at Rehab Medik > kunjungan > Proses

commit 9919b4b8960d5e3d661d818a887b823b50713d2e
Merge: 19a43bd e93e72a
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 15:36:29 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit b7d4fcf9391f0b94183fab5826d635124c272a32
Merge: eaac4aa e93e72a
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 15:31:30 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 19a43bd2918d62e4f24fa189e1500e9affe6fe11
Merge: d90e400 3558672
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 05:02:57 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit eaac4aab852e27ca515b9340146ddb200e230934
Merge: 72e8d43 3558672
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 05:01:45 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit d90e40043c9c2f5d8ea963b64b1bb5f233f2d11a
Merge: 0c9f9de b90f0c1
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 24 12:40:59 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 0c9f9deb7e3220410a3bbec863c4cff0c1deedbe
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 24 12:38:02 2025 +0700

    fe-prescription-56: wip

commit 729474a2a0bc8a5e8d346672110dcb7982369636
Merge: 7159bd6 ddd35d6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Thu Oct 23 14:16:52 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 72e8d431d6f4fa56fdb30b2dd3370792fb02a277
Merge: 3f77d92 2a9b78a
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Oct 22 07:17:41 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 3f77d927b62827433d8a41be02be1bbe11a7c56c
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 21 22:48:34 2025 +0700

    feat/encounter: done

commit d8c861d60ceb402edbbf37d86ab154d25a5242a6
Merge: 6bdee66 27ab7c2
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 21 00:15:01 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 7159bd6566d21ffc74d9c1e725cd3041e1d05e0d
Merge: ccc9b0b be5768b
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 07:45:15 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit ccc9b0bda38150a319ee1160233325a0c821b6e6
Merge: f94ccd7 cad7ac6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 06:29:03 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 6bdee66cc6fa8d05315eea10c6a034680f0b8049
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 06:26:30 2025 +0700

    feat/encounter: wip

commit f7c53fc4e517b24a98f6b6e4283fe6bf51d1fcf7
Merge: a7c7ef6 cad7ac6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 06:24:45 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit a7c7ef6dd8b411597edcda168677c1f980693c8d
Merge: 89b051b f52e516
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 13:27:06 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 89b051b883dbd4a647dc4a516ea94c78264bbe1f
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 13:18:46 2025 +0700

    feat/encounter-status-107: wip

commit 743c38804ae3b38bee3c99c0b9c404d6bd618a1a
Merge: d6d60e3 f7b66d2
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 11:53:03 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit d6d60e38d06ebf0e52264279b30c167e424e8a45
Merge: 9530cdd 18e00bf
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 11:49:49 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 18e00bf89aaedd7a4211ef9cc3dee975bc87d3db
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sun Oct 12 11:40:53 2025 +0700

    dev: hotfix, text-size standardization

commit 9530cdd4f9659c3133282a94882147628e34e96a
Merge: 0820cb6 0d1e469
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 11:41:49 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 0d1e469ece38471ed5496f0d424473cac643461b
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sun Oct 12 11:40:53 2025 +0700

    dev: hotfix, text-size standardization

commit 0820cb653c6b450f9412dab32ffa8bab4e62845c
Merge: fff1ce0 867c1b4
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 11 00:38:10 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit fff1ce0eb75c8dd98640b6eef98c9292efb5bfd9
Merge: 1a3edd5 3a4b2aa
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 11 00:35:16 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 3a4b2aa6fb940b9d29bc1d6743f09e7302764c7e
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sat Oct 11 00:25:44 2025 +0700

    dev: hotfix, moved combobox and datepicker

commit 1a3edd5a1ec40cd33d534da3c6dc7f7fc5a74e08
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Oct 10 23:58:44 2025 +0700

    dev: hotfix, moved combobox and datepicker

commit f94ccd707bfc59d1a1d2aeeffb11c833531fdf71
Merge: 0647675 51d1221
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Wed Oct 8 08:00:01 2025 +0700

    Merge branch 'feat/consultation-82' into fe-prescription-56

commit 06476756fb7160854de95c6b6ef499c4940f5736
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Wed Oct 8 07:58:48 2025 +0700

    fe-prescription-56: wip

commit fdbcfed87ffcc69ec7448977c4abb68d9800c96a
Merge: 4da896a bd66a88
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 7 03:10:19 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit bd66a8887d6523457a02de7d74aa804b009ec236
Merge: 19e00fa ba61d05
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Tue Oct 7 03:07:46 2025 +0700

    Merge pull request #103 from dikstub-rssa/feat/fe-integrasi-org-src-72

    Feat - Integrasi Org Src

commit ba61d05257ea729e3bee9dd30e6fc2e1c2a8b55b
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 12:42:08 2025 +0700

    fix: adjustment division app + flow

commit 8601d4a4fd50f5a71060145dc648b0509f72e734
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 11:07:05 2025 +0700

    fix: remove shared handlers

commit fff5f2c11d9d7a78e0d56cc159e89984a621a19b
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 11:06:29 2025 +0700

    fix: update content list of specialist, subspecialist, etc

commit 301cb8280397fa76937411c074e997a39c95184d
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 11:00:14 2025 +0700

    fix: update list medicine

commit 3003ec9d80e0d63e7515aaeb6e574fba1576a8f9
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:45:15 2025 +0700

    fix: update list division + equipment

commit d1bcd6e66c81a3b1d9d0dc96fa269b0eaead9b96
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:38:10 2025 +0700

    fix: update some service

commit 78ae8a8aa05da80440f66e608f9658567a32d16e
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:26:25 2025 +0700

    fix: medicine method and group

commit 8eaf95dd3e7bc150ff35f424875ceb95623e29fb
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:20:05 2025 +0700

    fix: update service for unit and uom

commit 58c0dde377fb29a91e9e74735123229b6d40c035
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:14:51 2025 +0700

    fix: update handler for unit and uom

commit fe23c75aca2905c9de2707690eef9a0487b4bb98
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:09:24 2025 +0700

    fix: update some service and handlers

commit 4da896a242f6878ebb514657b09a67eabb2775d2
Merge: 285c3ee 19e00fa
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 09:55:24 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit ecdc5d80d902bf7dfbfd7a83c23d6cb1b978d094
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 09:51:31 2025 +0700

    fix: update device service and handler

commit 45ea70d415728f166805cf3ca3a53c1518246d1d
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 09:44:48 2025 +0700

    fix: update crud base

commit 51ddb9d8b59e60f99e5c1d2cac91870423597263
Merge: 42a54bb 19e00fa
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 09:40:22 2025 +0700

    fix: resolve conflict

commit 19e00fa1438a1d6f32ee5095e9ee9bfc7af738c4
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Mon Oct 6 08:26:08 2025 +0700

    dev: hotfix, moved encounter to pub/component

commit 285c3ee4e5a419dad03110f03920d8f3bbfb5fed
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 07:56:29 2025 +0700

    Merged Stash

commit 421159971e0e1adad3e564519ff86fa2169a1f45
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 04:41:21 2025 +0700

    feat/prescription-56: wip

commit 3a45de413dda04dc984f06ffdd06cc128a1c1ab8
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 04:31:08 2025 +0700

    Merge from Stash

commit e959c3ae610b670456d17ad2557a1c3a9322618e
Merge: 32c69af ad4695c
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 04:21:06 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit ad4695c8671afd3c8d29c693bfe4ecf05ca087b8
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Mon Oct 6 04:18:55 2025 +0700

    dev: hotfix, encounter content back nav

commit 42a54bbb3bf4b2a77ab8bd577705d15e8ef1345b
Merge: a7cbbee 55559a4
Author: riefive <rie.five@gmail.com>
Date:   Sat Oct 4 09:07:03 2025 +0700

    fix: solve conflict after pull

commit a7cbbeeda9c3581d99e8cb2cb22e0387bd56994b
Author: riefive <rie.five@gmail.com>
Date:   Sat Oct 4 09:05:28 2025 +0700

    feat(division): fixing logic treeview

commit 71e0615ee11527b185c9dea1c479ad9a28b5409f
Author: riefive <rie.five@gmail.com>
Date:   Sat Oct 4 08:49:38 2025 +0700

    feat(division): restructure division parent

commit f02903e7568e6646ad9eb8b176dc88e89d66513c
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 15:00:10 2025 +0700

    feat(division): change parent id to number before integrate

commit 2e8667a780290cb45d7e32dd97f28baa5899fcc8
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 14:47:02 2025 +0700

    feat(division): parent id to default null

commit e65e562690ef4288efbc1aa3a098804ac222f9ec
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 12:45:05 2025 +0700

    feat(division): change form attribute

commit 9407501c49d0befa1db943ff9938213b16df328c
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 11:03:19 2025 +0700

    feat(division): change compoent combobox to tree select

commit c5ba07a226a96a44b6cf9726c7a1b6da9643a2d0
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 10:54:35 2025 +0700

    feat(division): create tree item converter for division

commit 8e7ce771b04f55f4efba39577c2783203048bccb
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 15:31:27 2025 +0700

    test: call division position

commit 7edab334279be1a387a2baf6c1446fcdb309c211
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:49:55 2025 +0700

    fix: handler reset state

commit ce59eac86c428ba2a1ba892fc510023ccf59058c
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:37:17 2025 +0700

    fix: list unit

commit 39d2869ffb9e0a39a1108fc7278b67881aea31ce
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:34:19 2025 +0700

    fix: list with params error

commit 3c046a4d822aa7c27dc9bd0dd912bd5b66dad43c
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:12:10 2025 +0700

    fix: list integration

commit 6feb480a516a25fa1bd19ffd248bafbb9c3ad101
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:16:23 2025 +0700

    fix: change get encounter class to constants

commit d7d984810e87cecaeccab54845757d27d024e3c7
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:00:05 2025 +0700

    remove previous list + form from any features

commit a6377ef9432c366d3ff8e0a73a9c1e5735867f42
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:24:54 2025 +0700

    fix: includes for unit

commit b00b9b198e302b42b7a6df8f43565e9b91d3f7d5
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:17:31 2025 +0700

    fix: includes for medicine list

commit 4908f167704f72ca7e6d5112c9c2826a5164f7aa
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:56:11 2025 +0700

    fix: search on list file

commit 41405ae113028e36c20f6997bf5e24da455ee53d
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:36:48 2025 +0700

    fix: resolve list organization source

commit 6b69e48bd64a937e1e7cf76e7a370f2d2639aeb5
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:05:36 2025 +0700

    feat(installation): add encounter list

commit 59847dce34b9cb230cdfe19151a2f7f31760282c
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:01:24 2025 +0700

    chore: add shared handlers

commit e78342829e4b3d047c93d4be06d7852e77569c78
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 12:38:04 2025 +0700

    feat(installation): integrate api installation

commit 55559a4683f0e7781ca3db5b05bfb18dcfbd6d1b
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 15:00:10 2025 +0700

    feat(division): change parent id to number before integrate

commit 2d8c751788a0364469a921e663aad34d2c0d6c1a
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 14:47:02 2025 +0700

    feat(division): parent id to default null

commit f374f9ef5b1d4d0094e658d83271508f26a5ea71
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 12:45:05 2025 +0700

    feat(division): change form attribute

commit 1837afce6cc7799d64e568bc56afea97698ee308
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 11:03:19 2025 +0700

    feat(division): change compoent combobox to tree select

commit 539a1cefb00ec66eb5db722f01515aa658bc9fa8
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 10:54:35 2025 +0700

    feat(division): create tree item converter for division

commit 32c69af4e1c01ef4cef71cea9418fd7e8ec4eec8
Merge: 0752855 10bbee9
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 3 06:05:35 2025 +0700

    Merge branch 'feat/layout-cleaning' into fe-prescription-56

commit 757b8c044430082bdadc2ebc9a76c6a80fa1cbd3
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 15:31:27 2025 +0700

    test: call division position

commit 378e6773b8009b3a203ad2c2618353d9004a58d1
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:49:55 2025 +0700

    fix: handler reset state

commit 0e115eed5ecc49c55af8820d0080dd5d1d5f5c04
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:37:17 2025 +0700

    fix: list unit

commit d544d031c3829195fda94eaaa60a6598a729adce
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:34:19 2025 +0700

    fix: list with params error

commit 693d8225bf34a2f2a1ef458940de6c2623708c2d
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:12:10 2025 +0700

    fix: list integration

commit 0752855808492e93e1ff3107a3be52c8037a3faf
Merge: f83dbfe c0557cc
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Thu Oct 2 12:46:54 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit fc3bda14f43bd012215a69916c77f2704cd4d237
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:16:23 2025 +0700

    fix: change get encounter class to constants

commit 9603915fd7cd57bfc23baf5af1127621b8b98d18
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:00:05 2025 +0700

    remove previous list + form from any features

commit 546423bdfb665a0b78ce9a15115fc309aecce274
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:24:54 2025 +0700

    fix: includes for unit

commit db48233f6c9d7c4652e4892af72529a9551040f3
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:17:31 2025 +0700

    fix: includes for medicine list

commit 54a5aaa78ff653c1ba0ba73fa76cf6dcf88004c9
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:56:11 2025 +0700

    fix: search on list file

commit cc41118570c5602f79385b5f07d0e9d51ff60cb5
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:36:48 2025 +0700

    fix: resolve list organization source

commit 6a7a9cda80943cc8e8d4159b65f36d38e1193838
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:05:36 2025 +0700

    feat(installation): add encounter list

commit c96d7383793c1de8775badf861df39758d878cef
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:01:24 2025 +0700

    chore: add shared handlers

commit a48f375018b0a48615b4aa321b434c660ac07291
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 12:38:04 2025 +0700

    feat(installation): integrate api installation

commit f83dbfeae3f449c40d7eadea34c74e64f7a0e35c
Merge: ba77ed1 f29eb38
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Oct 1 04:02:05 2025 +0700

    Merge branch 'feat/layout-cleaning' into fe-prescription-56

commit ba77ed1bb560730be50848950379242d85839020
Merge: 4fbd8ee 97d36f1
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Sep 29 08:27:01 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 4fbd8ee75715073afe58d5f33611b464c458a387
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Sep 28 07:10:32 2025 +0700

    feat/prescription-56: merapikan models
---
 .../_common/dropdown-action.vue               |  90 ++++++
 .../control-letter/_common/history-dialog.vue |  49 +++
 .../_common/select-date-range.vue             | 104 ++++++
 .../_common/select-destination-polyclinic.vue |  70 ++++
 .../_common/select-origin-polyclinic.vue      |  70 ++++
 .../app/bpjs/control-letter/filter.vue        | 128 ++++++++
 .../app/bpjs/control-letter/list.cfg.ts       | 108 +++++++
 .../app/bpjs/control-letter/list.vue          |  31 ++
 .../app/chemotherapy/action-proses.vue        |  30 ++
 .../app/chemotherapy/dialog-verification.vue  | 164 ++++++++++
 .../chemotherapy/dropdown-action-process.vue  |  63 ++++
 .../app/chemotherapy/entry-form.vue           | 302 ++++++++++++++++++
 .../app/chemotherapy/list-admin.vue           |  37 +++
 .../app/chemotherapy/list-cfg.admin.ts        |  80 +++++
 .../app/chemotherapy/list-cfg.medicine.ts     |  69 ++++
 .../app/chemotherapy/list-cfg.protocol.ts     |  62 ++++
 app/components/app/chemotherapy/list-cfg.ts   |  80 +++++
 .../app/chemotherapy/list-cfg.verification.ts |  78 +++++
 .../app/chemotherapy/list-cfg.visit.ts        |  99 ++++++
 .../app/chemotherapy/list-verification.vue    |  37 +++
 .../app/chemotherapy/list.medicine.vue        |  76 +++++
 .../app/chemotherapy/list.protocol.vue        |  75 +++++
 .../app/chemotherapy/list.register.vue        |  71 ++++
 .../app/chemotherapy/list.visit.vue           |  45 +++
 app/components/app/chemotherapy/list.vue      |  36 +++
 app/components/app/chemotherapy/sample.ts     |  49 +++
 .../app/chemotherapy/status-badge.vue         |  28 ++
 .../app/chemotherapy/verify-button.vue        |  31 ++
 .../control-letter/_common/select-date.vue    | 116 +++++++
 .../control-letter/_common/select-dpjp.vue    |  98 ++++++
 .../_common/select-specialist.vue             |  98 ++++++
 .../_common/select-subspecialist.vue          |  97 ++++++
 .../control-letter/_common/select-unit.vue    |  85 +++++
 .../app/control-letter/entry-form.vue         |  94 ++++++
 app/components/app/control-letter/list.cfg.ts |  64 ++++
 app/components/app/control-letter/list.vue    |  31 ++
 app/components/app/control-letter/preview.vue |  54 ++++
 .../app/mcu-order-item/list-entry.cfg.ts      |  43 +++
 .../app/mcu-order-item/list-entry.vue         |  26 ++
 app/components/app/mcu-order-item/list.cfg.ts |  18 ++
 app/components/app/mcu-order-item/list.vue    |  20 ++
 app/components/app/mcu-order/detail.vue       |  32 ++
 app/components/app/mcu-order/entry.vue        |   0
 app/components/app/mcu-order/list-pk.vue      |  64 ++++
 app/components/app/mcu-order/list.vue         |  64 ++++
 .../app/mcu-src-category/switcher.vue         |  35 ++
 .../app/mcu-src/picker-accordion.vue          |  49 +++
 app/components/app/medicine-mix/list-entry.ts |  50 +++
 .../app/medicine-mix/list-entry.vue           |  35 ++
 .../app/prescription-item/list-entry.vue      |  20 +-
 .../app/prescription-item/list.cfg.ts         |  41 +++
 app/components/app/prescription-item/list.vue |  20 ++
 .../app/prescription-item/mix-entry.vue       | 113 +++++++
 .../app/prescription-item/non-mix-entry.vue   |  90 ++++++
 app/components/app/prescription/detail.vue    |  32 ++
 app/components/app/prescription/entry.vue     |  62 ++--
 .../app/prescription/list-entry.vue           |  88 +++++
 .../app/prescription/list-with-sub.vue        |  56 ++++
 app/components/app/prescription/list.vue      |  94 ++++--
 .../content/bpjs/control-letter/list.vue      | 220 +++++++++++++
 .../content/chemotherapy/admin-list.vue       | 150 +++++++++
 app/components/content/chemotherapy/list.vue  |  75 +++++
 .../content/chemotherapy/process.vue          |   7 +
 .../content/chemotherapy/protocol.vue         | 106 ++++++
 .../content/chemotherapy/verification.vue     | 241 ++++++++++++++
 app/components/content/control-letter/add.vue | 133 ++++++++
 .../content/control-letter/detail.vue         |  79 +++++
 .../content/control-letter/edit.vue           | 162 ++++++++++
 .../content/control-letter/list.vue           | 176 ++++++++++
 app/components/content/cp-lab-order/entry.vue | 155 +++++++++
 app/components/content/cp-lab-order/list.vue  | 169 ++++++++++
 app/components/content/cp-lab-order/main.vue  |  16 +
 app/components/content/encounter/home.vue     | 190 +++++++++++
 app/components/content/encounter/process.vue  |  13 +-
 app/components/content/prescription/entry.vue | 132 ++++++++
 app/components/content/prescription/list.vue  | 184 ++++++++---
 app/components/content/prescription/main.vue  |  16 +
 .../content/radiology-order/entry.vue         | 155 +++++++++
 .../content/radiology-order/list.vue          | 169 ++++++++++
 .../content/radiology-order/main.vue          |  16 +
 app/components/layout/AppSidebar.vue          |  46 ++-
 app/components/layout/SidebarNavFooter.vue    |  41 +--
 .../pub/my-ui/alert/warning-alert.vue         |  27 ++
 .../pub/my-ui/badge/status-badge.vue          |  26 ++
 app/components/pub/my-ui/combobox/index.ts    |  13 +
 app/components/pub/my-ui/comp-tab/type.ts     |   1 +
 .../pub/my-ui/confirmation/confirmation.vue   |   2 +-
 .../pub/my-ui/data-table/data-table.vue       |   4 +-
 app/components/pub/my-ui/data/types.ts        |   9 +-
 app/components/pub/my-ui/form/input-base.vue  |   6 +-
 .../pub/my-ui/nav-footer/ba-dr-su.vue         |   4 +-
 .../pub/my-ui/nav-header/filter-dialog.vue    |  85 +++++
 .../pub/my-ui/nav-header/filter.vue           |  30 +-
 app/components/pub/my-ui/nav-header/prep.vue  |  15 +-
 .../pub/my-ui/toggle/provided-toggle.vue      |  34 ++
 app/components/pub/ui/button/index.ts         |   2 +-
 app/components/pub/ui/toggle/index.ts         |   6 +-
 app/handlers/control-letter.handler.ts        |  24 ++
 app/handlers/mcu-order-item.handler.ts        |  17 +
 app/handlers/mcu-order.handler.ts             |  17 +
 app/handlers/mcu-src-category.handler.ts      |  24 ++
 app/handlers/prescription-item.handler.ts     |  17 +
 app/handlers/prescription.handler.ts          |  17 +
 app/lib/date.ts                               |   8 +
 app/lib/page-permission.ts                    |  96 +++---
 app/models/consultation.ts                    |   3 +-
 app/models/control-letter.ts                  |  37 +++
 app/models/doctor.ts                          |  13 +-
 app/models/mcu-order.ts                       |   8 +-
 app/models/prescription.ts                    |   6 +-
 .../integration/bpjs/control-letter/index.vue |  40 +++
 .../(features)/integration/bpjs/sep/add.vue   |  12 +-
 .../(features)/integration/bpjs/sep/index.vue |   6 +-
 .../outpatient/encounter/[id]/index.vue       |  41 +++
 .../outpation-action/cemotherapy/index.vue    |  10 -
 .../chemotherapy/[mode]/[id]/verification.vue |  47 +++
 .../chemotherapy/[mode]/index.vue             |  55 ++++
 .../outpation-action/chemotherapy/index.vue   |   9 +
 .../outpation-action/chemotherapy/list.vue    |  40 +++
 .../index.vue                                 |   0
 .../[control_letter_id]/edit.vue              |  41 +++
 .../[control_letter_id]/index.vue             |  41 +++
 .../encounter/[id]/control-letter/add.vue     |  42 +++
 .../rehab/encounter/[id]/process.vue          |  14 +-
 .../(features)/rehab/encounter/index.vue      |   6 +-
 .../(features)/rehab/examination/index.vue    |   3 -
 app/schemas/chemotherapy.schema.ts            |  73 +++++
 app/schemas/control-letter.schema.ts          |  47 +++
 app/schemas/prescription-item.schema.ts       |  10 +
 app/schemas/prescription.schema.ts            |  11 +
 app/services/control-letter.service.ts        |  28 ++
 app/services/doctor.service.ts                |  10 +-
 app/services/mcu-order-item.service.ts        |  24 ++
 app/services/mcu-order.service.ts             |  24 ++
 app/services/mcu-src-category.service.ts      |  25 ++
 app/services/mcu-src.service.ts               |  25 ++
 app/services/prescription-item.service.ts     |  23 ++
 app/services/prescription.service.ts          |  24 ++
 app/services/specialist.service.ts            |   2 +-
 app/services/unit.service.ts                  |   2 +-
 app/stores/user.ts                            |  29 +-
 public/side-menu-items/blank.json             |  12 +
 public/side-menu-items/div-crd.json           |  12 +
 .../{doc.json => emp-doc.json}                |   4 +-
 .../{lab.json => emp-lab.json}                |   0
 .../{miw.json => emp-mid.json}                |   2 +-
 .../{nur.json => emp-nur.json}                |  10 +-
 .../{nut.json => emp-nut.json}                |   4 +-
 .../{pha.json => emp-pha.json}                |   0
 .../{reg.json => emp-reg.json}                |   0
 .../side-menu-items/{sys.json => system.json} |  11 +-
 151 files changed, 7702 insertions(+), 270 deletions(-)
 create mode 100644 app/components/app/bpjs/control-letter/_common/dropdown-action.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/history-dialog.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/select-date-range.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
 create mode 100644 app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
 create mode 100644 app/components/app/bpjs/control-letter/filter.vue
 create mode 100644 app/components/app/bpjs/control-letter/list.cfg.ts
 create mode 100644 app/components/app/bpjs/control-letter/list.vue
 create mode 100644 app/components/app/chemotherapy/action-proses.vue
 create mode 100644 app/components/app/chemotherapy/dialog-verification.vue
 create mode 100644 app/components/app/chemotherapy/dropdown-action-process.vue
 create mode 100644 app/components/app/chemotherapy/entry-form.vue
 create mode 100644 app/components/app/chemotherapy/list-admin.vue
 create mode 100644 app/components/app/chemotherapy/list-cfg.admin.ts
 create mode 100644 app/components/app/chemotherapy/list-cfg.medicine.ts
 create mode 100644 app/components/app/chemotherapy/list-cfg.protocol.ts
 create mode 100644 app/components/app/chemotherapy/list-cfg.ts
 create mode 100644 app/components/app/chemotherapy/list-cfg.verification.ts
 create mode 100644 app/components/app/chemotherapy/list-cfg.visit.ts
 create mode 100644 app/components/app/chemotherapy/list-verification.vue
 create mode 100644 app/components/app/chemotherapy/list.medicine.vue
 create mode 100644 app/components/app/chemotherapy/list.protocol.vue
 create mode 100644 app/components/app/chemotherapy/list.register.vue
 create mode 100644 app/components/app/chemotherapy/list.visit.vue
 create mode 100644 app/components/app/chemotherapy/list.vue
 create mode 100644 app/components/app/chemotherapy/sample.ts
 create mode 100644 app/components/app/chemotherapy/status-badge.vue
 create mode 100644 app/components/app/chemotherapy/verify-button.vue
 create mode 100644 app/components/app/control-letter/_common/select-date.vue
 create mode 100644 app/components/app/control-letter/_common/select-dpjp.vue
 create mode 100644 app/components/app/control-letter/_common/select-specialist.vue
 create mode 100644 app/components/app/control-letter/_common/select-subspecialist.vue
 create mode 100644 app/components/app/control-letter/_common/select-unit.vue
 create mode 100644 app/components/app/control-letter/entry-form.vue
 create mode 100644 app/components/app/control-letter/list.cfg.ts
 create mode 100644 app/components/app/control-letter/list.vue
 create mode 100644 app/components/app/control-letter/preview.vue
 create mode 100644 app/components/app/mcu-order-item/list-entry.cfg.ts
 create mode 100644 app/components/app/mcu-order-item/list-entry.vue
 create mode 100644 app/components/app/mcu-order-item/list.cfg.ts
 create mode 100644 app/components/app/mcu-order-item/list.vue
 create mode 100644 app/components/app/mcu-order/detail.vue
 create mode 100644 app/components/app/mcu-order/entry.vue
 create mode 100644 app/components/app/mcu-order/list-pk.vue
 create mode 100644 app/components/app/mcu-order/list.vue
 create mode 100644 app/components/app/mcu-src-category/switcher.vue
 create mode 100644 app/components/app/mcu-src/picker-accordion.vue
 create mode 100644 app/components/app/medicine-mix/list-entry.ts
 create mode 100644 app/components/app/medicine-mix/list-entry.vue
 create mode 100644 app/components/app/prescription-item/list.cfg.ts
 create mode 100644 app/components/app/prescription-item/list.vue
 create mode 100644 app/components/app/prescription-item/mix-entry.vue
 create mode 100644 app/components/app/prescription-item/non-mix-entry.vue
 create mode 100644 app/components/app/prescription/detail.vue
 create mode 100644 app/components/app/prescription/list-entry.vue
 create mode 100644 app/components/app/prescription/list-with-sub.vue
 create mode 100644 app/components/content/bpjs/control-letter/list.vue
 create mode 100644 app/components/content/chemotherapy/admin-list.vue
 create mode 100644 app/components/content/chemotherapy/list.vue
 create mode 100644 app/components/content/chemotherapy/process.vue
 create mode 100644 app/components/content/chemotherapy/protocol.vue
 create mode 100644 app/components/content/chemotherapy/verification.vue
 create mode 100644 app/components/content/control-letter/add.vue
 create mode 100644 app/components/content/control-letter/detail.vue
 create mode 100644 app/components/content/control-letter/edit.vue
 create mode 100644 app/components/content/control-letter/list.vue
 create mode 100644 app/components/content/cp-lab-order/entry.vue
 create mode 100644 app/components/content/cp-lab-order/list.vue
 create mode 100644 app/components/content/cp-lab-order/main.vue
 create mode 100644 app/components/content/encounter/home.vue
 create mode 100644 app/components/content/prescription/entry.vue
 create mode 100644 app/components/content/prescription/main.vue
 create mode 100644 app/components/content/radiology-order/entry.vue
 create mode 100644 app/components/content/radiology-order/list.vue
 create mode 100644 app/components/content/radiology-order/main.vue
 create mode 100644 app/components/pub/my-ui/alert/warning-alert.vue
 create mode 100644 app/components/pub/my-ui/badge/status-badge.vue
 create mode 100644 app/components/pub/my-ui/nav-header/filter-dialog.vue
 create mode 100644 app/components/pub/my-ui/toggle/provided-toggle.vue
 create mode 100644 app/handlers/control-letter.handler.ts
 create mode 100644 app/handlers/mcu-order-item.handler.ts
 create mode 100644 app/handlers/mcu-order.handler.ts
 create mode 100644 app/handlers/mcu-src-category.handler.ts
 create mode 100644 app/handlers/prescription-item.handler.ts
 create mode 100644 app/handlers/prescription.handler.ts
 create mode 100644 app/models/control-letter.ts
 create mode 100644 app/pages/(features)/integration/bpjs/control-letter/index.vue
 create mode 100644 app/pages/(features)/outpatient/encounter/[id]/index.vue
 delete mode 100644 app/pages/(features)/outpation-action/cemotherapy/index.vue
 create mode 100644 app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
 create mode 100644 app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
 create mode 100644 app/pages/(features)/outpation-action/chemotherapy/index.vue
 create mode 100644 app/pages/(features)/outpation-action/chemotherapy/list.vue
 rename app/pages/(features)/rehab/{examination-queue => encounter-queue}/index.vue (100%)
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
 delete mode 100644 app/pages/(features)/rehab/examination/index.vue
 create mode 100644 app/schemas/chemotherapy.schema.ts
 create mode 100644 app/schemas/control-letter.schema.ts
 create mode 100644 app/schemas/prescription-item.schema.ts
 create mode 100644 app/schemas/prescription.schema.ts
 create mode 100644 app/services/control-letter.service.ts
 create mode 100644 app/services/mcu-order-item.service.ts
 create mode 100644 app/services/mcu-order.service.ts
 create mode 100644 app/services/mcu-src-category.service.ts
 create mode 100644 app/services/mcu-src.service.ts
 create mode 100644 app/services/prescription-item.service.ts
 create mode 100644 app/services/prescription.service.ts
 create mode 100644 public/side-menu-items/blank.json
 create mode 100644 public/side-menu-items/div-crd.json
 rename public/side-menu-items/{doc.json => emp-doc.json} (96%)
 rename public/side-menu-items/{lab.json => emp-lab.json} (100%)
 rename public/side-menu-items/{miw.json => emp-mid.json} (93%)
 rename public/side-menu-items/{nur.json => emp-nur.json} (89%)
 rename public/side-menu-items/{nut.json => emp-nut.json} (93%)
 rename public/side-menu-items/{pha.json => emp-pha.json} (100%)
 rename public/side-menu-items/{reg.json => emp-reg.json} (100%)
 rename public/side-menu-items/{sys.json => system.json} (96%)

diff --git a/app/components/app/bpjs/control-letter/_common/dropdown-action.vue b/app/components/app/bpjs/control-letter/_common/dropdown-action.vue
new file mode 100644
index 00000000..9086c883
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/dropdown-action.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
+
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Log History',
+    onClick: () => {
+      history()
+    },
+    icon: 'i-lucide-logs',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+
+function history() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/history-dialog.vue b/app/components/app/bpjs/control-letter/_common/history-dialog.vue
new file mode 100644
index 00000000..00d7b32f
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/history-dialog.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps()
+
+const items = reactive([
+  { id: 1, description: 'Shipped from warehouse', createdAt: new Date(Date.now() - 86400000 * 2) },
+  { id: 2, description: 'In transit to distribution center', createdAt: new Date(Date.now() - 86400000) },
+  { id: 3, description: 'Out for delivery (Current)', createdAt: new Date() },
+])
+const itemsCount = computed(() => items.length || 0)
+</script>
+
+<template>
+  <ul :class="cn('pb-5 flex flex-col min-h-[30rem]', '')">
+    <li v-for="(item, index) in items" :key="item.id" class="flex gap-3 items-start">
+
+      <div class="flex flex-col items-center">
+        <div class="h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
+          <div :class="cn('dark:bg-white border-gray-300 rounded-full p-1.5',
+            index === 0 ? 'bg-green-500' : 'bg-transparent'
+          )">
+          </div>
+        </div>
+
+        <hr v-if="index !== itemsCount - 1" class="h-8 w-0.5 bg-gray-300 dark:bg-gray-300" aria-hidden="true">
+      </div>
+
+      <div class="flex justify-between items-center min-w-96">
+        <div class="max-w-80">
+          <time :class="cn('font-medium text-gray-800 dark:text-gray-100', '')">
+            {{ item?.createdAt.toLocaleDateString('id-ID') }}
+          </time>
+          <h1 :class="cn('text-gray-500 dark:text-gray-400', '')">{{ item.description }}</h1>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
\ No newline at end of file
diff --git a/app/components/app/bpjs/control-letter/_common/select-date-range.vue b/app/components/app/bpjs/control-letter/_common/select-date-range.vue
new file mode 100644
index 00000000..114f8542
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-date-range.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button
+                  variant="outline"
+                  :class="cn('w-full bg-white border-gray-400 justify-start text-left font-normal', !value && 'text-muted-foreground')"
+                >
+                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  <template v-if="value.start">
+                    <template v-if="value.end">
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }} -
+                      {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                  </template>
+                  <template v-else> Pick a date </template>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent class="w-auto p-0">
+                <RangeCalendar
+                  v-model="value"
+                  initial-focus
+                  :number-of-months="2"
+                  @update:start-value="(startDate) => (value.start = startDate)"
+                />
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue b/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue b/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/bpjs/control-letter/filter.vue b/app/components/app/bpjs/control-letter/filter.vue
new file mode 100644
index 00000000..50005069
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/filter.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+import SelectDateRange from './_common/select-date-range.vue'
+
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
+const props = defineProps<{
+  installation: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<InstallationFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  reset: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    encounterClassCode: values.encounterClassCode || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onResetForm({ resetForm }: { resetForm: () => void }) {
+  emit('reset', resetForm)
+}
+
+const items = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-7 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <SelectDateRange
+            field-name="releaseDate"
+            label="Tanggal Penerbitan"
+            placeholder="Tanggal Penerbitan"
+            :errors="errors"
+            is-required
+          />
+          <SelectDateRange
+            field-name="controlPlanDate"
+            label="Tanggal Rencana Kontrol"
+            placeholder="Tanggal Rencana Kontrol"
+            :errors="errors"
+            is-required
+          />
+          <InputBase
+            field-name="patientName"
+            label="Nama Pasien"
+            placeholder="Nama Pasien"
+          />
+          <InputBase
+            field-name="cardNumber"
+            label="Nomor Kartu"
+            placeholder="Nomor Kartu"
+          />
+          <InputBase
+            field-name="sepNumber"
+            label="Nomor SEP"
+            placeholder="Nomor SEP"
+          />
+          <SelectOriginPolyclinic
+            field-name="originPolyclinic"
+            label="Poliklinik Asal"
+            placeholder="Pilih Poliklinik Asal"
+            :errors="errors"
+            is-required
+          />
+          <SelectDestinationPolyclinic
+            field-name="destinationPolyclinic"
+            label="Poliklinik Tujuan"
+            placeholder="Pilih Poliklinik Tujuan"
+            :errors="errors"
+            is-required
+          />
+        </div>
+      </div>
+     
+      <div class="my-2 flex items-center gap-3 justify-end">
+        <Button @click="onResetForm" variant="secondary">Reset</Button>
+        <Button @click="onSubmitForm">Terapkan</Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/bpjs/control-letter/list.cfg.ts b/app/components/app/bpjs/control-letter/list.cfg.ts
new file mode 100644
index 00000000..8eb7e5f4
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/list.cfg.ts
@@ -0,0 +1,108 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('./_common/dropdown-action.vue'))
+const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {},{}, {}, {}, {}, {}, {width: 90},{width: 10},],
+
+  headers: [
+    [
+      { label: 'No Surat' },
+      { label: 'No MR' },
+      { label: 'Nama' },
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Tgl Penerbitan' },
+      { label: 'Klinik Asal' },
+      { label: 'Klinik Tujuan' },
+      { label: 'DPJP' },
+      { label: 'No SEP Asal' },
+      { label: 'Status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'birth_date',
+    'birth_date', 'number', 'person.name', 'birth_date', 'status', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/bpjs/control-letter/list.vue b/app/components/app/bpjs/control-letter/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/bpjs/control-letter/list.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/chemotherapy/action-proses.vue b/app/components/app/chemotherapy/action-proses.vue
new file mode 100644
index 00000000..4e2efeb3
--- /dev/null
+++ b/app/components/app/chemotherapy/action-proses.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get proses handler from parent via inject
+const prosesHandler = inject<(rec: any) => void>('proses-handler', null)
+
+function handleProses() {
+  if (prosesHandler) {
+    prosesHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      class="border-orange-500 bg-orange-500 text-white hover:bg-orange-600"
+      @click="handleProses"
+    >
+      Proses
+    </Button>
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/dialog-verification.vue b/app/components/app/chemotherapy/dialog-verification.vue
new file mode 100644
index 00000000..2d617445
--- /dev/null
+++ b/app/components/app/chemotherapy/dialog-verification.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+import Input from '~/components/pub/ui/input/Input.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+interface Props {
+  open?: boolean
+  tanggalPemeriksaan?: string | Date
+  jadwalTanggalPemeriksaan?: string | Date
+  isLoading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  tanggalPemeriksaan: undefined,
+  jadwalTanggalPemeriksaan: undefined,
+  isLoading: false,
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'update:date': [value: string | undefined]
+  'update:schedule': [value: string | undefined]
+  submit: [data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }]
+}>()
+
+// Local state for jadwal tanggal pemeriksaan
+const jadwalTanggal = ref<string | undefined>(
+  props.jadwalTanggalPemeriksaan
+    ? typeof props.jadwalTanggalPemeriksaan === 'string'
+      ? props.jadwalTanggalPemeriksaan
+      : format(props.jadwalTanggalPemeriksaan, 'yyyy-MM-dd')
+    : undefined,
+)
+
+// Watch for external changes
+watch(
+  () => props.jadwalTanggalPemeriksaan,
+  (newValue) => {
+    if (newValue) {
+      jadwalTanggal.value =
+        typeof newValue === 'string' ? newValue : format(newValue, 'yyyy-MM-dd')
+    } else {
+      jadwalTanggal.value = undefined
+    }
+  },
+)
+
+// Watch local changes
+watch(jadwalTanggal, (newValue) => {
+  emit('update:schedule', newValue)
+})
+
+// Format date for display
+const formattedTanggalPemeriksaan = computed(() => {
+  if (!props.tanggalPemeriksaan) return ''
+  try {
+    const date =
+      props.tanggalPemeriksaan instanceof Date
+        ? props.tanggalPemeriksaan
+        : parseISO(props.tanggalPemeriksaan)
+    return format(date, 'dd MMMM yyyy', { locale: localeID })
+  } catch {
+    return props.tanggalPemeriksaan.toString()
+  }
+})
+
+// Handle submit
+function handleSubmit() {
+  emit('submit', {
+    tanggalPemeriksaan: props.tanggalPemeriksaan
+      ? typeof props.tanggalPemeriksaan === 'string'
+        ? props.tanggalPemeriksaan
+        : format(props.tanggalPemeriksaan, 'yyyy-MM-dd')
+      : undefined,
+    jadwalTanggalPemeriksaan: jadwalTanggal.value,
+  })
+}
+
+// Table data for Jadwal Ruang Tindakan
+const scheduleData = [
+  {
+    no: 1,
+    namaJenis: 'Ruang Tindakan',
+    jenisPemeriksaan: 'KEMOTERAPI',
+  },
+]
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    size="lg"
+    title="Verifikasi Jadwal Pasien"
+    @update:open="$emit('update:open', $event)"
+  >
+    <div class="space-y-6 py-4">
+      <!-- Jadwal Ruang Tindakan Section -->
+      <div class="space-y-3">
+        <h4 class="text-base font-semibold">Jadwal Ruang Tindakan</h4>
+        <div class="overflow-hidden rounded-md border">
+          <Table>
+            <TableHeader class="bg-gray-50">
+              <TableRow>
+                <TableHead class="font-semibold">NO</TableHead>
+                <TableHead class="font-semibold">NAMA JENIS</TableHead>
+                <TableHead class="font-semibold">JENIS PEMERIKSAAN</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow v-for="(row, index) in scheduleData" :key="index">
+                <TableCell>{{ row.no }}</TableCell>
+                <TableCell>{{ row.namaJenis }}</TableCell>
+                <TableCell>{{ row.jenisPemeriksaan }}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      <!-- Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">Tanggal Pemeriksaan</label>
+        <Input
+          :model-value="formattedTanggalPemeriksaan"
+          :disabled="true"
+          class="bg-gray-100 text-gray-700"
+          readonly
+        />
+      </div>
+
+      <!-- Jadwal Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">
+          Jadwal Tanggal Pemeriksaan
+          <span class="text-red-500">*</span>
+        </label>
+        <DatepickerSingle
+          v-model="jadwalTanggal"
+          placeholder="Pilih Jadwal"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <!-- Action Button -->
+      <div class="flex justify-end pt-4">
+        <Button
+          type="button"
+          :disabled="isLoading || !jadwalTanggal"
+          class="bg-gradient-to-r from-orange-500 to-orange-400 hover:from-orange-600 hover:to-orange-500 text-white shadow-md"
+          @click="handleSubmit"
+        >
+          <Icon name="i-lucide-calendar-check" class="mr-2 h-4 w-4" />
+          Simpan Jadwal
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
diff --git a/app/components/app/chemotherapy/dropdown-action-process.vue b/app/components/app/chemotherapy/dropdown-action-process.vue
new file mode 100644
index 00000000..56e14886
--- /dev/null
+++ b/app/components/app/chemotherapy/dropdown-action-process.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Proses',
+    onClick: () => {
+      process()
+    },
+    icon: 'i-lucide-pencil',
+  },
+]
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'Process'
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/app/chemotherapy/entry-form.vue b/app/components/app/chemotherapy/entry-form.vue
new file mode 100644
index 00000000..39113d63
--- /dev/null
+++ b/app/components/app/chemotherapy/entry-form.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Input from '~/components/pub/ui/input/Input.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { chemotherapySchema } from "~/schemas/chemotherapy.schema"
+
+interface Props {
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+const emit = defineEmits<{
+  submit: [values: any, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(chemotherapySchema),
+  initialValues: {
+    namaPasien: '',
+    tanggalLahir: '',
+    noRM: '',
+    alamat: '',
+    beratBadan: '',
+    tinggiBadan: '',
+    diagnosa: '',
+    siklus: '',
+    periodeAwal: '',
+    periodeAkhir: '',
+    tanggalKemoterapi: '',
+    dokterKRJ: '',
+  },
+})
+
+// Define form fields
+const [namaPasien, namaPasienAttrs] = defineField('namaPasien')
+const [tanggalLahir, tanggalLahirAttrs] = defineField('tanggalLahir')
+const [noRM, noRMAttrs] = defineField('noRM')
+const [alamat, alamatAttrs] = defineField('alamat')
+const [beratBadan, beratBadanAttrs] = defineField('beratBadan')
+const [tinggiBadan, tinggiBadanAttrs] = defineField('tinggiBadan')
+const [diagnosa, diagnosaAttrs] = defineField('diagnosa')
+const [siklus, siklusAttrs] = defineField('siklus')
+const [periodeAwal, periodeAwalAttrs] = defineField('periodeAwal')
+const [periodeAkhir, periodeAkhirAttrs] = defineField('periodeAkhir')
+const [tanggalKemoterapi, tanggalKemoterapiAttrs] = defineField('tanggalKemoterapi')
+const [dokterKRJ, dokterKRJAttrs] = defineField('dokterKRJ')
+
+// Set initial values if provided
+if (props.values) {
+  // Object.entries(props.values).forEach(([key, value]) => {
+  //   if (value !== undefined) {
+  //     const field = defineField(key)[0]
+  //     field.value = value
+  //   }
+  // })
+}
+
+const resetForm = () => {
+  // Object.keys(meta.value.initialValues).forEach((key) => {
+  //   const field = defineField(key)[0]
+  //   field.value = ''
+  // })
+}
+
+function onSubmitForm() {
+  const formData = {
+    namaPasien: namaPasien.value,
+    tanggalLahir: tanggalLahir.value,
+    noRM: noRM.value,
+    alamat: alamat.value,
+    beratBadan: beratBadan.value,
+    tinggiBadan: tinggiBadan.value,
+    diagnosa: diagnosa.value,
+    siklus: siklus.value,
+    periodeAwal: periodeAwal.value,
+    periodeAkhir: periodeAkhir.value,
+    tanggalKemoterapi: tanggalKemoterapi.value,
+    dokterKRJ: dokterKRJ.value,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form @submit.prevent>
+    <!-- Data Pasien Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Data Pasien</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Nama Pasien</Label>
+          <Field :errMessage="errors.namaPasien">
+            <Input
+              v-model="namaPasien"
+              v-bind="namaPasienAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nama pasien"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Lahir</Label>
+          <Field :errMessage="errors.tanggalLahir">
+            <DatePicker
+              v-model="tanggalLahir"
+              v-bind="tanggalLahirAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal lahir"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">No. RM</Label>
+          <Field :errMessage="errors.noRM">
+            <Input
+              v-model="noRM"
+              v-bind="noRMAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nomor RM"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Alamat</Label>
+          <Field :errMessage="errors.alamat">
+            <Input
+              v-model="alamat"
+              v-bind="alamatAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan alamat"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Berat Badan</Label>
+          <Field :errMessage="errors.beratBadan">
+            <Input
+              v-model="beratBadan"
+              v-bind="beratBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan berat badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tinggi Badan</Label>
+          <Field :errMessage="errors.tinggiBadan">
+            <Input
+              v-model="tinggiBadan"
+              v-bind="tinggiBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan tinggi badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Diagnosa</Label>
+          <Field :errMessage="errors.diagnosa">
+            <Combobox
+              id="diagnose"
+              v-model="diagnosa"
+              v-bind="diagnosaAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Tentukan diagnosa pasien"
+              search-placeholder="Cari diagnosa"
+              empty-message="Diagnosa tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Protokol Kemoterapi Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Protokol Kemoterapi</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Siklus</Label>
+          <Field :errMessage="errors.siklus">
+            <Input
+              v-model="siklus"
+              v-bind="siklusAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan siklus"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Periode</Label>
+          <div class="flex items-center gap-4">
+            <Field
+              :errMessage="errors.periodeAwal"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAwal"
+                v-bind="periodeAwalAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Mulai Periode"
+              />
+            </Field>
+            <span>Sampai</span>
+            <Field
+              :errMessage="errors.periodeAkhir"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAkhir"
+                v-bind="periodeAkhirAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Akhir Periode"
+              />
+            </Field>
+          </div>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Kemoterapi</Label>
+          <Field :errMessage="errors.tanggalKemoterapi">
+            <DatepickerSingle
+              v-model="tanggalKemoterapi"
+              v-bind="tanggalKemoterapiAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal kemoterapi"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Dokter Ruang Tindakan</Label>
+          <Field :errMessage="errors.dokterKRJ">
+            <Combobox
+              id="doctor"
+              v-model="dokterKRJ"
+              v-bind="dokterKRJAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih dokter"
+              search-placeholder="Cari dokter"
+              empty-message="Dokter tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Form Actions -->
+    <div class="flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/chemotherapy/list-admin.vue b/app/components/app/chemotherapy/list-admin.vue
new file mode 100644
index 00000000..a201f2a1
--- /dev/null
+++ b/app/components/app/chemotherapy/list-admin.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.admin'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/list-cfg.admin.ts b/app/components/app/chemotherapy/list-cfg.admin.ts
new file mode 100644
index 00000000..38d77121
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.admin.ts
@@ -0,0 +1,80 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('./dropdown-action-process.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/chemotherapy/list-cfg.medicine.ts b/app/components/app/chemotherapy/list-cfg.medicine.ts
new file mode 100644
index 00000000..103452f5
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.medicine.ts
@@ -0,0 +1,69 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 60 },
+    { width: 200 },
+    { width: 100 },
+    { width: 100 },
+    { width: 150 },
+    { width: 80 },
+    { width: 200 },
+    { width: 120 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'NAMA OBAT' },
+      { label: 'DOSIS' },
+      { label: 'SATUAN' },
+      { label: 'RUTE PEMBERIAN' },
+      { label: 'HARI' },
+      { label: 'CATATAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'namaObat',
+    'dosis',
+    'satuan',
+    'rute',
+    'hari',
+    'catatan',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/chemotherapy/list-cfg.protocol.ts b/app/components/app/chemotherapy/list-cfg.protocol.ts
new file mode 100644
index 00000000..da678c0f
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.protocol.ts
@@ -0,0 +1,62 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'TANGGAL' },
+      { label: 'SIKLUS' },
+      { label: 'PERIODE KEMOTERAPI' },
+      { label: 'KEHADIRAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'tanggal',
+    'siklus',
+    'periode',
+    'kehadiran',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/chemotherapy/list-cfg.ts b/app/components/app/chemotherapy/list-cfg.ts
new file mode 100644
index 00000000..29c24e6f
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.ts
@@ -0,0 +1,80 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/chemotherapy/list-cfg.verification.ts b/app/components/app/chemotherapy/list-cfg.verification.ts
new file mode 100644
index 00000000..e75aa615
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.verification.ts
@@ -0,0 +1,78 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 180 },
+    { width: 150 },
+    { width: 100 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggalMasuk',
+    'pjBerkasRm',
+    'dokter',
+    'jenisRuangan',
+    'jenisTindakan',
+    'tanggalJadwalTindakan',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/chemotherapy/list-cfg.visit.ts b/app/components/app/chemotherapy/list-cfg.visit.ts
new file mode 100644
index 00000000..cb242d62
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.visit.ts
@@ -0,0 +1,99 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+type VisitDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 150 }, // TANGGAL MASUK
+    { width: 180 }, // PJ BERKAS RM
+    { width: 200 }, // DOKTER
+    { width: 150 }, // JENIS RUANGAN
+    { width: 150 }, // JENIS TINDAKAN
+    { width: 180 }, // TANGGAL JADWAL TINDAKAN
+    { width: 150 }, // STATUS
+    { width: 120 }, // AKSI
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggal_masuk',
+    'pj_berkas_rm',
+    'dokter',
+    'jenis_ruangan',
+    'jenis_tindakan',
+    'tanggal_jadwal_tindakan',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'nama', label: 'Nama' },
+  ],
+
+  parses: {
+    tanggal_masuk: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_masuk) return '-'
+      try {
+        const date = typeof recX.tanggal_masuk === 'string' ? parseISO(recX.tanggal_masuk) : recX.tanggal_masuk
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_masuk.toString()
+      }
+    },
+    tanggal_jadwal_tindakan: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_jadwal_tindakan) return '-'
+      try {
+        const date =
+          typeof recX.tanggal_jadwal_tindakan === 'string'
+            ? parseISO(recX.tanggal_jadwal_tindakan)
+            : recX.tanggal_jadwal_tindakan
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_jadwal_tindakan.toString()
+      }
+    },
+  },
+
+  components: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/chemotherapy/list-verification.vue b/app/components/app/chemotherapy/list-verification.vue
new file mode 100644
index 00000000..93120f69
--- /dev/null
+++ b/app/components/app/chemotherapy/list-verification.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.verification'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/list.medicine.vue b/app/components/app/chemotherapy/list.medicine.vue
new file mode 100644
index 00000000..748c8cb9
--- /dev/null
+++ b/app/components/app/chemotherapy/list.medicine.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.medicine'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Protokol Obat Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Daftar obat-obatan yang digunakan dalam protokol kemoterapi.</p>
+        </div>
+        <button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
+          <i class="ri-add-line"></i>
+          Tambah Obat Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari obat..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/list.protocol.vue b/app/components/app/chemotherapy/list.protocol.vue
new file mode 100644
index 00000000..7b5c3234
--- /dev/null
+++ b/app/components/app/chemotherapy/list.protocol.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.protocol'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Protokol Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Rangkaian prosedur kemoterapi yang terintegrasi dan konsisten.</p>
+        </div>
+        <button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
+          <i class="ri-add-line"></i>
+          Tambah Protokol Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari protokol..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/chemotherapy/list.register.vue b/app/components/app/chemotherapy/list.register.vue
new file mode 100644
index 00000000..131afc04
--- /dev/null
+++ b/app/components/app/chemotherapy/list.register.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.protocol'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan.</p>
+        </div>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari jadwal pemeriksaan..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/chemotherapy/list.visit.vue b/app/components/app/chemotherapy/list.visit.vue
new file mode 100644
index 00000000..de451f31
--- /dev/null
+++ b/app/components/app/chemotherapy/list.visit.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.visit'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  verify: [rec: any]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+
+// Provide verify handler to child components via provide/inject
+function handleVerify(rec: any) {
+  emit('verify', rec)
+}
+
+provide('verify-handler', handleVerify)
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/list.vue b/app/components/app/chemotherapy/list.vue
new file mode 100644
index 00000000..19642581
--- /dev/null
+++ b/app/components/app/chemotherapy/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/chemotherapy/sample.ts b/app/components/app/chemotherapy/sample.ts
new file mode 100644
index 00000000..082cde66
--- /dev/null
+++ b/app/components/app/chemotherapy/sample.ts
@@ -0,0 +1,49 @@
+export type ChemotherapyData = {
+  id: number
+  tanggal: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: ChemotherapyData[] = [
+  {
+    id: 1,
+    tanggal: '12 Agustus 2025',
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    tanggal: '11 Agustus 2025',
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]
diff --git a/app/components/app/chemotherapy/status-badge.vue b/app/components/app/chemotherapy/status-badge.vue
new file mode 100644
index 00000000..1a7d94ca
--- /dev/null
+++ b/app/components/app/chemotherapy/status-badge.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusMap: Record<string, { text: string; variant: 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline' }> = {
+  'belum_terverifikasi': { text: 'Belum Terverifikasi', variant: 'secondary' },
+  'terverifikasi': { text: 'Terverifikasi', variant: 'positive' },
+  'ditolak': { text: 'Ditolak', variant: 'destructive' },
+}
+
+const statusInfo = computed(() => {
+  const status = props.rec.status?.toLowerCase() || props.rec.status_code?.toLowerCase() || 'belum_terverifikasi'
+  return statusMap[status] || statusMap['belum_terverifikasi']
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="statusInfo.variant">
+      {{ statusInfo.text }}
+    </Badge>
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/verify-button.vue b/app/components/app/chemotherapy/verify-button.vue
new file mode 100644
index 00000000..1d9c2d3a
--- /dev/null
+++ b/app/components/app/chemotherapy/verify-button.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get verify handler from parent via inject
+const verifyHandler = inject<(rec: any) => void>('verify-handler', null)
+
+function handleVerify() {
+  if (verifyHandler) {
+    verifyHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      variant="outline"
+      class="border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100 hover:text-orange-700"
+      @click="handleVerify"
+    >
+      Verifikasi
+    </Button>
+  </div>
+</template>
+
diff --git a/app/components/app/control-letter/_common/select-date.vue b/app/components/app/control-letter/_common/select-date.vue
new file mode 100644
index 00000000..057d0a63
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-date.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              id="birthDate"
+              type="date"
+              min="1900-01-01"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/_common/select-dpjp.vue b/app/components/app/control-letter/_common/select-dpjp.vue
new file mode 100644
index 00000000..2053ebdb
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-dpjp.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const doctors = ref<Array<Item>>([])
+
+async function fetchDpjp(specialistId: string, subspecialistId: string) {
+  doctors.value = await getDoctorLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    includes: 'employee-person',
+    // "unit-id": parseInt(unitId),
+    "specialist-code": String(specialistId),
+    "subspecialist-code": String(subspecialistId),
+  }, true)
+}
+
+// const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+
+watch([ selectedSpecialistId, selectedSubSpecialistId], () => {
+  if (selectedSpecialistId.value && selectedSubSpecialistId.value) {
+    console.log(`Select Doctor`)
+    fetchDpjp( selectedSpecialistId.value, selectedSubSpecialistId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="doctors"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              :is-disabled="selectedSubSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/_common/select-specialist.vue b/app/components/app/control-letter/_common/select-specialist.vue
new file mode 100644
index 00000000..cd5ee923
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-specialist.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSpecialistLabelList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const specialists = ref<Array<Item>>([])
+
+async function fetchSpecialists(unitId: string) {
+  specialists.value = await getSpecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "unit-id": String(unitId),
+  }, true)
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+
+function handleSpecialistChange(selected: string) {
+  selectedSpecialistId.value = selected ?? null
+}
+
+watch([selectedUnitId], () => {
+  if (selectedUnitId.value) {
+    fetchSpecialists(selectedUnitId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Spesialis
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="specialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSpecialistChange"
+              :is-disabled="selectedUnitId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>
+  </DE.Block>
+</template>
diff --git a/app/components/app/control-letter/_common/select-subspecialist.vue b/app/components/app/control-letter/_common/select-subspecialist.vue
new file mode 100644
index 00000000..61567c0c
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-subspecialist.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const subspecialists = ref<Array<Item>>([])
+
+async function fetchSubSpecialists(specialistId: string) {
+  subspecialists.value = await getSubspecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "specialist-code": String(specialistId),
+  }, true)
+}
+
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+function handleSubSpecialistChange(selected: string) {
+  selectedSubSpecialistId.value = selected ?? null
+}
+
+watch([selectedSpecialistId], () => {
+  if (selectedSpecialistId.value) {
+    fetchSubSpecialists(selectedSpecialistId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Sub Spesialis
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="subspecialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSubSpecialistChange"
+              :is-disabled="selectedSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>    
+  </DE.Block>
+</template>
diff --git a/app/components/app/control-letter/_common/select-unit.vue b/app/components/app/control-letter/_common/select-unit.vue
new file mode 100644
index 00000000..afe0ca0a
--- /dev/null
+++ b/app/components/app/control-letter/_common/select-unit.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+import { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const units = ref<Array<Item>>([])
+
+async function fetchData() {
+  units.value = await getUnitLabelList({}, true)
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+function handleDataChange(selected: string) {
+  selectedUnitId.value = selected ?? null
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="units"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleDataChange"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/control-letter/entry-form.vue b/app/components/app/control-letter/entry-form.vue
new file mode 100644
index 00000000..2517e8b1
--- /dev/null
+++ b/app/components/app/control-letter/entry-form.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectSpeciality from './_common/select-specialist.vue'
+import SelectDpjp from './_common/select-dpjp.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import SelectUnit from './_common/select-unit.vue'
+import SelectSubspecialist from './_common/select-subspecialist.vue'
+import SelectSpecialist from './_common/select-specialist.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+
+  selectedUnitId?: number | null
+  selectedSpecialistId?: number | null
+  selectedSubSpecialistId?: number | null
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <DE.Block :col-count="2" :cell-flex="false">
+      <InputBase
+        field-name="sepStatus"
+        label="Status Sep"
+        placeholder="Status Sep"
+        :is-disabled="true"
+      />
+      <SelectDate
+        field-name="date"
+        label="Tanggal Rencana Kontrol"
+        :errors="errors"
+        is-required
+      />
+      <DE.Cell :col-span="2">
+        <DE.Block :col-count="4" :cell-flex="false">
+          <SelectUnit
+            field-name="unit_code"
+            label="Unit"
+            placeholder="Pilih Unit"
+            :errors="errors"
+            is-required
+          />
+          <SelectSpecialist
+            field-name="specialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectSubspecialist
+            field-name="subspecialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectDpjp
+            field-name="doctor_code"
+            label="DPJP"
+            placeholder="Pilih DPJP"
+            :errors="errors"
+            is-required
+          />
+        </DE.Block>
+      </DE.Cell>
+    </DE.Block>    
+  </Form>
+</template>
diff --git a/app/components/app/control-letter/list.cfg.ts b/app/components/app/control-letter/list.cfg.ts
new file mode 100644
index 00000000..3eb7bd84
--- /dev/null
+++ b/app/components/app/control-letter/list.cfg.ts
@@ -0,0 +1,64 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{width: 180}, {}, {}, {}, {}, {width: 30},],
+
+  headers: [
+    [
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Spesialis' },
+      { label: 'Sub Spesialis' },
+      { label: 'DPJP' },
+      { label: 'Status SEP' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'specialist.name', 'subspecialist.name', 'doctor.employee.person.name', 'sep_status', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+    specialist_subspecialist: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      // const { person } = rec as Patient
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    sep_status(_rec) {
+      return 'SEP Internal'
+    },
+  },
+}
diff --git a/app/components/app/control-letter/list.vue b/app/components/app/control-letter/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/control-letter/list.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/control-letter/preview.vue b/app/components/app/control-letter/preview.vue
new file mode 100644
index 00000000..e10a2b91
--- /dev/null
+++ b/app/components/app/control-letter/preview.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import { cn, } from '~/lib/utils'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  instance: ControlLetter | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: string): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// Computed addresses from nested data
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+function onClick(type: string) {
+  emit('click', type)
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div :class="cn('min-h-[50vh] space-y-2',)">
+    <DetailRow label="Tgl Rencana Kontrol">{{ props.instance?.date ? new Date(props.instance?.date).toLocaleDateString('id-ID') : '-' }}</DetailRow>
+    <DetailRow label="Unit">{{ props.instance?.unit.name || '-' }}</DetailRow>
+    <DetailRow label="Spesialis">{{ props.instance?.specialist.name || '-' }}</DetailRow>
+    <DetailRow label="Sub Spesialis">{{ props.instance?.subspecialist.name || '-' }}</DetailRow>
+    <DetailRow label="DPJP">{{ props.instance?.doctor.employee.person.name || '-' }}</DetailRow>
+    <DetailRow label="Status SEP">{{ 'SEP INTERNAL' }}</DetailRow>
+  </div>
+  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBaEd @click="onClick" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/mcu-order-item/list-entry.cfg.ts b/app/components/app/mcu-order-item/list-entry.cfg.ts
new file mode 100644
index 00000000..89d85dce
--- /dev/null
+++ b/app/components/app/mcu-order-item/list-entry.cfg.ts
@@ -0,0 +1,43 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+      { label: 'Catatan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrc.mcuSrcCategory.name', 'note'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+
+  components: {
+    note(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: input,
+      }
+    },
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/mcu-order-item/list-entry.vue b/app/components/app/mcu-order-item/list-entry.vue
new file mode 100644
index 00000000..6c93c5ac
--- /dev/null
+++ b/app/components/app/mcu-order-item/list-entry.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { config } from './list-entry.cfg'
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  requestItem: []
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
+    v-bind="config"
+    :rows="data"
+  />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('requestItem')">
+      <Icon name="i-lucide-plus" />
+      Pilih Item
+    </Button>
+  </div>
+</template>
diff --git a/app/components/app/mcu-order-item/list.cfg.ts b/app/components/app/mcu-order-item/list.cfg.ts
new file mode 100644
index 00000000..2b054379
--- /dev/null
+++ b/app/components/app/mcu-order-item/list.cfg.ts
@@ -0,0 +1,18 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+export const config: Config = {
+  cols: [{}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrcCategory.name'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+}
diff --git a/app/components/app/mcu-order-item/list.vue b/app/components/app/mcu-order-item/list.vue
new file mode 100644
index 00000000..ef7438c6
--- /dev/null
+++ b/app/components/app/mcu-order-item/list.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { McuOrderItem } from '~/models/mcu-order-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border"
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/mcu-order/detail.vue b/app/components/app/mcu-order/detail.vue
new file mode 100644
index 00000000..fe161595
--- /dev/null
+++ b/app/components/app/mcu-order/detail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuOrder } from '~/models/mcu-order';
+
+const props = defineProps<{
+  data: McuOrder
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data?.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/mcu-order/entry.vue b/app/components/app/mcu-order/entry.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/mcu-order/list-pk.vue b/app/components/app/mcu-order/list-pk.vue
new file mode 100644
index 00000000..df296419
--- /dev/null
+++ b/app/components/app/mcu-order/list-pk.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>
diff --git a/app/components/app/mcu-order/list.vue b/app/components/app/mcu-order/list.vue
new file mode 100644
index 00000000..df296419
--- /dev/null
+++ b/app/components/app/mcu-order/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>
diff --git a/app/components/app/mcu-src-category/switcher.vue b/app/components/app/mcu-src-category/switcher.vue
new file mode 100644
index 00000000..78c54acb
--- /dev/null
+++ b/app/components/app/mcu-src-category/switcher.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuSrcCategory } from '~/models/mcu-src-category';
+
+const model = defineModel()
+const props = defineProps<{
+  data: McuSrcCategory[]
+}>()
+const emit = defineEmits<{
+  pick: [category: McuSrcCategory]
+}>()
+
+if (!model.value && props.data.length > 0) {
+  model.value = props.data[0]?.code
+}
+
+function pick(category: McuSrcCategory) {
+  model.value = category.code
+  emit('pick', category)
+}
+
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Kategori
+    </div>
+    <div class="-mx-1 [&_button]:mx-1 ">
+      <Button v-for="item, idx in data" :variant="model === item.code ? 'default' : 'outline'" @click="pick(item)">
+        {{ item.name }}
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/mcu-src/picker-accordion.vue b/app/components/app/mcu-src/picker-accordion.vue
new file mode 100644
index 00000000..a42834f9
--- /dev/null
+++ b/app/components/app/mcu-src/picker-accordion.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { McuSrc } from '~/models/mcu-src';
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+const data = defineModel({ type: Array as PropType<McuOrderItem[]>, required: true })
+defineProps<{
+  dataSource: McuSrc[]
+  // data: number[]
+}>()
+
+const emit = defineEmits<{
+  pick: [item: McuSrc]
+}>()
+
+function pick(item: McuSrc) {
+  emit('pick', item)
+  // if (data.value.some(e => e.mcuSrc_id === item.id)) {
+  //   const pos = data.value.map(e => e.mcuSrc_id).indexOf(item.id)
+  //   data.value.splice(pos, 1)
+  // } else {
+  //   data.value.push({
+  //     id: 0,
+  //     mcuOrder_id: 0,
+  //     mcuSrc_id: item.id,
+  //     createdAt: "",
+  //     updatedAt: "",
+  //   })
+  // }
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Daftar Item
+    </div>
+    <div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
+      <div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
+        <Button 
+          :variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
+          type="button"
+          @click="pick(item)"
+        > 
+          {{ item.name }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/medicine-mix/list-entry.ts b/app/components/app/medicine-mix/list-entry.ts
new file mode 100644
index 00000000..03202670
--- /dev/null
+++ b/app/components/app/medicine-mix/list-entry.ts
@@ -0,0 +1,50 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: "Dosis" },
+    { label: 'Satuan' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['name', 'dose', 'uom.name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup_code || '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action: (rec: unknown, idx: number): RecComponent => {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/medicine-mix/list-entry.vue b/app/components/app/medicine-mix/list-entry.vue
new file mode 100644
index 00000000..ba0fa689
--- /dev/null
+++ b/app/components/app/medicine-mix/list-entry.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
index 5b496b2b..422ebba7 100644
--- a/app/components/app/prescription-item/list-entry.vue
+++ b/app/components/app/prescription-item/list-entry.vue
@@ -1,14 +1,30 @@
 <script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
 import { config } from './list-entry.cfg'
 
 defineProps<{
-  data: any[]
+  data: PrescriptionItem[]
 }>()
+
+const emit = defineEmits<{
+  add: [mode: 'mix' | 'non-mix']
+}>()
+
 </script>
 
 <template>
-  <PubMyUiDataTable
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
     v-bind="config"
     :rows="data"
   />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('add', 'mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+    <Button @click="emit('add', 'non-mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+  </div>
 </template>
diff --git a/app/components/app/prescription-item/list.cfg.ts b/app/components/app/prescription-item/list.cfg.ts
new file mode 100644
index 00000000..fd980bb1
--- /dev/null
+++ b/app/components/app/prescription-item/list.cfg.ts
@@ -0,0 +1,41 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+}
diff --git a/app/components/app/prescription-item/list.vue b/app/components/app/prescription-item/list.vue
new file mode 100644
index 00000000..ed64b09e
--- /dev/null
+++ b/app/components/app/prescription-item/list.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: PrescriptionItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-2 2xl:mb-3"
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
new file mode 100644
index 00000000..d9b4881e
--- /dev/null
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { LucidePlus } from 'lucide-vue-next';
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue';
+import * as Table from '~/components/pub/ui/table'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+
+import { genBase } from '~/models/_base';
+import { genMedicine } from '~/models/medicine';
+import type { MedicinemixItem } from '~/models/medicinemix-item';
+import type { PrescriptionItem } from '~/models/prescription-item';
+
+const props = defineProps<{
+  data: PrescriptionItem
+  items: MedicinemixItem[]
+}>()
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem, items: MedicinemixItem[]],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data, props.items)
+  }
+}
+
+function addItem() {
+  props.items.push({
+    ...genBase(),
+    medicineMix_id: 0,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    dose: 0,
+    uom_code: '',
+  })
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Frequensi</DE.Label>
+        <DE.Field><Input v-model="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Field><Input v-model="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Total</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
+  <Table.Table class="border mb-3 2xl:mb-4">
+    <Table.TableHeader class="[&_th]:h-8 [&_th]:2xl:h-9">
+      <Table.TableRow>
+        <Table.TableHead>Nama</Table.TableHead>
+        <Table.TableHead class="w-24">Dosis</Table.TableHead>
+        <Table.TableHead class="w-24">Satuan</Table.TableHead>
+        <Table.TableHead class="w-20">..</Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody class="[&_td]:p-0.6">
+      <Table.TableRow v-if="items.length > 0" v-for="item in items">
+        <Table.TableCell>
+          <Input v-model="item.medicine.name" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input v-model="item.dose" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input />
+        </Table.TableCell>
+      </Table.TableRow>
+      <Table.TableRow v-else>
+        <Table.TableCell colspan="4" class="!p-5 text-center">
+          Belum ada data
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <div>
+    <Button @click="addItem">
+      <LucidePlus />
+      Tambah
+    </Button>
+  </div>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
new file mode 100644
index 00000000..25970646
--- /dev/null
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+import { bigTimeUnitCodes } from '~/lib/constants'
+
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const props = defineProps<{
+  data: PrescriptionItem
+}>()
+
+type ClickType = 'close' | 'save'
+type Item = {
+  value: string
+  label: string
+}
+
+const bigTimeUnitCodeItems: Item[] = []
+
+if(!props.data.intervalUnit_code) {
+  props.data.intervalUnit_code = 'day'
+}
+
+Object.keys(bigTimeUnitCodes).forEach((key) => {
+  bigTimeUnitCodeItems.push({
+    value: key,
+    label: bigTimeUnitCodes[key] || '',
+  })
+})
+
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Frequensi</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Dosis</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Interval</DE.Label>
+      <DE.Field>
+        <Select
+          v-model="data.intervalUnit_code"
+          :items="bigTimeUnitCodeItems"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Total</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/app/prescription/detail.vue b/app/components/app/prescription/detail.vue
new file mode 100644
index 00000000..694eb9a1
--- /dev/null
+++ b/app/components/app/prescription/detail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Prescription } from '~/models/prescription'
+
+const props = defineProps<{
+  data: Prescription
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data.issuedAt?.substring(0, 10) || data.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/prescription/entry.vue b/app/components/app/prescription/entry.vue
index 3b4acf28..ef8756e8 100644
--- a/app/components/app/prescription/entry.vue
+++ b/app/components/app/prescription/entry.vue
@@ -1,32 +1,36 @@
 <template>
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div class="md:pe-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
+    <div class="md:ps-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
   </div>
 </template>
diff --git a/app/components/app/prescription/list-entry.vue b/app/components/app/prescription/list-entry.vue
new file mode 100644
index 00000000..aa768000
--- /dev/null
+++ b/app/components/app/prescription/list-entry.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { Prescription } from '~/models/prescription'
+
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import PrescriptionItemList from '~/components/app/prescription-item/list-entry.vue';
+
+interface Props {
+  data: Prescription[]
+  isLoading: boolean
+  paginationMeta?: PaginationMeta
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div v-if="isLoading" class="p-10 text-center">
+    Memuat data..
+  </div>
+  <div v-else-if="data && data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <!-- <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div> -->
+  </div>
+  <div v-else v-for="(item, idx) in data">
+    <Separator class="my-5" />
+    <div class="md:grid md:grid-cols-2 font-semibold">
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>Order #{{ data.length - idx }}</DE.Label>
+            <DE.Field>
+              2025-01-01
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Status</DE.Label>
+            <DE.Field>
+                {{ item.status_code }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>DPJP</DE.Label>
+            <DE.Field>
+                {{ item.doctor?.employee?.person.name }} 
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>PPDS</DE.Label>
+            <DE.Field>
+                {{ item.specialistIntern?.person.name }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+    </div>
+    <PrescriptionItemList :data="item.items || []" />
+  </div>
+</template>
+
+
+<!-- <Separator class="my-4 xl:my-5" />
+<AppPrescriptionEntry />
+<div class="flex content-center mb-3">
+  <div class="me-auto pt-2">
+    <div class="font-semibold md:text-sm xl:text-base">Daftar Obat</div>
+  </div>
+  <div>
+    <Button @click="addMedicine" class="me-2">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+    <Button @click="addMedicineMix">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+  </div>
+</div>
+<PrescriptionItemListEntry :data=[] /> -->
diff --git a/app/components/app/prescription/list-with-sub.vue b/app/components/app/prescription/list-with-sub.vue
new file mode 100644
index 00000000..14bc1785
--- /dev/null
+++ b/app/components/app/prescription/list-with-sub.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// import { Block, Cell } from '~/components/pub/my-ui/doc-entry/index'
+// import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+// import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Separator class="my-5" />
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Order #1</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+            2025-01-01
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Status
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama Dokter
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>PPDS</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama PPDS
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/list.vue
index 6fe27d39..ae5126ca 100644
--- a/app/components/app/prescription/list.vue
+++ b/app/components/app/prescription/list.vue
@@ -1,5 +1,37 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+import { add } from 'date-fns';
+
+interface Props {
+  data: Prescription[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
 <template>
-  <div class="p-10 text-center">
+  <div v-if="data.length == 0" class="p-10 text-center">
     <div class="mb-4 xl:mb-5">Belum Ada Data</div>
     <div>
       <Button>
@@ -8,35 +40,33 @@
       </Button>
     </div>
   </div>
-  <Separator class="my-5" />
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
-  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count="7" class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
+    <!-- <div v-if="idx < data.length - 1" class="my-8 -mx-4 border-t border-t-slate-300" /> -->
+  </template>
 </template>
diff --git a/app/components/content/bpjs/control-letter/list.vue b/app/components/content/bpjs/control-letter/list.vue
new file mode 100644
index 00000000..66ed00a5
--- /dev/null
+++ b/app/components/content/bpjs/control-letter/list.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+
+// #region Imports
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+import FilterDialog from '~/components/pub/my-ui/nav-header/filter-dialog.vue'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+    isFormEntryDialogOpen.value = true
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const refExportNav: RefExportNav = {
+  onExportCsv: () => {
+    // open filter modal
+    console.log(`Export CSV Clicked`)
+  },
+}
+
+const isFormEntryDialogOpen = ref(false)
+const isHistoryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+
+const filterPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
+async function getPatientSummary() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+function handleFiltering() {
+  console.log('Confirmed action: Filter')
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showProcess:
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break
+
+    case ActionEvents.showDetail:
+      isHistoryDialogOpen.value = true
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="summaryLoading">
+        <SummaryCard
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
+      </template>
+<template v-else>
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
+      </template>
+</div>
+</div>
+-->
+
+  <FilterDialog :prep="{ ...filterPrep }" 
+    :ref-search-nav="refSearchNav" 
+    :ref-export-nav="refExportNav" 
+    :enable-search="false"
+    :enable-date-range="false"/>
+
+  <AppBpjsControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    title="Filter"
+  >
+    <AppBpjsControlLetterFilter @submit="handleFiltering" />
+  </Dialog>
+
+  <Dialog
+    v-model:open="isHistoryDialogOpen"
+    title="Log History Surat Kontrol">
+    <AppBpjsControlLetterCommonHistoryDialog />
+  </Dialog>
+
+  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.firstName">
+          <strong>Nama:</strong>
+          {{ record.firstName }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.cellphone }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/chemotherapy/admin-list.vue b/app/components/content/chemotherapy/admin-list.vue
new file mode 100644
index 00000000..be6d5810
--- /dev/null
+++ b/app/components/content/chemotherapy/admin-list.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { format } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { Button } from '~/components/pub/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+import Input from '~/components/pub/ui/input/Input.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
+import AppChemotherapyListAdmin from '~/components/app/chemotherapy/list-admin.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Sample data - replace with actual API call
+import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
+
+
+const route = useRoute()
+const recId = ref(0)
+const recAction = ref('')
+const recItem = ref<any>(null)
+
+const search = ref('')
+const mode = route.params.mode as string || 'admin'
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: null,
+  to: null,
+})
+
+// Format date range for display
+const dateRangeDisplay = computed(() => {
+  if (dateRange.value.from && dateRange.value.to) {
+    return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
+  }
+  return '12 Agustus 2025 - 32 Agustus 2025' // Default display
+})
+
+// Filter + search (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ChemotherapyData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+// Pagination meta
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: filtered.value.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: Math.ceil(filtered.value.length / 10),
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  paginationMeta.page = page
+  paginationMeta.hasNext = page < paginationMeta.totalPage
+  paginationMeta.hasPrev = page > 1
+}
+
+function handleFilter() {
+  // TODO: Implement filter logic
+  console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
+}
+
+// Provide proses handler for action button
+function handleProses(rec: any) {
+  // Navigate to verification page with record
+  navigateTo(`/outpation-action/chemotherapy/verification?id=${rec.id}`)
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case 'Process':
+      navigateTo(`/outpation-action/chemotherapy/${mode}/${recId.value}/verification`)
+      break
+    case 'Verification':
+      break
+  }
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('proses-handler', handleProses)
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <!-- Header Section -->
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Administrasi Pasien Rawat Jalan Kemoterapi</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
+      </p>
+    </div>
+
+    <!-- Search and Filter Bar -->
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <!-- Search Input -->
+      <div class="relative">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Input
+          v-model="search"
+          placeholder="Cari Nama /No.RM"
+          class="w-64 pl-9"
+        />
+      </div>
+
+      <!-- Date Range Picker -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
+          >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            {{ dateRangeDisplay }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <RangeCalendar />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Filter Button -->
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
+        @click="handleFilter"
+      >
+        <FilterIcon class="mr-2 h-4 w-4" />
+        Filter
+      </Button>
+    </div>
+
+    <!-- Data Table -->
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyListAdmin
+        :data="filtered"
+        :pagination-meta="paginationMeta"
+        @page-change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
diff --git a/app/components/content/chemotherapy/list.vue b/app/components/content/chemotherapy/list.vue
new file mode 100644
index 00000000..d4104f03
--- /dev/null
+++ b/app/components/content/chemotherapy/list.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Components
+import AppChemotherapyList from '~/components/app/chemotherapy/list.vue'
+
+// Samples
+import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
+
+const search = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+
+// filter + pencarian sederhana (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ChemotherapyData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
+      </p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <div class="flex items-center gap-2">
+        <input
+          v-model="search"
+          placeholder="Cari Nama / No.RM"
+          class="w-64 rounded border px-3 py-2"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input
+          v-model="dateFrom"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <span class="text-sm text-gray-500">-</span>
+        <input
+          v-model="dateTo"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+      </div>
+
+      <button class="ml-auto rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">Filter</button>
+    </div>
+
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/content/chemotherapy/process.vue b/app/components/content/chemotherapy/process.vue
new file mode 100644
index 00000000..7f355b4b
--- /dev/null
+++ b/app/components/content/chemotherapy/process.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import EncounterHome from '~/components/content/encounter/home.vue'
+</script>
+
+<template>
+  <EncounterHome classes="chemotherapy" />
+</template>
diff --git a/app/components/content/chemotherapy/protocol.vue b/app/components/content/chemotherapy/protocol.vue
new file mode 100644
index 00000000..82050d79
--- /dev/null
+++ b/app/components/content/chemotherapy/protocol.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Types
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Components
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
+
+// Services
+import { getDetail } from '~/services/encounter.service'
+
+const route = useRoute()
+const router = useRouter()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
+  },
+})
+
+// Dummy data so AppEncounterQuickInfo can render in development/storybook
+// Replace with real API result when available (see commented fetch below)
+const data = ref<any>({
+  patient: {
+    number: 'RM-2025-0001',
+    person: {
+      name: 'John Doe',
+      birthDate: '1980-01-01T00:00:00Z',
+      gender_code: 'M',
+      addresses: [
+        { address: 'Jl. Contoh No.1, Jakarta' }
+      ],
+      frontTitle: '',
+      endTitle: ''
+    }
+  },
+  visitDate: new Date().toISOString(),
+  unit: { name: 'Onkologi' },
+  responsible_doctor: null,
+  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } }
+})
+
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
+  {
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
+  },
+  {
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
+  },
+]
+
+const paginationMeta: PaginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+const tabs: TabItem[] = [
+  { value: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
+  { value: 'chemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
+]
+
+onMounted(async () => {
+  // const id = typeof route.query.id == 'string' ? parseInt(route.query.id) : 0
+  // const dataRes = await getDetail(id, {
+  //   includes:
+  //     'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
+  // })
+  // const dataResBody = dataRes.body ?? null
+  // data.value = dataResBody?.data ?? null
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    </div>
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
+  </div>
+</template>
diff --git a/app/components/content/chemotherapy/verification.vue b/app/components/content/chemotherapy/verification.vue
new file mode 100644
index 00000000..3243547a
--- /dev/null
+++ b/app/components/content/chemotherapy/verification.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { format } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { Button } from '~/components/pub/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+import Input from '~/components/pub/ui/input/Input.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
+import AppChemotherapyListVerification from '~/components/app/chemotherapy/list-verification.vue'
+import DialogVerification from '~/components/app/chemotherapy/dialog-verification.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+const route = useRoute()
+const router = useRouter()
+
+// Sample patient data - replace with actual API call
+const patientData = ref({
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  jenisPembayaran: 'PKS',
+  noBilling: '18291822',
+  tanggalLahir: '23 April 1992',
+  usia: '33 tahun',
+  jenisKelamin: 'Laki-Laki (L)',
+  diagnosis: 'C34.9 - Karsinoma Paru',
+  klinik: 'Penyakit Dalam',
+})
+
+// Sample schedule data - replace with actual API call
+const scheduleData = ref([
+  {
+    id: 1,
+    tanggalMasuk: '12 Agustus 2025',
+    pjBerkasRm: 'TPP Rawat Jalan',
+    dokter: 'Dr. Andreas Sutaji',
+    jenisRuangan: 'Ruang Tindakan',
+    jenisTindakan: 'KEMOTERAPI',
+    tanggalJadwalTindakan: '-',
+    status: 'belum_terverifikasi',
+    tanggalPemeriksaan: '2025-08-12',
+  },
+])
+
+const search = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: null,
+  to: null,
+})
+
+// Format date range for display
+const dateRangeDisplay = computed(() => {
+  if (dateRange.value.from && dateRange.value.to) {
+    return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
+  }
+  return '12 Agustus 2025 - 32 Agustus 2025' // Default display
+})
+
+// Filter + search (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return scheduleData.value.filter((r: any) => {
+    if (q) {
+      return r.dokter.toLowerCase().includes(q) || patientData.value.noRm.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+// Pagination meta
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: filtered.value.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: Math.ceil(filtered.value.length / 10),
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  paginationMeta.page = page
+  paginationMeta.hasNext = page < paginationMeta.totalPage
+  paginationMeta.hasPrev = page > 1
+}
+
+function handleFilter() {
+  // TODO: Implement filter logic
+  console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
+}
+
+// Dialog verification state
+const isDialogVerificationOpen = ref(false)
+const selectedSchedule = ref<any>(null)
+
+// Provide verify handler for verify button
+function handleVerify(rec: any) {
+  selectedSchedule.value = rec
+  isDialogVerificationOpen.value = true
+}
+
+provide('verify-handler', handleVerify)
+
+function handleDialogSubmit(data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }) {
+  // TODO: Implement submit logic
+  console.log('Verification submitted', data)
+  isDialogVerificationOpen.value = false
+  // Refresh data after verification
+}
+
+function handleBackToAdmin() {
+  router.push('/outpation-action/chemotherapy/admin')
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <!-- Back Button -->
+    <div class="mb-4">
+      <Button
+        variant="outline"
+        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+        @click="handleBackToAdmin"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Kembali ke Administrasi Kunjungan
+      </Button>
+    </div>
+
+    <!-- Data Pasien Section -->
+    <div class="mb-6 rounded-md border bg-white p-4 shadow-sm">
+      <h3 class="mb-4 text-lg font-semibold">Data Pasien:</h3>
+      <div class="grid grid-cols-2 gap-6">
+        <!-- Left Column -->
+        <div class="space-y-3">
+          <div class="flex">
+            <span class="w-48 font-medium">No. RM:</span>
+            <span>{{ patientData.noRm }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Nama:</span>
+            <span>{{ patientData.nama }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Jenis Pembayaran:</span>
+            <span>{{ patientData.jenisPembayaran }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">No Billing:</span>
+            <span>{{ patientData.noBilling }}</span>
+          </div>
+        </div>
+        <!-- Right Column -->
+        <div class="space-y-3">
+          <div class="flex">
+            <span class="w-48 font-medium">Tanggal Lahir / Usia:</span>
+            <span>{{ patientData.tanggalLahir }} / {{ patientData.usia }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Jenis Kelamin:</span>
+            <span>{{ patientData.jenisKelamin }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Diagnosis:</span>
+            <span>{{ patientData.diagnosis }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Klinik:</span>
+            <span>{{ patientData.klinik }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Header Section -->
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Verifikasi Jadwal Pasien</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Pantau riwayat masuk, dokter penanggung jawab, dan status pasien secara real-time.
+      </p>
+    </div>
+
+    <!-- Search and Filter Bar -->
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <!-- Search Input -->
+      <div class="relative">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Input
+          v-model="search"
+          placeholder="Cari Nama /No.RM"
+          class="w-64 pl-9"
+        />
+      </div>
+
+      <!-- Date Range Picker -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
+          >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            {{ dateRangeDisplay }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <RangeCalendar />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Filter Button -->
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
+        @click="handleFilter"
+      >
+        <FilterIcon class="mr-2 h-4 w-4" />
+        Filter
+      </Button>
+    </div>
+
+    <!-- Data Table -->
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyListVerification
+        :data="filtered"
+        :pagination-meta="paginationMeta"
+        @page-change="handlePageChange"
+      />
+    </div>
+
+    <!-- Dialog Verification -->
+    <DialogVerification
+      v-model:open="isDialogVerificationOpen"
+      :tanggal-pemeriksaan="selectedSchedule?.tanggalPemeriksaan"
+      :jadwal-tanggal-pemeriksaan="selectedSchedule?.jadwalTanggalPemeriksaan"
+      @submit="handleDialogSubmit"
+    />
+  </div>
+</template>
+
diff --git a/app/components/content/control-letter/add.vue b/app/components/content/control-letter/add.vue
new file mode 100644
index 00000000..44f03a2f
--- /dev/null
+++ b/app/components/content/control-letter/add.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { ExposedForm } from '~/types/form'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import {  handleActionSave,} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { type ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const controlLetter: ControlLetter = await composeFormData()
+  let createdControlLetterId = 0
+
+  const response = await handleActionSave(
+    controlLetter,
+    () => { },
+    () => { },
+    toast,
+  )
+
+  const data = (response?.body?.data ?? null)
+  if (!data) return
+  createdControlLetterId = data.id
+
+  // // If has callback provided redirect to callback with patientData
+  if (props.callbackUrl) {
+    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+  }
+
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd" />
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/control-letter/detail.vue b/app/components/content/control-letter/detail.vue
new file mode 100644
index 00000000..d9019d57
--- /dev/null
+++ b/app/components/content/control-letter/detail.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { Patient } from '~/models/patient'
+import type { Person } from '~/models/person'
+import { getDetail } from '~/services/control-letter.service'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const controlLetter = ref<ControlLetter | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Surat Kontrol',
+  icon: 'i-lucide-newspaper',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId, {
+    includes: "unit,specialist,subspecialist,doctor-employee-person",
+  })
+  if (result.success) {
+    controlLetter.value = result.body?.data
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": controlLetterId },
+      })
+      break
+
+    case 'back':
+      goBack()
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
+
+  <AppControlLetterPreview :instance="controlLetter" @click="handleAction" />
+</template>
diff --git a/app/components/content/control-letter/edit.vue b/app/components/content/control-letter/edit.vue
new file mode 100644
index 00000000..99a5c282
--- /dev/null
+++ b/app/components/content/control-letter/edit.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { Patient, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+import { getDetail, update } from '~/services/control-letter.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import { withBase } from '~/models/_base'
+import type { Person } from '~/models/person'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import type { ControlLetter } from '~/models/control-letter'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import { formatDateYyyyMmDd } from '~/lib/date'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const isConfirmationOpen = ref(false)
+const controlLetter = ref({})
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId)
+  if (result.success) {
+    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    selectedUnitId.value = responseData?.unit_code
+    selectedSpecialistId.value = responseData?.specialist_code
+    selectedSubSpecialistId.value = responseData?.subspecialist_code
+
+    controlLetter.value = responseData
+    controlLetterForm.value?.setValues(responseData)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const response = await handleActionEdit(
+    controlLetterId,
+    await composeFormData(),
+    () => { },
+    () => { },
+    toast,
+  )
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+  
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation
+    v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd"
+  />
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/control-letter/list.vue b/app/components/content/control-letter/list.vue
new file mode 100644
index 00000000..c9353057
--- /dev/null
+++ b/app/components/content/control-letter/list.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Imports
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/control-letter.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+// #endregion
+
+// #region State
+const props = defineProps<{
+  encounter?: Encounter
+}>()
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'control-letter',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+  addNav: {
+    label: "Surat Kontrol",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-control-letter-add',
+        params: { id: encounterId },
+      }),
+  },
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getListData()
+})
+// #endregion
+
+// #region Functions
+async function getListData() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching Data:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await remove(record.id)
+      if (result.success) {
+        toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <WarningAlert v-if="!isRequirementsMet"
+    class="mb-5"
+    text="Syarat pembuatan surat kontrol belum terpenuhi"
+    :description="[
+      'Lanjutan Penatalaksanaan Pasien harus pulang/KRS.',
+      'Status Resume Medis harus tervalidasi.'
+    ]" />
+
+  <div v-else>
+    <Header v-model:search="searchInput"
+      :prep="{ ...headerPrep }"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch" />
+
+    <AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/content/cp-lab-order/entry.vue b/app/components/content/cp-lab-order/entry.vue
new file mode 100644
index 00000000..4d0aa002
--- /dev/null
+++ b/app/components/content/cp-lab-order/entry.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU items
+const items = ref<McuOrderItem[]>([])
+
+// MCU Categories
+const mcuSrcCategoryRes = await getMcuCategoryList()
+const mcuSrcCategories = mcuSrcCategoryRes.body?.data
+const selectedMcuSrcCategory_code = ref('')
+
+// MCU Sources
+const mcuSrcs = ref<McuSrc[]>([])
+
+// const {
+//   data: items,
+//   fetchData: getItems,
+// } = usePaginatedList<McuOrderItem> ({
+//   fetchFn: async ({ page, search }) => {
+//     const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
+//     if (result.success) {
+//       items.value = result.body.data
+//     }
+//     return { success: result.success || false, body: result.body || {} }
+//   },
+//   entityName: 'mcu-order-item',
+// })
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail dan List Item Order Radiologi ',
+  icon: 'i-lucide-box',
+}
+
+const pickerDialogOpen = ref(false)
+
+onMounted(async () => {
+  await getItems()
+})
+
+watch(selectedMcuSrcCategory_code, async () => {
+  const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
+  mcuSrcs.value = res.body?.data
+})
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+async function pickItem(item: McuSrc) {
+  const exItem = items.value.find(e => e.mcuSrc_id === item.id)
+  if (exItem) {
+    await removeMcuOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createMcuOrderItem({
+      mcuOrder_id: intId,
+      mcuSrc_id: item.id,
+    })
+    await getItems()
+  }
+}
+
+async function getItems() {
+  const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
+  if (itemsRes.success) {
+      items.value = itemsRes.body.data
+  } else {
+    items.value = []
+  }
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="items"
+    @requestItem="requestItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
+    <McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
+</template>
diff --git a/app/components/content/cp-lab-order/list.vue b/app/components/content/cp-lab-order/list.vue
new file mode 100644
index 00000000..73b9361c
--- /dev/null
+++ b/app/components/content/cp-lab-order/list.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "cp-lab",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab PK',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id, scope_code: "cp-lab" }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>
diff --git a/app/components/content/cp-lab-order/main.vue b/app/components/content/cp-lab-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/cp-lab-order/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
new file mode 100644
index 00000000..1f2c2943
--- /dev/null
+++ b/app/components/content/encounter/home.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { getDetail } from '~/services/encounter.service'
+
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
+import Consultation from '~/components/content/consultation/list.vue'
+import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
+import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps<{
+  classes?: string
+}>()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
+  },
+})
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+// const dataRes = await getDetail(id, {
+//   includes:
+//     'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
+// })
+// const dataResBody = dataRes.body ?? null
+// const data = dataResBody?.data ?? null
+
+// Dummy data so AppEncounterQuickInfo can render in development/storybook
+// Replace with real API result when available (see commented fetch below)
+const data = ref<any>({
+  patient: {
+    number: 'RM-2025-0001',
+    person: {
+      name: 'John Doe',
+      birthDate: '1980-01-01T00:00:00Z',
+      gender_code: 'M',
+      addresses: [{ address: 'Jl. Contoh No.1, Jakarta' }],
+      frontTitle: '',
+      endTitle: '',
+    },
+  },
+  visitDate: new Date().toISOString(),
+  unit: { name: 'Onkologi' },
+  responsible_doctor: null,
+  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } },
+})
+
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
+  {
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
+  },
+  {
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
+  },
+]
+
+const paginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+const tabsRaws: TabItem[] = [
+  {
+    value: 'status',
+    label: 'Status Masuk/Keluar',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Status,
+    props: { encounter: data },
+  },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalAssesmentList,
+  },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalRehabList,
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    groups: ['ambulatory', 'rehabilitation'],
+    component: AssesmentFunctionList,
+  },
+  { value: 'therapy-protocol', groups: ['ambulatory', 'rehabilitation'], label: 'Protokol Terapi' },
+  {
+    value: 'chemotherapy-protocol',
+    label: 'Protokol Kemoterapi',
+    groups: ['chemotherapy'],
+    component: ProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  {
+    value: 'chemotherapy-medicine',
+    label: 'Protokol Obat Kemoterapi',
+    groups: ['chemotherapy'],
+    component: MedicineProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  { value: 'report', label: 'Laporan Tindakan', groups: ['chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'education-assessment',
+    label: 'Asesmen Kebutuhan Edukasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+  },
+  { value: 'consent', label: 'General Consent', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'prescription',
+    label: 'Order Obat',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: PrescriptionList,
+  },
+  { value: 'device', label: 'Order Alkes', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-radiology', label: 'Order Radiologi', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'medical-action', label: 'Order Ruang Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-result', label: 'Hasil Penunjang', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'consultation',
+    label: 'Konsultasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Consultation,
+    props: { encounter: data },
+  },
+  { value: 'resume', label: 'Resume', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'control', label: 'Surat Kontrol', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'screening', label: 'Skrinning MPP', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', groups: ['ambulatory', 'rehabilitation'] },
+  { value: 'price-list', label: 'Tarif Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+]
+
+const tabs = computed(() => {
+  return tabsRaws
+    .filter((tab: TabItem) => tab.groups ? tab.groups.some((group: string) => props.classes?.includes(group)) : true)
+    .map((tab: TabItem) => {
+      return { ...tab, props: { ...tab.props, encounter: data } }
+    })
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    </div>
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
+  </div>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index ad93387d..23640af7 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -14,8 +14,11 @@ 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 PrescriptionList from '~/components/content/prescription/list.vue'
+import Prescription from '~/components/content/prescription/main.vue'
+import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
+import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
+import ControlLetterList from '~/components/content/control-letter/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -60,17 +63,17 @@ const tabs: TabItem[] = [
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'consent', label: 'General Consent' },
   { value: 'patient-note', label: 'CPRJ' },
-  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
+  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
   { value: 'device', label: 'Order Alkes' },
-  { value: 'mcu-radiology', label: 'Order Radiologi' },
-  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
   { value: 'mcu-lab-pa', label: 'Order Lab PA' },
   { value: 'medical-action', label: 'Order Ruang Tindakan' },
   { value: 'mcu-result', label: 'Hasil Penunjang' },
   { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
   { value: 'resume', label: 'Resume' },
-  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
   { value: 'screening', label: 'Skrinning MPP' },
   { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
 ]
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
new file mode 100644
index 00000000..4b3fa663
--- /dev/null
+++ b/app/components/content/prescription/entry.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+import { getDetail } from '~/services/prescription.service'
+import Detail from '~/components/app/prescription/detail.vue'
+import { getList as getPrescriptionItemList } from '~/services/prescription-item.service'
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import { type PrescriptionItem } from '~/models/prescription-item'
+
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
+import { create } from '~/services/prescription-item.service';
+
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+
+import {
+  recItem,
+} from '~/handlers/prescription-item.handler'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+// const route = useRoute()
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data || null
+const items = ref(data?.items || [])
+
+const {
+  data: prescriptionItems,
+  fetchData: getMyList,
+} = usePaginatedList<PrescriptionItem> ({
+  fetchFn: async ({ page, search }) => {
+    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription-item',
+})
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Tambah Order Obat / Resep',
+  icon: 'i-lucide-box',
+}
+
+const mixDialogOpen = ref(false)
+const nonMixDialogOpen = ref(false)
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function addItem(mode: 'mix' | 'non-mix') {
+  if (mode === 'mix') {
+    mixDialogOpen.value = true
+  } else if (mode === 'non-mix') {
+    nonMixDialogOpen.value = true
+  }
+}
+
+function saveMix() {
+  create({data})
+}
+
+function saveNonMix(data: PrescriptionItem) {
+  create({data})
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="prescriptionItems"
+    @add="addItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="mixDialogOpen"
+    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <MixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveMix"
+    />
+  </Dialog>
+
+  <Dialog
+    v-model:open="nonMixDialogOpen"
+    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <NonMixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveNonMix"
+    />
+  </Dialog>
+</template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index f8059b9d..844cb04f 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -1,37 +1,82 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { toast } from '~/components/pub/ui/toast'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionRemove,
+  handleActionSave,
+} from '~/handlers/prescription.handler'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Services
+import { getList, getDetail } from '~/services/prescription.service'
+import List from '~/components/app/prescription/list.vue'
+import type { Prescription } from '~/models/prescription'
 
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  fetchData: getMyList,
+} = usePaginatedList<Prescription>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription'
 })
 
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
 const headerPrep: HeaderPrep = {
-  title: 'Resep Obat',
-  icon: 'i-lucide-panel-bottom',
+  title: 'Order Obat',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
@@ -40,33 +85,82 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-onMounted(() => {
-  getMaterialList()
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Konsultasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      break
+  }
 })
 
-async function getMaterialList() {
-  isLoading.dataListLoading = true
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})
 
-  // const resp = await xfetch('/api/v1/material')
-  // if (resp.success) {
-  //   data.value = (resp.body as Record<string, any>).data
-  // }
-
-  isLoading.dataListLoading = false
+function cancel(data: Prescription) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
 }
+
+function edit(data: Prescription) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: Prescription) {
+}
+
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...headerPrep }" />
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
 
-  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
-
-  <AppPrescriptionEntry />
-
-  <PrescriptionItemListEntry :data=[] />
-  <div>
-    <Button>
-      Tambah
-    </Button>
-  </div>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/prescription/main.vue b/app/components/content/prescription/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/prescription/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/content/radiology-order/entry.vue b/app/components/content/radiology-order/entry.vue
new file mode 100644
index 00000000..4d0aa002
--- /dev/null
+++ b/app/components/content/radiology-order/entry.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU items
+const items = ref<McuOrderItem[]>([])
+
+// MCU Categories
+const mcuSrcCategoryRes = await getMcuCategoryList()
+const mcuSrcCategories = mcuSrcCategoryRes.body?.data
+const selectedMcuSrcCategory_code = ref('')
+
+// MCU Sources
+const mcuSrcs = ref<McuSrc[]>([])
+
+// const {
+//   data: items,
+//   fetchData: getItems,
+// } = usePaginatedList<McuOrderItem> ({
+//   fetchFn: async ({ page, search }) => {
+//     const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
+//     if (result.success) {
+//       items.value = result.body.data
+//     }
+//     return { success: result.success || false, body: result.body || {} }
+//   },
+//   entityName: 'mcu-order-item',
+// })
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail dan List Item Order Radiologi ',
+  icon: 'i-lucide-box',
+}
+
+const pickerDialogOpen = ref(false)
+
+onMounted(async () => {
+  await getItems()
+})
+
+watch(selectedMcuSrcCategory_code, async () => {
+  const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
+  mcuSrcs.value = res.body?.data
+})
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+async function pickItem(item: McuSrc) {
+  const exItem = items.value.find(e => e.mcuSrc_id === item.id)
+  if (exItem) {
+    await removeMcuOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createMcuOrderItem({
+      mcuOrder_id: intId,
+      mcuSrc_id: item.id,
+    })
+    await getItems()
+  }
+}
+
+async function getItems() {
+  const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
+  if (itemsRes.success) {
+      items.value = itemsRes.body.data
+  } else {
+    items.value = []
+  }
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="items"
+    @requestItem="requestItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
+    <McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
+</template>
diff --git a/app/components/content/radiology-order/list.vue b/app/components/content/radiology-order/list.vue
new file mode 100644
index 00000000..b2c8571d
--- /dev/null
+++ b/app/components/content/radiology-order/list.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "rad",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Radiologi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Radiologi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Radiologi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>
diff --git a/app/components/content/radiology-order/main.vue b/app/components/content/radiology-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/radiology-order/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index 4f51e42c..a14b2137 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-const navMenu = ref([])
+type NavGroup = {
+  heading?: string
+  items: any[]
+}
+
+const { getActiveRole } = useUserStore()
+
+const navMenu = ref<NavGroup[]>([])
 
 const teams: {
   name: string
@@ -12,7 +19,14 @@ const teams: {
     plan: 'Saiful Anwar Hospital',
   },
 ]
-const sidebar = {
+
+type Sidebar = {
+  collapsible: 'offcanvas' | 'icon' | 'none'
+  side: 'left' | 'right'
+  variant: 'sidebar' | 'floating' | 'inset'
+}
+
+const sidebar: Sidebar = {
   collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
   side: 'left', // 'left' | 'right'
   variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
@@ -29,18 +43,34 @@ onMounted(async () => {
   await setMenu()
 })
 
+async function setMenu() {
+  const activeRole = getActiveRole()
+  const activeRoleParts = activeRole ? activeRole.split('|') : []
+  const role = activeRoleParts[0]+(activeRoleParts.length > 1 ? `-${activeRoleParts[1]}` : '')
+  try {
+    const res = await fetch(`/side-menu-items/${role.toLowerCase()}.json`)
+    const rawMenu = await res.text()
+    navMenu.value = JSON.parse(rawMenu)
+  } catch (e) {
+    const res = await fetch(`/side-menu-items/blank.json`)
+    const rawMenu = await res.text()
+    navMenu.value = JSON.parse(rawMenu)
+  }
+}
+
 function resolveNavItemComponent(item: any): any {
   if ('children' in item) return resolveComponent('LayoutSidebarNavGroup')
 
   return resolveComponent('LayoutSidebarNavLink')
 }
 
-async function setMenu() {
-  const position_code = 'sys'
-  const res = await fetch(`/side-menu-items/${position_code}.json`)
-  const rawMenu = await res.text()
-  navMenu.value = JSON.parse(rawMenu)
-}
+watch(getActiveRole, async () => {
+  await setMenu()
+  // const activeRole = getActiveRole()
+  // const res = await fetch(`/side-menu-items/${activeRole}.json`)
+  // const rawMenu = await res.text()
+  // navMenu.value = JSON.parse(rawMenu)
+})
 </script>
 
 <template>
diff --git a/app/components/layout/SidebarNavFooter.vue b/app/components/layout/SidebarNavFooter.vue
index 68d8d9a2..2c1e942c 100644
--- a/app/components/layout/SidebarNavFooter.vue
+++ b/app/components/layout/SidebarNavFooter.vue
@@ -10,8 +10,8 @@ import { useSidebar } from '~/components/pub/ui/sidebar'
 // }>()
 
 const { isMobile } = useSidebar()
-const { logout } = useUserStore()
-const userStore = useUserStore().user
+const { user, logout, setActiveRole, getActiveRole } = useUserStore()
+// const userStore = useUserStore().user
 
 function handleLogout() {
   navigateTo('/auth/login')
@@ -32,19 +32,19 @@ const showModalTheme = ref(false)
               class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar class="h-8 w-8 rounded-lg">
-                <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                <AvatarImage src="" :alt="user.user_name || 'system'" />
                 <AvatarFallback class="rounded-lg">
                   {{
-                    userStore?.user_name
+                    user.user_name
                       ?.split(' ')
-                      .map((n) => n[0])
+                      .map((n: string) => n[0])
                       .join('') || ''
                   }}
                 </AvatarFallback>
               </Avatar>
               <div class="grid flex-1 text-left text-sm leading-tight">
-                <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
-                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
+                <span class="truncate text-xs">{{ user.user_email || '' }}</span>
               </div>
               <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
             </SidebarMenuButton>
@@ -52,35 +52,40 @@ const showModalTheme = ref(false)
           <DropdownMenuContent
             class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg bg-white"
             :side="isMobile ? 'bottom' : 'right'"
-            align="end"
+            :align="'end'"
           >
             <DropdownMenuLabel class="p-0 font-normal">
               <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar class="h-8 w-8 rounded-lg">
-                  <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                  <AvatarImage src="" :alt="user.user_name || 'system'" />
                   <AvatarFallback class="rounded-lg">
                     {{
-                      userStore?.user_name
+                      user.user_name
                         ?.split(' ')
-                        .map((n) => n[0])
+                        .map((n: string) => n[0])
                         .join('') || ''
                     }}
                   </AvatarFallback>
                 </Avatar>
                 <div class="grid flex-1 text-left text-sm leading-tight">
-                  <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
-                  <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                  <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
+                  <span class="truncate text-xs">{{ user.user_email || '' }}</span>
                 </div>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
+            <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
+              <Icon name="i-lucide-user" />
+              Profile
+            </DropdownMenuItem>
+            <template v-if="user.roles.length > 1">
+              <DropdownMenuSeparator />
+              <DropdownMenuItem v-for="role in user.roles" class="hover:bg-gray-100" @click="setActiveRole(role)">
                 <Icon name="i-lucide-user" />
-                Profile
+                {{ role }}
+                <Icon name="i-lucide-check" class="ml-auto" v-if="getActiveRole() === role" />
               </DropdownMenuItem>
-            </DropdownMenuGroup>
+            </template>
             <DropdownMenuSeparator />
             <DropdownMenuItem class="hover:bg-gray-100" @click="handleLogout">
               <Icon name="i-lucide-log-out" />
diff --git a/app/components/pub/my-ui/alert/warning-alert.vue b/app/components/pub/my-ui/alert/warning-alert.vue
new file mode 100644
index 00000000..afdbe7ae
--- /dev/null
+++ b/app/components/pub/my-ui/alert/warning-alert.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils';
+
+const props = withDefaults(defineProps<{
+  text?: string
+  description?: string | string[]
+  class?: string
+}>(), {
+
+})
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-4 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
+        props.class
+    )">
+        <Icon name="i-lucide-triangle-alert" class="h-12 w-12 align-middle transition-colors" />
+        <div class="">
+            <p class="font-medium text-base">{{text}}</p>
+            <ul class="list-disc list-inside">
+                <li v-for="(desc, index) in (Array.isArray(description) ? description : [description])" :key="index">
+                    {{ desc }}
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/badge/status-badge.vue b/app/components/pub/my-ui/badge/status-badge.vue
new file mode 100644
index 00000000..ba8a7ea6
--- /dev/null
+++ b/app/components/pub/my-ui/badge/status-badge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+import { activeStatusCodes } from '~/lib/constants';
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusText = computed(() => {
+  const code: keyof typeof activeStatusCodes = props.rec.status_code === 1 ? `active` : `inactive`
+  return activeStatusCodes[code]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
index 82a3b3cd..e4864f7f 100644
--- a/app/components/pub/my-ui/combobox/index.ts
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -20,4 +20,17 @@ export function recStrToItem(input: Record<string, string>): Item[] {
   return items
 }
 
+export function objectsToItems(input: object[], key = 'id', label = 'name'): Item[] {
+  const items: Item[] = []
+  for (const item of input) {
+    if (item.hasOwnProperty(key) && item.hasOwnProperty(label)) {
+      items.push({
+        value: item[key as keyof typeof item], // the hasOwnProperty check should be enough
+        label: item[label as keyof typeof item], // the hasOwnProperty check should be enough
+      })
+    }
+  }
+  return items
+}
+
 export { default as Combobox } from './combobox.vue'
diff --git a/app/components/pub/my-ui/comp-tab/type.ts b/app/components/pub/my-ui/comp-tab/type.ts
index e6faacce..ba21d0b7 100644
--- a/app/components/pub/my-ui/comp-tab/type.ts
+++ b/app/components/pub/my-ui/comp-tab/type.ts
@@ -2,5 +2,6 @@ export interface TabItem {
   value: string
   label: string
   component?: any
+  groups?: string[]
   props?: Record<string, any>
 }
diff --git a/app/components/pub/my-ui/confirmation/confirmation.vue b/app/components/pub/my-ui/confirmation/confirmation.vue
index 590f328d..b5c328aa 100644
--- a/app/components/pub/my-ui/confirmation/confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/confirmation.vue
@@ -71,7 +71,7 @@ function handleCancel() {
   <Dialog v-model:open="isOpen" :title="title" :size="size">
     <div class="space-y-4">
       <!-- Icon dan pesan -->
-      <div class="flex items-start gap-3">
+      <div class="flex items-center gap-3">
         <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
         <div class="flex-1">
           <p class="text-sm text-muted-foreground leading-relaxed">
diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index f3e2ef43..431df276 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -22,7 +22,7 @@ const selected = ref<any[]>([])
 function toggleSelection(row: any, event?: Event) {
   if (event) event.stopPropagation() // cegah event bubble ke TableRow
 
-  const isMultiple = props.selectMode === 'multi' || props.selectMode === 'multiple'
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
 
   // gunakan pembanding berdasarkan id atau stringify data
   const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
@@ -128,7 +128,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           'bg-green-50':
             props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
           'bg-blue-50':
-            (props.selectMode === 'multi' || props.selectMode === 'multiple') &&
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
             selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index c0d283de..f27a5578 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -8,6 +8,7 @@ export interface ListItemDto {
 }
 
 export type ComponentType = Component
+export type ComponentWithProps = { component: Component, props: Record<string, any> }
 
 export interface ButtonNav {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
@@ -41,17 +42,23 @@ export interface RefSearchNav {
   onClear: () => void
 }
 
+export interface RefExportNav {
+  onExportPdf?: () => void
+  onExportCsv?: () => void
+  onExportExcel?: () => void
+}
+
 // prepared header for relatively common usage
 export interface HeaderPrep {
   title?: string
   icon?: string
+  components?: ComponentWithProps[]
   refSearchNav?: RefSearchNav
   quickSearchNav?: QuickSearchNav
   filterNav?: ButtonNav
   addNav?: ButtonNav
   printNav?: ButtonNav
 }
-
 export interface KeyLabel {
   key: string
   label: string
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index aeb4a4af..a3743734 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -19,6 +19,8 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  rightLabel?: string
+  bottomLabel?: string
 }>()
 
 function handleInput(event: Event) {
@@ -61,7 +63,7 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem>
+        <FormItem :class="`relative`">
           <FormControl>
             <Input
               :disabled="isDisabled"
@@ -76,10 +78,12 @@ function handleInput(event: Event) {
               spellcheck="false"
               @input="handleInput"
             />
+            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
+    <p v-show="bottomLabel" class="text-gray-400">{{ bottomLabel }}</p>    
   </DE.Cell>
 </template>
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 4598817b..8c292758 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
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 const props = defineProps<{
+  enableDraft?: boolean
   smallMode?: boolean
   defaultClass?: string
   class?: string
 }>()
 
+const enableDraft = props.enableDraft ?? true
 const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
 const additionalClass = props.class ?? ''
 const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
@@ -29,7 +31,7 @@ function onClick(type: ClickType) {
       </Button>
     </div>
     <div>
-      <Button variant="secondary" type="button" @click="onClick('draft')">
+      <Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
         <Icon name="i-lucide-file" />
         Draft
       </Button>
diff --git a/app/components/pub/my-ui/nav-header/filter-dialog.vue b/app/components/pub/my-ui/nav-header/filter-dialog.vue
new file mode 100644
index 00000000..c0d5b854
--- /dev/null
+++ b/app/components/pub/my-ui/nav-header/filter-dialog.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
+}>()
+
+// function emitSearchNavClick() {
+//   props.refSearchNav?.onClick()
+// }
+//
+// function onInput(event: Event) {
+//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+// }
+//
+// function btnClick() {
+//   props.prep?.addNav?.onClick?.()
+// }
+
+const searchQuery = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+
+function onFilterClick() {
+  console.log('Search:', searchQuery.value)
+  console.log('Date Range:', dateRange.value)
+  props.refSearchNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
+      
+      <Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
+        <FilterIcon class="mr-2 size-4" />
+        Filter
+      </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
index ab28620b..74f6d8dc 100644
--- a/app/components/pub/my-ui/nav-header/filter.vue
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -5,11 +5,13 @@ import type { Ref } from 'vue'
 import type { DateRange } from 'radix-vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { cn } from '~/lib/utils'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
   prep: HeaderPrep
   refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
 }>()
 
 // function emitSearchNavClick() {
@@ -57,7 +59,7 @@ function onFilterClick() {
 
 <template>
   <header>
-    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
+    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
       <div class="relative w-64">
         <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
         <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
@@ -97,6 +99,30 @@ function onFilterClick() {
         <FilterIcon class="mr-2 size-4" />
         Filter
       </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
     </div>
   </header>
 </template>
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index 63535847..7aa5e4f2 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -30,15 +30,24 @@ function btnClick() {
       <div class="flex items-center">
         <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
           <Icon
-            :name="props.prep.icon!"
+            :name="prep.icon!"
             class="mr-2 align-middle md:size-6"
           />
-          {{ props.prep.title }}
+          {{ prep.title }}
         </div>
       </div>
       <div class="flex items-center">
+        <div v-if="prep.components">
+          <template v-for="cwp in prep.components">
+            <component
+              :is="cwp.component"
+              class="mr-2"
+              v-bind="cwp.props"
+            />
+          </template>
+        </div>
         <div
-          v-if="props.refSearchNav"
+          v-if="refSearchNav"
           class="text-lg text-gray-900"
         >
           <Input
diff --git a/app/components/pub/my-ui/toggle/provided-toggle.vue b/app/components/pub/my-ui/toggle/provided-toggle.vue
new file mode 100644
index 00000000..f028118c
--- /dev/null
+++ b/app/components/pub/my-ui/toggle/provided-toggle.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, inject } from "vue"
+// import Toggle from '~/components/pub/ui/toggle/Toggle.vue'
+
+const props = defineProps<{
+  label: string,
+  providedKey?: string,
+  variant?: 'default' | 'outline' | null | undefined
+}>()
+
+const model = defineModel<boolean>()
+const provideKey = props.providedKey || 'toggle-provide'
+const { updateProvidedVal }  = inject(provideKey)
+
+watch(model, (newVal) => {
+  updateProvidedVal(newVal)
+})
+</script>
+
+<template>
+  <Button
+    @click="() => model = !model"
+    :variant="model ? 'default' : 'outline'"
+  >
+    {{ label }}
+  </Button>
+  <!-- <Toggle
+    v-model="xval"
+    :variant="variant ?? 'default'"
+    :aria-label="label"
+  >
+  </Toggle> -->
+  <!-- {{ xval }} -->
+</template>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index c4063089..43c75876 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'md:h8 2xl:h-9 px-4 py-2',
+        default: 'md:h-8 2xl:h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
diff --git a/app/components/pub/ui/toggle/index.ts b/app/components/pub/ui/toggle/index.ts
index 07acae50..9486e903 100644
--- a/app/components/pub/ui/toggle/index.ts
+++ b/app/components/pub/ui/toggle/index.ts
@@ -4,16 +4,16 @@ import { cva } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center rounded-md text-xs 2xl:text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
   {
     variants: {
       variant: {
         default: 'bg-transparent',
         outline:
-          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-slate-300 bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-9 px-3',
+        default: 'md:h-8 2xl:h-9 px-3',
         sm: 'h-8 px-2',
         lg: 'h-10 px-3',
       },
diff --git a/app/handlers/control-letter.handler.ts b/app/handlers/control-letter.handler.ts
new file mode 100644
index 00000000..b096a178
--- /dev/null
+++ b/app/handlers/control-letter.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/control-letter.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/mcu-order-item.handler.ts b/app/handlers/mcu-order-item.handler.ts
new file mode 100644
index 00000000..62e1861e
--- /dev/null
+++ b/app/handlers/mcu-order-item.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/mcu-order.handler.ts b/app/handlers/mcu-order.handler.ts
new file mode 100644
index 00000000..4b114dfc
--- /dev/null
+++ b/app/handlers/mcu-order.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/mcu-order.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/mcu-src-category.handler.ts b/app/handlers/mcu-src-category.handler.ts
new file mode 100644
index 00000000..8369666b
--- /dev/null
+++ b/app/handlers/mcu-src-category.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/mcu-src-category.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/prescription-item.handler.ts b/app/handlers/prescription-item.handler.ts
new file mode 100644
index 00000000..70450970
--- /dev/null
+++ b/app/handlers/prescription-item.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/prescription.handler.ts b/app/handlers/prescription.handler.ts
new file mode 100644
index 00000000..62e1861e
--- /dev/null
+++ b/app/handlers/prescription.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/lib/date.ts b/app/lib/date.ts
index 502a6cfb..2c7b92cf 100644
--- a/app/lib/date.ts
+++ b/app/lib/date.ts
@@ -41,4 +41,12 @@ export function getAge(dateString: string, comparedDate?: string): { idFormat: s
 		idFormat,
 		extFormat
 	};
+}
+
+export function formatDateYyyyMmDd(isoDateString: string): string {
+	const date = new Date(isoDateString);
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate()).padStart(2, '0');
+	return `${year}-${month}-${day}`;
 }
\ No newline at end of file
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
index 1b70af31..ab7b5550 100644
--- a/app/lib/page-permission.ts
+++ b/app/lib/page-permission.ts
@@ -2,67 +2,67 @@ import type { RoleAccess } from '~/models/role'
 
 export const PAGE_PERMISSIONS = {
   '/patient': {
-    doctor: ['R'],
-    nurse: ['R'],
-    admisi: ['C', 'R', 'U', 'D'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/doctor': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['R'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['R'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/satusehat': {
-    doctor: ['R'],
-    nurse: ['R'],
-    admisi: ['C', 'R', 'U', 'D'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['R'],
+    'emp|nur': ['R'],
+    'emp|reg': ['C', 'R', 'U', 'D'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/outpatient/encounter': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['C', 'R', 'U', 'D'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/emergency/encounter': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['C', 'R', 'U', 'D'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/inpatient/encounter': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['C', 'R', 'U', 'D'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['C', 'R', 'U', 'D'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/rehab/encounter': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['R'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['R'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
   '/rehab/registration': {
-    doctor: ['C', 'R', 'U', 'D'],
-    nurse: ['R'],
-    admisi: ['R'],
-    pharmacy: ['R'],
-    billing: ['R'],
-    management: ['R'],
+    'emp|doc': ['C', 'R', 'U', 'D'],
+    'emp|nur': ['R'],
+    'emp|reg': ['R'],
+    'emp|pha': ['R'],
+    'emp|pay': ['R'],
+    'emp|mng': ['R'],
   },
 } as const satisfies Record<string, RoleAccess>
diff --git a/app/models/consultation.ts b/app/models/consultation.ts
index 09d050a8..595d628e 100644
--- a/app/models/consultation.ts
+++ b/app/models/consultation.ts
@@ -28,9 +28,10 @@ export interface DeleteDto {
 
 export function genCreateDto(): CreateDto {
   return {
+    date: '',
     encounter_id: 0,
     problem: '',
-    unit_id: 0,
+    dstUnit_id: 0,
   }
 }
 
diff --git a/app/models/control-letter.ts b/app/models/control-letter.ts
new file mode 100644
index 00000000..8f520212
--- /dev/null
+++ b/app/models/control-letter.ts
@@ -0,0 +1,37 @@
+import { type Base, genBase } from "./_base"
+import { genDoctor, type Doctor } from "./doctor"
+import { genEncounter, type Encounter } from "./encounter"
+import { genSpecialist, type Specialist } from "./specialist"
+import { genSubspecialist, type Subspecialist } from "./subspecialist"
+import { genUnit, type Unit } from "./unit"
+
+export interface ControlLetter extends Base {
+  encounter_id: number
+  encounter: Encounter
+  unit_id: number
+  unit: Unit
+  specialist_id: number
+  specialist: Specialist
+  subspecialist_id: number
+  subspecialist: Subspecialist
+  doctor_id: number
+  doctor: Doctor
+  date: ''
+}
+
+export function genControlLetter(): ControlLetter {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    encounter: genEncounter(),
+    unit_id: 0,
+    unit: genUnit(),
+    specialist_id: 0,
+    specialist: genSpecialist(),
+    subspecialist_id: 0,
+    subspecialist: genSubspecialist(),
+    doctor_id: 0,
+    doctor: genDoctor(),
+    date: ''
+  }
+}
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
index 3f517476..1b631907 100644
--- a/app/models/doctor.ts
+++ b/app/models/doctor.ts
@@ -8,10 +8,11 @@ export interface Doctor extends Base {
   employee: Employee
   ihs_number: string
   sip_number: string
-  unit_id?: number
-  specialist_id?: number
+  code?: string
+  unit_icode?: number
+  specialist_icode?: number
   specialist?: Specialist
-  subspecialist_id?: number
+  subspecialist_icode?: number
   subspecialist?: Subspecialist
   bpjs_code?: string
 }
@@ -21,9 +22,9 @@ export interface CreateDto {
   employee_id: number
   ihs_number: string
   sip_number: string
-  unit_id?: number
-  specialist_id?: number
-  subspecialist_id?: number
+  unit_code?: number
+  specialist_code?: number
+  subspecialist_code?: number
   bpjs_code: string
 }
 
diff --git a/app/models/mcu-order.ts b/app/models/mcu-order.ts
index e3899aab..35e4018c 100644
--- a/app/models/mcu-order.ts
+++ b/app/models/mcu-order.ts
@@ -1,14 +1,18 @@
 import { type Base, genBase } from "./_base"
+import { type Doctor, genDoctor } from "./doctor"
+import type { McuOrderItem } from "./mcu-order-item"
 
 export interface McuOrder extends Base {
   encounter_id: number
   doctor_id: number
+  doctor: Doctor
   status_code?: string
   specimenPickTime: string
   examinationDate: string
   number?: number
   temperature?: number
   mcuUrgencyLevel_code?: string
+  items: McuOrderItem[]
 }
 
 export function genMcuOrder(): McuOrder {
@@ -16,8 +20,10 @@ export function genMcuOrder(): McuOrder {
     ...genBase(),
     encounter_id: 0,
     doctor_id: 0,
+    doctor: genDoctor(),
     specimenPickTime: '',
-    examinationDate: ''
+    examinationDate: '',
+    items: []
   }
 }
 
diff --git a/app/models/prescription.ts b/app/models/prescription.ts
index 543724d2..12d5eb9d 100644
--- a/app/models/prescription.ts
+++ b/app/models/prescription.ts
@@ -1,10 +1,10 @@
+import { type Base, genBase } from "./_base";
 import { type Encounter, genEncounter } from "./encounter";
 import { type Doctor, genDoctor } from "./doctor";
 import { type PrescriptionItem } from "./prescription-item";
 import type { SpecialistIntern } from "./specialist-intern";
 
-export interface Prescription {
-  id: number
+export interface Prescription extends Base {
   encounter_id: number
   encounter: Encounter
   doctor_id: number
@@ -44,7 +44,7 @@ export interface DeleteDto {
 
 export function genPresciption(): Prescription {
   return {
-    id: 0,
+    ...genBase(),
     encounter_id: 0,
     encounter: genEncounter(),
     doctor_id: 0,
diff --git a/app/pages/(features)/integration/bpjs/control-letter/index.vue b/app/pages/(features)/integration/bpjs/control-letter/index.vue
new file mode 100644
index 00000000..8dcb9006
--- /dev/null
+++ b/app/pages/(features)/integration/bpjs/control-letter/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentBpjsControlLetterList type="encounter" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/integration/bpjs/sep/add.vue b/app/pages/(features)/integration/bpjs/sep/add.vue
index 5db12aac..0658780b 100644
--- a/app/pages/(features)/integration/bpjs/sep/add.vue
+++ b/app/pages/(features)/integration/bpjs/sep/add.vue
@@ -22,12 +22,12 @@ const { checkRole, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
+// if (!hasAccess) {
+//   throw createError({
+//     statusCode: 403,
+//     statusMessage: 'Access denied',
+//   })
+// }
 
 // Define permission-based computed properties
 const canCreate = true // hasCreateAccess(roleAccess)
diff --git a/app/pages/(features)/integration/bpjs/sep/index.vue b/app/pages/(features)/integration/bpjs/sep/index.vue
index b8ec57c4..d99dbb5d 100644
--- a/app/pages/(features)/integration/bpjs/sep/index.vue
+++ b/app/pages/(features)/integration/bpjs/sep/index.vue
@@ -22,9 +22,9 @@ const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  navigateTo('/403')
-}
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
 
 // Define permission-based computed properties
 const canRead = true // hasReadAccess(roleAccess)
diff --git a/app/pages/(features)/outpatient/encounter/[id]/index.vue b/app/pages/(features)/outpatient/encounter/[id]/index.vue
new file mode 100644
index 00000000..1864cf2c
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/[id]/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Surat Kontrol',
+  contentFrame: 'cf-container-md',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentOutpatientEncounterDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/index.vue b/app/pages/(features)/outpation-action/cemotherapy/index.vue
deleted file mode 100644
index 50485cec..00000000
--- a/app/pages/(features)/outpation-action/cemotherapy/index.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-  const route = useRoute();
-</script>
-
-<template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
-  </div>
-</template>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue b/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
new file mode 100644
index 00000000..ef936ff2
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
+import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kemoterapi Admin',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => 'Verifikasi Jadwal Pasien',
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+
+const mode = computed(() => route.params.mode as string)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyVerification />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
new file mode 100644
index 00000000..cf33691a
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
+import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kemoterapi Admin',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => {
+    const mode = route.params.mode as string
+    if (mode === 'admin') {
+      return 'Administrasi Pasien Rawat Jalan Kemoterapi'
+    } else if (mode === 'series') {
+      return 'Proses Jadwal Pasien'
+    }
+    return route.meta.title as string
+  },
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+
+const mode = computed(() => route.params.mode as string)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyAdminList v-if="mode === 'admin'" />
+      <ContentChemotherapyProcess v-else-if="mode === 'series'" />
+      <Error v-else :status-code="404" status-message="Mode tidak ditemukan" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
+
diff --git a/app/pages/(features)/outpation-action/chemotherapy/index.vue b/app/pages/(features)/outpation-action/chemotherapy/index.vue
new file mode 100644
index 00000000..a2dfdea5
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Redirect to list page - the process page is now at [id]/index.vue
+const route = useRoute()
+navigateTo('/outpation-action/chemotherapy/list')
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/list.vue b/app/pages/(features)/outpation-action/chemotherapy/list.vue
new file mode 100644
index 00000000..a141baaa
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/list.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kempterapi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/examination-queue/index.vue b/app/pages/(features)/rehab/encounter-queue/index.vue
similarity index 100%
rename from app/pages/(features)/rehab/examination-queue/index.vue
rename to app/pages/(features)/rehab/encounter-queue/index.vue
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
new file mode 100644
index 00000000..cc5d182f
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Update Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterEdit />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
new file mode 100644
index 00000000..612315ad
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/[control_letter_id]/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Surat Kontrol',
+  contentFrame: 'cf-container-md',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
new file mode 100644
index 00000000..1070a29f
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Surat Kontrol',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+const callbackUrl = route.query['return-path'] as string | undefined
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentControlLetterAdd :callback-url="callbackUrl" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
index 3fa7525a..abd0efa7 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -22,15 +22,15 @@ const { checkRole, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
+// if (!hasAccess) {
+//   throw createError({
+//     statusCode: 403,
+//     statusMessage: 'Access denied',
+//   })
+// }
 
 // Define permission-based computed properties
-const canCreate = hasCreateAccess(roleAccess)
+const canCreate = true // hasCreateAccess(roleAccess)
 </script>
 
 <template>
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
index 6bbec942..f50ad954 100644
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -5,7 +5,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['system', 'emp-doc', 'emp-nur', 'emp-reg', 'emp-pha', 'emp-pay', 'emp-mng'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
@@ -23,11 +23,11 @@ const { checkRole, hasReadAccess } = useRBAC()
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  navigateTo('/403')
+  // navigateTo('/403')
 }
 
 // Define permission-based computed properties
-const canRead = hasReadAccess(roleAccess)
+const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
diff --git a/app/pages/(features)/rehab/examination/index.vue b/app/pages/(features)/rehab/examination/index.vue
deleted file mode 100644
index 806b2650..00000000
--- a/app/pages/(features)/rehab/examination/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Examination</div>
-</template>
diff --git a/app/schemas/chemotherapy.schema.ts b/app/schemas/chemotherapy.schema.ts
new file mode 100644
index 00000000..212e5358
--- /dev/null
+++ b/app/schemas/chemotherapy.schema.ts
@@ -0,0 +1,73 @@
+import { z } from 'zod'
+
+const dateStringSchema = z.string().min(1)
+
+export const chemotherapySchema = z.object({
+  // Data Pasien
+  namaPasien: z.string({
+    required_error: 'Nama pasien harus diisi',
+  }).min(1, 'Nama pasien harus diisi'),
+  
+  tanggalLahir: z.string({
+    required_error: 'Tanggal lahir harus diisi',
+  }).min(1, 'Tanggal lahir harus diisi'),
+  
+  noRM: z.string({
+    required_error: 'Nomor RM harus diisi',
+  }).min(1, 'Nomor RM harus diisi'),
+  
+  alamat: z.string({
+    required_error: 'Alamat harus diisi',
+  }).min(1, 'Alamat harus diisi'),
+  
+  beratBadan: z.union([
+    z.string(),
+    z.number()
+  ]).transform(val => val === '' ? null : Number(val))
+    .refine(val => val === null || (val >= 0 && val <= 500), {
+      message: 'Berat badan harus di antara 0-500 kg',
+    }),
+  
+  tinggiBadan: z.union([
+    z.string(),
+    z.number()
+  ]).transform(val => val === '' ? null : Number(val))
+    .refine(val => val === null || (val >= 0 && val <= 300), {
+      message: 'Tinggi badan harus di antara 0-300 cm',
+    }),
+  
+  diagnosa: z.string({
+    required_error: 'Diagnosa harus dipilih',
+  }).min(1, 'Diagnosa harus dipilih'),
+
+  // Protokol Kemoterapi
+  siklus: z.string({
+    required_error: 'Siklus harus diisi',
+  }).min(1, 'Siklus harus diisi'),
+  
+  periodeAwal: z.string({
+    required_error: 'Periode awal harus diisi',
+  }).min(1, 'Periode awal harus diisi'),
+  
+  periodeAkhir: dateStringSchema.refine((val) => {
+    if (!val) return false
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, {
+    message: 'Format tanggal tidak valid'
+  }),
+
+  tanggalKemoterapi: dateStringSchema.refine((val) => {
+    if (!val) return false
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, {
+    message: 'Format tanggal tidak valid'
+  }),
+  
+  dokterKRJ: z.string({
+    required_error: 'Dokter harus dipilih',
+  }).refine(val => val !== '', {
+    message: 'Dokter harus dipilih',
+  }),
+})
\ No newline at end of file
diff --git a/app/schemas/control-letter.schema.ts b/app/schemas/control-letter.schema.ts
new file mode 100644
index 00000000..c82ffaac
--- /dev/null
+++ b/app/schemas/control-letter.schema.ts
@@ -0,0 +1,47 @@
+import { z } from 'zod'
+
+const ControlLetterSchema = z.object({
+  sepStatus: z.string({
+    required_error: 'Mohon isi status SEP',
+  }).default('SEP Internal'),
+  unit_code: z.string({
+    required_error: 'Mohon isi Unit',
+  }),
+  specialist_code: z.string({
+    required_error: 'Mohon isi Spesialis',
+  }),
+  subspecialist_code: z.string({
+    required_error: 'Mohon isi Sub Spesialis',
+  }),
+  doctor_code: z.string({
+    required_error: 'Mohon isi DPJP',
+  }),
+  encounter_code: z.string().optional(),
+  date: z.string({
+    required_error: 'Mohon lengkapi Tanggal Kontrol',
+  })
+    .refine(
+      (date) => {
+        // Jika kosong, return false untuk required validation
+        if (!date || date.trim() === '') return false
+
+        // Jika ada isi, validasi format tanggal
+        try {
+          const dateObj = new Date(date)
+          // Cek apakah tanggal valid dan tahun >= 1900
+          return !isNaN(dateObj.getTime()) && dateObj.getFullYear() >= 1900
+        } catch {
+          return false
+        }
+      },
+      {
+        message: 'Mohon lengkapi Tanggal Kontrol dengan format yang valid',
+      },
+    )
+    .transform((dateStr) => new Date(dateStr).toISOString()),
+})
+
+type ControlLetterFormData = z.infer<typeof ControlLetterSchema>
+
+export { ControlLetterSchema }
+export type { ControlLetterFormData }
diff --git a/app/schemas/prescription-item.schema.ts b/app/schemas/prescription-item.schema.ts
new file mode 100644
index 00000000..7c3ca7d3
--- /dev/null
+++ b/app/schemas/prescription-item.schema.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const PrescriptionItemSchema = z.object({
+})
+
+type PrescriptionItemFormData = z.infer<typeof PrescriptionItemSchema> & PrescriptionItem
+
+export { PrescriptionItemSchema }
+export type { PrescriptionItemFormData }
diff --git a/app/schemas/prescription.schema.ts b/app/schemas/prescription.schema.ts
new file mode 100644
index 00000000..1e23f642
--- /dev/null
+++ b/app/schemas/prescription.schema.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod'
+import type { Prescription } from '~/models/prescription'
+
+const PrescriptionSchema = z.object({
+    'encounter-id': z.number().nullable().optional(),
+})
+
+type PrescriptionFormData = z.infer<typeof PrescriptionSchema> & Prescription
+
+export { PrescriptionSchema }
+export type { PrescriptionFormData }
diff --git a/app/services/control-letter.service.ts b/app/services/control-letter.service.ts
new file mode 100644
index 00000000..29b3722b
--- /dev/null
+++ b/app/services/control-letter.service.ts
@@ -0,0 +1,28 @@
+// Base
+import * as base from './_crud-base'
+
+// Constants
+import { encounterClassCodes } from '~/lib/constants'
+
+const path = '/api/v1/control-letter'
+const name = 'control-letter'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
\ No newline at end of file
diff --git a/app/services/doctor.service.ts b/app/services/doctor.service.ts
index 74104c2c..e6ae0051 100644
--- a/app/services/doctor.service.ts
+++ b/app/services/doctor.service.ts
@@ -1,8 +1,6 @@
 // Base
 import * as base from './_crud-base'
-
-// Types
-import type { Doctor } from '~/models/doctor'
+import type { Doctor } from "~/models/doctor";
 
 const path = '/api/v1/doctor'
 const name = 'doctor'
@@ -27,13 +25,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: Doctor) => ({
-      value: item.id ? String(item.id) : '',
+      value: useCodeAsValue ? item.code
+        : item.id ? Number(item.id) 
+          : item.id,
       label: item.employee?.person?.name || '',
     }))
   }
diff --git a/app/services/mcu-order-item.service.ts b/app/services/mcu-order-item.service.ts
new file mode 100644
index 00000000..b7ffbbfe
--- /dev/null
+++ b/app/services/mcu-order-item.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-order-item'
+const name = 'mcu-order-item'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/mcu-order.service.ts b/app/services/mcu-order.service.ts
new file mode 100644
index 00000000..77e023d7
--- /dev/null
+++ b/app/services/mcu-order.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-order'
+const name = 'mcu-order'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/mcu-src-category.service.ts b/app/services/mcu-src-category.service.ts
new file mode 100644
index 00000000..c154b1dc
--- /dev/null
+++ b/app/services/mcu-src-category.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-src-category'
+const name = 'mcu-src-category'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/mcu-src.service.ts b/app/services/mcu-src.service.ts
new file mode 100644
index 00000000..a7a466b8
--- /dev/null
+++ b/app/services/mcu-src.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-src'
+const name = 'mcu-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/prescription-item.service.ts b/app/services/prescription-item.service.ts
new file mode 100644
index 00000000..22649e14
--- /dev/null
+++ b/app/services/prescription-item.service.ts
@@ -0,0 +1,23 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/prescription-item'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/prescription.service.ts b/app/services/prescription.service.ts
new file mode 100644
index 00000000..150357ab
--- /dev/null
+++ b/app/services/prescription.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/prescription'
+const name = 'prescription'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
index 8221cd67..7786fcc2 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.service.ts
@@ -34,7 +34,7 @@ export async function getValueLabelList(params: any = null, useCodeAsValue = fal
   if (result.success) {
     const resultData = result.body?.data || []
     data = resultData.map((item: Specialist) => ({
-      value: useCodeAsValue ? item.code 
+      value: useCodeAsValue ? item.code
         : item.id ? Number(item.id) 
           : item.code,
       label: item.name,
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
index 40968a69..948ac6b6 100644
--- a/app/services/unit.service.ts
+++ b/app/services/unit.service.ts
@@ -33,7 +33,7 @@ export async function getValueLabelList(params: any = null, useCodeAsValue = fal
   if (result.success) {
     const resultData = result.body?.data || []
     data = resultData.map((item: Unit) => ({
-      value: useCodeAsValue ? item.code 
+      value: useCodeAsValue ? item.code
         : item.id ? Number(item.id) 
           : item.code,
       label: item.name,
diff --git a/app/stores/user.ts b/app/stores/user.ts
index 14ab7134..97bd4665 100644
--- a/app/stores/user.ts
+++ b/app/stores/user.ts
@@ -5,12 +5,13 @@ export const useUserStore = defineStore(
     // const token = useCookie('authentication')
 
     const isAuthenticated = computed(() => !!user.value)
+
     const userRole = computed(() => {
-      const roles = user.value?.roles || []
-      return roles.map((input: string) => {
-        const parts = input.split('-')
-        return parts.length > 1 ? parts[1]: parts[0]
-      })
+      return user.value?.roles || []
+      // return roles.map((input: string) => {
+      //   const parts = input.split('|')
+      //   return parts.length > 1 ? parts[1]: parts[0]
+      // })
     })
 
     const login = async (userData: any) => {
@@ -21,12 +22,30 @@ export const useUserStore = defineStore(
       user.value = null
     }
 
+    const setActiveRole = (role: string) => {
+      if (user.value && user.value.roles.includes(role)) {
+        user.value.activeRole = role
+      }
+    }
+
+    const getActiveRole = () => {
+      if (user.value?.activeRole) {
+        return user.value.activeRole
+      }
+      if (user.value?.roles.length > 0) {
+        user.value.activeRole = user.value.roles[0]
+        return user.value.activeRole
+      }
+    }
+
     return {
       user,
       isAuthenticated,
       userRole,
       login,
       logout,
+      setActiveRole,
+      getActiveRole,
     }
   },
   {
diff --git a/public/side-menu-items/blank.json b/public/side-menu-items/blank.json
new file mode 100644
index 00000000..9d7a78b3
--- /dev/null
+++ b/public/side-menu-items/blank.json
@@ -0,0 +1,12 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/div-crd.json b/public/side-menu-items/div-crd.json
new file mode 100644
index 00000000..9d7a78b3
--- /dev/null
+++ b/public/side-menu-items/div-crd.json
@@ -0,0 +1,12 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/doc.json b/public/side-menu-items/emp-doc.json
similarity index 96%
rename from public/side-menu-items/doc.json
rename to public/side-menu-items/emp-doc.json
index e3ab2cdf..b7ecb430 100644
--- a/public/side-menu-items/doc.json
+++ b/public/side-menu-items/emp-doc.json
@@ -84,12 +84,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia/encounter"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
diff --git a/public/side-menu-items/lab.json b/public/side-menu-items/emp-lab.json
similarity index 100%
rename from public/side-menu-items/lab.json
rename to public/side-menu-items/emp-lab.json
diff --git a/public/side-menu-items/miw.json b/public/side-menu-items/emp-mid.json
similarity index 93%
rename from public/side-menu-items/miw.json
rename to public/side-menu-items/emp-mid.json
index ebb43da6..80eeee7c 100644
--- a/public/side-menu-items/miw.json
+++ b/public/side-menu-items/emp-mid.json
@@ -20,7 +20,7 @@
       {
         "title": "Rehabilitasi Medik",
         "icon": "i-lucide-bike",
-        "link": "/rehab/polyclinic-queue"
+        "link": "/rehab/encounter-queue"
       },
       {
         "title": "Rawat Inap",
diff --git a/public/side-menu-items/nur.json b/public/side-menu-items/emp-nur.json
similarity index 89%
rename from public/side-menu-items/nur.json
rename to public/side-menu-items/emp-nur.json
index 8185456c..1c993144 100644
--- a/public/side-menu-items/nur.json
+++ b/public/side-menu-items/emp-nur.json
@@ -13,10 +13,10 @@
         "children": [
           {
             "title": "Antrian Poliklinik",
-            "link": "/outpatient/polyclinic-queue"
+            "link": "/outpatient/encounter-queue"
           },
           {
-            "title": "Pendaftaran",
+            "title": "Kunjungan",
             "link": "/outpatient/encounter"
           }
         ]
@@ -30,7 +30,7 @@
             "link": "/emergency/triage"
           },
           {
-            "title": "Pemeriksaan",
+            "title": "Kunjungan",
             "link": "/emergency/encounter"
           }
         ]
@@ -42,7 +42,7 @@
         "children": [
           {
             "title": "Antrean Poliklinik",
-            "link": "/rehab/polyclinic-queue"
+            "link": "/rehab/encounter-queue"
           },
           {
             "title": "Kunjungan",
@@ -63,7 +63,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
diff --git a/public/side-menu-items/nut.json b/public/side-menu-items/emp-nut.json
similarity index 93%
rename from public/side-menu-items/nut.json
rename to public/side-menu-items/emp-nut.json
index 4368b22e..ef71282a 100644
--- a/public/side-menu-items/nut.json
+++ b/public/side-menu-items/emp-nut.json
@@ -35,12 +35,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
diff --git a/public/side-menu-items/pha.json b/public/side-menu-items/emp-pha.json
similarity index 100%
rename from public/side-menu-items/pha.json
rename to public/side-menu-items/emp-pha.json
diff --git a/public/side-menu-items/reg.json b/public/side-menu-items/emp-reg.json
similarity index 100%
rename from public/side-menu-items/reg.json
rename to public/side-menu-items/emp-reg.json
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/system.json
similarity index 96%
rename from public/side-menu-items/sys.json
rename to public/side-menu-items/system.json
index b69127e7..5bf62f36 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/system.json
@@ -17,7 +17,7 @@
           },
           {
             "title": "Antrian Poliklinik",
-            "link": "/outpatient/polyclinic-queue"
+            "link": "/outpatient/encounter-queue"
           },
           {
             "title": "Kunjungan",
@@ -57,7 +57,7 @@
           },
           {
             "title": "Antrean Poliklinik",
-            "link": "/rehab/polyclinic-queue"
+            "link": "/rehab/encounter-queue"
           },
           {
             "title": "Kunjungan",
@@ -139,7 +139,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
@@ -199,6 +199,11 @@
             "title": "Peserta",
             "icon": "i-lucide-circuit-board",
             "link": "/integration/bpjs/member"
+          },
+          {
+            "title": "Surat Kontrol",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/control-letter"
           }
         ]
       },

From 0a68dbf3a625fec9580310aca1d34ccf74ba2a31 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Tue, 18 Nov 2025 15:31:04 +0700
Subject: [PATCH 28/40] Fix: debug after reset

---
 .../_common/select-doc-type.vue               |  71 ++++
 .../app/document-upload/entry-form.vue        |  73 ++++
 .../app/document-upload/list.cfg.ts           |  43 ++
 app/components/app/document-upload/list.vue   |  31 ++
 .../content/document-upload/add.vue           | 128 ++++++
 .../content/document-upload/edit.vue          | 134 +++++++
 .../content/document-upload/list.vue          | 170 ++++++++
 app/components/content/encounter/process.vue  |  28 +-
 .../pub/my-ui/data/dropdown-action-dd.vue     |  80 ++++
 .../pub/my-ui/data/dropdown-action-dud.vue    |  11 +-
 app/components/pub/my-ui/form/file-field.vue  |   2 +-
 .../pub/my-ui/modal/doc-preview-dialog.vue    |  29 ++
 .../pub/my-ui/nav-footer/ba-dr-su.vue         |   2 +-
 app/composables/useRBAC.ts                    |  15 +
 app/handlers/supporting-document.handler.ts   |  24 ++
 app/lib/constants.ts                          |  42 ++
 app/lib/utils.ts                              |  57 +++
 app/models/encounter-document.ts              |  29 ++
 app/models/encounter.ts                       |   5 +-
 .../encounter/[id]/control-letter/add.vue     |   9 +-
 .../document-upload/[document_id]/edit.vue}   |  15 +-
 .../encounter/[id]/document-upload/add.vue}   |  27 +-
 .../rehab/encounter/[id]/process.vue          |   6 +-
 app/schemas/document-upload.schema.ts         |  24 ++
 app/services/supporting-document.service.ts   |  56 +++
 public/side-menu-items/sys.json               | 368 ++++++++++++++++++
 26 files changed, 1427 insertions(+), 52 deletions(-)
 create mode 100644 app/components/app/document-upload/_common/select-doc-type.vue
 create mode 100644 app/components/app/document-upload/entry-form.vue
 create mode 100644 app/components/app/document-upload/list.cfg.ts
 create mode 100644 app/components/app/document-upload/list.vue
 create mode 100644 app/components/content/document-upload/add.vue
 create mode 100644 app/components/content/document-upload/edit.vue
 create mode 100644 app/components/content/document-upload/list.vue
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dd.vue
 create mode 100644 app/components/pub/my-ui/modal/doc-preview-dialog.vue
 create mode 100644 app/handlers/supporting-document.handler.ts
 create mode 100644 app/models/encounter-document.ts
 rename app/pages/(features)/{outpation-action/chemotherapy/list.vue => rehab/encounter/[id]/document-upload/[document_id]/edit.vue} (74%)
 rename app/pages/(features)/{outpation-action/chemotherapy/[mode]/[id]/verification.vue => rehab/encounter/[id]/document-upload/add.vue} (53%)
 create mode 100644 app/schemas/document-upload.schema.ts
 create mode 100644 app/services/supporting-document.service.ts
 create mode 100644 public/side-menu-items/sys.json

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/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
new file mode 100644
index 00000000..7d42f4f6
--- /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 { uploadAttachment } from '~/services/supporting-document.service'
+import { printFormData, toFormData } from '~/lib/utils'
+
+// #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..4fc55bc4
--- /dev/null
+++ b/app/components/content/document-upload/list.vue
@@ -0,0 +1,170 @@
+<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)
+
+// #region State
+const props = defineProps<{
+  encounter?: Encounter
+}>()
+
+const {user,userRole} = useUserStore()
+const {getUserPermissions} = useRBAC()
+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/process.vue b/app/components/content/encounter/process.vue
index 23640af7..ecf44507 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -19,6 +19,8 @@ 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 ControlLetterList from '~/components/content/control-letter/list.vue'
+import DocUploadList from '~/components/content/document-upload/list.vue'
+import { genEncounter } from '~/models/encounter'
 
 const route = useRoute()
 const router = useRouter()
@@ -32,12 +34,18 @@ const activeTab = computed({
 })
 
 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 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 dataResBody = dataRes.body ?? null
-const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
@@ -63,10 +71,10 @@ const tabs: TabItem[] = [
   { 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: 'prescription', label: 'Order Obat', component: Prescription, 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-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.id } },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
   { value: 'mcu-lab-pa', label: 'Order Lab PA' },
   { value: 'medical-action', label: 'Order Ruang Tindakan' },
@@ -75,7 +83,7 @@ const tabs: TabItem[] = [
   { 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' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data, },  },
 ]
 </script>
 
@@ -91,4 +99,4 @@ const tabs: TabItem[] = [
       @change-tab="activeTab = $event"
     />
   </div>
-</template>
+</template>
\ No newline at end of file
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/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/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-footer/ba-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
index 8c292758..427eab0f 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
@@ -43,4 +43,4 @@ function onClick(type: ClickType) {
       </Button>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
index ced57e3e..6cc01d72 100644
--- a/app/composables/useRBAC.ts
+++ b/app/composables/useRBAC.ts
@@ -1,5 +1,12 @@
 import type { Permission, RoleAccess } from '~/models/role'
 
+export interface PageOperationPermission {
+  canRead: boolean
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+}
+
 /**
  * Check if user has access to a page
  */
@@ -36,6 +43,13 @@ export function useRBAC() {
   const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
   const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
 
+  const getPagePermissions = (roleAccess: RoleAccess): PageOperationPermission => ({
+      canRead : hasReadAccess(roleAccess),
+      canCreate: hasCreateAccess(roleAccess),
+      canUpdate: hasUpdateAccess(roleAccess),
+      canDelete: hasDeleteAccess(roleAccess),
+  })
+
   return {
     checkRole,
     checkPermission,
@@ -44,5 +58,6 @@ export function useRBAC() {
     hasReadAccess,
     hasUpdateAccess,
     hasDeleteAccess,
+    getPagePermissions,
   }
 }
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/lib/constants.ts b/app/lib/constants.ts
index 3a52b22e..48fb5c8c 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -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/utils.ts b/app/lib/utils.ts
index 357d8700..e201a439 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',
+  })
+}
\ No newline at end of file
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..55fbdfa4 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"
@@ -37,6 +38,7 @@ export interface Encounter {
     internalReferences?: InternalReference[]
     deathCause?: DeathCause
     status_code: string
+    encounterDocuments: EncounterDocument[]
 }
 
 export function genEncounter(): Encounter {
@@ -54,7 +56,8 @@ export function genEncounter(): Encounter {
         appointment_doctor_id: 0,
         appointment_doctor: genDoctor(),
         medicalDischargeEducation: '',
-        status_code: ''
+        status_code: '',
+        encounterDocuments: [],
     }
 }
 
diff --git a/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
index 1070a29f..fa0b386b 100644
--- a/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
@@ -16,9 +16,9 @@ useHead({
   title: () => route.meta.title as string,
 })
 
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
 
-const { checkRole, hasReadAccess } = useRBAC()
+const { checkRole, getPagePermissions } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
@@ -27,14 +27,13 @@ const hasAccess = checkRole(roleAccess)
 // }
 
 // Define permission-based computed properties
-// const canRead = hasReadAccess(roleAccess)
-const canRead = true
+const pagePermission = getPagePermissions(roleAccess)
 const callbackUrl = route.query['return-path'] as string | undefined
 </script>
 
 <template>
   <div>
-    <div v-if="canRead">
+    <div v-if="pagePermission.canRead">
       <ContentControlLetterAdd :callback-url="callbackUrl" />
     </div>
     <Error v-else :status-code="403" />
diff --git a/app/pages/(features)/outpation-action/chemotherapy/list.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
similarity index 74%
rename from app/pages/(features)/outpation-action/chemotherapy/list.vue
rename to app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
index a141baaa..1cf5cc7c 100644
--- a/app/pages/(features)/outpation-action/chemotherapy/list.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
@@ -6,7 +6,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Kempterapi',
+  title: 'Update Dokumen Pendukung',
   contentFrame: 'cf-full-width',
 })
 
@@ -16,24 +16,25 @@ useHead({
   title: () => route.meta.title as string,
 })
 
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+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')
-}
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
 
 // Define permission-based computed properties
-const canRead = true // hasReadAccess(roleAccess)
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentChemotherapyList />
+      <ContentDocumentUploadEdit/>
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
similarity index 53%
rename from app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
rename to app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
index ef936ff2..e04220f3 100644
--- a/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
@@ -2,46 +2,41 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
-import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
 
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Kemoterapi Admin',
+  title: 'Tambah Dokumen Pendukung',
   contentFrame: 'cf-full-width',
 })
 
 const route = useRoute()
 
 useHead({
-  title: () => 'Verifikasi Jadwal Pasien',
+  title: () => route.meta.title as string,
 })
 
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
+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')
-}
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
 
 // Define permission-based computed properties
-const canRead = true // hasReadAccess(roleAccess)
-
-const mode = computed(() => route.params.mode as string)
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+const callbackUrl = route.query['return-path'] as string | undefined
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentChemotherapyVerification />
+      <ContentDocumentUploadAdd :callback-url="callbackUrl" />
     </div>
-    <Error
-      v-else
-      :status-code="403"
-    />
+    <Error v-else :status-code="403" />
   </div>
 </template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
index abd0efa7..e25b0e77 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -18,7 +18,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,11 +30,11 @@ const hasAccess = checkRole(roleAccess)
 // }
 
 // Define permission-based computed properties
-const canCreate = true // hasCreateAccess(roleAccess)
+const pagePermission = getPagePermissions(roleAccess)
 </script>
 
 <template>
-  <div v-if="canCreate">
+    <div v-if="pagePermission.canRead">
     <ContentEncounterProcess />
   </div>
   <Error v-else :status-code="403" />
diff --git a/app/schemas/document-upload.schema.ts b/app/schemas/document-upload.schema.ts
new file mode 100644
index 00000000..1cfaeee2
--- /dev/null
+++ b/app/schemas/document-upload.schema.ts
@@ -0,0 +1,24 @@
+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(),
+  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/services/supporting-document.service.ts b/app/services/supporting-document.service.ts
new file mode 100644
index 00000000..46eaffa9
--- /dev/null
+++ b/app/services/supporting-document.service.ts
@@ -0,0 +1,56 @@
+// Base
+import * as base from './_crud-base'
+
+// Constants
+import { encounterClassCodes, uploadCode, type UploadCodeKey } from '~/lib/constants'
+
+const path = '/api/v1/encounter-document'
+const create_path = '/api/v1/upload'
+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')
+  }
+}
\ No newline at end of file
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
new file mode 100644
index 00000000..c26d85aa
--- /dev/null
+++ b/public/side-menu-items/sys.json
@@ -0,0 +1,368 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "link": "/outpatient/registration-queue"
+          },
+          {
+            "title": "Antrian Poliklinik",
+            "link": "/outpatient/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/outpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/outpatient/consultation"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/emergency/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/emergency/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rehab Medik",
+        "icon": "i-lucide-bike",
+        "children": [
+          {
+            "title": "Antrean Pendaftaran",
+            "link": "/rehab/registration-queue"
+          },
+          {
+            "title": "Antrean Poliklinik",
+            "link": "/rehab/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/rehab/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/rehab/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": "Lab - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pc-lab-order"
+      },
+      {
+        "title": "Lab Mikro - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/micro-lab-order"
+      },
+      {
+        "title": "Lab PA - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pa-lab-order"
+      },
+      {
+        "title": "Radiologi - Order",
+        "icon": "i-lucide-radio",
+        "link": "/radiology-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/sep"
+          },
+          {
+            "title": "Peserta",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/member"
+          },
+          {
+            "title": "Surat Kontrol",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/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": "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": "Layanan",
+        "icon": "i-lucide-layout-list",
+        "children": [
+          {
+            "title": "Counter",
+            "link": "/service-src/counter"
+          },
+          {
+            "title": "Public Screen (Big Screen)",
+            "link": "/service-src/public-screen"
+          },
+          {
+            "title": "Kasur",
+            "link": "/service-src/bed"
+          },
+          {
+            "title": "Kamar",
+            "link": "/service-src/chamber"
+          },
+          {
+            "title": "Ruang",
+            "link": "/service-src/room"
+          },
+          {
+            "title": "Depo",
+            "link": "/service-src/warehouse"
+          },
+          {
+            "title": "Lantai",
+            "link": "/service-src/floor"
+          },
+          {
+            "title": "Gedung",
+            "link": "/service-src/building"
+          }
+        ]
+      },
+      {
+        "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"
+          }
+        ]
+      }
+    ]
+  }
+]

From bfbe72be94a6a20301ad88c50fc9fa6078bb5087 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Wed, 19 Nov 2025 03:36:24 +0700
Subject: [PATCH 29/40] feat/device-order: final

---
 .../app/device-order-item/entry-form.vue      |  73 ++++++
 .../device-order-item/list-entry.config.ts    |  35 ++-
 .../app/device-order-item/list-entry.vue      |  16 +-
 .../app/device-order/confirmation-info.vue    |  26 ++
 .../app/device-order/entry-form.vue           |  21 +-
 .../app/device-order/list.config.ts           |  50 ++--
 app/components/content/device-order/entry.vue | 239 +++++++++++++++++-
 app/components/content/device-order/list.vue  | 201 ++++++---------
 app/components/content/device-order/main.vue  |  10 +-
 app/components/content/encounter/process.vue  |   4 +-
 app/models/device-order-item.ts               |  11 +-
 app/models/device-order.ts                    |   7 +-
 app/services/device-order.service.ts          |  17 +-
 13 files changed, 527 insertions(+), 183 deletions(-)
 create mode 100644 app/components/app/device-order-item/entry-form.vue
 create mode 100644 app/components/app/device-order/confirmation-info.vue

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 0e0d068d..04a6c9fc 100644
--- a/app/components/app/device-order/list.config.ts
+++ b/app/components/app/device-order/list.config.ts
@@ -1,10 +1,8 @@
-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 type {} from 
-// import { defineAsyncComponent } from 'vue'
-
-// const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+import type { DeviceOrderItem } from '~/models/device-order-item'
 
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))
 
 export const config: Config = {
   cols: [{ width: 120 }, { }, { }, { }, { width: 50 }],
@@ -23,7 +21,21 @@ 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: {
@@ -36,18 +48,18 @@ export const config: Config = {
     //   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/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 6c23cfc0..1ffa324d 100644
--- a/app/components/content/device-order/list.vue
+++ b/app/components/content/device-order/list.vue
@@ -1,72 +1,38 @@
 <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, getDetail } from '~/services/device-order.service'
+// Props
+const props = defineProps<{
+  encounter_id: number
+}>()
 
-const route = useRoute()
-const { setQueryParams } = useQueryParam()
-
-const plainEid = route.params.id
-const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
-
-// 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({
-      'encounter-id': encounter_id,
-      search: params.search,
-      includes: 'doctor,doctor-employee,doctor-employee-person,items',
-      'page-number': params['page-number'] || 0,
-      'page-size': params['page-size'] || 10,
-    })
-    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',
@@ -96,77 +62,81 @@ const headerPrep: HeaderPrep = {
           'id': saveResp.body?.data?.id.toString()
         })
       }
-      // await handleActionSave(recItem, getMyList, () => {}, () => {})
-      // goToEntry()
     },
   },
 }
 
+// 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([recId, recAction], () => {
+  let item: DeviceOrder | null
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getMyDetail(recId.value)
-      isReadonly.value = true
+      setQueryParams({
+        'mode': 'entry',
+        'id': recId.value.toString()
+      })
       break
-    case ActionEvents.showEdit:
-      getMyDetail(recId.value)
-      isReadonly.value = false
+    case ActionEvents.showConfirmSubmit:
+      selectedItem.value = pickItem()
+      isSubmitConfirmationOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
+      selectedItem.value = pickItem()
+      isDeleteConfirmationOpen.value = true
       break
   }
+  recAction.value = '';
 })
 
-// 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()
-//       })
-//     }
-//   }
-// })
-
-// Watch for row actions when recId or recAction changes
-// onMounted(async () => {
-//   await getMyList()
-// })
-
-// Functions
-const getMyDetail = async (id: number | string) => {
-  const result = await getDetail(id)
+async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
+  const result = await submit(id)
   if (result.success) {
-    const currentValue = result.body?.data || {}
-    recItem.value = currentValue
-    isFormEntryDialogOpen.value = true
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
   }
 }
 
-function cancel(data: DeviceOrder) {
-  recId.value = data.id
-  recItem.value = data
-  isRecordConfirmationOpen.value = true
+function pickItem(): DeviceOrder | null {
+  const item = data.value.find(item => item.id === recId.value)
+  selectedItem.value = item
+  return item
 }
-
-function edit(data: DeviceOrder) {
-  setQueryParams({
-    'mode': 'entry',
-    'id': data.id.toString()
-  })
-  recItem.value = data
-}
-
-function submit(data: DeviceOrder) {
-}
-
 </script>
 
 <template>
@@ -175,42 +145,39 @@ function submit(data: DeviceOrder) {
     :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"
-    @page-change="handlePageChange"
-  />
+   -->
 
-  <!-- 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/encounter/process.vue b/app/components/content/encounter/process.vue
index c72f6835..7f62f5d1 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -64,9 +64,7 @@ const tabs: TabItem[] = [
   { value: 'consent', label: 'General Consent' },
   { value: 'patient-note', label: 'CPRJ' },
   { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
-  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter: data } },
-  { value: 'mcu-radiology', label: 'Order Radiologi' },
-  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.id } },
   { 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' },
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 f2e88b0f..cbb682ad 100644
--- a/app/models/device-order.ts
+++ b/app/models/device-order.ts
@@ -1,9 +1,11 @@
 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[]
 }
@@ -12,7 +14,8 @@ export function genDeviceOrder(): DeviceOrder {
   return {
     ...genBase(),
     encounter_id: 0,
-    doctor_id: 0,
+    doctor_code: 0,
+    doctor: genDoctor(),
     items: []
   }
 }
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

From c3f1f997b3b0d7aefd2c5cddda8d1f8d87816fef Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Wed, 19 Nov 2025 10:22:12 +0700
Subject: [PATCH 30/40] Fix: refactor upload API url

---
 app/components/content/document-upload/add.vue | 3 +--
 app/services/supporting-document.service.ts    | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/components/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
index 7d42f4f6..23fd30e0 100644
--- a/app/components/content/document-upload/add.vue
+++ b/app/components/content/document-upload/add.vue
@@ -6,8 +6,7 @@ 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 { uploadAttachment } from '~/services/supporting-document.service'
-import { printFormData, toFormData } from '~/lib/utils'
+import { toFormData } from '~/lib/utils'
 
 // #region Props & Emits
 const props = defineProps<{
diff --git a/app/services/supporting-document.service.ts b/app/services/supporting-document.service.ts
index 46eaffa9..2d89d7f1 100644
--- a/app/services/supporting-document.service.ts
+++ b/app/services/supporting-document.service.ts
@@ -2,10 +2,10 @@
 import * as base from './_crud-base'
 
 // Constants
-import { encounterClassCodes, uploadCode, type UploadCodeKey } from '~/lib/constants'
+import { uploadCode, type UploadCodeKey } from '~/lib/constants'
 
 const path = '/api/v1/encounter-document'
-const create_path = '/api/v1/upload'
+const create_path = '/api/v1/upload-file'
 const name = 'encounter-document'
 
 export function create(data: any) {

From f41a51d9d0e75c7ee3e13f82250c8c5df025996f Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Wed, 19 Nov 2025 10:58:26 +0700
Subject: [PATCH 31/40] feat/prescription: cleaning

---
 app/components/app/prescription/entry.vue     |  6 ++
 app/components/app/prescription/flat-list.vue |  2 -
 .../app/prescription/list-with-sub.vue        | 60 +++++++++----------
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/app/components/app/prescription/entry.vue b/app/components/app/prescription/entry.vue
index af59a87d..28041eea 100644
--- a/app/components/app/prescription/entry.vue
+++ b/app/components/app/prescription/entry.vue
@@ -41,4 +41,10 @@ defineProps<{
       </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
index cf563ef2..fe0bab9c 100644
--- a/app/components/app/prescription/flat-list.vue
+++ b/app/components/app/prescription/flat-list.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import * as Table from '~/components/pub/ui/table'
-import * as DE from '~/components/pub/my-ui/doc-entry';
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
 
 import type { Prescription } from '~/models/prescription';
-import PrescriptionItem from '~/components/app/prescription-item/list.vue';
 
 interface Props {
   data: Prescription[]
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>

From cf4f5574d3cbe2d5af30aa55744c9c94e733b9de Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 19 Nov 2025 23:46:21 +0700
Subject: [PATCH 32/40] =?UTF-8?q?=E2=9C=A8=20feat=20(generate-file):=20add?=
 =?UTF-8?q?=20generate=20file=20schema?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../content/general-consent/form.vue          | 32 +++++++++++++++----
 app/handlers/general-consent.handler.ts       | 24 ++++++++++++++
 app/models/general-consent.ts                 |  3 +-
 app/schemas/_generate-file.ts                 |  5 +++
 app/schemas/general-consent.schema.ts         |  5 +--
 app/services/generate-file.service.ts         | 15 +++++++++
 6 files changed, 74 insertions(+), 10 deletions(-)
 create mode 100644 app/handlers/general-consent.handler.ts
 create mode 100644 app/schemas/_generate-file.ts
 create mode 100644 app/services/generate-file.service.ts

diff --git a/app/components/content/general-consent/form.vue b/app/components/content/general-consent/form.vue
index 889e5799..d9b67fec 100644
--- a/app/components/content/general-consent/form.vue
+++ b/app/components/content/general-consent/form.vue
@@ -4,9 +4,10 @@ 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 { FunctionSoapiSchema } from '~/schemas/soapi.schema'
+import { GeneralConsentSchema } from '~/schemas/general-consent.schema'
 import { toast } from '~/components/pub/ui/toast'
-import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+import { handleActionSave, handleActionEdit } from '~/handlers/general-consent.handler'
+import { create } from '~/services/generate-file.service'
 const { backToList } = useQueryMode('mode')
 
 const route = useRoute()
@@ -19,14 +20,15 @@ const fungsional = ref([])
 const selectedProcedure = ref<any>(null)
 const selectedDiagnose = ref<any>(null)
 const selectedFungsional = ref<any>(null)
-const schema = FunctionSoapiSchema
+const schema = GeneralConsentSchema
 const payload = ref({
   encounter_id: 0,
   value: '',
 })
 const model = ref({
   relatives: [],
-  responsible: '',
+  responsibleName: '',
+  responsiblePhone: '',
   informant: '',
   witness1: '',
   witness2: '',
@@ -81,16 +83,32 @@ async function actionHandler(type: string) {
   }
   const result = await entryGeneralConsent.value?.validate()
   if (result?.valid) {
-    console.log('data', result.data)
-    handleActionSave(
+    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)
+    }
   } else {
     console.log('Ada error di form', result)
   }
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/models/general-consent.ts b/app/models/general-consent.ts
index 643230ef..fe3ac97a 100644
--- a/app/models/general-consent.ts
+++ b/app/models/general-consent.ts
@@ -6,7 +6,8 @@ export interface GeneralConsent {
 
 export interface ValueCreateDto {
   relatives: string[]
-  responsible: string
+  responsibleName: string
+  responsiblePhone: string
   informant: string
   witness1: string
   witness2: string
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/general-consent.schema.ts b/app/schemas/general-consent.schema.ts
index 43014fa0..e06c7240 100644
--- a/app/schemas/general-consent.schema.ts
+++ b/app/schemas/general-consent.schema.ts
@@ -2,8 +2,9 @@ import { z } from 'zod'
 import type { CreateDto } from '~/models/general-consent'
 
 const GeneralConsentSchema = z.object({
-  relatives: z.string().optional(),
-  responsible_doctor: z.string().optional(),
+  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(),
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)
+}

From 0d821cbe3105684af7a0db5affd228defe66f75f Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 20 Nov 2025 00:13:44 +0700
Subject: [PATCH 33/40] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20chore=20(general-con?=
 =?UTF-8?q?sent):=20adjust=20general=20consent=20list=20and=20form=20compo?=
 =?UTF-8?q?nent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/general-consent/list.cfg.ts           | 35 ++++++++++++++++---
 .../content/general-consent/form.vue          | 22 ++++++++++--
 .../content/general-consent/list.vue          | 33 ++++++++++-------
 3 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/app/components/app/general-consent/list.cfg.ts b/app/components/app/general-consent/list.cfg.ts
index 3e634d44..c2f57c54 100644
--- a/app/components/app/general-consent/list.cfg.ts
+++ b/app/components/app/general-consent/list.cfg.ts
@@ -18,12 +18,41 @@ export const config: Config = {
       { label: '' },
     ],
   ],
-  keys: ['date', 'dstUnit.name', 'dstDoctor.name', 'responsible', 'problem', 'solution', 'action'],
+  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,
@@ -35,10 +64,6 @@ export const config: Config = {
       }
       return res
     },
-    date(rec) {
-      const recX = rec as GeneralConsent
-      return recX.date?.substring(0, 10) || '-'
-    },
   },
   components: {
     action(rec, idx) {
diff --git a/app/components/content/general-consent/form.vue b/app/components/content/general-consent/form.vue
index d9b67fec..8c15ceb0 100644
--- a/app/components/content/general-consent/form.vue
+++ b/app/components/content/general-consent/form.vue
@@ -8,6 +8,8 @@ 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 } = useQueryMode('mode')
 
 const route = useRoute()
@@ -57,10 +59,26 @@ async function getProcedures() {
 }
 
 onMounted(() => {
-  getProcedures()
-  getDiagnoses()
+  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 || {}
+
+    console.log('Mapping data:', data)
+    // Set state utk form
+  }
+}
+
 function handleClick(type: string) {
   if (type === 'prosedur') {
     isOpenProcedure.value = true
diff --git a/app/components/content/general-consent/list.vue b/app/components/content/general-consent/list.vue
index 588ff849..caba7f7c 100644
--- a/app/components/content/general-consent/list.vue
+++ b/app/components/content/general-consent/list.vue
@@ -28,7 +28,7 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/consultation.handler'
+} from '~/handlers/general-consent.handler'
 
 // Services
 import { getList, getDetail } from '~/services/general-consent.service'
@@ -42,8 +42,9 @@ interface Props {
 }
 const props = defineProps<Props>()
 const emits = defineEmits(['add', 'edit'])
+const router = useRouter()
+const route = useRoute()
 
-const { recordId } = useQueryCRUDRecordId()
 const { goToEntry, backToList } = useQueryCRUDMode('mode')
 
 let units = ref<{ value: string; label: string }[]>([])
@@ -93,6 +94,17 @@ const headerPrep: HeaderPrep = {
   },
 }
 
+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)
@@ -110,16 +122,13 @@ const getMyDetail = async (id: number | string) => {
 }
 
 // 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.showConfirmDelete:
-      isRecordConfirmationOpen.value = true
-      break
+watch(recId, () => {
+  console.log('recId', recId.value)
+  if (recAction.value === ActionEvents.showEdit) {
+    goEdit(recId.value)
+    return
+  } else {
+    isRecordConfirmationOpen.value = true
   }
 })
 

From f1307980ff5f83fab99418fcedf8937b11bdaa42 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 20 Nov 2025 00:35:25 +0700
Subject: [PATCH 34/40] =?UTF-8?q?=F0=9F=90=9B=20fix=20(general-consent):?=
 =?UTF-8?q?=20fix=20mapping=20data=20from=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/content/general-consent/form.vue | 15 +++++++++++----
 app/components/content/general-consent/list.vue |  1 -
 app/composables/useQueryCRUD.ts                 | 12 +++++++++++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/components/content/general-consent/form.vue b/app/components/content/general-consent/form.vue
index 8c15ceb0..e26dbac1 100644
--- a/app/components/content/general-consent/form.vue
+++ b/app/components/content/general-consent/form.vue
@@ -10,7 +10,8 @@ import { handleActionSave, handleActionEdit } from '~/handlers/general-consent.h
 import { create } from '~/services/generate-file.service'
 // Services
 import { getDetail } from '~/services/general-consent.service'
-const { backToList } = useQueryMode('mode')
+const { backToList } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
 
 const route = useRoute()
 const isOpenProcedure = ref(false)
@@ -74,8 +75,15 @@ const loadEntryForEdit = async (id: number) => {
   if (result?.success) {
     const data = result.body?.data || {}
 
-    console.log('Mapping data:', data)
-    // Set state utk form
+    const value = JSON.parse(data.value || '{}')
+    console.log('Mapping 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)
   }
 }
 
@@ -95,7 +103,6 @@ async function actionHandler(type: string) {
     return
   }
   if (type === 'print') {
-    console.log('print')
     isOpenDiagnose.value = true
     return
   }
diff --git a/app/components/content/general-consent/list.vue b/app/components/content/general-consent/list.vue
index caba7f7c..4cf269ee 100644
--- a/app/components/content/general-consent/list.vue
+++ b/app/components/content/general-consent/list.vue
@@ -89,7 +89,6 @@ const headerPrep: HeaderPrep = {
     icon: 'i-lucide-plus',
     onClick: () => {
       goToEntry()
-      emits('add')
     },
   },
 }
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 }
 }

From b379a9bc947cc9960c74fb745e38edc6701fe8ab Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 20 Nov 2025 13:04:27 +0700
Subject: [PATCH 35/40] =?UTF-8?q?=E2=9C=A8=20feat=20(general-consent):=20d?=
 =?UTF-8?q?isplay=20file=20url=20in=20diagnose=20dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/content/general-consent/form.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/content/general-consent/form.vue b/app/components/content/general-consent/form.vue
index e26dbac1..bfc21472 100644
--- a/app/components/content/general-consent/form.vue
+++ b/app/components/content/general-consent/form.vue
@@ -37,6 +37,7 @@ const model = ref({
   witness2: '',
 })
 
+const fileUrl = ref('')
 const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
@@ -76,7 +77,6 @@ const loadEntryForEdit = async (id: number) => {
     const data = result.body?.data || {}
 
     const value = JSON.parse(data.value || '{}')
-    console.log('Mapping data:', value)
     model.value.witness1 = value?.witness1 || ''
     model.value.witness2 = value?.witness2 || ''
     model.value.informant = value?.informant || ''
@@ -103,6 +103,9 @@ async function actionHandler(type: string) {
     return
   }
   if (type === 'print') {
+    const data = await getDetail(recordId.value)
+    const detail = data.body?.data
+    fileUrl.value = detail?.fileUrl
     isOpenDiagnose.value = true
     return
   }
@@ -173,8 +176,9 @@ provide('icdPreview', icdPreview)
     size="xl"
     prevent-outside
   >
-    <div class="my-2 flex justify-end py-2">
-      <ActionDialog @click="actionDialogHandler" />
-    </div>
+    <embed
+      style="width: 100%; height: 90vh"
+      :src="fileUrl"
+    />
   </Dialog>
 </template>

From 1f3ca6f19bc8befa098120292fe241986ce81cef Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 20 Nov 2025 13:43:19 +0700
Subject: [PATCH 36/40] =?UTF-8?q?=F0=9F=90=9B=20fix=20(general-consent):?=
 =?UTF-8?q?=20fix=20type=20error=20when=20create=20encounter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/content/general-consent/form.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/content/general-consent/form.vue b/app/components/content/general-consent/form.vue
index bfc21472..738adca1 100644
--- a/app/components/content/general-consent/form.vue
+++ b/app/components/content/general-consent/form.vue
@@ -132,10 +132,11 @@ async function actionHandler(type: string) {
     if (data) {
       const resp2 = await create({
         entityType_code: 'encounter',
-        ref_id: +data?.id,
+        ref_id: data?.id,
         type_code: 'general-consent',
       })
       console.log('resp2', resp2.body?.data)
+      backToList()
     }
   } else {
     console.log('Ada error di form', result)

From e47401577fe18e54af77333a2041930c27c745af Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 21 Nov 2025 10:04:48 +0700
Subject: [PATCH 37/40] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit b9f910cc5f75bf8198b295a367b8a6e881ea36de
Merge: ba3e70c 064f341
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Fri Nov 21 08:55:22 2025 +0700

    Merge pull request #177 from dikstub-rssa/feat/prescription

    Feat/prescription

commit 064f34177c89c0a1a5001610af21bd03e8f0d88a
Merge: 88d89f2 ba3e70c
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Nov 21 08:52:24 2025 +0700

    Merge branch 'dev' into feat/prescription

commit ba3e70c8546b7e55ae4d1b911fc3e43669f457c1
Merge: d75b32c d6c4a1e
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Fri Nov 21 08:46:33 2025 +0700

    Merge pull request #176 from dikstub-rssa/feat/device-order

    Feat/device order

commit d6c4a1ebb43a45f558a6dd84feb525a060e2ecba
Merge: a8a71d8 d75b32c
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Nov 21 08:42:09 2025 +0700

    Merge branch 'dev' into feat/device-order

commit d75b32cc0858b7a9bf02b179d43932d03600ae46
Merge: 79d8bfa 2e48f11
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Fri Nov 21 08:38:51 2025 +0700

    Merge pull request #172 from dikstub-rssa/feat/uploads-85-after-reset

    Fix: debug Uplaod Doc after reset

commit 2e48f11f9c52809424217f4238f2d79e27824074
Merge: c3f1f99 79d8bfa
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Nov 21 08:38:37 2025 +0700

    Merge branch 'dev' into feat/uploads-85-after-reset

commit 79d8bfa782f4ebd407dee568ed421262ba98a301
Merge: f375724 cffaa2b
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Fri Nov 21 08:19:55 2025 +0700

    Merge pull request #170 from dikstub-rssa/feat/medicine-form-167

    Feat/medicine form 167

commit cffaa2b855e0ee6c2b0b279c3d802e18bde434ae
Merge: ac5fd26 f375724
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Nov 21 08:17:43 2025 +0700

    Merge branch 'dev' into feat/medicine-form-167

commit f375724be1ca76f2855a51f594c600d9343a03d2
Merge: 2c07b9c 6780a65
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Fri Nov 21 07:43:22 2025 +0700

    Merge pull request #152 from dikstub-rssa/feat/general-consent-145

    ✨ feat (encounter): implement general consent feature

commit 6780a65f04eef9c6bd90f6fda7e35376ce885134
Merge: 1f3ca6f 2c07b9c
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Nov 21 07:43:08 2025 +0700

    Merge branch 'dev' into feat/general-consent-145

commit 2c07b9cde8b1679fbb8e2ab11c93e8d82209e4e4
Merge: baf6ab1 dab6adc
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Fri Nov 21 07:31:13 2025 +0700

    Merge pull request #148 from dikstub-rssa/feat/resume-81

    Feat: UI Rehab Medik - Resume

commit 1f3ca6f19bc8befa098120292fe241986ce81cef
Author: Abizrh <abizarah857@gmail.com>
Date:   Thu Nov 20 13:43:19 2025 +0700

    🐛 fix (general-consent): fix type error when create encounter

commit b379a9bc947cc9960c74fb745e38edc6701fe8ab
Author: Abizrh <abizarah857@gmail.com>
Date:   Thu Nov 20 13:04:27 2025 +0700

    ✨ feat (general-consent): display file url in diagnose dialog

commit f1307980ff5f83fab99418fcedf8937b11bdaa42
Author: Abizrh <abizarah857@gmail.com>
Date:   Thu Nov 20 00:35:25 2025 +0700

    🐛 fix (general-consent): fix mapping data from api

commit 0d821cbe3105684af7a0db5affd228defe66f75f
Author: Abizrh <abizarah857@gmail.com>
Date:   Thu Nov 20 00:13:44 2025 +0700

    ⚙️ chore (general-consent): adjust general consent list and form component

commit cf4f5574d3cbe2d5af30aa55744c9c94e733b9de
Author: Abizrh <abizarah857@gmail.com>
Date:   Wed Nov 19 23:46:21 2025 +0700

    ✨ feat (generate-file): add generate file schema

commit 6e34e175e79dd278e3d4f451360dec21f2516b96
Merge: e62ee1b baf6ab1
Author: Abizrh <abizarah857@gmail.com>
Date:   Wed Nov 19 23:12:38 2025 +0700

    Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/general-consent-145

commit a8a71d89785995b7133a71df4f6f7029667f60b6
Merge: bfbe72b baf6ab1
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 19 22:22:03 2025 +0700

    Merge branch 'dev' into feat/device-order

commit 88d89f2a2dc0ffaea09c9401189110d14df08b03
Merge: 512f8e8 391469e
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 19 22:21:36 2025 +0700

    Merge branch 'feat/prescription' of github.com:dikstub-rssa/simrs-fe into feat/prescription

commit 512f8e8c917b59ee2453cc7b3f873028c74a264b
Merge: f41a51d baf6ab1
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 19 22:19:45 2025 +0700

    Merge branch 'dev' into feat/prescription

commit baf6ab1fda61f59f966949a1886c2399ac9e7551
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Wed Nov 19 20:09:19 2025 +0700

    dev: hotfix, pubs
    + my-ui/confirmation/confirmation noTrueSlot from record-confirmation
    + my-ui/confirmation/confirmation additional message
    + my-ui/confirmation/record-confirmation  supplies noTrueSlot
    + my-ui/modal/modal text size
    + my-ui/doc-entry semicolon export

commit f41a51d9d0e75c7ee3e13f82250c8c5df025996f
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 19 10:58:26 2025 +0700

    feat/prescription: cleaning

commit c3f1f997b3b0d7aefd2c5cddda8d1f8d87816fef
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 19 10:22:12 2025 +0700

    Fix: refactor upload API url

commit bfbe72be94a6a20301ad88c50fc9fa6078bb5087
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 19 03:36:24 2025 +0700

    feat/device-order: final

commit 0a68dbf3a625fec9580310aca1d34ccf74ba2a31
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 18 15:31:04 2025 +0700

    Fix: debug after reset

commit ac5fd26399f9f35fe266886415d5de24a3d5b657
Merge: 94e4ead bcfb4c1
Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com>
Date:   Tue Nov 18 13:33:09 2025 +0700

    Merge branch 'dev' into feat/medicine-form-167

commit 94e4ead8fe13ad7dc518ad87d1f3f01620791d01
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 18 13:13:52 2025 +0700

    Fix: debug updaate medicine master

commit c98018bb4eaacbcd05763f404b40d3d4a27899dd
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 18 12:58:58 2025 +0700

    Squashed commit of the following:

    commit bcfb4c1456b7b58c63d4969985200ceca72aee16
    Merge: 1cbde57 975c87d
    Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
    Date:   Mon Nov 17 11:15:14 2025 +0700

        Merge pull request #147 from dikstub-rssa/feat/surat-kontrol-135

        Feat: Integration Rehab Medik - Surat Kontrol

    commit 975c87d99af0471f62111a455fa214abc1f2e998
    Merge: f582090 1cbde57
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Mon Nov 17 10:58:10 2025 +0700

        Merge branch 'dev' into feat/surat-kontrol-135

    commit f582090d18fe797e9f7e0e5b8559b1e413c7c921
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Thu Nov 13 11:56:21 2025 +0700

        Fix: Refactor surat kontrol

    commit a14c4a5d3c334d3ea7b9875feb5620991511d4f0
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Tue Nov 11 14:21:58 2025 +0700

        Fix: Refactor Surat Kontrol CRUD {id} to {code}

    commit 24313adef6bd3db52f23ace0675100bea1aaefad
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Fri Nov 7 10:35:46 2025 +0700

        Fix: debug back btn in add, edit, detail content page

    commit 59b44b5729161b3e7c014ea440f17bf98fd8b954
    Merge: 99a61a0 db15ec9
    Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com>
    Date:   Fri Nov 7 09:11:10 2025 +0700

        Merge branch 'dev' into feat/surat-kontrol-135

    commit 99a61a0bf2edf2f924d0424600e94a1d64901e48
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Thu Nov 6 08:06:01 2025 +0700

        Feat: add right & bottom label in input base component

    commit db48919325a9c3a7940cb208fee71c1d42ee9a8a
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Wed Nov 5 13:53:43 2025 +0700

        Feat: add banner in List if requirement not met

    commit bd57250f7e9bcaed8e11f6533435e3c788347286
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Wed Nov 5 13:26:48 2025 +0700

        Fix: refactor getDetail url param

    commit a361922e32f2e8a649edaedd9cec82131aff2793
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Wed Nov 5 13:19:07 2025 +0700

        Feat: Add & integrate add, edit, detail page

    commit 331f4a6b20194964d89eb1ada2d7661d8be8f76d
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Tue Nov 4 16:56:08 2025 +0700

        Feat: Integrate Control Letter

    commit 2275f4dc9991a1e51d0fba31748ff88c85d40bcf
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Mon Oct 27 14:01:58 2025 +0700

        Feat: add UI BPJS > Surat Kontrol

    commit 89e0e7a2c8a20ae31ca381d3320bd81755b73c34
    Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
    Date:   Mon Oct 27 10:21:59 2025 +0700

        Feat: add UI CRUD Surat Kontrol at Rehab Medik > kunjungan > Proses

commit dab6adc4a98820d8686c5a336172af586b883c24
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 18 11:19:48 2025 +0700

    Fix: add role authorization in Resume

commit c28fc8f7aa54048472b535ac7ccd916d5b0769c2
Merge: 7ed1cc8 bcfb4c1
Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com>
Date:   Tue Nov 18 09:02:16 2025 +0700

    Merge branch 'dev' into feat/resume-81

commit 7ed1cc83bfa62d8c9660ff1ee61b1f96661ef45a
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 15:04:01 2025 +0700

    Feat: add doc preview in Resume List

commit bcfb4c1456b7b58c63d4969985200ceca72aee16
Merge: 1cbde57 975c87d
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Mon Nov 17 11:15:14 2025 +0700

    Merge pull request #147 from dikstub-rssa/feat/surat-kontrol-135

    Feat: Integration Rehab Medik - Surat Kontrol

commit 975c87d99af0471f62111a455fa214abc1f2e998
Merge: f582090 1cbde57
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 10:58:10 2025 +0700

    Merge branch 'dev' into feat/surat-kontrol-135

commit 15ab43c1b143627892df2a9f82f418091b55ed7f
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 10:38:21 2025 +0700

    Feat: add verification capthca and form adjustment

commit dc0bcc36066591ee157ad4b6b0bd78b50164e174
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 09:26:29 2025 +0700

    Feat: integration Medicine Form

commit dfb2c305ca9cd8c01f0ec15c9dd3e2259a63f4e5
Merge: 1cbde57 d0aa69d
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 09:18:47 2025 +0700

    Merge remote-tracking branch 'origin/feat/uploads-85' into feat/medicine-form-167

commit 468c6a164fd9eb7446ca63ac91941b77fbd9c256
Merge: 7253272 1cbde57
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Nov 17 07:12:38 2025 +0700

    Merge branch 'dev' into feat/device-order

commit 20649c5917581b1cc92b77f327bfcfccd2ed07e4
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Nov 16 19:52:22 2025 +0700

    feat/prescription: finalize #1
    + integration
    + non mix entry

commit 0da8701a6c725e283a23c6ce69b52b30644bab74
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Nov 16 08:15:19 2025 +0700

    feat/prescription: added group and flat list

commit 7253272681411379b732340e1d84556c914d595d
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Nov 16 11:21:02 2025 +0700

    feat/device-order: adjustment wip

commit 391469e633de8b1e81736635dec8bcc50afa6da5
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Nov 16 08:15:19 2025 +0700

    feat/prescription: added group and flat list

commit b1dbae7928c66915f1cf2c56d286934e6fa17f65
Merge: b847886 1cbde57
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Nov 16 08:14:09 2025 +0700

    Merge branch 'dev' into feat/prescription

commit 1cbde57cf955ae8665e4649c6d5b4a4c0b68c830
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sun Nov 16 00:44:53 2025 +0700

    dev: hotfix

    comps/pub/myui
    + updated data/types
    + updated data-table
    + updated nav-header
    + added toggle

    comps/pub/ui
    + updated button
    + updated toggle

commit b847886601d04a378a8551e4304f59a17810f7dc
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Nov 15 22:40:23 2025 +0700

    feat/prescription: more adjustment

commit 83cdd070ed498a5fe6f63a3ee3e158e9f1246b66
Merge: 224bc7c ccabe01
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Nov 15 20:15:18 2025 +0700

    Merge branch 'dev' into feat/prescription

commit 224bc7cd610f4c09c62b3a1d1d2cf6d645e67a7d
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Nov 15 20:13:15 2025 +0700

    feat/prescription: integrated non-mix

commit ccabe0177b12182e794d71be101b78657bd9f48a
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Nov 14 16:39:21 2025 +0700

    dev: hotfix, added combobox objectsToItems

commit d0aa69d9a155abd09aaeb93c96e2808bddb54dfe
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 14 17:12:17 2025 +0700

    Fix: debug table typo Uplaod Doc

commit bb0017ffcb8ec0b0a53b01ffeba3e04d3a247995
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 14 15:47:11 2025 +0700

    Fix: refactor constList Uplaod Doc

commit 60c13649d9ccc0653136bfc41e70c3ab73278a80
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 14 14:55:32 2025 +0700

    Fix: debug Uplaod Doc

commit 1d03258f4403122fabf43148c739756191470971
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 14 14:08:47 2025 +0700

    Fix: Typo uplaod doc type

commit 56109564cb3c473172a86de167b7cce816a36973
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Thu Nov 13 16:16:26 2025 +0700

    Feat: API Integration supporting doc upload

commit cbe1883c9f12bd8cae1d7f96867c815039ceae74
Merge: 7f3fe81 0d97ba9
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Thu Nov 13 13:42:44 2025 +0700

    Merge branch 'dev' into feat/device-order-x

commit f582090d18fe797e9f7e0e5b8559b1e413c7c921
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Thu Nov 13 11:56:21 2025 +0700

    Fix: Refactor surat kontrol

commit 0d97ba9d25558ed784f4df43477773c41f7a004b
Merge: 02508b2 bb8df3d
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Thu Nov 13 11:52:23 2025 +0700

    Merge pull request #164 from dikstub-rssa/feeat/pendaftaran-kemoterapi-141

    Feat: Pendaftaran Kemoterapi

commit 16626a2feeb158319d2e8a5c4e6c01c8035640c7
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Thu Nov 13 11:49:28 2025 +0700

    feat/prescription: added submit

commit bb8df3d53aab0b5a2d858d9d41a6d8dab2d4b24d
Merge: a592a0b 02508b2
Author: riefive <rie.five@gmail.com>
Date:   Thu Nov 13 10:14:17 2025 +0700

    Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feeat/pendaftaran-kemoterapi-141

commit 02508b22de655d6046d1b6cb54deb14b8b2390cb
Merge: 6b933de 295bb81
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Thu Nov 13 07:56:31 2025 +0700

    Merge pull request #162 from dikstub-rssa/fe-prescription-56

    Fe prescription 56

commit 295bb8120f29ed51580db6d85c6bfbc22d49d2ba
Merge: 8462eba 6b933de
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Thu Nov 13 07:45:48 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 6b933de212779ecbd59fb115fe121f656a032339
Merge: f2e98fc 471c846
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:13:11 2025 +0700

    Merge pull request #156 from dikstub-rssa/feat/cp-lab-order-48

    Feat/cp lab order 48

commit f2e98fc732d895450f79cf45bb5b896daace980e
Merge: 2e899c6 9b281de
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:12:40 2025 +0700

    Merge pull request #158 from dikstub-rssa/feat/menu-structure

    Feat/menu structure

commit 471c846045a8488f09c0a30b55993076d13a3084
Merge: f676c8a 2e899c6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 07:11:46 2025 +0700

    Merge branch 'dev' into feat/cp-lab-order-48

commit 9b281de00bae69b619f1382ec8712c16650b4abb
Merge: 80383a5 2e899c6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 07:08:29 2025 +0700

    Merge branch 'dev' into feat/menu-structure

commit 2e899c602259a47da7f587c4936a69d1bb9c770b
Merge: 8effefb b7d4fcf
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:04:47 2025 +0700

    Merge pull request #157 from dikstub-rssa/feat/encounter-status-107

    Feat/encounter status 107

commit 8effefb5ad4e58dd502026c4f6be907163074410
Merge: 3f63f19 8e7f9b1
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Wed Nov 12 07:04:17 2025 +0700

    Merge pull request #155 from dikstub-rssa/feat/radiology-order-54

    Feat/radiology order 54

commit 80383a5f0a23144814b32be675969e19399c0ae2
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:52:31 2025 +0700

    feat/menu-structure: adjust page rehab

commit 93c9e74d081549df3a3602c29a9c4f3dc7ac7e3e
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:52:14 2025 +0700

    feat/menu-structure: adjust menu items all roles

commit f0d2bc4de1fbc418014857e798573c718f624f39
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:51:37 2025 +0700

    feat/menu-structure: update access control

commit 02c14089f100dadfc2259d288ed663d35950bf5d
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 12 06:51:03 2025 +0700

    feat/menu-structure: update role switcher

commit a14c4a5d3c334d3ea7b9875feb5620991511d4f0
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 11 14:21:58 2025 +0700

    Fix: Refactor Surat Kontrol CRUD {id} to {code}

commit e9e0e21d1b7ac2a1bd24706514ea04673fe5fb46
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Nov 11 12:30:43 2025 +0700

    feat/menu-structure: wip

commit e62ee1b37e8b37f03ea8cd873263765544ff7c8a
Author: Abizrh <abizarah857@gmail.com>
Date:   Tue Nov 11 08:57:49 2025 +0700

    ✨ feat (encounter): implement general consent feature

commit 8e7f9b19e38cb70110f11878f3f5cd39d25fff13
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Mon Nov 10 23:17:49 2025 +0700

    feat/radiology-order-54: upgraded mcu-order/list

commit b2a512314b397f73ba9f3078960831dd99818526
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 7 14:02:54 2025 +0700

    Feat: UI uplaod doc pendukung

commit 24313adef6bd3db52f23ace0675100bea1aaefad
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 7 10:35:46 2025 +0700

    Fix: debug back btn in add, edit, detail content page

commit 59b44b5729161b3e7c014ea440f17bf98fd8b954
Merge: 99a61a0 db15ec9
Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com>
Date:   Fri Nov 7 09:11:10 2025 +0700

    Merge branch 'dev' into feat/surat-kontrol-135

commit 53bd8e7f6e2b22b03690947f52b42744a17703ee
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Fri Nov 7 08:55:23 2025 +0700

    Fix: refactor rehab medik - Resume UI

commit 99a61a0bf2edf2f924d0424600e94a1d64901e48
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Thu Nov 6 08:06:01 2025 +0700

    Feat: add right & bottom label in input base component

commit 8462eba94b22f73e8a9ef10b8afaac6168246310
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Nov 5 21:23:04 2025 +0700

    feat/prescription-56: wip

commit db48919325a9c3a7940cb208fee71c1d42ee9a8a
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:53:43 2025 +0700

    Feat: add banner in List if requirement not met

commit bd57250f7e9bcaed8e11f6533435e3c788347286
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:26:48 2025 +0700

    Fix: refactor getDetail url param

commit a361922e32f2e8a649edaedd9cec82131aff2793
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 5 13:19:07 2025 +0700

    Feat: Add & integrate add, edit, detail page

commit 331f4a6b20194964d89eb1ada2d7661d8be8f76d
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 4 16:56:08 2025 +0700

    Feat: Integrate Control Letter

commit a592a0be367f571d11f0a51619d22c0b00c56d51
Author: riefive <rie.five@gmail.com>
Date:   Tue Nov 4 15:15:38 2025 +0700

    feat(cemo): add home encounter

commit be0a761170afd9cbbb1f163bbe9ed6520b71816e
Author: riefive <rie.five@gmail.com>
Date:   Tue Nov 4 13:23:52 2025 +0700

    feat(cemo): change flow admin

commit 64fe2524fbdb2279e9df651cadaa110dc4aa8896
Author: riefive <rie.five@gmail.com>
Date:   Tue Nov 4 12:02:31 2025 +0700

    feat(cemo): enhance admin mode functionality and update series handling

commit fb7731188d249dc0f02ba276e034a1030a686b5d
Author: riefive <rie.five@gmail.com>
Date:   Mon Nov 3 15:52:35 2025 +0700

    feat(cemo): add mode adm + series

commit 89b2fb9cd95a0e60efaa139ee6efcf7ebe00a61e
Author: riefive <rie.five@gmail.com>
Date:   Mon Nov 3 15:03:56 2025 +0700

    feat(chemo): add page process and modify components

commit f676c8a4b98c037965328cbde25a523942387f53
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Nov 3 08:11:02 2025 +0700

    feat/cp-lab-order-48: wip

commit 69ffe6bd494739961dda1bbea412551bca050832
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:35:39 2025 +0700

    feat/radiology-order: added the page

commit d1369d513bf5781a03e39c51786f8485338f6e0f
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 16:08:22 2025 +0700

    feat(cemo): add list verification

commit a9ab75fd984945703f3ef7dff990811361c54696
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:35:05 2025 +0700

    feat/readiology-order: added mcu

commit 71d68e5a0ee084b586be48ddf4035735647f2f34
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 14:49:21 2025 +0700

    feat(cemo): add dialog verification and list register

commit f8d906b6c2077db0d3925b1cc4c47d026ccf9dd0
Merge: 66872c9 5f9e441
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:48:21 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 40d78a999a13c249997de573cd72864c68b219e9
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 31 14:35:05 2025 +0700

    feat/readiology-order: added mcu

commit b3502df0f8f4b0a75a95828f425bdb6edabdbf61
Merge: 831749a 7119f67
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 13:12:11 2025 +0700

    Merge branch 'feat/fe-kemoterapi' into feeat/pendaftaran-kemoterapi-141

commit 7119f67402b5261226257b3aa6e193d516f33041
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 31 13:09:59 2025 +0700

    feat(cemo): modify schema

commit 66872c95f8949b98e7f14cc10736c7d62e0e3b1e
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Oct 31 07:56:36 2025 +0700

    feat/prescription-56: wip

commit 45cc019ec1f37583e5e950a45a095c74ff099538
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 30 15:43:50 2025 +0700

    feat(cemo): layouting form

commit e866c0cf2ae2c3daf1b508e31b9b0ad8a28cfa69
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 30 14:41:52 2025 +0700

    feat(cemo): layouting protocol

commit dc4edc1dc0053f350cdf8ad82c4c816099285671
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 29 15:58:52 2025 +0700

    feat(cemo): show list cemo

commit 323485347300abee84439e5956815cc2dafc5cf9
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 29 15:39:55 2025 +0700

    feat(cemo): add list of cemo

commit fc308809b848512a664659a51475e634e08f06f4
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Oct 29 14:57:19 2025 +0700

    Feat: add UI Rehab Medik > Proses > Resume

commit 9b383a543703f9331a7ff90d81abe16717a39884
Merge: a4dc7d7 831749a
Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com>
Date:   Wed Oct 29 13:32:47 2025 +0700

    Merge pull request #139 from dikstub-rssa/dev

    Update branch feat/resume-81

commit 67ee129f4b5fdb4c75340adc0d1841d2dfdc39fc
Merge: 9919b4b 9e82d17
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 28 16:20:17 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 2275f4dc9991a1e51d0fba31748ff88c85d40bcf
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Oct 27 14:01:58 2025 +0700

    Feat: add UI BPJS > Surat Kontrol

commit 89e0e7a2c8a20ae31ca381d3320bd81755b73c34
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Oct 27 10:21:59 2025 +0700

    Feat: add UI CRUD Surat Kontrol at Rehab Medik > kunjungan > Proses

commit 9919b4b8960d5e3d661d818a887b823b50713d2e
Merge: 19a43bd e93e72a
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 15:36:29 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit b7d4fcf9391f0b94183fab5826d635124c272a32
Merge: eaac4aa e93e72a
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 15:31:30 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 19a43bd2918d62e4f24fa189e1500e9affe6fe11
Merge: d90e400 3558672
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 05:02:57 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit eaac4aab852e27ca515b9340146ddb200e230934
Merge: 72e8d43 3558672
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 25 05:01:45 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit d90e40043c9c2f5d8ea963b64b1bb5f233f2d11a
Merge: 0c9f9de b90f0c1
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 24 12:40:59 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 0c9f9deb7e3220410a3bbec863c4cff0c1deedbe
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 24 12:38:02 2025 +0700

    fe-prescription-56: wip

commit 729474a2a0bc8a5e8d346672110dcb7982369636
Merge: 7159bd6 ddd35d6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Thu Oct 23 14:16:52 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 7f3fe813c547c6fdc58a0194827aca885d49a344
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Thu Oct 23 14:09:01 2025 +0700

    feat/device-order: wip

commit 72e8d431d6f4fa56fdb30b2dd3370792fb02a277
Merge: 3f77d92 2a9b78a
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Oct 22 07:17:41 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 1b1fac769596ea420b15805c87a934b012f02059
Merge: 0b44206 27ab7c2
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Oct 22 04:28:31 2025 +0700

    Merge branch 'dev' into feat/device-order-x

commit 3f77d927b62827433d8a41be02be1bbe11a7c56c
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 21 22:48:34 2025 +0700

    feat/encounter: done

commit d8c861d60ceb402edbbf37d86ab154d25a5242a6
Merge: 6bdee66 27ab7c2
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 21 00:15:01 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 0b4420620d2ffdbe6c7a6be7a7304ef6405d8b1a
Merge: 39af605 02b2b76
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 20 13:35:00 2025 +0700

    Merge branch 'dev' into feat/device-order-58

commit 02b2b7657c1365c3b03efcbce95bd99e04db313b
Merge: 7ddb14a e1942d1
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 20 11:24:54 2025 +0700

    Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into dev

commit 39af6052e729186ae9eae74d435352c178873110
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 20 11:22:54 2025 +0700

    feat/device-order-58: wip

commit 7ddb14accc1fa640ab5a728fb8d7d0dbc1dce38f
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Mon Oct 13 16:38:23 2025 +0700

    dev: hotfix, added userQueryCRUD

commit 7159bd6566d21ffc74d9c1e725cd3041e1d05e0d
Merge: ccc9b0b be5768b
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 07:45:15 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit ccc9b0bda38150a319ee1160233325a0c821b6e6
Merge: f94ccd7 cad7ac6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 06:29:03 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 6bdee66cc6fa8d05315eea10c6a034680f0b8049
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 06:26:30 2025 +0700

    feat/encounter: wip

commit f7c53fc4e517b24a98f6b6e4283fe6bf51d1fcf7
Merge: a7c7ef6 cad7ac6
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 13 06:24:45 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit a7c7ef6dd8b411597edcda168677c1f980693c8d
Merge: 89b051b f52e516
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 13:27:06 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 89b051b883dbd4a647dc4a516ea94c78264bbe1f
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 13:18:46 2025 +0700

    feat/encounter-status-107: wip

commit 743c38804ae3b38bee3c99c0b9c404d6bd618a1a
Merge: d6d60e3 f7b66d2
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 11:53:03 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit d6d60e38d06ebf0e52264279b30c167e424e8a45
Merge: 9530cdd 18e00bf
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 11:49:49 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 18e00bf89aaedd7a4211ef9cc3dee975bc87d3db
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sun Oct 12 11:40:53 2025 +0700

    dev: hotfix, text-size standardization

commit 9530cdd4f9659c3133282a94882147628e34e96a
Merge: 0820cb6 0d1e469
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Oct 12 11:41:49 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 0d1e469ece38471ed5496f0d424473cac643461b
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sun Oct 12 11:40:53 2025 +0700

    dev: hotfix, text-size standardization

commit 0820cb653c6b450f9412dab32ffa8bab4e62845c
Merge: fff1ce0 867c1b4
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 11 00:38:10 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit fff1ce0eb75c8dd98640b6eef98c9292efb5bfd9
Merge: 1a3edd5 3a4b2aa
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sat Oct 11 00:35:16 2025 +0700

    Merge branch 'dev' into feat/encounter-status-107

commit 3a4b2aa6fb940b9d29bc1d6743f09e7302764c7e
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Sat Oct 11 00:25:44 2025 +0700

    dev: hotfix, moved combobox and datepicker

commit 1a3edd5a1ec40cd33d534da3c6dc7f7fc5a74e08
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Fri Oct 10 23:58:44 2025 +0700

    dev: hotfix, moved combobox and datepicker

commit f94ccd707bfc59d1a1d2aeeffb11c833531fdf71
Merge: 0647675 51d1221
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Wed Oct 8 08:00:01 2025 +0700

    Merge branch 'feat/consultation-82' into fe-prescription-56

commit 06476756fb7160854de95c6b6ef499c4940f5736
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Wed Oct 8 07:58:48 2025 +0700

    fe-prescription-56: wip

commit fdbcfed87ffcc69ec7448977c4abb68d9800c96a
Merge: 4da896a bd66a88
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Tue Oct 7 03:10:19 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit bd66a8887d6523457a02de7d74aa804b009ec236
Merge: 19e00fa ba61d05
Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com>
Date:   Tue Oct 7 03:07:46 2025 +0700

    Merge pull request #103 from dikstub-rssa/feat/fe-integrasi-org-src-72

    Feat - Integrasi Org Src

commit ba61d05257ea729e3bee9dd30e6fc2e1c2a8b55b
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 12:42:08 2025 +0700

    fix: adjustment division app + flow

commit 8601d4a4fd50f5a71060145dc648b0509f72e734
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 11:07:05 2025 +0700

    fix: remove shared handlers

commit fff5f2c11d9d7a78e0d56cc159e89984a621a19b
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 11:06:29 2025 +0700

    fix: update content list of specialist, subspecialist, etc

commit 301cb8280397fa76937411c074e997a39c95184d
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 11:00:14 2025 +0700

    fix: update list medicine

commit 3003ec9d80e0d63e7515aaeb6e574fba1576a8f9
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:45:15 2025 +0700

    fix: update list division + equipment

commit d1bcd6e66c81a3b1d9d0dc96fa269b0eaead9b96
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:38:10 2025 +0700

    fix: update some service

commit 78ae8a8aa05da80440f66e608f9658567a32d16e
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:26:25 2025 +0700

    fix: medicine method and group

commit 8eaf95dd3e7bc150ff35f424875ceb95623e29fb
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:20:05 2025 +0700

    fix: update service for unit and uom

commit 58c0dde377fb29a91e9e74735123229b6d40c035
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:14:51 2025 +0700

    fix: update handler for unit and uom

commit fe23c75aca2905c9de2707690eef9a0487b4bb98
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 10:09:24 2025 +0700

    fix: update some service and handlers

commit 4da896a242f6878ebb514657b09a67eabb2775d2
Merge: 285c3ee 19e00fa
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 09:55:24 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit ecdc5d80d902bf7dfbfd7a83c23d6cb1b978d094
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 09:51:31 2025 +0700

    fix: update device service and handler

commit 45ea70d415728f166805cf3ca3a53c1518246d1d
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 09:44:48 2025 +0700

    fix: update crud base

commit 51ddb9d8b59e60f99e5c1d2cac91870423597263
Merge: 42a54bb 19e00fa
Author: riefive <rie.five@gmail.com>
Date:   Mon Oct 6 09:40:22 2025 +0700

    fix: resolve conflict

commit 19e00fa1438a1d6f32ee5095e9ee9bfc7af738c4
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Mon Oct 6 08:26:08 2025 +0700

    dev: hotfix, moved encounter to pub/component

commit 285c3ee4e5a419dad03110f03920d8f3bbfb5fed
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 07:56:29 2025 +0700

    Merged Stash

commit 421159971e0e1adad3e564519ff86fa2169a1f45
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 04:41:21 2025 +0700

    feat/prescription-56: wip

commit 3a45de413dda04dc984f06ffdd06cc128a1c1ab8
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 04:31:08 2025 +0700

    Merge from Stash

commit e959c3ae610b670456d17ad2557a1c3a9322618e
Merge: 32c69af ad4695c
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Oct 6 04:21:06 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit ad4695c8671afd3c8d29c693bfe4ecf05ca087b8
Author: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date:   Mon Oct 6 04:18:55 2025 +0700

    dev: hotfix, encounter content back nav

commit 42a54bbb3bf4b2a77ab8bd577705d15e8ef1345b
Merge: a7cbbee 55559a4
Author: riefive <rie.five@gmail.com>
Date:   Sat Oct 4 09:07:03 2025 +0700

    fix: solve conflict after pull

commit a7cbbeeda9c3581d99e8cb2cb22e0387bd56994b
Author: riefive <rie.five@gmail.com>
Date:   Sat Oct 4 09:05:28 2025 +0700

    feat(division): fixing logic treeview

commit 71e0615ee11527b185c9dea1c479ad9a28b5409f
Author: riefive <rie.five@gmail.com>
Date:   Sat Oct 4 08:49:38 2025 +0700

    feat(division): restructure division parent

commit f02903e7568e6646ad9eb8b176dc88e89d66513c
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 15:00:10 2025 +0700

    feat(division): change parent id to number before integrate

commit 2e8667a780290cb45d7e32dd97f28baa5899fcc8
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 14:47:02 2025 +0700

    feat(division): parent id to default null

commit e65e562690ef4288efbc1aa3a098804ac222f9ec
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 12:45:05 2025 +0700

    feat(division): change form attribute

commit 9407501c49d0befa1db943ff9938213b16df328c
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 11:03:19 2025 +0700

    feat(division): change compoent combobox to tree select

commit c5ba07a226a96a44b6cf9726c7a1b6da9643a2d0
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 10:54:35 2025 +0700

    feat(division): create tree item converter for division

commit 8e7ce771b04f55f4efba39577c2783203048bccb
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 15:31:27 2025 +0700

    test: call division position

commit 7edab334279be1a387a2baf6c1446fcdb309c211
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:49:55 2025 +0700

    fix: handler reset state

commit ce59eac86c428ba2a1ba892fc510023ccf59058c
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:37:17 2025 +0700

    fix: list unit

commit 39d2869ffb9e0a39a1108fc7278b67881aea31ce
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:34:19 2025 +0700

    fix: list with params error

commit 3c046a4d822aa7c27dc9bd0dd912bd5b66dad43c
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:12:10 2025 +0700

    fix: list integration

commit 6feb480a516a25fa1bd19ffd248bafbb9c3ad101
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:16:23 2025 +0700

    fix: change get encounter class to constants

commit d7d984810e87cecaeccab54845757d27d024e3c7
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:00:05 2025 +0700

    remove previous list + form from any features

commit a6377ef9432c366d3ff8e0a73a9c1e5735867f42
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:24:54 2025 +0700

    fix: includes for unit

commit b00b9b198e302b42b7a6df8f43565e9b91d3f7d5
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:17:31 2025 +0700

    fix: includes for medicine list

commit 4908f167704f72ca7e6d5112c9c2826a5164f7aa
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:56:11 2025 +0700

    fix: search on list file

commit 41405ae113028e36c20f6997bf5e24da455ee53d
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:36:48 2025 +0700

    fix: resolve list organization source

commit 6b69e48bd64a937e1e7cf76e7a370f2d2639aeb5
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:05:36 2025 +0700

    feat(installation): add encounter list

commit 59847dce34b9cb230cdfe19151a2f7f31760282c
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:01:24 2025 +0700

    chore: add shared handlers

commit e78342829e4b3d047c93d4be06d7852e77569c78
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 12:38:04 2025 +0700

    feat(installation): integrate api installation

commit 55559a4683f0e7781ca3db5b05bfb18dcfbd6d1b
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 15:00:10 2025 +0700

    feat(division): change parent id to number before integrate

commit 2d8c751788a0364469a921e663aad34d2c0d6c1a
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 14:47:02 2025 +0700

    feat(division): parent id to default null

commit f374f9ef5b1d4d0094e658d83271508f26a5ea71
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 12:45:05 2025 +0700

    feat(division): change form attribute

commit 1837afce6cc7799d64e568bc56afea97698ee308
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 11:03:19 2025 +0700

    feat(division): change compoent combobox to tree select

commit 539a1cefb00ec66eb5db722f01515aa658bc9fa8
Author: riefive <rie.five@gmail.com>
Date:   Fri Oct 3 10:54:35 2025 +0700

    feat(division): create tree item converter for division

commit 32c69af4e1c01ef4cef71cea9418fd7e8ec4eec8
Merge: 0752855 10bbee9
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Fri Oct 3 06:05:35 2025 +0700

    Merge branch 'feat/layout-cleaning' into fe-prescription-56

commit 757b8c044430082bdadc2ebc9a76c6a80fa1cbd3
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 15:31:27 2025 +0700

    test: call division position

commit 378e6773b8009b3a203ad2c2618353d9004a58d1
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:49:55 2025 +0700

    fix: handler reset state

commit 0e115eed5ecc49c55af8820d0080dd5d1d5f5c04
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:37:17 2025 +0700

    fix: list unit

commit d544d031c3829195fda94eaaa60a6598a729adce
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:34:19 2025 +0700

    fix: list with params error

commit 693d8225bf34a2f2a1ef458940de6c2623708c2d
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 14:12:10 2025 +0700

    fix: list integration

commit 0752855808492e93e1ff3107a3be52c8037a3faf
Merge: f83dbfe c0557cc
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Thu Oct 2 12:46:54 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit fc3bda14f43bd012215a69916c77f2704cd4d237
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:16:23 2025 +0700

    fix: change get encounter class to constants

commit 9603915fd7cd57bfc23baf5af1127621b8b98d18
Author: riefive <rie.five@gmail.com>
Date:   Thu Oct 2 11:00:05 2025 +0700

    remove previous list + form from any features

commit 546423bdfb665a0b78ce9a15115fc309aecce274
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:24:54 2025 +0700

    fix: includes for unit

commit db48233f6c9d7c4652e4892af72529a9551040f3
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 15:17:31 2025 +0700

    fix: includes for medicine list

commit 54a5aaa78ff653c1ba0ba73fa76cf6dcf88004c9
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:56:11 2025 +0700

    fix: search on list file

commit cc41118570c5602f79385b5f07d0e9d51ff60cb5
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 14:36:48 2025 +0700

    fix: resolve list organization source

commit 6a7a9cda80943cc8e8d4159b65f36d38e1193838
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:05:36 2025 +0700

    feat(installation): add encounter list

commit c96d7383793c1de8775badf861df39758d878cef
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 13:01:24 2025 +0700

    chore: add shared handlers

commit a48f375018b0a48615b4aa321b434c660ac07291
Author: riefive <rie.five@gmail.com>
Date:   Wed Oct 1 12:38:04 2025 +0700

    feat(installation): integrate api installation

commit f83dbfeae3f449c40d7eadea34c74e64f7a0e35c
Merge: ba77ed1 f29eb38
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Wed Oct 1 04:02:05 2025 +0700

    Merge branch 'feat/layout-cleaning' into fe-prescription-56

commit ba77ed1bb560730be50848950379242d85839020
Merge: 4fbd8ee 97d36f1
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Mon Sep 29 08:27:01 2025 +0700

    Merge branch 'dev' into fe-prescription-56

commit 4fbd8ee75715073afe58d5f33611b464c458a387
Author: Andrian Roshandy <andrianovsky95@gmail.com>
Date:   Sun Sep 28 07:10:32 2025 +0700

    feat/prescription-56: merapikan models
---
 app/assets/svg/wavey-fingerprint.svg          |   1 +
 .../app/device-order-item/entry-form.vue      |  73 +++
 .../device-order-item/list-entry.config.ts    |  35 +-
 .../app/device-order-item/list-entry.vue      |  16 +-
 .../app/device-order/confirmation-info.vue    |  26 +
 .../app/device-order/entry-form.vue           |  21 +-
 .../app/device-order/list.config.ts           |  75 ++-
 app/components/app/device-order/list.vue      |   8 +-
 .../_common/select-doc-type.vue               |  71 +++
 .../app/document-upload/entry-form.vue        |  73 +++
 .../app/document-upload/list.cfg.ts           |  43 ++
 app/components/app/document-upload/list.vue   |  31 ++
 app/components/app/general-consent/entry.vue  | 214 ++++++++
 .../app/general-consent/list.cfg.ts           |  82 +++
 app/components/app/general-consent/list.vue   |  34 ++
 .../app/medicine-form/entry-form.vue          | 119 +++++
 app/components/app/medicine-form/list-cfg.ts  |  38 ++
 app/components/app/medicine-form/list.vue     |  35 ++
 app/components/app/medicine/entry-form.vue    |  20 +
 app/components/app/medicine/list-cfg.ts       |   6 +-
 .../app/prescription-item/list-entry.cfg.ts   |  18 +-
 .../app/prescription-item/list.cfg.ts         |   3 +-
 app/components/app/prescription-item/list.vue |   4 +-
 .../app/prescription-item/mix-entry.vue       |  76 ++-
 .../app/prescription-item/non-mix-entry.vue   |  63 ++-
 app/components/app/prescription/detail.vue    |   2 +-
 app/components/app/prescription/entry.vue     |  24 +-
 app/components/app/prescription/flat-list.vue |  86 ++++
 .../{list.vue => grouped-list.vue}            |   3 +-
 .../app/prescription/list-with-sub.vue        |  60 ++-
 .../app/resume/_common/print-btn.vue          |  22 +
 .../app/resume/_common/select-arrangement.vue |  70 +++
 .../resume/_common/select-concious-level.vue  |  70 +++
 .../app/resume/_common/select-date.vue        | 121 +++++
 .../app/resume/_common/select-death-cause.vue |  71 +++
 .../app/resume/_common/select-faskes.vue      |  70 +++
 .../_common/select-following-arrangement.vue  |  70 +++
 .../select-hospital-leave-condition.vue       |  70 +++
 .../_common/select-hospital-leave-method.vue  |  70 +++
 .../app/resume/_common/select-icd-10.vue      |  70 +++
 .../app/resume/_common/select-icd-9.vue       |  70 +++
 ...select-national-program-service-status.vue |  70 +++
 .../select-national-program-service.vue       |  70 +++
 .../app/resume/_common/select-pain-scale.vue  |  70 +++
 .../_common/select-primary-diagnosis.vue      |  70 +++
 .../_common/select-secondary-diagnosis.vue    |  71 +++
 .../app/resume/_common/verify-badge.vue       |  67 +++
 app/components/app/resume/add.vue             | 482 ++++++++++++++++++
 .../history-list/action-history-dialog.vue    |  66 +++
 .../resume/history-list/action-list.cfg.ts    |  94 ++++
 .../consultation-history-dialog.vue           |  66 +++
 .../history-list/consultation-list.cfg.ts     |  51 ++
 .../history-list/farmacy-history-dialog.vue   |  66 +++
 .../resume/history-list/farmacy-list.cfg.ts   |  39 ++
 .../national-program-history-dialog.vue       |  65 +++
 .../history-list/national-program-list.cfg.ts |  30 ++
 .../supporting-history-dialog.vue             |  66 +++
 .../history-list/supporting-list.cfg.ts       |  39 ++
 app/components/app/resume/list.cfg.ts         | 101 ++++
 app/components/app/resume/list.vue            |  31 ++
 app/components/app/resume/verify-dialog.vue   |  98 ++++
 app/components/content/device-order/entry.vue | 239 ++++++++-
 app/components/content/device-order/list.vue  | 178 ++++---
 app/components/content/device-order/main.vue  |  10 +-
 .../content/document-upload/add.vue           | 128 +++++
 .../content/document-upload/edit.vue          | 134 +++++
 .../content/document-upload/list.vue          | 183 +++++++
 app/components/content/encounter/process.vue  |  36 +-
 app/components/content/equipment/list.vue     |   5 +-
 .../content/general-consent/entry.vue         |  36 ++
 .../content/general-consent/form.vue          | 185 +++++++
 .../content/general-consent/list.vue          | 179 +++++++
 app/components/content/medicine-form/list.vue | 193 +++++++
 .../content/medicine-group/list.vue           |   5 +-
 .../content/medicine-method/list.vue          |   5 +-
 app/components/content/medicine/list.vue      |  11 +-
 app/components/content/prescription/entry.vue | 340 ++++++++++--
 app/components/content/prescription/list.vue  | 170 +++---
 app/components/content/resume/add.vue         | 200 ++++++++
 app/components/content/resume/list.vue        | 215 ++++++++
 app/components/content/tools/list.vue         |   4 +-
 .../pub/my-ui/confirmation/confirmation.vue   |  16 +-
 .../confirmation/record-confirmation.vue      |  22 +-
 .../pub/my-ui/data-table/data-table.vue       |   4 +-
 .../pub/my-ui/data/dropdown-action-dd.vue     |  80 +++
 .../pub/my-ui/data/dropdown-action-dsd.vue    |  95 ++++
 .../pub/my-ui/data/dropdown-action-dud.vue    |  11 +-
 .../pub/my-ui/data/dropdown-action-dvvp.vue   | 103 ++++
 app/components/pub/my-ui/data/types.ts        |   4 +
 app/components/pub/my-ui/doc-entry/block.vue  |   2 +-
 app/components/pub/my-ui/doc-entry/index.ts   |   1 +
 app/components/pub/my-ui/form/file-field.vue  |   2 +-
 app/components/pub/my-ui/form/input-base.vue  |   6 +-
 .../pub/my-ui/form/text-area-input.vue        |  86 ++++
 .../pub/my-ui/form/text-captcha.vue           | 175 +++++++
 app/components/pub/my-ui/modal/dialog.vue     |   6 +-
 .../pub/my-ui/modal/doc-preview-dialog.vue    |  29 ++
 .../pub/my-ui/nav-footer/ba-dr-su.vue         |   6 +-
 app/composables/useQueryCRUD.ts               |  12 +-
 app/composables/useRBAC.ts                    |  17 +
 app/handlers/device-order.handler.ts          |   5 +-
 app/handlers/general-consent.handler.ts       |  24 +
 app/handlers/medicine-form.handler.ts         |  21 +
 app/handlers/prescription.handler.ts          |   2 +-
 app/handlers/supporting-document.handler.ts   |  24 +
 app/lib/constants.ts                          |  42 ++
 app/lib/utils.ts                              |  57 +++
 app/models/device-order-item.ts               |  11 +-
 app/models/device-order.ts                    |  10 +-
 app/models/encounter-document.ts              |  29 ++
 app/models/encounter.ts                       |   5 +-
 app/models/general-consent.ts                 |  49 ++
 app/models/medicine-form.ts                   |  38 ++
 app/models/medicine.ts                        |  11 +-
 app/models/medicinemix-item.ts                |   4 +-
 app/models/prescription-item.ts               |  29 +-
 .../encounter/[id]/control-letter/add.vue     |   9 +-
 .../document-upload/[document_id]/edit.vue    |  41 ++
 .../encounter/[id]/document-upload/add.vue    |  42 ++
 .../rehab/encounter/[id]/process.vue          |   6 +-
 .../(features)/rehab/encounter/index.vue      |   6 +-
 app/pages/(features)/resume/add.vue           |  41 ++
 .../medicine-form/index.vue                   |  38 ++
 .../tools-equipment-src/medicine/index.vue    |   8 +-
 app/schemas/_generate-file.ts                 |   5 +
 app/schemas/document-upload.schema.ts         |  25 +
 app/schemas/general-consent.schema.ts         |  16 +
 app/schemas/medicine.schema.ts                |   1 +
 app/schemas/resume.schema.ts                  |  76 +++
 app/schemas/verification.schema.ts            |  19 +
 app/services/device-order-item.service.ts     |   1 -
 app/services/device-order.service.ts          |  17 +-
 app/services/general-consent.service.ts       |  23 +
 app/services/generate-file.service.ts         |  15 +
 app/services/medicine-form.service.ts         |  41 ++
 app/services/prescription.service.ts          |  14 +
 app/services/supporting-document.service.ts   |  56 ++
 public/side-menu-items/system.json            |   4 +
 138 files changed, 7378 insertions(+), 466 deletions(-)
 create mode 100644 app/assets/svg/wavey-fingerprint.svg
 create mode 100644 app/components/app/device-order-item/entry-form.vue
 create mode 100644 app/components/app/device-order/confirmation-info.vue
 create mode 100644 app/components/app/document-upload/_common/select-doc-type.vue
 create mode 100644 app/components/app/document-upload/entry-form.vue
 create mode 100644 app/components/app/document-upload/list.cfg.ts
 create mode 100644 app/components/app/document-upload/list.vue
 create mode 100644 app/components/app/general-consent/entry.vue
 create mode 100644 app/components/app/general-consent/list.cfg.ts
 create mode 100644 app/components/app/general-consent/list.vue
 create mode 100644 app/components/app/medicine-form/entry-form.vue
 create mode 100644 app/components/app/medicine-form/list-cfg.ts
 create mode 100644 app/components/app/medicine-form/list.vue
 create mode 100644 app/components/app/prescription/flat-list.vue
 rename app/components/app/prescription/{list.vue => grouped-list.vue} (95%)
 create mode 100644 app/components/app/resume/_common/print-btn.vue
 create mode 100644 app/components/app/resume/_common/select-arrangement.vue
 create mode 100644 app/components/app/resume/_common/select-concious-level.vue
 create mode 100644 app/components/app/resume/_common/select-date.vue
 create mode 100644 app/components/app/resume/_common/select-death-cause.vue
 create mode 100644 app/components/app/resume/_common/select-faskes.vue
 create mode 100644 app/components/app/resume/_common/select-following-arrangement.vue
 create mode 100644 app/components/app/resume/_common/select-hospital-leave-condition.vue
 create mode 100644 app/components/app/resume/_common/select-hospital-leave-method.vue
 create mode 100644 app/components/app/resume/_common/select-icd-10.vue
 create mode 100644 app/components/app/resume/_common/select-icd-9.vue
 create mode 100644 app/components/app/resume/_common/select-national-program-service-status.vue
 create mode 100644 app/components/app/resume/_common/select-national-program-service.vue
 create mode 100644 app/components/app/resume/_common/select-pain-scale.vue
 create mode 100644 app/components/app/resume/_common/select-primary-diagnosis.vue
 create mode 100644 app/components/app/resume/_common/select-secondary-diagnosis.vue
 create mode 100644 app/components/app/resume/_common/verify-badge.vue
 create mode 100644 app/components/app/resume/add.vue
 create mode 100644 app/components/app/resume/history-list/action-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/action-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/consultation-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/consultation-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/farmacy-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/farmacy-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/national-program-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/national-program-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/supporting-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/supporting-list.cfg.ts
 create mode 100644 app/components/app/resume/list.cfg.ts
 create mode 100644 app/components/app/resume/list.vue
 create mode 100644 app/components/app/resume/verify-dialog.vue
 create mode 100644 app/components/content/document-upload/add.vue
 create mode 100644 app/components/content/document-upload/edit.vue
 create mode 100644 app/components/content/document-upload/list.vue
 create mode 100644 app/components/content/general-consent/entry.vue
 create mode 100644 app/components/content/general-consent/form.vue
 create mode 100644 app/components/content/general-consent/list.vue
 create mode 100644 app/components/content/medicine-form/list.vue
 create mode 100644 app/components/content/resume/add.vue
 create mode 100644 app/components/content/resume/list.vue
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dd.vue
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dsd.vue
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dvvp.vue
 create mode 100644 app/components/pub/my-ui/form/text-area-input.vue
 create mode 100644 app/components/pub/my-ui/form/text-captcha.vue
 create mode 100644 app/components/pub/my-ui/modal/doc-preview-dialog.vue
 create mode 100644 app/handlers/general-consent.handler.ts
 create mode 100644 app/handlers/medicine-form.handler.ts
 create mode 100644 app/handlers/supporting-document.handler.ts
 create mode 100644 app/models/encounter-document.ts
 create mode 100644 app/models/general-consent.ts
 create mode 100644 app/models/medicine-form.ts
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
 create mode 100644 app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
 create mode 100644 app/pages/(features)/resume/add.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/medicine-form/index.vue
 create mode 100644 app/schemas/_generate-file.ts
 create mode 100644 app/schemas/document-upload.schema.ts
 create mode 100644 app/schemas/general-consent.schema.ts
 create mode 100644 app/schemas/resume.schema.ts
 create mode 100644 app/schemas/verification.schema.ts
 create mode 100644 app/services/general-consent.service.ts
 create mode 100644 app/services/generate-file.service.ts
 create mode 100644 app/services/medicine-form.service.ts
 create mode 100644 app/services/supporting-document.service.ts

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/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/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/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/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/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/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..d1f6fbad
--- /dev/null
+++ b/app/components/content/document-upload/list.vue
@@ -0,0 +1,183 @@
+<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()
+      }
+      navigateTo(recItem.value.filePath, { external: true, open: { target: '_blank' } })
+      break
+    case ActionEvents.showEdit:
+      navigateTo({
+        name: 'rehab-encounter-id-document-upload-document_id-edit',
+        params: { id: encounterId, "document_id": recId.value },
+      })
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      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/process.vue b/app/components/content/encounter/process.vue
index 23640af7..4e0da61b 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -9,15 +9,21 @@ 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 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()
@@ -32,12 +38,18 @@ const activeTab = computed({
 })
 
 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 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 dataResBody = dataRes.body ?? null
-const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
@@ -61,21 +73,21 @@ const tabs: TabItem[] = [
   },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
-  { value: 'consent', label: 'General Consent' },
+  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
   { 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: '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: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.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' },
+  { 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' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data },  },
 ]
 </script>
 
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/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/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/pub/my-ui/confirmation/confirmation.vue b/app/components/pub/my-ui/confirmation/confirmation.vue
index b5c328aa..928d7827 100644
--- a/app/components/pub/my-ui/confirmation/confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/confirmation.vue
@@ -8,6 +8,8 @@ interface ConfirmationProps {
   message?: string
   confirmText?: string
   cancelText?: string
+  noTrueSlot?: boolean
+  skipClosingMessage?: boolean
   variant?: 'default' | 'destructive' | 'warning'
   size?: 'sm' | 'md' | 'lg' | 'xl'
 }
@@ -71,20 +73,22 @@ function handleCancel() {
   <Dialog v-model:open="isOpen" :title="title" :size="size">
     <div class="space-y-4">
       <!-- Icon dan pesan -->
-      <div class="flex items-center gap-3">
-        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
+      <div class="flex items-start gap-3">
+        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-4 h-4 2xl:h-5 2xl:h-6 flex-shrink-0" />
         <div class="flex-1">
-          <p class="text-sm text-muted-foreground leading-relaxed">
-            {{ message }}
-          </p>
+          {{ message }} {{ !noTrueSlot ? ' dengan informasi sebagai berikut:' : '.' }}
         </div>
       </div>
 
       <!-- Slot untuk konten custom -->
-      <div v-if="$slots.default">
+      <div>
         <slot />
       </div>
 
+      <div v-if="!skipClosingMessage" class="">
+        Lanjutkan Proses?
+      </div>
+
       <!-- Footer buttons -->
       <div class="flex justify-end gap-3 pt-4">
         <Button variant="outline" @click="handleCancel">
diff --git a/app/components/pub/my-ui/confirmation/record-confirmation.vue b/app/components/pub/my-ui/confirmation/record-confirmation.vue
index cff54b2b..87249635 100644
--- a/app/components/pub/my-ui/confirmation/record-confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/record-confirmation.vue
@@ -46,31 +46,31 @@ const actionConfig = computed(() => {
   const configs = {
     delete: {
       title: 'Hapus Data',
-      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
+      message: 'Akan dilakukan penghapusan data',
       confirmText: 'Hapus',
       variant: 'destructive' as const,
     },
     deactivate: {
       title: 'Nonaktifkan Data',
-      message: 'Apakah Anda yakin ingin menonaktifkan data ini?',
+      message: 'Akan dilakukan peng-nonaktifkan data',
       confirmText: 'Nonaktifkan',
       variant: 'warning' as const,
     },
     activate: {
       title: 'Aktifkan Data',
-      message: 'Apakah Anda yakin ingin mengaktifkan data ini?',
+      message: 'Akan dilakukan pengaktifkan data',
       confirmText: 'Aktifkan',
       variant: 'default' as const,
     },
     archive: {
       title: 'Arsipkan Data',
-      message: 'Apakah Anda yakin ingin mengarsipkan data ini?',
+      message: 'Akan dilakukan pengarsipan data',
       confirmText: 'Arsipkan',
       variant: 'warning' as const,
     },
     restore: {
       title: 'Pulihkan Data',
-      message: 'Apakah Anda yakin ingin memulihkan data ini?',
+      message: 'Akan dilakukan pemulihan data',
       confirmText: 'Pulihkan',
       variant: 'default' as const,
     },
@@ -107,6 +107,8 @@ const finalCancelText = computed(() => {
 function handleConfirm() {
   if (props.record) {
     emit('confirm', props.record, props.action)
+  } else {
+    emit('confirm', { id: 0 }, 'confirmed')
   }
   emit('update:open', false)
 }
@@ -119,11 +121,13 @@ function handleCancel() {
 
 <template>
   <Confirmation
-v-model:open="isOpen" :title="finalTitle" :message="finalMessage" :confirm-text="finalConfirmText"
-    :cancel-text="finalCancelText" :variant="actionConfig.variant" size="md" @confirm="handleConfirm"
+    v-model:open="isOpen" :variant="actionConfig.variant" size="md"
+    :title="finalTitle" :message="finalMessage"
+    :confirm-text="finalConfirmText" :cancel-text="finalCancelText"
+    :no-true-slot="$slots.default ? false : true"
+    @confirm="handleConfirm"
     @cancel="handleCancel"
->
-    <!-- Slot untuk informasi tambahan record -->
+  >
     <div v-if="record && $slots.default" class="mt-4 p-3 bg-muted rounded-md">
       <slot :record="record" :action="action" />
     </div>
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..ecf2bf46 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -22,7 +22,7 @@ const selected = ref<any[]>([])
 function toggleSelection(row: any, event?: Event) {
   if (event) event.stopPropagation() // cegah event bubble ke TableRow
 
-  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' || 
 
   // gunakan pembanding berdasarkan id atau stringify data
   const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
@@ -128,7 +128,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           'bg-green-50':
             props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
           'bg-blue-50':
-            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' || 
             selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"
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-dsd.vue b/app/components/pub/my-ui/data/dropdown-action-dsd.vue
new file mode 100644
index 00000000..c2eca763
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-dsd.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+interface Props {
+  rec: ListItemDto
+  size?: 'default' | 'sm' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+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: 'Submit',
+    onClick: () => {
+      submit()
+    },
+    icon: 'i-lucide-check',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function submit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmSubmit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          :size="size"
+          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 f27a5578..0d747580 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -79,10 +79,14 @@ export interface LinkItem {
 }
 
 export const ActionEvents = {
+  showConfirmSubmit: 'showConfirmSubmit',
   showConfirmDelete: 'showConfirmDel',
   showEdit: 'showEdit',
   showDetail: 'showDetail',
   showProcess: 'showProcess',
+  showVerify: 'showVerify',
+  showValidate: 'showValidate',
+  showPrint: 'showPrint',
 }
 
 export interface DataTableLoader {
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index bf76c327..b51ad72a 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -64,7 +64,7 @@ const settingClass = computed(() => {
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
-  cls += '[&_label]:md:text-xs [&_label]:md:text-xs [&_label]:2xl:!text-sm'
+  cls += '[&_label]:md:text-xs [&_label]:2xl:!text-sm '
   return cls
 })
 </script>
diff --git a/app/components/pub/my-ui/doc-entry/index.ts b/app/components/pub/my-ui/doc-entry/index.ts
index 8af74884..269f1b8d 100644
--- a/app/components/pub/my-ui/doc-entry/index.ts
+++ b/app/components/pub/my-ui/doc-entry/index.ts
@@ -1,4 +1,5 @@
 export { default as Block } from './block.vue'
+export { default as Colon } from './colon.vue'
 export { default as Cell } from './cell.vue'
 export { default as Label } from './label.vue'
 export { default as Field } from './field.vue'
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/modal/dialog.vue b/app/components/pub/my-ui/modal/dialog.vue
index 974013a2..d771924f 100644
--- a/app/components/pub/my-ui/modal/dialog.vue
+++ b/app/components/pub/my-ui/modal/dialog.vue
@@ -52,8 +52,8 @@ const isOpen = computed({
     >
       <DialogHeader>
         <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
-          <div class="me-2 pt-0.5">
-            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
+          <div v-if="props.titleIcon" class="me-2 pt-0.5">
+            <Icon :name="props.titleIcon" :class="`!pt-2`" />
           </div>
           <div>
             {{ props.title }}
@@ -61,7 +61,7 @@ const isOpen = computed({
         </DialogTitle>
         <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
       </DialogHeader>
-      <DialogDescription :class="sizeClass">
+      <DialogDescription :class="`${sizeClass} md:text-xs 2xl:text-sm`">
         <slot />
       </DialogDescription>
     </DialogContent>
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-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/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..076cae68 100644
--- a/app/composables/useRBAC.ts
+++ b/app/composables/useRBAC.ts
@@ -1,5 +1,13 @@
 import type { Permission, RoleAccess } from '~/models/role'
 
+export interface PageOperationPermission {
+  canRead: boolean
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+}
+
+
 /**
  * Check if user has access to a page
  */
@@ -36,6 +44,13 @@ export function useRBAC() {
   const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
   const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
 
+  const getPagePermissions = (roleAccess: RoleAccess): PageOperationPermission => ({
+      canRead : hasReadAccess(roleAccess),
+      canCreate: hasCreateAccess(roleAccess),
+      canUpdate: hasUpdateAccess(roleAccess),
+      canDelete: hasDeleteAccess(roleAccess),
+  })
+
   return {
     checkRole,
     checkPermission,
@@ -44,5 +59,7 @@ export function useRBAC() {
     hasReadAccess,
     hasUpdateAccess,
     hasDeleteAccess,
+    getPagePermissions,
+
   }
 }
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/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/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/lib/constants.ts b/app/lib/constants.ts
index 3a52b22e..48fb5c8c 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -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/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/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/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..55fbdfa4 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"
@@ -37,6 +38,7 @@ export interface Encounter {
     internalReferences?: InternalReference[]
     deathCause?: DeathCause
     status_code: string
+    encounterDocuments: EncounterDocument[]
 }
 
 export function genEncounter(): Encounter {
@@ -54,7 +56,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/pages/(features)/rehab/encounter/[id]/control-letter/add.vue b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
index 1070a29f..fa0b386b 100644
--- a/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/control-letter/add.vue
@@ -16,9 +16,9 @@ useHead({
   title: () => route.meta.title as string,
 })
 
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
 
-const { checkRole, hasReadAccess } = useRBAC()
+const { checkRole, getPagePermissions } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
@@ -27,14 +27,13 @@ const hasAccess = checkRole(roleAccess)
 // }
 
 // Define permission-based computed properties
-// const canRead = hasReadAccess(roleAccess)
-const canRead = true
+const pagePermission = getPagePermissions(roleAccess)
 const callbackUrl = route.query['return-path'] as string | undefined
 </script>
 
 <template>
   <div>
-    <div v-if="canRead">
+    <div v-if="pagePermission.canRead">
       <ContentControlLetterAdd :callback-url="callbackUrl" />
     </div>
     <Error v-else :status-code="403" />
diff --git a/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
new file mode 100644
index 00000000..1cf5cc7c
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Update Dokumen Pendukung',
+  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">
+      <ContentDocumentUploadEdit/>
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
new file mode 100644
index 00000000..e04220f3
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Dokumen Pendukung',
+  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">
+      <ContentDocumentUploadAdd :callback-url="callbackUrl" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
index abd0efa7..e25b0e77 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -18,7 +18,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,11 +30,11 @@ const hasAccess = checkRole(roleAccess)
 // }
 
 // Define permission-based computed properties
-const canCreate = true // hasCreateAccess(roleAccess)
+const pagePermission = getPagePermissions(roleAccess)
 </script>
 
 <template>
-  <div v-if="canCreate">
+    <div v-if="pagePermission.canRead">
     <ContentEncounterProcess />
   </div>
   <Error v-else :status-code="403" />
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
index f50ad954..1dd93aa0 100644
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -22,9 +22,9 @@ const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  // navigateTo('/403')
-}
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
 
 // Define permission-based computed properties
 const canRead = true // hasReadAccess(roleAccess)
diff --git a/app/pages/(features)/resume/add.vue b/app/pages/(features)/resume/add.vue
new file mode 100644
index 00000000..7cc707f9
--- /dev/null
+++ b/app/pages/(features)/resume/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Resume',
+  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()
+
+// 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 = true // hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentResumeAdd />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-form/index.vue b/app/pages/(features)/tools-equipment-src/medicine-form/index.vue
new file mode 100644
index 00000000..120df6ea
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine-form/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <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..33f16618 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -22,12 +22,12 @@ 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/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/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/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/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/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/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/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/public/side-menu-items/system.json b/public/side-menu-items/system.json
index 5bf62f36..31890951 100644
--- a/public/side-menu-items/system.json
+++ b/public/side-menu-items/system.json
@@ -240,6 +240,10 @@
           {
             "title": "Jenis Obat",
             "link": "/tools-equipment-src/medicine-type"
+          },
+          {
+            "title": "Sediaan Obat",
+            "link": "/tools-equipment-src/medicine-form"
           }
         ]
       },

From 29db4c8cf1b1720134f9f8330f5181610b392ca9 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 21 Nov 2025 10:35:47 +0700
Subject: [PATCH 38/40] Fix: debug for PR to "dev"

---
 .../app/unit-position/entry-detail.vue        | 192 ---------
 app/models/unit-position.ts                   |   4 +-
 public/side-menu-items/sys.json               | 372 ++++++++++++++++++
 public/side-menu-items/system.json            |  22 +-
 4 files changed, 395 insertions(+), 195 deletions(-)
 delete mode 100644 app/components/app/unit-position/entry-detail.vue
 create mode 100644 public/side-menu-items/sys.json

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 ba9ea14c..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: string
-  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/models/unit-position.ts b/app/models/unit-position.ts
index 3e1dc426..a583d948 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: string
+  unit_code: string
   code: string
   name: string
   headStatus?: boolean
@@ -14,7 +14,7 @@ export interface UnitPosition extends Base {
 export function genUnitPosition(): UnitPosition {
   return {
     ...genBase(),
-    unit_id: '',
+    unit_code: '',
     code: '',
     name: '',
     headStatus: false,
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
new file mode 100644
index 00000000..039066a4
--- /dev/null
+++ b/public/side-menu-items/sys.json
@@ -0,0 +1,372 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "link": "/outpatient/registration-queue"
+          },
+          {
+            "title": "Antrian Poliklinik",
+            "link": "/outpatient/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/outpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/outpatient/consultation"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/emergency/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/emergency/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rehab Medik",
+        "icon": "i-lucide-bike",
+        "children": [
+          {
+            "title": "Antrean Pendaftaran",
+            "link": "/rehab/registration-queue"
+          },
+          {
+            "title": "Antrean Poliklinik",
+            "link": "/rehab/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/rehab/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/rehab/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": "Lab - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pc-lab-order"
+      },
+      {
+        "title": "Lab Mikro - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/micro-lab-order"
+      },
+      {
+        "title": "Lab PA - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pa-lab-order"
+      },
+      {
+        "title": "Radiologi - Order",
+        "icon": "i-lucide-radio",
+        "link": "/radiology-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/sep"
+          },
+          {
+            "title": "Peserta",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/member"
+          },
+          {
+            "title": "Surat Kontrol",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/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": "Layanan",
+        "icon": "i-lucide-layout-list",
+        "children": [
+          {
+            "title": "Counter",
+            "link": "/service-src/counter"
+          },
+          {
+            "title": "Public Screen (Big Screen)",
+            "link": "/service-src/public-screen"
+          },
+          {
+            "title": "Kasur",
+            "link": "/service-src/bed"
+          },
+          {
+            "title": "Kamar",
+            "link": "/service-src/chamber"
+          },
+          {
+            "title": "Ruang",
+            "link": "/service-src/room"
+          },
+          {
+            "title": "Depo",
+            "link": "/service-src/warehouse"
+          },
+          {
+            "title": "Lantai",
+            "link": "/service-src/floor"
+          },
+          {
+            "title": "Gedung",
+            "link": "/service-src/building"
+          }
+        ]
+      },
+      {
+        "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"
+          }
+        ]
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/public/side-menu-items/system.json b/public/side-menu-items/system.json
index 7a9917a1..e12f58ec 100644
--- a/public/side-menu-items/system.json
+++ b/public/side-menu-items/system.json
@@ -329,21 +329,41 @@
             "title": "Divisi",
             "link": "/org-src/division"
           },
+          {
+            "title": "Divisi - Posisi",
+            "link": "/org-src/division-position"
+          },
           {
             "title": "Instalasi",
             "link": "/org-src/installation"
           },
+          {
+            "title": "Instalasi - Posisi",
+            "link": "/org-src/installation-position"
+          },
           {
             "title": "Unit",
             "link": "/org-src/unit"
           },
+          {
+            "title": "Unit - Posisi",
+            "link": "/org-src/unit-position"
+          },
           {
             "title": "Spesialis",
             "link": "/org-src/specialist"
           },
+          {
+            "title": "Spesialis - Posisi",
+            "link": "/org-src/specialist-position"
+          },
           {
             "title": "Sub Spesialis",
             "link": "/org-src/subspecialist"
+          },
+          {
+            "title": "Sub Spesialis - Posisi",
+            "link": "/org-src/subspecialist-position"
           }
         ]
       },
@@ -369,4 +389,4 @@
       }
     ]
   }
-]
+]
\ No newline at end of file

From e4b0b3437fcb6ebcb4ec9a0f4a4607bb1705c4cb Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Fri, 21 Nov 2025 13:51:34 +0700
Subject: [PATCH 39/40] dev: hotfix, rigid consts + minor data table

---
 .../pub/my-ui/data-table/data-table.vue       |   6 +-
 app/lib/clinical-const.ts                     | 226 ++++++++++++++++++
 app/lib/common-const.ts                       |  84 +++++++
 app/lib/encounter-const.ts                    | 141 +++++++++++
 app/lib/org-const.ts                          |  69 ++++++
 app/lib/person-const.ts                       |  80 +++++++
 6 files changed, 603 insertions(+), 3 deletions(-)
 create mode 100644 app/lib/clinical-const.ts
 create mode 100644 app/lib/common-const.ts
 create mode 100644 app/lib/encounter-const.ts
 create mode 100644 app/lib/org-const.ts
 create mode 100644 app/lib/person-const.ts

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 ecf2bf46..408b6d9d 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -22,7 +22,7 @@ const selected = ref<any[]>([])
 function toggleSelection(row: any, event?: Event) {
   if (event) event.stopPropagation() // cegah event bubble ke TableRow
 
-  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' || 
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
 
   // gunakan pembanding berdasarkan id atau stringify data
   const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
@@ -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>
@@ -128,7 +128,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           'bg-green-50':
             props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
           'bg-blue-50':
-            (props.selectMode === 'multiple') && // props.selectMode === 'multi' || 
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
             selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"
diff --git a/app/lib/clinical-const.ts b/app/lib/clinical-const.ts
new file mode 100644
index 00000000..d6a37b43
--- /dev/null
+++ b/app/lib/clinical-const.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/lib/common-const.ts b/app/lib/common-const.ts
new file mode 100644
index 00000000..81e0f1ae
--- /dev/null
+++ b/app/lib/common-const.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/lib/encounter-const.ts b/app/lib/encounter-const.ts
new file mode 100644
index 00000000..edd8ea29
--- /dev/null
+++ b/app/lib/encounter-const.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/lib/org-const.ts b/app/lib/org-const.ts
new file mode 100644
index 00000000..49f16e68
--- /dev/null
+++ b/app/lib/org-const.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/lib/person-const.ts b/app/lib/person-const.ts
new file mode 100644
index 00000000..f4f18fdb
--- /dev/null
+++ b/app/lib/person-const.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)',
+}

From f818c726c82233a3b3081c651b9aa6d2db5825be Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 21 Nov 2025 14:09:54 +0700
Subject: [PATCH 40/40] Fix: typo in Unit Position Model

---
 app/models/unit-position.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/models/unit-position.ts b/app/models/unit-position.ts
index a583d948..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_code: string
+  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_code: '',
+    unit_id: '',
     code: '',
     name: '',
     headStatus: false,