Merge pull request #177 from dikstub-rssa/feat/prescription

Feat/prescription

app/components/app/prescription-item/list-entry.cfg.ts

@@ -11,16 +11,17 @@ export const config: Config = {
   headers: [
     [
       { label: 'Nama' },
+      { label: 'Cara Buat' },
       { label: 'Bentuk' },
       { label: 'Freq' },
       { label: 'Dosis' },
-      { label: 'Interval' },
+      // { label: 'Interval' },
       { label: 'Total' },
       { label: '' },
     ],
   ],
 
-  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+  keys: ['medicine.name', 'isMix', 'medicine.medicineForm.name', 'frequency', 'dose', 'quantity', 'action'], // 
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -28,17 +29,8 @@ export const config: Config = {
   ],
 
   parses: {
-    cateogry: (rec: unknown): unknown => {
-      return (rec as SmallDetailDto).medicineCategory?.name || '-'
-    },
-    group: (rec: unknown): unknown => {
-      return (rec as SmallDetailDto).medicineGroup?.name || '-'
-    },
-    method: (rec: unknown): unknown => {
-      return (rec as SmallDetailDto).medicineMethod?.name || '-'
-    },
-    unit: (rec: unknown): unknown => {
-      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    isMix: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).isMix ? 'Racikan' : 'Non Racikan'
     },
   },
 

app/components/app/prescription-item/list.cfg.ts

@@ -12,12 +12,11 @@ export const config: Config = {
       { label: 'Bentuk' },
       { label: 'Freq' },
       { label: 'Dosis' },
-      { label: 'Interval' },
       { label: 'Total' },
     ],
   ],
 
-  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total'],
+  keys: ['medicine.name', 'medicine.medicineForm.name', 'frequency', 'dose', 'total'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },

app/components/app/prescription-item/list.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
 import type { PrescriptionItem } from '~/models/prescription-item';
 import { config } from './list.cfg'
 
@@ -13,7 +15,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <PubMyUiDataTable class="border mb-2 2xl:mb-3"
+  <DataTable class="border mb-2"
     v-bind="config"
     :rows="data"
   />

app/components/app/prescription-item/mix-entry.vue

@@ -1,29 +1,36 @@
 <script setup lang="ts">
-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 * as CB from '~/components/pub/my-ui/combobox'
 
 import { genBase } from '~/models/_base';
-import { genMedicine } from '~/models/medicine';
+import { type Medicine, 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[]
+  medicines: Medicine[]
 }>()
 
+const { medicines } = toRefs(props)
+const medicineItems = ref<CB.Item[]>([])
+
 type ClickType = 'close' | 'save'
 
 const emit = defineEmits<{
   close: [],
   save: [data: PrescriptionItem, items: MedicinemixItem[]],
+  'update:searchText': [value: string]
 }>()
 
+watch(medicines, (data) => {
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -42,13 +49,23 @@ function addItem() {
     uom_code: '',
   })
 }
+
+function searchMedicineText(value: string) {
+  emit('update:searchText', value)
+}
+
+function deleteItem(idx: number) {
+  props.items.splice(idx, 1)
+}
 </script>
 
 <template>
-  <DE.Block :colCount="5" :cellFlex="false">
-    <DE.Cell :colSpan="5">
+  <DE.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
       <DE.Label>Nama</DE.Label>
-        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+      <DE.Field>
+        <Input :value="data.medicineMix?.name" />
+      </DE.Field>
     </DE.Cell>
     <DE.Cell>
       <DE.Label>Frequensi</DE.Label>
@@ -64,11 +81,11 @@ function addItem() {
     </DE.Cell>
     <DE.Cell>
       <DE.Label>Total</DE.Label>
-        <DE.Field><Input /></DE.Field>
+      <DE.Field><Input v-model="data.quantity" /></DE.Field>
     </DE.Cell>
-    <DE.Cell :colSpan="5">
+    <DE.Cell :colSpan="4">
       <DE.Label>Cara Pakai</DE.Label>
-        <DE.Field><Input /></DE.Field>
+      <DE.Field><Input v-model="data.usage" /></DE.Field>
     </DE.Cell>
   </DE.Block>
   <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
@@ -77,20 +94,29 @@ function addItem() {
       <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.TableHead class="w-24">Satuan</Table.TableHead> -->
+        <Table.TableHead class="w-10"></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.TableRow v-if="items.length > 0" v-for="item, idx in items">
         <Table.TableCell>
-          <Input v-model="item.medicine.name" />
+          <CB.Combobox
+            v-model="data.medicine_code"
+            :items="medicineItems"
+            @update:searchText="searchMedicineText"
+          />
         </Table.TableCell>
         <Table.TableCell>
           <Input v-model="item.dose" />
         </Table.TableCell>
-        <Table.TableCell>
+        <!-- <Table.TableCell>
           <Input />
+        </Table.TableCell> -->
+        <Table.TableCell class="text-center">
+          <Button class="!w-7 !h-7 !p-0 rounded-full" @click="deleteItem(idx)">
+            <Icon name="i-lucide-trash" />
+          </Button>
         </Table.TableCell>
       </Table.TableRow>
       <Table.TableRow v-else>
@@ -102,7 +128,7 @@ function addItem() {
   </Table.Table>
   <div>
     <Button @click="addItem">
-      <LucidePlus />
+      <Icon name="i-lucide-plus" class="me-2" />
       Tambah
     </Button>
   </div>

app/components/app/prescription-item/non-mix-entry.vue

@@ -2,40 +2,45 @@
 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 * as CB from '~/components/pub/my-ui/combobox'
 
-import { bigTimeUnitCodes } from '~/lib/constants'
+// import { bigTimeUnitCodes } from '~/lib/constants'
 
+import { type Medicine } from '~/models/medicine';
 import type { PrescriptionItem } from '~/models/prescription-item'
 
 const props = defineProps<{
   data: PrescriptionItem
+  medicines: Medicine[]
 }>()
 
+const { medicines } = toRefs(props)
+const medicineItems = ref<CB.Item[]>([])
+const medicineForm = computed(() => {
+  const medicine = props.medicines.find(m => m.code === props.data.medicine_code)
+  return medicine ? medicine.medicineForm?.name : '--tidak diketahui--'
+})
+
 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],
+  'update:searchText': [value: string]
 }>()
 
+watch(medicines, (data) => {
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -43,13 +48,23 @@ function navClick(type: ClickType) {
     emit('save', props.data)
   }
 }
+
+function searchMedicineText(value: string) {
+  emit('update:searchText', value)
+}
 </script>
 
 <template>
-  <DE.Block :colCount="5" :cellFlex="false">
-    <DE.Cell :colSpan="5">
+  <DE.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
       <DE.Label>Nama</DE.Label>
-        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+      <DE.Field>
+        <CB.Combobox
+          v-model="data.medicine_code"
+          :items="medicineItems"
+          @update:searchText="searchMedicineText"
+        />
+      </DE.Field>
     </DE.Cell>
     <DE.Cell>
       <DE.Label>Frequensi</DE.Label>
@@ -59,11 +74,7 @@ function navClick(type: ClickType) {
       <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.Cell>
       <DE.Label>Interval</DE.Label>
       <DE.Field>
         <Select
@@ -71,16 +82,20 @@ function navClick(type: ClickType) {
           :items="bigTimeUnitCodeItems"
         />
       </DE.Field>
-    </DE.Cell>
+    </DE.Cell> -->
     <DE.Cell>
       <DE.Label>Total</DE.Label>
       <DE.Field>
-        <Input v-model="data.quantity" />
+        <Input type="number" v-model="data.quantity" />
       </DE.Field>
     </DE.Cell>
-    <DE.Cell :colSpan="5">
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="medicineForm" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="4">
         <DE.Label>Cara Pakai</DE.Label>
-        <DE.Field><Input /></DE.Field>
+        <DE.Field><Input v-model="data.usage" /></DE.Field>
     </DE.Cell>
   </DE.Block>
   <Separator class="my-5" />

app/components/app/prescription/detail.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
       Order {{ data.issuedAt?.substring(0, 10) || data.createdAt?.substring(0, 10) }} - {{ data.status_code }}
     </div>
     <div class="max-w-[1000px]">
-      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+      <DE.Block mode="preview" label-size="sm" :col-count=5 class="!mb-3">
         <DE.Cell :col-span="2">
           <DE.Label class="font-semibold">DPJP</DE.Label>
           <DE.Field>

app/components/app/prescription/entry.vue

@@ -1,17 +1,25 @@
+<script setup lang="ts">
+import type { Prescription } from '~/models/prescription';
+
+defineProps<{
+  data: Prescription
+}>()
+</script>
+
 <template>
-  <div class="md:grid md:grid-cols-2 font-semibold">
+  <div class="md:grid md:grid-cols-2">
     <div class="md:pe-10">
       <PubMyUiDocEntryBlock>
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input :value="data.issuedAt || data.createdAt?.substring(0, 10)" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input v-model="data.status_code" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
       </PubMyUiDocEntryBlock>
@@ -21,16 +29,22 @@
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input v-model="data.doctor.employee.person.name" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
         <PubMyUiDocEntryCell>
           <PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
           <PubMyUiDocEntryField>
-              <Input />
+              <Input value="......" readonly />
           </PubMyUiDocEntryField>
         </PubMyUiDocEntryCell>
       </PubMyUiDocEntryBlock>
     </div>
   </div>
+  <!-- <div class="">
+    <Button>
+      <Icon name="i-lucide-check" />
+      Simpan
+    </Button>
+  </div> -->
 </template>

app/components/app/prescription/flat-list.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import * as Table from '~/components/pub/ui/table'
+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';
+
+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>

app/components/app/prescription/grouped-list.vue

@@ -5,7 +5,6 @@ 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';
-import { add } from 'date-fns';
 
 interface Props {
   data: Prescription[]
@@ -66,7 +65,7 @@ function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void
         />
       </div>
     </DE.Block>
-    <PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
+    <PrescriptionItem :data="item.items || []" class="mb-10" />
     <!-- <div v-if="idx < data.length - 1" class="my-8 -mx-4 border-t border-t-slate-300" /> -->
   </template>
 </template>

app/components/app/prescription/list-with-sub.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-// import { Block, Cell } from '~/components/pub/my-ui/doc-entry/index'
-// import Block from '~/components/pub/my-ui/doc-entry/block.vue'
-// import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry';
 </script>
 
 <template>
@@ -17,40 +15,40 @@
   <Separator class="my-5" />
   <div class="md:grid md:grid-cols-2 font-semibold">
     <div>
-      <PubCustomUiDocEntryBlock mode="preview">
-        <PubCustomUiDocEntryCell>
-          <PubCustomUiDocEntryLabel>Order #1</PubCustomUiDocEntryLabel>
-          <PubCustomUiDocEntryColon />
-          <PubCustomUiDocEntryField>
+      <DE.Block mode="preview">
+        <DE.Cell>
+          <DE.Label>Order #1</DE.Label>
+          <DE.Colon />
+          <DE.Field>
             2025-01-01
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-        <PubCustomUiDocEntryCell>
-          <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
-          <PubCustomUiDocEntryColon />
-          <PubCustomUiDocEntryField>
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell>
+          <DE.Label>Status</DE.Label>
+          <DE.Colon />
+          <DE.Field>
               Status
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-      </PubCustomUiDocEntryBlock>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
     </div>
     <div>
-      <PubCustomUiDocEntryBlock mode="preview">
-        <PubCustomUiDocEntryCell>
-          <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
-          <PubCustomUiDocEntryColon />
-          <PubCustomUiDocEntryField>
+      <DE.Block mode="preview">
+        <DE.Cell>
+          <DE.Label>DPJP</DE.Label>
+          <DE.Colon />
+          <DE.Field>
               Nama Dokter
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-        <PubCustomUiDocEntryCell>
-          <PubCustomUiDocEntryLabel>PPDS</PubCustomUiDocEntryLabel>
-          <PubCustomUiDocEntryColon />
-          <PubCustomUiDocEntryField>
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell>
+          <DE.Label>PPDS</DE.Label>
+          <DE.Colon />
+          <DE.Field>
               Nama PPDS
-          </PubCustomUiDocEntryField>
-        </PubCustomUiDocEntryCell>
-      </PubCustomUiDocEntryBlock>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
     </div>
   </div>
 </template>

app/components/content/prescription/entry.vue

@@ -1,86 +1,215 @@
 <script setup lang="ts">
+import { type HeaderPrep, ActionEvents } from '~/components/pub/my-ui/data/types'
 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 RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { toast } from '~/components/pub/ui/toast'
 
 import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
-import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 
+// Medicine
+import { type Medicine } from '~/models/medicine'
+import { getList as getMedicineList } from '~/services/medicine.service'
+
+// Prescription
 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 Detail from '~/components/app/prescription/detail.vue'
+import Entry from '~/components/app/prescription/entry.vue'
+import { remove, submit } from '~/services/prescription.service'
 
+// Prescription items
 import {
+  getList as getItemList,
+  create as createItem,
+  update as updateItem,
+} from '~/services/prescription-item.service'
+import {
+  recId,
+  recAction,
   recItem,
+  isRecordConfirmationOpen,
+  handleActionRemove,
 } from '~/handlers/prescription-item.handler'
 
-// props
+import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
+import { type MedicinemixItem } from '~/models/medicinemix-item';
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
+
+// 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 || [])
+// Prescriptions 
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
 
+// Prescription Items
+const isItemDetailDialogOpen = ref(false)
+
+// Prescription
+const { getQueryParam } = useQueryParam()
+const rawId = getQueryParam('id')
+const id = typeof rawId === 'string' ? parseInt(rawId) : 0
+const dataRes = await getDetail(id, { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' })
+const data = ref(dataRes.body?.data || null)
+
+// Prescription Items
+const getItemsOpt = { 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' }
 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
-    }
+  data: items,
+  isLoading,
+  fetchData: getPrescriptionItems,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getItemList({
+      ...getItemsOpt,
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'prescription-item',
+  entityName: 'division',
 })
 
+
+// const items = ref<PrescriptionItem[]>([])
+const mixItem = ref<PrescriptionItem>(genPrescriptionItem())
+const medicinemixItems = ref<MedicinemixItem[]>([])
+const nonMixItem = ref<PrescriptionItem>(genPrescriptionItem())
+
+mixItem.value.prescription_id = id
+nonMixItem.value.prescription_id = id
+
 const { backToList } = useQueryCRUDMode()
 
 const headerPrep: HeaderPrep = {
-  title: 'Tambah Order Obat / Resep',
+  title: 'Pembuatan Order Obat / Resep',
   icon: 'i-lucide-box',
 }
 
-const mixDialogOpen = ref(false)
-const nonMixDialogOpen = ref(false)
+const mixDialogOpenStatus = ref(false)
+const nonMixDialogOpenStatus = ref(false)
+const medicines = ref<Medicine[]>([])
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+watch([recId, recAction], () => {
+  let item: PrescriptionItem | null
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      item = pickItem()
+      if (item) {
+        isItemDetailDialogOpen.value = true
+      }
+      break
+    case ActionEvents.showEdit:
+      item = pickItem()
+      if (item) {
+        if(item.isMix) {
+          mixDialogOpenStatus.value = true
+        } else {
+          nonMixDialogOpenStatus.value = true
+        }
+        getMedicines('', item.medicine_code)
+      }
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getPrescriptionItems()
+})
 
 function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
   if (type === 'back') {
     backToList()
+  } else if (type === 'delete') {
+    isDeleteConfirmationOpen.value = true
+  } else if (type === 'submit') {
+    isSubmitConfirmationOpen.value = true
   }
 }
 
+async function removePrescription() {
+  const res = await remove(id)
+  if (res.success) {
+    backToList()
+  }
+  // handleActionRemove(recId.value, getItems, toast)
+}
+
+async function submitPrescription() {
+  const res = await submit(id)
+  if (res.success) {
+    backToList()
+  }
+  // handleActionRemove(recId.value, getItems, toast)
+}
+
 function addItem(mode: 'mix' | 'non-mix') {
   if (mode === 'mix') {
-    mixDialogOpen.value = true
+    mixDialogOpenStatus.value = true
   } else if (mode === 'non-mix') {
-    nonMixDialogOpen.value = true
+    nonMixDialogOpenStatus.value = true
   }
 }
 
-function saveMix() {
-  create({data})
+async function saveMix() {
+  const res = await createItem(mixItem.value)
+  if (res.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getPrescriptionItems()
+    mixDialogOpenStatus.value = false
+  }
 }
 
-function saveNonMix(data: PrescriptionItem) {
-  create({data})
+async function saveNonMix() {
+  let res: any;
+  if(!nonMixItem.value.id) {
+    res = await createItem(nonMixItem.value)
+  } else {
+    res = await updateItem(nonMixItem.value.id, nonMixItem.value)
+  }
+  if (res.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getPrescriptionItems()
+    nonMixDialogOpenStatus.value = false
+  }
+}
+
+async function getMedicines(value: string, code?: string) {
+  const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm', 'code': code })
+  if (res.success) {
+    medicines.value = res.body.data
+  } else {
+    medicines.value = []
+  }
+}
+
+function pickItem(): PrescriptionItem | null {
+  const item = items.value.find(item => item.id === recId.value)
+  if (!item) {
+    return null
+  }
+  if(item.isMix) {
+    mixItem.value = item
+  } else {
+    nonMixItem.value = item
+  }
+  return item
 }
 </script>
 
@@ -91,42 +220,147 @@ function saveNonMix(data: PrescriptionItem) {
     class="mb-4 xl:mb-5"
   />
 
-  <Detail :data="data" />
+  <Entry :data="data" />
+
+  <!-- <div class="mb-8">
+    <Button>
+      <Icon name="i-lucide-check" />
+      Simpan
+    </Button>
+  </div> -->
 
   <ItemListEntry
-    :data="prescriptionItems"
+    :data="items"
     @add="addItem"/>
+
   <Separator class="my-5" />
 
   <div class="w-full flex justify-center">
     <Nav @click="navClick" />
   </div>
 
+  <!-- Confirm delete -->
+  <RecordConfirmation
+    v-model:open="isDeleteConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="removePrescription()"
+  />
+
+  <!-- Confirm submit -->
+  <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="submitPrescription"
+    @cancel=""
+  />
+
+  <!-- Mix form -->
   <Dialog
-    v-model:open="mixDialogOpen"
-    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
-    size="xl"
+    v-model:open="mixDialogOpenStatus"
+    title="Pembuatan Racikan"
+    size="lg"
     prevent-outside
   >
     <MixItemEntry
-      :data="data"
-      :items="items"
-      @close="mixDialogOpen = false"
+      :data="mixItem"
+      :items="medicinemixItems"
+      :medicines="medicines"
+      @close="mixDialogOpenStatus = false"
       @save="saveMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
 
+  <!-- Non mix form -->
   <Dialog
-    v-model:open="nonMixDialogOpen"
-    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
-    size="xl"
+    v-model:open="nonMixDialogOpenStatus"
+    title="Pembuatan Non Racikan"
+    size="lg"
     prevent-outside
   >
     <NonMixItemEntry
-      :data="data"
-      :items="items"
-      @close="mixDialogOpen = false"
+      :data="nonMixItem"
+      :medicines="medicines"
+      @close="mixDialogOpenStatus = false"
       @save="saveNonMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
+
+  <!-- Detail item -->
+  <Dialog
+    v-model:open="isItemDetailDialogOpen"
+    title="Detail Obat"
+    size="lg"
+    prevent-outside
+  >
+    <DE.Block mode="preview" label-size="small">
+      <DE.Cell>
+        <DE.Label>Nama</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.medicine.name }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.dose }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.medicine.medicineForm.name }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Jumlah</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.quantity }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ recItem.Usage }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+  </Dialog>
+
+  <!-- Confirm delete items -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPrescriptionItems, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>

app/components/content/prescription/list.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+// Composables
 import { usePaginatedList } from '~/composables/usePaginatedList'
 
+// Pubs component
 import { toast } from '~/components/pub/ui/toast'
-import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+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'
 
@@ -12,7 +14,6 @@ import {
   recAction,
   recItem,
   isReadonly,
-  isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionRemove,
   handleActionSave,
@@ -20,17 +21,17 @@ 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'
-
-const props = defineProps<{
-  encounter_id: number
-}>()
+import { submit } from '~/services/prescription.service'
+import type { ToastFn } from '~/handlers/_handler'
 
 const route = useRoute()
 const { setQueryParams } = useQueryParam()
 
 const title = ref('')
+const isSubmitConfirmationOpen = ref(false)
 
 const plainEid = route.params.id
 const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
@@ -42,21 +43,40 @@ const {
   searchInput,
   fetchData: getMyList,
 } = usePaginatedList<Prescription>({
-  fetchFn: async ({ page, search }) => {
+  fetchFn: async (params: any) => {
     const result = await getList({
-      search,
-      page,
       'encounter-id': encounter_id,
-      includes: 'doctor,doctor-employee,doctor-employee-person',
+      includes: 'doctor,doctor-employee,doctor-employee-person,items,items-medicine,items-medicine-medicineForm',
+      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'
 })
 
+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 vFn = () => {} // Void function
 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,
@@ -71,11 +91,17 @@ const headerPrep: HeaderPrep = {
   addNav: {
     label: 'Tambah',
     icon: 'i-lucide-plus',
-    onClick: () => {
+    onClick: async () => {
       recItem.value = null
       recId.value = 0
-      isFormEntryDialogOpen.value = true
       isReadonly.value = false
+      const saveResp = await handleActionSave({ encounter_id }, vFn, vFn, vFn)
+      if (saveResp.success) {
+        setQueryParams({
+          'mode': 'entry',
+          'id': saveResp.body?.data?.id.toString()
+        })
+      }
     },
   },
 }
@@ -85,53 +111,13 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-const getMyDetail = async (id: number | string) => {
-  const result = await getDetail(id)
-  if (result.success) {
-    const currentValue = result.body?.data || {}
-    recItem.value = currentValue
-    isFormEntryDialogOpen.value = true
-  }
-}
-
-// Watch for row actions when recId or recAction changes
-watch([recId, recAction], () => {
-  switch (recAction.value) {
-    case ActionEvents.showDetail:
-      getMyDetail(recId.value)
-      title.value = 'Detail Konsultasi'
-      isReadonly.value = true
-      break
-    case ActionEvents.showEdit:
-      getMyDetail(recId.value)
-      title.value = 'Edit Konsultasi'
-      isReadonly.value = false
-      break
-    case ActionEvents.showConfirmDelete:
-      break
-  }
-})
-
-watch([isFormEntryDialogOpen], async () => {
-  if (isFormEntryDialogOpen.value) {
-    isFormEntryDialogOpen.value = false;
-    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
-    if (saveResp.success) {
-      setQueryParams({
-        'mode': 'entry',
-        'id': saveResp.body?.data?.id.toString()
-      })
-    }
-  }
-})
-
-function cancel(data: Prescription) {
+function confirmCancel(data: Prescription) {
   recId.value = data.id
   recItem.value = data
   isRecordConfirmationOpen.value = true
 }
 
-function edit(data: Prescription) {
+function goToEdit(data: Prescription) {
   setQueryParams({
     'mode': 'entry',
     'id': data.id.toString()
@@ -139,21 +125,45 @@ function edit(data: Prescription) {
   recItem.value = data
 }
 
-function submit(data: Prescription) {
+function confirmSubmit(data: Prescription) {
+  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
+  <template v-if="!flatMode">
+    <Grouped 
       v-if="!isLoading.dataListLoading"
       :data="data"
       :pagination-meta="paginationMeta"
-    @cancel="cancel"
-    @edit="edit"
-    @submit="submit"
+      @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"
@@ -162,5 +172,37 @@ function submit(data: Prescription) {
     @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>

app/handlers/prescription.handler.ts

@@ -1,4 +1,4 @@
-import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { genCrudHandler } from '~/handlers/_handler'
 import { create, update, remove } from '~/services/prescription.service'
 
 export const {

app/models/medicine.ts

@@ -1,10 +1,17 @@
+import type { MedicineFormData } from "~/schemas/medicine.schema"
 import { type Base, genBase } from "./_base"
+import type { MedicineGroup } from "./medicine-group"
+import type { MedicineMethod } from "./medicine-method"
 
 export interface Medicine extends Base {
   code: string
   name: string
-  medicineGroup_code: string
-  medicineMethod_code: string
+  medicineGroup_code?: string
+  medicineGroup?: MedicineGroup
+  medicineMethod_code?: string
+  medicineMethod?: MedicineMethod
+  medicineForm_code?: string
+  medicineForm?: MedicineFormData
   uom_code: string
   infra_id?: string | null
   stock: number

app/models/medicinemix-item.ts

@@ -1,7 +1,7 @@
 import { type Base, genBase } from "./_base"
 import { type Medicine, genMedicine } from "./medicine";
 
-interface MedicinemixItem extends Base {
+export interface MedicinemixItem extends Base {
   id: number
   medicineMix_id: number
   medicine_id: number
@@ -35,7 +35,7 @@ export interface DeleteDto {
   id: number
 }
 
-export function MedicinemixItem(): MedicinemixItem {
+export function genMedicinemixItem(): MedicinemixItem {
   return {
     ...genBase(),
     medicineMix_id: 0,

app/models/prescription-item.ts

@@ -5,10 +5,10 @@ export interface PrescriptionItem {
   id: number;
   prescription_id: number;
   isMix: boolean;
-  medicine_id: number;
-  medicine: Medicine;
-  medicineMix_id: number;
-  medicineMix: Medicinemix
+  medicine_code?: string;
+  medicine?: Medicine;
+  medicineMix_id?: number;
+  medicineMix?: Medicinemix
   frequency: number;
   dose: number;
   interval: number;
@@ -49,15 +49,15 @@ export interface DeleteDto {
   id?: string
 }
 
-export function genPresciptionItem(): PrescriptionItem {
+export function genPrescriptionItem(): PrescriptionItem {
   return {
     id: 0,
     prescription_id: 0,
     isMix: false,
-    medicine_id: 0,
-    medicine: genMedicine(),
-    medicineMix_id: 0,
-    medicineMix: genMedicinemix(),
+    // medicine_code: '',
+    // medicine: genMedicine(),
+    // medicineMix_id: 0,
+    // medicineMix: genMedicinemix(),
     frequency: 0,
     dose: 0,
     interval: 0,
@@ -66,4 +66,3 @@ export function genPresciptionItem(): PrescriptionItem {
     usage: ''
   }
 }
- 

app/services/prescription.service.ts

@@ -1,4 +1,5 @@
 import * as base from './_crud-base'
+import { xfetch } from '~/composables/useXfetch'
 
 const path = '/api/v1/prescription'
 const name = 'prescription'
@@ -22,3 +23,16 @@ export function update(id: number | string, data: any) {
 export function remove(id: number | string) {
   return base.remove(path, id)
 }
+
+export async function submit(id: number) {
+  try {
+    const resp = await xfetch(`${path}/${id}/submit`, 'PATCH')
+    const result: any = {}
+    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}`)
+  }
+}