From a9ab75fd984945703f3ef7dff990811361c54696 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Fri, 31 Oct 2025 14:35:05 +0700
Subject: [PATCH 1/2] feat/readiology-order: added mcu

---
 .../app/mcu-order-item/list-entry.cfg.ts      | 35 ++++++++++
 .../app/mcu-order-item/list-entry.vue         | 26 ++++++++
 app/components/app/mcu-order-item/list.cfg.ts | 21 ++++++
 app/components/app/mcu-order-item/list.vue    | 20 ++++++
 app/components/app/mcu-order/detail.vue       | 32 ++++++++++
 app/components/app/mcu-order/entry.vue        |  0
 app/components/app/mcu-order/list-pk.vue      | 64 +++++++++++++++++++
 app/components/app/mcu-order/list.vue         | 64 +++++++++++++++++++
 .../app/mcu-src-category/switcher.vue         | 35 ++++++++++
 .../app/mcu-src/picker-accordion.vue          | 49 ++++++++++++++
 app/handlers/mcu-order-item.handler.ts        | 17 +++++
 app/handlers/mcu-order.handler.ts             | 17 +++++
 app/handlers/mcu-src-category.handler.ts      | 24 +++++++
 app/models/mcu-order.ts                       |  8 ++-
 app/services/mcu-order-item.service.ts        | 24 +++++++
 app/services/mcu-order.service.ts             | 24 +++++++
 app/services/mcu-src-category.service.ts      | 25 ++++++++
 app/services/mcu-src.service.ts               | 25 ++++++++
 18 files changed, 509 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/mcu-order-item/list-entry.cfg.ts
 create mode 100644 app/components/app/mcu-order-item/list-entry.vue
 create mode 100644 app/components/app/mcu-order-item/list.cfg.ts
 create mode 100644 app/components/app/mcu-order-item/list.vue
 create mode 100644 app/components/app/mcu-order/detail.vue
 create mode 100644 app/components/app/mcu-order/entry.vue
 create mode 100644 app/components/app/mcu-order/list-pk.vue
 create mode 100644 app/components/app/mcu-order/list.vue
 create mode 100644 app/components/app/mcu-src-category/switcher.vue
 create mode 100644 app/components/app/mcu-src/picker-accordion.vue
 create mode 100644 app/handlers/mcu-order-item.handler.ts
 create mode 100644 app/handlers/mcu-order.handler.ts
 create mode 100644 app/handlers/mcu-src-category.handler.ts
 create mode 100644 app/services/mcu-order-item.service.ts
 create mode 100644 app/services/mcu-order.service.ts
 create mode 100644 app/services/mcu-src-category.service.ts
 create mode 100644 app/services/mcu-src.service.ts

diff --git a/app/components/app/mcu-order-item/list-entry.cfg.ts b/app/components/app/mcu-order-item/list-entry.cfg.ts
new file mode 100644
index 00000000..294232f0
--- /dev/null
+++ b/app/components/app/mcu-order-item/list-entry.cfg.ts
@@ -0,0 +1,35 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+      { label: 'Catatan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrc.mcuSrcCategory.name', 'note'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/mcu-order-item/list-entry.vue b/app/components/app/mcu-order-item/list-entry.vue
new file mode 100644
index 00000000..6c93c5ac
--- /dev/null
+++ b/app/components/app/mcu-order-item/list-entry.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { config } from './list-entry.cfg'
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  requestItem: []
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
+    v-bind="config"
+    :rows="data"
+  />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('requestItem')">
+      <Icon name="i-lucide-plus" />
+      Pilih Item
+    </Button>
+  </div>
+</template>
diff --git a/app/components/app/mcu-order-item/list.cfg.ts b/app/components/app/mcu-order-item/list.cfg.ts
new file mode 100644
index 00000000..852bee25
--- /dev/null
+++ b/app/components/app/mcu-order-item/list.cfg.ts
@@ -0,0 +1,21 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [{}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrcCategory.name'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+}
diff --git a/app/components/app/mcu-order-item/list.vue b/app/components/app/mcu-order-item/list.vue
new file mode 100644
index 00000000..ef7438c6
--- /dev/null
+++ b/app/components/app/mcu-order-item/list.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { McuOrderItem } from '~/models/mcu-order-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border"
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/mcu-order/detail.vue b/app/components/app/mcu-order/detail.vue
new file mode 100644
index 00000000..fe161595
--- /dev/null
+++ b/app/components/app/mcu-order/detail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuOrder } from '~/models/mcu-order';
+
+const props = defineProps<{
+  data: McuOrder
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data?.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/mcu-order/entry.vue b/app/components/app/mcu-order/entry.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/mcu-order/list-pk.vue b/app/components/app/mcu-order/list-pk.vue
new file mode 100644
index 00000000..df296419
--- /dev/null
+++ b/app/components/app/mcu-order/list-pk.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>
diff --git a/app/components/app/mcu-order/list.vue b/app/components/app/mcu-order/list.vue
new file mode 100644
index 00000000..df296419
--- /dev/null
+++ b/app/components/app/mcu-order/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>
diff --git a/app/components/app/mcu-src-category/switcher.vue b/app/components/app/mcu-src-category/switcher.vue
new file mode 100644
index 00000000..78c54acb
--- /dev/null
+++ b/app/components/app/mcu-src-category/switcher.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuSrcCategory } from '~/models/mcu-src-category';
+
+const model = defineModel()
+const props = defineProps<{
+  data: McuSrcCategory[]
+}>()
+const emit = defineEmits<{
+  pick: [category: McuSrcCategory]
+}>()
+
+if (!model.value && props.data.length > 0) {
+  model.value = props.data[0]?.code
+}
+
+function pick(category: McuSrcCategory) {
+  model.value = category.code
+  emit('pick', category)
+}
+
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Kategori
+    </div>
+    <div class="-mx-1 [&_button]:mx-1 ">
+      <Button v-for="item, idx in data" :variant="model === item.code ? 'default' : 'outline'" @click="pick(item)">
+        {{ item.name }}
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/mcu-src/picker-accordion.vue b/app/components/app/mcu-src/picker-accordion.vue
new file mode 100644
index 00000000..a42834f9
--- /dev/null
+++ b/app/components/app/mcu-src/picker-accordion.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { McuSrc } from '~/models/mcu-src';
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+const data = defineModel({ type: Array as PropType<McuOrderItem[]>, required: true })
+defineProps<{
+  dataSource: McuSrc[]
+  // data: number[]
+}>()
+
+const emit = defineEmits<{
+  pick: [item: McuSrc]
+}>()
+
+function pick(item: McuSrc) {
+  emit('pick', item)
+  // if (data.value.some(e => e.mcuSrc_id === item.id)) {
+  //   const pos = data.value.map(e => e.mcuSrc_id).indexOf(item.id)
+  //   data.value.splice(pos, 1)
+  // } else {
+  //   data.value.push({
+  //     id: 0,
+  //     mcuOrder_id: 0,
+  //     mcuSrc_id: item.id,
+  //     createdAt: "",
+  //     updatedAt: "",
+  //   })
+  // }
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Daftar Item
+    </div>
+    <div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
+      <div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
+        <Button 
+          :variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
+          type="button"
+          @click="pick(item)"
+        > 
+          {{ item.name }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/handlers/mcu-order-item.handler.ts b/app/handlers/mcu-order-item.handler.ts
new file mode 100644
index 00000000..62e1861e
--- /dev/null
+++ b/app/handlers/mcu-order-item.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/mcu-order.handler.ts b/app/handlers/mcu-order.handler.ts
new file mode 100644
index 00000000..4b114dfc
--- /dev/null
+++ b/app/handlers/mcu-order.handler.ts
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/mcu-order.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/handlers/mcu-src-category.handler.ts b/app/handlers/mcu-src-category.handler.ts
new file mode 100644
index 00000000..8369666b
--- /dev/null
+++ b/app/handlers/mcu-src-category.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/mcu-src-category.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/models/mcu-order.ts b/app/models/mcu-order.ts
index e3899aab..35e4018c 100644
--- a/app/models/mcu-order.ts
+++ b/app/models/mcu-order.ts
@@ -1,14 +1,18 @@
 import { type Base, genBase } from "./_base"
+import { type Doctor, genDoctor } from "./doctor"
+import type { McuOrderItem } from "./mcu-order-item"
 
 export interface McuOrder extends Base {
   encounter_id: number
   doctor_id: number
+  doctor: Doctor
   status_code?: string
   specimenPickTime: string
   examinationDate: string
   number?: number
   temperature?: number
   mcuUrgencyLevel_code?: string
+  items: McuOrderItem[]
 }
 
 export function genMcuOrder(): McuOrder {
@@ -16,8 +20,10 @@ export function genMcuOrder(): McuOrder {
     ...genBase(),
     encounter_id: 0,
     doctor_id: 0,
+    doctor: genDoctor(),
     specimenPickTime: '',
-    examinationDate: ''
+    examinationDate: '',
+    items: []
   }
 }
 
diff --git a/app/services/mcu-order-item.service.ts b/app/services/mcu-order-item.service.ts
new file mode 100644
index 00000000..b7ffbbfe
--- /dev/null
+++ b/app/services/mcu-order-item.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-order-item'
+const name = 'mcu-order-item'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/mcu-order.service.ts b/app/services/mcu-order.service.ts
new file mode 100644
index 00000000..77e023d7
--- /dev/null
+++ b/app/services/mcu-order.service.ts
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-order'
+const name = 'mcu-order'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/mcu-src-category.service.ts b/app/services/mcu-src-category.service.ts
new file mode 100644
index 00000000..c154b1dc
--- /dev/null
+++ b/app/services/mcu-src-category.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-src-category'
+const name = 'mcu-src-category'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/mcu-src.service.ts b/app/services/mcu-src.service.ts
new file mode 100644
index 00000000..a7a466b8
--- /dev/null
+++ b/app/services/mcu-src.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/mcu-src'
+const name = 'mcu-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}

From f676c8a4b98c037965328cbde25a523942387f53 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Mon, 3 Nov 2025 08:11:02 +0700
Subject: [PATCH 2/2] feat/cp-lab-order-48: wip

---
 app/components/content/cp-lab-order/entry.vue | 155 ++++++++++++++++
 app/components/content/cp-lab-order/list.vue  | 169 ++++++++++++++++++
 app/components/content/cp-lab-order/main.vue  |  16 ++
 app/components/content/encounter/process.vue  |   3 +-
 4 files changed, 342 insertions(+), 1 deletion(-)
 create mode 100644 app/components/content/cp-lab-order/entry.vue
 create mode 100644 app/components/content/cp-lab-order/list.vue
 create mode 100644 app/components/content/cp-lab-order/main.vue

diff --git a/app/components/content/cp-lab-order/entry.vue b/app/components/content/cp-lab-order/entry.vue
new file mode 100644
index 00000000..4d0aa002
--- /dev/null
+++ b/app/components/content/cp-lab-order/entry.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU items
+const items = ref<McuOrderItem[]>([])
+
+// MCU Categories
+const mcuSrcCategoryRes = await getMcuCategoryList()
+const mcuSrcCategories = mcuSrcCategoryRes.body?.data
+const selectedMcuSrcCategory_code = ref('')
+
+// MCU Sources
+const mcuSrcs = ref<McuSrc[]>([])
+
+// const {
+//   data: items,
+//   fetchData: getItems,
+// } = usePaginatedList<McuOrderItem> ({
+//   fetchFn: async ({ page, search }) => {
+//     const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
+//     if (result.success) {
+//       items.value = result.body.data
+//     }
+//     return { success: result.success || false, body: result.body || {} }
+//   },
+//   entityName: 'mcu-order-item',
+// })
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail dan List Item Order Radiologi ',
+  icon: 'i-lucide-box',
+}
+
+const pickerDialogOpen = ref(false)
+
+onMounted(async () => {
+  await getItems()
+})
+
+watch(selectedMcuSrcCategory_code, async () => {
+  const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
+  mcuSrcs.value = res.body?.data
+})
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+async function pickItem(item: McuSrc) {
+  const exItem = items.value.find(e => e.mcuSrc_id === item.id)
+  if (exItem) {
+    await removeMcuOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createMcuOrderItem({
+      mcuOrder_id: intId,
+      mcuSrc_id: item.id,
+    })
+    await getItems()
+  }
+}
+
+async function getItems() {
+  const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
+  if (itemsRes.success) {
+      items.value = itemsRes.body.data
+  } else {
+    items.value = []
+  }
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="items"
+    @requestItem="requestItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
+    <McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
+</template>
diff --git a/app/components/content/cp-lab-order/list.vue b/app/components/content/cp-lab-order/list.vue
new file mode 100644
index 00000000..73b9361c
--- /dev/null
+++ b/app/components/content/cp-lab-order/list.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "cp-lab",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab PK',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id, scope_code: "cp-lab" }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>
diff --git a/app/components/content/cp-lab-order/main.vue b/app/components/content/cp-lab-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/cp-lab-order/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 71c7fe3d..45b89c2e 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -15,6 +15,7 @@ import AssesmentFunctionList from '~/components/content/assesment-function/list.
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
 import PrescriptionList from '~/components/content/prescription/list.vue'
+import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 
 const route = useRoute()
@@ -52,7 +53,7 @@ const tabs: TabItem[] = [
   { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
   { value: 'device', label: 'Order Alkes' },
   { value: 'mcu-radiology', label: 'Order Radiologi' },
-  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
   { value: 'mcu-lab-pa', label: 'Order Lab PA' },
   { value: 'medical-action', label: 'Order Ruang Tindakan' },