From bf831edead9928ab7731dd0ddc3055bad88a8446 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Thu, 16 Oct 2025 05:06:46 +0700
Subject: [PATCH 01/13] dev: hotfix, styling + sidebar + modal and dialog

---
 app/components/app/medicine/entry-form.vue       | 6 +++---
 app/components/layout/SidebarNavGroup.vue        | 2 +-
 app/components/pub/ui/dialog/DialogContent.vue   | 4 ++--
 app/components/pub/ui/dialog/DialogHeader.vue    | 2 +-
 app/components/pub/ui/dialog/DialogTitle.vue     | 2 +-
 app/components/pub/ui/sidebar/SidebarMenuSub.vue | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
index 66ef4afb..42989fcb 100644
--- a/app/components/app/medicine/entry-form.vue
+++ b/app/components/app/medicine/entry-form.vue
@@ -85,7 +85,7 @@ function onCancelForm() {
 
 <template>
   <form id="form-medicine" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+    <Block class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
@@ -111,7 +111,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Kelompok Obat</Label>
+        <Label >Kelompok Obat</Label>
         <Field :errMessage="errors.medicineGroup_code">
           <Select
             id="medicineGroup_code"
@@ -139,7 +139,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Satuan</Label>
+        <Label>Satuan</Label>
         <Field :errMessage="errors.uom_code">
           <Select
             id="uom_code"
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index 9b92e619..fb06a4c7 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -37,7 +37,7 @@ const openCollapsible = ref(false)
               <SidebarMenuSubButton as-child>
                 <NuxtLink
                   :to="subItem.link"
-                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm 2xl:!text-base"
+                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
                   active-class="bg-primary text-white"
                   @click="setOpenMobile(false)"
                 >
diff --git a/app/components/pub/ui/dialog/DialogContent.vue b/app/components/pub/ui/dialog/DialogContent.vue
index a59a0234..5e9e8538 100644
--- a/app/components/pub/ui/dialog/DialogContent.vue
+++ b/app/components/pub/ui/dialog/DialogContent.vue
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )"
     >
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
       >
-        <X class="h-4 w-4" />
+        <X />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/app/components/pub/ui/dialog/DialogHeader.vue b/app/components/pub/ui/dialog/DialogHeader.vue
index 8948edca..176e9c7e 100644
--- a/app/components/pub/ui/dialog/DialogHeader.vue
+++ b/app/components/pub/ui/dialog/DialogHeader.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left mb-2 2xl:mb-3', props.class)"
   >
     <slot />
   </div>
diff --git a/app/components/pub/ui/dialog/DialogTitle.vue b/app/components/pub/ui/dialog/DialogTitle.vue
index 2f22d603..53d2e3d2 100644
--- a/app/components/pub/ui/dialog/DialogTitle.vue
+++ b/app/components/pub/ui/dialog/DialogTitle.vue
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'text-lg font-semibold leading-none tracking-tight',
+        '!text-base 2xl:text-lg font-semibold leading-none tracking-tight',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSub.vue b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
index 42508d4d..9ddf6f43 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuSub.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <ul
     data-sidebar="menu-badge"
     :class="cn(
-      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'mx-3.5 flex min-w-0 translate-x-px flex-col border-l border-sidebar-border px-2.5 py-0.5',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"

From cc848a662fee9e3286aed6302be9c44059202d43 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Thu, 16 Oct 2025 12:55:22 +0700
Subject: [PATCH 02/13] dev: hotfix, default API_ORIGIN

---
 nuxt.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8176a4fb..c5ac4c6c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,9 +5,9 @@ import process from 'node:process'
 export default defineNuxtConfig({
   devtools: { enabled: true },
   runtimeConfig: {
-    API_ORIGIN: process.env.NUXT_API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
+    API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
     public: {
-      API_ORIGIN: process.env.NUXT_API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
+      API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
     }
   },
   ssr: false,

From 9b38689f795d53fffa5b47fb108e5066dd691ab5 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 16 Oct 2025 15:35:29 +0700
Subject: [PATCH 03/13] feat(models): add source models for medical entities

Add new model interfaces and generators for diagnose, procedure, medical action and its items. These models will be used as base structures for medical data processing.
---
 app/models/diagnose-src.ts            | 16 ++++++++++++++++
 app/models/medical-action-src-item.ts | 16 ++++++++++++++++
 app/models/medical-action-src.ts      | 18 ++++++++++++++++++
 app/models/procedure-src.ts           | 16 ++++++++++++++++
 4 files changed, 66 insertions(+)
 create mode 100644 app/models/diagnose-src.ts
 create mode 100644 app/models/medical-action-src-item.ts
 create mode 100644 app/models/medical-action-src.ts
 create mode 100644 app/models/procedure-src.ts

diff --git a/app/models/diagnose-src.ts b/app/models/diagnose-src.ts
new file mode 100644
index 00000000..5d25a54a
--- /dev/null
+++ b/app/models/diagnose-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface DiagnoseSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genDiagnoseSrc(): DiagnoseSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}
diff --git a/app/models/medical-action-src-item.ts b/app/models/medical-action-src-item.ts
new file mode 100644
index 00000000..0f04657a
--- /dev/null
+++ b/app/models/medical-action-src-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface MedicalActionSrcItem extends Base {
+  medicalActionSrc_id: number
+  procedureSrc_id: number
+  item_id: number
+}
+
+export function genMedicalActionSrcItem(): MedicalActionSrcItem {
+  return {
+    ...genBase(),
+    medicalActionSrc_id: 0,
+    procedureSrc_id: 0,
+    item_id: 0,
+  }
+}
diff --git a/app/models/medical-action-src.ts b/app/models/medical-action-src.ts
new file mode 100644
index 00000000..c5a030c5
--- /dev/null
+++ b/app/models/medical-action-src.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from './_base'
+
+export interface MedicalActionSrc extends Base {
+  code: string
+  name: string
+  type_code: string
+  item_id: number
+}
+
+export function genMedicalActionSrc(): MedicalActionSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    type_code: '',
+    item_id: 0,
+  }
+}
diff --git a/app/models/procedure-src.ts b/app/models/procedure-src.ts
new file mode 100644
index 00000000..c86adcf9
--- /dev/null
+++ b/app/models/procedure-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface ProcedureSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genProcedureSrc(): ProcedureSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}

From f7d90270376103bee12185876c82d5277c168ac3 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 16 Oct 2025 15:53:57 +0700
Subject: [PATCH 04/13] feat(side-menu): add new menu items for MCU section

Add procedure, diagnosis, and medical action links to the MCU section of the side menu to improve navigation and user access to these features
---
 public/side-menu-items/sys.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index c7b15101..19491069 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -259,6 +259,18 @@
           {
             "title": "Checkup",
             "link": "/mcu-src/mcu"
+          },
+          {
+            "title": "Prosedur",
+            "link": "/mcu-src/procedure"
+          },
+          {
+            "title": "Diagnosis",
+            "link": "/mcu-src/diagnose"
+          },
+          {
+            "title": "Medical Action",
+            "link": "/mcu-src/medical-action"
           }
         ]
       },

From a4fb33dc3e08078cbd4143c55f356ff2010b1449 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Thu, 16 Oct 2025 16:06:02 +0700
Subject: [PATCH 05/13] dev: hotfix, data table + deepFetch for nested field +
 sampel

---
 .../pub/my-ui/data-table/data-table.vue       | 21 +++++-
 app/pages/_dev/data-table/index.cfg.ts        | 37 ++++++++++
 app/pages/_dev/data-table/index.data.ts       | 67 +++++++++++++++++++
 app/pages/_dev/data-table/index.vue           |  8 +++
 4 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/_dev/data-table/index.cfg.ts
 create mode 100644 app/pages/_dev/data-table/index.data.ts
 create mode 100644 app/pages/_dev/data-table/index.vue

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 5fbd8b36..5549dae9 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isRef } from 'vue';
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -33,6 +34,24 @@ function toggleSelection(row: any) {
   }
 }
 
+function deepFetch(data: Record<string, any>, key: string): string {
+  let result = '';
+  const keys = key.split('.')
+  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  for (let i = 0; i < keys.length; i++) {
+    let idx = keys[i] || ''
+    if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
+      if (i == keys.length - 1) {
+        return lastVal[idx];
+      } else {
+        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+      }
+    }
+  }
+  return result;
+}
+
+
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -116,7 +135,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           <template v-else>
             <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
             <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
             </template>
           </template>
         </TableCell>
diff --git a/app/pages/_dev/data-table/index.cfg.ts b/app/pages/_dev/data-table/index.cfg.ts
new file mode 100644
index 00000000..4eba929e
--- /dev/null
+++ b/app/pages/_dev/data-table/index.cfg.ts
@@ -0,0 +1,37 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'No.RM.' },
+    { label: 'Nama Pasien' },
+    { label: 'Tempat Lahir' },
+    { label: '' },
+  ]],
+
+  keys: ['number', 'person.name', 'person.birthPlace_regency.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/pages/_dev/data-table/index.data.ts b/app/pages/_dev/data-table/index.data.ts
new file mode 100644
index 00000000..16989c3f
--- /dev/null
+++ b/app/pages/_dev/data-table/index.data.ts
@@ -0,0 +1,67 @@
+export interface Regency {
+  id: number
+  code: string
+  name: string
+}
+
+export interface Person {
+  id: number
+  name: string
+  residentIdentityNumber?: string
+  birthDate?: string
+  birthPlace_regency_code: string
+  birthPlace_regency: Regency
+}
+
+export interface Patient {
+  id: number
+  number: string
+  person: Person
+}
+
+export const regencies: Regency[] = [
+  {
+    id: 1,
+    code: '3522',
+    name: 'Bojonegoro',
+  },
+  {
+    id: 2,
+    code: '3579',
+    name: 'Batu',
+  },
+]
+
+export const people: Person[] = [
+  {
+    id: 1,
+    name: 'Abdul Manap',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[0],
+  },
+  {
+    id: 2,
+    name: 'Abdul Gofur',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[1],
+  },
+]
+
+export const data: Patient[] = [
+  {
+    id: 1,
+    number: 'RM-0000001',
+    person_id: 1,
+    person: people[0],
+  },
+  {
+    id: 2,
+    number: 'RM-0000002',
+    person_id: 2,
+    person: people[1],
+  }
+]
diff --git a/app/pages/_dev/data-table/index.vue b/app/pages/_dev/data-table/index.vue
new file mode 100644
index 00000000..0e2c8308
--- /dev/null
+++ b/app/pages/_dev/data-table/index.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+  import { config } from './index.cfg'
+  import { data } from './index.data'
+</script>
+
+<template>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
+</template>

From 586c043411ec68a2df5d51d9ea04683707950056 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 16 Oct 2025 16:42:02 +0700
Subject: [PATCH 06/13] feat(mcu-src): add new medical checkup source pages

Add index pages for medical checkup source features including diagnosis, procedure, and medical action lists
---
 .../(features)/mcu-src/diagnose/index.vue     | 40 +++++++++++++++++++
 app/pages/(features)/mcu-src/mcu/index.vue    | 40 +++++++++++++++++++
 .../mcu-src/medical-action/index.vue          | 40 +++++++++++++++++++
 .../(features)/mcu-src/procedure/index.vue    | 40 +++++++++++++++++++
 4 files changed, 160 insertions(+)
 create mode 100644 app/pages/(features)/mcu-src/diagnose/index.vue
 create mode 100644 app/pages/(features)/mcu-src/mcu/index.vue
 create mode 100644 app/pages/(features)/mcu-src/medical-action/index.vue
 create mode 100644 app/pages/(features)/mcu-src/procedure/index.vue

diff --git a/app/pages/(features)/mcu-src/diagnose/index.vue b/app/pages/(features)/mcu-src/diagnose/index.vue
new file mode 100644
index 00000000..31fb4022
--- /dev/null
+++ b/app/pages/(features)/mcu-src/diagnose/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: 'Daftar Diagnosis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">Daftar Diagnosis</template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/mcu/index.vue b/app/pages/(features)/mcu-src/mcu/index.vue
new file mode 100644
index 00000000..cefa57c6
--- /dev/null
+++ b/app/pages/(features)/mcu-src/mcu/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Medical Checkup',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">MCU - SRC</template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/medical-action/index.vue b/app/pages/(features)/mcu-src/medical-action/index.vue
new file mode 100644
index 00000000..36fb8feb
--- /dev/null
+++ b/app/pages/(features)/mcu-src/medical-action/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: 'Daftar Aksi Medis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">Daftar Aksi Medis</template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/procedure/index.vue b/app/pages/(features)/mcu-src/procedure/index.vue
new file mode 100644
index 00000000..50de14c3
--- /dev/null
+++ b/app/pages/(features)/mcu-src/procedure/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: 'Daftar Prosedur',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">Daftar Prosedur</template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>

From 61a3e8597b30f47a40212b00099684f3c98cf715 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Fri, 17 Oct 2025 02:18:25 +0700
Subject: [PATCH 07/13] dev: hotfix, improvements

+ components/pub/my-ui/data-table
+ components/pub/ui/badge
+ lib/date
---
 .../pub/my-ui/data-table/data-table.vue       |  8 ++--
 app/components/pub/my-ui/nav-header/prep.vue  |  5 +--
 app/components/pub/ui/badge/index.ts          | 30 +++++++++----
 app/lib/date.ts                               | 44 +++++++++++++++++++
 4 files changed, 71 insertions(+), 16 deletions(-)
 create mode 100644 app/lib/date.ts

diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index 5549dae9..9d88ffee 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -71,14 +71,14 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 <template>
   <Table>
     <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
-      <TableRow>
+      <TableRow v-for="(hr, hrIdx) in headers">
         <TableHead
-          v-for="(h, idx) in headers[0]"
+          v-for="(th, idx) in headers[hrIdx]"
           :key="`head-${idx}`"
-          class="border"
+          :class="`border ${th.classVal || ''}`"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
         >
-          {{ h.label }}
+          {{ th.label }}
         </TableHead>
       </TableRow>
     </TableHeader>
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index e7a48d03..10ad748b 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -31,7 +31,7 @@ function btnClick() {
         <div class="font-semibold text-gray-900 md:text-base xl:text-lg">
           <Icon
             :name="props.prep.icon!"
-            class="mr-2 size-4 align-middle md:size-6"
+            class="mr-2 align-middle md:size-6"
           />
           {{ props.prep.title }}
         </div>
@@ -44,7 +44,6 @@ function btnClick() {
           <Input
             type="text"
             placeholder="Search"
-            class="sm:text-sm"
             @click="emitSearchNavClick"
             @input="onInput"
           />
@@ -59,7 +58,7 @@ function btnClick() {
           >
             <Icon
               name="i-lucide-plus"
-              class="mr-2 h-4 w-4 align-middle"
+              class="align-middle"
             />
             {{ prep.addNav.label }}
           </Button>
diff --git a/app/components/pub/ui/badge/index.ts b/app/components/pub/ui/badge/index.ts
index 4f3e6d83..1ada7a61 100644
--- a/app/components/pub/ui/badge/index.ts
+++ b/app/components/pub/ui/badge/index.ts
@@ -3,19 +3,31 @@ import { cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
+export type Variants = | 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline'
+
+const variants: Record<Variants, string> = {
+  default:
+    'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+  secondary:
+    'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  fresh:
+    'border-transparent bg-teal-400 text-primary-foreground shadow hover:bg-teal-400/80',
+  positive:
+    'border-transparent bg-sky-400 text-primary-foreground shadow hover:bg-sky-400/80',
+  negative:
+    'border-transparent bg-neutral-400 text-destructive-foreground shadow hover:bg-neutral-400/80',
+  warning:
+    'border-transparent bg-orange-400 text-destructive-foreground shadow hover:bg-orange-400/80',
+  destructive:
+    'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+  outline: 'text-foreground',
+}
+
 export const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
+      variant: variants,
     },
     defaultVariants: {
       variant: 'default',
diff --git a/app/lib/date.ts b/app/lib/date.ts
new file mode 100644
index 00000000..502a6cfb
--- /dev/null
+++ b/app/lib/date.ts
@@ -0,0 +1,44 @@
+export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
+	const birthDate = new Date(dateString);
+	const today = new Date();
+
+	if (comparedDate) {
+		const comparedDateObj = new Date(comparedDate);
+		today.setFullYear(comparedDateObj.getFullYear());
+		today.setMonth(comparedDateObj.getMonth());
+		today.setDate(comparedDateObj.getDate());
+	}
+
+	// Format the date part
+	const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
+	const idFormat = birthDate.toLocaleDateString('id-ID', options);
+
+	// Calculate age
+	let years = today.getFullYear() - birthDate.getFullYear();
+	let months = today.getMonth() - birthDate.getMonth();
+	let days = today.getDate() - birthDate.getDate();
+
+	if (months < 0 || (months === 0 && days < 0)) {
+		years--;
+		months += 12;
+	}
+
+	if (days < 0) {
+		const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
+		days += prevMonth.getDate();
+		months--;
+	}
+
+	// Format the age part
+	let extFormat = '';
+	if ([years, months, days].filter(Boolean).join(' ')) {
+		extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
+	} else {
+		extFormat = '0';
+	}
+
+	return {
+		idFormat,
+		extFormat
+	};
+}
\ No newline at end of file

From 1ba37e46e16e2e9861d7d7b96fda00ea5d4a2851 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 17 Oct 2025 10:22:11 +0700
Subject: [PATCH 08/13] feat(mcu-procedure): add procedure source management
 feature

- Implement procedure source list view with pagination and search
- Add create, read, update, and delete operations for procedure sources
- Include form validation using zod schema
- Set up data table configuration for procedure listing
- Add confirmation dialogs for delete operations
- Update delete record confirmation based on list config delKeyNames
---
 .../app/mcu-procedure/entry-form.vue          | 137 +++++++++++++
 app/components/app/mcu-procedure/list-cfg.ts  |  33 ++++
 app/components/app/mcu-procedure/list.vue     |  36 ++++
 app/components/content/mcu-procedure/list.vue | 184 ++++++++++++++++++
 app/handlers/procedure-src.handler.ts         |  24 +++
 .../(features)/mcu-src/procedure/index.vue    |   4 +-
 app/schemas/procedure-src.schema.ts           |  22 +++
 app/services/procedure-src.service.ts         |  41 ++++
 8 files changed, 480 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/mcu-procedure/entry-form.vue
 create mode 100644 app/components/app/mcu-procedure/list-cfg.ts
 create mode 100644 app/components/app/mcu-procedure/list.vue
 create mode 100644 app/components/content/mcu-procedure/list.vue
 create mode 100644 app/handlers/procedure-src.handler.ts
 create mode 100644 app/schemas/procedure-src.schema.ts
 create mode 100644 app/services/procedure-src.service.ts

diff --git a/app/components/app/mcu-procedure/entry-form.vue b/app/components/app/mcu-procedure/entry-form.vue
new file mode 100644
index 00000000..fd33cf90
--- /dev/null
+++ b/app/components/app/mcu-procedure/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ProcedureSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<ProcedureSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: ProcedureSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-procedure-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/mcu-procedure/list-cfg.ts b/app/components/app/mcu-procedure/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/mcu-procedure/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/mcu-procedure/list.vue b/app/components/app/mcu-procedure/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/mcu-procedure/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/mcu-procedure/list.vue b/app/components/content/mcu-procedure/list.vue
new file mode 100644
index 00000000..750a217e
--- /dev/null
+++ b/app/components/content/mcu-procedure/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/mcu-procedure/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/procedure-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/procedure-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'procedure-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'MCU Prosedur',
+  icon: 'i-lucide-clipboard-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Prosedur'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Prosedur'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMcuProcedureList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Prosedur'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMcuProcedureEntryForm
+      :schema="ProcedureSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ProcedureSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/handlers/procedure-src.handler.ts b/app/handlers/procedure-src.handler.ts
new file mode 100644
index 00000000..7c949356
--- /dev/null
+++ b/app/handlers/procedure-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/procedure-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/pages/(features)/mcu-src/procedure/index.vue b/app/pages/(features)/mcu-src/procedure/index.vue
index 50de14c3..a31dfa98 100644
--- a/app/pages/(features)/mcu-src/procedure/index.vue
+++ b/app/pages/(features)/mcu-src/procedure/index.vue
@@ -32,7 +32,9 @@ const canRead = true
 </script>
 
 <template>
-  <template v-if="canRead">Daftar Prosedur</template>
+  <template v-if="canRead">
+    <ContentMcuProcedureList />
+  </template>
   <Error
     v-else
     :status-code="403"
diff --git a/app/schemas/procedure-src.schema.ts b/app/schemas/procedure-src.schema.ts
new file mode 100644
index 00000000..dfbdc43a
--- /dev/null
+++ b/app/schemas/procedure-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const ProcedureSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type ProcedureSrcFormData = z.infer<typeof ProcedureSrcSchema> & Partial<ProcedureSrc>
+
+export { ProcedureSrcSchema }
+export type { ProcedureSrcFormData }
diff --git a/app/services/procedure-src.service.ts b/app/services/procedure-src.service.ts
new file mode 100644
index 00000000..a4bca68b
--- /dev/null
+++ b/app/services/procedure-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const path = '/api/v1/procedure-src'
+const name = 'procedure-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: ProcedureSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}

From 1b61265f8c4e0561466849dde31da798a9794fc9 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 17 Oct 2025 11:08:21 +0700
Subject: [PATCH 09/13] feat(diagnose-src): implement diagnose source CRUD
 functionality

- Add diagnose source list, entry form, and related components
- Create services, handlers, and schemas for diagnose source operations
---
 .../app/diagnose-src/entry-form.vue           | 137 +++++++++++++
 app/components/app/diagnose-src/list-cfg.ts   |  33 ++++
 app/components/app/diagnose-src/list.vue      |  36 ++++
 app/components/content/diagnose-src/list.vue  | 184 ++++++++++++++++++
 app/handlers/diagnose-src.handler.ts          |  24 +++
 .../(features)/mcu-src/diagnose/index.vue     |   4 +-
 app/schemas/diagnose-src.schema.ts            |  22 +++
 app/services/diagnose-src.service.ts          |  41 ++++
 8 files changed, 480 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/diagnose-src/entry-form.vue
 create mode 100644 app/components/app/diagnose-src/list-cfg.ts
 create mode 100644 app/components/app/diagnose-src/list.vue
 create mode 100644 app/components/content/diagnose-src/list.vue
 create mode 100644 app/handlers/diagnose-src.handler.ts
 create mode 100644 app/schemas/diagnose-src.schema.ts
 create mode 100644 app/services/diagnose-src.service.ts

diff --git a/app/components/app/diagnose-src/entry-form.vue b/app/components/app/diagnose-src/entry-form.vue
new file mode 100644
index 00000000..3f84b2a2
--- /dev/null
+++ b/app/components/app/diagnose-src/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DiagnoseSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<DiagnoseSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: DiagnoseSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-diagnose-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/diagnose-src/list-cfg.ts b/app/components/app/diagnose-src/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/diagnose-src/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/diagnose-src/list.vue b/app/components/app/diagnose-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/diagnose-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/diagnose-src/list.vue b/app/components/content/diagnose-src/list.vue
new file mode 100644
index 00000000..2b056697
--- /dev/null
+++ b/app/components/content/diagnose-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/diagnose-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DiagnoseSrcSchema, type DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/diagnose-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/diagnose-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'diagnose-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Diagnosis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Diagnosis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Diagnosis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppDiagnoseSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Diagnosis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDiagnoseSrcEntryForm
+      :schema="DiagnoseSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DiagnoseSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/handlers/diagnose-src.handler.ts b/app/handlers/diagnose-src.handler.ts
new file mode 100644
index 00000000..c109e6fc
--- /dev/null
+++ b/app/handlers/diagnose-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/diagnose-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/pages/(features)/mcu-src/diagnose/index.vue b/app/pages/(features)/mcu-src/diagnose/index.vue
index 31fb4022..c557cf5f 100644
--- a/app/pages/(features)/mcu-src/diagnose/index.vue
+++ b/app/pages/(features)/mcu-src/diagnose/index.vue
@@ -32,7 +32,9 @@ const canRead = true
 </script>
 
 <template>
-  <template v-if="canRead">Daftar Diagnosis</template>
+  <template v-if="canRead">
+    <ContentDiagnoseSrcList />
+  </template>
   <Error
     v-else
     :status-code="403"
diff --git a/app/schemas/diagnose-src.schema.ts b/app/schemas/diagnose-src.schema.ts
new file mode 100644
index 00000000..c174f4c8
--- /dev/null
+++ b/app/schemas/diagnose-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const DiagnoseSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type DiagnoseSrcFormData = z.infer<typeof DiagnoseSrcSchema> & Partial<DiagnoseSrc>
+
+export { DiagnoseSrcSchema }
+export type { DiagnoseSrcFormData }
diff --git a/app/services/diagnose-src.service.ts b/app/services/diagnose-src.service.ts
new file mode 100644
index 00000000..4c5b50d4
--- /dev/null
+++ b/app/services/diagnose-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const path = '/api/v1/diagnose-src'
+const name = 'diagnose-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: DiagnoseSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}

From 7ed5177127b9005a0865b85ecae831589d78d6a4 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 17 Oct 2025 11:12:20 +0700
Subject: [PATCH 10/13] rename directory to match backend service apis

---
 .../app/{mcu-procedure => procedure-src}/entry-form.vue     | 0
 .../app/{mcu-procedure => procedure-src}/list-cfg.ts        | 0
 .../app/{mcu-procedure => procedure-src}/list.vue           | 0
 .../content/{mcu-procedure => procedure-src}/list.vue       | 6 +++---
 app/pages/(features)/mcu-src/procedure/index.vue            | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename app/components/app/{mcu-procedure => procedure-src}/entry-form.vue (100%)
 rename app/components/app/{mcu-procedure => procedure-src}/list-cfg.ts (100%)
 rename app/components/app/{mcu-procedure => procedure-src}/list.vue (100%)
 rename app/components/content/{mcu-procedure => procedure-src}/list.vue (97%)

diff --git a/app/components/app/mcu-procedure/entry-form.vue b/app/components/app/procedure-src/entry-form.vue
similarity index 100%
rename from app/components/app/mcu-procedure/entry-form.vue
rename to app/components/app/procedure-src/entry-form.vue
diff --git a/app/components/app/mcu-procedure/list-cfg.ts b/app/components/app/procedure-src/list-cfg.ts
similarity index 100%
rename from app/components/app/mcu-procedure/list-cfg.ts
rename to app/components/app/procedure-src/list-cfg.ts
diff --git a/app/components/app/mcu-procedure/list.vue b/app/components/app/procedure-src/list.vue
similarity index 100%
rename from app/components/app/mcu-procedure/list.vue
rename to app/components/app/procedure-src/list.vue
diff --git a/app/components/content/mcu-procedure/list.vue b/app/components/content/procedure-src/list.vue
similarity index 97%
rename from app/components/content/mcu-procedure/list.vue
rename to app/components/content/procedure-src/list.vue
index 750a217e..fad041ea 100644
--- a/app/components/content/mcu-procedure/list.vue
+++ b/app/components/content/procedure-src/list.vue
@@ -7,7 +7,7 @@ import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confi
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
 import { toast } from '~/components/pub/ui/toast'
-import { config } from '~/components/app/mcu-procedure/list-cfg'
+import { config } from '~/components/app/procedure-src/list-cfg'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
@@ -125,7 +125,7 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <AppMcuProcedureList
+  <AppProcedureSrcList
     :data="data"
     :pagination-meta="paginationMeta"
     @page-change="handlePageChange"
@@ -143,7 +143,7 @@ onMounted(async () => {
       }
     "
   >
-    <AppMcuProcedureEntryForm
+    <AppProcedureSrcEntryForm
       :schema="ProcedureSrcSchema"
       :values="recItem"
       :is-loading="isProcessing"
diff --git a/app/pages/(features)/mcu-src/procedure/index.vue b/app/pages/(features)/mcu-src/procedure/index.vue
index a31dfa98..030c0ab3 100644
--- a/app/pages/(features)/mcu-src/procedure/index.vue
+++ b/app/pages/(features)/mcu-src/procedure/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentMcuProcedureList />
+    <ContentProcedureSrcList />
   </template>
   <Error
     v-else

From 2b8bf55e8acfa650dadb8fa7a3e3ba158d5de2da Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 17 Oct 2025 13:20:29 +0700
Subject: [PATCH 11/13] feat(medical-action): implement medical action source
 management

- Add medical action source list component with pagination and search
- Create CRUD operations for medical action source
- Implement form entry and validation for medical action source
- Add confirmation dialog for delete operations
---
 .../app/medical-action-src/entry-form.vue     | 119 +++++++++++
 .../app/medical-action-src/list-cfg.ts        |  32 +++
 .../app/medical-action-src/list.vue           |  36 ++++
 .../content/medical-action-src/list.vue       | 184 ++++++++++++++++++
 app/handlers/medical-action-src.handler.ts    |  24 +++
 .../mcu-src/medical-action/index.vue          |   4 +-
 app/schemas/medical-action-src.schema.ts      |  23 +++
 app/services/medical-action-src.service.ts    |  41 ++++
 8 files changed, 462 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/medical-action-src/entry-form.vue
 create mode 100644 app/components/app/medical-action-src/list-cfg.ts
 create mode 100644 app/components/app/medical-action-src/list.vue
 create mode 100644 app/components/content/medical-action-src/list.vue
 create mode 100644 app/handlers/medical-action-src.handler.ts
 create mode 100644 app/schemas/medical-action-src.schema.ts
 create mode 100644 app/services/medical-action-src.service.ts

diff --git a/app/components/app/medical-action-src/entry-form.vue b/app/components/app/medical-action-src/entry-form.vue
new file mode 100644
index 00000000..0a02ea85
--- /dev/null
+++ b/app/components/app/medical-action-src/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 { MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: MedicalActionSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+  } as Partial<MedicalActionSrcFormData>,
+})
+
+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: MedicalActionSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medical-action-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medical-action-src/list-cfg.ts b/app/components/app/medical-action-src/list-cfg.ts
new file mode 100644
index 00000000..2fecde69
--- /dev/null
+++ b/app/components/app/medical-action-src/list-cfg.ts
@@ -0,0 +1,32 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama ' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medical-action-src/list.vue b/app/components/app/medical-action-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/medical-action-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/medical-action-src/list.vue b/app/components/content/medical-action-src/list.vue
new file mode 100644
index 00000000..c39ff4b8
--- /dev/null
+++ b/app/components/content/medical-action-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/medical-action-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MedicalActionSrcSchema, type MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medical-action-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medical-action-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medical-action-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Aksi Medis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Aksi Medis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Aksi Medis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicalActionSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Aksi Medis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicalActionSrcEntryForm
+      :schema="MedicalActionSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicalActionSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/handlers/medical-action-src.handler.ts b/app/handlers/medical-action-src.handler.ts
new file mode 100644
index 00000000..652d6d60
--- /dev/null
+++ b/app/handlers/medical-action-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medical-action-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/pages/(features)/mcu-src/medical-action/index.vue b/app/pages/(features)/mcu-src/medical-action/index.vue
index 36fb8feb..7e471367 100644
--- a/app/pages/(features)/mcu-src/medical-action/index.vue
+++ b/app/pages/(features)/mcu-src/medical-action/index.vue
@@ -32,7 +32,9 @@ const canRead = true
 </script>
 
 <template>
-  <template v-if="canRead">Daftar Aksi Medis</template>
+  <template v-if="canRead">
+    <ContentMedicalActionSrcList />
+  </template>
   <Error
     v-else
     :status-code="403"
diff --git a/app/schemas/medical-action-src.schema.ts b/app/schemas/medical-action-src.schema.ts
new file mode 100644
index 00000000..a251749c
--- /dev/null
+++ b/app/schemas/medical-action-src.schema.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod'
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const MedicalActionSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  // type_code: z
+  // .string({ required_error: 'Nama (ID) harus diisi' })
+  // .min(1, 'Nama (ID) minimum 1 karakter')
+  // .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+  // item_id: z.number({ required_error: 'Item ID harus diisi' }).min(1, 'Item ID minimum 1 karakter'),
+})
+
+type MedicalActionSrcFormData = z.infer<typeof MedicalActionSrcSchema> & Partial<MedicalActionSrc>
+
+export { MedicalActionSrcSchema }
+export type { MedicalActionSrcFormData }
diff --git a/app/services/medical-action-src.service.ts b/app/services/medical-action-src.service.ts
new file mode 100644
index 00000000..aa196962
--- /dev/null
+++ b/app/services/medical-action-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const path = '/api/v1/medical-action-src'
+const name = 'medical-action-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: MedicalActionSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}

From f4dadd67f872a76c8f6c0a3729b91b7c9d7dca4d Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 17 Oct 2025 16:23:51 +0700
Subject: [PATCH 12/13] feat(medical-action-src): add type code selection with
 strict typing

- Add medicalActionTypeCode constants and type definition
- Update MedicalActionSrc interface to use strict type for type_code
- Implement select dropdown for type code in entry form
- Enable type code validation in schema
---
 .../app/medical-action-src/entry-form.vue     | 25 +++++++++++++++++++
 app/lib/constants.ts                          | 10 ++++++++
 app/models/medical-action-src.ts              |  3 ++-
 app/schemas/medical-action-src.schema.ts      |  9 +++----
 4 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/app/components/app/medical-action-src/entry-form.vue b/app/components/app/medical-action-src/entry-form.vue
index 0a02ea85..f8bf87e4 100644
--- a/app/components/app/medical-action-src/entry-form.vue
+++ b/app/components/app/medical-action-src/entry-form.vue
@@ -5,14 +5,17 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
 
 // Types
 import type { MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+import { medicalActionTypeCode } from '~/lib/constants'
 
 // Helpers
 import type z from 'zod'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
+import { mapToComboboxOptList } from '~/lib/utils'
 
 interface Props {
   schema: z.ZodSchema<any>
@@ -24,6 +27,8 @@ interface Props {
 const props = defineProps<Props>()
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const medicalActionTypeOptions = mapToComboboxOptList(medicalActionTypeCode)
+
 const emit = defineEmits<{
   submit: [values: MedicalActionSrcFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
@@ -34,26 +39,31 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
+    type_code: '',
   } as Partial<MedicalActionSrcFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
+const [typeCode, typeCodeAttrs] = defineField('type_code')
 
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.type_code !== undefined) typeCode.value = props.values.type_code
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
+  typeCode.value = ''
 }
 
 function onSubmitForm() {
   const formData: MedicalActionSrcFormData = {
     code: code.value || '',
     name: name.value || '',
+    type_code: typeCode.value || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -95,6 +105,21 @@ function onCancelForm() {
           />
         </Field>
       </Cell>
+      <Cell>
+        <Label height="compact">Type Kode</Label>
+        <Field :errMessage="errors.name">
+          <Select
+            id="type_code"
+            :is-disabled="isLoading || isReadonly"
+            :items="medicalActionTypeOptions"
+            v-bind="typeCodeAttrs"
+            v-model="typeCode"
+            placeholder="Pilih medical action type"
+            :preserve-order="false"
+            class="text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0"
+          />
+        </Field>
+      </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
       <Button
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 05213784..d1f4c25f 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -268,3 +268,13 @@ export const infraGroupCodesKeys: Record<string, string> = Object.keys(infraGrou
   },
   {} as Record<string, string>,
 )
+
+export const medicalActionTypeCode: Record<string, string> = {
+  chemo: 'Chemo',
+  hemo: 'Hemo',
+  thalasemia: 'Thalasemia',
+  echocardio: 'Echocardiography',
+  spirometry: 'Spirometry',
+} as const
+
+export type medicalActionTypeCodeKey = keyof typeof medicalActionTypeCode
diff --git a/app/models/medical-action-src.ts b/app/models/medical-action-src.ts
index c5a030c5..21d36c84 100644
--- a/app/models/medical-action-src.ts
+++ b/app/models/medical-action-src.ts
@@ -1,9 +1,10 @@
 import { type Base, genBase } from './_base'
+import type { medicalActionTypeCodeKey } from '~/lib/constants'
 
 export interface MedicalActionSrc extends Base {
   code: string
   name: string
-  type_code: string
+  type_code: medicalActionTypeCodeKey
   item_id: number
 }
 
diff --git a/app/schemas/medical-action-src.schema.ts b/app/schemas/medical-action-src.schema.ts
index a251749c..a1caaeeb 100644
--- a/app/schemas/medical-action-src.schema.ts
+++ b/app/schemas/medical-action-src.schema.ts
@@ -10,11 +10,10 @@ const MedicalActionSrcSchema = z.object({
     .string({ required_error: 'Nama harus diisi' })
     .min(1, 'Nama minimum 1 karakter')
     .max(2048, 'Nama maksimum 2048 karakter'),
-  // type_code: z
-  // .string({ required_error: 'Nama (ID) harus diisi' })
-  // .min(1, 'Nama (ID) minimum 1 karakter')
-  // .max(2048, 'Nama (ID) maksimum 2048 karakter'),
-  // item_id: z.number({ required_error: 'Item ID harus diisi' }).min(1, 'Item ID minimum 1 karakter'),
+  type_code: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
 })
 
 type MedicalActionSrcFormData = z.infer<typeof MedicalActionSrcSchema> & Partial<MedicalActionSrc>

From e6717e2b6d2a955041955253caeb0aa7e5ac9a92 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Fri, 17 Oct 2025 02:42:59 +0700
Subject: [PATCH 13/13] dev: hotfix, content header adjustment

---
 app/components/content/bed/list.vue           |  2 +-
 app/components/content/building/list.vue      |  2 +-
 app/components/content/chamber/list.vue       |  2 +-
 app/components/content/counter/list.vue       |  2 +-
 .../content/division-position/list.vue        |  2 +-
 app/components/content/division/list.vue      |  2 +-
 app/components/content/employee/list.vue      |  5 +-
 app/components/content/encounter/list.vue     |  7 +-
 app/components/content/equipment/list.vue     |  2 +-
 app/components/content/floor/list.vue         |  2 +-
 app/components/content/installation/list.vue  |  2 +-
 app/components/content/item-price/list.vue    |  5 +-
 app/components/content/item/list.vue          |  5 +-
 .../content/medicine-group/list.vue           |  2 +-
 .../content/medicine-method/list.vue          |  2 +-
 app/components/content/medicine/list.vue      |  2 +-
 app/components/content/patient/detail.vue     |  2 +-
 app/components/content/patient/list.vue       | 77 ++++++++++---------
 app/components/content/prescription/list.vue  |  3 +
 app/components/content/public-screen/list.vue |  2 +-
 app/components/content/room/list.vue          |  2 +-
 app/components/content/satusehat/list.vue     |  2 +
 app/components/content/soapi/list.vue         |  5 +-
 .../content/specialist-intern/list.vue        |  5 +-
 app/components/content/specialist/list.vue    |  2 +-
 app/components/content/subspecialist/list.vue |  2 +-
 app/components/content/tools/list.vue         |  2 +-
 app/components/content/unit/list.vue          |  2 +-
 app/components/content/uom/list.vue           | 14 ++--
 app/components/content/user/list.vue          |  5 +-
 app/components/content/warehouse/list.vue     |  2 +-
 .../pub/my-ui/nav-header/filter.vue           |  2 +-
 app/components/pub/my-ui/nav-header/prep.vue  |  5 +-
 33 files changed, 91 insertions(+), 89 deletions(-)

diff --git a/app/components/content/bed/list.vue b/app/components/content/bed/list.vue
index 46ed0f11..e68f59c9 100644
--- a/app/components/content/bed/list.vue
+++ b/app/components/content/bed/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBedList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/building/list.vue b/app/components/content/building/list.vue
index 364f9a59..2c67a5ee 100644
--- a/app/components/content/building/list.vue
+++ b/app/components/content/building/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBuildingList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/chamber/list.vue b/app/components/content/chamber/list.vue
index 66098a84..9b389a02 100644
--- a/app/components/content/chamber/list.vue
+++ b/app/components/content/chamber/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppChamberList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/counter/list.vue b/app/components/content/counter/list.vue
index 8757c0d2..e85c5df4 100644
--- a/app/components/content/counter/list.vue
+++ b/app/components/content/counter/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppCounterList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 46e22401..019e64a9 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionPositionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index 0ad75edb..9ccefc56 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -147,8 +147,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/employee/list.vue b/app/components/content/employee/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/employee/list.vue
+++ b/app/components/content/employee/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index f218444a..0cc0c874 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -96,11 +96,10 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <Separator class="my-4 xl:my-5" />
+
   <Filter :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppEncounterList :data="data" />
-  </div>
+
+  <AppEncounterList :data="data" />
 
   <Dialog v-model:open="isFormEntryDialogOpen" title="Filter" size="lg" prevent-outside>
     <AppEncounterFilter />
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 4e370502..19e5d913 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppEquipmentList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/floor/list.vue b/app/components/content/floor/list.vue
index 8859d9c2..1b91af9d 100644
--- a/app/components/content/floor/list.vue
+++ b/app/components/content/floor/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppFloorList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index fe27a4ef..31486097 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppInstallationList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
index 9dcba7be..aa277b71 100644
--- a/app/components/content/item-price/list.vue
+++ b/app/components/content/item-price/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineGroupList :data="data" />
-  </div>
+
+  <AppMedicineGroupList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
     <AppMedicineGroupEntryForm v-model="entry" />
diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
index 6660f71e..15887985 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppItemList :data="data" />
-  </div>
+
+  <AppItemList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
     <AppItemEntryForm v-model="entry" />
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 10c82ecd..80faf1ab 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineGroupList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index dd2b66e9..9e0e5d01 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineMethodList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index 4590e891..27470776 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -138,8 +138,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/patient/detail.vue b/app/components/content/patient/detail.vue
index 0ca4cd0d..185b3707 100644
--- a/app/components/content/patient/detail.vue
+++ b/app/components/content/patient/detail.vue
@@ -71,8 +71,8 @@ function handleAction(type: string) {
   <Header
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 border-b-2 border-b-slate-300 pb-2 xl:mb-5"
   />
+
   <AppPatientPreview
     :person="patient.person"
     :person-addresses="patient.personAddresses"
diff --git a/app/components/content/patient/list.vue b/app/components/content/patient/list.vue
index 2b73ca08..519aeb8e 100644
--- a/app/components/content/patient/list.vue
+++ b/app/components/content/patient/list.vue
@@ -48,36 +48,37 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-const summaryData = ref<Summary[]>([
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-])
+// Disable dulu, ayahab kalo diminta
+// const summaryData = ref<Summary[]>([
+//   {
+//     title: 'Total Pasien',
+//     icon: UsersRound,
+//     metric: 23,
+//     trend: 15,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Pasien Aktif',
+//     icon: UserCheck,
+//     metric: 100,
+//     trend: 9,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Kunjungan Hari Ini',
+//     icon: Calendar,
+//     metric: 52,
+//     trend: 1,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Peserta BPJS',
+//     icon: Hospital,
+//     metric: 71,
+//     trend: -3,
+//     timeframe: 'daily',
+//   },
+// ])
 // #endregion
 
 // #region Lifecycle Hooks
@@ -165,7 +166,9 @@ watch([recId, recAction], () => {
     :prep="{ ...headerPrep }"
     :ref-search-nav="refSearchNav"
   />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="summaryLoading">
         <SummaryCard
@@ -182,12 +185,14 @@ watch([recId, recAction], () => {
         />
       </template>
     </div>
-    <AppPatientList
-      :data="data"
-      :pagination-meta="paginationMeta"
-      @page-change="handlePageChange"
-    />
   </div>
+  -->
+
+  <AppPatientList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index b3cd7d25..f8059b9d 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -58,8 +58,11 @@ async function getMaterialList() {
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+
   <AppPrescriptionList v-if="!isLoading.dataListLoading" />
+
   <AppPrescriptionEntry />
+
   <PrescriptionItemListEntry :data=[] />
   <div>
     <Button>
diff --git a/app/components/content/public-screen/list.vue b/app/components/content/public-screen/list.vue
index 0b380d61..10c7d039 100644
--- a/app/components/content/public-screen/list.vue
+++ b/app/components/content/public-screen/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppPublicScreenList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/room/list.vue b/app/components/content/room/list.vue
index a88c0230..1317d5b0 100644
--- a/app/components/content/room/list.vue
+++ b/app/components/content/room/list.vue
@@ -196,8 +196,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppRoomList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/satusehat/list.vue b/app/components/content/satusehat/list.vue
index 6dcbd459..72cff7dd 100644
--- a/app/components/content/satusehat/list.vue
+++ b/app/components/content/satusehat/list.vue
@@ -108,10 +108,12 @@ const activeTabFilter = computed({
 <template>
   <div class="rounded-md border p-4">
     <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
+
     <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
       <PubMyUiServiceStatus v-bind="service" />
       <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
     </div>
+
     <div class="rounded-md border p-4">
       <h2 class="text-md py-2 font-semibold">FHIR Resource</h2>
       <Tabs v-model="activeTabFilter">
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
index e1d8373a..a240a65f 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -60,7 +60,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AssesmentFunctionList :data="data" />
-  </div>
+
+  <AssesmentFunctionList :data="data" />
 </template>
diff --git a/app/components/content/specialist-intern/list.vue b/app/components/content/specialist-intern/list.vue
index b004cc92..e2df8e3e 100644
--- a/app/components/content/specialist-intern/list.vue
+++ b/app/components/content/specialist-intern/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 0a16e10e..9bbf755f 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index c6750d13..e2c6db52 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSubSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index a81c041b..da22a976 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -134,8 +134,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppToolsList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 44d7c115..03edd231 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppUnitList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
index bc0226ab..15498b15 100644
--- a/app/components/content/uom/list.vue
+++ b/app/components/content/uom/list.vue
@@ -126,15 +126,13 @@ onMounted(async () => {
       :prep="headerPrep"
       :ref-search-nav="headerPrep.refSearchNav"
       @search="handleSearch"
-      class="mb-4 xl:mb-5"
     />
-    <div class="rounded-md border p-4">
-      <AppUomList
-        :data="data"
-        :pagination-meta="paginationMeta"
-        @page-change="handlePageChange"
-      />
-    </div>
+
+    <AppUomList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
diff --git a/app/components/content/user/list.vue b/app/components/content/user/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/user/list.vue
+++ b/app/components/content/user/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/warehouse/list.vue b/app/components/content/warehouse/list.vue
index f776d2df..a17ae9bb 100644
--- a/app/components/content/warehouse/list.vue
+++ b/app/components/content/warehouse/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppWarehouseList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
index 3e017f72..01b1ab55 100644
--- a/app/components/pub/my-ui/nav-header/filter.vue
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -48,7 +48,7 @@ function onFilterClick() {
 
 <template>
   <header>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
       <div class="relative w-64">
         <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
         <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index 10ad748b..63535847 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -24,11 +24,11 @@ function btnClick() {
 <template>
   <header>
     <div
-      class="flex items-center justify-between"
+      class="flex items-center justify-between mb-4 2xl:mb-5"
       :class="cn('', props.class)"
     >
       <div class="flex items-center">
-        <div class="font-semibold text-gray-900 md:text-base xl:text-lg">
+        <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
           <Icon
             :name="props.prep.icon!"
             class="mr-2 align-middle md:size-6"
@@ -66,4 +66,5 @@ function btnClick() {
       </div>
     </div>
   </header>
+  <Separator class="my-4 xl:my-5" />
 </template>