feat/prescription: finalize #1

+ integration
+ non mix entry

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: ['medicine.name', 'medicine.medicineForm.name', 'frequency', 'dose', '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/mix-entry.vue

@@ -18,7 +18,6 @@ const props = defineProps<{
 
 const { medicines } = toRefs(props)
 const medicineItems = ref<CB.Item[]>([])
-const selectedMedicine_code = ref<string>(props.data.medicine?.code || '')
 
 type ClickType = 'close' | 'save'
 
@@ -54,6 +53,10 @@ function addItem() {
 function searchMedicineText(value: string) {
   emit('update:searchText', value)
 }
+
+function deleteItem(idx: number) {
+  props.items.splice(idx, 1)
+}
 </script>
 
 <template>
@@ -78,11 +81,11 @@ function searchMedicineText(value: string) {
     </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="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>
@@ -91,20 +94,29 @@ function searchMedicineText(value: string) {
       <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>

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

@@ -6,7 +6,7 @@ import * as CB from '~/components/pub/my-ui/combobox'
 
 // import { bigTimeUnitCodes } from '~/lib/constants'
 
-import { type Medicine, genMedicine } from '~/models/medicine';
+import { type Medicine } from '~/models/medicine';
 import type { PrescriptionItem } from '~/models/prescription-item'
 
 const props = defineProps<{
@@ -20,7 +20,6 @@ const medicineForm = computed(() => {
   const medicine = props.medicines.find(m => m.code === props.data.medicine_code)
   return medicine ? medicine.medicineForm?.name : '--tidak diketahui--'
 })
-// const selectedMedicine_code = ref<string>(props.data.medicine_code || '')
 
 type ClickType = 'close' | 'save'
 type Item = {
@@ -28,19 +27,10 @@ type Item = {
   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],
@@ -105,7 +95,7 @@ function searchMedicineText(value: string) {
     </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/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,13 +29,13 @@
         <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>

app/components/content/prescription/entry.vue

@@ -1,112 +1,216 @@
 <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
+// Medicine
 import { type Medicine } from '~/models/medicine'
-
-// prescription
-import { getDetail } from '~/services/prescription.service'
 import { getList as getMedicineList } from '~/services/medicine.service'
-import Detail from '~/components/app/prescription/detail.vue'
 
-// prescription items
+// Prescription
+import { getDetail } from '~/services/prescription.service'
+// 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 getPrescriptionItemList,
-  create as createPrescriptionItem,
-  remove as removePrescriptionItem,
+  getList as getItemList,
+  create as createItem,
+  update as updateItem,
 } from '~/services/prescription-item.service'
-import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
-import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
-import type { MedicinemixItem } from '~/models/medicinemix-item';
+import {
+  recId,
+  recAction,
+  recItem,
+  isRecordConfirmationOpen,
+  handleActionRemove,
+} from '~/handlers/prescription-item.handler'
 
-import { recItem } from '~/handlers/prescription-item.handler'
+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
+// Props
 const props = defineProps<{
   encounter_id: number
 }>()
 
-// declaration & flows
+// Prescriptions 
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
+
+// Prescription Items
+const isItemDetailDialogOpen = ref(false)
 
 // Prescription
 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 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 items = ref<PrescriptionItem[]>([])
+const getItemsOpt = { 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' }
+const {
+  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: 'division',
+})
+
+
+// const items = ref<PrescriptionItem[]>([])
 const mixItem = ref<PrescriptionItem>(genPrescriptionItem())
 const medicinemixItems = ref<MedicinemixItem[]>([])
 const nonMixItem = ref<PrescriptionItem>(genPrescriptionItem())
 
-mixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
-nonMixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
+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 getItems()
+  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() {
-  createPrescriptionItem(mixItem.value)
-}
-
-function saveNonMix() {
-  createPrescriptionItem(nonMixItem.value)
-}
-
-async function getItems() {
-  const res = await getPrescriptionItemList({ 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' })
+async function saveMix() {
+  const res = await createItem(mixItem.value)
   if (res.success) {
-      items.value = res.body.data
-  } else {
-    items.value = []
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    getPrescriptionItems()
+    mixDialogOpenStatus.value = false
   }
 }
 
-async function getMedicines(value: string) {
-  const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm' })
+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>
 
 <template>
@@ -116,20 +220,49 @@ async function getMedicines(value: string) {
     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="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'"
+    v-model:open="mixDialogOpenStatus"
+    title="Pembuatan Racikan"
     size="lg"
     prevent-outside
   >
@@ -137,24 +270,97 @@ async function getMedicines(value: string) {
       :data="mixItem"
       :items="medicinemixItems"
       :medicines="medicines"
-      @close="mixDialogOpen = false"
+      @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'"
+    v-model:open="nonMixDialogOpenStatus"
+    title="Pembuatan Non Racikan"
     size="lg"
     prevent-outside
   >
     <NonMixItemEntry
       :data="nonMixItem"
       :medicines="medicines"
-      @close="mixDialogOpen = false"
+      @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

@@ -4,7 +4,7 @@ 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'
 
@@ -14,7 +14,6 @@ import {
   recAction,
   recItem,
   isReadonly,
-  isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionRemove,
   handleActionSave,
@@ -112,68 +111,6 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-// Watch for row actions when recId or recAction changes
-watch([recId, recAction], () => {
-  switch (recAction.value) {
-    case ActionEvents.showDetail:
-      getMyDetail(recId.value)
-      isReadonly.value = true
-      break
-    case ActionEvents.showEdit:
-      getMyDetail(recId.value)
-      isReadonly.value = false
-      break
-    case ActionEvents.showConfirmDelete:
-      break
-  }
-})
-
-// watch([isFormEntryDialogOpen], async () => {
-//   if (isFormEntryDialogOpen.value) {
-//   }
-// })
-
-// Functions
-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 confirmCancel(data: Prescription) {
   recId.value = data.id
   recItem.value = data
@@ -235,15 +172,15 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
     @confirm="() => handleActionRemove(recId, getMyList, toast)"
     @cancel=""
   >
-    <div class="flex">
-      <div class="w-40">Tanggal</div>
-      <div class="w-5 text-cneter">:</div>
-      <div class="">:</div>
+    <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-40">Tanggal</div>
-      <div class="w-5 text-cneter">:</div>
-      <div class="">:</div>
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
     </div>
   </RecordConfirmation>
 
@@ -257,5 +194,15 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
     @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>