diff --git a/app/components/app/procedure-room-order-item/list-detail.cfg.ts b/app/components/app/procedure-room-order-item/list-detail.cfg.ts
new file mode 100644
index 00000000..cf0f6dab
--- /dev/null
+++ b/app/components/app/procedure-room-order-item/list-detail.cfg.ts
@@ -0,0 +1,16 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+export const config: Config = {
+  cols: [{}, {}, { classVal: '!p-0.5' }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Catatan' },
+    ],
+  ],
+
+  keys: ['procedureRoom.code', 'procedureRoom.infra.name', 'note'],
+}
diff --git a/app/components/app/procedure-room-order-item/list-detail.vue b/app/components/app/procedure-room-order-item/list-detail.vue
new file mode 100644
index 00000000..75727a72
--- /dev/null
+++ b/app/components/app/procedure-room-order-item/list-detail.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+import { config } from './list-detail.cfg'
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+defineProps<{
+  data: ProcedureRoomOrderItem[]
+}>()
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Order Ruang
+    </div>
+    <DataTable class="border mb-3 2xl:mb-4"
+      v-bind="config"
+      :rows="data"
+    />
+  </div>
+</template>
diff --git a/app/components/app/procedure-room-order-item/list-entry.cfg.ts b/app/components/app/procedure-room-order-item/list-entry.cfg.ts
new file mode 100644
index 00000000..2afcd855
--- /dev/null
+++ b/app/components/app/procedure-room-order-item/list-entry.cfg.ts
@@ -0,0 +1,43 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Catatan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['procedureRoom.code', 'procedureRoom.infra.name', 'note'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+
+  components: {
+    note(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: input,
+      }
+    },
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/procedure-room-order-item/list-entry.vue b/app/components/app/procedure-room-order-item/list-entry.vue
new file mode 100644
index 00000000..f86a0b8e
--- /dev/null
+++ b/app/components/app/procedure-room-order-item/list-entry.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+import { config } from './list-entry.cfg'
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+defineProps<{
+  data: ProcedureRoomOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  requestItem: []
+}>()
+
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Order Ruang
+    </div>
+    <DataTable class="border mb-3 2xl:mb-4"
+      v-bind="config"
+      :rows="data"
+    />
+    <div class="-mx-1 [&_button]:mx-1">
+      <Button @click="emit('requestItem')">
+        <Icon name="i-lucide-plus" />
+        Pilih Item
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/procedure-room-order/detail.vue b/app/components/app/procedure-room-order/detail.vue
new file mode 100644
index 00000000..23d0dc75
--- /dev/null
+++ b/app/components/app/procedure-room-order/detail.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { ProcedureRoom } from '~/models/procedure-room';
+
+defineProps<{
+  data: ProcedureRoom
+}>()
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Detail Order
+    </div>
+    <DE.Block :col-count="2" mode="preview">
+      <DE.Cell>
+        <DE.Label>No. Order</DE.Label>
+        <DE.Colon />
+        <DE.Field>ORT-{{ data.id }}</DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Tgl. Order</DE.Label>
+        <DE.Colon />
+        <DE.Field>{{ data.createdAt?.substring(0, 10) }}</DE.Field>
+      </DE.Cell>
+    </DE.Block>
+  </div>
+</template>
diff --git a/app/components/app/procedure-room/picker.vue b/app/components/app/procedure-room/picker.vue
new file mode 100644
index 00000000..3660e0cb
--- /dev/null
+++ b/app/components/app/procedure-room/picker.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ProcedureRoom } from '~/models/procedure-room';
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
+defineProps<{
+  data: ProcedureRoom[]
+  pickMode: 'single' | 'multi'
+}>()
+
+const emit = defineEmits<{
+  pick: [item: ProcedureRoom]
+}>()
+
+function pick(item: ProcedureRoom) {
+  emit('pick', item)
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Pilihan Ruang Tindakan
+    </div>
+    <div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
+      <!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
+      <div v-if="data.length > 0" v-for="item, idx in data">
+        <Button
+          :variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
+          class="w-full"
+          type="button"
+          @click="pick(item)"
+        >
+          {{ item.infra?.name }}
+        </Button>
+      </div>
+      <div v-else  class="col-span-full text-center text-sm text-gray-500">
+        <div>Tidak ada data ruang tindakan.</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/models/procedure-room-order-item.ts b/app/models/procedure-room-order-item.ts
new file mode 100644
index 00000000..5fa84763
--- /dev/null
+++ b/app/models/procedure-room-order-item.ts
@@ -0,0 +1,27 @@
+import { type Base, genBase } from "./_base";
+import { genMaterialPackage, type MaterialPackage } from "./material-package";
+import { genProcedureRoom, type ProcedureRoom } from "./procedure-room";
+
+export interface ProcedureRoomOrderItem extends Base {
+	procedureRoomOrder_id: number
+	procedureRoom_code: string
+	procedureRoom: ProcedureRoom
+}
+
+export interface CreateDto {
+  procedureRoomOrder_id: number
+	procedureRoom_code: string
+}
+
+export interface UpdateDto extends CreateDto {
+  note?: string
+}
+
+export function genProcedureRoomOrderItem(): ProcedureRoomOrderItem {
+  return {
+    ...genBase(),
+    procedureRoomOrder_id: 0,
+    procedureRoom_code: '',
+    procedureRoom: genProcedureRoom(),
+  }
+}
diff --git a/app/services/procedure-room-order-item.service.ts b/app/services/procedure-room-order-item.service.ts
new file mode 100644
index 00000000..8e6d08b8
--- /dev/null
+++ b/app/services/procedure-room-order-item.service.ts
@@ -0,0 +1,26 @@
+// Base
+import type { CreateDto, UpdateDto } from '~/models/procedure-room-order-item'
+import * as base from './_crud-base'
+
+const name = 'procedure-room-order-item'
+const path = `/api/v1/${name}`
+
+export function create(data: CreateDto) {
+  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: UpdateDto) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}