diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index 187e9569..5a3c74fd 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
index 9115eeb9..90cf3e01 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -48,7 +48,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {
diff --git a/app/components/app/prescription/flat-list.vue b/app/components/app/prescription/flat-list.vue
new file mode 100644
index 00000000..cf563ef2
--- /dev/null
+++ b/app/components/app/prescription/flat-list.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+
+interface Props {
+  data: Prescription[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Table.Table>
+    <Table.TableHeader>
+      <Table.TableRow>
+        <Table.TableHead class="w-28">Tgl Order</Table.TableHead>
+        <Table.TableHead>DPJP</Table.TableHead>
+        <Table.TableHead>PPDS</Table.TableHead>
+        <Table.TableHead>Jenis Obat</Table.TableHead>
+        <Table.TableHead class="text-center">Status</Table.TableHead>
+        <Table.TableHead class="w-20"></Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody>
+      <Table.TableRow v-for="item, idx in data">
+        <Table.TableCell>
+          {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }}
+        </Table.TableCell>
+        <Table.TableCell>
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </Table.TableCell>
+        <Table.TableCell>
+        </Table.TableCell>
+        <Table.TableCell>
+          <div>
+            Racikan: {{ item.items.filter(function(element){ return element.isMix}).length }}
+          </div>
+          <div>
+            Non Racikan: {{ item.items.filter(function(element){ return !element.isMix}).length }}
+          </div>
+        </Table.TableCell>
+        <Table.TableCell class="text-center">
+          {{ item.status_code }}
+        </Table.TableCell>
+        <Table.TableCell class="text-end">
+          <Nav
+            v-if="item.status_code == 'new'"
+            :small-mode="true"
+            :default-class="'flex gap-1'"
+            @click="(type) => { navClick(type, item) }"
+          />
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <template v-for="item, idx in data">
+  </template>
+</template>
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/grouped-list.vue
similarity index 100%
rename from app/components/app/prescription/list.vue
rename to app/components/app/prescription/grouped-list.vue
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 5042a74b..af24808f 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -20,7 +20,8 @@ import {
 
 // Services
 import { getList, getDetail } from '~/services/prescription.service'
-import List from '~/components/app/prescription/list.vue'
+import FlatList from '~/components/app/prescription/flat-list.vue'
+import Grouped from '~/components/app/prescription/grouped-list.vue'
 import type { Prescription } from '~/models/prescription'
 import { submit } from '~/services/prescription.service'
 import type { ToastFn } from '~/handlers/_handler'
@@ -57,9 +58,25 @@ const {
   entityName: 'prescription'
 })
 
+function updateProvidedVal(val: boolean) {
+  flatMode.value = val
+}
+const flatMode = ref(false)
+const flatModeLabel = ref('Mode Flat: Tidak')
+provide('flatMode', { flatMode, updateProvidedVal })
+watch(flatMode, (newVal) => {
+  flatModeLabel.value = newVal ? 'Mode Flat: Ya' : 'Mode Flat: Tidak'
+})
+
 const headerPrep: HeaderPrep = {
   title: 'Order Obat',
   icon: 'i-lucide-box',
+  components: [
+    {
+      component: defineAsyncComponent(() => import('~/components/pub/my-ui/toggle/provided-toggle.vue')),
+      props: { variant: 'outline', label: flatModeLabel, providedKey: 'flatMode' }
+    },
+  ],
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
@@ -161,14 +178,26 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <List
-    v-if="!isLoading.dataListLoading"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @cancel="confirmCancel"
-    @edit="goToEdit"
-    @submit="confirmSubmit"
-  />
+  <template v-if="!flatMode">
+    <Grouped 
+      v-if="!isLoading.dataListLoading"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @cancel="confirmCancel"
+      @edit="goToEdit"
+      @submit="confirmSubmit"
+    />
+  </template>
+  <template v-else>
+    <FlatList
+      v-if="!isLoading.dataListLoading"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @cancel="confirmCancel"
+      @edit="goToEdit"
+      @submit="confirmSubmit"
+    />
+  </template>
 
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index 431df276..ecf2bf46 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -22,7 +22,7 @@ const selected = ref<any[]>([])
 function toggleSelection(row: any, event?: Event) {
   if (event) event.stopPropagation() // cegah event bubble ke TableRow
 
-  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' || 
 
   // gunakan pembanding berdasarkan id atau stringify data
   const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
@@ -128,7 +128,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           'bg-green-50':
             props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
           'bg-blue-50':
-            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' || 
             selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"