feat(encounter): laporan tindakan cru

feat(treatment-report): add view mode for treatment reports

- Introduce new View component for displaying treatment report details
- Extend useQueryCRUDMode to support 'view' mode
- Update List component to handle view actions
- Implement navigation between list, entry and view modes

refactor(treatment-report): improve navigation flow between views

- Add fromView flag to track navigation origin
- Implement smart back navigation (goBack) that returns to previous view
- Update edit handlers to pass navigation context
- Clean up unused back handlers in form component

cleanup

set responsive details

app/components/app/treatment-report/preview.vue

@@ -59,16 +59,21 @@ function onNavigate(type: string) {
     <AccordionItem value="section-1">
       <AccordionTrigger>Tim Pelaksanaan Tindakan</AccordionTrigger>
       <AccordionContent>
-        <DE.Block>
-          <DetailRow label="DPJP">dr. Marcell Galliard Sp.Gr</DetailRow>
-          <DetailRow label="Operator">Sumitro</DetailRow>
-          <DetailRow label="Asisten Operator">Alexis Lewis Carol</DetailRow>
-          <DetailRow label="Instrumentir">Mikel Arteta</DetailRow>
-          <DetailRow label="Tanggal Pembedahan">
-            {{ format(new Date(), 'd MMMM yyyy', { locale: id }) }}
-          </DetailRow>
-          <DetailRow label="Diagnosa Tindakan">{{ operatorTeam?.actionDiagnosis || '-' }}</DetailRow>
-          <DetailRow label="Perawat Pasca Bedah">Cak Armuji</DetailRow>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <DetailRow label="DPJP">dr. Marcell Galliard Sp.Gr</DetailRow>
+            <DetailRow label="Operator">Sumitro</DetailRow>
+            <DetailRow label="Asisten Operator">Alexis Lewis Carol</DetailRow>
+            <DetailRow label="Instrumentir">Mikel Arteta</DetailRow>
+            <DetailRow label="Tanggal Pembedahan">
+              {{ format(new Date(), 'd MMMM yyyy', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Diagnosa Tindakan">{{ operatorTeam?.actionDiagnosis || '-' }}</DetailRow>
+            <DetailRow label="Perawat Pasca Bedah">Cak Armuji</DetailRow>
+          </DE.Cell>
         </DE.Block>
       </AccordionContent>
     </AccordionItem>
@@ -76,69 +81,79 @@ function onNavigate(type: string) {
     <AccordionItem value="section-2">
       <AccordionTrigger>Tindakan Operatif / Non Operatif Lain</AccordionTrigger>
       <AccordionContent>
-        <ArrangementProcedurePicker
-          field-name="procedures"
-          title="List Prosedur"
-          sub-title="Pilih Prosedur"
-          :mode="'preview'"
-          :sample-items="procedureSampleData"
-        />
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <ArrangementProcedurePicker
+              field-name="procedures"
+              title="List Prosedur"
+              sub-title="Pilih Prosedur"
+              :mode="'preview'"
+              :sample-items="procedureSampleData"
+            />
+          </DE.Cell>
+        </DE.Block>
       </AccordionContent>
     </AccordionItem>
 
     <AccordionItem value="section-3">
       <AccordionTrigger>Data Pelaksanaan Tindakan</AccordionTrigger>
       <AccordionContent>
-        <DE.Block>
-          <DetailRow label="Jenis Operasi">dr. Marcell Galliard Sp.Gr</DetailRow>
-          <DetailRow label="Kode Billing">GCASH1128190</DetailRow>
-          <DetailRow label="Sistem Operasi">Alexis Lewis Carol</DetailRow>
-          <DetailRow label="Operasi Mulai">
-            {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
-          </DetailRow>
-          <DetailRow label="Operasi Selesai">
-            {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
-          </DetailRow>
-          <DetailRow label="Lama Operasi">5 menit</DetailRow>
-          <DetailRow label="Pembiusan Mulai">
-            {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
-          </DetailRow>
-          <DetailRow label="Pembiusan Selesai">
-            {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
-          </DetailRow>
-          <DetailRow label="Lama Pembiusan">5 menit</DetailRow>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <DetailRow label="Jenis Operasi">dr. Marcell Galliard Sp.Gr</DetailRow>
+            <DetailRow label="Kode Billing">GCASH1128190</DetailRow>
+            <DetailRow label="Sistem Operasi">Alexis Lewis Carol</DetailRow>
+            <DetailRow label="Operasi Mulai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Operasi Selesai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Lama Operasi">5 menit</DetailRow>
+            <DetailRow label="Pembiusan Mulai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Pembiusan Selesai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Lama Pembiusan">5 menit</DetailRow>
 
-          <DetailRow label="PRC">300 CC</DetailRow>
-          <DetailRow label="FPP">-</DetailRow>
-          <DetailRow label="WB">-</DetailRow>
-          <DetailRow label="TC">-</DetailRow>
-          <DetailRow label="Merk">-</DetailRow>
-          <DetailRow label="Nama Implant">-</DetailRow>
-          <DetailRow label="Sticker / Nomor Register Implant">-</DetailRow>
-          <DetailRow label="Nama Pendamping Implant">-</DetailRow>
-        </DE.Block>
-        <DE.Block>
-          <DetailRow label="Jenis Pembedahan">Bersih</DetailRow>
-          <DetailRow label="Operasi ke">1 (Satu)</DetailRow>
-          <DetailRow label="Keterangan Lahir">Lahir Hidup</DetailRow>
-          <DetailRow label="Ket. Tempat Lahir">RSSA</DetailRow>
-          <DetailRow label="Berat Badan">18 gram</DetailRow>
-          <DetailRow label="Ket. Saat Lahir">Normal dan sehat</DetailRow>
-          <DetailRow label="Uraian Operasi">-</DetailRow>
-          <DetailRow label="Jumlah Pendarahan">300 CC</DetailRow>
-          <DetailRow label="Specimen / Jaringan dikirim ke">PA</DetailRow>
-        </DE.Block>
-        <DE.Block>
-          <DetailRow label="Keterangan Jaringan">
-            <ul
-              class="list-disc space-y-1 pl-5 text-sm"
-              v-if="tissueNotes.length > 0"
-              v-for="item in tissueNotes"
-            >
-              <li>{{ item.note }}</li>
-            </ul>
-            <span v-else>-</span>
-          </DetailRow>
+            <DetailRow label="PRC">300 CC</DetailRow>
+            <DetailRow label="FPP">-</DetailRow>
+            <DetailRow label="WB">-</DetailRow>
+            <DetailRow label="TC">-</DetailRow>
+            <DetailRow label="Merk">-</DetailRow>
+            <DetailRow label="Nama Implant">-</DetailRow>
+            <DetailRow label="Sticker / Nomor Register Implant">-</DetailRow>
+            <DetailRow label="Nama Pendamping Implant">-</DetailRow>
+          </DE.Cell>
+          <DE.Cell>
+            <DetailRow label="Jenis Pembedahan">Bersih</DetailRow>
+            <DetailRow label="Operasi ke">1 (Satu)</DetailRow>
+            <DetailRow label="Keterangan Lahir">Lahir Hidup</DetailRow>
+            <DetailRow label="Ket. Tempat Lahir">RSSA</DetailRow>
+            <DetailRow label="Berat Badan">18 gram</DetailRow>
+            <DetailRow label="Ket. Saat Lahir">Normal dan sehat</DetailRow>
+            <DetailRow label="Uraian Operasi">-</DetailRow>
+            <DetailRow label="Jumlah Pendarahan">300 CC</DetailRow>
+            <DetailRow label="Specimen / Jaringan dikirim ke">PA</DetailRow>
+            <DetailRow label="Keterangan Jaringan">
+              <ul
+                class="list-disc space-y-1 pl-5 text-sm"
+                v-if="tissueNotes.length > 0"
+                v-for="item in tissueNotes"
+              >
+                <li>{{ item.note }}</li>
+              </ul>
+              <span v-else>-</span>
+            </DetailRow>
+          </DE.Cell>
         </DE.Block>
       </AccordionContent>
     </AccordionItem>

app/components/content/treatment-report/edit.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import mockData from './sample'
-
-// type
-import { genDoctor, type Doctor } from '~/models/doctor'
-import type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'
-
-// components
-import { toast } from '~/components/pub/ui/toast'
-import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue'
-import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'
-
-interface Props {
-  id: string | number
-}
-
-const props = defineProps<Props>()
-
-const { backToList } = useQueryCRUDMode('mode')
-const detail = ref<TreatmentReportFormData | null>({} as unknown as TreatmentReportFormData)
-const doctors = ref<Doctor[]>([])
-
-// TODO: dummy data
-;(() => {
-  doctors.value = [genDoctor()]
-})()
-
-onMounted(() => {
-  // TODO: get data report by props.id
-
-  // mock
-  detail.value = mockData as unknown as TreatmentReportFormData
-})
-</script>
-
-<template>
-  <AppTreatmentReportEntry
-    v-if="detail"
-    :isLoading="false"
-    :mode="'edit'"
-    @submit="(val) => console.log(val)"
-    @back="backToList"
-    @error="
-      (err: Error) => {
-        toast({
-          title: 'Terjadi Kesalahan',
-          description: err.message,
-          variant: 'destructive',
-        })
-      }
-    "
-    :doctors="doctors"
-    :initialValues="detail"
-  >
-    <template #procedures>
-      <ArrangementProcedurePicker
-        field-name="procedures"
-        title="Tindakan Operatif/Non-Operatif Lain"
-        sub-title="Pilih Prosedur"
-      />
-    </template>
-  </AppTreatmentReportEntry>
-</template>

app/components/content/treatment-report/entry.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import List from './list.vue'
 import Form from './form.vue'
+import View from './view.vue'
 
 // Models
 import type { Encounter } from '~/models/encounter'
@@ -12,7 +13,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
+const { mode, goToEntry, goToView } = useQueryCRUDMode('mode')
 </script>
 
 <template>
@@ -21,11 +22,13 @@ const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
       v-if="mode === 'list'"
       :encounter="props.encounter"
       @add="goToEntry"
-      @edit="goToEntry"
+      @edit="goToEntry({ fromView: false })"
+      @view="goToView"
     />
-    <Form
-      v-else
-      @back="backToList"
+    <View
+      v-else-if="mode === 'view'"
+      :encounter="props.encounter"
     />
+    <Form v-else />
   </div>
 </template>

app/components/content/treatment-report/form.vue

@@ -12,7 +12,7 @@ import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker
 
 // states
 const route = useRoute()
-const { mode, backToList } = useQueryCRUDMode('mode')
+const { mode, goBack } = useQueryCRUDMode('mode')
 const { recordId } = useQueryCRUDRecordId('record-id')
 const reportData = ref<TreatmentReportFormData>({} as unknown as TreatmentReportFormData)
 const doctors = ref<Doctor[]>([])
@@ -52,7 +52,7 @@ async function loadEntryForEdit(id: number | string) {
     :isLoading="isLoading"
     :mode="entryMode"
     @submit="(val) => console.log(val)"
-    @back="backToList"
+    @back="goBack"
     @error="
       (err: Error) => {
         toast({

app/components/content/treatment-report/list.vue

@@ -23,6 +23,7 @@ const props = defineProps<Props>()
 const emits = defineEmits<{
   (e: 'add'): void
   (e: 'edit', id: number | string): void
+  (e: 'view', id: number | string): void
 }>()
 
 // states
@@ -76,6 +77,17 @@ const goEdit = (id: number | string) => {
   })
 }
 
+const goView = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'view',
+      'record-id': id,
+    },
+  })
+}
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -90,22 +102,33 @@ async function onGetDetail(id: number | string) {
 }
 
 // #region watcher
-watch([recId, recAction], () => {
-  switch (recAction.value) {
+watch([recId, recAction], (newVal) => {
+  const [id, action] = newVal
+
+  // Guard: jangan proses jika id = 0 atau action kosong
+  if (!id || !action) return
+
+
+  switch (action) {
     case ActionEvents.showDetail:
-      onGetDetail(recId.value)
+      // onGetDetail(recId.value)
+      goView(id)
       title.value = 'Detail Konsultasi'
       break
     case ActionEvents.showEdit:
-      goEdit(recId.value)
-      // reset
-      recId.value = 0
+      goEdit(id)
       title.value = 'Edit Konsultasi'
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true
       break
   }
+
+  // Reset KEDUANYA menggunakan nextTick agar tidak trigger watcher lagi
+  nextTick(() => {
+    recId.value = 0
+    recAction.value = ''
+  })
 })
 // #endregion
 </script>

app/components/content/treatment-report/view.vue

@@ -3,15 +3,23 @@ import mockData from './sample'
 
 // types
 import { type TreatmentReportFormData } from '~/schemas/treatment-report.schema'
+import { type Encounter } from '~/models/encounter'
 
 // Components
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppTreatmentReportPreview from '~/components/app/treatment-report/preview.vue'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 
 // #region Props & Emits
 const router = useRouter()
+const { backToList, goToEntry } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+
+function onEditFromView() {
+  goToEntry({ fromView: true })
+}
+
 const props = defineProps<{
-  id: string | number
+  encounter: Encounter
 }>()
 
 // #endregion
@@ -50,15 +58,10 @@ function onBack() {}
 </script>
 
 <template>
-  <Header
-    :prep="headerPrep"
-    :ref-search-nav="headerPrep.refSearchNav"
-  />
-
   <AppTreatmentReportPreview
     v-if="reportData"
     :data="reportData"
-    @back="onBack"
-    @edit="onEdit"
+    @back="backToList"
+    @edit="onEditFromView"
   />
 </template>