diff --git a/app/components/content/procedure-room-order/entry.vue b/app/components/content/procedure-room-order/entry.vue
index e691fa9c..ad780e5b 100644
--- a/app/components/content/procedure-room-order/entry.vue
+++ b/app/components/content/procedure-room-order/entry.vue
@@ -1,40 +1,135 @@
 <script setup lang="ts">
 //
 import * as CH from '~/components/pub/my-ui/content-header'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import NavEntry from '~/components/pub/my-ui/nav-footer/ba-de-dr-su.vue'
+import NavDetail from '~/components/pub/my-ui/nav-footer/ba.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
 
-//
+// Procedure Room
+import type { ProcedureRoom } from '~/models/procedure-room'
+import { getList as getProcedureRoomList } from '~/services/procedure-room.service'
 import PRSwitcher from '~/components/app/procedure-room/switcher.vue'
-
 import PRMultiOptPicker  from '~/components/app/procedure-room/multi-opt-picker.vue'
-import PRSingleOptPicker  from '~/components/app/procedure-room/single-opt-picker.vue'
+import PRPicker  from '~/components/app/procedure-room/picker.vue'
 
-// Material Package & Item
+// Material Package
+import type { MaterialPackage } from '~/models/material-package'
+import { getList as getMaterialPackageList } from '~/services/material-package.service'
+
+// Material Package Item
 import type { MaterialPackageItem } from '~/models/material-package-item'
-import { getValueLabelList } from '~/services/material-package.service'
-import { getList as getMaterialPackageItemList } from '~/services/material-package-item.service'
+import { getList as getmaterialPackageItems } from '~/services/material-package-item.service'
 import MPSwitcher from '~/components/app/material-package/switcher.vue'
 import MPIQuickList from '~/components/app/material-package-item/quick-list.vue'
 
-const vFn = () => {} // Void function
+// Main data
+import { getDetail } from '~/services/procedure-room-order.service'
+import Detail from '~/components/app/procedure-room-order/detail.vue'
+
+// Items data
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item'
+import {
+  getList as getOrderItemList,
+  create as createOrderItem,
+  remove as removeOrderItem,
+} from '~/services/procedure-room-order-item.service'
+import ItemListEntry from '~/components/app/procedure-room-order-item/list-entry.vue'
+import ItemListDetail from '~/components/app/procedure-room-order-item/list-detail.vue'
+
+// data
+const { backToList, crudQueryParams } = useQueryCRUD()
+const id = crudQueryParams.value.recordId
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+const items = ref<ProcedureRoomOrderItem[]>([])
+
+// Header
 const headerConfig: CH.Config = {
   title: 'Order Ruang Tindakan',
   icon: 'i-lucide-box',
 }
 
+//
+const pickerDialogOpen = ref(false)
+const procedureRooms = ref<ProcedureRoom[]>([])
 const procedureRoomType = ref('procedure')
+getProcedureRooms(procedureRoomType.value)
 watch(procedureRoomType, async (newValue) => {
-  
+  getProcedureRooms(newValue)
 })
-const materialPackageItems = await getValueLabelList()
-const selectedMaterialPackage = ref('')
 
-const materialPackageItemList = ref<MaterialPackageItem[]>([])
+//
+const materialPackages = ref<MaterialPackage[]>([])
+const selectedMaterialPackage = ref('')
+const res = await getMaterialPackageList()
+if (res.success) {
+  materialPackages.value = res.body.data
+}
+
+//
+const materialPackageItems = ref<MaterialPackageItem[]>([])
 watch(selectedMaterialPackage, async (newValue) => {
-  const res = await getMaterialPackageItemList({ 'material-package-code': newValue, includes: 'material' })
+  const res = await getmaterialPackageItems({
+    'material-package-code': selectedMaterialPackage.value,
+    includes: 'material'
+  })
   if (res.success) {
-    materialPackageItemList.value = res.body.data
+    materialPackageItems.value = res.body.data
   }
 })
+
+// last flow
+onMounted(async () => {
+  await getItems()
+})
+
+///// functions
+async function getProcedureRooms(typeCode: string) {
+  const res = await getProcedureRoomList({ 'type-code': typeCode, includes: 'infra' })
+  if (res.success) {
+    procedureRooms.value = res.body.data
+  }
+}
+
+async function getItems() {
+  const res = await getOrderItemList({
+    'procedure-room-order-id': crudQueryParams.value.recordId,
+    includes: 'procedureRoom,procedureRoom-infra',
+  })
+  if (res.success) {
+    items.value = res.body.data
+  }
+}
+
+async function pickItem(item: ProcedureRoom) {
+  const exItem = items.value.find(e => e.procedureRoom_code === item.code)
+  if (exItem) {
+    await removeOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createOrderItem({
+      procedureRoomOrder_id: intId,
+      procedureRoom_code: item.code,
+    })
+    await getItems()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
 </script>
 
 <template>
@@ -42,13 +137,37 @@ watch(selectedMaterialPackage, async (newValue) => {
 
   <Separator class="mb-4" />
 
-  <PRSwitcher v-model="procedureRoomType" />
+  <Detail :data="data" />
 
-  <PRMultiOptPicker v-if="procedureRoomType == 'procedure'" />
+  <template v-if="data.status_code == 'new'">
+    <ItemListEntry :data="items" @requestItem="requestItem" />
+    <MPSwitcher :data="materialPackages" v-model="selectedMaterialPackage" />
+  </template>
+  <template v-else>
+    <ItemListDetail :data="items" @requestItem="requestItem" />
+  </template>
+  <MPIQuickList :data="materialPackageItems" />
 
-  <PRSingleOptPicker v-else />
+  <div class="w-full flex justify-center">
+    <NavEntry v-if="data.status_code == 'new'" @click="navClick" />
+    <NavDetail v-else @click="navClick" />
+  </div>
 
-  <MPSwitcher :items="materialPackageItems" v-model="selectedMaterialPackage" />
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <PRSwitcher v-model="procedureRoomType" />
+    <PRPicker
+      :data="procedureRooms"
+      :pick-mode="procedureRoomType == 'procedure' ? 'multi' : 'single'"
+      v-model="items"
+      @pick="pickItem"
+    />
 
-  <MPIQuickList :data="materialPackageItemList" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
 </template>
diff --git a/app/components/content/procedure-room-order/list.vue b/app/components/content/procedure-room-order/list.vue
index 40f5372d..d742941c 100644
--- a/app/components/content/procedure-room-order/list.vue
+++ b/app/components/content/procedure-room-order/list.vue
@@ -2,38 +2,37 @@
 // Composables
 import { usePaginatedList } from '~/composables/usePaginatedList'
 
+// Handlers
+import type { ToastFn } from '~/handlers/_handler'
+
 // Pubs component
 import { toast } from '~/components/pub/ui/toast'
-import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
-// Handlers
+// Order
 import {
   recId,
   recAction,
   recItem,
-  isReadonly,
   isRecordConfirmationOpen,
   handleActionRemove,
-  handleActionSave,
 } from '~/handlers/procedure-room-order.handler'
-
-// Services
-import { getList, getDetail } from '~/services/procedure-room-order.service'
-import List from '~/components/app/procedure-room-order/list.vue'
+import { getList, create, submit } from '~/services/procedure-room-order.service'
 import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
-// import { submit } from '~/services/prescription.service'
-import type { ToastFn } from '~/handlers/_handler'
+import List from '~/components/app/procedure-room-order/list.vue'
 
+// Common prep
 const route = useRoute()
 const { setQueryParams } = useQueryParam()
-
-const isSubmitConfirmationOpen = ref(false)
+const { crudQueryParams } = useQueryCRUD()
 
 const plainEid = route.params.id
 const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
+const isSubmitConfirmationOpen = ref(false)
 
+// Main data
 const {
   data,
   isLoading,
@@ -44,7 +43,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       'encounter-id': encounter_id,
-      // includes: '',
+      includes: 'items',
       search: params.search,
       page: params.page,
       'page-number': params['page-number'] || 0,
@@ -55,7 +54,7 @@ const {
   entityName: 'prescription'
 })
 
-const vFn = () => {} // Void function
+// Header things
 const headerPrep: HeaderPrep = {
   title: 'Order Ruang Tindakan',
   icon: 'i-lucide-box',
@@ -76,17 +75,35 @@ const headerPrep: HeaderPrep = {
     onClick: async () => {
       recItem.value = null
       recId.value = 0
-      setQueryParams({
-        'mode': 'entry',
-      })
+      const res = await create({ encounter_id })
+      if (res.success) {
+        crudQueryParams.value = { mode: 'entry', recordId: res.body?.data.id.toString() || '0' }
+      }
     },
   },
 }
 
+// list actions
+const timestamp = ref<any>({})
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+provide('timestamp', timestamp)
+watch(recAction, () => {
+  if (!recAction.value) {
+    return
+  } else if (recAction.value === ActionEvents.showDetail) {
+    crudQueryParams.value = { mode: 'entry', recordId: recId.value || '0' }
+  } else if (recAction.value === ActionEvents.showConfirmSubmit) {
+    isSubmitConfirmationOpen.value = true
+  } else if (recAction.value === ActionEvents.showConfirmDelete) {
+    isRecordConfirmationOpen.value = true
+  }
+  recAction.value = ''
+})
+
+///// functions
 
 function confirmCancel(data: ProcedureRoomOrder) {
   recId.value = data.id
@@ -109,13 +126,13 @@ function confirmSubmit(data: ProcedureRoomOrder) {
 }
 
 async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
-  // const result = await submit(id)
-  // if (result.success) {
-  //   toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
-  //   setTimeout(refresh, 300)
-  // } else {
-  //   toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
-  // }
+  const result = await submit(id)
+  if (result.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
+  }
 }
 </script>
 
@@ -141,7 +158,7 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
     <div class="flex mb-2">
       <div class="w-20">Tanggal</div>
       <div class="w-4">:</div>
-      <div class="">{{ recItem.createdAt.substring(0, 10) }}</div>
+      <div class="">{{ recItem.createdAt?.substring(0, 10) }}</div>
     </div>
     <div class="flex">
       <div class="w-20">DPJP</div>
diff --git a/app/components/content/procedure-room-order/main.vue b/app/components/content/procedure-room-order/main.vue
index 033d093f..61250fe1 100644
--- a/app/components/content/procedure-room-order/main.vue
+++ b/app/components/content/procedure-room-order/main.vue
@@ -7,10 +7,11 @@ const props = defineProps<{
   encounter_id: number
 }>()
 
-const { mode } = useQueryCRUDMode()
+const { crudQueryParams } = useQueryCRUD()
 </script>
 
 <template>
-  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <List v-if="crudQueryParams.mode === 'list'" :encounter_id="encounter_id" />
   <Entry v-else :encounter_id="encounter_id" />
+  <div class="hidden">{{ crudQueryParams.mode }}</div>
 </template>
diff --git a/app/models/procedure-room-order.ts b/app/models/procedure-room-order.ts
index a77ed700..4d1bb8c5 100644
--- a/app/models/procedure-room-order.ts
+++ b/app/models/procedure-room-order.ts
@@ -4,18 +4,19 @@ import { genProcedureRoom, type ProcedureRoom } from "./procedure-room";
 
 export interface ProcedureRoomOrder extends Base {
 	encounter_id: number
-	infra_code: string
-	procedureRoom: ProcedureRoom
-	materialPackage_code: string
+	materialPackage_code?: string
 	materialPackage: MaterialPackage
+  items?: ProcedureRoom[]
+}
+
+export interface CreateDto {
+  encounter_id: number
 }
 
 export function genProcedureRoomOrder(): ProcedureRoomOrder {
   return {
     ...genBase(),
     encounter_id: 0,
-    infra_code: '',
-    procedureRoom: genProcedureRoom(),
     materialPackage_code: '',
     materialPackage: genMaterialPackage(),
   }
diff --git a/app/services/procedure-room-order.service.ts b/app/services/procedure-room-order.service.ts
index 8dd6bfd0..b5c354c3 100644
--- a/app/services/procedure-room-order.service.ts
+++ b/app/services/procedure-room-order.service.ts
@@ -1,11 +1,11 @@
 // Base
-import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
+import type { ProcedureRoomOrder, CreateDto } from '~/models/procedure-room-order'
 import * as base from './_crud-base'
 
-const name = 'procedure-room'
+const name = 'procedure-room-order'
 const path = `/api/v1/${name}`
 
-export function create(data: ProcedureRoomOrder) {
+export function create(data: CreateDto) {
   return base.create(path, data, name)
 }
 
@@ -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 = null) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: ProcedureRoomOrder) {
@@ -24,3 +24,19 @@ export function update(id: number | string, data: ProcedureRoomOrder) {
 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 = {}
+    if (resp.success) {
+      result.success = resp.success
+      result.body = (resp.body as Record<string, any>) || {}
+      return result
+    }
+  } catch (error) {
+    console.error(`Error submitting ${name}:`, error)
+    throw new Error(`Failed to submit ${name}`)
+  }
+}