done: edit, detail report

fix: parsing err datetime on edit mode

todo: koordinasi dengan tim be terkait datetime iso

impl edit form

feat(treatment-report): add detail view and preview components

- Implement treatment report detail page with RBAC checks
- Create preview component with accordion layout
- Extract mock data to shared sample file
- Enhance procedure picker with preview mode
- Update schema to make procedure id required
- Improve detail row styling and layout

feat(treatment-report): update page titles and enhance preview component

- Update page titles for treatment report pages to be more descriptive
- Implement date formatting in treatment report preview
- Add router navigation for edit functionality
- Enhance preview component with detailed operation data sections
- Add support for tissue notes display in preview

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

@@ -9,7 +9,7 @@ import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-for
 import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'
 
 const doctors = ref<Doctor[]>([])
-
+const isLoading = ref<boolean>(false)
 // TODO: dummy data
 ;(() => {
   doctors.value = [genDoctor()]
@@ -18,7 +18,7 @@ const doctors = ref<Doctor[]>([])
 
 <template>
   <AppTreatmentReportEntry
-    :isLoading="false"
+    :isLoading="isLoading"
     @submit="(val) => console.log(val)"
     @error="
       (err: Error) => {
@@ -30,58 +30,6 @@ const doctors = ref<Doctor[]>([])
       }
     "
     :doctors="doctors"
-    :initialValues="
-      {
-        operatorTeam: {
-          dpjpId: -1,
-          operatorName: 'Julian',
-          assistantOperatorName: 'Amar',
-          instrumentNurseName: 'Anang',
-          surgeryDate: '2025-11-13T14:29',
-          actionDiagnosis: 'Omon Omon Saja',
-        },
-        procedures: [
-          {
-            id: -1,
-            name: 'Ndase mumet',
-            code: 'CX1',
-          },
-        ],
-        operationExecution: {
-          surgeryType: 'khusus',
-          billingCode: 'local',
-          operationSystem: 'cito',
-          surgeryCleanType: 'kotor',
-          surgeryNumber: 'retry',
-          birthPlaceNote: 'out3',
-          personWeight: 100,
-          operationDescription: 'asdsadsa1',
-          birthRemark: 'lahir_hidup',
-        },
-        bloodInput: {
-          type: 'tc',
-          amount: {
-            prc: null,
-            wb: null,
-            ffp: null,
-            tc: 3243324,
-          },
-        },
-        implant: {
-          brand: 'Samsung',
-          name: 'S.komedi',
-          companionName: 'When ya',
-        },
-        specimen: {
-          destination: 'pa',
-        },
-        tissueNotes: [
-          {
-            note: 'Anjai',
-          },
-        ],
-      } as unknown as TreatmentReportFormData
-    "
   >
     <template #procedures>
       <ArrangementProcedurePicker

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// types
+import { type TreatmentReportFormData } from '~/schemas/treatment-report.schema'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// #region Props & Emits
+const router = useRouter()
+const props = defineProps<{
+  id: string | number
+}>()
+
+// #endregion
+
+// #region State & Computed
+const reportData = ref<TreatmentReportFormData | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Laporan Tindakan',
+  icon: 'i-lucide-stethoscope',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  reportData.value = mockData as unknown as TreatmentReportFormData
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function onEdit() {
+  router.push({
+    name: 'treatment-report-id-edit',
+    params: { id: 100 },
+  })
+}
+function onBack() {}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppTreatmentReportPreview
+    v-if="reportData"
+    :data="reportData"
+    @back="onBack"
+    @edit="onEdit"
+  />
+</template>

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

@@ -0,0 +1,60 @@
+<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 detail = ref<TreatmentReportFormData | null>(null)
+
+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"
+    @submit="(val) => console.log(val)"
+    @error="
+      (err: Error) => {
+        toast({
+          title: 'Terjadi Kesalahan',
+          description: err.message,
+          variant: 'destructive',
+        })
+      }
+    "
+    :doctors="doctors"
+    :initialValues="detail as unknown as TreatmentReportFormData"
+  >
+    <template #procedures>
+      <ArrangementProcedurePicker
+        field-name="procedures"
+        title="Tindakan Operatif/Non-Operatif Lain"
+        sub-title="Pilih Prosedur"
+      />
+    </template>
+  </AppTreatmentReportEntry>
+</template>

app/components/content/treatment-report/sample.ts

@@ -0,0 +1,68 @@
+export default {
+  operatorTeam: {
+    dpjpId: -1,
+    operatorName: 'Julian Alvarez',
+    assistantOperatorName: 'Arda Guller',
+    instrumentNurseName: 'Kenan Yildiz',
+    surgeryDate: '2025-11-13T14:29:00',
+    actionDiagnosis: 'Sprei gratisnya mana',
+  },
+  procedures: [
+    {
+      id: -1,
+      name: 'Ndase mumet',
+      code: 'CX1',
+    },
+  ],
+  operationExecution: {
+    surgeryType: 'khusus',
+    billingCode: 'local',
+    operationSystem: 'cito',
+    surgeryCleanType: 'kotor',
+    surgeryNumber: 'retry',
+    birthPlaceNote: 'out3',
+    personWeight: 100,
+    operationDescription: 'asdsadsa1',
+    birthRemark: 'lahir_hidup',
+
+    operationStartAt: '2025-11-13T14:29:00',
+    operationEndAt: '2025-11-13T17:29:00',
+
+    anesthesiaStartAt: '2025-11-13T11:29:00',
+    anesthesiaEndAt: '2025-11-13T18:29:00',
+  },
+  bloodInput: {
+    type: 'tc',
+    amount: {
+      prc: null,
+      wb: null,
+      ffp: null,
+      tc: 3243324,
+    },
+  },
+  implant: {
+    brand: 'Samsung',
+    name: 'S.Komedi',
+    companionName: 'When ya',
+  },
+  specimen: {
+    destination: 'pa',
+  },
+  tissueNotes: [
+    {
+      note: 'Anjai',
+    },
+    {
+      note: 'Ciee Kaget',
+    },
+    {
+      note: 'Baper',
+    },
+    {
+      note: 'Saltink weeh',
+    },
+    {
+      note: 'Kaburrr',
+    },
+  ],
+}