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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/app/components/app/device-order-item/entry-form.vue b/app/components/app/device-order-item/entry-form.vue
new file mode 100644
index 00000000..3ae2d200
--- /dev/null
+++ b/app/components/app/device-order-item/entry-form.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Pubs
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import * as CB from '~/components/pub/my-ui/combobox'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+// This scope
+import type { DeviceOrderItem } from '~/models/device-order-item';
+import type { Device } from '~/models/device';
+
+// Props
+const props = defineProps<{
+  data: DeviceOrderItem
+  devices: Device[]
+}>()
+
+// Refs
+const { devices } = toRefs(props)
+const deviceItems = ref<CB.Item[]>([])
+
+// Nav actions
+type ClickType = 'close' | 'save'
+
+// Emits
+const emit = defineEmits<{
+  close: [],
+  save: [data: DeviceOrderItem],
+  'update:searchText': [value: string]
+}>()
+
+// Reactivities
+watch(devices, (data) => {
+  deviceItems.value = CB.objectsToItems(data, 'code', 'name')
+})
+
+// Functions
+function searchDeviceText(value: string) {
+  emit('update:searchText', value)
+}
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
+      <DE.Label>Nama</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          v-model="data.device_code"
+          :items="deviceItems"
+          @update:searchText="searchDeviceText"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Jumlah</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" type="number" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/device-order-item/list-entry.config.ts b/app/components/app/device-order-item/list-entry.config.ts
index f2f3ef86..d47c4368 100644
--- a/app/components/app/device-order-item/list-entry.config.ts
+++ b/app/components/app/device-order-item/list-entry.config.ts
@@ -1,36 +1,35 @@
 import { defineAsyncComponent } from 'vue'
-import type { Config } from '~/components/pub/my-ui/data-table'
-
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, { width: 200 }, { width: 100 }],
   headers: [[{ label: 'Nama' }, { label: 'Jumlah' }, { label: '' }]],
-  keys: ['name', 'count', 'action'],
+  keys: ['device.name', 'quantity', 'action'],
   delKeyNames: [
     { key: 'name', label: 'Nama' },
     { key: 'count', label: 'Jumlah' },
   ],
-  skeletonSize: 10
+  skeletonSize: 10,
   // funcParsed: {
   //   parent: (rec: unknown): unknown => {
   //     const recX = rec as SmallDetailDto
   //     return recX.parent?.name || '-'
   //   },
   // },
-  // funcComponent: {
-  //   action(rec: object, idx: any) {
-  //     const res: RecComponent = {
-  //       idx,
-  //       rec: rec as object,
-  //       component: action,
-  //       props: {
-  //         size: 'sm',
-  //       },
-  //     }
-  //     return res
-  //   },
-  // }
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  }
 }
 
diff --git a/app/components/app/device-order-item/list-entry.vue b/app/components/app/device-order-item/list-entry.vue
index 26f6691d..b6031228 100644
--- a/app/components/app/device-order-item/list-entry.vue
+++ b/app/components/app/device-order-item/list-entry.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
 import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
 import { config } from './list-entry.config'
+import type { DeviceOrderItem } from '~/models/device-order-item';
+
+defineProps<{
+  data: DeviceOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  add: []
+}>()
 </script>
 
 <template>
-  <DataTable v-bind="config" :rows="[]" class="border mb-3 2xl:mb-4" />
+  <DataTable v-bind="config" :rows="data" class="border mb-3 2xl:mb-4" />
   <div>
-    <Button>
-      Tambah
+    <Button @click="emit('add')">
+      <Icon name="i-lucide-plus" />
+      Tambah Item
     </Button>
   </div>
 </template>
diff --git a/app/components/app/device-order/confirmation-info.vue b/app/components/app/device-order/confirmation-info.vue
new file mode 100644
index 00000000..6711091f
--- /dev/null
+++ b/app/components/app/device-order/confirmation-info.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DeviceOrder } from '~/models/device-order'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+defineProps<{
+  data: DeviceOrder | null | undefined
+}>()
+</script>
+<template>
+    <DE.Block mode="preview" label-size="small" class="!mb-0">
+      <DE.Cell>
+        <DE.Label>Tgl. Order</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ data?.createdAt?.substring(0, 10) }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>DPJP</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ data?.doctor?.employee?.person?.name }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+</template>
\ No newline at end of file
diff --git a/app/components/app/device-order/entry-form.vue b/app/components/app/device-order/entry-form.vue
index bea2b6eb..4e66c441 100644
--- a/app/components/app/device-order/entry-form.vue
+++ b/app/components/app/device-order/entry-form.vue
@@ -1,6 +1,25 @@
 <script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { DeviceOrder } from '~/models/device-order';
+
+defineProps<{
+  data: DeviceOrder
+}>()
 </script>
 
 <template>
-    Test
+  <DE.Block :col-count="2" mode="preview">
+    <DE.Cell>
+      <DE.Label>Tanggal</DE.Label>
+      <DE.Field>
+        {{ data?.createdAt?.substring(0, 10) }}
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>DPJP</DE.Label>
+      <DE.Field>
+        {{ data?.doctor?.employee?.person?.name }}
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
 </template>
diff --git a/app/components/app/device-order/list.config.ts b/app/components/app/device-order/list.config.ts
index 0e0d068d..04a6c9fc 100644
--- a/app/components/app/device-order/list.config.ts
+++ b/app/components/app/device-order/list.config.ts
@@ -1,10 +1,8 @@
-import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import type { DeviceOrder } from '~/models/device-order'
-// import type {} from 
-// import { defineAsyncComponent } from 'vue'
-
-// const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+import type { DeviceOrderItem } from '~/models/device-order-item'
 
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))
 
 export const config: Config = {
   cols: [{ width: 120 }, { }, { }, { }, { width: 50 }],
@@ -23,7 +21,21 @@ export const config: Config = {
   htmls: {
     items: (rec: unknown): unknown => {
       const recX = rec as DeviceOrder
-      return recX.items?.length || 0
+      if (recX.items?.length > 0) {
+        let output = '<table><tbody>'
+        recX.items.forEach((item: DeviceOrderItem) => {
+          output += '' +
+            '<tr>'+
+              `<td class="pe-10">${item.device?.name}</td>` +
+              '<td class="w-4">:</td>' +
+              `<td class="w-10">${item.quantity}</td>` +
+            '</tr>'
+        })
+        output += '</tbody></table>'
+        return output
+      } else {
+        return '-'
+      }
     },
   },
   parses: {
@@ -36,18 +48,18 @@ export const config: Config = {
     //   return recX.parent?.name || '-'
     // },
   },
-  // funcComponent: {
-  //   action(rec: object, idx: any) {
-  //     const res: RecComponent = {
-  //       idx,
-  //       rec: rec as object,
-  //       component: action,
-  //       props: {
-  //         size: 'sm',
-  //       },
-  //     }
-  //     return res
-  //   },
-  // }
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  }
 }
 
diff --git a/app/components/content/device-order/entry.vue b/app/components/content/device-order/entry.vue
index 6d76d685..5d87d960 100644
--- a/app/components/content/device-order/entry.vue
+++ b/app/components/content/device-order/entry.vue
@@ -1,24 +1,177 @@
 <script setup lang="ts">
-import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-
+// Composables
 import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { toast } from '~/components/pub/ui/toast'
 
+// Pub components
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// Refs / src
+import { type Device } from '~/models/device'
+import { getList as getDeviceList } from '~/services/device.service'
+
+// Device order things
+import { getDetail, remove, submit } from '~/services/device-order.service'
+import EntryForm from '~/components/app/device-order/entry-form.vue'
+
+// Items
+import {
+  getList as getItemList,
+  create as createItem,
+  update as updateItem,
+} from '~/services/device-order-item.service'
+import {
+  recId,
+  recAction,
+  recItem,
+  handleActionRemove,
+} from '~/handlers/device-order-item.handler'
+import { genDeviceOrderItem, type DeviceOrderItem } from '~/models/device-order-item'
 import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
-import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-
-const { backToList } = useQueryCRUDMode()
+import ItemEntry from '~/components/app/device-order-item/entry-form.vue'
 
+// Header
 const headerPrep: HeaderPrep = {
   title: 'Tambah Order Alkes',
   icon: 'i-lucide-box',
 }
 
-  function navClick(type: 'cancel' | 'submit') {
-    if (type === 'cancel') {
-      backToList()
-    }
+// Device order things
+const { getQueryParam } = useQueryParam()
+const rawId = getQueryParam('id')
+const id = typeof rawId === 'string' ? parseInt(rawId) : 0
+const dataRes = await getDetail(id, { includes: 'doctor,doctor-employee,doctor-employee-person' })
+const data = ref(dataRes.body?.data || null)
+const devices = ref<Device[]>([])
+
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
+
+// Items
+const {
+    data: items,
+    isLoading,
+    fetchData: getDeviceOrderItems,
+  } = usePaginatedList({
+    fetchFn: async (params: any) => {
+      const result = await getItemList({
+        'device-order-id': id,
+        includes: 'device',
+        search: params.search,
+        sort: 'createdAt:asc',
+        'page-number': params['page-number'] || 0,
+        'page-size': params['page-size'] || 10,
+      })
+      return { success: result.success || false, body: result.body || {} }
+    },
+    entityName: 'division',
+  })
+const selectedItem = ref<DeviceOrderItem>(genDeviceOrderItem())
+const isItemDetailDialogOpen = ref(false)
+const isItemEntryDialogOpen = ref(false)
+const isItemDelConfirmDialogOpen = ref(false)
+
+selectedItem.value.deviceOrder_id = id
+
+// Last navs
+const { backToList } = useQueryCRUDMode()
+
+// Reactivities
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+watch([recId, recAction], () => {
+  let item: DeviceOrderItem | null
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      item = pickItem()
+      if (item) {
+        isItemDetailDialogOpen.value = true
+      }
+      break
+    case ActionEvents.showEdit:
+      item = pickItem()
+      if (item) {
+        isItemEntryDialogOpen.value = true
+        getDevices('', item.device_code)
+      }
+      break
+    case ActionEvents.showConfirmDelete:
+      isItemDelConfirmDialogOpen.value = true
+      break
   }
+})
+
+onMounted(async () => {
+  await getDeviceOrderItems()
+})
+
+// Functions
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  } else if (type === 'delete') {
+    isDeleteConfirmationOpen.value = true
+  } else if (type === 'submit') {
+    isSubmitConfirmationOpen.value = true
+  }
+}
+
+async function removeOrder() {
+  const res = await remove(id)
+  if (res.success) {
+    backToList()
+  }
+}
+
+async function submitOrder() {
+  const res = await submit(id)
+  if (res.success) {
+    backToList()
+  }
+}
+
+function addItem() {
+  isItemEntryDialogOpen.value = true
+}
+
+async function getDevices(value: string, code?: string) {
+  const res = await getDeviceList({ 'search': value, 'code': code })
+  if (res.success) {
+    devices.value = res.body.data
+  } else {
+    devices.value = []
+  }
+}
+
+function pickItem(): DeviceOrderItem | null {
+  const item = items.value.find(item => item.id === recId.value)
+  selectedItem.value = item
+  return item
+}
+
+async function saveItem() {
+  let res: any;
+  if(!selectedItem.value.id) {
+    res = await createItem(selectedItem.value)
+  } else {
+    res = await updateItem(selectedItem.value.id, selectedItem.value)
+  }
+  if (res.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getDeviceOrderItems()
+    isItemEntryDialogOpen.value = false
+    selectedItem.value = genDeviceOrderItem()
+  }
+}
+
 </script>
 
 <template>
@@ -28,10 +181,74 @@ const headerPrep: HeaderPrep = {
     class="mb-4 xl:mb-5"
   />
 
-  <ItemListEntry />
+  <EntryForm :data="data" @add="addItem" />
+
+  <ItemListEntry :data="items" @add="addItem" />
+
   <Separator class="my-5" />
 
   <div class="w-full flex justify-center">
     <Nav @click="navClick" />
   </div>
+
+  <!-- Confirm delete -->
+  <RecordConfirmation
+    v-model:open="isDeleteConfirmationOpen"
+    action="delete"
+    :record="data"
+    @confirm="removeOrder()"
+  />
+
+  <!-- Confirm submit -->
+  <RecordConfirmation
+    v-model:open="isSubmitConfirmationOpen"
+    customTitle="Ajukan Order"
+    customMessage="Akan dilakukan pengajuan order alat kesehatan"
+    customConfirmText="Ajukan"
+    :record="data"
+    @confirm="submitOrder"
+    @cancel=""
+  />
+
+  <!-- Item entry -->
+  <Dialog
+    v-model:open="isItemEntryDialogOpen"
+    title="Item Order"
+    size="lg"
+    prevent-outside
+  >
+    <ItemEntry
+      :data="selectedItem"
+      :devices="devices"
+      @close="isItemEntryDialogOpen = false"
+      @save="saveItem"
+      @update:searchText="getDevices"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isItemDelConfirmDialogOpen"
+    action="delete"
+    size="md"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDeviceOrderItems, toast)"
+    @cancel=""
+  >
+    <DE.Block mode="preview" label-size="small">
+      <DE.Cell>
+        <DE.Label>Nama</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.device.name }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.quantity }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/device-order/list.vue b/app/components/content/device-order/list.vue
index 6c23cfc0..1ffa324d 100644
--- a/app/components/content/device-order/list.vue
+++ b/app/components/content/device-order/list.vue
@@ -1,72 +1,38 @@
 <script setup lang="ts">
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
 // Components
-import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import List from '~/components/app/device-order/list.vue'
-
-// Helpers
-import { usePaginatedList } from '~/composables/usePaginatedList'
 import { toast } from '~/components/pub/ui/toast'
-// import { useQueryMode } from '~/composables/useQueryMode'
-import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { type DeviceOrderFormData, DeviceOrderSchema  } from '~/schemas/device-order.schema'
-import type { DeviceOrder } from "~/models/device-order";
 
-// Handlers
+// Device order things
 import {
   recId,
   recAction,
   recItem,
   isReadonly,
-  isProcessing,
-  isFormEntryDialogOpen,
-  isRecordConfirmationOpen,
-  onResetState,
   handleActionSave,
-  handleActionEdit,
   handleActionRemove,
-  handleCancelForm,
 } from '~/handlers/device-order.handler'
+import { getList, submit } from '~/services/device-order.service'
+import type { ToastFn } from '~/handlers/_handler'
+import { type DeviceOrder } from "~/models/device-order";
+import ConfirmationInfo from '~/components/app/device-order/confirmation-info.vue'
 
-// Services
-import { getList, getDetail } from '~/services/device-order.service'
+// Props
+const props = defineProps<{
+  encounter_id: number
+}>()
 
-const route = useRoute()
-const { setQueryParams } = useQueryParam()
-
-const plainEid = route.params.id
-const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
-
-// const { mode, openForm, backToList } = useQueryMode()
-const { mode, goToEntry, backToList } = useQueryCRUDMode()
-// const { recordId } = useQueryCRUDRecordId()
-
-const {
-  data,
-  isLoading,
-  paginationMeta,
-  searchInput,
-  handlePageChange,
-  handleSearch,
-  fetchData: getMyList,
-} = usePaginatedList({
-  fetchFn: async (params: any) => {
-    const result = await getList({
-      'encounter-id': encounter_id,
-      search: params.search,
-      includes: 'doctor,doctor-employee,doctor-employee-person,items',
-      'page-number': params['page-number'] || 0,
-      'page-size': params['page-size'] || 10,
-    })
-    return { success: result.success || false, body: result.body || {} }
-  },
-  entityName: 'device-order',
-})
+const encounter_id = props.encounter_id
 
+// Header
 const voidFn = () => {}
 const headerPrep: HeaderPrep = {
   title: 'Order Alkes',
@@ -96,77 +62,81 @@ const headerPrep: HeaderPrep = {
           'id': saveResp.body?.data?.id.toString()
         })
       }
-      // await handleActionSave(recItem, getMyList, () => {}, () => {})
-      // goToEntry()
     },
   },
 }
 
+// List
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'encounter-id': encounter_id,
+      search: params.search,
+      includes: 'doctor,doctor-employee,doctor-employee-person,items,items-device',
+      page: params.page,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device-order',
+})
+
+// Selected item
+const selectedItem = ref<DeviceOrder | null>()
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
+const { setQueryParams } = useQueryParam()
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 watch([recId, recAction], () => {
+  let item: DeviceOrder | null
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getMyDetail(recId.value)
-      isReadonly.value = true
+      setQueryParams({
+        'mode': 'entry',
+        'id': recId.value.toString()
+      })
       break
-    case ActionEvents.showEdit:
-      getMyDetail(recId.value)
-      isReadonly.value = false
+    case ActionEvents.showConfirmSubmit:
+      selectedItem.value = pickItem()
+      isSubmitConfirmationOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
+      selectedItem.value = pickItem()
+      isDeleteConfirmationOpen.value = true
       break
   }
+  recAction.value = '';
 })
 
-// watch([isFormEntryDialogOpen], async () => {
-//   if (isFormEntryDialogOpen.value) {
-//     isFormEntryDialogOpen.value = false;
-//     const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
-//     if (saveResp.success) {
-//       setQueryParams({
-//         'mode': 'entry',
-//         'id': saveResp.body?.data?.id.toString()
-//       })
-//     }
-//   }
-// })
-
-// Watch for row actions when recId or recAction changes
-// onMounted(async () => {
-//   await getMyList()
-// })
-
-// Functions
-const getMyDetail = async (id: number | string) => {
-  const result = await getDetail(id)
+async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
+  const result = await submit(id)
   if (result.success) {
-    const currentValue = result.body?.data || {}
-    recItem.value = currentValue
-    isFormEntryDialogOpen.value = true
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
   }
 }
 
-function cancel(data: DeviceOrder) {
-  recId.value = data.id
-  recItem.value = data
-  isRecordConfirmationOpen.value = true
+function pickItem(): DeviceOrder | null {
+  const item = data.value.find(item => item.id === recId.value)
+  selectedItem.value = item
+  return item
 }
-
-function edit(data: DeviceOrder) {
-  setQueryParams({
-    'mode': 'entry',
-    'id': data.id.toString()
-  })
-  recItem.value = data
-}
-
-function submit(data: DeviceOrder) {
-}
-
 </script>
 
 <template>
@@ -175,42 +145,39 @@ function submit(data: DeviceOrder) {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
 
   <List
     v-if="!isLoading.dataListLoading"
     :data="data"
     :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+  <!-- 
     @cancel="cancel"
     @edit="edit"
     @submit="submit"
-    @page-change="handlePageChange"
-  />
+   -->
 
-  <!-- Record Confirmation Modal -->
+  <!-- Submit Record Confirmation Modal -->
   <RecordConfirmation
-    v-model:open="isRecordConfirmationOpen"
+    v-model:open="isSubmitConfirmationOpen"
+    customTitle="Ajukan Order"
+    customMessage="Akan dilakukan pengajuan order alat kesehatan"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
+  >
+    <ConfirmationInfo :data="selectedItem" />
+  </RecordConfirmation>
+
+  <!-- Del Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isDeleteConfirmationOpen"
     action="delete"
     :record="recItem"
     @confirm="() => handleActionRemove(recId, getMyList, toast)"
-    @cancel=""
   >
-    <template #default="{ record }">
-      <div class="text-sm">
-        <p>
-          <strong>ID:</strong>
-          {{ record?.id }}
-        </p>
-        <p v-if="record?.name">
-          <strong>Nama:</strong>
-          {{ record.name }}
-        </p>
-        <p v-if="record?.code">
-          <strong>Kode:</strong>
-          {{ record.code }}
-        </p>
-      </div>
-    </template>
+    <ConfirmationInfo :data="selectedItem" />
   </RecordConfirmation>
 </template>
diff --git a/app/components/content/device-order/main.vue b/app/components/content/device-order/main.vue
index ae5a9ca8..ff8722de 100644
--- a/app/components/content/device-order/main.vue
+++ b/app/components/content/device-order/main.vue
@@ -3,10 +3,14 @@
 import List from './list.vue'
 import Entry from './entry.vue'
 
-const { mode } = useQueryMode()
+defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
 </script>
 
 <template>
-  <List v-if="mode === 'list'" />
-  <Entry v-else />
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
 </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index c72f6835..7f62f5d1 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -64,9 +64,7 @@ const tabs: TabItem[] = [
   { value: 'consent', label: 'General Consent' },
   { value: 'patient-note', label: 'CPRJ' },
   { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
-  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter: data } },
-  { value: 'mcu-radiology', label: 'Order Radiologi' },
-  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.id } },
   { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
   { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
diff --git a/app/models/device-order-item.ts b/app/models/device-order-item.ts
index fa16638a..31b3ee47 100644
--- a/app/models/device-order-item.ts
+++ b/app/models/device-order-item.ts
@@ -1,16 +1,19 @@
 import { type Base, genBase } from "./_base"
+import { genDevice, type Device } from "./device"
 
 export interface DeviceOrderItem extends Base {
   deviceOrder_id: number
-  device_id: number
-  count: number
+  device_code: string
+  device: Device
+  quantity: number
 }
 
 export function genDeviceOrderItem(): DeviceOrderItem {
   return {
     ...genBase(),
     deviceOrder_id: 0,
-    device_id: 0,
-    count: 0,
+    device_code: '',
+    device: genDevice(),
+    quantity: 0,
   }
 }
diff --git a/app/models/device-order.ts b/app/models/device-order.ts
index f2e88b0f..cbb682ad 100644
--- a/app/models/device-order.ts
+++ b/app/models/device-order.ts
@@ -1,9 +1,11 @@
 import { type Base, genBase } from "./_base"
 import type { DeviceOrderItem } from "./device-order-item"
+import { genDoctor, type Doctor } from "./doctor"
 
 export interface DeviceOrder extends Base {
   encounter_id: number
-  doctor_id: number
+  doctor_code: number
+  doctor: Doctor
   status_code?: string
   items: DeviceOrderItem[]
 }
@@ -12,7 +14,8 @@ export function genDeviceOrder(): DeviceOrder {
   return {
     ...genBase(),
     encounter_id: 0,
-    doctor_id: 0,
+    doctor_code: 0,
+    doctor: genDoctor(),
     items: []
   }
 }
diff --git a/app/services/device-order.service.ts b/app/services/device-order.service.ts
index b8d5372c..cf70420d 100644
--- a/app/services/device-order.service.ts
+++ b/app/services/device-order.service.ts
@@ -13,8 +13,8 @@ export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id, name)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {
@@ -24,3 +24,16 @@ export function update(id: number | string, data: any) {
 export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
+
+export async function submit(id: number) {
+  try {
+    const resp = await xfetch(`${path}/${id}/submit`, 'PATCH')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
+  }
+}
\ No newline at end of file