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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] =?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 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 08/35] 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 09/35] 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 10/35] 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 11/35] 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 12/35] 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 13/35] 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 14/35] 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 15/35] 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 16/35] 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 17/35] 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 18/35] 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 19/35] 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 20/35] 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 21/35] 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 22/35] 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 23/35] 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 24/35] 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 25/35] 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 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 26/35] 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 27/35] 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 28/35] 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 29/35] 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 baf6ab1fda61f59f966949a1886c2399ac9e7551 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Wed, 19 Nov 2025 20:09:19 +0700
Subject: [PATCH 30/35] 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

---
 .../pub/my-ui/confirmation/confirmation.vue   | 16 ++--
 .../confirmation/record-confirmation.vue      | 22 +++--
 .../pub/my-ui/data/dropdown-action-dsd.vue    | 95 +++++++++++++++++++
 app/components/pub/my-ui/data/types.ts        |  7 +-
 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/modal/dialog.vue     |  6 +-
 7 files changed, 124 insertions(+), 25 deletions(-)
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dsd.vue

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/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/types.ts b/app/components/pub/my-ui/data/types.ts
index f27a5578..cf251cc8 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -42,12 +42,6 @@ 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
@@ -79,6 +73,7 @@ export interface LinkItem {
 }
 
 export const ActionEvents = {
+  showConfirmSubmit: 'showConfirmSubmit',
   showConfirmDelete: 'showConfirmDel',
   showEdit: 'showEdit',
   showDetail: 'showDetail',
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/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>

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 31/35] =?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 32/35] =?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 33/35] =?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 34/35] =?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 35/35] =?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)