diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
index b8bf36cd..422ebba7 100644
--- a/app/components/app/prescription-item/list-entry.vue
+++ b/app/components/app/prescription-item/list-entry.vue
@@ -7,7 +7,7 @@ defineProps<{
 }>()
 
 const emit = defineEmits<{
-  submit: [mode: string]
+  add: [mode: 'mix' | 'non-mix']
 }>()
 
 </script>
@@ -17,22 +17,14 @@ const emit = defineEmits<{
     v-bind="config"
     :rows="data"
   />
-  <div class="flex">
-    <div class="me-auto">
-      <Button class="me-2">
-        <Icon name="i-lucide-plus" class="align-middle" />
-        Tambah Racikan
-      </Button>
-      <Button>
-        <Icon name="i-lucide-plus" class="align-middle" />
-        Tambah Non-Racikan
-      </Button>
-    </div>
-    <div>
-      <Button variant="secondary">
-        <Icon name="i-lucide-x" class="align-middle" />
-        Batal
-      </Button>
-    </div>
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('add', 'mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+    <Button @click="emit('add', 'non-mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
   </div>
 </template>
diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index 9f94f280..d9b4881e 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -1,24 +1,66 @@
 <script setup lang="ts">
-  import * as DE from '~/components/pub/my-ui/doc-entry'
+import { LucidePlus } from 'lucide-vue-next';
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue';
+import * as Table from '~/components/pub/ui/table'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+
+import { genBase } from '~/models/_base';
+import { genMedicine } from '~/models/medicine';
+import type { MedicinemixItem } from '~/models/medicinemix-item';
+import type { PrescriptionItem } from '~/models/prescription-item';
+
+const props = defineProps<{
+  data: PrescriptionItem
+  items: MedicinemixItem[]
+}>()
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem, items: MedicinemixItem[]],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data, props.items)
+  }
+}
+
+function addItem() {
+  props.items.push({
+    ...genBase(),
+    medicineMix_id: 0,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    dose: 0,
+    uom_code: '',
+  })
+}
 </script>
 
 <template>
   <DE.Block :colCount="5" :cellFlex="false">
     <DE.Cell :colSpan="5">
         <DE.Label>Nama</DE.Label>
-        <DE.Field><Input /></DE.Field>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
     </DE.Cell>
     <DE.Cell>
         <DE.Label>Frequensi</DE.Label>
-        <DE.Field><Input /></DE.Field>
+        <DE.Field><Input v-model="data.frequency" /></DE.Field>
     </DE.Cell>
     <DE.Cell>
         <DE.Label>Dosis</DE.Label>
-        <DE.Field><Input /></DE.Field>
+        <DE.Field><Input v-model="data.dose" /></DE.Field>
     </DE.Cell>
     <DE.Cell>
         <DE.Label>Sediaan</DE.Label>
-        <DE.Field><Input /></DE.Field>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" /></DE.Field>
     </DE.Cell>
     <DE.Cell>
         <DE.Label>Total</DE.Label>
@@ -29,4 +71,43 @@
         <DE.Field><Input /></DE.Field>
     </DE.Cell>
   </DE.Block>
+  <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
+  <Table.Table class="border mb-3 2xl:mb-4">
+    <Table.TableHeader class="[&_th]:h-8 [&_th]:2xl:h-9">
+      <Table.TableRow>
+        <Table.TableHead>Nama</Table.TableHead>
+        <Table.TableHead class="w-24">Dosis</Table.TableHead>
+        <Table.TableHead class="w-24">Satuan</Table.TableHead>
+        <Table.TableHead class="w-20">..</Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody class="[&_td]:p-0.6">
+      <Table.TableRow v-if="items.length > 0" v-for="item in items">
+        <Table.TableCell>
+          <Input v-model="item.medicine.name" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input v-model="item.dose" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input />
+        </Table.TableCell>
+      </Table.TableRow>
+      <Table.TableRow v-else>
+        <Table.TableCell colspan="4" class="!p-5 text-center">
+          Belum ada data
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <div>
+    <Button @click="addItem">
+      <LucidePlus />
+      Tambah
+    </Button>
+  </div>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
 </template>
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
index e69de29b..25970646 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+import { bigTimeUnitCodes } from '~/lib/constants'
+
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const props = defineProps<{
+  data: PrescriptionItem
+}>()
+
+type ClickType = 'close' | 'save'
+type Item = {
+  value: string
+  label: string
+}
+
+const bigTimeUnitCodeItems: Item[] = []
+
+if(!props.data.intervalUnit_code) {
+  props.data.intervalUnit_code = 'day'
+}
+
+Object.keys(bigTimeUnitCodes).forEach((key) => {
+  bigTimeUnitCodeItems.push({
+    value: key,
+    label: bigTimeUnitCodes[key] || '',
+  })
+})
+
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Frequensi</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Dosis</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Interval</DE.Label>
+      <DE.Field>
+        <Select
+          v-model="data.intervalUnit_code"
+          :items="bigTimeUnitCodeItems"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Total</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/list.vue
index 34505bdf..ae5126ca 100644
--- a/app/components/app/prescription/list.vue
+++ b/app/components/app/prescription/list.vue
@@ -1,14 +1,33 @@
 <script setup lang="ts">
 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-entry.vue';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+import { add } from 'date-fns';
 
 interface Props {
   data: Prescription[]
   paginationMeta: PaginationMeta
 }
-defineProps<Props>()
+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>
@@ -21,36 +40,33 @@ defineProps<Props>()
       </Button>
     </div>
   </div>
-  <template v-for="item in data">
-    <div class="max-w-[1000px]">
-      <DE.Block mode="preview" :col-count=5>
-        <DE.Cell :col-span="2">
-          <DE.Label class="font-semibold">Tgl Order</DE.Label>
-          <DE.Field>
-            {{ item.issuedAt }}
-          </DE.Field>
-        </DE.Cell>
-        <DE.Cell></DE.Cell>
-        <DE.Cell :col-span="2">
-          <DE.Label class="font-semibold">DPJP</DE.Label>
-          <DE.Field>
-          </DE.Field>
-        </DE.Cell>
-        <DE.Cell :col-span="2">
-          <DE.Label class="font-semibold">Status</DE.Label>
-          <DE.Field>
-            {{ item.status_code }}
-          </DE.Field>
-        </DE.Cell>
-        <DE.Cell></DE.Cell>
-        <DE.Cell :col-span="2">
-          <DE.Label class="font-semibold">PPDS</DE.Label>
-          <DE.Field>
-          </DE.Field>
-        </DE.Cell>
-      </DE.Block>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
     </div>
-    <PrescriptionItem :data="item.items || []" @click="console.log('click')" />
-    <Separator class="my-10" />
+    <DE.Block mode="preview" :col-count="7" class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
+    <!-- <div v-if="idx < data.length - 1" class="my-8 -mx-4 border-t border-t-slate-300" /> -->
   </template>
 </template>
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
index 6d76d685..4b3fa663 100644
--- a/app/components/content/prescription/entry.vue
+++ b/app/components/content/prescription/entry.vue
@@ -1,24 +1,87 @@
 <script setup lang="ts">
-import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+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 { 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'
 
+import { getDetail } from '~/services/prescription.service'
+import Detail from '~/components/app/prescription/detail.vue'
+import { getList as getPrescriptionItemList } from '~/services/prescription-item.service'
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import { type PrescriptionItem } from '~/models/prescription-item'
+
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
+import { create } from '~/services/prescription-item.service';
+
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+
+import {
+  recItem,
+} from '~/handlers/prescription-item.handler'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+// const route = useRoute()
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data || null
+const items = ref(data?.items || [])
+
+const {
+  data: prescriptionItems,
+  fetchData: getMyList,
+} = usePaginatedList<PrescriptionItem> ({
+  fetchFn: async ({ page, search }) => {
+    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription-item',
+})
+
 const { backToList } = useQueryCRUDMode()
 
 const headerPrep: HeaderPrep = {
-  title: 'Tambah Order Alkes',
+  title: 'Tambah Order Obat / Resep',
   icon: 'i-lucide-box',
 }
 
-  function navClick(type: 'cancel' | 'submit') {
-    if (type === 'cancel') {
-      backToList()
-    }
+const mixDialogOpen = ref(false)
+const nonMixDialogOpen = ref(false)
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
   }
+}
+
+function addItem(mode: 'mix' | 'non-mix') {
+  if (mode === 'mix') {
+    mixDialogOpen.value = true
+  } else if (mode === 'non-mix') {
+    nonMixDialogOpen.value = true
+  }
+}
+
+function saveMix() {
+  create({data})
+}
+
+function saveNonMix(data: PrescriptionItem) {
+  create({data})
+}
 </script>
 
 <template>
@@ -28,10 +91,42 @@ const headerPrep: HeaderPrep = {
     class="mb-4 xl:mb-5"
   />
 
-  <ItemListEntry />
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="prescriptionItems"
+    @add="addItem"/>
   <Separator class="my-5" />
 
   <div class="w-full flex justify-center">
     <Nav @click="navClick" />
   </div>
+
+  <Dialog
+    v-model:open="mixDialogOpen"
+    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <MixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveMix"
+    />
+  </Dialog>
+
+  <Dialog
+    v-model:open="nonMixDialogOpen"
+    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <NonMixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveNonMix"
+    />
+  </Dialog>
 </template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 92f6afeb..844cb04f 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-
 import { usePaginatedList } from '~/composables/usePaginatedList'
-import { toast } from '~/components/pub/ui/toast'
 
+import { toast } from '~/components/pub/ui/toast'
 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
 import {
@@ -14,6 +14,7 @@ import {
   isReadonly,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  handleActionRemove,
   handleActionSave,
 } from '~/handlers/prescription.handler'
 
@@ -21,14 +22,13 @@ import {
 import { getList, getDetail } from '~/services/prescription.service'
 import List from '~/components/app/prescription/list.vue'
 import type { Prescription } from '~/models/prescription'
-// import { getList as getUnitList } from '~/services/unit.service' // previously uses getList
-// import { getValueLabelList } from '~/services/unit.service'
 
 const props = defineProps<{
   encounter_id: number
 }>()
 
 const route = useRoute()
+const { setQueryParams } = useQueryParam()
 
 const title = ref('')
 
@@ -40,15 +40,14 @@ const {
   isLoading,
   paginationMeta,
   searchInput,
-  handlePageChange,
-  handleSearch,
   fetchData: getMyList,
 } = usePaginatedList<Prescription>({
   fetchFn: async ({ page, search }) => {
     const result = await getList({
       search,
       page,
-      'encounter-id': encounter_id
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
     })
     return { success: result.success || false, body: result.body || {} }
   },
@@ -109,26 +108,59 @@ watch([recId, recAction], () => {
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
-      isRecordConfirmationOpen.value = true
       break
   }
 })
 
-watch([isFormEntryDialogOpen], () => {
+watch([isFormEntryDialogOpen], async () => {
   if (isFormEntryDialogOpen.value) {
     isFormEntryDialogOpen.value = false;
-    handleActionSave({
-      encounter_id,
-    }, getMyList, () =>{}, toast)
+    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
   }
 })
 
-onMounted(async () => {
-})
+function cancel(data: Prescription) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: Prescription) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: Prescription) {
+}
+
 </script>
 
 <template>
   <Header :prep="{ ...headerPrep }" />
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
 
-  <List v-if="!isLoading.dataListLoading" :data="data" :pagination-meta="paginationMeta" />
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/prescription/main.vue b/app/components/content/prescription/main.vue
index b2a17463..033d093f 100644
--- a/app/components/content/prescription/main.vue
+++ b/app/components/content/prescription/main.vue
@@ -7,10 +7,10 @@ const props = defineProps<{
   encounter_id: number
 }>()
 
-const { mode } = useQueryMode()
+const { mode } = useQueryCRUDMode()
 </script>
 
 <template>
   <List v-if="mode === 'list'" :encounter_id="encounter_id" />
-  <Entry v-else />
+  <Entry v-else :encounter_id="encounter_id" />
 </template>
diff --git a/app/models/prescription.ts b/app/models/prescription.ts
index 543724d2..12d5eb9d 100644
--- a/app/models/prescription.ts
+++ b/app/models/prescription.ts
@@ -1,10 +1,10 @@
+import { type Base, genBase } from "./_base";
 import { type Encounter, genEncounter } from "./encounter";
 import { type Doctor, genDoctor } from "./doctor";
 import { type PrescriptionItem } from "./prescription-item";
 import type { SpecialistIntern } from "./specialist-intern";
 
-export interface Prescription {
-  id: number
+export interface Prescription extends Base {
   encounter_id: number
   encounter: Encounter
   doctor_id: number
@@ -44,7 +44,7 @@ export interface DeleteDto {
 
 export function genPresciption(): Prescription {
   return {
-    id: 0,
+    ...genBase(),
     encounter_id: 0,
     encounter: genEncounter(),
     doctor_id: 0,
diff --git a/app/services/prescription.service.ts b/app/services/prescription.service.ts
index 87fe01e3..150357ab 100644
--- a/app/services/prescription.service.ts
+++ b/app/services/prescription.service.ts
@@ -1,6 +1,7 @@
 import * as base from './_crud-base'
 
 const path = '/api/v1/prescription'
+const name = 'prescription'
 
 export function create(data: any) {
   return base.create(path, data)
@@ -10,8 +11,8 @@ export function getList(params: any = null) {
   return base.getList(path, params)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {