diff --git a/app/components/app/procedure-room-order/form.vue b/app/components/app/procedure-room-order/form.vue
new file mode 100644
index 00000000..ff6c3835
--- /dev/null
+++ b/app/components/app/procedure-room-order/form.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+
+</template>
diff --git a/app/components/app/procedure-room-order/list.cfg.ts b/app/components/app/procedure-room-order/list.cfg.ts
new file mode 100644
index 00000000..30fdc894
--- /dev/null
+++ b/app/components/app/procedure-room-order/list.cfg.ts
@@ -0,0 +1,54 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Tgl. Order' },
+    { label: 'No. Order' },
+    { label: 'Ruangan' },
+    { label: 'Status' },
+    { label: 'Resume' },
+    { label: '' },
+  ]],
+
+  keys: ['date', 'number', 'room', 'status', 'resume', 'action'],
+
+  delKeyNames: [
+    { key: 'createdAt', label: 'Tgl. Order' },
+    { key: 'id', label: 'No. Order' },
+  ],
+
+  parses: {
+    date: (rec: any) => {
+      const recX = rec as ProcedureRoomOrder
+      return recX.createdAt ? recX.createdAt.substring(0, 10) : ''
+
+    },
+    number: (rec: any) => {
+      const recX = rec as ProcedureRoomOrder
+      return `ORT-${recX.id}`
+    },
+    room: (rec: any) => {
+      const recX = rec as ProcedureRoomOrder
+      return recX.procedureRoom?.infra?.name || '--belum terdata0--'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/procedure-room-order/list.vue b/app/components/app/procedure-room-order/list.vue
new file mode 100644
index 00000000..a97ea3fb
--- /dev/null
+++ b/app/components/app/procedure-room-order/list.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  tableConfig?: Config
+}
+const props = withDefaults(defineProps<Props>(), {
+  tableConfig: () => config,
+})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="props.tableConfig"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/procedure-room-order/entry.vue b/app/components/content/procedure-room-order/entry.vue
new file mode 100644
index 00000000..e691fa9c
--- /dev/null
+++ b/app/components/content/procedure-room-order/entry.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+//
+import * as CH from '~/components/pub/my-ui/content-header'
+
+//
+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'
+
+// 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 MPSwitcher from '~/components/app/material-package/switcher.vue'
+import MPIQuickList from '~/components/app/material-package-item/quick-list.vue'
+
+const vFn = () => {} // Void function
+const headerConfig: CH.Config = {
+  title: 'Order Ruang Tindakan',
+  icon: 'i-lucide-box',
+}
+
+const procedureRoomType = ref('procedure')
+watch(procedureRoomType, async (newValue) => {
+  
+})
+const materialPackageItems = await getValueLabelList()
+const selectedMaterialPackage = ref('')
+
+const materialPackageItemList = ref<MaterialPackageItem[]>([])
+watch(selectedMaterialPackage, async (newValue) => {
+  const res = await getMaterialPackageItemList({ 'material-package-code': newValue, includes: 'material' })
+  if (res.success) {
+    materialPackageItemList.value = res.body.data
+  }
+})
+</script>
+
+<template>
+  <CH.ContentHeader v-bind="headerConfig" />
+
+  <Separator class="mb-4" />
+
+  <PRSwitcher v-model="procedureRoomType" />
+
+  <PRMultiOptPicker v-if="procedureRoomType == 'procedure'" />
+
+  <PRSingleOptPicker v-else />
+
+  <MPSwitcher :items="materialPackageItems" v-model="selectedMaterialPackage" />
+
+  <MPIQuickList :data="materialPackageItemList" />
+</template>
diff --git a/app/components/content/procedure-room-order/list.vue b/app/components/content/procedure-room-order/list.vue
new file mode 100644
index 00000000..40f5372d
--- /dev/null
+++ b/app/components/content/procedure-room-order/list.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+// Composables
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+// Pubs component
+import { toast } from '~/components/pub/ui/toast'
+import { 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
+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 type { ProcedureRoomOrder } from '~/models/procedure-room-order'
+// import { submit } from '~/services/prescription.service'
+import type { ToastFn } from '~/handlers/_handler'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const isSubmitConfirmationOpen = ref(false)
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  fetchData: getMyList,
+} = usePaginatedList<ProcedureRoomOrder>({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'encounter-id': encounter_id,
+      // includes: '',
+      search: params.search,
+      page: params.page,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription'
+})
+
+const vFn = () => {} // Void function
+const headerPrep: HeaderPrep = {
+  title: 'Order Ruang Tindakan',
+  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
+      setQueryParams({
+        'mode': 'entry',
+      })
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+function confirmCancel(data: ProcedureRoomOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function goToEdit(data: ProcedureRoomOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function confirmSubmit(data: ProcedureRoomOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isSubmitConfirmationOpen.value = true
+}
+
+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' })
+  // }
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="confirmCancel"
+    @edit="goToEdit"
+    @submit="confirmSubmit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <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>
+    <div class="flex">
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
+    </div>
+  </RecordConfirmation>
+
+  <RecordConfirmation
+    v-model:open="isSubmitConfirmationOpen"
+    action="delete"
+    customTitle="Ajukan Resep"
+    customMessage="Proses akan mengajukan resep ini untuk diproses lebih lanjut. Lanjutkan?"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <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>
+    <div class="flex">
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
+    </div>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/procedure-room-order/main.vue b/app/components/content/procedure-room-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/procedure-room-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/const/key-val/clinical.ts b/app/const/key-val/clinical.ts
index d6a37b43..0c33a59c 100644
--- a/app/const/key-val/clinical.ts
+++ b/app/const/key-val/clinical.ts
@@ -18,6 +18,7 @@ export type MedObstacleCode = 'hearing' | 'sight' | 'physical' | 'emotional' | '
 export type LearnMethodCode = 'demo' | 'discuss-leaflet'
 export type LangClassCode = 'ind' | 'region' | 'foreign'
 export type TranslatorSrcCode = 'team' | 'family'
+export type ProcedureRoomTypeCode = 'procedure' | 'operation'
 
 export const subjectCodes: Record<SubjectCode, string> = {
   detail: 'Detail',
@@ -224,3 +225,8 @@ export const translatorSrcCodes: Record<TranslatorSrcCode, string> = {
   team: 'Tim Penerjemah',
   family: 'Keluarga',
 }
+
+export const procedureRoomTypeCodes: Record<ProcedureRoomTypeCode, string> = {
+  procedure: 'Ruang Tindakan',
+  operation: 'Ruang Operasi',
+}
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 3e1e85f3..6ef21d7c 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 ProcedureRoomOrderAsync = defineAsyncComponent(() => import('~/components/content/procedure-room-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'))
@@ -162,8 +163,8 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  actionRoomOrder: {
-    id: 'action-room-order',
+  procedureRoomOrder: {
+    id: 'procedure-room-order',
     title: 'Order Ruang Tindakan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -209,13 +210,13 @@ const defaultKeys: Record<string, any> = {
     title: 'SPRI',
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
-  },  
+  },
   refBack: {
     id: 'reference-back',
     title: 'PRB',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
-  },  
+  },
   screening: {
     id: 'screening',
     title: 'Skrinning MPP',
@@ -369,10 +370,9 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.paLabOrder['component'] = null
     currentKeys.paLabOrder['props'] = { encounter_id: id }
   }
-  if (currentKeys?.actionRoomOrder) {
-    // TODO: add component for actionRoomOrder
-    currentKeys.actionRoomOrder['component'] = null
-    currentKeys.actionRoomOrder['props'] = { encounter_id: id }
+  if (currentKeys?.procedureRoomOrder) {
+    currentKeys.procedureRoomOrder['component'] = ProcedureRoomOrderAsync
+    currentKeys.procedureRoomOrder['props'] = { encounter_id: id }
   }
   if (currentKeys?.mcuResult) {
     // TODO: add component for mcuResult
diff --git a/app/handlers/procedure-room-order.handler.ts b/app/handlers/procedure-room-order.handler.ts
new file mode 100644
index 00000000..d2535274
--- /dev/null
+++ b/app/handlers/procedure-room-order.handler.ts
@@ -0,0 +1,17 @@
+import { genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/procedure-room-order.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
diff --git a/app/models/infra.ts b/app/models/infra.ts
index 80119748..e7ebe681 100644
--- a/app/models/infra.ts
+++ b/app/models/infra.ts
@@ -1,10 +1,27 @@
-export interface Infra {
-  id?: number
+import { type Base, genBase } from "./_base";
+import { genProcedureRoom, type ProcedureRoom } from "./procedure-room";
+
+export interface Infra extends Base {
   code: string
   name: string
   infraGroup_code: string
   parent_id?: number | string | null
+  unit_id?: number | string | null
   specialist_id?: number | string | null
   subspecialist_id?: number | string | null
-  unit_id?: number | string | null
+  procedureRoom?: ProcedureRoom
+}
+
+export function genInfra(): Infra {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    infraGroup_code: '',
+    parent_id: null,
+    unit_id: null,
+    specialist_id: null,
+    subspecialist_id: null,
+    procedureRoom: genProcedureRoom(),
+  }
 }
diff --git a/app/models/procedure-room-order.ts b/app/models/procedure-room-order.ts
new file mode 100644
index 00000000..a77ed700
--- /dev/null
+++ b/app/models/procedure-room-order.ts
@@ -0,0 +1,22 @@
+import { type Base, genBase } from "./_base";
+import { genMaterialPackage, type MaterialPackage } from "./material-package";
+import { genProcedureRoom, type ProcedureRoom } from "./procedure-room";
+
+export interface ProcedureRoomOrder extends Base {
+	encounter_id: number
+	infra_code: string
+	procedureRoom: ProcedureRoom
+	materialPackage_code: string
+	materialPackage: MaterialPackage
+}
+
+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
new file mode 100644
index 00000000..8dd6bfd0
--- /dev/null
+++ b/app/services/procedure-room-order.service.ts
@@ -0,0 +1,26 @@
+// Base
+import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
+import * as base from './_crud-base'
+
+const name = 'procedure-room'
+const path = `/api/v1/${name}`
+
+export function create(data: ProcedureRoomOrder) {
+  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: ProcedureRoomOrder) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}