From 95e27a8b6f6dddf24c31df329aa9077f08b0c64d Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Sun, 30 Nov 2025 13:00:04 +0700
Subject: [PATCH] feat/micro-lab-order-50: wip

---
 app/components/app/mcu-order/micro-list.vue   |   2 +-
 .../content/micro-lab-order/entry.vue         | 150 +---------------
 .../content/micro-lab-order/list.vue          | 165 +-----------------
 .../pub/my-ui/nav-footer/ca-ed-su.vue         |   2 +-
 app/handlers/encounter-init.handler.ts        |  12 +-
 5 files changed, 13 insertions(+), 318 deletions(-)

diff --git a/app/components/app/mcu-order/micro-list.vue b/app/components/app/mcu-order/micro-list.vue
index df296419..4c749dc9 100644
--- a/app/components/app/mcu-order/micro-list.vue
+++ b/app/components/app/mcu-order/micro-list.vue
@@ -34,7 +34,7 @@ function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
     <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')">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-0' : '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">
diff --git a/app/components/content/micro-lab-order/entry.vue b/app/components/content/micro-lab-order/entry.vue
index 4d0aa002..e6ef9600 100644
--- a/app/components/content/micro-lab-order/entry.vue
+++ b/app/components/content/micro-lab-order/entry.vue
@@ -1,155 +1,11 @@
 <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 Entry from '~/components/content/mcu-order/entry.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<{
+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>
+  <Entry :encounter_id="encounter_id" scope-code="micro-lab" />
 </template>
diff --git a/app/components/content/micro-lab-order/list.vue b/app/components/content/micro-lab-order/list.vue
index 73b9361c..c2bda748 100644
--- a/app/components/content/micro-lab-order/list.vue
+++ b/app/components/content/micro-lab-order/list.vue
@@ -1,169 +1,8 @@
 <script setup lang="ts">
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import List from '~/components/content/mcu-order/list.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=""
-  />
+  <List scope-code="micro-lab" />
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ca-ed-su.vue b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
index 1f0f5915..9bf7466b 100644
--- a/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 
 const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
 const additionalClass = props.class ?? ''
-const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-8 [&_button]:!p-0' : ''
 
 type ClickType = 'cancel' | 'edit' | 'submit'
 
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 886be1a1..7b440730 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -40,6 +40,7 @@ const ChemoMedicineProtocolListAsync = defineAsyncComponent(
 const DeviceOrderAsync = defineAsyncComponent(() => import('~/components/content/device-order/main.vue'))
 const PrescriptionAsync = defineAsyncComponent(() => import('~/components/content/prescription/main.vue'))
 const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
+const MicroLabOrderAsync = defineAsyncComponent(() => import('~/components/content/micro-lab-order/main.vue'))
 const CprjAsync = defineAsyncComponent(() => import('~/components/content/cprj/entry.vue'))
 const RadiologyAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
 const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
@@ -138,8 +139,8 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  mcuLabMicro: {
-    id: 'mcu-lab-micro',
+  microLabOrder: {
+    id: 'micro-lab-order',
     title: 'Order Lab Mikro',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -311,10 +312,9 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.mcuLabPc['component'] = CpLabOrderAsync
     currentKeys.mcuLabPc['props'] = { encounter_id: id }
   }
-  if (currentKeys?.mcuLabMicro) {
-    // TODO: add component for mcuLabMicro
-    currentKeys.mcuLabMicro['component'] = null
-    currentKeys.mcuLabMicro['props'] = { encounter_id: id }
+  if (currentKeys?.microLabOrder) {
+    currentKeys.microLabOrder['component'] = MicroLabOrderAsync
+    currentKeys.microLabOrder['props'] = { encounter_id: id }
   }
   if (currentKeys?.mcuLabPa) {
     // TODO: add component for mcuLabPa