From 7ee6f401966fe143eb3b6bc39360ad55bab53e47 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 25 Nov 2025 13:53:12 +0700
Subject: [PATCH 01/28] init: treatment report

feat(treatment-report): add treatment report component with sample data

Implement new treatment report feature including list view component, sample data, and configuration. The component supports pagination, filtering by date range, and search functionality. Also integrates with encounter process and home views.

wip: init form and schema
---
 .../app/treatment-report/entry-form.vue       |  7 ++
 .../app/treatment-report/fields/index.ts      |  1 +
 .../treatment-report/fields/select-dpjp.vue   |  3 +
 .../app/treatment-report/list.cfg.ts          | 88 ++++++++++++++++++
 app/components/app/treatment-report/list.vue  | 39 ++++++++
 app/components/app/treatment-report/sample.ts | 54 +++++++++++
 app/components/content/encounter/home.vue     | 10 ++-
 app/components/content/encounter/process.vue  |  8 ++
 .../content/treatment-report/add.vue          |  7 ++
 .../content/treatment-report/list.vue         | 73 +++++++++++++++
 app/pages/(features)/treatment-report/add.vue | 45 ++++++++++
 app/schemas/treatment-report.schema.ts        | 89 +++++++++++++++++++
 12 files changed, 422 insertions(+), 2 deletions(-)
 create mode 100644 app/components/app/treatment-report/entry-form.vue
 create mode 100644 app/components/app/treatment-report/fields/index.ts
 create mode 100644 app/components/app/treatment-report/fields/select-dpjp.vue
 create mode 100644 app/components/app/treatment-report/list.cfg.ts
 create mode 100644 app/components/app/treatment-report/list.vue
 create mode 100644 app/components/app/treatment-report/sample.ts
 create mode 100644 app/components/content/treatment-report/add.vue
 create mode 100644 app/components/content/treatment-report/list.vue
 create mode 100644 app/pages/(features)/treatment-report/add.vue
 create mode 100644 app/schemas/treatment-report.schema.ts

diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
new file mode 100644
index 00000000..2a474b15
--- /dev/null
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { SelectDPJP } from './fields'
+</script>
+
+<template>
+  <SelectDPJP />
+</template>
diff --git a/app/components/app/treatment-report/fields/index.ts b/app/components/app/treatment-report/fields/index.ts
new file mode 100644
index 00000000..ab2e32e9
--- /dev/null
+++ b/app/components/app/treatment-report/fields/index.ts
@@ -0,0 +1 @@
+export { default as SelectDPJP } from './select-dpjp.vue'
diff --git a/app/components/app/treatment-report/fields/select-dpjp.vue b/app/components/app/treatment-report/fields/select-dpjp.vue
new file mode 100644
index 00000000..dae90589
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-dpjp.vue
@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template>select dpjp</template>
diff --git a/app/components/app/treatment-report/list.cfg.ts b/app/components/app/treatment-report/list.cfg.ts
new file mode 100644
index 00000000..9b4c5df1
--- /dev/null
+++ b/app/components/app/treatment-report/list.cfg.ts
@@ -0,0 +1,88 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { TreatmentReportData } from '~/components/app/treatment-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL LAPORAN' },
+      { label: 'DPJP' },
+      { label: 'OPERATOR' },
+      { label: 'TANGGAL PEMBEDAHAN' },
+      { label: 'JENIS OPERASI' },
+      { label: 'KODE BILLING' },
+      { label: 'SISTEM OPERASI' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as TreatmentReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      const attr = (rec as TreatmentReportData).operationAt
+      const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
+
+      return result
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return 'dr. Dewi Arum Sawitri, Sp.An'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return 'Besar'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return 'dr. Irwansyah Kurniawan Sp.Bo'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/treatment-report/list.vue b/app/components/app/treatment-report/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/treatment-report/list.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/treatment-report/sample.ts b/app/components/app/treatment-report/sample.ts
new file mode 100644
index 00000000..9446b91c
--- /dev/null
+++ b/app/components/app/treatment-report/sample.ts
@@ -0,0 +1,54 @@
+import { addWeeks, formatISO } from 'date-fns'
+
+export type TreatmentReportData = {
+  id: number
+  reportAt: string
+  operationAt: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: TreatmentReportData[] = [
+  {
+    id: 1,
+    reportAt: formatISO(addWeeks(new Date(), -1)),
+    operationAt: formatISO(addWeeks(new Date(), 1)),
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    reportAt: new Date().toISOString(),
+    operationAt: formatISO(addWeeks(new Date(), 2)),
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
index 1f2c2943..c9822e52 100644
--- a/app/components/content/encounter/home.vue
+++ b/app/components/content/encounter/home.vue
@@ -130,7 +130,6 @@ const tabsRaws: TabItem[] = [
     component: MedicineProtocolList,
     props: { data: protocolRows, paginationMeta },
   },
-  { value: 'report', label: 'Laporan Tindakan', groups: ['chemotherapy'] },
   { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
   {
     value: 'education-assessment',
@@ -162,13 +161,20 @@ const tabsRaws: TabItem[] = [
   { value: 'resume', label: 'Resume', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
   { value: 'control', label: 'Surat Kontrol', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
   { value: 'screening', label: 'Skrinning MPP', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'report',
+    label: 'Laporan Tindakan',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Consultation,
+    props: { encounter: data },
+  },
   { value: 'supporting-document', label: 'Upload Dokumen Pendukung', groups: ['ambulatory', 'rehabilitation'] },
   { value: 'price-list', label: 'Tarif Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
 ]
 
 const tabs = computed(() => {
   return tabsRaws
-    .filter((tab: TabItem) => tab.groups ? tab.groups.some((group: string) => props.classes?.includes(group)) : true)
+    .filter((tab: TabItem) => (tab.groups ? tab.groups.some((group: string) => props.classes?.includes(group)) : true))
     .map((tab: TabItem) => {
       return { ...tab, props: { ...tab.props, encounter: data } }
     })
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 02fc7495..43b0f55b 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -22,6 +22,7 @@ import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
 import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 import Cprj from '~/components/content/cprj/entry.vue'
+import TreatmentReport from '~/components/content/treatment-report/list.vue'
 import DocUploadList from '~/components/content/document-upload/list.vue'
 import GeneralConsentList from '~/components/content/general-consent/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
@@ -90,6 +91,13 @@ const tabs: TabItem[] = [
   { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
   { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
   { value: 'screening', label: 'Skrinning MPP' },
+  {
+    value: 'report',
+    label: 'Laporan Tindakan',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: TreatmentReport,
+    props: { encounter: data },
+  },
   {
     value: 'supporting-document',
     label: 'Upload Dokumen Pendukung',
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/add.vue
new file mode 100644
index 00000000..c1446a5a
--- /dev/null
+++ b/app/components/content/treatment-report/add.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue'
+</script>
+
+<template>
+  <AppTreatmentReportEntry />
+</template>
diff --git a/app/components/content/treatment-report/list.vue b/app/components/content/treatment-report/list.vue
new file mode 100644
index 00000000..e6ece811
--- /dev/null
+++ b/app/components/content/treatment-report/list.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Components
+import AppTreatmentReportList from '~/components/app/treatment-report/list.vue'
+
+// Samples
+import { sampleRows, type TreatmentReportData } from '~/components/app/treatment-report/sample'
+
+const search = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+
+// filter + pencarian sederhana (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: TreatmentReportData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Laporan Tindakan</h1>
+      <p class="mt-1 text-sm text-gray-500">Infomasi laporan tindakan pasien</p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <div class="flex items-center gap-2">
+        <input
+          v-model="search"
+          placeholder="Cari Nama / No.RM"
+          class="w-64 rounded border px-3 py-2"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input
+          v-model="dateFrom"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <span class="text-sm text-gray-500">-</span>
+        <input
+          v-model="dateTo"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+      </div>
+
+      <button class="ml-auto rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">Filter</button>
+    </div>
+
+    <div class="overflow-x-auto p-4">
+      <AppTreatmentReportList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/(features)/treatment-report/add.vue b/app/pages/(features)/treatment-report/add.vue
new file mode 100644
index 00000000..b8459422
--- /dev/null
+++ b/app/pages/(features)/treatment-report/add.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Laporan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+const hasAccess = true
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentTreatmentReportAdd />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/schemas/treatment-report.schema.ts b/app/schemas/treatment-report.schema.ts
new file mode 100644
index 00000000..f9aac9a8
--- /dev/null
+++ b/app/schemas/treatment-report.schema.ts
@@ -0,0 +1,89 @@
+import { z } from 'zod'
+
+const isoDateTime = z.string().min(1, 'Tanggal / waktu wajib diisi')
+const positiveInt = z.number().int().nonnegative()
+
+const OperatorTeamSchema = z.object({
+  dpjpId: z.number().int(),
+  operatorId: z.number().int(),
+  assistantOperatorId: z.number().int().optional().nullable(),
+  instrumentNurseId: z.number().int().optional().nullable(),
+
+  surgeryDate: isoDateTime,
+  actionDiagnosis: z.string().min(1),
+
+  postOpNurseId: z.number().int().optional().nullable(),
+})
+
+const ProcedureSchema = z.object({
+  id: z.number().int().optional(),
+  name: z.string().min(1),
+  code: z.string().min(1),
+})
+
+const OperationExecutionSchema = z.object({
+  surgeryType: z.enum(['kecil', 'sedang', 'besar', 'khusus']),
+  billingCode: z.string().min(1),
+  operationSystem: z.enum(['khusus', 'cito', 'elektif']),
+
+  operationStartAt: isoDateTime,
+  operationEndAt: isoDateTime,
+
+  anesthesiaStartAt: isoDateTime,
+  anesthesiaEndAt: isoDateTime,
+
+  surgeryCleanType: z.enum(['bersih', 'bersih_terkontaminasi', 'terkontaminasi', 'kotor']).optional(),
+  surgeryNumber: z.enum(['1', '2', '3', '4+', 'tidak_diketahui']).optional(),
+
+  birthPlaceNote: z.string().optional(),
+  babyWeightGram: positiveInt.optional(),
+  birthCondition: z.string().optional(),
+
+  operationDescription: z.string().min(1),
+
+  bleedingAmountCc: positiveInt.optional(),
+
+  birthRemark: z.enum(['lahir_hidup', 'lahir_mati', 'abortus', 'tidak_diketahui']).optional(),
+})
+
+const BloodComponentSchema = z.object({
+  used: z.boolean().default(false),
+  volumeCc: positiveInt.optional(),
+})
+
+const BloodInputSchema = z.object({
+  prc: BloodComponentSchema,
+  ffp: BloodComponentSchema,
+  wb: BloodComponentSchema,
+  tc: BloodComponentSchema,
+})
+
+const ImplantSchema = z.object({
+  brand: z.string().optional(),
+  name: z.string().optional(),
+  stickerNumber: z.string().optional(),
+  companionName: z.string().optional(),
+})
+
+const SpecimenSchema = z.object({
+  destination: z.string().min(1),
+})
+
+const TissueNoteSchema = z.object({
+  note: z.string().min(1),
+})
+
+export const ActionReportSchema = z.object({
+  operatorTeam: OperatorTeamSchema,
+  procedures: z.array(ProcedureSchema).min(1),
+
+  operationExecution: OperationExecutionSchema,
+
+  bloodInput: BloodInputSchema.optional(),
+  implant: ImplantSchema.optional(),
+  specimen: SpecimenSchema.optional(),
+
+  tissueNotes: z.array(TissueNoteSchema).optional(),
+})
+
+export type ActionReportFormData = z.infer<typeof ActionReportSchema>

From 3fbcdf9e2aa107e01df9b2764588edfae67fdbe2 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 25 Nov 2025 15:32:58 +0700
Subject: [PATCH 02/28] refactor(treatment-report): restructure treatment
 report form and components

- Replace SelectDPJP with SelectDoctor component
- Update schema naming from ActionReport to TreatmentReport
- Add doctor selection functionality to treatment report form
- Improve form layout and field organization
- Update related model imports to use single quotes
- add fragment for better form grouping
- cherry pick form field from another branch
---
 app/components/app/doctor/fields/index.ts     |   1 +
 .../app/doctor/fields/select-doctor.vue       |  72 ++++++++
 .../app/treatment-report/entry-form.vue       | 161 ++++++++++++++++-
 .../app/treatment-report/fields/index.ts      |   1 -
 .../treatment-report/fields/select-dpjp.vue   |   3 -
 .../content/treatment-report/add.vue          |  16 +-
 .../pub/my-ui/form/button-action.vue          | 165 ++++++++++++++++++
 app/components/pub/my-ui/form/file-field.vue  |   5 +-
 app/components/pub/my-ui/form/fragment.vue    |  26 +++
 app/components/pub/my-ui/form/index.ts        |  11 ++
 app/components/pub/my-ui/form/input-base.vue  |  75 +++++---
 app/components/pub/my-ui/form/select.vue      |   9 +-
 app/models/doctor.ts                          |   8 +-
 app/models/person.ts                          |  19 +-
 app/schemas/treatment-report.schema.ts        |   6 +-
 15 files changed, 532 insertions(+), 46 deletions(-)
 create mode 100644 app/components/app/doctor/fields/index.ts
 create mode 100644 app/components/app/doctor/fields/select-doctor.vue
 delete mode 100644 app/components/app/treatment-report/fields/index.ts
 delete mode 100644 app/components/app/treatment-report/fields/select-dpjp.vue
 create mode 100644 app/components/pub/my-ui/form/button-action.vue
 create mode 100644 app/components/pub/my-ui/form/fragment.vue
 create mode 100644 app/components/pub/my-ui/form/index.ts

diff --git a/app/components/app/doctor/fields/index.ts b/app/components/app/doctor/fields/index.ts
new file mode 100644
index 00000000..32d92f2f
--- /dev/null
+++ b/app/components/app/doctor/fields/index.ts
@@ -0,0 +1 @@
+export { default as SelectDoctor } from './select-doctor.vue'
diff --git a/app/components/app/doctor/fields/select-doctor.vue b/app/components/app/doctor/fields/select-doctor.vue
new file mode 100644
index 00000000..daa55062
--- /dev/null
+++ b/app/components/app/doctor/fields/select-doctor.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+// type
+import type { Doctor } from '~/models/doctor'
+import { type Person, parseName } from '~/models/person'
+
+// componenets
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  placeholder: string
+  doctors?: Doctor[]
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  colSpan?: number
+}>()
+
+const { class: containerClass, labelClass, colSpan = 1, doctors = [] } = props
+
+const opts = computed(() => {
+  return doctors.map((doc) => ({
+    value: doc.id.toString(),
+    label: parseName(doc.employee.person as Person),
+  }))
+})
+</script>
+
+<template>
+  <DE.Cell
+    :col-span="colSpan"
+    :class="cn('select-field-group', fieldGroupClass, containerClass)"
+  >
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari dokter..."
+              empty-message="Dokter tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
index 2a474b15..8cc7db1a 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -1,7 +1,164 @@
 <script setup lang="ts">
-import { SelectDPJP } from './fields'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import { TreatmentReportSchema } from '~/schemas/treatment-report.schema'
+// type
+import type { Doctor } from '~/models/doctor'
+
+// components
+import { Form } from '~/components/pub/ui/form'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+
+// form field components
+import { ButtonAction, Fragment, InputBase } from '~/components/pub/my-ui/form/'
+import { SelectDoctor } from '~/components/app/doctor/fields'
+// Helpers
+
+// #region Props & Emits
+interface Props {
+  isLoading: boolean
+  mode?: 'create' | 'update' | 'view'
+  initialValues?: any
+
+  // form related
+  doctors: Doctor[]
+}
+
+const props = defineProps<Props>()
+const { mode = 'create' } = props
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+const formSchema = toTypedSchema(TreatmentReportSchema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
 </script>
 
 <template>
-  <SelectDPJP />
+  <Form
+    ref="formRef"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    :initial-values="initialValues ? initialValues : {}"
+    validation-mode="onSubmit"
+  >
+    <Fragment
+      v-slot="{ section }"
+      title="Tim Pelaksana Tindakan"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <SelectDoctor
+          :doctors="doctors"
+          fieldName="dpjp"
+          label="Dokter Pemeriksa"
+          placeholder="Pilih dokter"
+        />
+        <InputBase
+          field-name="operatorId"
+          label="Operator"
+          placeholder="Masukkan operator"
+        />
+        <InputBase
+          field-name="assistantOperatorId"
+          label="Asisten Operator"
+          placeholder="Masukkan asisten operator"
+        />
+        <InputBase
+          field-name="instrumentNurseId"
+          label="Instrumentir"
+          placeholder="Masukkan instrumentir"
+        />
+        <InputBase
+          field-name="surgeryDate"
+          label="Tanggal Pembedahan"
+          placeholder="Pilih Tanggal"
+          icon-name="i-lucide-calendar"
+          is-disabled
+        />
+      </DE.Block>
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="actionDiagnosis"
+          label="Diagnosa Tindakan"
+          placeholder="Masukkan diagnosa tindakan"
+          :col-span="2"
+        />
+        <InputBase
+          field-name="postSurgeryNurseId"
+          label="Perawat Pasca Bedah"
+          placeholder="Masukkan perawat pasca bedah"
+        />
+      </DE.Block>
+    </Fragment>
+
+    <Separator class="my-4" />
+
+    <Fragment
+      v-slot="{ section }"
+      title="Tindakan Operatif/Non Operatif Lain"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationType"
+          label="Tindakan Opearatif/Non"
+          placeholder="Masukkan tindakan operatif/non"
+          :col-span="2"
+        />
+      </DE.Block>
+    </Fragment>
+
+    <Separator class="my-4" />
+
+    <Fragment
+      v-slot="{ section }"
+      title="Data Pelaksanaan Operasi"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationType"
+          label="Tindakan Opearatif/Non"
+          placeholder="Masukkan tindakan operatif/non"
+          :col-span="2"
+        />
+      </DE.Block>
+    </Fragment>
+  </Form>
 </template>
diff --git a/app/components/app/treatment-report/fields/index.ts b/app/components/app/treatment-report/fields/index.ts
deleted file mode 100644
index ab2e32e9..00000000
--- a/app/components/app/treatment-report/fields/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SelectDPJP } from './select-dpjp.vue'
diff --git a/app/components/app/treatment-report/fields/select-dpjp.vue b/app/components/app/treatment-report/fields/select-dpjp.vue
deleted file mode 100644
index dae90589..00000000
--- a/app/components/app/treatment-report/fields/select-dpjp.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>select dpjp</template>
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/add.vue
index c1446a5a..6789238e 100644
--- a/app/components/content/treatment-report/add.vue
+++ b/app/components/content/treatment-report/add.vue
@@ -1,7 +1,21 @@
 <script setup lang="ts">
+// type
+import { genDoctor, type Doctor } from '~/models/doctor'
+
+// components
 import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue'
+
+const doctors = ref<Doctor[]>([])
+
+// TODO: dummy data
+;(() => {
+  doctors.value = [genDoctor()]
+})()
 </script>
 
 <template>
-  <AppTreatmentReportEntry />
+  <AppTreatmentReportEntry
+    :isLoading="false"
+    :doctors="doctors"
+  />
 </template>
diff --git a/app/components/pub/my-ui/form/button-action.vue b/app/components/pub/my-ui/form/button-action.vue
new file mode 100644
index 00000000..a1054948
--- /dev/null
+++ b/app/components/pub/my-ui/form/button-action.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { Button } from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+
+/**
+ * Button Action Component untuk form
+ * Support preset: add, delete, save, cancel
+ */
+interface Props {
+  /**
+   * Preset button type dengan styling bawaan
+   * - add: Button tambah (outline primary)
+   * - delete: Button hapus (ghost)
+   * - save: Button simpan (primary)
+   * - cancel: Button batal (secondary)
+   * - custom: Custom styling
+   */
+  preset?: 'add' | 'delete' | 'save' | 'cancel' | 'custom'
+
+  /**
+   * Icon name (UnoCSS/Lucide)
+   * Default akan diset berdasarkan preset
+   */
+  icon?: string
+
+  /**
+   * Button text
+   * Set ke empty string ('') untuk icon-only mode
+   */
+  label?: string
+
+  /**
+   * Button title (tooltip)
+   * Wajib untuk icon-only buttons (accessibility)
+   */
+  title?: string
+
+  /**
+   * Icon only mode (no label)
+   * Otomatis true jika label kosong
+   */
+  iconOnly?: boolean
+
+  /**
+   * Button type
+   */
+  type?: 'button' | 'submit' | 'reset'
+
+  /**
+   * Disabled state
+   */
+  disabled?: boolean
+
+  /**
+   * Custom class untuk override styling
+   */
+  class?: string
+
+  /**
+   * Responsive width (full width on mobile)
+   */
+  fullWidthMobile?: boolean
+
+  /**
+   * Button size
+   */
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+
+  /**
+   * Button variant (override preset variant)
+   */
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  preset: 'custom',
+  type: 'button',
+  disabled: false,
+  fullWidthMobile: false,
+  iconOnly: false,
+})
+
+// Preset configurations
+const presetConfig = {
+  add: {
+    variant: 'outline' as const,
+    icon: 'i-lucide-plus',
+    label: 'Tambah',
+    classes:
+      'border-primary bg-white text-primary hover:bg-primary hover:text-white dark:bg-slate-800 dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white',
+  },
+  delete: {
+    variant: 'ghost' as const,
+    icon: 'i-lucide-trash-2',
+    label: '', // Default kosong untuk icon-only
+    classes:
+      'hover:bg-destructive hover:text-white hover:border-destructive dark:hover:bg-destructive dark:hover:text-white',
+  },
+  save: {
+    variant: 'default' as const,
+    icon: 'i-lucide-save',
+    label: 'Simpan',
+    classes: 'bg-primary text-primary-foreground hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90',
+  },
+  cancel: {
+    variant: 'secondary' as const,
+    icon: 'i-lucide-x',
+    label: 'Batal',
+    classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 dark:bg-slate-700 dark:hover:bg-slate-600',
+  },
+  custom: {
+    variant: 'default' as const,
+    icon: '',
+    label: '',
+    classes: '',
+  },
+}
+
+const currentPreset = computed(() => presetConfig[props.preset])
+const buttonVariant = computed(() => props.variant || currentPreset.value.variant)
+const buttonIcon = computed(() => props.icon || currentPreset.value.icon)
+
+// Label handling: gunakan prop label jika ada, fallback ke preset, atau undefined jika iconOnly
+const buttonLabel = computed(() => {
+  if (props.label !== undefined) return props.label
+  return currentPreset.value.label
+})
+
+const buttonTitle = computed(() => props.title || buttonLabel.value)
+
+// Deteksi icon-only mode
+const isIconOnly = computed(() => {
+  return props.iconOnly || buttonLabel.value === '' || !buttonLabel.value
+})
+
+const buttonClasses = computed(() => {
+  // Base classes berbeda untuk icon-only vs with-label
+  const baseClasses = isIconOnly.value
+    ? 'rounded-md p-2 w-9 h-9 transition-colors flex items-center justify-center' // Icon only: square button
+    : 'rounded-md px-4 py-2 transition-colors sm:text-sm' // With label: padding horizontal lebih besar
+
+  const widthClasses = props.fullWidthMobile && !isIconOnly.value ? 'w-full sm:w-auto' : ''
+  const presetClasses = currentPreset.value.classes
+
+  return cn(baseClasses, widthClasses, presetClasses, props.class)
+})
+</script>
+
+<template>
+  <Button
+    :title="buttonTitle"
+    :type="type"
+    :variant="buttonVariant"
+    :size="size"
+    :disabled="disabled"
+    :class="buttonClasses"
+  >
+    <Icon
+      v-if="buttonIcon"
+      :name="buttonIcon"
+      :class="cn('h-4 w-4 align-middle transition-colors', !isIconOnly ? 'mr-2' : '')"
+    />
+    <slot v-if="!isIconOnly">{{ buttonLabel }}</slot>
+  </Button>
+</template>
diff --git a/app/components/pub/my-ui/form/file-field.vue b/app/components/pub/my-ui/form/file-field.vue
index 31885a6f..332d2e88 100644
--- a/app/components/pub/my-ui/form/file-field.vue
+++ b/app/components/pub/my-ui/form/file-field.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
@@ -62,7 +59,7 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
               @change="onFileChange($event, handleChange)"
               type="file"
               :disabled="isDisabled"
-              v-bind="{ onBlur: componentField.onBlur }" 
+              v-bind="{ onBlur: componentField.onBlur }"
               :placeholder="placeholder"
               :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
             />
diff --git a/app/components/pub/my-ui/form/fragment.vue b/app/components/pub/my-ui/form/fragment.vue
new file mode 100644
index 00000000..a3f3135c
--- /dev/null
+++ b/app/components/pub/my-ui/form/fragment.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * A "Ghost" wrapper component designed to group related form fields
+ * without adding unnecessary depth to the DOM tree.
+ * * Unlike a standard <div> wrapper, this component leverages Vue 3's
+ * multi-root feature to render the title and slot content as direct siblings.
+ * This ensures the parent Form's grid or flex layout remains intact.
+ * * @property {string} [title] for compiler marker.
+ *
+ * Example Usage:
+ *
+    <Fragment
+      v-slot="{ section }"
+      title="Tim Pelaksana Tindakan"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+    </Fragment>
+ */
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <slot :section="title" />
+</template>
diff --git a/app/components/pub/my-ui/form/index.ts b/app/components/pub/my-ui/form/index.ts
new file mode 100644
index 00000000..246bb8c6
--- /dev/null
+++ b/app/components/pub/my-ui/form/index.ts
@@ -0,0 +1,11 @@
+export { default as Block } from './block.vue'
+export { default as ButtonAction } from './button-action.vue'
+export { default as FieldGroup } from './field-group.vue'
+export { default as Field } from './field.vue'
+export { default as FileField } from './file-field.vue'
+export { default as Fragment } from './fragment.vue'
+export { default as InputBase } from './input-base.vue'
+export { default as Label } from './label.vue'
+export { default as Select } from './select.vue'
+export { default as TextAreaInput } from './text-area-input.vue'
+export { default as TextCaptcha } from './text-captcha.vue'
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index c31b2073..050a0f78 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
+import { computed } from 'vue'
+import { useFieldError } from 'vee-validate'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
   fieldName: string
   placeholder: string
-  label: string
+  label?: string
   errors?: FormErrors
   class?: string
   colSpan?: number
@@ -21,6 +20,8 @@ const props = defineProps<{
   isDisabled?: boolean
   rightLabel?: string
   bottomLabel?: string
+  suffixMsg?: string
+  iconName?: string
 }>()
 
 function handleInput(event: Event) {
@@ -44,12 +45,16 @@ function handleInput(event: Event) {
     target.dispatchEvent(new Event('input', { bubbles: true }))
   }
 }
+
+// Get error state from vee-validate
+const fieldError = useFieldError(() => props.fieldName)
+const hasError = computed(() => !!fieldError.value)
 </script>
 
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      v-if="label !== ''"
+      v-if="label"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
     >
@@ -63,27 +68,53 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem :class="cn(`relative`,)">
-          <FormControl>
-            <Input
-              :disabled="isDisabled"
-              v-bind="componentField"
-              :placeholder="placeholder"
-              :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
-              autocomplete="off"
-              aria-autocomplete="none"
-              autocorrect="off"
-              autocapitalize="off"
-              spellcheck="false"
-              @input="handleInput"
-            />
-            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
+        <FormItem>
+          <FormControl class="relative">
+            <div class="relative w-full max-w-sm items-center">
+              <Input
+                :disabled="isDisabled"
+                v-bind="componentField"
+                :placeholder="placeholder"
+                :maxlength="maxLength"
+                :class="cn(
+                  'focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0',
+                  hasError && 'border-red-500 focus:border-red-500 focus:ring-red-500'
+                )"
+                autocomplete="off"
+                aria-autocomplete="none"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                @input="handleInput"
+              />
+              <span
+                v-if="suffixMsg"
+                class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-muted-foreground"
+              >
+                {{ suffixMsg }}
+              </span>
+              <Icon
+                v-if="iconName"
+                :name="iconName"
+                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400"
+              />
+              <p
+                v-show="rightLabel"
+                class="absolute right-3 top-0 text-gray-400"
+              >
+                {{ rightLabel }}
+              </p>
+            </div>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
-    <p v-show="bottomLabel" class="text-gray-400 mt-1">{{ bottomLabel }}</p>    
+    <p
+      v-show="bottomLabel"
+      class="text-gray-400"
+    >
+      {{ bottomLabel }}
+    </p>
   </DE.Cell>
 </template>
diff --git a/app/components/pub/my-ui/form/select.vue b/app/components/pub/my-ui/form/select.vue
index 0cfc926b..0227d2b1 100644
--- a/app/components/pub/my-ui/form/select.vue
+++ b/app/components/pub/my-ui/form/select.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SelectRoot } from 'radix-vue'
-import { watch } from 'vue'
+import { watch, computed } from 'vue'
+import { useFieldError } from 'vee-validate'
 import SelectContent from '~/components/pub/ui/select/SelectContent.vue'
 import SelectGroup from '~/components/pub/ui/select/SelectGroup.vue'
 import SelectItem from '~/components/pub/ui/select/SelectItem.vue'
@@ -29,9 +30,14 @@ const props = defineProps<{
   isDisabled?: boolean
   autoWidth?: boolean
   autoFill?: boolean
+  id?: string
   // otherPlacement sudah tidak digunakan, diganti dengan priority system di Item interface
 }>()
 
+// Get error state from vee-validate if id is provided
+const fieldError = props.id ? useFieldError(() => props.id!) : ref(null)
+const hasError = computed(() => !!fieldError.value)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -121,6 +127,7 @@ watch(
             'cursor-not-allowed bg-gray-100 opacity-50': isDisabled,
             'bg-white text-black dark:bg-gray-800 dark:text-white': !isDisabled,
             'w-full': !autoWidth,
+            'border-red-500 focus:ring-red-500': hasError,
           },
           props.class,
         )
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
index 1b631907..abf06692 100644
--- a/app/models/doctor.ts
+++ b/app/models/doctor.ts
@@ -1,7 +1,7 @@
-import { type Base, genBase } from "./_base"
-import { type Employee, genEmployee } from "./employee"
-import type { Specialist } from "./specialist"
-import type { Subspecialist } from "./subspecialist"
+import { type Base, genBase } from './_base'
+import { type Employee, genEmployee } from './employee'
+import type { Specialist } from './specialist'
+import type { Subspecialist } from './subspecialist'
 
 export interface Doctor extends Base {
   employee_id: number
diff --git a/app/models/person.ts b/app/models/person.ts
index 06b313b8..f2c400b6 100644
--- a/app/models/person.ts
+++ b/app/models/person.ts
@@ -1,7 +1,7 @@
-import { type Base, genBase } from "./_base"
-import type { PersonAddress } from "./person-address"
-import type { PersonContact } from "./person-contact"
-import type { PersonRelative } from "./person-relative"
+import { type Base, genBase } from './_base'
+import type { PersonAddress } from './person-address'
+import type { PersonContact } from './person-contact'
+import type { PersonRelative } from './person-relative'
 import type { Ethnic } from './ethnic'
 import type { Language } from './language'
 import type { Regency } from './regency'
@@ -43,6 +43,15 @@ export interface Person extends Base {
 export function genPerson(): Person {
   return {
     ...genBase(),
-    name: '',
+    frontTitle: '[MOCK] dr. ',
+    name: 'Agus Iwan Setiawan',
+    endTitle: 'Sp.Bo',
   }
 }
+
+export function parseName(person: Person): string {
+  if (!person) return ''
+  const fullName = [person.frontTitle, person.name, person.endTitle].filter(Boolean).join(' ').trim()
+
+  return fullName
+}
diff --git a/app/schemas/treatment-report.schema.ts b/app/schemas/treatment-report.schema.ts
index f9aac9a8..5bb247d0 100644
--- a/app/schemas/treatment-report.schema.ts
+++ b/app/schemas/treatment-report.schema.ts
@@ -12,7 +12,7 @@ const OperatorTeamSchema = z.object({
   surgeryDate: isoDateTime,
   actionDiagnosis: z.string().min(1),
 
-  postOpNurseId: z.number().int().optional().nullable(),
+  postSurgeryNurseId: z.number().int().optional().nullable(),
 })
 
 const ProcedureSchema = z.object({
@@ -73,7 +73,7 @@ const TissueNoteSchema = z.object({
   note: z.string().min(1),
 })
 
-export const ActionReportSchema = z.object({
+export const TreatmentReportSchema = z.object({
   operatorTeam: OperatorTeamSchema,
   procedures: z.array(ProcedureSchema).min(1),
 
@@ -86,4 +86,4 @@ export const ActionReportSchema = z.object({
   tissueNotes: z.array(TissueNoteSchema).optional(),
 })
 
-export type ActionReportFormData = z.infer<typeof ActionReportSchema>
+export type TreatmentReportFormData = z.infer<typeof TreatmentReportSchema>

From 6a29fdfd5047939f3e50e01113c01e3da84b8093 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 25 Nov 2025 20:46:04 +0700
Subject: [PATCH 03/28] refactor(glob:form): update form handling and type
 definitions

- Migrate from Form component to vee-validate useForm
- Update combobox component to support number values
- Modify base model ID type for mock data
- Improve type safety in treatment report schema
- Add proper form submission handling
---
 .../app/doctor/fields/select-doctor.vue       |  2 +-
 .../app/treatment-report/entry-form.vue       | 81 +++++++++++++------
 .../content/treatment-report/add.vue          |  8 ++
 .../pub/my-ui/combobox/combobox.vue           |  6 +-
 app/components/pub/my-ui/combobox/index.ts    |  8 +-
 app/models/_base.ts                           |  5 +-
 app/schemas/treatment-report.schema.ts        | 16 +++-
 7 files changed, 86 insertions(+), 40 deletions(-)

diff --git a/app/components/app/doctor/fields/select-doctor.vue b/app/components/app/doctor/fields/select-doctor.vue
index daa55062..8921350c 100644
--- a/app/components/app/doctor/fields/select-doctor.vue
+++ b/app/components/app/doctor/fields/select-doctor.vue
@@ -27,7 +27,7 @@ const { class: containerClass, labelClass, colSpan = 1, doctors = [] } = props
 
 const opts = computed(() => {
   return doctors.map((doc) => ({
-    value: doc.id.toString(),
+    value: doc.id,
     label: parseName(doc.employee.person as Person),
   }))
 })
diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
index 8cc7db1a..77367f97 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-import { TreatmentReportSchema } from '~/schemas/treatment-report.schema'
+
+// schema
+import { type TreatmentReportFormData, TreatmentReportSchema } from '~/schemas/treatment-report.schema'
+
 // type
 import type { Doctor } from '~/models/doctor'
 
@@ -16,18 +19,50 @@ import { SelectDoctor } from '~/components/app/doctor/fields'
 // Helpers
 
 // #region Props & Emits
+interface FormData extends TreatmentReportFormData {
+  hiddenNyc: number
+}
+
 interface Props {
   isLoading: boolean
   mode?: 'create' | 'update' | 'view'
-  initialValues?: any
+  initialValues?: Partial<FormData>
 
   // form related
   doctors: Doctor[]
 }
 
 const props = defineProps<Props>()
-const { mode = 'create' } = props
+const emit = defineEmits<{
+  (e: 'submit', payload: FormData): void
+}>()
+const { isLoading, mode = 'create' } = props
+const isReadonly = computed(() => {
+  if (isLoading) {
+    return true
+  }
 
+  if (mode === 'view') {
+    return true
+  }
+
+  return false
+})
+const formSchema = toTypedSchema(TreatmentReportSchema)
+
+const { handleSubmit, values, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
+  name: 'treatmentReportForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues ? props.initialValues : {},
+  validateOnMount: false,
+})
+
+defineExpose({
+  validate,
+  resetForm,
+  setValues,
+  values,
+})
 // #endregion
 
 // #region State & Computed
@@ -40,28 +75,12 @@ const { mode = 'create' } = props
 // #endregion region
 
 // #region Utilities & event handlers
+const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues))
 // #endregion
-const formSchema = toTypedSchema(TreatmentReportSchema)
-const formRef = ref()
-
-defineExpose({
-  validate: () => formRef.value?.validate(),
-  resetForm: () => formRef.value?.resetForm(),
-  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
-  values: computed(() => formRef.value?.values),
-})
 </script>
 
 <template>
-  <Form
-    ref="formRef"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :validate-on-mount="false"
-    :initial-values="initialValues ? initialValues : {}"
-    validation-mode="onSubmit"
-  >
+  <form @submit="onSubmit">
     <Fragment
       v-slot="{ section }"
       title="Tim Pelaksana Tindakan"
@@ -73,13 +92,14 @@ defineExpose({
         :cell-flex="false"
       >
         <SelectDoctor
-          :doctors="doctors"
-          fieldName="dpjp"
+          fieldName="operatorTeam.dpjpId"
           label="Dokter Pemeriksa"
           placeholder="Pilih dokter"
+          :doctors="doctors"
+          :is-disabled="isReadonly"
         />
         <InputBase
-          field-name="operatorId"
+          field-name="operatorTeam.operatorId"
           label="Operator"
           placeholder="Masukkan operator"
         />
@@ -160,5 +180,14 @@ defineExpose({
         />
       </DE.Block>
     </Fragment>
-  </Form>
+    <div class="mt-4 flex justify-end">
+      <button
+        type="submit"
+        class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
+        :disabled="isLoading"
+      >
+        {{ isLoading ? 'Menyimpan...' : 'Simpan' }}
+      </button>
+    </div>
+  </form>
 </template>
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/add.vue
index 6789238e..e92cd473 100644
--- a/app/components/content/treatment-report/add.vue
+++ b/app/components/content/treatment-report/add.vue
@@ -4,6 +4,7 @@ import { genDoctor, type Doctor } from '~/models/doctor'
 
 // components
 import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue'
+import type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'
 
 const doctors = ref<Doctor[]>([])
 
@@ -17,5 +18,12 @@ const doctors = ref<Doctor[]>([])
   <AppTreatmentReportEntry
     :isLoading="false"
     :doctors="doctors"
+    :initialValues="
+      {
+        operatorTeam: {
+          // dpjpId: -1,
+        },
+      } as TreatmentReportFormData
+    "
   />
 </template>
diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index 713edd57..de544717 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -5,7 +5,7 @@ import { type Item } from './index'
 
 const props = defineProps<{
   id?: string
-  modelValue?: string
+  modelValue?: string | number
   items: Item[]
   placeholder?: string
   searchPlaceholder?: string
@@ -15,8 +15,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'update:searchText': [value: string]
+  'update:modelValue': [value: string | number]
+  'update:searchText': [value: string | number]
 }>()
 
 const open = ref(false)
diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
index e4864f7f..f3038de7 100644
--- a/app/components/pub/my-ui/combobox/index.ts
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -1,5 +1,5 @@
 export interface Item {
-  value: string
+  value: string | number
   label: string
   code?: string
   priority?: number
@@ -7,12 +7,12 @@ export interface Item {
 
 export function recStrToItem(input: Record<string, string>): Item[] {
   const items: Item[] = []
-  let idx = 0;
+  let idx = 0
   for (const key in input) {
     if (input.hasOwnProperty(key)) {
       items.push({
-        value: key || ('unknown-' + idx),
-        label: input[key] || ('unknown-' + idx),
+        value: key || 'unknown-' + idx,
+        label: input[key] || 'unknown-' + idx,
       })
     }
     idx++
diff --git a/app/models/_base.ts b/app/models/_base.ts
index 6aaa99fc..ed6f7204 100644
--- a/app/models/_base.ts
+++ b/app/models/_base.ts
@@ -1,4 +1,3 @@
-
 export interface Base {
   id: number
   createdAt: string | null
@@ -20,7 +19,9 @@ export interface TreeItem {
 
 export function genBase(): Base {
   return {
-    id: 0,
+    // -1 buat mock data
+    // backend harusnya non-negative/ > 0  (untuk auto increment constraint) jadi harusnya aman ya
+    id: -1,
     createdAt: '',
     updatedAt: '',
   }
diff --git a/app/schemas/treatment-report.schema.ts b/app/schemas/treatment-report.schema.ts
index 5bb247d0..eeb1c889 100644
--- a/app/schemas/treatment-report.schema.ts
+++ b/app/schemas/treatment-report.schema.ts
@@ -4,10 +4,18 @@ const isoDateTime = z.string().min(1, 'Tanggal / waktu wajib diisi')
 const positiveInt = z.number().int().nonnegative()
 
 const OperatorTeamSchema = z.object({
-  dpjpId: z.number().int(),
-  operatorId: z.number().int(),
-  assistantOperatorId: z.number().int().optional().nullable(),
-  instrumentNurseId: z.number().int().optional().nullable(),
+  dpjpId: z.coerce
+    .number({
+      invalid_type_error: 'Dokter Pemeriksa wajib diisi',
+    })
+    .int(),
+  operatorId: z.coerce
+    .number({
+      invalid_type_error: 'Operator wajib diisi',
+    })
+    .int(),
+  assistantOperatorId: z.coerce.number().int().optional().nullable(),
+  instrumentNurseId: z.coerce.number().int().optional().nullable(),
 
   surgeryDate: isoDateTime,
   actionDiagnosis: z.string().min(1),

From f5704536d1542b96dfd57ccc7cf5b8a13e0e4a54 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 25 Nov 2025 21:12:18 +0700
Subject: [PATCH 04/28] feat(treatment-report): add error handling and toast
 notification

Implement error handling in treatment report form submission and display toast notifications when errors occur. The form now emits error events and prevents default form submission behavior.
---
 .../app/treatment-report/entry-form.vue           | 15 +++++++++++++--
 app/components/content/treatment-report/add.vue   | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
index 77367f97..8e19cc64 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -35,7 +35,9 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits<{
   (e: 'submit', payload: FormData): void
+  (e: 'error', errors: Error): void
 }>()
+
 const { isLoading, mode = 'create' } = props
 const isReadonly = computed(() => {
   if (isLoading) {
@@ -48,6 +50,7 @@ const isReadonly = computed(() => {
 
   return false
 })
+
 const formSchema = toTypedSchema(TreatmentReportSchema)
 
 const { handleSubmit, values, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
@@ -75,12 +78,20 @@ defineExpose({
 // #endregion region
 
 // #region Utilities & event handlers
-const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues))
+// const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues))
+const onSubmit = handleSubmit(
+  (values) => {
+    emit('submit', values)
+  },
+  (errors) => {
+    emit('error', new Error('Silahkan lengkapi form terlebih dahulu'))
+  },
+)
 // #endregion
 </script>
 
 <template>
-  <form @submit="onSubmit">
+  <form @submit.prevent="onSubmit">
     <Fragment
       v-slot="{ section }"
       title="Tim Pelaksana Tindakan"
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/add.vue
index e92cd473..d16104ab 100644
--- a/app/components/content/treatment-report/add.vue
+++ b/app/components/content/treatment-report/add.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 // 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 type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'
 
 const doctors = ref<Doctor[]>([])
 
@@ -17,6 +18,16 @@ const doctors = ref<Doctor[]>([])
 <template>
   <AppTreatmentReportEntry
     :isLoading="false"
+    @submit="(val) => console.log(val)"
+    @error="
+      (err: Error) => {
+        toast({
+          title: 'Terjadi Kesalahan',
+          description: err.message,
+          variant: 'destructive',
+        })
+      }
+    "
     :doctors="doctors"
     :initialValues="
       {

From 5ad286a44e3f1fffb349d8ea2aaabb19c9615bc9 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 26 Nov 2025 10:18:29 +0700
Subject: [PATCH 05/28] wip: add form data pelaksanaan operasi

todo: blood input section

* ui: patch focus ring state
* layouts-pages: fix width layout calculation

feat(treatment-report): add fill-notes component and validation messages
- Add new FillNotes component for tissue notes input with dynamic fields
- Update schema validation with required error messages for operation and specimen fields
- Adjust form layout to include new FillNotes component and improve field organization

cherry-pick arrangement procedure from feat/protokol-terapi-116
---
 .../dropdown-action-p.vue                     |  64 ++++++
 .../procedure-list-cfg.ts                     |  33 +++
 .../arrangement-procedure/procedure-list.vue  | 120 ++++++++++
 .../procedure-picker.vue                      |  62 +++++
 .../app/treatment-report/entry-form.vue       | 215 +++++++++++++++++-
 .../treatment-report/fields/fill-notes.vue    |  65 ++++++
 .../app/treatment-report/fields/index.ts      |   9 +
 .../fields/select-billing.vue                 |  68 ++++++
 .../fields/select-birth-place.vue             |  71 ++++++
 .../fields/select-birth-type.vue              |  67 ++++++
 .../fields/select-operation-system.vue        |  69 ++++++
 .../fields/select-operation-type.vue          |  69 ++++++
 .../fields/select-specimen.vue                |  69 ++++++
 .../fields/select-surgery-counter.vue         |  67 ++++++
 .../fields/select-surgery-type.vue            |  69 ++++++
 app/components/pub/my-ui/form/input-base.vue  |   9 +-
 .../pub/my-ui/form/text-area-input.vue        |  17 +-
 app/components/pub/ui/input/Input.vue         |   2 +-
 app/layouts/default.vue                       |  88 +++----
 app/pages/(features)/treatment-report/add.vue |   2 +-
 app/schemas/treatment-report.schema.ts        |  30 ++-
 21 files changed, 1198 insertions(+), 67 deletions(-)
 create mode 100644 app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/dropdown-action-p.vue
 create mode 100644 app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list-cfg.ts
 create mode 100644 app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
 create mode 100644 app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
 create mode 100644 app/components/app/treatment-report/fields/fill-notes.vue
 create mode 100644 app/components/app/treatment-report/fields/index.ts
 create mode 100644 app/components/app/treatment-report/fields/select-billing.vue
 create mode 100644 app/components/app/treatment-report/fields/select-birth-place.vue
 create mode 100644 app/components/app/treatment-report/fields/select-birth-type.vue
 create mode 100644 app/components/app/treatment-report/fields/select-operation-system.vue
 create mode 100644 app/components/app/treatment-report/fields/select-operation-type.vue
 create mode 100644 app/components/app/treatment-report/fields/select-specimen.vue
 create mode 100644 app/components/app/treatment-report/fields/select-surgery-counter.vue
 create mode 100644 app/components/app/treatment-report/fields/select-surgery-type.vue

diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/dropdown-action-p.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/dropdown-action-p.vue
new file mode 100644
index 00000000..91e9f72c
--- /dev/null
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/dropdown-action-p.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
+
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('ap_rec_id')!
+const recAction = inject<Ref<string>>('ap_rec_action')!
+const recItem = inject<Ref<any>>('ap_rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Process',
+    onClick: () => {
+      process()
+    },
+    icon: 'i-lucide-arrow-right',
+  },
+]
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list-cfg.ts b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list-cfg.ts
new file mode 100644
index 00000000..cc02aa1d
--- /dev/null
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('./dropdown-action-p.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
new file mode 100644
index 00000000..e4836c7c
--- /dev/null
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from './procedure-list-cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Handlers
+import {
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/procedure-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/procedure-src.service'
+
+const title = ref('')
+
+interface Props {
+  processFn: (input: unknown) => void
+}
+const props = defineProps<Props>()
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'procedure-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'MCU Prosedur',
+  icon: 'i-lucide-clipboard-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+}
+
+const recId = ref<string>(``)
+const recAction = ref<string>(``)
+const recItem = ref<any>({})
+provide('ap_rec_id', recId)
+provide('ap_rec_action', recAction)
+provide('ap_rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const isModalOpen = inject(`isProcedurePickerDialogOpen`) as Ref<boolean>
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showProcess:
+      props.processFn({
+        id: recId.value,
+        code: recItem.value.code,
+        name: recItem.value.name,
+      })
+      isModalOpen.value = false
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="xl">
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class=""
+  />
+  <AppProcedureSrcList
+    :table-config="config"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+  </Dialog>
+</template>
diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
new file mode 100644
index 00000000..4a44a40f
--- /dev/null
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import ProcedureListDialog from './procedure-list.vue'
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import { FieldArray } from 'vee-validate'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+import { cn } from '~/lib/utils'
+import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
+import { is } from 'date-fns/locale'
+
+interface Props {
+  fieldName: string
+  title: string
+}
+const props = defineProps<Props>()
+
+const isProcedurePickerDialogOpen = ref<boolean>(false)
+provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
+</script>
+
+<template>
+  <div class="">
+    <div class="mb-2 flex items-center justify-between">
+      <h1 class="mb-2 font-medium">{{ title }}</h1>
+      <Button @click="isProcedurePickerDialogOpen = true" size="xs" variant="outline"
+        class="text-orange-400 border-orange-400 bg-transparent">
+        <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
+        Pilih Diagnosis
+      </Button>
+    </div>
+
+    <FieldArray v-slot="{ fields, push, remove }" :name="props.fieldName">
+      <ProcedureListDialog :process-fn="push" />
+
+      <div class="border border-gray-200 rounded-lg overflow-hidden">
+        <Table>
+          <TableHeader class="bg-gray-100">
+            <TableRow>
+              <TableHead class="w-1/2">Prosedur</TableHead>
+              <TableHead class="w-1/2">ICD-X</TableHead>
+              <TableHead class="w-1/2">Action</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow v-for="(field, idx) in fields" :key="idx">
+              <TableCell class="">{{ field.value?.name }}</TableCell>
+              <TableCell class="">{{ field.value?.code }}</TableCell>
+              <TableCell class="">
+                <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
+                  <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FieldArray>
+  </div>
+</template>
diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
index 8e19cc64..994165bb 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -14,7 +14,18 @@ import * as DE from '~/components/pub/my-ui/doc-entry'
 import Separator from '~/components/pub/ui/separator/Separator.vue'
 
 // form field components
-import { ButtonAction, Fragment, InputBase } from '~/components/pub/my-ui/form/'
+import {
+  FillNotes,
+  SelectBilling,
+  SelectBirthPlace,
+  SelectBirthType,
+  SelectOperationSystem,
+  SelectOperationType,
+  SelectSpecimen,
+  SelectSurgeryCounter,
+  SelectSurgeryType,
+} from './fields'
+import { ButtonAction, Fragment, InputBase, TextAreaInput } from '~/components/pub/my-ui/form/'
 import { SelectDoctor } from '~/components/app/doctor/fields'
 // Helpers
 
@@ -38,6 +49,7 @@ const emit = defineEmits<{
   (e: 'error', errors: Error): void
 }>()
 
+const tissueNotesLimit = 5
 const { isLoading, mode = 'create' } = props
 const isReadonly = computed(() => {
   if (isLoading) {
@@ -113,39 +125,45 @@ const onSubmit = handleSubmit(
           field-name="operatorTeam.operatorId"
           label="Operator"
           placeholder="Masukkan operator"
+          :is-disabled="isReadonly"
         />
         <InputBase
           field-name="assistantOperatorId"
           label="Asisten Operator"
           placeholder="Masukkan asisten operator"
+          :is-disabled="isReadonly"
         />
         <InputBase
           field-name="instrumentNurseId"
           label="Instrumentir"
           placeholder="Masukkan instrumentir"
+          :is-disabled="isReadonly"
         />
         <InputBase
           field-name="surgeryDate"
           label="Tanggal Pembedahan"
           placeholder="Pilih Tanggal"
           icon-name="i-lucide-calendar"
-          is-disabled
+          :is-disabled="isReadonly"
         />
       </DE.Block>
       <DE.Block
         :col-count="4"
         :cell-flex="false"
       >
-        <InputBase
+        <TextAreaInput
           field-name="actionDiagnosis"
           label="Diagnosa Tindakan"
           placeholder="Masukkan diagnosa tindakan"
           :col-span="2"
+          :rows="5"
+          :is-disabled="isReadonly"
         />
         <InputBase
           field-name="postSurgeryNurseId"
           label="Perawat Pasca Bedah"
           placeholder="Masukkan perawat pasca bedah"
+          :is-disabled="isReadonly"
         />
       </DE.Block>
     </Fragment>
@@ -183,13 +201,194 @@ const onSubmit = handleSubmit(
         :col-count="3"
         :cell-flex="false"
       >
-        <InputBase
-          field-name="operationType"
-          label="Tindakan Opearatif/Non"
-          placeholder="Masukkan tindakan operatif/non"
-          :col-span="2"
+        <SelectSurgeryType
+          field-name="operationExecution.surgeryType"
+          label="Jenis Operasi"
+          placeholder="Pilih jenis operasi"
+          :is-disabled="isReadonly"
+        />
+        <SelectBilling
+          field-name="operationExecution.billingCode"
+          label="Kode Billing"
+          placeholder="Pilih kode billing"
+          :is-disabled="isReadonly"
+        />
+        <SelectOperationSystem
+          field-name="operationExecution.operationSystem"
+          label="Sistem Operasi"
+          placeholder="Pilih sistem operasi"
+          :is-disabled="isReadonly"
         />
       </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationExecution.operationStartAt"
+          label="Operasi Mulai"
+          placeholder="Pilih Tanggal"
+          icon-name="i-lucide-calendar"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.operationEndAt"
+          label="Operasi Selesai"
+          placeholder="Pilih Tanggal"
+          icon-name="i-lucide-calendar"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="_operationDuration"
+          label="Lama Operasi"
+          placeholder="03 Jam 20 Menit"
+          is-disabled
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationExecution.anesthesiaStartAt"
+          label="Pembiusan Mulai"
+          placeholder="Pilih Tanggal"
+          icon-name="i-lucide-calendar"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.anesthesiaEndAt"
+          label="Pembiusan Selesai"
+          placeholder="Pilih Tanggal"
+          icon-name="i-lucide-calendar"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="_anesthesiaDuration"
+          label="Lama Pembiusan"
+          placeholder="03 Jam 20 Menit"
+          is-disabled
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <SelectOperationType
+          field-name="operationExecution.surgeryCleanType"
+          label="Jenis Pembedahan"
+          placeholder="Pilih jenis pembedahan"
+          :is-disabled="isReadonly"
+        />
+        <SelectSurgeryCounter
+          field-name="operationExecution.surgeryNumber"
+          label="Operasi Ke"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+        <SelectBirthType
+          field-name="operationExecution.birthRemark"
+          label="Keterangan Lahir"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+        <SelectBirthPlace
+          field-name="operationExecution.birthPlaceNote"
+          label="Ket. Tempat Lahir"
+          placeholder="Pilih keterangan tempat lahir"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="operationExecution.personWeight"
+          label="Berat Badan"
+          placeholder="Masukkan berat badan"
+          numeric-only
+          suffix-msg="Gram"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.birthCondition"
+          label="Ket. Saat Lahir"
+          placeholder="Tambah catatan"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <TextAreaInput
+          field-name="operationExecution.operationDescription"
+          label="Uraian Operasi"
+          placeholder="Masukkan uraian"
+          :rows="3"
+          :col-span="2"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.bleedingAmountCc"
+          label="Jumlah Pendarahan"
+          placeholder="Masukkan jumlah pendarahan"
+          suffix-msg="CC"
+          numeric-only
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        bloods
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="implant.brand"
+          label="Merk"
+          placeholder="Masukkan merk"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.name"
+          label="Nama Implant"
+          placeholder="Masukkan nama implant"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.sticker"
+          label="Sticker/Nomer Register Implant"
+          placeholder="Masukkan sticker/nomor register implant"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.companionName"
+          label="Nama Pendamping Implant"
+          placeholder="Masukkan nama pendamping implant"
+          :is-disabled="isReadonly"
+        />
+        <SelectSpecimen
+          field-name="specimen.destination"
+          label="Specimen/Jaringan dikirim ke"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+      <FillNotes
+        title="Keterangan Jaringan"
+        :limit="tissueNotesLimit"
+        :is-disabled="isReadonly"
+      />
     </Fragment>
     <div class="mt-4 flex justify-end">
       <button
diff --git a/app/components/app/treatment-report/fields/fill-notes.vue b/app/components/app/treatment-report/fields/fill-notes.vue
new file mode 100644
index 00000000..41c948c5
--- /dev/null
+++ b/app/components/app/treatment-report/fields/fill-notes.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+// components
+import { FieldArray } from 'vee-validate'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// form field components
+import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
+
+interface Props {
+  isDisabled: boolean
+  limit: number
+  title: string
+}
+
+const props = defineProps<Props>()
+
+const isReadonly = computed(() => props.isDisabled)
+</script>
+<template>
+  <FieldArray
+    v-slot="{ fields, push, remove }"
+    name="tissueNotes"
+  >
+    <template v-if="fields.length === 0">
+      {{ push({ note: '' }) }}
+    </template>
+    <div class="space-y-4">
+      <DE.Block
+        v-for="(field, idx) in fields"
+        :key="field.key"
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          :label="idx === 0 ? 'Keterangan Jaringan' : undefined"
+          :field-name="`tissueNotes[${idx}].note`"
+          placeholder="Masukkan catatan"
+          :is-disabled="isReadonly"
+        />
+        <DE.Cell class="flex items-start justify-start">
+          <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
+            <ButtonAction
+              v-if="idx !== 0"
+              :disabled="isReadonly"
+              preset="delete"
+              :title="`Hapus Kontak ${idx + 1}`"
+              icon-only
+              @click="remove(idx)"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+
+    <ButtonAction
+      preset="add"
+      label="Tambah Catatan"
+      title="Tambah Catatan Keterangan Jaringan"
+      :disabled="fields.length >= limit || isReadonly"
+      :full-width-mobile="true"
+      class="mt-4"
+      @click="push({ name: '', dose: '', unit: '' })"
+    />
+  </FieldArray>
+</template>
diff --git a/app/components/app/treatment-report/fields/index.ts b/app/components/app/treatment-report/fields/index.ts
new file mode 100644
index 00000000..5d74d9cf
--- /dev/null
+++ b/app/components/app/treatment-report/fields/index.ts
@@ -0,0 +1,9 @@
+export { default as FillNotes } from './fill-notes.vue'
+export { default as SelectBilling } from './select-billing.vue'
+export { default as SelectBirthPlace } from './select-birth-place.vue'
+export { default as SelectBirthType } from './select-birth-type.vue'
+export { default as SelectOperationSystem } from './select-operation-system.vue'
+export { default as SelectOperationType } from './select-operation-type.vue'
+export { default as SelectSpecimen } from './select-specimen.vue'
+export { default as SelectSurgeryCounter } from './select-surgery-counter.vue'
+export { default as SelectSurgeryType } from './select-surgery-type.vue'
diff --git a/app/components/app/treatment-report/fields/select-billing.vue b/app/components/app/treatment-report/fields/select-billing.vue
new file mode 100644
index 00000000..f8df074e
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-billing.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'General', value: 'general' },
+  { label: 'Regional', value: 'regional' },
+  { label: 'Local', value: 'local' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/fields/select-birth-place.vue b/app/components/app/treatment-report/fields/select-birth-place.vue
new file mode 100644
index 00000000..b2314129
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-birth-place.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'RSSA', value: 'rssa' },
+  { label: 'Bidan Luar', value: 'out1' },
+  { label: 'Dokter Luar', value: 'out2' },
+  { label: 'Dukun Bayi', value: 'out3' },
+  { label: 'Puskesmas', value: 'out4' },
+  { label: 'Paramedis Luar', value: 'out5' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/fields/select-birth-type.vue b/app/components/app/treatment-report/fields/select-birth-type.vue
new file mode 100644
index 00000000..537e8282
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-birth-type.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Lahir Hidup', value: 'lahir_hidup' },
+  { label: 'Lahir Mati', value: 'lahir_mati' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/fields/select-operation-system.vue b/app/components/app/treatment-report/fields/select-operation-system.vue
new file mode 100644
index 00000000..bae300b2
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-operation-system.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Cito', value: 'cito' },
+  { label: 'Urgent', value: 'urgent' },
+  { label: 'Efektif', value: 'efektif' },
+  { label: 'Khusus', value: 'khusus' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/fields/select-operation-type.vue b/app/components/app/treatment-report/fields/select-operation-type.vue
new file mode 100644
index 00000000..e05a4196
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-operation-type.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Bersih', value: 'bersih' },
+  { label: 'Bersih Terkontaminasi', value: 'bersih_terkontaminasi' },
+  { label: 'Terkontaminasi Kotor', value: 'terkontaminasi' },
+  { label: 'Kotor', value: 'kotor' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/fields/select-specimen.vue b/app/components/app/treatment-report/fields/select-specimen.vue
new file mode 100644
index 00000000..9be2bb93
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-specimen.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'PA', value: 'pa' },
+  { label: 'Mikrobiologi', value: 'microbiology' },
+  { label: 'Laborat', value: 'laboratory' },
+  { label: 'Tidak Perlu', value: 'none' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/fields/select-surgery-counter.vue b/app/components/app/treatment-report/fields/select-surgery-counter.vue
new file mode 100644
index 00000000..2c682529
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-surgery-counter.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: '1 (Satu)', value: 'first' },
+  { label: 'Ulangan', value: 'retry' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/treatment-report/fields/select-surgery-type.vue b/app/components/app/treatment-report/fields/select-surgery-type.vue
new file mode 100644
index 00000000..2c59438a
--- /dev/null
+++ b/app/components/app/treatment-report/fields/select-surgery-type.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Kecil', value: 'kecil' },
+  { label: 'Sedang', value: 'sedang' },
+  { label: 'Besar', value: 'besar' },
+  { label: 'Khusus', value: 'khusus' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index 050a0f78..fa06daca 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -76,10 +76,11 @@ const hasError = computed(() => !!fieldError.value)
                 v-bind="componentField"
                 :placeholder="placeholder"
                 :maxlength="maxLength"
-                :class="cn(
-                  'focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0',
-                  hasError && 'border-red-500 focus:border-red-500 focus:ring-red-500'
-                )"
+                :class="
+                  cn(
+                    hasError && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500',
+                  )
+                "
                 autocomplete="off"
                 aria-autocomplete="none"
                 autocorrect="off"
diff --git a/app/components/pub/my-ui/form/text-area-input.vue b/app/components/pub/my-ui/form/text-area-input.vue
index c7b7c794..de658e7a 100644
--- a/app/components/pub/my-ui/form/text-area-input.vue
+++ b/app/components/pub/my-ui/form/text-area-input.vue
@@ -19,8 +19,11 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  resize?: 'none' | 'y' | 'x'
+  rows?: number
 }>()
 
+const { resize = 'none' } = props
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   let value = target.value
@@ -47,7 +50,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="mb-1"
+      :class="class"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
@@ -65,11 +68,19 @@ function handleInput(event: Event) {
         <FormItem>
           <FormControl>
             <Textarea
+              :rows="rows"
               :disabled="isDisabled"
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              :class="
+                cn(
+                  'focus:border-primary focus:ring-primary focus:ring-offset-0',
+                  resize === 'y' && 'resize-y',
+                  resize === 'x' && 'resize-x',
+                  resize === 'none' && 'resize-none',
+                )
+              "
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"
@@ -83,4 +94,4 @@ function handleInput(event: Event) {
       </FormField>
     </DE.Field>
   </DE.Cell>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 21603c73..b4fcf935 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:border-primary flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index dd52a9c8..1eeab911 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,76 +2,84 @@
 import CardContent from '~/components/pub/ui/card/CardContent.vue'
 
 const route = useRoute()
-const contentFrame = computed(() => route.meta.contentFrame)
+
+// Ambil meta dan set default
+const contentFrame = computed(() => route.meta.contentFrame ?? 'cf-container-lg')
+
+// Mapping aman supaya tidak ada class invalid
 const contentFrameClass = computed(() => {
-  switch (contentFrame.value) {
-    case 'cf-container-2xl':
-      return 'cf-container-2xl'
-    case 'cf-container-xl':
-      return 'cf-container-xl'
-    case 'cf-container-lg':
-      return 'cf-container-lg'
-    case 'cf-container-md':
-      return 'cf-container-md'
-    case 'cf-container-sm':
-      return 'cf-container-sm'
-    case 'cf-full-width':
-      return 'cf-full-width'
-    default:
-      return 'cf-container-lg'
-  }
+  const allowed = [
+    'cf-container-2xl',
+    'cf-container-xl',
+    'cf-container-lg',
+    'cf-container-md',
+    'cf-container-sm',
+    'cf-full-width',
+    'cf-no-frame',
+  ]
+  return allowed.includes(contentFrame.value as string) ? contentFrame.value : 'cf-container-lg'
 })
 </script>
 
 <template>
   <SidebarProvider>
     <LayoutAppSidebar />
+
     <SidebarInset>
       <LayoutHeader />
-      <div :class="`w-full p-4 2xl:p-5 flex justify-center ${contentFrameClass}`">
-        <div v-if="contentFrame !== 'cf-no-frame'">
-          <Card>
-            <CardContent>
-              <slot />
-            </CardContent>
-          </Card>
-        </div>
-        <slot v-else />
+
+      <!-- Outer wrapper always full width -->
+      <div class="flex w-full justify-center p-4 2xl:p-5">
+        <!-- Frame mode (container + card) -->
+        <template v-if="contentFrameClass !== 'cf-no-frame'">
+          <div :class="['content-frame', contentFrameClass]">
+            <Card>
+              <CardContent>
+                <slot />
+              </CardContent>
+            </Card>
+          </div>
+        </template>
+
+        <!-- No frame → direct slot -->
+        <template v-else>
+          <slot />
+        </template>
       </div>
     </SidebarInset>
   </SidebarProvider>
 </template>
 
 <style scoped>
-.cf-container > *,
-.cf-container-lg > *,
-.cf-container-md > *,
-.cf-container-sm > *,
-.cf-full-width {
+/* Base: semua frame full width by default */
+.content-frame {
   width: 100%;
 }
 
-.cf-full-width > * {
-  width: 100%;
-}
-
-.cf-container-2xl > * {
+/* Max-width container variants */
+.cf-container-2xl {
   max-width: 1400px;
 }
 
-.cf-container-xl > * {
+.cf-container-xl {
   max-width: 1200px;
 }
 
-.cf-container-lg > * {
+.cf-container-lg {
   max-width: 992px;
 }
 
-.cf-container-md > * {
+.cf-container-md {
   max-width: 768px;
 }
 
-.cf-container-sm > * {
+.cf-container-sm {
   max-width: 576px;
 }
+
+/* Full width (no max width) */
+.cf-full-width {
+  width: 100%;
+  max-width: 100%;
+}
 </style>
diff --git a/app/pages/(features)/treatment-report/add.vue b/app/pages/(features)/treatment-report/add.vue
index b8459422..072a1af3 100644
--- a/app/pages/(features)/treatment-report/add.vue
+++ b/app/pages/(features)/treatment-report/add.vue
@@ -7,7 +7,7 @@ definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Tambah Laporan',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-container-2xl',
 })
 
 const route = useRoute()
diff --git a/app/schemas/treatment-report.schema.ts b/app/schemas/treatment-report.schema.ts
index eeb1c889..dbaa9c23 100644
--- a/app/schemas/treatment-report.schema.ts
+++ b/app/schemas/treatment-report.schema.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 const isoDateTime = z.string().min(1, 'Tanggal / waktu wajib diisi')
-const positiveInt = z.number().int().nonnegative()
+const positiveInt = z.coerce.number().int().nonnegative()
 
 const OperatorTeamSchema = z.object({
   dpjpId: z.coerce
@@ -30,9 +30,11 @@ const ProcedureSchema = z.object({
 })
 
 const OperationExecutionSchema = z.object({
-  surgeryType: z.enum(['kecil', 'sedang', 'besar', 'khusus']),
-  billingCode: z.string().min(1),
-  operationSystem: z.enum(['khusus', 'cito', 'elektif']),
+  surgeryType: z.enum(['kecil', 'sedang', 'besar', 'khusus'], { required_error: 'Silahkan pilih jenis operasi' }),
+  billingCode: z.string({
+    required_error: 'Silahkan pilih kode billing',
+  }),
+  operationSystem: z.enum(['khusus', 'cito', 'efektif', 'urgent'], { required_error: 'Silahkan pilih sistem operasi' }),
 
   operationStartAt: isoDateTime,
   operationEndAt: isoDateTime,
@@ -41,17 +43,19 @@ const OperationExecutionSchema = z.object({
   anesthesiaEndAt: isoDateTime,
 
   surgeryCleanType: z.enum(['bersih', 'bersih_terkontaminasi', 'terkontaminasi', 'kotor']).optional(),
-  surgeryNumber: z.enum(['1', '2', '3', '4+', 'tidak_diketahui']).optional(),
+  surgeryNumber: z.enum(['first', 'retry']).optional(),
 
   birthPlaceNote: z.string().optional(),
-  babyWeightGram: positiveInt.optional(),
+  personWeight: positiveInt.optional(),
   birthCondition: z.string().optional(),
 
-  operationDescription: z.string().min(1),
+  operationDescription: z.string({
+    required_error: 'Mohon lengkapi uraian operasi',
+  }),
 
   bleedingAmountCc: positiveInt.optional(),
 
-  birthRemark: z.enum(['lahir_hidup', 'lahir_mati', 'abortus', 'tidak_diketahui']).optional(),
+  birthRemark: z.enum(['lahir_hidup', 'lahir_mati']).optional(),
 })
 
 const BloodComponentSchema = z.object({
@@ -74,11 +78,17 @@ const ImplantSchema = z.object({
 })
 
 const SpecimenSchema = z.object({
-  destination: z.string().min(1),
+  destination: z.string({
+    required_error: 'Silahkan pilih specimen',
+  }),
 })
 
 const TissueNoteSchema = z.object({
-  note: z.string().min(1),
+  note: z
+    .string({
+      required_error: 'Masukkan deskripsi catatan',
+    })
+    .min(1, { message: 'Setidaknya diperlukan 1 catatan' }),
 })
 
 export const TreatmentReportSchema = z.object({

From 71c2833bf2cec0bc5776b2dfe33fa14ca18a797f Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 26 Nov 2025 14:00:15 +0700
Subject: [PATCH 06/28] impl: blood calc, prosedur picker

wip:
radio bloods(note. masih crash dan modelValue ga bisa liftup)

Picker Prosedur
- cherry-pick
- done:  integrasi prosedur w/ therapy-protocol-
---
 app/components/app/procedure-src/list.vue     |   9 +-
 .../procedure-picker.vue                      |  43 ++++++--
 .../app/treatment-report/entry-form.vue       |  19 ++--
 .../app/treatment-report/fields/index.ts      |   1 +
 .../treatment-report/fields/radio-bloods.vue  | 103 ++++++++++++++++++
 .../content/treatment-report/add.vue          |  12 +-
 app/components/pub/my-ui/form/input-base.vue  |  10 +-
 7 files changed, 167 insertions(+), 30 deletions(-)
 create mode 100644 app/components/app/treatment-report/fields/radio-bloods.vue

diff --git a/app/components/app/procedure-src/list.vue b/app/components/app/procedure-src/list.vue
index 1be60a60..d976b660 100644
--- a/app/components/app/procedure-src/list.vue
+++ b/app/components/app/procedure-src/list.vue
@@ -7,13 +7,16 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 
 // Configs
 import { config } from './list-cfg'
+import type { Config } from '~/components/pub/my-ui/data-table'
 
 interface Props {
   data: any[]
   paginationMeta: PaginationMeta
+  tableConfig?: Config
 }
-
-defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  tableConfig: () => config,
+})
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -27,7 +30,7 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
-      v-bind="config"
+      v-bind="props.tableConfig"
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />
diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
index 4a44a40f..e6ba7f2b 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
@@ -14,6 +14,7 @@ import { is } from 'date-fns/locale'
 interface Props {
   fieldName: string
   title: string
+  subTitle?: string
 }
 const props = defineProps<Props>()
 
@@ -24,18 +25,29 @@ provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
 <template>
   <div class="">
     <div class="mb-2 flex items-center justify-between">
-      <h1 class="mb-2 font-medium">{{ title }}</h1>
-      <Button @click="isProcedurePickerDialogOpen = true" size="xs" variant="outline"
-        class="text-orange-400 border-orange-400 bg-transparent">
-        <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
-        Pilih Diagnosis
+      <p class="mb-2 font-medium">{{ title }}</p>
+      <Button
+        type="button"
+        @click="isProcedurePickerDialogOpen = true"
+        size="xs"
+        variant="outline"
+        class="border-orange-400 bg-transparent text-orange-400"
+      >
+        <Icon
+          name="i-lucide-search"
+          class="h-4 w-4 align-middle transition-colors"
+        />
+        {{ subTitle || 'Pilih Diagnosis' }}
       </Button>
     </div>
 
-    <FieldArray v-slot="{ fields, push, remove }" :name="props.fieldName">
+    <FieldArray
+      v-slot="{ fields, push, remove }"
+      :name="props.fieldName"
+    >
       <ProcedureListDialog :process-fn="push" />
 
-      <div class="border border-gray-200 rounded-lg overflow-hidden">
+      <div class="overflow-hidden rounded-lg border border-gray-200">
         <Table>
           <TableHeader class="bg-gray-100">
             <TableRow>
@@ -45,12 +57,23 @@ provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
             </TableRow>
           </TableHeader>
           <TableBody>
-            <TableRow v-for="(field, idx) in fields" :key="idx">
+            <TableRow
+              v-for="(field, idx) in fields"
+              :key="idx"
+            >
               <TableCell class="">{{ field.value?.name }}</TableCell>
               <TableCell class="">{{ field.value?.code }}</TableCell>
               <TableCell class="">
-                <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
-                  <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+                <Button
+                  type="button"
+                  variant="destructive"
+                  size="sm"
+                  @click="remove(idx)"
+                >
+                  <Icon
+                    name="i-lucide-trash-2"
+                    class="h-4 w-4"
+                  />
                 </Button>
               </TableCell>
             </TableRow>
diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
index 994165bb..aa504191 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -16,6 +16,7 @@ import Separator from '~/components/pub/ui/separator/Separator.vue'
 // form field components
 import {
   FillNotes,
+  RadioBloods,
   SelectBilling,
   SelectBirthPlace,
   SelectBirthType,
@@ -174,18 +175,12 @@ const onSubmit = handleSubmit(
       v-slot="{ section }"
       title="Tindakan Operatif/Non Operatif Lain"
     >
-      <p class="text-lg font-semibold">{{ section }}</p>
-
+      <!-- <p class="text-lg font-semibold">{{ section }}</p> -->
       <DE.Block
-        :col-count="4"
+        :col-count="2"
         :cell-flex="false"
       >
-        <InputBase
-          field-name="operationType"
-          label="Tindakan Opearatif/Non"
-          placeholder="Masukkan tindakan operatif/non"
-          :col-span="2"
-        />
+        <slot name="procedures" />
       </DE.Block>
     </Fragment>
 
@@ -343,7 +338,11 @@ const onSubmit = handleSubmit(
         :col-count="3"
         :cell-flex="false"
       >
-        bloods
+        <RadioBloods
+          field-name="isNewBorn"
+          label="Jenis & Jumlah Darah Masuk"
+          is-required
+        />
       </DE.Block>
 
       <DE.Block
diff --git a/app/components/app/treatment-report/fields/index.ts b/app/components/app/treatment-report/fields/index.ts
index 5d74d9cf..ea1a0e72 100644
--- a/app/components/app/treatment-report/fields/index.ts
+++ b/app/components/app/treatment-report/fields/index.ts
@@ -1,4 +1,5 @@
 export { default as FillNotes } from './fill-notes.vue'
+export { default as RadioBloods } from './radio-bloods.vue'
 export { default as SelectBilling } from './select-billing.vue'
 export { default as SelectBirthPlace } from './select-birth-place.vue'
 export { default as SelectBirthType } from './select-birth-type.vue'
diff --git a/app/components/app/treatment-report/fields/radio-bloods.vue b/app/components/app/treatment-report/fields/radio-bloods.vue
new file mode 100644
index 00000000..73c26c32
--- /dev/null
+++ b/app/components/app/treatment-report/fields/radio-bloods.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { Input } from '~/components/pub/ui/input'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isDisabled?: boolean
+}>()
+
+const { class: containerClass, radioGroupClass, radioItemClass, labelClass } = props
+
+const opts = [
+  { label: 'PRC', value: 'prc' },
+  { label: 'WB', value: 'wb' },
+  { label: 'FFP', value: 'ffp' },
+  { label: 'TC', value: 'tc' },
+]
+</script>
+
+<template>
+  <DE.Cell
+    :class="cn('radio-group-field', containerClass)"
+    :col-span="2"
+  >
+    <DE.Label :label-for="fieldName">
+      {{ label }}
+    </DE.Label>
+    <DE.Field :id="fieldName">
+      <FormField
+        v-slot="{ componentField: radioField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="radioField"
+              :class="cn('grid grid-cols-1 items-start gap-4 sm:grid-cols-2 ', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in opts"
+                :key="option.value"
+                :class="cn('flex items-center gap-3', radioItemClass)"
+              >
+                <div class="flex min-w-fit items-center gap-2">
+                  <RadioGroupItem
+                    :id="`${fieldName}-${index}`"
+                    :value="option.value"
+                    class="h-5 w-5 border-muted-foreground data-[state=checked]:border-primary data-[state=checked]:text-primary"
+                  />
+                  <RadioLabel
+                    :for="`${fieldName}-${index}`"
+                    :class="cn('min-w-[30px] cursor-pointer text-sm font-medium leading-none', labelClass)"
+                  >
+                    {{ option.label }}
+                  </RadioLabel>
+                </div>
+
+                <FormField
+                  v-slot="{ componentField }"
+                  :name="`amount_${option.value}`"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <div class="relative w-[140px]">
+                        <Input
+                          v-bind="componentField"
+                          placeholder="00"
+                          class="pr-10"
+                          :disabled="radioField.modelValue !== option.value || isDisabled"
+                          @input="(e: Event) => {
+                            const target = e.target as HTMLInputElement
+                            const value = target.value.replace(/\D/g, '')
+                            if (target.value !== value) {
+                              target.value = value
+                              componentField['onInput'](e)
+                            }
+                          }"
+                        />
+                        <span class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-sm text-muted-foreground">
+                          CC
+                        </span>
+                      </div>
+                    </FormControl>
+                  </FormItem>
+                </FormField>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/add.vue
index d16104ab..9897f5f8 100644
--- a/app/components/content/treatment-report/add.vue
+++ b/app/components/content/treatment-report/add.vue
@@ -6,6 +6,7 @@ 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'
 
 const doctors = ref<Doctor[]>([])
 
@@ -34,7 +35,16 @@ const doctors = ref<Doctor[]>([])
         operatorTeam: {
           // dpjpId: -1,
         },
+        // procedures: [{ id: 5, code: 'ROC0100', name: 'Accute Appendictis' }],
       } as TreatmentReportFormData
     "
-  />
+  >
+    <template #procedures>
+      <ArrangementProcedurePicker
+        field-name="procedures"
+        title="Tindakan Operatif/Non-Operatif Lain"
+        sub-title="Pilih Prosedur"
+      />
+    </template>
+  </AppTreatmentReportEntry>
 </template>
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index fa06daca..3cc07961 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -24,6 +24,8 @@ const props = defineProps<{
   iconName?: string
 }>()
 
+const { class: containerClass } = props
+
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   let value = target.value
@@ -69,18 +71,14 @@ const hasError = computed(() => !!fieldError.value)
         :name="fieldName"
       >
         <FormItem>
-          <FormControl class="relative">
+          <FormControl :class="cn('relative', containerClass)">
             <div class="relative w-full max-w-sm items-center">
               <Input
                 :disabled="isDisabled"
                 v-bind="componentField"
                 :placeholder="placeholder"
                 :maxlength="maxLength"
-                :class="
-                  cn(
-                    hasError && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500',
-                  )
-                "
+                :class="cn(hasError && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500')"
                 autocomplete="off"
                 aria-autocomplete="none"
                 autocorrect="off"

From 1fbd20d9ae5ba9f90dd0e53074b196c8e3759e12 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 27 Nov 2025 11:15:09 +0700
Subject: [PATCH 07/28] done: form entry laporan tindakan

todo: manage state readonly ke komponen app prosedur

pager-nav: scroll x on small screen

form-schema: catatan opsional

feat(treatment-report): add datetime validation and duration calculation
- Change operator team fields from IDs to names in schema and form
- Modify blood input schema to use type-based amount selection
- Update form fields to match new schema structure
- Simplify radio bloods component logic and styling
- Add validation for ISO datetime format in treatment report schema
- Implement duration calculation for operation and anesthesia times
- Update input fields to use datetime-local type
- Add disabled state for radio bloods component
---
 .../app/treatment-report/entry-form.vue       | 95 +++++++++++++++----
 .../treatment-report/fields/radio-bloods.vue  | 40 ++++----
 .../content/treatment-report/add.vue          | 50 +++++++++-
 app/components/pub/my-ui/form/input-base.vue  |  4 +
 .../pub/my-ui/pagination/pagination.vue       |  2 +-
 app/components/pub/ui/form/array-message.vue  | 20 ++++
 app/components/pub/ui/form/index.ts           |  1 +
 app/schemas/treatment-report.schema.ts        | 67 ++++++++-----
 8 files changed, 208 insertions(+), 71 deletions(-)
 create mode 100644 app/components/pub/ui/form/array-message.vue

diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
index aa504191..98eafbad 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
+import { type Duration, intervalToDuration } from 'date-fns'
 
 // schema
 import { type TreatmentReportFormData, TreatmentReportSchema } from '~/schemas/treatment-report.schema'
@@ -9,9 +10,9 @@ import { type TreatmentReportFormData, TreatmentReportSchema } from '~/schemas/t
 import type { Doctor } from '~/models/doctor'
 
 // components
-import { Form } from '~/components/pub/ui/form'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import Separator from '~/components/pub/ui/separator/Separator.vue'
+import { ArrayMessage } from '~/components/pub/ui/form'
 
 // form field components
 import {
@@ -32,7 +33,8 @@ import { SelectDoctor } from '~/components/app/doctor/fields'
 
 // #region Props & Emits
 interface FormData extends TreatmentReportFormData {
-  hiddenNyc: number
+  _operationDuration: string
+  _anesthesiaDuration: string
 }
 
 interface Props {
@@ -66,7 +68,7 @@ const isReadonly = computed(() => {
 
 const formSchema = toTypedSchema(TreatmentReportSchema)
 
-const { handleSubmit, values, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
+const { errors, handleSubmit, values, meta, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
   name: 'treatmentReportForm',
   validationSchema: formSchema,
   initialValues: props.initialValues ? props.initialValues : {},
@@ -94,13 +96,59 @@ defineExpose({
 // const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues))
 const onSubmit = handleSubmit(
   (values) => {
+    console.log(JSON.stringify(values))
     emit('submit', values)
   },
   (errors) => {
+    console.error(errors)
     emit('error', new Error('Silahkan lengkapi form terlebih dahulu'))
   },
 )
 // #endregion
+
+// #region Watcher
+watch(
+  () => [values.operationExecution.operationStartAt, values.operationExecution.operationEndAt],
+  ([start, end]) => {
+    if (!start || !end) return
+    const pStart = new Date(start)
+    const pEnd = new Date(end)
+
+    const formatTime = (r: Duration) =>
+      [r.hours && `${r.hours} jam`, r.minutes && `${r.minutes} menit`, r.seconds && `${r.seconds} detik`]
+        .filter(Boolean)
+        .join(' ')
+
+    const res = intervalToDuration({
+      start: pStart,
+      end: pEnd,
+    })
+
+    setFieldValue('_operationDuration', formatTime(res))
+  },
+)
+
+watch(
+  () => [values.operationExecution.anesthesiaStartAt, values.operationExecution.anesthesiaEndAt],
+  ([start, end]) => {
+    if (!start || !end) return
+    const pStart = new Date(start)
+    const pEnd = new Date(end)
+
+    const formatTime = (r: Duration) =>
+      [r.hours && `${r.hours} jam`, r.minutes && `${r.minutes} menit`, r.seconds && `${r.seconds} detik`]
+        .filter(Boolean)
+        .join(' ')
+
+    const res = intervalToDuration({
+      start: pStart,
+      end: pEnd,
+    })
+
+    setFieldValue('_anesthesiaDuration', formatTime(res))
+  },
+)
+// #endregion
 </script>
 
 <template>
@@ -123,29 +171,29 @@ const onSubmit = handleSubmit(
           :is-disabled="isReadonly"
         />
         <InputBase
-          field-name="operatorTeam.operatorId"
+          field-name="operatorTeam.operatorName"
           label="Operator"
           placeholder="Masukkan operator"
           :is-disabled="isReadonly"
         />
         <InputBase
-          field-name="assistantOperatorId"
+          field-name="operatorTeam.assistantOperatorName"
           label="Asisten Operator"
           placeholder="Masukkan asisten operator"
           :is-disabled="isReadonly"
         />
         <InputBase
-          field-name="instrumentNurseId"
+          field-name="operatorTeam.instrumentNurseName"
           label="Instrumentir"
           placeholder="Masukkan instrumentir"
           :is-disabled="isReadonly"
         />
         <InputBase
-          field-name="surgeryDate"
+          field-name="operatorTeam.surgeryDate"
           label="Tanggal Pembedahan"
-          placeholder="Pilih Tanggal"
-          icon-name="i-lucide-calendar"
+          input-type="datetime-local"
           :is-disabled="isReadonly"
+          placeholder=""
         />
       </DE.Block>
       <DE.Block
@@ -153,7 +201,7 @@ const onSubmit = handleSubmit(
         :cell-flex="false"
       >
         <TextAreaInput
-          field-name="actionDiagnosis"
+          field-name="operatorTeam.actionDiagnosis"
           label="Diagnosa Tindakan"
           placeholder="Masukkan diagnosa tindakan"
           :col-span="2"
@@ -161,7 +209,7 @@ const onSubmit = handleSubmit(
           :is-disabled="isReadonly"
         />
         <InputBase
-          field-name="postSurgeryNurseId"
+          field-name="operatorTeam.postSurgeryNurseId"
           label="Perawat Pasca Bedah"
           placeholder="Masukkan perawat pasca bedah"
           :is-disabled="isReadonly"
@@ -180,7 +228,14 @@ const onSubmit = handleSubmit(
         :col-count="2"
         :cell-flex="false"
       >
-        <slot name="procedures" />
+        <DE.Cell>
+          <slot name="procedures" />
+          <ArrayMessage
+            class="mt-1"
+            v-if="meta.touched"
+            name="procedures"
+          />
+        </DE.Cell>
       </DE.Block>
     </Fragment>
 
@@ -224,20 +279,20 @@ const onSubmit = handleSubmit(
           field-name="operationExecution.operationStartAt"
           label="Operasi Mulai"
           placeholder="Pilih Tanggal"
-          icon-name="i-lucide-calendar"
+          input-type="datetime-local"
           :is-disabled="isReadonly"
         />
         <InputBase
           field-name="operationExecution.operationEndAt"
           label="Operasi Selesai"
           placeholder="Pilih Tanggal"
-          icon-name="i-lucide-calendar"
+          input-type="datetime-local"
           :is-disabled="isReadonly"
         />
         <InputBase
           field-name="_operationDuration"
           label="Lama Operasi"
-          placeholder="03 Jam 20 Menit"
+          placeholder="-"
           is-disabled
         />
       </DE.Block>
@@ -250,20 +305,20 @@ const onSubmit = handleSubmit(
           field-name="operationExecution.anesthesiaStartAt"
           label="Pembiusan Mulai"
           placeholder="Pilih Tanggal"
-          icon-name="i-lucide-calendar"
+          input-type="datetime-local"
           :is-disabled="isReadonly"
         />
         <InputBase
           field-name="operationExecution.anesthesiaEndAt"
           label="Pembiusan Selesai"
           placeholder="Pilih Tanggal"
-          icon-name="i-lucide-calendar"
+          input-type="datetime-local"
           :is-disabled="isReadonly"
         />
         <InputBase
           field-name="_anesthesiaDuration"
           label="Lama Pembiusan"
-          placeholder="03 Jam 20 Menit"
+          placeholder="-"
           is-disabled
         />
       </DE.Block>
@@ -339,9 +394,9 @@ const onSubmit = handleSubmit(
         :cell-flex="false"
       >
         <RadioBloods
-          field-name="isNewBorn"
+          field-name="bloodInput"
           label="Jenis & Jumlah Darah Masuk"
-          is-required
+          :is-disabled="isReadonly"
         />
       </DE.Block>
 
diff --git a/app/components/app/treatment-report/fields/radio-bloods.vue b/app/components/app/treatment-report/fields/radio-bloods.vue
index 73c26c32..9bdaa187 100644
--- a/app/components/app/treatment-report/fields/radio-bloods.vue
+++ b/app/components/app/treatment-report/fields/radio-bloods.vue
@@ -37,55 +37,54 @@ const opts = [
     <DE.Field :id="fieldName">
       <FormField
         v-slot="{ componentField: radioField }"
-        :name="fieldName"
+        :name="`${fieldName}.type`"
       >
         <FormItem>
           <FormControl>
             <RadioGroup
-              v-bind="radioField"
+              :model-value="radioField.modelValue"
+              @update:model-value="radioField.onChange"
               :class="cn('grid grid-cols-1 items-start gap-4 sm:grid-cols-2 ', radioGroupClass)"
             >
               <div
                 v-for="(option, index) in opts"
                 :key="option.value"
-                :class="cn('flex items-center gap-3', radioItemClass)"
+                :class="cn('grid grid-cols-1 items-start gap-3 sm:grid-cols-[auto,1fr]', radioItemClass)"
               >
                 <div class="flex min-w-fit items-center gap-2">
                   <RadioGroupItem
-                    :id="`${fieldName}-${index}`"
+                    :id="`type-${index}`"
                     :value="option.value"
-                    class="h-5 w-5 border-muted-foreground data-[state=checked]:border-primary data-[state=checked]:text-primary"
+                    :disabled="isDisabled"
                   />
-                  <RadioLabel
-                    :for="`${fieldName}-${index}`"
-                    :class="cn('min-w-[30px] cursor-pointer text-sm font-medium leading-none', labelClass)"
-                  >
+                  <RadioLabel :for="`type-${index}`">
                     {{ option.label }}
                   </RadioLabel>
                 </div>
 
                 <FormField
-                  v-slot="{ componentField }"
-                  :name="`amount_${option.value}`"
+                  v-slot="{ componentField: amountField }"
+                  :name="`${fieldName}.amount.${option.value}`"
                 >
                   <FormItem>
                     <FormControl>
                       <div class="relative w-[140px]">
                         <Input
-                          v-bind="componentField"
+                          v-bind="amountField"
                           placeholder="00"
                           class="pr-10"
                           :disabled="radioField.modelValue !== option.value || isDisabled"
-                          @input="(e: Event) => {
-                            const target = e.target as HTMLInputElement
-                            const value = target.value.replace(/\D/g, '')
-                            if (target.value !== value) {
-                              target.value = value
-                              componentField['onInput'](e)
+                          @input="
+                            (e: InputEvent) => {
+                              const target = e.target as HTMLInputElement
+                              const v = target.value.replace(/\D/g, '')
+                              amountField.onChange(v)
                             }
-                          }"
+                          "
                         />
-                        <span class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-sm text-muted-foreground">
+                        <span
+                          class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-sm text-muted-foreground"
+                        >
                           CC
                         </span>
                       </div>
@@ -95,7 +94,6 @@ const opts = [
               </div>
             </RadioGroup>
           </FormControl>
-          <FormMessage class="ml-0 mt-1" />
         </FormItem>
       </FormField>
     </DE.Field>
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/add.vue
index 9897f5f8..a80b3fd2 100644
--- a/app/components/content/treatment-report/add.vue
+++ b/app/components/content/treatment-report/add.vue
@@ -33,10 +33,54 @@ const doctors = ref<Doctor[]>([])
     :initialValues="
       {
         operatorTeam: {
-          // dpjpId: -1,
+          dpjpId: -1,
+          operatorName: 'Julian',
+          assistantOperatorName: 'Amar',
+          instrumentNurseName: 'Anang',
+          surgeryDate: '2025-11-13T14:29',
+          actionDiagnosis: 'Omon Omon Saja',
         },
-        // procedures: [{ id: 5, code: 'ROC0100', name: 'Accute Appendictis' }],
-      } as TreatmentReportFormData
+        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>
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index 3cc07961..398a5af2 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -7,6 +7,8 @@ import { useFieldError } from 'vee-validate'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
+type InputType = 'text' | 'number' | 'password' | 'email' | 'date' | 'time' | 'datetime-local' | 'search' | 'tel'
+
 const props = defineProps<{
   fieldName: string
   placeholder: string
@@ -22,6 +24,7 @@ const props = defineProps<{
   bottomLabel?: string
   suffixMsg?: string
   iconName?: string
+  inputType?: InputType
 }>()
 
 const { class: containerClass } = props
@@ -85,6 +88,7 @@ const hasError = computed(() => !!fieldError.value)
                 autocapitalize="off"
                 spellcheck="false"
                 @input="handleInput"
+                :type="inputType"
               />
               <span
                 v-if="suffixMsg"
diff --git a/app/components/pub/my-ui/pagination/pagination.vue b/app/components/pub/my-ui/pagination/pagination.vue
index 9b1618c3..469f966d 100644
--- a/app/components/pub/my-ui/pagination/pagination.vue
+++ b/app/components/pub/my-ui/pagination/pagination.vue
@@ -93,7 +93,7 @@ function getButtonClass(pageNumber: number) {
 </script>
 
 <template>
-  <div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
+  <div class="flex w-full min-w-0 items-center justify-between overflow-x-scroll px-2 py-2 md:overflow-hidden">
     <!-- Info text -->
     <div
       v-if="showInfo && endRecord > 0"
diff --git a/app/components/pub/ui/form/array-message.vue b/app/components/pub/ui/form/array-message.vue
new file mode 100644
index 00000000..03bbfc12
--- /dev/null
+++ b/app/components/pub/ui/form/array-message.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ErrorMessage } from 'vee-validate'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  name: string
+  class?: string
+}>()
+</script>
+
+<template>
+  <ErrorMessage
+    :name="props.name"
+    v-slot="{ message }"
+  >
+    <p :class="cn('font-sans text-[0.8rem] text-destructive', props.class)">
+      {{ message }}
+    </p>
+  </ErrorMessage>
+</template>
diff --git a/app/components/pub/ui/form/index.ts b/app/components/pub/ui/form/index.ts
index 1a3be118..67c55c94 100644
--- a/app/components/pub/ui/form/index.ts
+++ b/app/components/pub/ui/form/index.ts
@@ -1,3 +1,4 @@
+export { default as ArrayMessage } from './array-message.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormDescription } from './FormDescription.vue'
 export { default as FormItem } from './FormItem.vue'
diff --git a/app/schemas/treatment-report.schema.ts b/app/schemas/treatment-report.schema.ts
index dbaa9c23..02d60820 100644
--- a/app/schemas/treatment-report.schema.ts
+++ b/app/schemas/treatment-report.schema.ts
@@ -1,24 +1,34 @@
 import { z } from 'zod'
 
-const isoDateTime = z.string().min(1, 'Tanggal / waktu wajib diisi')
+const isoDateTime = z
+  .string()
+  .min(1, 'Tanggal / waktu wajib diisi')
+  .refine((val) => {
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, 'Format tanggal / waktu tidak valid')
+  .transform((val) => new Date(val).toISOString())
+
 const positiveInt = z.coerce.number().int().nonnegative()
 
 const OperatorTeamSchema = z.object({
   dpjpId: z.coerce
     .number({
-      invalid_type_error: 'Dokter Pemeriksa wajib diisi',
+      invalid_type_error: 'Silahkan pilih dpjp terlebih dahulu',
     })
     .int(),
-  operatorId: z.coerce
-    .number({
-      invalid_type_error: 'Operator wajib diisi',
-    })
-    .int(),
-  assistantOperatorId: z.coerce.number().int().optional().nullable(),
-  instrumentNurseId: z.coerce.number().int().optional().nullable(),
+  operatorName: z.string({
+    required_error: 'Masukkan nama operator',
+  }),
+  assistantOperatorName: z.string({
+    required_error: 'Masukkan nama asisten operator',
+  }),
+  instrumentNurseName: z.string({
+    required_error: 'Masukkan nama instrumentir',
+  }),
 
   surgeryDate: isoDateTime,
-  actionDiagnosis: z.string().min(1),
+  actionDiagnosis: z.string(),
 
   postSurgeryNurseId: z.number().int().optional().nullable(),
 })
@@ -58,17 +68,22 @@ const OperationExecutionSchema = z.object({
   birthRemark: z.enum(['lahir_hidup', 'lahir_mati']).optional(),
 })
 
-const BloodComponentSchema = z.object({
-  used: z.boolean().default(false),
-  volumeCc: positiveInt.optional(),
-})
-
-const BloodInputSchema = z.object({
-  prc: BloodComponentSchema,
-  ffp: BloodComponentSchema,
-  wb: BloodComponentSchema,
-  tc: BloodComponentSchema,
-})
+const BloodInputSchema = z
+  .object({
+    type: z.enum(['prc', 'wb', 'ffp', 'tc']),
+    amount: z.object({
+      prc: z.coerce.number().optional(),
+      wb: z.coerce.number().optional(),
+      ffp: z.coerce.number().optional(),
+      tc: z.coerce.number().optional(),
+    }),
+  })
+  .transform((val) => ({
+    type: val.type,
+    amount: Object.fromEntries(
+      ['prc', 'wb', 'ffp', 'tc'].map((k) => [k, val.type === k ? (val.amount[k] ?? null) : null]),
+    ),
+  }))
 
 const ImplantSchema = z.object({
   brand: z.string().optional(),
@@ -85,15 +100,15 @@ const SpecimenSchema = z.object({
 
 const TissueNoteSchema = z.object({
   note: z
-    .string({
-      required_error: 'Masukkan deskripsi catatan',
-    })
-    .min(1, { message: 'Setidaknya diperlukan 1 catatan' }),
+    .string()
+    .trim()
+    .transform((val) => (val === '' ? undefined : val))
+    .optional(),
 })
 
 export const TreatmentReportSchema = z.object({
   operatorTeam: OperatorTeamSchema,
-  procedures: z.array(ProcedureSchema).min(1),
+  procedures: z.array(ProcedureSchema).min(1, { message: 'Silahkan pilih prosedur' }),
 
   operationExecution: OperationExecutionSchema,
 

From ccefb69f0c7c5e883be438910184e4cf11e820f2 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 28 Nov 2025 10:36:30 +0700
Subject: [PATCH 08/28] adjustment on picker dialog procedure

refactor(procedure-picker): improve component structure and add readonly support

- Reorganize imports and add type imports section
- Replace custom Button with ButtonAction component
- Add readonly state handling for fields and buttons
- Improve type safety with ProcedureSrc type casting

feat(usePaginatedList): add syncToUrl option for nested components

Add syncToUrl option to disable URL synchronization when used in modals or nested components to prevent overriding parent page URL. Default remains true for backward compatibility.

Also includes minor formatting improvements in procedure-list.vue template.
---
 .../arrangement-procedure/procedure-list.vue  | 33 +++++-----
 .../procedure-picker.vue                      | 63 +++++++++----------
 .../app/treatment-report/preview.vue          |  0
 app/composables/usePaginatedList.ts           | 36 ++++++++---
 4 files changed, 77 insertions(+), 55 deletions(-)
 create mode 100644 app/components/app/treatment-report/preview.vue

diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
index e4836c7c..fabb0463 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
@@ -45,6 +45,7 @@ const {
   handleSearch,
   fetchData: getItemList,
 } = usePaginatedList({
+  syncToUrl: false,
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
@@ -102,19 +103,23 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog v-model:open="isModalOpen" title="" size="xl">
-  <Header
-    v-model="searchInput"
-    :prep="headerPrep"
-    :ref-search-nav="headerPrep.refSearchNav"
-    @search="handleSearch"
-    class=""
-  />
-  <AppProcedureSrcList
-    :table-config="config"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @page-change="handlePageChange"
-  />
+  <Dialog
+    v-model:open="isModalOpen"
+    title=""
+    size="xl"
+  >
+    <Header
+      v-model="searchInput"
+      :prep="headerPrep"
+      :ref-search-nav="headerPrep.refSearchNav"
+      @search="handleSearch"
+      class=""
+    />
+    <AppProcedureSrcList
+      :table-config="config"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </Dialog>
 </template>
diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
index e6ba7f2b..ec2aad35 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
@@ -1,23 +1,24 @@
 <script setup lang="ts">
-import ProcedureListDialog from './procedure-list.vue'
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
-import { Form } from '~/components/pub/ui/form'
-import { FieldArray } from 'vee-validate'
-import InputBase from '~/components/pub/my-ui/form/input-base.vue'
-import * as DE from '~/components/pub/my-ui/doc-entry'
-import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
 import { cn } from '~/lib/utils'
+
+// types
+import { type ProcedureSrc } from '~/models/procedure-src'
+
+// componenets
+import { FieldArray } from 'vee-validate'
+import { ButtonAction } from '~/components/pub/my-ui/form'
 import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
-import { is } from 'date-fns/locale'
+import ProcedureListDialog from './procedure-list.vue'
 
 interface Props {
   fieldName: string
   title: string
   subTitle?: string
+  isReadonly?: boolean
 }
 const props = defineProps<Props>()
 
+const { isReadonly = false } = props
 const isProcedurePickerDialogOpen = ref<boolean>(false)
 provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
 </script>
@@ -26,19 +27,15 @@ provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
   <div class="">
     <div class="mb-2 flex items-center justify-between">
       <p class="mb-2 font-medium">{{ title }}</p>
-      <Button
-        type="button"
+      <ButtonAction
+        preset="add"
+        title="Tambah Item"
+        icon="i-lucide-search"
+        :disabled="isReadonly"
+        :label="subTitle || 'Pilih Diagnosis'"
+        :full-width-mobile="true"
         @click="isProcedurePickerDialogOpen = true"
-        size="xs"
-        variant="outline"
-        class="border-orange-400 bg-transparent text-orange-400"
-      >
-        <Icon
-          name="i-lucide-search"
-          class="h-4 w-4 align-middle transition-colors"
-        />
-        {{ subTitle || 'Pilih Diagnosis' }}
-      </Button>
+      />
     </div>
 
     <FieldArray
@@ -61,20 +58,20 @@ provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
               v-for="(field, idx) in fields"
               :key="idx"
             >
-              <TableCell class="">{{ field.value?.name }}</TableCell>
-              <TableCell class="">{{ field.value?.code }}</TableCell>
+              <TableCell :class="cn(isReadonly && 'text-muted-foreground')">
+                {{ (field.value as ProcedureSrc)?.name }}
+              </TableCell>
+              <TableCell :class="cn(isReadonly && 'text-muted-foreground')">
+                {{ (field.value as ProcedureSrc)?.code }}
+              </TableCell>
               <TableCell class="">
-                <Button
-                  type="button"
-                  variant="destructive"
-                  size="sm"
+                <ButtonAction
+                  :disabled="isReadonly"
+                  preset="delete"
+                  :title="`Hapus prosedur '${(field.value as ProcedureSrc)?.name}'`"
+                  icon-only
                   @click="remove(idx)"
-                >
-                  <Icon
-                    name="i-lucide-trash-2"
-                    class="h-4 w-4"
-                  />
-                </Button>
+                />
               </TableCell>
             </TableRow>
           </TableBody>
diff --git a/app/components/app/treatment-report/preview.vue b/app/components/app/treatment-report/preview.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
index 71dd99b3..ce5dbb40 100644
--- a/app/composables/usePaginatedList.ts
+++ b/app/composables/usePaginatedList.ts
@@ -2,7 +2,6 @@ import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import * as z from 'zod'
-import { is } from "date-fns/locale"
 
 // Default query schema yang bisa digunakan semua list
 export const defaultQuerySchema = z.object({
@@ -38,10 +37,23 @@ interface UsePaginatedListOptions<T = any> {
   }>
   // Nama endpoint untuk logging error
   entityName: string
+  /**
+   * Apakah state harus disinkronkan ke URL Browser?
+   * Set `false` jika digunakan di dalam Modal, Drawer, atau Nested Component
+   * agar tidak menimpa URL halaman induk.
+   * @default true
+   */
+  syncToUrl?: boolean
 }
 
 export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
-  const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
+  const {
+    querySchema = defaultQuerySchema,
+    defaultQuery = defaultQueryParams,
+    fetchFn,
+    entityName,
+    syncToUrl = true, // Default true agar behavior lama tetap jalan
+  } = options
 
   // State management
   const data = ref<T[]>([])
@@ -49,11 +61,19 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
     isTableLoading: false,
   })
 
-  // URL state management
-  const queryParams = useUrlSearchParams('history', {
-    initialValue: defaultQuery,
-    removeFalsyValues: true,
-  })
+  let queryParams: any
+
+  if (syncToUrl) {
+    // Mode Halaman Utama: Sync ke URL
+    queryParams = useUrlSearchParams('history', {
+      initialValue: defaultQuery,
+      removeFalsyValues: true,
+      write: false,
+    })
+  } else {
+    // Mode Nested/Modal: Local Reactive State
+    queryParams = reactive({ ...defaultQuery })
+  }
 
   const params = computed(() => {
     const result = querySchema.safeParse(queryParams)
@@ -168,7 +188,7 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
   }
 }
 
-export function transform(endpoint: string ,params: any): string {
+export function transform(endpoint: string, params: any): string {
   const urlParams = new URLSearchParams()
 
   Object.entries(params).forEach(([key, value]) => {

From 1b4d3af90936cc74b707d9905bab031dc6c8859b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 28 Nov 2025 13:21:35 +0700
Subject: [PATCH 09/28] 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
---
 .../procedure-picker.vue                      | 174 ++++++++++++------
 .../app/treatment-report/preview.vue          | 151 +++++++++++++++
 .../content/treatment-report/add.vue          |  56 +-----
 .../content/treatment-report/detail.vue       |  64 +++++++
 .../content/treatment-report/edit.vue         |  60 ++++++
 .../content/treatment-report/sample.ts        |  68 +++++++
 .../pub/my-ui/form/view/detail-row.vue        |  10 +-
 .../(features)/treatment-report/[id]/edit.vue |  46 +++++
 .../treatment-report/[id]/index.vue           |  44 +++++
 app/pages/(features)/treatment-report/add.vue |   2 +-
 app/schemas/treatment-report.schema.ts        |   3 +-
 11 files changed, 559 insertions(+), 119 deletions(-)
 create mode 100644 app/components/content/treatment-report/detail.vue
 create mode 100644 app/components/content/treatment-report/edit.vue
 create mode 100644 app/components/content/treatment-report/sample.ts
 create mode 100644 app/pages/(features)/treatment-report/[id]/edit.vue
 create mode 100644 app/pages/(features)/treatment-report/[id]/index.vue

diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
index ec2aad35..406d7f4b 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { cn } from '~/lib/utils'
-
-// types
 import { type ProcedureSrc } from '~/models/procedure-src'
 
-// componenets
+// Components
 import { FieldArray } from 'vee-validate'
 import { ButtonAction } from '~/components/pub/my-ui/form'
 import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
@@ -14,69 +12,129 @@ interface Props {
   fieldName: string
   title: string
   subTitle?: string
-  isReadonly?: boolean
-}
-const props = defineProps<Props>()
 
-const { isReadonly = false } = props
+  // State UI (Loading / Disabled)
+  isReadonly?: boolean
+
+  // Data Architecture Switch
+  // 'form' = Pakai Vee-Validate (Parent wajib useForm)
+  // 'preview' = Pakai Props sampleItems (Parent bebas)
+  mode?: 'form' | 'preview'
+
+  // Data Source untuk mode 'preview' (atau initial data)
+  sampleItems?: ProcedureSrc[]
+}
+
+// Set default mode ke 'form' agar backward compatible
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'form',
+  isReadonly: false,
+  sampleItems: () => [],
+})
+
 const isProcedurePickerDialogOpen = ref<boolean>(false)
 provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
 </script>
 
 <template>
-  <div class="">
-    <div class="mb-2 flex items-center justify-between">
-      <p class="mb-2 font-medium">{{ title }}</p>
-      <ButtonAction
-        preset="add"
-        title="Tambah Item"
-        icon="i-lucide-search"
-        :disabled="isReadonly"
-        :label="subTitle || 'Pilih Diagnosis'"
-        :full-width-mobile="true"
-        @click="isProcedurePickerDialogOpen = true"
-      />
-    </div>
+  <div class="mb-2 flex items-center justify-between">
+    <p class="mb-2 font-medium">{{ title }}</p>
 
-    <FieldArray
-      v-slot="{ fields, push, remove }"
-      :name="props.fieldName"
-    >
-      <ProcedureListDialog :process-fn="push" />
+    <ButtonAction
+      v-if="mode === 'form' && !isReadonly"
+      preset="add"
+      title="Tambah Item"
+      icon="i-lucide-search"
+      :label="subTitle || 'Pilih Diagnosis'"
+      :full-width-mobile="true"
+      @click="isProcedurePickerDialogOpen = true"
+    />
+  </div>
 
-      <div class="overflow-hidden rounded-lg border border-gray-200">
-        <Table>
-          <TableHeader class="bg-gray-100">
-            <TableRow>
-              <TableHead class="w-1/2">Prosedur</TableHead>
-              <TableHead class="w-1/2">ICD-X</TableHead>
-              <TableHead class="w-1/2">Action</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow
-              v-for="(field, idx) in fields"
-              :key="idx"
+  <FieldArray
+    v-if="mode === 'form'"
+    v-slot="{ fields, push, remove }"
+    :name="props.fieldName"
+  >
+    <ProcedureListDialog :process-fn="push" />
+
+    <div class="overflow-hidden rounded-lg border border-gray-200">
+      <Table>
+        <TableHeader class="bg-gray-100">
+          <TableRow>
+            <TableHead class="w-1/2">Prosedur</TableHead>
+            <TableHead class="w-1/2">ICD-X</TableHead>
+            <TableHead class="w-[50px]">Action</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-if="fields.length === 0">
+            <TableCell
+              colspan="3"
+              class="py-4 text-center text-muted-foreground"
             >
-              <TableCell :class="cn(isReadonly && 'text-muted-foreground')">
-                {{ (field.value as ProcedureSrc)?.name }}
-              </TableCell>
-              <TableCell :class="cn(isReadonly && 'text-muted-foreground')">
-                {{ (field.value as ProcedureSrc)?.code }}
-              </TableCell>
-              <TableCell class="">
-                <ButtonAction
-                  :disabled="isReadonly"
-                  preset="delete"
-                  :title="`Hapus prosedur '${(field.value as ProcedureSrc)?.name}'`"
-                  icon-only
-                  @click="remove(idx)"
-                />
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
-    </FieldArray>
+              Belum ada data dipilih.
+            </TableCell>
+          </TableRow>
+
+          <TableRow
+            v-for="(field, idx) in fields"
+            :key="field.key"
+          >
+            <TableCell :class="cn(isReadonly && 'opacity-50')">
+              {{ (field.value as ProcedureSrc)?.name }}
+            </TableCell>
+            <TableCell :class="cn(isReadonly && 'opacity-50')">
+              {{ (field.value as ProcedureSrc)?.code }}
+            </TableCell>
+            <TableCell>
+              <ButtonAction
+                v-if="!isReadonly"
+                preset="delete"
+                icon-only
+                :title="`Hapus ${(field.value as ProcedureSrc)?.name}`"
+                @click="remove(idx)"
+              />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  </FieldArray>
+
+  <div
+    v-else
+    class="overflow-hidden rounded-lg border border-gray-200"
+  >
+    <Table>
+      <TableHeader class="bg-gray-100">
+        <TableRow>
+          <TableHead class="w-1/2">Prosedur</TableHead>
+          <TableHead class="w-1/2">ICD-X</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-if="sampleItems.length === 0">
+          <TableCell
+            colspan="2"
+            class="py-4 text-center text-muted-foreground"
+          >
+            Tidak ada data.
+          </TableCell>
+        </TableRow>
+
+        <TableRow
+          v-for="item in sampleItems"
+          :key="item.code || item.id"
+        >
+          <TableCell class="text-muted-foreground">
+            {{ item.name }}
+          </TableCell>
+          <TableCell class="text-muted-foreground">
+            {{ item.code }}
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
   </div>
 </template>
diff --git a/app/components/app/treatment-report/preview.vue b/app/components/app/treatment-report/preview.vue
index e69de29b..c5eb7f64 100644
--- a/app/components/app/treatment-report/preview.vue
+++ b/app/components/app/treatment-report/preview.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+// type
+import { type ProcedureSrc } from '~/models/procedure-src'
+import { type TreatmentReportFormData } from '~/schemas/treatment-report.schema'
+
+// componenets
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'
+
+// #region Props & Emits
+const props = defineProps<{
+  data: TreatmentReportFormData
+}>()
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'edit'): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+const { operatorTeam, procedures, operationExecution, bloodInput, implant, specimen, tissueNotes = [] } = props.data
+
+const procedureSampleData = procedures as unknown as ProcedureSrc[]
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+// #region Utilities & event handlers
+function onNavigate(type: string) {
+  if (type == 'back') emit('back')
+  if (type == 'edit') emit('edit')
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Tanggal Laporan">
+    {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+  </DetailRow>
+
+  <Accordion
+    type="multiple"
+    class="w-full"
+    collapsible
+    :default-value="['section-1', 'section-2', 'section-3']"
+  >
+    <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>
+      </AccordionContent>
+    </AccordionItem>
+
+    <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"
+        />
+      </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>
+
+          <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>
+        </DE.Block>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+  <div class="my-2 flex justify-end py-2">
+    <PubMyUiNavFooterBaEd @click="onNavigate" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/add.vue
index a80b3fd2..f4a4156e 100644
--- a/app/components/content/treatment-report/add.vue
+++ b/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
diff --git a/app/components/content/treatment-report/detail.vue b/app/components/content/treatment-report/detail.vue
new file mode 100644
index 00000000..bbe5d3a0
--- /dev/null
+++ b/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>
diff --git a/app/components/content/treatment-report/edit.vue b/app/components/content/treatment-report/edit.vue
new file mode 100644
index 00000000..fe6d5200
--- /dev/null
+++ b/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>
diff --git a/app/components/content/treatment-report/sample.ts b/app/components/content/treatment-report/sample.ts
new file mode 100644
index 00000000..f368eea6
--- /dev/null
+++ b/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',
+    },
+  ],
+}
diff --git a/app/components/pub/my-ui/form/view/detail-row.vue b/app/components/pub/my-ui/form/view/detail-row.vue
index 2b2b8f6f..f57bfa49 100644
--- a/app/components/pub/my-ui/form/view/detail-row.vue
+++ b/app/components/pub/my-ui/form/view/detail-row.vue
@@ -5,15 +5,17 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3">
+  <div class="grid grid-cols-[150px_10px_1fr] gap-y-1 lg:grid-cols-[180px_12px_1fr]">
     <!-- Label -->
-    <span class="text-md font-normal text-muted-foreground">
+    <span class="text-md font-normal tracking-wide text-muted-foreground">
       {{ label }}
     </span>
 
+    <!-- Colon -->
+    <span class="text-md tracking-wide text-muted-foreground">:</span>
+
     <!-- Value -->
-    <span class="truncate lg:whitespace-normal">
-      <span class="me-3 hidden lg:inline-block">:</span>
+    <span class="text-md font-sans tracking-wide">
       <slot />
     </span>
   </div>
diff --git a/app/pages/(features)/treatment-report/[id]/edit.vue b/app/pages/(features)/treatment-report/[id]/edit.vue
new file mode 100644
index 00000000..c9dd8686
--- /dev/null
+++ b/app/pages/(features)/treatment-report/[id]/edit.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Edit Laporan Tindakan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <ContentTreatmentReportEdit
+      v-if="canRead"
+      :id="route.params.id as string"
+    />
+
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/treatment-report/[id]/index.vue b/app/pages/(features)/treatment-report/[id]/index.vue
new file mode 100644
index 00000000..43f5f6c3
--- /dev/null
+++ b/app/pages/(features)/treatment-report/[id]/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Laporan Tindakan',
+  contentFrame: 'cf-container-xl',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <ContentTreatmentReportDetail
+      v-if="canRead"
+      :id="route.params.id as string"
+    />
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/treatment-report/add.vue b/app/pages/(features)/treatment-report/add.vue
index 072a1af3..e29a77cf 100644
--- a/app/pages/(features)/treatment-report/add.vue
+++ b/app/pages/(features)/treatment-report/add.vue
@@ -6,7 +6,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah Laporan',
+  title: 'Tambah Laporan Tindakan',
   contentFrame: 'cf-container-2xl',
 })
 
diff --git a/app/schemas/treatment-report.schema.ts b/app/schemas/treatment-report.schema.ts
index 02d60820..02b0076a 100644
--- a/app/schemas/treatment-report.schema.ts
+++ b/app/schemas/treatment-report.schema.ts
@@ -7,7 +7,6 @@ const isoDateTime = z
     const date = new Date(val)
     return !isNaN(date.getTime())
   }, 'Format tanggal / waktu tidak valid')
-  .transform((val) => new Date(val).toISOString())
 
 const positiveInt = z.coerce.number().int().nonnegative()
 
@@ -34,7 +33,7 @@ const OperatorTeamSchema = z.object({
 })
 
 const ProcedureSchema = z.object({
-  id: z.number().int().optional(),
+  id: z.number().int(),
   name: z.string().min(1),
   code: z.string().min(1),
 })

From be1b86141f6755dabb505714725de738966827dd Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 1 Dec 2025 19:50:43 +0700
Subject: [PATCH 10/28] impl: form entry with source of add,edit

feat(treatment-report): add history list component and dialog integration

- Create new list-history.vue component for displaying treatment report history
- Add configuration file for history list data table
- Integrate history list into main treatment report view with dialog
- Replace simple filter button with action buttons including history view

feat(treatment-report): implement crud navigation and form actions

- Add new entry component for treatment report with list and form views
- Implement back navigation using useQueryCRUDMode
- Replace form submit button with action footer component
- Update dropdown action component for detail view

refactor(treatment-report): restructure form components and update mode handling

- Rename 'add.vue' to 'form.vue' for better clarity
- Update form mode types from 'create|update|view' to 'add|edit|view'
- Implement proper reactive state handling for form modes
- Add new form component with loading states and mock data
- Enhance list component with action handlers and navigation

fix default calculated hours
---
 .../app/treatment-report/entry-form.vue       |  35 ++--
 .../app/treatment-report/list-history.cfg.ts  |  88 ++++++++++
 .../app/treatment-report/list-history.vue     |  39 +++++
 app/components/content/encounter/process.vue  |   2 +-
 .../content/treatment-report/edit.vue         |   7 +-
 .../content/treatment-report/entry.vue        |  31 ++++
 .../treatment-report/{add.vue => form.vue}    |  40 +++++
 .../content/treatment-report/list.vue         | 151 +++++++++++++++++-
 .../pub/my-ui/data/dropdown-action-d.vue      |  66 ++++++++
 app/components/pub/my-ui/nav-footer/index.ts  |   1 +
 10 files changed, 442 insertions(+), 18 deletions(-)
 create mode 100644 app/components/app/treatment-report/list-history.cfg.ts
 create mode 100644 app/components/app/treatment-report/list-history.vue
 create mode 100644 app/components/content/treatment-report/entry.vue
 rename app/components/content/treatment-report/{add.vue => form.vue} (52%)
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-d.vue
 create mode 100644 app/components/pub/my-ui/nav-footer/index.ts

diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/treatment-report/entry-form.vue
index 98eafbad..52dfba14 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/treatment-report/entry-form.vue
@@ -8,11 +8,13 @@ import { type TreatmentReportFormData, TreatmentReportSchema } from '~/schemas/t
 
 // type
 import type { Doctor } from '~/models/doctor'
+import { type ClickType as ActionClickType } from '~/components/pub/my-ui/nav-footer/index'
 
 // components
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import Separator from '~/components/pub/ui/separator/Separator.vue'
 import { ArrayMessage } from '~/components/pub/ui/form'
+import ActionForm from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
 
 // form field components
 import {
@@ -39,7 +41,7 @@ interface FormData extends TreatmentReportFormData {
 
 interface Props {
   isLoading: boolean
-  mode?: 'create' | 'update' | 'view'
+  mode: 'add' | 'edit' | 'view'
   initialValues?: Partial<FormData>
 
   // form related
@@ -49,17 +51,20 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits<{
   (e: 'submit', payload: FormData): void
+  (e: 'back'): void
   (e: 'error', errors: Error): void
 }>()
 
 const tissueNotesLimit = 5
-const { isLoading, mode = 'create' } = props
+const mode = toRef(props, 'mode')
+const isLoading = toRef(props, 'isLoading')
+
 const isReadonly = computed(() => {
-  if (isLoading) {
+  if (isLoading.value === true) {
     return true
   }
 
-  if (mode === 'view') {
+  if (mode.value === 'view') {
     return true
   }
 
@@ -93,7 +98,17 @@ defineExpose({
 // #endregion region
 
 // #region Utilities & event handlers
-// const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues))
+const onFormActionClicked = (action: ActionClickType) => {
+  if (action === 'back') {
+    emit('back')
+    return
+  }
+  if (action === 'submit') {
+    onSubmit()
+    return
+  }
+}
+
 const onSubmit = handleSubmit(
   (values) => {
     console.log(JSON.stringify(values))
@@ -126,6 +141,7 @@ watch(
 
     setFieldValue('_operationDuration', formatTime(res))
   },
+  { immediate: true }
 )
 
 watch(
@@ -147,6 +163,7 @@ watch(
 
     setFieldValue('_anesthesiaDuration', formatTime(res))
   },
+  { immediate: true }
 )
 // #endregion
 </script>
@@ -445,13 +462,7 @@ watch(
       />
     </Fragment>
     <div class="mt-4 flex justify-end">
-      <button
-        type="submit"
-        class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
-        :disabled="isLoading"
-      >
-        {{ isLoading ? 'Menyimpan...' : 'Simpan' }}
-      </button>
+      <ActionForm @click="onFormActionClicked" />
     </div>
   </form>
 </template>
diff --git a/app/components/app/treatment-report/list-history.cfg.ts b/app/components/app/treatment-report/list-history.cfg.ts
new file mode 100644
index 00000000..25f2acc3
--- /dev/null
+++ b/app/components/app/treatment-report/list-history.cfg.ts
@@ -0,0 +1,88 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { TreatmentReportData } from '~/components/app/treatment-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-d.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL LAPORAN' },
+      { label: 'DPJP' },
+      { label: 'OPERATOR' },
+      { label: 'TANGGAL PEMBEDAHAN' },
+      { label: 'JENIS OPERASI' },
+      { label: 'KODE BILLING' },
+      { label: 'SISTEM OPERASI' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as TreatmentReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      const attr = (rec as TreatmentReportData).operationAt
+      const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
+
+      return result
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return 'dr. Dewi Arum Sawitri, Sp.An'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return 'Besar'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return 'dr. Irwansyah Kurniawan Sp.Bo'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/treatment-report/list-history.vue b/app/components/app/treatment-report/list-history.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/treatment-report/list-history.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 43b0f55b..4efa840b 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -22,7 +22,7 @@ import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
 import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 import Cprj from '~/components/content/cprj/entry.vue'
-import TreatmentReport from '~/components/content/treatment-report/list.vue'
+import TreatmentReport from '~/components/content/treatment-report/entry.vue'
 import DocUploadList from '~/components/content/document-upload/list.vue'
 import GeneralConsentList from '~/components/content/general-consent/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
diff --git a/app/components/content/treatment-report/edit.vue b/app/components/content/treatment-report/edit.vue
index fe6d5200..e35325fe 100644
--- a/app/components/content/treatment-report/edit.vue
+++ b/app/components/content/treatment-report/edit.vue
@@ -15,8 +15,9 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const detail = ref<TreatmentReportFormData | null>(null)
 
+const { backToList } = useQueryCRUDMode('mode')
+const detail = ref<TreatmentReportFormData | null>({} as unknown as TreatmentReportFormData)
 const doctors = ref<Doctor[]>([])
 
 // TODO: dummy data
@@ -36,7 +37,9 @@ onMounted(() => {
   <AppTreatmentReportEntry
     v-if="detail"
     :isLoading="false"
+    :mode="'edit'"
     @submit="(val) => console.log(val)"
+    @back="backToList"
     @error="
       (err: Error) => {
         toast({
@@ -47,7 +50,7 @@ onMounted(() => {
       }
     "
     :doctors="doctors"
-    :initialValues="detail as unknown as TreatmentReportFormData"
+    :initialValues="detail"
   >
     <template #procedures>
       <ArrangementProcedurePicker
diff --git a/app/components/content/treatment-report/entry.vue b/app/components/content/treatment-report/entry.vue
new file mode 100644
index 00000000..363aa150
--- /dev/null
+++ b/app/components/content/treatment-report/entry.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import List from './list.vue'
+import Form from './form.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry"
+    />
+    <Form
+      v-else
+      @back="backToList"
+    />
+  </div>
+</template>
diff --git a/app/components/content/treatment-report/add.vue b/app/components/content/treatment-report/form.vue
similarity index 52%
rename from app/components/content/treatment-report/add.vue
rename to app/components/content/treatment-report/form.vue
index f4a4156e..8eeb0f64 100644
--- a/app/components/content/treatment-report/add.vue
+++ b/app/components/content/treatment-report/form.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import mockData from './sample'
+
 // type
 import { genDoctor, type Doctor } from '~/models/doctor'
 import type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'
@@ -8,18 +10,49 @@ 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'
 
+// states
+const route = useRoute()
+const { mode, backToList } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+const reportData = ref<TreatmentReportFormData>({} as unknown as TreatmentReportFormData)
 const doctors = ref<Doctor[]>([])
 const isLoading = ref<boolean>(false)
+
 // TODO: dummy data
 ;(() => {
   doctors.value = [genDoctor()]
 })()
+
+const entryMode = ref<'add' | 'edit' | 'view'>('add')
+const isDataReady = ref(false)
+
+onMounted(async () => {
+  if (mode.value === 'entry' && recordId.value) {
+    entryMode.value = 'edit'
+    await loadEntryForEdit(+recordId.value)
+  } else {
+    // Untuk mode 'add', langsung set ready
+    isDataReady.value = true
+  }
+})
+
+// TODO: map data
+async function loadEntryForEdit(id: number | string) {
+  isLoading.value = true
+  const result = mockData
+  reportData.value = result as TreatmentReportFormData
+  isLoading.value = false
+  isDataReady.value = true
+}
 </script>
 
 <template>
   <AppTreatmentReportEntry
+    v-if="isDataReady"
     :isLoading="isLoading"
+    :mode="entryMode"
     @submit="(val) => console.log(val)"
+    @back="backToList"
     @error="
       (err: Error) => {
         toast({
@@ -30,6 +63,7 @@ const isLoading = ref<boolean>(false)
       }
     "
     :doctors="doctors"
+    :initialValues="reportData"
   >
     <template #procedures>
       <ArrangementProcedurePicker
@@ -39,4 +73,10 @@ const isLoading = ref<boolean>(false)
       />
     </template>
   </AppTreatmentReportEntry>
+  <div
+    v-else
+    class="flex items-center justify-center p-8"
+  >
+    <p class="text-muted-foreground">Memuat data...</p>
+  </div>
 </template>
diff --git a/app/components/content/treatment-report/list.vue b/app/components/content/treatment-report/list.vue
index e6ece811..3add31d1 100644
--- a/app/components/content/treatment-report/list.vue
+++ b/app/components/content/treatment-report/list.vue
@@ -1,15 +1,58 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-
 // Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import AppTreatmentReportList from '~/components/app/treatment-report/list.vue'
+import AppTreatmentReportListHistory from '~/components/app/treatment-report/list-history.vue'
+import { ButtonAction } from '~/components/pub/my-ui/form'
+
+// types
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
 
 // Samples
 import { sampleRows, type TreatmentReportData } from '~/components/app/treatment-report/sample'
+import sampleReport from './sample'
 
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  (e: 'add'): void
+  (e: 'edit', id: number | string): void
+}>()
+
+// states
+const router = useRouter()
+const route = useRoute()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+const title = ref('')
 const search = ref('')
 const dateFrom = ref('')
 const dateTo = ref('')
+const isDialogOpen = ref<boolean>(false)
+const isLoading = ref<boolean>(false)
+
+// #region mock
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/consultation.handler'
+// #endregion
 
 // filter + pencarian sederhana (client-side)
 const filtered = computed(() => {
@@ -21,6 +64,50 @@ const filtered = computed(() => {
     return true
   })
 })
+
+const goEdit = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+async function onGetDetail(id: number | string) {
+  isLoading.value = true
+  const res = sampleReport
+  recItem.value = res
+  console.log(res)
+  isLoading.value = false
+}
+
+// #region watcher
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      onGetDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      break
+    case ActionEvents.showEdit:
+      goEdit(recId.value)
+      // reset
+      recId.value = 0
+      title.value = 'Edit Konsultasi'
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
 </script>
 
 <template>
@@ -51,9 +138,43 @@ const filtered = computed(() => {
           type="date"
           class="rounded border px-3 py-2"
         />
+        <ButtonAction
+          preset="custom"
+          title="Filter List Laporan Tindakan"
+          label="Filter"
+          icon="i-lucide-filter"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
       </div>
 
-      <button class="ml-auto rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">Filter</button>
+      <div class="ml-auto flex items-center gap-2">
+        <ButtonAction
+          preset="custom"
+          title="Riwayat Laporan Tindakan"
+          icon="i-lucide-history"
+          label="Riwayat Laporan Tindakan"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+        <ButtonAction
+          preset="add"
+          title="Tambah Data Laporan Tindakan"
+          icon="i-lucide-plus"
+          label="Tambah Data"
+          @click="
+            () => {
+              goToEntry()
+            }
+          "
+        />
+      </div>
     </div>
 
     <div class="overflow-x-auto p-4">
@@ -70,4 +191,28 @@ const filtered = computed(() => {
       />
     </div>
   </div>
+
+  <Dialog
+    v-model:open="isDialogOpen"
+    title="Arsip Riwayat Laporan Tindakan"
+    size="2xl"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        isDialogOpen = value
+      }
+    "
+  >
+    <AppTreatmentReportListHistory
+      :data="filtered"
+      :pagination-meta="{
+        recordCount: 2,
+        page: 1,
+        pageSize: 10,
+        totalPage: 1,
+        hasPrev: false,
+        hasNext: false,
+      }"
+    />
+  </Dialog>
 </template>
diff --git a/app/components/pub/my-ui/data/dropdown-action-d.vue b/app/components/pub/my-ui/data/dropdown-action-d.vue
new file mode 100644
index 00000000..ac15ff49
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-d.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const timestamp = inject<Ref<number>>('timestamp')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+  timestamp.value = Date.now()
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/index.ts b/app/components/pub/my-ui/nav-footer/index.ts
new file mode 100644
index 00000000..ba848bbf
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/index.ts
@@ -0,0 +1 @@
+export type ClickType = 'back' | 'draft' | 'submit'

From dfc25f0048a78b552397ccc5a16e9646718a3959 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 2 Dec 2025 13:20:43 +0700
Subject: [PATCH 11/28] 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/treatment-report/preview.vue          | 147 ++++++++++--------
 .../content/treatment-report/edit.vue         |  63 --------
 .../content/treatment-report/entry.vue        |  13 +-
 .../content/treatment-report/form.vue         |   4 +-
 .../content/treatment-report/list.vue         |  35 ++++-
 .../treatment-report/{detail.vue => view.vue} |  21 +--
 app/composables/useQueryCRUD.ts               |  54 ++++++-
 .../(features)/treatment-report/[id]/edit.vue |  46 ------
 .../treatment-report/[id]/index.vue           |  44 ------
 app/pages/(features)/treatment-report/add.vue |  45 ------
 10 files changed, 181 insertions(+), 291 deletions(-)
 delete mode 100644 app/components/content/treatment-report/edit.vue
 rename app/components/content/treatment-report/{detail.vue => view.vue} (73%)
 delete mode 100644 app/pages/(features)/treatment-report/[id]/edit.vue
 delete mode 100644 app/pages/(features)/treatment-report/[id]/index.vue
 delete mode 100644 app/pages/(features)/treatment-report/add.vue

diff --git a/app/components/app/treatment-report/preview.vue b/app/components/app/treatment-report/preview.vue
index c5eb7f64..65b1fc2e 100644
--- a/app/components/app/treatment-report/preview.vue
+++ b/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>
diff --git a/app/components/content/treatment-report/edit.vue b/app/components/content/treatment-report/edit.vue
deleted file mode 100644
index e35325fe..00000000
--- a/app/components/content/treatment-report/edit.vue
+++ /dev/null
@@ -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>
diff --git a/app/components/content/treatment-report/entry.vue b/app/components/content/treatment-report/entry.vue
index 363aa150..a127b804 100644
--- a/app/components/content/treatment-report/entry.vue
+++ b/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>
diff --git a/app/components/content/treatment-report/form.vue b/app/components/content/treatment-report/form.vue
index 8eeb0f64..73ebe615 100644
--- a/app/components/content/treatment-report/form.vue
+++ b/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({
diff --git a/app/components/content/treatment-report/list.vue b/app/components/content/treatment-report/list.vue
index 3add31d1..ac3bcc7b 100644
--- a/app/components/content/treatment-report/list.vue
+++ b/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>
diff --git a/app/components/content/treatment-report/detail.vue b/app/components/content/treatment-report/view.vue
similarity index 73%
rename from app/components/content/treatment-report/detail.vue
rename to app/components/content/treatment-report/view.vue
index bbe5d3a0..93c1c83f 100644
--- a/app/components/content/treatment-report/detail.vue
+++ b/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>
diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
index f81649bd..4ff7748a 100644
--- a/app/composables/useQueryCRUD.ts
+++ b/app/composables/useQueryCRUD.ts
@@ -5,8 +5,15 @@ export function useQueryCRUDMode(key: string = 'mode') {
   const route = useRoute()
   const router = useRouter()
 
-  const mode = computed<'list' | 'entry'>({
-    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
+  const mode = computed<'list' | 'entry' | 'view'>({
+    get: () => {
+      const q = route.query[key]
+
+      if (q === 'entry') return 'entry'
+      if (q === 'view') return 'view'
+
+      return 'list'
+    },
     set: (val) => {
       router.push({
         path: route.path,
@@ -18,20 +25,57 @@ export function useQueryCRUDMode(key: string = 'mode') {
     },
   })
 
-  const goToEntry = () => (mode.value = 'entry')
+  // Cek apakah form diakses dari view/detail
+  const fromView = computed(() => route.query['from'] === 'view')
+
+  const goToEntry = (options?: { fromView?: boolean }) => {
+    router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        [key]: 'entry',
+        from: options?.fromView ? 'view' : undefined,
+      },
+    })
+  }
+
+  const goToView = () => (mode.value = 'view')
+
   const backToList = () => {
     router.push({
       path: route.path,
       query: {
         ...route.query,
         mode: 'list',
-        // HAPUS record-id
+        // HAPUS record-id dan from
         'record-id': undefined,
+        from: undefined,
       },
     })
   }
 
-  return { mode, goToEntry, backToList }
+  const backToView = () => {
+    router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        mode: 'view',
+        // HAPUS from
+        from: undefined,
+      },
+    })
+  }
+
+  // Fungsi back yang otomatis menentukan kemana harus kembali
+  const goBack = () => {
+    if (fromView.value) {
+      backToView()
+    } else {
+      backToList()
+    }
+  }
+
+  return { mode, fromView, goToEntry, goToView, backToList, backToView, goBack }
 }
 
 export function useQueryCRUDRecordId(key: string = 'record-id') {
diff --git a/app/pages/(features)/treatment-report/[id]/edit.vue b/app/pages/(features)/treatment-report/[id]/edit.vue
deleted file mode 100644
index c9dd8686..00000000
--- a/app/pages/(features)/treatment-report/[id]/edit.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-// import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/my-ui/error/error.vue'
-// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  // middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Edit Laporan Tindakan',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-// const { checkRole, hasReadAccess } = useRBAC()
-
-// // Check if user has access to this page
-// const hasAccess = checkRole(roleAccess)
-// if (!hasAccess) {
-//   navigateTo('/403')
-// }
-
-// Define permission-based computed properties
-// const canRead = hasReadAccess(roleAccess)
-const canRead = true
-</script>
-
-<template>
-  <div>
-    <ContentTreatmentReportEdit
-      v-if="canRead"
-      :id="route.params.id as string"
-    />
-
-    <Error
-      v-else
-      :status-code="403"
-    />
-  </div>
-</template>
diff --git a/app/pages/(features)/treatment-report/[id]/index.vue b/app/pages/(features)/treatment-report/[id]/index.vue
deleted file mode 100644
index 43f5f6c3..00000000
--- a/app/pages/(features)/treatment-report/[id]/index.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Detail Laporan Tindakan',
-  contentFrame: 'cf-container-xl',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-const { checkRole, hasReadAccess } = useRBAC()
-
-// Check if user has access to this page
-const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  navigateTo('/403')
-}
-
-// Define permission-based computed properties
-const canRead = hasReadAccess(roleAccess)
-</script>
-
-<template>
-  <div>
-    <ContentTreatmentReportDetail
-      v-if="canRead"
-      :id="route.params.id as string"
-    />
-    <Error
-      v-else
-      :status-code="403"
-    />
-  </div>
-</template>
diff --git a/app/pages/(features)/treatment-report/add.vue b/app/pages/(features)/treatment-report/add.vue
deleted file mode 100644
index e29a77cf..00000000
--- a/app/pages/(features)/treatment-report/add.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah Laporan Tindakan',
-  contentFrame: 'cf-container-2xl',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-const { checkRole, hasReadAccess } = useRBAC()
-
-// Check if user has access to this page
-// const hasAccess = checkRole(roleAccess)
-const hasAccess = true
-if (!hasAccess) {
-  navigateTo('/403')
-}
-
-// Define permission-based computed properties
-// const canRead = hasReadAccess(roleAccess)
-const canRead = true
-</script>
-
-<template>
-  <div>
-    <div v-if="canRead">
-      <ContentTreatmentReportAdd />
-    </div>
-    <Error
-      v-else
-      :status-code="403"
-    />
-  </div>
-</template>

From 45e3d60618744b66c20ba59ac28a44b7e0ec992c Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 2 Dec 2025 14:23:22 +0700
Subject: [PATCH 12/28] done delete row on list laporan tindakan

---
 .../app/treatment-report/list.cfg.ts          |  5 ++-
 .../content/treatment-report/list.vue         | 41 +++++++++++++++++--
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/components/app/treatment-report/list.cfg.ts b/app/components/app/treatment-report/list.cfg.ts
index 9b4c5df1..b07ef9e0 100644
--- a/app/components/app/treatment-report/list.cfg.ts
+++ b/app/components/app/treatment-report/list.cfg.ts
@@ -35,8 +35,9 @@ export const config: Config = {
   keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],
 
   delKeyNames: [
-    { key: 'code', label: 'Kode' },
-    { key: 'name', label: 'Nama' },
+    { key: 'id', label: 'ID' },
+    { key: 'dokter', label: 'Dokter' },
+    { key: 'reportAt', label: 'Tanggal Laporan' },
   ],
 
   parses: {
diff --git a/app/components/content/treatment-report/list.vue b/app/components/content/treatment-report/list.vue
index ac3bcc7b..e824d396 100644
--- a/app/components/content/treatment-report/list.vue
+++ b/app/components/content/treatment-report/list.vue
@@ -3,17 +3,22 @@
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import AppTreatmentReportList from '~/components/app/treatment-report/list.vue'
 import AppTreatmentReportListHistory from '~/components/app/treatment-report/list-history.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import { ButtonAction } from '~/components/pub/my-ui/form'
 
+// config
+import { config } from '~/components/app/treatment-report/list.cfg'
+
 // types
 import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import type { Encounter } from '~/models/encounter'
 
 // Samples
 import { sampleRows, type TreatmentReportData } from '~/components/app/treatment-report/sample'
 import sampleReport from './sample'
 
-// Models
-import type { Encounter } from '~/models/encounter'
+// helpers
+import { toast } from '~/components/pub/ui/toast'
 
 // Props
 interface Props {
@@ -108,7 +113,6 @@ watch([recId, recAction], (newVal) => {
   // Guard: jangan proses jika id = 0 atau action kosong
   if (!id || !action) return
 
-
   switch (action) {
     case ActionEvents.showDetail:
       // onGetDetail(recId.value)
@@ -238,4 +242,35 @@ watch([recId, recAction], (newVal) => {
       }"
     />
   </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="
+      () =>
+        handleActionRemove(
+          recItem.id,
+          () => {
+            router.go(0)
+          },
+          toast,
+        )
+    "
+    @cancel=""
+  >
+    <template #default="{ record }">
+      {{ console.log(JSON.stringify(record)) }}
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>

From 723b439c973b576e9c60b7a8a8696fef5f2a5937 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 2 Dec 2025 16:06:26 +0700
Subject: [PATCH 13/28] bind to new encounter init

---
 app/handlers/encounter-init.handler.ts | 28 +++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 3e1e85f3..064a7fcd 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -47,6 +47,7 @@ const DocUploadListAsync = defineAsyncComponent(() => import('~/components/conte
 const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
 const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/list.vue'))
 const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
+const TreatmentReportEntryAsync = defineAsyncComponent(() => import('~/components/content/treatment-report/entry.vue'))
 
 const defaultKeys: Record<string, any> = {
   status: {
@@ -209,13 +210,13 @@ const defaultKeys: Record<string, any> = {
     title: 'SPRI',
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
-  },  
+  },
   refBack: {
     id: 'reference-back',
     title: 'PRB',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
-  },  
+  },
   screening: {
     id: 'screening',
     title: 'Skrinning MPP',
@@ -246,6 +247,12 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
+  treatmentReport: {
+    id: 'treatment-report',
+    title: 'Laporan Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
 }
 
 export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
@@ -406,6 +413,15 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.priceList['props'] = { encounter_id: id }
   }
 
+  if (currentKeys?.treatmentReport) {
+    currentKeys.treatmentReport['component'] = TreatmentReportEntryAsync
+    currentKeys.treatmentReport['props'] = {
+      encounter: data?.encounter,
+      type: 'treatment-report',
+      label: currentKeys.treatmentReport['title'],
+    }
+  }
+
   return currentKeys
 }
 
@@ -485,13 +501,7 @@ export function mapResponseToEncounter(result: any): any {
   return mapped
 }
 
-export function getMenuItems(
-  id: string | number,
-  props: any,
-  user: any,
-  data: EncounterListData,
-  meta: any,
-) {
+export function getMenuItems(id: string | number, props: any, user: any, data: EncounterListData, meta: any) {
   console.log(props)
   // const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
   const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode

From da26790513bc966fd5ed2b20d2bf503e7cd75fc0 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Dec 2025 17:38:15 +0700
Subject: [PATCH 14/28] mv treatment-report to action-report based on encounter
 menu id list

---
 .../entry-form.vue                            | 12 ++++++------
 .../fields/fill-notes.vue                     |  0
 .../fields/index.ts                           |  0
 .../fields/radio-bloods.vue                   |  0
 .../fields/select-billing.vue                 |  0
 .../fields/select-birth-place.vue             |  0
 .../fields/select-birth-type.vue              |  0
 .../fields/select-operation-system.vue        |  0
 .../fields/select-operation-type.vue          |  0
 .../fields/select-specimen.vue                |  0
 .../fields/select-surgery-counter.vue         |  0
 .../fields/select-surgery-type.vue            |  0
 .../list-history.cfg.ts                       |  6 +++---
 .../list-history.vue                          |  0
 .../list.cfg.ts                               |  6 +++---
 .../list.vue                                  |  0
 .../preview.vue                               |  4 ++--
 .../sample.ts                                 |  4 ++--
 .../entry.vue                                 |  0
 .../form.vue                                  | 12 ++++++------
 .../list.vue                                  | 14 +++++++-------
 .../sample.ts                                 |  0
 .../view.vue                                  | 12 ++++++------
 app/components/content/encounter/process.vue  |  4 ++--
 app/handlers/encounter-init.handler.ts        | 19 ++++++-------------
 ...port.schema.ts => action-report.schema.ts} |  4 ++--
 26 files changed, 45 insertions(+), 52 deletions(-)
 rename app/components/app/{treatment-report => action-report}/entry-form.vue (97%)
 rename app/components/app/{treatment-report => action-report}/fields/fill-notes.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/index.ts (100%)
 rename app/components/app/{treatment-report => action-report}/fields/radio-bloods.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-billing.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-birth-place.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-birth-type.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-operation-system.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-operation-type.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-specimen.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-surgery-counter.vue (100%)
 rename app/components/app/{treatment-report => action-report}/fields/select-surgery-type.vue (100%)
 rename app/components/app/{treatment-report => action-report}/list-history.cfg.ts (90%)
 rename app/components/app/{treatment-report => action-report}/list-history.vue (100%)
 rename app/components/app/{treatment-report => action-report}/list.cfg.ts (91%)
 rename app/components/app/{treatment-report => action-report}/list.vue (100%)
 rename app/components/app/{treatment-report => action-report}/preview.vue (98%)
 rename app/components/app/{treatment-report => action-report}/sample.ts (93%)
 rename app/components/content/{treatment-report => action-report}/entry.vue (100%)
 rename app/components/content/{treatment-report => action-report}/form.vue (83%)
 rename app/components/content/{treatment-report => action-report}/list.vue (92%)
 rename app/components/content/{treatment-report => action-report}/sample.ts (100%)
 rename app/components/content/{treatment-report => action-report}/view.vue (74%)
 rename app/schemas/{treatment-report.schema.ts => action-report.schema.ts} (96%)

diff --git a/app/components/app/treatment-report/entry-form.vue b/app/components/app/action-report/entry-form.vue
similarity index 97%
rename from app/components/app/treatment-report/entry-form.vue
rename to app/components/app/action-report/entry-form.vue
index 52dfba14..2479e1c7 100644
--- a/app/components/app/treatment-report/entry-form.vue
+++ b/app/components/app/action-report/entry-form.vue
@@ -4,7 +4,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { type Duration, intervalToDuration } from 'date-fns'
 
 // schema
-import { type TreatmentReportFormData, TreatmentReportSchema } from '~/schemas/treatment-report.schema'
+import { type ActionReportFormData, ActionReportSchema } from '~/schemas/action-report.schema'
 
 // type
 import type { Doctor } from '~/models/doctor'
@@ -34,7 +34,7 @@ import { SelectDoctor } from '~/components/app/doctor/fields'
 // Helpers
 
 // #region Props & Emits
-interface FormData extends TreatmentReportFormData {
+interface FormData extends ActionReportFormData {
   _operationDuration: string
   _anesthesiaDuration: string
 }
@@ -71,10 +71,10 @@ const isReadonly = computed(() => {
   return false
 })
 
-const formSchema = toTypedSchema(TreatmentReportSchema)
+const formSchema = toTypedSchema(ActionReportSchema)
 
 const { errors, handleSubmit, values, meta, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
-  name: 'treatmentReportForm',
+  name: 'encounterActionReportForm',
   validationSchema: formSchema,
   initialValues: props.initialValues ? props.initialValues : {},
   validateOnMount: false,
@@ -141,7 +141,7 @@ watch(
 
     setFieldValue('_operationDuration', formatTime(res))
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 watch(
@@ -163,7 +163,7 @@ watch(
 
     setFieldValue('_anesthesiaDuration', formatTime(res))
   },
-  { immediate: true }
+  { immediate: true },
 )
 // #endregion
 </script>
diff --git a/app/components/app/treatment-report/fields/fill-notes.vue b/app/components/app/action-report/fields/fill-notes.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/fill-notes.vue
rename to app/components/app/action-report/fields/fill-notes.vue
diff --git a/app/components/app/treatment-report/fields/index.ts b/app/components/app/action-report/fields/index.ts
similarity index 100%
rename from app/components/app/treatment-report/fields/index.ts
rename to app/components/app/action-report/fields/index.ts
diff --git a/app/components/app/treatment-report/fields/radio-bloods.vue b/app/components/app/action-report/fields/radio-bloods.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/radio-bloods.vue
rename to app/components/app/action-report/fields/radio-bloods.vue
diff --git a/app/components/app/treatment-report/fields/select-billing.vue b/app/components/app/action-report/fields/select-billing.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-billing.vue
rename to app/components/app/action-report/fields/select-billing.vue
diff --git a/app/components/app/treatment-report/fields/select-birth-place.vue b/app/components/app/action-report/fields/select-birth-place.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-birth-place.vue
rename to app/components/app/action-report/fields/select-birth-place.vue
diff --git a/app/components/app/treatment-report/fields/select-birth-type.vue b/app/components/app/action-report/fields/select-birth-type.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-birth-type.vue
rename to app/components/app/action-report/fields/select-birth-type.vue
diff --git a/app/components/app/treatment-report/fields/select-operation-system.vue b/app/components/app/action-report/fields/select-operation-system.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-operation-system.vue
rename to app/components/app/action-report/fields/select-operation-system.vue
diff --git a/app/components/app/treatment-report/fields/select-operation-type.vue b/app/components/app/action-report/fields/select-operation-type.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-operation-type.vue
rename to app/components/app/action-report/fields/select-operation-type.vue
diff --git a/app/components/app/treatment-report/fields/select-specimen.vue b/app/components/app/action-report/fields/select-specimen.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-specimen.vue
rename to app/components/app/action-report/fields/select-specimen.vue
diff --git a/app/components/app/treatment-report/fields/select-surgery-counter.vue b/app/components/app/action-report/fields/select-surgery-counter.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-surgery-counter.vue
rename to app/components/app/action-report/fields/select-surgery-counter.vue
diff --git a/app/components/app/treatment-report/fields/select-surgery-type.vue b/app/components/app/action-report/fields/select-surgery-type.vue
similarity index 100%
rename from app/components/app/treatment-report/fields/select-surgery-type.vue
rename to app/components/app/action-report/fields/select-surgery-type.vue
diff --git a/app/components/app/treatment-report/list-history.cfg.ts b/app/components/app/action-report/list-history.cfg.ts
similarity index 90%
rename from app/components/app/treatment-report/list-history.cfg.ts
rename to app/components/app/action-report/list-history.cfg.ts
index 25f2acc3..d943bc7d 100644
--- a/app/components/app/treatment-report/list-history.cfg.ts
+++ b/app/components/app/action-report/list-history.cfg.ts
@@ -4,7 +4,7 @@ import { format } from 'date-fns'
 import { id } from 'date-fns/locale'
 
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
-import type { TreatmentReportData } from '~/components/app/treatment-report/sample'
+import type { ActionReportData } from '~/components/app/action-report/sample'
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-d.vue'))
 
 export const config: Config = {
@@ -41,13 +41,13 @@ export const config: Config = {
 
   parses: {
     reportAt: (rec: unknown): unknown => {
-      const attr = (rec as TreatmentReportData).reportAt
+      const attr = (rec as ActionReportData).reportAt
       const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
 
       return result
     },
     operationAt: (rec: unknown): unknown => {
-      const attr = (rec as TreatmentReportData).operationAt
+      const attr = (rec as ActionReportData).operationAt
       const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
 
       return result
diff --git a/app/components/app/treatment-report/list-history.vue b/app/components/app/action-report/list-history.vue
similarity index 100%
rename from app/components/app/treatment-report/list-history.vue
rename to app/components/app/action-report/list-history.vue
diff --git a/app/components/app/treatment-report/list.cfg.ts b/app/components/app/action-report/list.cfg.ts
similarity index 91%
rename from app/components/app/treatment-report/list.cfg.ts
rename to app/components/app/action-report/list.cfg.ts
index b07ef9e0..13a78728 100644
--- a/app/components/app/treatment-report/list.cfg.ts
+++ b/app/components/app/action-report/list.cfg.ts
@@ -4,7 +4,7 @@ import { format } from 'date-fns'
 import { id } from 'date-fns/locale'
 
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
-import type { TreatmentReportData } from '~/components/app/treatment-report/sample'
+import type { ActionReportData } from '~/components/app/action-report/sample'
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
@@ -42,13 +42,13 @@ export const config: Config = {
 
   parses: {
     reportAt: (rec: unknown): unknown => {
-      const attr = (rec as TreatmentReportData).reportAt
+      const attr = (rec as ActionReportData).reportAt
       const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
 
       return result
     },
     operationAt: (rec: unknown): unknown => {
-      const attr = (rec as TreatmentReportData).operationAt
+      const attr = (rec as ActionReportData).operationAt
       const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
 
       return result
diff --git a/app/components/app/treatment-report/list.vue b/app/components/app/action-report/list.vue
similarity index 100%
rename from app/components/app/treatment-report/list.vue
rename to app/components/app/action-report/list.vue
diff --git a/app/components/app/treatment-report/preview.vue b/app/components/app/action-report/preview.vue
similarity index 98%
rename from app/components/app/treatment-report/preview.vue
rename to app/components/app/action-report/preview.vue
index 65b1fc2e..fa113333 100644
--- a/app/components/app/treatment-report/preview.vue
+++ b/app/components/app/action-report/preview.vue
@@ -4,7 +4,7 @@ import { id } from 'date-fns/locale'
 
 // type
 import { type ProcedureSrc } from '~/models/procedure-src'
-import { type TreatmentReportFormData } from '~/schemas/treatment-report.schema'
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
 
 // componenets
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
@@ -14,7 +14,7 @@ import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker
 
 // #region Props & Emits
 const props = defineProps<{
-  data: TreatmentReportFormData
+  data: ActionReportFormData
 }>()
 
 const emit = defineEmits<{
diff --git a/app/components/app/treatment-report/sample.ts b/app/components/app/action-report/sample.ts
similarity index 93%
rename from app/components/app/treatment-report/sample.ts
rename to app/components/app/action-report/sample.ts
index 9446b91c..b067e859 100644
--- a/app/components/app/treatment-report/sample.ts
+++ b/app/components/app/action-report/sample.ts
@@ -1,6 +1,6 @@
 import { addWeeks, formatISO } from 'date-fns'
 
-export type TreatmentReportData = {
+export type ActionReportData = {
   id: number
   reportAt: string
   operationAt: string
@@ -17,7 +17,7 @@ export type TreatmentReportData = {
   asal: string
 }
 
-export const sampleRows: TreatmentReportData[] = [
+export const sampleRows: ActionReportData[] = [
   {
     id: 1,
     reportAt: formatISO(addWeeks(new Date(), -1)),
diff --git a/app/components/content/treatment-report/entry.vue b/app/components/content/action-report/entry.vue
similarity index 100%
rename from app/components/content/treatment-report/entry.vue
rename to app/components/content/action-report/entry.vue
diff --git a/app/components/content/treatment-report/form.vue b/app/components/content/action-report/form.vue
similarity index 83%
rename from app/components/content/treatment-report/form.vue
rename to app/components/content/action-report/form.vue
index 73ebe615..e6c30c73 100644
--- a/app/components/content/treatment-report/form.vue
+++ b/app/components/content/action-report/form.vue
@@ -3,18 +3,18 @@ import mockData from './sample'
 
 // type
 import { genDoctor, type Doctor } from '~/models/doctor'
-import type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'
+import type { ActionReportFormData } from '~/schemas/action-report.schema'
 
 // components
 import { toast } from '~/components/pub/ui/toast'
-import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue'
+import AppActionReportEntry from '~/components/app/action-report/entry-form.vue'
 import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'
 
 // states
 const route = useRoute()
 const { mode, goBack } = useQueryCRUDMode('mode')
 const { recordId } = useQueryCRUDRecordId('record-id')
-const reportData = ref<TreatmentReportFormData>({} as unknown as TreatmentReportFormData)
+const reportData = ref<ActionReportFormData>({} as unknown as ActionReportFormData)
 const doctors = ref<Doctor[]>([])
 const isLoading = ref<boolean>(false)
 
@@ -40,14 +40,14 @@ onMounted(async () => {
 async function loadEntryForEdit(id: number | string) {
   isLoading.value = true
   const result = mockData
-  reportData.value = result as TreatmentReportFormData
+  reportData.value = result as ActionReportFormData
   isLoading.value = false
   isDataReady.value = true
 }
 </script>
 
 <template>
-  <AppTreatmentReportEntry
+  <AppActionReportEntry
     v-if="isDataReady"
     :isLoading="isLoading"
     :mode="entryMode"
@@ -72,7 +72,7 @@ async function loadEntryForEdit(id: number | string) {
         sub-title="Pilih Prosedur"
       />
     </template>
-  </AppTreatmentReportEntry>
+  </AppActionReportEntry>
   <div
     v-else
     class="flex items-center justify-center p-8"
diff --git a/app/components/content/treatment-report/list.vue b/app/components/content/action-report/list.vue
similarity index 92%
rename from app/components/content/treatment-report/list.vue
rename to app/components/content/action-report/list.vue
index e824d396..13e2825b 100644
--- a/app/components/content/treatment-report/list.vue
+++ b/app/components/content/action-report/list.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 // Components
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
-import AppTreatmentReportList from '~/components/app/treatment-report/list.vue'
-import AppTreatmentReportListHistory from '~/components/app/treatment-report/list-history.vue'
+import AppActionReportList from '~/components/app/action-report/list.vue'
+import AppActionReportListHistory from '~/components/app/action-report/list-history.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import { ButtonAction } from '~/components/pub/my-ui/form'
 
 // config
-import { config } from '~/components/app/treatment-report/list.cfg'
+import { config } from '~/components/app/action-report/list.cfg'
 
 // types
 import { ActionEvents } from '~/components/pub/my-ui/data/types'
 import type { Encounter } from '~/models/encounter'
 
 // Samples
-import { sampleRows, type TreatmentReportData } from '~/components/app/treatment-report/sample'
+import { sampleRows, type ActionReportData } from '~/components/app/action-report/sample'
 import sampleReport from './sample'
 
 // helpers
@@ -63,7 +63,7 @@ import {
 // filter + pencarian sederhana (client-side)
 const filtered = computed(() => {
   const q = search.value.trim().toLowerCase()
-  return sampleRows.filter((r: TreatmentReportData) => {
+  return sampleRows.filter((r: ActionReportData) => {
     if (q) {
       return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
     }
@@ -205,7 +205,7 @@ watch([recId, recAction], (newVal) => {
     </div>
 
     <div class="overflow-x-auto p-4">
-      <AppTreatmentReportList
+      <AppActionReportList
         :data="filtered"
         :pagination-meta="{
           recordCount: 2,
@@ -230,7 +230,7 @@ watch([recId, recAction], (newVal) => {
       }
     "
   >
-    <AppTreatmentReportListHistory
+    <AppActionReportListHistory
       :data="filtered"
       :pagination-meta="{
         recordCount: 2,
diff --git a/app/components/content/treatment-report/sample.ts b/app/components/content/action-report/sample.ts
similarity index 100%
rename from app/components/content/treatment-report/sample.ts
rename to app/components/content/action-report/sample.ts
diff --git a/app/components/content/treatment-report/view.vue b/app/components/content/action-report/view.vue
similarity index 74%
rename from app/components/content/treatment-report/view.vue
rename to app/components/content/action-report/view.vue
index 93c1c83f..97508a22 100644
--- a/app/components/content/treatment-report/view.vue
+++ b/app/components/content/action-report/view.vue
@@ -2,11 +2,11 @@
 import mockData from './sample'
 
 // types
-import { type TreatmentReportFormData } from '~/schemas/treatment-report.schema'
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
 import { type Encounter } from '~/models/encounter'
 
 // Components
-import AppTreatmentReportPreview from '~/components/app/treatment-report/preview.vue'
+import AppActionReportPreview from '~/components/app/action-report/preview.vue'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 
 // #region Props & Emits
@@ -25,7 +25,7 @@ const props = defineProps<{
 // #endregion
 
 // #region State & Computed
-const reportData = ref<TreatmentReportFormData | null>(null)
+const reportData = ref<ActionReportFormData | null>(null)
 
 const headerPrep: HeaderPrep = {
   title: 'Detail Laporan Tindakan',
@@ -36,7 +36,7 @@ const headerPrep: HeaderPrep = {
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  reportData.value = mockData as unknown as TreatmentReportFormData
+  reportData.value = mockData as unknown as ActionReportFormData
 })
 // #endregion
 
@@ -46,7 +46,7 @@ onMounted(async () => {
 // #region Utilities & event handlers
 function onEdit() {
   router.push({
-    name: 'treatment-report-id-edit',
+    name: 'action-report-id-edit',
     params: { id: 100 },
   })
 }
@@ -58,7 +58,7 @@ function onBack() {}
 </script>
 
 <template>
-  <AppTreatmentReportPreview
+  <AppActionReportPreview
     v-if="reportData"
     :data="reportData"
     @back="backToList"
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 9bdc4c3a..bbae92b6 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -29,7 +29,7 @@ import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
 import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 import Cprj from '~/components/content/cprj/entry.vue'
-import TreatmentReport from '~/components/content/treatment-report/entry.vue'
+import ActionReport from '~/components/content/action-report/entry.vue'
 import DocUploadList from '~/components/content/document-upload/list.vue'
 import GeneralConsentList from '~/components/content/general-consent/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
@@ -115,7 +115,7 @@ const protocolRows = [
     value: 'report',
     label: 'Laporan Tindakan',
     groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
-    component: TreatmentReport,
+    component: ActionReport,
     props: { encounter: data },
   },
   {
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 064a7fcd..cd9b0fa8 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -47,7 +47,7 @@ const DocUploadListAsync = defineAsyncComponent(() => import('~/components/conte
 const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
 const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/list.vue'))
 const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
-const TreatmentReportEntryAsync = defineAsyncComponent(() => import('~/components/content/treatment-report/entry.vue'))
+const ActionReportEntryAsync = defineAsyncComponent(() => import('~/components/content/action-report/entry.vue'))
 
 const defaultKeys: Record<string, any> = {
   status: {
@@ -247,12 +247,6 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  treatmentReport: {
-    id: 'treatment-report',
-    title: 'Laporan Tindakan',
-    classCode: ['ambulatory', 'emergency', 'inpatient'],
-    unit: 'all',
-  },
 }
 
 export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
@@ -413,15 +407,14 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.priceList['props'] = { encounter_id: id }
   }
 
-  if (currentKeys?.treatmentReport) {
-    currentKeys.treatmentReport['component'] = TreatmentReportEntryAsync
-    currentKeys.treatmentReport['props'] = {
+  if (currentKeys?.actionReport) {
+    currentKeys.actionReport['component'] = ActionReportEntryAsync
+    currentKeys.actionReport['props'] = {
       encounter: data?.encounter,
-      type: 'treatment-report',
-      label: currentKeys.treatmentReport['title'],
+      type: 'action-report',
+      label: currentKeys.actionReport['title'],
     }
   }
-
   return currentKeys
 }
 
diff --git a/app/schemas/treatment-report.schema.ts b/app/schemas/action-report.schema.ts
similarity index 96%
rename from app/schemas/treatment-report.schema.ts
rename to app/schemas/action-report.schema.ts
index 02b0076a..cd23eb28 100644
--- a/app/schemas/treatment-report.schema.ts
+++ b/app/schemas/action-report.schema.ts
@@ -105,7 +105,7 @@ const TissueNoteSchema = z.object({
     .optional(),
 })
 
-export const TreatmentReportSchema = z.object({
+export const ActionReportSchema = z.object({
   operatorTeam: OperatorTeamSchema,
   procedures: z.array(ProcedureSchema).min(1, { message: 'Silahkan pilih prosedur' }),
 
@@ -118,4 +118,4 @@ export const TreatmentReportSchema = z.object({
   tissueNotes: z.array(TissueNoteSchema).optional(),
 })
 
-export type TreatmentReportFormData = z.infer<typeof TreatmentReportSchema>
+export type ActionReportFormData = z.infer<typeof ActionReportSchema>

From 6d8b4e9a7864fed0582021e83c3f3467353e49d4 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Dec 2025 17:57:56 +0700
Subject: [PATCH 15/28] fix warning

submenu.vue:39 [Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with markRaw or using shallowRef instead of ref.
---
 app/components/content/encounter/process.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index bbae92b6..f27a11fd 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -52,7 +52,7 @@ const router = useRouter()
 const { user, userActiveRole, getActiveRole } = useUserStore()
 const activeRole = getActiveRole()
 const activePosition = ref(getServicePosition(activeRole))
-const menus = ref([] as any)
+const menus = shallowRef([] as any)
 const activeMenu = computed({
   get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
   set: (value: string) => {

From c0c80c7bff747be9f65a7f948957fbced5fef1fd Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Dec 2025 21:09:17 +0700
Subject: [PATCH 16/28] style(detail-row): adjust grid layout and spacing for
 better responsiveness

Update the grid template columns and gap spacing to improve mobile and desktop layouts. Hide colon separator on mobile views to reduce clutter.
---
 app/components/pub/my-ui/form/view/detail-row.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/pub/my-ui/form/view/detail-row.vue b/app/components/pub/my-ui/form/view/detail-row.vue
index 3803cf30..15b2ba67 100644
--- a/app/components/pub/my-ui/form/view/detail-row.vue
+++ b/app/components/pub/my-ui/form/view/detail-row.vue
@@ -9,14 +9,14 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
+  <div :class="cn(`flex flex-col gap-0.5 lg:grid lg:grid-cols-[180px_auto_minmax(0,1fr)] lg:gap-x-3 lg:gap-y-1`, props.class)">
     <!-- Label -->
     <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
       {{ label }}
     </span>
 
-    <!-- Colon -->
-    <span class="text-md tracking-wide text-muted-foreground">:</span>
+    <!-- Colon (hidden on mobile) -->
+    <span class="hidden text-md tracking-wide text-muted-foreground lg:block">:</span>
 
     <!-- Value -->
     <span class="text-md font-sans tracking-wide">

From ff22ce684824fb2ef20d21f51eecf1262efad18e Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 4 Dec 2025 14:36:04 +0700
Subject: [PATCH 17/28] feat: Add entry forms and schemas for item, item price,
 and encounter management.

---
 .env.example                                 |   1 +
 app/components/app/encounter/entry-form.vue  |   6 +-
 app/components/app/item-price/entry-form.vue | 164 +++++++++----
 app/components/app/item/entry-form.vue       | 230 ++++++++++++++-----
 app/components/content/encounter/process.vue |   6 +-
 app/schemas/item-price.schema.ts             |  12 +
 app/schemas/item.schema.ts                   |  15 ++
 7 files changed, 332 insertions(+), 102 deletions(-)
 create mode 100644 app/schemas/item-price.schema.ts
 create mode 100644 app/schemas/item.schema.ts

diff --git a/.env.example b/.env.example
index 884ee1fb..864bbbe6 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
 NUXT_MAIN_API_ORIGIN=
 NUXT_BPJS_API_ORIGIN=
+NUXT_API_VCLAIM_SWAGGER= # https://vclaim-api.multy.chat 
 NUXT_SYNC_API_ORIGIN=
 NUXT_API_ORIGIN=
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 9950a3dd..a331dc63 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -348,7 +348,7 @@ defineExpose({
               placeholder="Pilih Dokter"
               search-placeholder="Cari Dokter"
               empty-message="Dokter tidak ditemukan"
-              @update:model-value="(value) => emit('onSelectDoctor', value)"
+              @update:model-value="(value: any) => emit('onSelectDoctor', value)"
             />
           </DE.Field>
         </DE.Cell>
@@ -576,7 +576,7 @@ defineExpose({
             </span>
             <p v-if="sepFileReview">
               <a
-                class="mt-1 text-sm text-blue-500 capitalize"
+                class="mt-1 text-sm capitalize text-blue-500"
                 href="#"
                 @click="openFile(sepFileReview.filePath)"
               >
@@ -601,7 +601,7 @@ defineExpose({
             </span>
             <p v-if="sippFileReview">
               <a
-                class="mt-1 text-sm text-blue-500 capitalize"
+                class="mt-1 text-sm capitalize text-blue-500"
                 href="#"
                 @click="openFile(sippFileReview.filePath)"
               >
diff --git a/app/components/app/item-price/entry-form.vue b/app/components/app/item-price/entry-form.vue
index f2f55d76..b7b79cc6 100644
--- a/app/components/app/item-price/entry-form.vue
+++ b/app/components/app/item-price/entry-form.vue
@@ -1,50 +1,136 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { ItemPriceFormData } from '~/schemas/item-price.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ItemPriceFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    item_code: '',
+    price: 0,
+    insuranceCompany_code: '',
+  } as Partial<ItemPriceFormData>,
 })
 
-const items = [
-  { value: '1', label: 'item 1' },
-  { value: '2', label: 'item 2' },
-  { value: '3', label: 'item 3' },
-  { value: '4', label: 'item 4' },
-]
+const [item_code, item_codeAttrs] = defineField('item_code')
+const [price, priceAttrs] = defineField('price')
+const [insuranceCompany_code, insuranceCompany_codeAttrs] = defineField('insuranceCompany_code')
+
+if (props.values) {
+  if (props.values.item_code !== undefined) item_code.value = props.values.item_code
+  if (props.values.price !== undefined) price.value = props.values.price
+  if (props.values.insuranceCompany_code !== undefined) insuranceCompany_code.value = props.values.insuranceCompany_code
+}
+
+const resetForm = () => {
+  item_code.value = ''
+  price.value = 0
+  insuranceCompany_code.value = ''
+}
+
+function onSubmitForm() {
+  const formData: ItemPriceFormData = {
+    item_code: item_code.value || '',
+    price: Number(price.value) || 0,
+    insuranceCompany_code: insuranceCompany_code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup>
-            <Label>Items</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Perusahaan Insuransi</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Harga</Label>
-            <Field>
-              <Input v-model="data.price" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form
+    id="form-item-price"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Item</Label>
+        <Field :errMessage="errors.item_code">
+          <Input
+            id="item_code"
+            v-model="item_code"
+            v-bind="item_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga</Label>
+        <Field :errMessage="errors.price">
+          <Input
+            id="price"
+            type="number"
+            v-model="price"
+            v-bind="priceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Perusahaan Asuransi</Label>
+        <Field :errMessage="errors.insuranceCompany_code">
+          <Input
+            id="insuranceCompany_code"
+            v-model="insuranceCompany_code"
+            v-bind="insuranceCompany_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
     </div>
   </form>
 </template>
diff --git a/app/components/app/item/entry-form.vue b/app/components/app/item/entry-form.vue
index 7ddc930b..67f12f50 100644
--- a/app/components/app/item/entry-form.vue
+++ b/app/components/app/item/entry-form.vue
@@ -1,68 +1,184 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { ItemFormData } from '~/schemas/item.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ItemFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    itemGroup_code: '',
+    uom_code: '',
+    infra_code: '',
+    stock: 0,
+  } as Partial<ItemFormData>,
 })
 
-const items = [
-  { value: '1', label: 'item 1' },
-  { value: '2', label: 'item 2' },
-  { value: '3', label: 'item 3' },
-  { value: '4', label: 'item 4' },
-]
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [itemGroup_code, itemGroup_codeAttrs] = defineField('itemGroup_code')
+const [uom_code, uom_codeAttrs] = defineField('uom_code')
+const [infra_code, infra_codeAttrs] = defineField('infra_code')
+const [stock, stockAttrs] = defineField('stock')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.itemGroup_code !== undefined) itemGroup_code.value = props.values.itemGroup_code
+  if (props.values.uom_code !== undefined) uom_code.value = props.values.uom_code
+  if (props.values.infra_code !== undefined) infra_code.value = props.values.infra_code
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  itemGroup_code.value = ''
+  uom_code.value = ''
+  infra_code.value = ''
+  stock.value = 0
+}
+
+function onSubmitForm() {
+  const formData: ItemFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    itemGroup_code: itemGroup_code.value || '',
+    uom_code: uom_code.value || '',
+    infra_code: infra_code.value || '',
+    stock: Number(stock.value) || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup>
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Kode</Label>
-            <Field>
-              <Input v-model="data.code" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Item Group</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>UOM</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Infra</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Harga</Label>
-            <Field>
-              <Input v-model="data.price" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form
+    id="form-item"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Item Group</Label>
+        <Field :errMessage="errors.itemGroup_code">
+          <Input
+            id="itemGroup_code"
+            v-model="itemGroup_code"
+            v-bind="itemGroup_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">UOM</Label>
+        <Field :errMessage="errors.uom_code">
+          <Input
+            id="uom_code"
+            v-model="uom_code"
+            v-bind="uom_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Infra</Label>
+        <Field :errMessage="errors.infra_code">
+          <Input
+            id="infra_code"
+            v-model="infra_code"
+            v-bind="infra_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input
+            id="stock"
+            type="number"
+            v-model="stock"
+            v-bind="stockAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
     </div>
   </form>
 </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index b298c92f..c5e0a5e4 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -107,8 +107,8 @@ const protocolRows = [
   { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
   { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
   { value: 'device', label: 'Order Alkes' },
-  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
-  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
+  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.id } },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
   { value: 'mcu-lab-pa', label: 'Order Lab PA' },
   { value: 'medical-action', label: 'Order Ruang Tindakan' },
@@ -214,4 +214,4 @@ async function getData() {
       @change-menu="activeMenu = $event"
     />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/schemas/item-price.schema.ts b/app/schemas/item-price.schema.ts
new file mode 100644
index 00000000..a9408a9c
--- /dev/null
+++ b/app/schemas/item-price.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+
+const ItemPriceSchema = z.object({
+  item_code: z.string({ required_error: 'Item harus diisi' }).min(1, 'Item harus diisi'),
+  price: z.number({ required_error: 'Harga harus diisi' }).min(0, 'Harga tidak boleh kurang dari 0'),
+  insuranceCompany_code: z.string({ required_error: 'Perusahaan Asuransi harus diisi' }).min(1, 'Perusahaan Asuransi harus diisi'),
+})
+
+type ItemPriceFormData = z.infer<typeof ItemPriceSchema>
+
+export { ItemPriceSchema }
+export type { ItemPriceFormData }
diff --git a/app/schemas/item.schema.ts b/app/schemas/item.schema.ts
new file mode 100644
index 00000000..11b597e0
--- /dev/null
+++ b/app/schemas/item.schema.ts
@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+const ItemSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  itemGroup_code: z.string({ required_error: 'Item Group harus diisi' }).min(1, 'Item Group harus diisi'),
+  uom_code: z.string({ required_error: 'UOM harus diisi' }).min(1, 'UOM harus diisi'),
+  infra_code: z.string({ required_error: 'Infra harus diisi' }).min(1, 'Infra harus diisi'),
+  stock: z.number({ required_error: 'Stok harus diisi' }).min(0, 'Stok tidak boleh kurang dari 0'),
+})
+
+type ItemFormData = z.infer<typeof ItemSchema>
+
+export { ItemSchema }
+export type { ItemFormData }

From 413a3c2b2952780ffe8c3aadf93096e2e6aa934b Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 4 Dec 2025 14:40:59 +0700
Subject: [PATCH 18/28] feat: Add item and item price list components with
 their respective configurations.

---
 app/components/app/item-price/list-cfg.ts     | 24 +++++--------
 app/components/app/item-price/list.vue        | 35 ++++++++++++++++---
 app/components/app/item-price/picker.vue      |  0
 app/components/app/item-price/search.vue      |  0
 .../app/item-price/status-badge.vue           | 29 ---------------
 app/components/app/item/list-cfg.ts           | 19 ++++------
 app/components/app/item/list.vue              | 35 ++++++++++++++++---
 app/components/app/item/picker.vue            |  0
 app/components/app/item/search.vue            |  0
 app/components/app/item/status-badge.vue      | 29 ---------------
 10 files changed, 75 insertions(+), 96 deletions(-)
 delete mode 100644 app/components/app/item-price/picker.vue
 delete mode 100644 app/components/app/item-price/search.vue
 delete mode 100644 app/components/app/item-price/status-badge.vue
 delete mode 100644 app/components/app/item/picker.vue
 delete mode 100644 app/components/app/item/search.vue
 delete mode 100644 app/components/app/item/status-badge.vue

diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
index c3db4f50..f1ebbd13 100644
--- a/app/components/app/item-price/list-cfg.ts
+++ b/app/components/app/item-price/list-cfg.ts
@@ -3,27 +3,23 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, {}, {}, { width: 50 }],
 
   headers: [
     [
-      { label: 'Kode' },
-      { label: 'Nama' },
+      { label: 'Item' },
+      { label: 'Harga' },
+      { label: 'Perusahaan Asuransi' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['item_code', 'price', 'insuranceCompany_code', 'action'],
 
   delKeyNames: [
-    { key: 'code', label: 'Kode' },
-    { key: 'name', label: 'Nama' },
+    { key: 'item_code', label: 'Item' },
+    { key: 'insuranceCompany_code', label: 'Perusahaan Asuransi' },
   ],
 
   parses: {},
@@ -39,9 +35,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }
diff --git a/app/components/app/item-price/list.vue b/app/components/app/item-price/list.vue
index 96697bde..2f7908cb 100644
--- a/app/components/app/item-price/list.vue
+++ b/app/components/app/item-price/list.vue
@@ -1,14 +1,39 @@
 <script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { config } from './list-cfg'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
 </template>
diff --git a/app/components/app/item-price/picker.vue b/app/components/app/item-price/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item-price/search.vue b/app/components/app/item-price/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item-price/status-badge.vue b/app/components/app/item-price/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/item-price/status-badge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
index c3db4f50..d781dc79 100644
--- a/app/components/app/item/list-cfg.ts
+++ b/app/components/app/item/list-cfg.ts
@@ -3,23 +3,22 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
 
   headers: [
     [
       { label: 'Kode' },
       { label: 'Nama' },
+      { label: 'Item Group' },
+      { label: 'UOM' },
+      { label: 'Infra' },
+      { label: 'Stok' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['code', 'name', 'itemGroup_code', 'uom_code', 'infra_code', 'stock', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -39,9 +38,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }
diff --git a/app/components/app/item/list.vue b/app/components/app/item/list.vue
index 96697bde..2f7908cb 100644
--- a/app/components/app/item/list.vue
+++ b/app/components/app/item/list.vue
@@ -1,14 +1,39 @@
 <script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { config } from './list-cfg'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
 </template>
diff --git a/app/components/app/item/picker.vue b/app/components/app/item/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item/search.vue b/app/components/app/item/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item/status-badge.vue b/app/components/app/item/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/item/status-badge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>

From 864979aa1519c7f8e67acea794f834b43ffecf51 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 4 Dec 2025 14:57:36 +0700
Subject: [PATCH 19/28] feat: Implement item price CRUD service and handlers,
 and item CRUD handlers.

---
 app/handlers/item-price.handler.ts | 24 ++++++++++++++++++++++++
 app/handlers/item.handler.ts       | 24 ++++++++++++++++++++++++
 app/services/item-price.service.ts | 25 +++++++++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 app/handlers/item-price.handler.ts
 create mode 100644 app/handlers/item.handler.ts
 create mode 100644 app/services/item-price.service.ts

diff --git a/app/handlers/item-price.handler.ts b/app/handlers/item-price.handler.ts
new file mode 100644
index 00000000..bd7dbefe
--- /dev/null
+++ b/app/handlers/item-price.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/item-price.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/item.handler.ts b/app/handlers/item.handler.ts
new file mode 100644
index 00000000..3911df83
--- /dev/null
+++ b/app/handlers/item.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/services/item-price.service.ts b/app/services/item-price.service.ts
new file mode 100644
index 00000000..764bded1
--- /dev/null
+++ b/app/services/item-price.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/item-price'
+const name = 'item-price'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}

From 615a7c448538e1fb1c9f3de5c10594dbb7274717 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 5 Dec 2025 13:54:53 +0700
Subject: [PATCH 20/28] feat: Implement item management with CRUD operations,
 forms, and listing pages.

---
 app/components/app/item/entry-form.vue     |  27 ++-
 app/components/app/item/list-cfg.ts        |  19 +-
 app/components/content/item-price/list.vue | 220 ++++++++++++++-----
 app/components/content/item/list.vue       | 232 ++++++++++++++++-----
 app/pages/(features)/item-price/index.vue  |  29 +++
 app/pages/(features)/item/index.vue        |  29 +++
 app/schemas/item.schema.ts                 |   4 +-
 app/services/item-group.service.ts         |  41 ++++
 app/services/item.service.ts               |   7 +-
 9 files changed, 499 insertions(+), 109 deletions(-)
 create mode 100644 app/pages/(features)/item-price/index.vue
 create mode 100644 app/pages/(features)/item/index.vue
 create mode 100644 app/services/item-group.service.ts

diff --git a/app/components/app/item/entry-form.vue b/app/components/app/item/entry-form.vue
index 67f12f50..5e2ab11a 100644
--- a/app/components/app/item/entry-form.vue
+++ b/app/components/app/item/entry-form.vue
@@ -16,12 +16,15 @@ import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
+  itemGroups: any[]
+  uoms: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
 }
 
 const props = defineProps<Props>()
+const isShowInfra = false;
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const emit = defineEmits<{
@@ -44,7 +47,7 @@ const { defineField, errors, meta } = useForm({
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [itemGroup_code, itemGroup_codeAttrs] = defineField('itemGroup_code')
-const [uom_code, uom_codeAttrs] = defineField('uom_code')
+const [uom, uomAttrs] = defineField('uom_code')
 const [infra_code, infra_codeAttrs] = defineField('infra_code')
 const [stock, stockAttrs] = defineField('stock')
 
@@ -52,7 +55,7 @@ if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.itemGroup_code !== undefined) itemGroup_code.value = props.values.itemGroup_code
-  if (props.values.uom_code !== undefined) uom_code.value = props.values.uom_code
+  if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
   if (props.values.infra_code !== undefined) infra_code.value = props.values.infra_code
   if (props.values.stock !== undefined) stock.value = props.values.stock
 }
@@ -61,7 +64,7 @@ const resetForm = () => {
   code.value = ''
   name.value = ''
   itemGroup_code.value = ''
-  uom_code.value = ''
+  uom.value = ''
   infra_code.value = ''
   stock.value = 0
 }
@@ -71,7 +74,7 @@ function onSubmitForm() {
     code: code.value || '',
     name: name.value || '',
     itemGroup_code: itemGroup_code.value || '',
-    uom_code: uom_code.value || '',
+    uom_code: uom.value || '',
     infra_code: infra_code.value || '',
     stock: Number(stock.value) || 0,
   }
@@ -118,10 +121,13 @@ function onCancelForm() {
       <Cell>
         <Label height="compact">Item Group</Label>
         <Field :errMessage="errors.itemGroup_code">
-          <Input
+          <Select
             id="itemGroup_code"
             v-model="itemGroup_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih Item Group"
             v-bind="itemGroup_codeAttrs"
+            :items="itemGroups"
             :disabled="isLoading || isReadonly"
           />
         </Field>
@@ -129,15 +135,18 @@ function onCancelForm() {
       <Cell>
         <Label height="compact">UOM</Label>
         <Field :errMessage="errors.uom_code">
-          <Input
+          <Select
             id="uom_code"
-            v-model="uom_code"
-            v-bind="uom_codeAttrs"
+            v-model="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="uoms"
             :disabled="isLoading || isReadonly"
           />
         </Field>
       </Cell>
-      <Cell>
+      <Cell v-if="isShowInfra">
         <Label height="compact">Infra</Label>
         <Field :errMessage="errors.infra_code">
           <Input
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
index d781dc79..5446f93d 100644
--- a/app/components/app/item/list-cfg.ts
+++ b/app/components/app/item/list-cfg.ts
@@ -25,7 +25,24 @@ export const config: Config = {
     { key: 'name', label: 'Nama' },
   ],
 
-  parses: {},
+  parses: {
+    itemGroup_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.itemGroup_code || '-'
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.uom?.name || '-'
+    },
+    infra_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.infra_code || '-'
+    },
+    stock: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.stock || '-'
+    },
+  },
 
   components: {
     action(rec, idx) {
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
index aa277b71..1e4de55f 100644
--- a/app/components/content/item-price/list.vue
+++ b/app/components/content/item-price/list.vue
@@ -1,70 +1,194 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import Modal from '~/components/pub/my-ui/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppItemList from '~/components/app/item-price/list.vue'
+import AppItemEntryForm from '~/components/app/item-price/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ItemPriceSchema, type ItemPriceFormData } from '~/schemas/item-price.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/item-price.handler'
+
+// Services
+import { getList, getDetail } from '~/services/item-price.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      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: 'item-price',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Golongan Obat',
-  icon: 'i-lucide-users',
+const headerPrep: HeaderPrep = {
+  title: 'Harga Item',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-group')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  const currentId = recId.value
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(currentId)
+      title.value = 'Detail Harga Item'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(currentId)
+      title.value = 'Edit Harga Item'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
 
-  <AppMedicineGroupList :data="data" />
+  <AppItemList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
-    <AppMedicineGroupEntryForm v-model="entry" />
-  </Modal>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Harga Item'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppItemEntryForm
+      :schema="ItemPriceSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ItemPriceFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, 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>
diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
index 15887985..c17ef3dd 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -1,70 +1,208 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import Modal from '~/components/pub/my-ui/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppItemList from '~/components/app/item/list.vue'
+import AppItemEntryForm from '~/components/app/item/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ItemSchema, type ItemFormData } from '~/schemas/item.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/item.handler'
+
+// Constants
+import { itemGroupCodes } from '~/lib/constants'
+
+// Services
+import { getList, getDetail } from '~/services/item.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const itemGroups = ref<{ value: string | number; label: string }[]>([])
+const uoms = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'uom',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'item',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'Item',
-  icon: 'i-lucide-users',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-group')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  const currentId = recItem.value?.code ? recItem.value.code : recId.value
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(currentId)
+      title.value = 'Detail Item'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(currentId)
+      title.value = 'Edit Item'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  itemGroups.value = Object.keys(itemGroupCodes).map((key) => ({
+    value: key,
+    label: itemGroupCodes[key],
+  })) as any
+  uoms.value = await getUomList()
+  await getItemList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
 
-  <AppItemList :data="data" />
+  <AppItemList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
-    <AppItemEntryForm v-model="entry" />
-  </Modal>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Item'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppItemEntryForm
+      :schema="ItemSchema"
+      :values="recItem"
+      :item-groups="itemGroups"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ItemFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recItem?.code ? recItem.code : recId, getItemList, 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>
diff --git a/app/pages/(features)/item-price/index.vue b/app/pages/(features)/item-price/index.vue
new file mode 100644
index 00000000..b97966e5
--- /dev/null
+++ b/app/pages/(features)/item-price/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/item-price/list.vue'
+
+const route = useRoute()
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
+  title: 'Daftar Item Harga',
+  contentFrame: 'cf-container-lg',
+})
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <Content />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/item/index.vue b/app/pages/(features)/item/index.vue
new file mode 100644
index 00000000..33fc9b23
--- /dev/null
+++ b/app/pages/(features)/item/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/item/list.vue'
+
+const route = useRoute()
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
+  title: 'Daftar Item',
+  contentFrame: 'cf-container-lg',
+})
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <Content />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/schemas/item.schema.ts b/app/schemas/item.schema.ts
index 11b597e0..9e74ad70 100644
--- a/app/schemas/item.schema.ts
+++ b/app/schemas/item.schema.ts
@@ -5,8 +5,8 @@ const ItemSchema = z.object({
   name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
   itemGroup_code: z.string({ required_error: 'Item Group harus diisi' }).min(1, 'Item Group harus diisi'),
   uom_code: z.string({ required_error: 'UOM harus diisi' }).min(1, 'UOM harus diisi'),
-  infra_code: z.string({ required_error: 'Infra harus diisi' }).min(1, 'Infra harus diisi'),
-  stock: z.number({ required_error: 'Stok harus diisi' }).min(0, 'Stok tidak boleh kurang dari 0'),
+  infra_code: z.string({ required_error: 'Infra harus diisi' }).optional(),
+  stock: z.number({ required_error: 'Stok harus diisi' }).min(0, 'Stok tidak boleh kurang dari 0').optional(),
 })
 
 type ItemFormData = z.infer<typeof ItemSchema>
diff --git a/app/services/item-group.service.ts b/app/services/item-group.service.ts
new file mode 100644
index 00000000..c7c2d82b
--- /dev/null
+++ b/app/services/item-group.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/item-group'
+const name = 'item-group'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: any) => ({
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/item.service.ts b/app/services/item.service.ts
index 8b44acd8..7d135201 100644
--- a/app/services/item.service.ts
+++ b/app/services/item.service.ts
@@ -24,13 +24,16 @@ export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
 
-export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
   let data: { value: string; label: string }[] = []
   const result = await getList(params)
   if (result.success) {
     const resultData = result.body?.data || []
     data = resultData.map((item: any) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
       label: item.name,
     }))
   }

From 4715e5330a739922fe5e8ab76ac6e2cacdc9c6db Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 5 Dec 2025 14:53:31 +0700
Subject: [PATCH 21/28] feat: Implement item management module and add
 encounter initialization handler.

---
 app/components/app/item/entry-form.vue |  34 ++++++++
 app/components/app/item/list-cfg.ts    |  38 +++++++-
 app/components/content/item/list.vue   |   7 +-
 app/handlers/encounter-init.handler.ts | 115 ++++++++++++++++---------
 app/schemas/item.schema.ts             |   2 +
 5 files changed, 149 insertions(+), 47 deletions(-)

diff --git a/app/components/app/item/entry-form.vue b/app/components/app/item/entry-form.vue
index 5e2ab11a..e40f1f66 100644
--- a/app/components/app/item/entry-form.vue
+++ b/app/components/app/item/entry-form.vue
@@ -41,6 +41,8 @@ const { defineField, errors, meta } = useForm({
     uom_code: '',
     infra_code: '',
     stock: 0,
+    buyingPrice: 0,
+    sellingPrice: 0,
   } as Partial<ItemFormData>,
 })
 
@@ -50,6 +52,8 @@ const [itemGroup_code, itemGroup_codeAttrs] = defineField('itemGroup_code')
 const [uom, uomAttrs] = defineField('uom_code')
 const [infra_code, infra_codeAttrs] = defineField('infra_code')
 const [stock, stockAttrs] = defineField('stock')
+const [buyingPrice, buyingPriceAttrs] = defineField('buyingPrice')
+const [sellingPrice, sellingPriceAttrs] = defineField('sellingPrice')
 
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
@@ -58,6 +62,8 @@ if (props.values) {
   if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
   if (props.values.infra_code !== undefined) infra_code.value = props.values.infra_code
   if (props.values.stock !== undefined) stock.value = props.values.stock
+  if (props.values.buyingPrice !== undefined) buyingPrice.value = props.values.buyingPrice
+  if (props.values.sellingPrice !== undefined) sellingPrice.value = props.values.sellingPrice
 }
 
 const resetForm = () => {
@@ -67,6 +73,8 @@ const resetForm = () => {
   uom.value = ''
   infra_code.value = ''
   stock.value = 0
+  buyingPrice.value = 0
+  sellingPrice.value = 0
 }
 
 function onSubmitForm() {
@@ -77,6 +85,8 @@ function onSubmitForm() {
     uom_code: uom.value || '',
     infra_code: infra_code.value || '',
     stock: Number(stock.value) || 0,
+    buyingPrice: Number(buyingPrice.value) || 0,
+    sellingPrice: Number(sellingPrice.value) || 0,
   }
   emit('submit', formData, resetForm)
 }
@@ -169,6 +179,30 @@ function onCancelForm() {
           />
         </Field>
       </Cell>
+      <Cell>
+        <Label height="compact">Harga Beli</Label>
+        <Field :errMessage="errors.buyingPrice">
+          <Input
+            id="buyingPrice"
+            type="number"
+            v-model="buyingPrice"
+            v-bind="buyingPriceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga Jual</Label>
+        <Field :errMessage="errors.sellingPrice">
+          <Input
+            id="sellingPrice"
+            type="number"
+            v-model="sellingPrice"
+            v-bind="sellingPriceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
       <Button
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
index 5446f93d..fc3e6770 100644
--- a/app/components/app/item/list-cfg.ts
+++ b/app/components/app/item/list-cfg.ts
@@ -4,7 +4,17 @@ import { defineAsyncComponent } from 'vue'
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
-  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
   headers: [
     [
@@ -14,11 +24,13 @@ export const config: Config = {
       { label: 'UOM' },
       { label: 'Infra' },
       { label: 'Stok' },
+      { label: 'Harga Beli' },
+      { label: 'Harga Jual' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'itemGroup_code', 'uom_code', 'infra_code', 'stock', 'action'],
+  keys: ['code', 'name', 'itemGroup_code', 'uom_code', 'infra_code', 'stock', 'buyingPrice', 'sellingPrice', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -40,7 +52,27 @@ export const config: Config = {
     },
     stock: (rec: unknown): unknown => {
       const recX = rec as any
-      return recX.stock || '-'
+      const value = recX.stock
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+    buyingPrice: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.buyingPrice
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+    sellingPrice: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.sellingPrice
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
     },
   },
 
diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
index c17ef3dd..90db92e2 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -7,7 +7,7 @@ import AppItemEntryForm from '~/components/app/item/entry-form.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
 // Constants
-import { infraGroupCodesKeys } from '~/lib/constants'
+import { itemGroupCodes } from '~/lib/constants'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -33,9 +33,6 @@ import {
   handleCancelForm,
 } from '~/handlers/item.handler'
 
-// Constants
-import { itemGroupCodes } from '~/lib/constants'
-
 // Services
 import { getList, getDetail } from '~/services/item.service'
 import { getValueLabelList as getUomList } from '~/services/uom.service'
@@ -171,7 +168,7 @@ onMounted(async () => {
       @submit="
         (values: ItemFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            handleActionEdit(recItem?.code ? recItem.code : recId, values, getItemList, resetForm, toast)
             return
           }
           handleActionSave(values, getItemList, resetForm, toast)
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index b015b357..d7d9e02b 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -56,211 +56,248 @@ const VaccineDataListAsync = defineAsyncComponent(() => import('~/components/con
 const InitialNursingStudyAsync = defineAsyncComponent(() => import('~/components/content/initial-nursing/entry.vue'))
 
 const defaultKeys: Record<string, any> = {
+  status: 'status',
+  earlyNurseryAssessment: 'early-nursery-assessment',
+  earlyMedicalAssessment: 'early-medical-assessment',
+  earlyMedicalRehabAssessment: 'early-medical-rehab-assessment',
+  functionAssessment: 'function-assessment',
+  therapyProtocol: 'therapy-protocol',
+  chemotherapyProtocol: 'chemotherapy-protocol',
+  chemotherapyMedicine: 'chemotherapy-medicine',
+  educationAssessment: 'education-assessment',
+  generalConsent: 'general-consent',
+  patientAmbNote: 'patient-amb-note',
+  patientDevNote: 'patient-dev-note',
+  prescription: 'prescription',
+  deviceOrder: 'device-order',
+  radiologyOrder: 'radiology-order',
+  cpLabOrder: 'cp-lab-order',
+  microLabOrder: 'micro-lab-order',
+  paLabOrder: 'pa-lab-order',
+  procedureRoomOrder: 'procedure-room-order',
+  mcuResult: 'mcu-result',
+  actionReport: 'action-report',
+  surgeryReport: 'surgery-report',
+  vaccineData: 'vaccine-data',
+  consultation: 'consultation',
+  controlLetter: 'control-letter',
+  inpatientLetter: 'inpatient-letter',
+  kfr: 'kfr',
+  refBack: 'reference-back',
+  screening: 'screening',
+  supportingDocument: 'supporting-document',
+  resume: 'resume',
+  ambResume: 'amb-resume',
+  priceList: 'price-list',
+  initialNursingStudy: 'initial-nursing-study',
+}
+
+const defaultMenus: Record<string, any> = {
   status: {
-    id: 'status',
+    id: defaultKeys.status,
     title: 'Status Masuk/Keluar',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   earlyNurseryAssessment: {
-    id: 'early-nursery-assessment',
+    id: defaultKeys.earlyNurseryAssessment,
     title: 'Pengkajian Awal Keperawatan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   earlyMedicalAssessment: {
-    id: 'early-medical-assessment',
+    id: defaultKeys.earlyMedicalAssessment,
     title: 'Pengkajian Awal Medis',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   earlyMedicalRehabAssessment: {
-    id: 'rehab-medical-assessment',
+    id: defaultKeys.earlyMedicalRehabAssessment,
     title: 'Pengkajian Awal Medis Rehabilitasi Medis',
     classCode: ['ambulatory'],
     unit: 'rehab',
-    afterId: 'early-medical-assessment',
+    afterId: defaultKeys.earlyMedicalAssessment,
   },
   functionAssessment: {
-    id: 'function-assessment',
+    id: defaultKeys.functionAssessment,
     title: 'Asesmen Fungsi',
     classCode: ['ambulatory'],
     unit: 'rehab',
-    afterId: 'rehab-medical-assessment',
+    afterId: defaultKeys.rehabMedicalAssessment,
   },
   therapyProtocol: {
-    id: 'therapy-protocol',
+    id: defaultKeys.therapyProtocol,
     classCode: ['ambulatory'],
     title: 'Protokol Terapi',
     unit: 'rehab',
-    afterId: 'function-assessment',
+    afterId: defaultKeys.functionAssessment,
   },
   chemotherapyProtocol: {
-    id: 'chemotherapy-protocol',
+    id: defaultKeys.chemotherapyProtocol,
     title: 'Protokol Kemoterapi',
     classCode: ['ambulatory'],
     unit: 'chemo',
-    afterId: 'early-medical-assessment',
+    afterId: defaultKeys.earlyMedicalAssessment,
   },
   chemotherapyMedicine: {
     id: 'chemotherapy-medicine',
     title: 'Protokol Obat Kemoterapi',
     classCode: ['ambulatory'],
     unit: 'chemo',
-    afterId: 'chemotherapy-protocol',
+    afterId: defaultKeys.chemotherapyProtocol,
   },
   educationAssessment: {
-    id: 'education-assessment',
+    id: defaultKeys.educationAssessment,
     title: 'Asesmen Kebutuhan Edukasi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   generalConsent: {
-    id: 'general-consent',
+    id: defaultKeys.generalConsent,
     title: 'General Consent',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   patientAmbNote: {
-    id: 'patient-amb-note',
+    id: defaultKeys.patientAmbNote,
     title: 'CPRJ',
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
   },
   patientDevNote: {
-    id: 'patient-dev-note',
+    id: defaultKeys.patientDevNote,
     title: 'CPP',
     classCode: ['inpatient'],
     unit: 'all',
   },
   prescription: {
-    id: 'prescription',
+    id: defaultKeys.prescription,
     title: 'Order Obat',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   deviceOrder: {
-    id: 'device-order',
+    id: defaultKeys.deviceOrder,
     title: 'Order Alkes',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   radiologyOrder: {
-    id: 'radiology-order',
+    id: defaultKeys.radiologyOrder,
     title: 'Order Radiologi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   cpLabOrder: {
-    id: 'cp-lab-order',
+    id: defaultKeys.cpLabOrder,
     title: 'Order Lab PK',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   microLabOrder: {
-    id: 'micro-lab-order',
+    id: defaultKeys.microLabOrder,
     title: 'Order Lab Mikro',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   paLabOrder: {
-    id: 'pa-lab-order',
+    id: defaultKeys.paLabOrder,
     title: 'Order Lab PA',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   procedureRoomOrder: {
-    id: 'procedure-room-order',
+    id: defaultKeys.procedureRoomOrder,
     title: 'Order Ruang Tindakan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   mcuResult: {
-    id: 'mcu-result',
+    id: defaultKeys.mcuResult,
     title: 'Hasil Penunjang',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   actionReport: {
-    id: 'action-report',
+    id: defaultKeys.actionReport,
     title: 'Laporan Tindakan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   surgeryReport: {
-    id: 'surgery-report',
+    id: defaultKeys.surgeryReport,
     title: 'Laporan Operasi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   vaccineData: {
-    id: 'vaccine-data',
+    id: defaultKeys.vaccineData,
     title: 'Data Vaksin',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   consultation: {
-    id: 'consultation',
+    id: defaultKeys.consultation,
     title: 'Konsultasi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   controlLetter: {
-    id: 'control-letter',
+    id: defaultKeys.controlLetter,
     title: 'Surat Kontrol',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   inpatientLetter: {
-    id: 'inpatient-letter',
+    id: defaultKeys.inpatientLetter,
     title: 'SPRI',
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
   },  
   kfr: {
-    id: 'kfr',
+    id: defaultKeys.kfr,
     title: 'KFR',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },  
   refBack: {
-    id: 'reference-back',
+    id: defaultKeys.refBack,
     title: 'PRB',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   screening: {
-    id: 'screening',
+    id: defaultKeys.screening,
     title: 'Skrinning MPP',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   supportingDocument: {
-    id: 'supporting-document',
+    id: defaultKeys.supportingDocument,
     title: 'Upload Dokumen Pendukung',
     classCode: ['ambulatory'],
     unit: 'all',
   },
   resume: {
-    id: 'resume',
+    id: defaultKeys.resume,
     title: 'Resume',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   ambResume: {
-    id: 'amb-resume',
+    id: defaultKeys.ambResume,
     title: 'Resume Medis Rawat Jalan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   priceList: {
-    id: 'price-list',
+    id: defaultKeys.priceList,
     title: 'Tarif Tindakan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   initialNursingStudy: {
-    id: 'initial-nursing-study',
+    id: defaultKeys.initialNursingStudy,
     title: 'Kajian Awal Keperawatan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -298,7 +335,7 @@ export function insertItemByAfterId(id: string, items: EncounterItem[], newItem:
 }
 
 export function injectComponents(id: string | number, data: EncounterListData, meta: EncounterListData) {
-  const currentKeys = { ...defaultKeys }
+  const currentKeys = { ...defaultMenus }
   if (currentKeys?.status) {
     currentKeys.status['component'] = StatusAsync
     currentKeys.status['props'] = { encounter: data?.encounter }
diff --git a/app/schemas/item.schema.ts b/app/schemas/item.schema.ts
index 9e74ad70..1d69a4b8 100644
--- a/app/schemas/item.schema.ts
+++ b/app/schemas/item.schema.ts
@@ -7,6 +7,8 @@ const ItemSchema = z.object({
   uom_code: z.string({ required_error: 'UOM harus diisi' }).min(1, 'UOM harus diisi'),
   infra_code: z.string({ required_error: 'Infra harus diisi' }).optional(),
   stock: z.number({ required_error: 'Stok harus diisi' }).min(0, 'Stok tidak boleh kurang dari 0').optional(),
+  buyingPrice: z.number({ required_error: 'Harga Beli harus diisi' }).min(0, 'Harga Beli tidak boleh kurang dari 0').optional(),
+  sellingPrice: z.number({ required_error: 'Harga Jual harus diisi' }).min(0, 'Harga Jual tidak boleh kurang dari 0').optional(),
 })
 
 type ItemFormData = z.infer<typeof ItemSchema>

From f4079c58fa91d936a55cf1d4824de128237e342d Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 5 Dec 2025 15:03:52 +0700
Subject: [PATCH 22/28] fix: item update form

---
 app/components/content/item/list.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
index 90db92e2..727d5200 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -168,7 +168,10 @@ onMounted(async () => {
       @submit="
         (values: ItemFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recItem?.code ? recItem.code : recId, values, getItemList, resetForm, toast)
+            handleActionEdit(recItem?.code ? recItem.code : recId, values, () => {
+              getItemList()
+              onResetState()
+            }, resetForm, toast)
             return
           }
           handleActionSave(values, getItemList, resetForm, toast)

From db10a8b1941ed3a2a82733f8f6b8cb22f469f248 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 5 Dec 2025 16:42:28 +0700
Subject: [PATCH 23/28] fix: select for item price

---
 app/components/app/item-price/entry-form.vue | 6 +++++-
 app/components/content/item-price/list.vue   | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/app/item-price/entry-form.vue b/app/components/app/item-price/entry-form.vue
index b7b79cc6..5f0fafdb 100644
--- a/app/components/app/item-price/entry-form.vue
+++ b/app/components/app/item-price/entry-form.vue
@@ -16,6 +16,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
+  items: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -81,10 +82,13 @@ function onCancelForm() {
       <Cell>
         <Label height="compact">Item</Label>
         <Field :errMessage="errors.item_code">
-          <Input
+          <Select
             id="item_code"
             v-model="item_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih Item"
             v-bind="item_codeAttrs"
+            :items="items"
             :disabled="isLoading || isReadonly"
           />
         </Field>
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
index 1e4de55f..e71e4cf2 100644
--- a/app/components/content/item-price/list.vue
+++ b/app/components/content/item-price/list.vue
@@ -35,7 +35,9 @@ import {
 
 // Services
 import { getList, getDetail } from '~/services/item-price.service'
+import { getValueLabelList as getItemGroupList } from '~/services/item.service'
 
+const items = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -119,6 +121,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
+  items.value = await getItemGroupList()
   await getItemList()
 })
 </script>
@@ -151,6 +154,7 @@ onMounted(async () => {
   >
     <AppItemEntryForm
       :schema="ItemPriceSchema"
+      :items="items"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"

From 41062a580564aa5fc6dc1899c8c0b3c1d6cea1e1 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 5 Dec 2025 18:00:05 +0700
Subject: [PATCH 24/28] wip: encounter edit

---
 .../app/encounter/entry-form copy.vue         | 699 ++++++++++++++++++
 app/components/app/encounter/entry-form.vue   |  15 +-
 app/components/content/encounter/entry.vue    |   3 +
 app/lib/page-checker.ts                       |  17 +-
 4 files changed, 720 insertions(+), 14 deletions(-)
 create mode 100644 app/components/app/encounter/entry-form copy.vue

diff --git a/app/components/app/encounter/entry-form copy.vue b/app/components/app/encounter/entry-form copy.vue
new file mode 100644
index 00000000..fdb9a43c
--- /dev/null
+++ b/app/components/app/encounter/entry-form copy.vue	
@@ -0,0 +1,699 @@
+<script setup lang="ts">
+// Components
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import * as CB from '~/components/pub/my-ui/combobox'
+
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
+
+// Types
+import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
+import type { PatientEntity } from '~/models/patient'
+
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
+import type { Doctor } from '~/models/doctor'
+
+// References
+import { paymentMethodCodes } from '~/const/key-val/common'
+
+// App things
+import { genEncounter, type Encounter } from '~/models/encounter'
+
+// Props
+const props = defineProps<{
+  mode?: string
+  isLoading?: boolean
+  isReadonly?: boolean
+  isSepValid?: boolean
+  isMemberValid?: boolean
+  isCheckingSep?: boolean
+  doctorItems?: CB.Item[]
+  selectedDoctor: Doctor
+  // subSpecialist?: any[]
+  // specialists?: TreeItem[]
+  payments?: any[]
+  participantGroups?: any[]
+  seps: any[]
+  patient?: PatientEntity | null | undefined
+  objects?: any
+}>()
+
+// Model
+const model = defineModel<Encounter>()
+model.value = genEncounter()
+
+// Common preparation
+const defaultCBItems = [{ label: 'Pilih', value: '' }]
+const paymentMethodItems = ref<any>({})
+
+// Emit preparation
+const emit = defineEmits<{
+  (e: 'onSelectDoctor', code: string): void
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
+}>()
+
+// Validation schema
+const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
+  validationSchema: toTypedSchema(IntegrationEncounterSchema),
+})
+
+// Bind fields and extract attrs
+const [doctorCode, doctorCodeAttrs] = defineField('doctor_code')
+const [unitCode, unitCodeAttrs] = defineField('unit_code')
+const [registerDate, registerDateAttrs] = defineField('registerDate')
+const [paymentMethodCode, paymentMethodCodeAttrs] = defineField('paymentMethod_code')
+const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
+const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
+const [sepType, sepTypeAttrs] = defineField('sepType')
+const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
+const [patientName, patientNameAttrs] = defineField('patientName')
+const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
+const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
+const [sepFile, sepFileAttrs] = defineField('sepFile')
+const [sippFile, sippFileAttrs] = defineField('sippFile')
+const patientId = ref('')
+const sepReference = ref('')
+const sepControlDate = ref('')
+const sepTrafficStatus = ref('')
+const diagnosis = ref('')
+const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
+const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
+
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const mode = props.mode !== undefined ? props.mode : 'add'
+// SEP validation state from props
+const isSepValid = computed(() => props.isSepValid || false)
+const isCheckingSep = computed(() => props.isCheckingSep || false)
+const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
+const isDateLoading = ref(false)
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+const debouncedCardNumber = refDebounced(cardNumber, 500)
+const sepFileReview = ref<any>(null)
+const sippFileReview = ref<any>(null)
+const unitFullName = ref('') // Unit, specialist, subspecialist
+const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
+
+if (mode === 'add') {
+  // Set default sepDate to current date in YYYY-MM-DD format
+  const today = new Date()
+  const year = today.getFullYear()
+  const month = String(today.getMonth() + 1).padStart(2, '0')
+  const day = String(today.getDate()).padStart(2, '0')
+  registerDate.value = `${year}-${month}-${day}`
+}
+
+watch(
+  () => props.selectedDoctor,
+  (doctor) => {
+    unitFullName.value = doctor.subspecialist?.name ?? doctor.specialist?.name ?? doctor.unit?.name ?? 'tidak diketahui'
+    model.value!.unit_code = doctor.unit_code || ''
+    model.value!.specialist_code = doctor.specialist_code || ''
+    model.value!.subspecialist_code = doctor.subspecialist_code || ''
+  },
+)
+
+// Sync props to form fields
+watch(
+  () => props.objects,
+  (objects) => {
+    if (objects && Object.keys(objects).length > 0) {
+      patientName.value = objects?.patientName || ''
+      nationalIdentity.value = objects?.nationalIdentity || ''
+      medicalRecordNumber.value = objects?.medicalRecordNumber || ''
+      doctorCode.value = objects?.doctorCode || ''
+      paymentMethodCode.value = objects?.paymentMethodCode || ''
+      patientCategory.value = objects?.patientCategory || ''
+      cardNumber.value = objects?.cardNumber || ''
+      sepType.value = objects?.sepType || ''
+      sepNumber.value = objects?.sepNumber || ''
+      sepFileReview.value = objects?.sepFileReview || ''
+      sippFileReview.value = objects?.sippFileReview || ''
+      isDateLoading.value = true
+      setTimeout(() => {
+        registerDate.value = objects?.registerDate || ''
+        isDateLoading.value = false
+      }, 100)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.patient,
+  (patient) => {
+    if (patient && Object.keys(patient).length > 0) {
+      patientId.value = patient?.id ? String(patient.id) : ''
+      patientName.value = patient?.person?.name || ''
+      nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
+      medicalRecordNumber.value = patient?.number || ''
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.isSepValid,
+  (value) => {
+    if (!value) return
+    const objects = props.objects
+    if (objects && Object.keys(objects).length > 0) {
+      sepReference.value = objects?.sepReference || ''
+      sepControlDate.value = objects?.sepControlDate || ''
+      sepTrafficStatus.value = objects?.sepTrafficStatus || ''
+      diagnosis.value = objects?.diagnosis || ''
+    }
+  },
+)
+
+watch(debouncedSepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
+watch(debouncedCardNumber, (newValue) => {
+  emit('event', 'member-changed', newValue)
+})
+
+function onAddSep() {
+  const formValues = {
+    patientId: patientId.value || '',
+    doctorCode: doctorCode.value,
+    registerDate: registerDate.value,
+    cardNumber: cardNumber.value,
+    paymentMethodCode: paymentMethodCode.value,
+    sepFile: sepFile.value,
+    sippFile: sippFile.value,
+    sepType: sepType.value,
+  }
+  emit('event', 'add-sep', formValues)
+}
+
+function onSearchSep() {
+  emit('event', 'search-sep', { cardNumber: cardNumber.value })
+}
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  let payload: any = values
+  if (props.mode === 'edit') {
+    payload = {
+      ...payload,
+      sepFileReview: sepFileReview.value,
+      sippFileReview: sippFileReview.value,
+    }
+  }
+  emit('event', 'save', payload)
+})
+
+function openFile(path: string) {
+  window.open(path, '_blank')
+}
+
+function submitForm() {
+  // Trigger form submit using native form submit
+  // This will trigger validation and onSubmit handler
+  if (formRef.value) {
+    formRef.value.requestSubmit()
+  } else {
+    // Fallback: directly call onSubmit handler
+    // Create a mock event object
+    const mockEvent = {
+      preventDefault: () => {},
+      target: formRef.value || {},
+    } as SubmitEvent
+
+    // Call onSubmit directly
+    onSubmit(mockEvent)
+  }
+}
+
+defineExpose({
+  submitForm,
+})
+
+onMounted(() => {
+  const isPaymentMethodVclaim = true
+  paymentMethodItems.value = isPaymentMethodVclaim ? props.payments : CB.recStrToItem(paymentMethodCodes)
+})
+</script>
+
+<template>
+  <div class="mx-auto w-full">
+    <form
+      ref="formRef"
+      @submit.prevent="onSubmit"
+      class="grid gap-6 p-4"
+    >
+      <!-- Data Pasien -->
+      <div class="flex flex-col gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <div class="flex items-center gap-2">
+          <span class="text-sm">sudah pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'search')"
+          >
+            <Icon
+              name="i-lucide-search"
+              class="h-5 w-5"
+            />
+            Cari Pasien
+          </Button>
+          <span class="text-sm">belum pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'add')"
+          >
+            <Icon
+              name="i-lucide-plus"
+              class="h-5 w-5"
+            />
+            Tambah Pasien Baru
+          </Button>
+        </div>
+      </div>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">Nama Pasien</DE.Label>
+          <DE.Field :errMessage="errors.patientName">
+            <Input
+              id="patientName"
+              v-model="patientName"
+              v-bind="patientNameAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">NIK</DE.Label>
+          <DE.Field :errMessage="errors.nationalIdentity">
+            <Input
+              id="nationalIdentity"
+              v-model="nationalIdentity"
+              v-bind="nationalIdentityAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">No. RM</DE.Label>
+          <DE.Field :errMessage="errors.medicalRecordNumber">
+            <Input
+              id="medicalRecordNumber"
+              v-model="medicalRecordNumber"
+              v-bind="medicalRecordNumberAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <hr />
+
+      <!-- Data Kunjungan -->
+      <h3 class="text-lg font-semibold">Data Kunjungan</h3>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">
+            Dokter
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.doctor_code">
+            <CB.Combobox
+              id="doctorCode"
+              v-model="doctorCode"
+              v-bind="doctorCodeAttrs"
+              :items="[...defaultCBItems, ...doctorItems]"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Dokter"
+              search-placeholder="Cari Dokter"
+              empty-message="Dokter tidak ditemukan"
+              @update:model-value="(value: any) => emit('onSelectDoctor', value)"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.unit_code">
+            <Input
+              :value="unitFullName"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">
+            Tanggal Daftar
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.registerDate">
+            <DatepickerSingle
+              v-if="!isDateLoading"
+              id="registerDate"
+              v-model="registerDate"
+              v-bind="registerDateAttrs"
+              placeholder="Pilih tanggal"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">
+            Jenis Pembayaran
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.paymentMethod_code">
+            <CB.Combobox
+              id="paymentMethodCode"
+              v-model="paymentMethodCode"
+              v-bind="paymentMethodCodeAttrs"
+              :items="paymentMethodItems"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Pembayaran"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <!-- BPJS Fields (conditional) -->
+      <template v-if="isInsurancePayment">
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <DE.Label height="compact">
+              Kelompok Peserta
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.patientCategory">
+              <Select
+                id="patientCategory"
+                v-model="patientCategory"
+                v-bind="patientCategoryAttrs"
+                :items="participantGroups || []"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Kelompok Peserta"
+              />
+            </DE.Field>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
+
+          <DE.Cell>
+            <DE.Label height="compact">
+              No. Kartu BPJS
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.cardNumber">
+              <Input
+                id="cardNumber"
+                v-model="cardNumber"
+                v-bind="cardNumberAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Masukkan nomor kartu BPJS"
+              />
+            </DE.Field>
+            <div
+              v-if="isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <div
+              v-if="!isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-x"
+                class="h-4 w-4 bg-red-500 text-white"
+              />
+              <span class="text-sm text-red-500">Tidak aktif</span>
+            </div>
+          </DE.Cell>
+
+          <DE.Cell>
+            <DE.Label height="compact">
+              Jenis SEP
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepType">
+              <Select
+                id="sepType"
+                v-model="sepType"
+                v-bind="sepTypeAttrs"
+                :items="seps"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Jenis SEP"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <DE.Label height="compact">
+              No. SEP
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepNumber">
+              <div class="flex gap-2">
+                <Input
+                  id="sepNumber"
+                  v-model="sepNumber"
+                  v-bind="sepNumberAttrs"
+                  placeholder="Tambah SEP terlebih dahulu"
+                  class="flex-1"
+                  :disabled="isLoading || isReadonly || isSepValid"
+                />
+                <Button
+                  v-if="!isSepValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  :disabled="isCheckingSep || isLoading || isReadonly"
+                  @click="onAddSep"
+                >
+                  <Icon
+                    v-if="isCheckingSep"
+                    name="i-lucide-loader-2"
+                    class="h-4 w-4 animate-spin"
+                  />
+                  <Icon
+                    v-else
+                    name="i-lucide-plus"
+                    class="h-4 w-4"
+                  />
+                </Button>
+                <Button
+                  v-if="isMemberValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  @click="onSearchSep"
+                >
+                  <Icon
+                    name="i-lucide-search"
+                    class="h-4 w-4"
+                  />
+                </Button>
+              </div>
+            </DE.Field>
+            <div
+              v-if="isSepValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
+
+          <DE.Cell>
+            <FileUpload
+              field-name="sepFile"
+              label="Dokumen SEP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sepFile"
+              v-bind="sepFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sepFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sepFileReview.filePath)"
+              >
+                {{ sepFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+
+          <DE.Cell>
+            <FileUpload
+              field-name="sippFile"
+              label="Dokumen SIPP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sippFile"
+              v-bind="sippFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sippFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sippFileReview.filePath)"
+              >
+                {{ sippFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+
+      <template v-if="isSepValid">
+        <hr />
+        <!-- Data SEP -->
+        <h3 class="text-lg font-semibold">Data SEP</h3>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <Label height="compact">Dengan Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepReference"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">No. Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepNumber"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">
+              Tanggal Rujukan / Surat Kontrol
+              <span class="ml-1 text-red-500">*</span>
+            </Label>
+            <DE.Field>
+              <DatepickerSingle
+                id="sepControlDate"
+                v-model="sepControlDate"
+                :disabled="true"
+                placeholder="Pilih tanggal sep"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell :col-span="2">
+            <Label height="compact">Diagnosis</Label>
+            <DE.Field>
+              <Input
+                id="diagnosis"
+                v-model="diagnosis"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">Status Kecelakaan</Label>
+            <DE.Field>
+              <Input
+                id="sepTrafficStatus"
+                v-model="sepTrafficStatus"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+    </form>
+  </div>
+</template>
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index fdb9a43c..86681d2f 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -393,20 +393,31 @@ onMounted(() => {
         :colCount="3"
         :cellFlex="false"
       >
+        {{ JSON.stringify(paymentMethodCode) }}
+        {{ JSON.stringify(paymentMethodItems, null, 2) }}
+        {{ JSON.stringify(payments, null, 2) }}
         <DE.Cell>
           <DE.Label height="compact">
             Jenis Pembayaran
             <span class="text-red-500">*</span>
           </DE.Label>
           <DE.Field :errMessage="errors.paymentMethod_code">
-            <CB.Combobox
+            <Select
+              id="paymentMethodCode"
+              v-model="paymentMethodCode"
+              v-bind="paymentMethodCodeAttrs"
+              :items="payments as any"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Pembayaran"
+            />
+            <!-- <CB.Combobox
               id="paymentMethodCode"
               v-model="paymentMethodCode"
               v-bind="paymentMethodCodeAttrs"
               :items="paymentMethodItems"
               :disabled="isLoading || isReadonly"
               placeholder="Pilih Jenis Pembayaran"
-            />
+            /> -->
           </DE.Field>
         </DE.Cell>
       </DE.Block>
diff --git a/app/components/content/encounter/entry.vue b/app/components/content/encounter/entry.vue
index a06a4165..6fab59e8 100644
--- a/app/components/content/encounter/entry.vue
+++ b/app/components/content/encounter/entry.vue
@@ -188,6 +188,7 @@ onMounted(async () => {
     @event="handleEvent"
     @fetch="handleFetch"
   />
+
   <AppViewPatient
     v-model:open="openPatient"
     v-model:selected="selectedPatient"
@@ -206,11 +207,13 @@ onMounted(async () => {
     "
     @save="handleSavePatient"
   />
+
   <AppViewHistory
     v-model:open="openHistory"
     :is-action="true"
     :histories="histories"
   />
+  
   <!-- Footer Actions -->
   <div class="mt-6 flex justify-end gap-2 border-t border-t-slate-300 pt-4">
     <Button
diff --git a/app/lib/page-checker.ts b/app/lib/page-checker.ts
index f346f34a..40cf5551 100644
--- a/app/lib/page-checker.ts
+++ b/app/lib/page-checker.ts
@@ -19,25 +19,18 @@ export function usePageChecker() {
   ) {
     // Check if user has access to this page, need to use try - catch for proper handling
     const hasAccess = checkRole(roleAccess)
-    if (!hasAccess) {
-      navigateTo('/403')
-    }
+    if (!hasAccess) return false
 
     // Define permission-based computed properties
-    const canCreate = hasCreateAccess(roleAccess)
-    const canRead = hasReadAccess(roleAccess)
-    const canUpdate = hasUpdateAccess(roleAccess)
-    const canDelete = hasDeleteAccess(roleAccess)
-
     switch (type) {
       case 'create':
-        return canCreate
+        return hasCreateAccess(roleAccess)
       case 'read':
-        return canRead
+        return hasReadAccess(roleAccess)
       case 'update':
-        return canUpdate
+        return hasUpdateAccess(roleAccess)
       case 'delete':
-        return canDelete
+        return hasDeleteAccess(roleAccess)
       default:
         return false
     }

From 7c4f08780c6d7ca38542cef8d2a30a3ab17e1595 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Sat, 6 Dec 2025 04:32:08 +0700
Subject: [PATCH 25/28] fix: update encounter payment method

---
 app/components/app/encounter/entry-form.vue |  27 +----
 app/handlers/encounter-entry.handler.ts     |   7 +-
 app/handlers/encounter-init.handler.ts      | 107 +++++++-------------
 app/schemas/integration-encounter.schema.ts |   4 +-
 4 files changed, 47 insertions(+), 98 deletions(-)

diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 86681d2f..64290f3e 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -49,7 +49,6 @@ model.value = genEncounter()
 
 // Common preparation
 const defaultCBItems = [{ label: 'Pilih', value: '' }]
-const paymentMethodItems = ref<any>({})
 
 // Emit preparation
 const emit = defineEmits<{
@@ -84,21 +83,21 @@ const sepTrafficStatus = ref('')
 const diagnosis = ref('')
 const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
 const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
-
+const mode = props.mode !== undefined ? props.mode : 'add'
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
-const mode = props.mode !== undefined ? props.mode : 'add'
-// SEP validation state from props
-const isSepValid = computed(() => props.isSepValid || false)
+const isSepValid = computed(() => props.isSepValid || false) // SEP validation state from props
 const isCheckingSep = computed(() => props.isCheckingSep || false)
 const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
 const isDateLoading = ref(false)
+const isUsePaymentNew = true
 const debouncedSepNumber = refDebounced(sepNumber, 500)
 const debouncedCardNumber = refDebounced(cardNumber, 500)
 const sepFileReview = ref<any>(null)
 const sippFileReview = ref<any>(null)
 const unitFullName = ref('') // Unit, specialist, subspecialist
 const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
+const paymentMethodItems = isUsePaymentNew ? props.payments : CB.recStrToItem(paymentMethodCodes)
 
 if (mode === 'add') {
   // Set default sepDate to current date in YYYY-MM-DD format
@@ -236,11 +235,6 @@ function submitForm() {
 defineExpose({
   submitForm,
 })
-
-onMounted(() => {
-  const isPaymentMethodVclaim = true
-  paymentMethodItems.value = isPaymentMethodVclaim ? props.payments : CB.recStrToItem(paymentMethodCodes)
-})
 </script>
 
 <template>
@@ -393,9 +387,6 @@ onMounted(() => {
         :colCount="3"
         :cellFlex="false"
       >
-        {{ JSON.stringify(paymentMethodCode) }}
-        {{ JSON.stringify(paymentMethodItems, null, 2) }}
-        {{ JSON.stringify(payments, null, 2) }}
         <DE.Cell>
           <DE.Label height="compact">
             Jenis Pembayaran
@@ -406,18 +397,10 @@ onMounted(() => {
               id="paymentMethodCode"
               v-model="paymentMethodCode"
               v-bind="paymentMethodCodeAttrs"
-              :items="payments as any"
+              :items="paymentMethodItems as any"
               :disabled="isLoading || isReadonly"
               placeholder="Pilih Jenis Pembayaran"
             />
-            <!-- <CB.Combobox
-              id="paymentMethodCode"
-              v-model="paymentMethodCode"
-              v-bind="paymentMethodCodeAttrs"
-              :items="paymentMethodItems"
-              :disabled="isLoading || isReadonly"
-              placeholder="Pilih Jenis Pembayaran"
-            /> -->
           </DE.Field>
         </DE.Cell>
       </DE.Block>
diff --git a/app/handlers/encounter-entry.handler.ts b/app/handlers/encounter-entry.handler.ts
index 5f632ac2..168b1f56 100644
--- a/app/handlers/encounter-entry.handler.ts
+++ b/app/handlers/encounter-entry.handler.ts
@@ -75,6 +75,7 @@ export function useEncounterEntry(props: {
   const isSaveDisabled = computed(() => {
     return !selectedPatient.value || !selectedPatientObject.value || isSaving.value || isLoadingDetail.value
   })
+  const isUsePaymentNew = true
 
   function getListPath(): string {
     if (props.classCode === 'ambulatory') {
@@ -436,7 +437,7 @@ export function useEncounterEntry(props: {
       formData.registerDate = date.toISOString().split('T')[0]
     }
 
-    if (encounter.paymentMethod_code) {
+    if (!isUsePaymentNew && encounter.paymentMethod_code) {
       formData.paymentMethodCode = encounter.paymentMethod_code
       if (encounter.paymentMethod_code === 'insurance') {
         formData.paymentType = 'jkn'
@@ -449,7 +450,7 @@ export function useEncounterEntry(props: {
         }
       }
     } else {
-      formData.paymentType = 'spm'
+      formData.paymentType = encounter.paymentMethod_code
     }
 
     formData.cardNumber = encounter.member_number || ''
@@ -520,7 +521,7 @@ export function useEncounterEntry(props: {
       sippFile.value = formValues.sippFile || null
 
       let paymentMethodCode = formValues.paymentMethod_code ?? null
-      if (!paymentMethodCode) {
+      if (!isUsePaymentNew && !paymentMethodCode) {
         if (formValues.paymentType === 'jkn' || formValues.paymentType === 'jkmm') {
           paymentMethodCode = 'insurance'
         } else if (formValues.paymentType === 'spm') {
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index c05b5b8e..275228d7 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -56,72 +56,35 @@ const VaccineDataListAsync = defineAsyncComponent(() => import('~/components/con
 const InitialNursingStudyAsync = defineAsyncComponent(() => import('~/components/content/initial-nursing/entry.vue'))
 
 const defaultKeys: Record<string, any> = {
-  status: 'status',
-  earlyNurseryAssessment: 'early-nursery-assessment',
-  earlyMedicalAssessment: 'early-medical-assessment',
-  earlyMedicalRehabAssessment: 'early-medical-rehab-assessment',
-  functionAssessment: 'function-assessment',
-  therapyProtocol: 'therapy-protocol',
-  chemotherapyProtocol: 'chemotherapy-protocol',
-  chemotherapyMedicine: 'chemotherapy-medicine',
-  educationAssessment: 'education-assessment',
-  generalConsent: 'general-consent',
-  patientAmbNote: 'patient-amb-note',
-  patientDevNote: 'patient-dev-note',
-  prescription: 'prescription',
-  deviceOrder: 'device-order',
-  radiologyOrder: 'radiology-order',
-  cpLabOrder: 'cp-lab-order',
-  microLabOrder: 'micro-lab-order',
-  paLabOrder: 'pa-lab-order',
-  procedureRoomOrder: 'procedure-room-order',
-  mcuResult: 'mcu-result',
-  actionReport: 'action-report',
-  surgeryReport: 'surgery-report',
-  vaccineData: 'vaccine-data',
-  consultation: 'consultation',
-  controlLetter: 'control-letter',
-  inpatientLetter: 'inpatient-letter',
-  fkr: 'fkr',
-  refBack: 'reference-back',
-  screening: 'screening',
-  supportingDocument: 'supporting-document',
-  resume: 'resume',
-  ambResume: 'amb-resume',
-  priceList: 'price-list',
-  initialNursingStudy: 'initial-nursing-study',
-}
-
-const defaultMenus: Record<string, any> = {
   status: {
-    id: defaultKeys.status,
+    id: 'status',
     title: 'Status Masuk/Keluar',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   // NOTE : HIDDEN UNTIL IT IS READY
   // earlyNurseryAssessment: {
-  //   id: defaultKeys.earlyNurseryAssessment,
+  //   id: 'early-nursery-assessment',
   //   title: 'Pengkajian Awal Keperawatan',
   //   classCode: ['ambulatory', 'emergency', 'inpatient'],
   //   unit: 'all',
   // },
   earlyMedicalAssessment: {
-    id: defaultKeys.earlyMedicalAssessment,
+    id: 'early-medical-assessment',
     title: 'Pengkajian Awal Medis',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
     afterId: 'early-medical-assessment',
   },
   earlyMedicalRehabAssessment: {
-    id: defaultKeys.earlyMedicalRehabAssessment,
+    id: 'rehab-medical-assessment',
     title: 'Pengkajian Awal Medis Rehabilitasi Medis',
     classCode: ['ambulatory'],
     unit: 'rehab',
-    afterId: defaultKeys.earlyMedicalAssessment,
+    afterId: 'early-medical-assessment',
   },
   fkr: {
-    id: defaultKeys.fkr,
+    id: 'fkr',
     title: 'FKR',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -142,165 +105,165 @@ const defaultMenus: Record<string, any> = {
   //   afterId: 'function-assessment',
   // },
   chemotherapyProtocol: {
-    id: defaultKeys.chemotherapyProtocol,
+    id: 'chemotherapy-protocol',
     title: 'Protokol Kemoterapi',
     classCode: ['ambulatory'],
     unit: 'chemo',
-    afterId: defaultKeys.earlyMedicalAssessment,
+    afterId: 'early-medical-assessment',
   },
   chemotherapyMedicine: {
     id: 'chemotherapy-medicine',
     title: 'Protokol Obat Kemoterapi',
     classCode: ['ambulatory'],
     unit: 'chemo',
-    afterId: defaultKeys.chemotherapyProtocol,
+    afterId: 'chemotherapy-protocol',
   },
   educationAssessment: {
-    id: defaultKeys.educationAssessment,
+    id: 'education-assessment',
     title: 'Asesmen Kebutuhan Edukasi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   generalConsent: {
-    id: defaultKeys.generalConsent,
+    id: 'general-consent',
     title: 'General Consent',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   patientAmbNote: {
-    id: defaultKeys.patientAmbNote,
+    id: 'patient-amb-note',
     title: 'CPRJ',
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
   },
   patientDevNote: {
-    id: defaultKeys.patientDevNote,
+    id: 'patient-dev-note',
     title: 'CPP',
     classCode: ['inpatient'],
     unit: 'all',
   },
   prescription: {
-    id: defaultKeys.prescription,
+    id: 'prescription',
     title: 'Order Obat',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   deviceOrder: {
-    id: defaultKeys.deviceOrder,
+    id: 'device-order',
     title: 'Order Alkes',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   radiologyOrder: {
-    id: defaultKeys.radiologyOrder,
+    id: 'radiology-order',
     title: 'Order Radiologi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   cpLabOrder: {
-    id: defaultKeys.cpLabOrder,
+    id: 'cp-lab-order',
     title: 'Order Lab PK',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   microLabOrder: {
-    id: defaultKeys.microLabOrder,
+    id: 'micro-lab-order',
     title: 'Order Lab Mikro',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   paLabOrder: {
-    id: defaultKeys.paLabOrder,
+    id: 'pa-lab-order',
     title: 'Order Lab PA',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   procedureRoomOrder: {
-    id: defaultKeys.procedureRoomOrder,
+    id: 'procedure-room-order',
     title: 'Order Ruang Tindakan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   mcuResult: {
-    id: defaultKeys.mcuResult,
+    id: 'mcu-result',
     title: 'Hasil Penunjang',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   actionReport: {
-    id: defaultKeys.actionReport,
+    id: 'action-report',
     title: 'Laporan Tindakan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   surgeryReport: {
-    id: defaultKeys.surgeryReport,
+    id: 'surgery-report',
     title: 'Laporan Operasi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   vaccineData: {
-    id: defaultKeys.vaccineData,
+    id: 'vaccine-data',
     title: 'Data Vaksin',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   consultation: {
-    id: defaultKeys.consultation,
+    id: 'consultation',
     title: 'Konsultasi',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   controlLetter: {
-    id: defaultKeys.controlLetter,
+    id: 'control-letter',
     title: 'Surat Kontrol',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   inpatientLetter: {
-    id: defaultKeys.inpatientLetter,
+    id: 'inpatient-letter',
     title: 'SPRI',
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
   },
   refBack: {
-    id: defaultKeys.refBack,
+    id: 'reference-back',
     title: 'PRB',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   screening: {
-    id: defaultKeys.screening,
+    id: 'screening',
     title: 'Skrinning MPP',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   supportingDocument: {
-    id: defaultKeys.supportingDocument,
+    id: 'supporting-document',
     title: 'Upload Dokumen Pendukung',
     classCode: ['ambulatory'],
     unit: 'all',
   },
   resume: {
-    id: defaultKeys.resume,
+    id: 'resume',
     title: 'Resume',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   ambResume: {
-    id: defaultKeys.ambResume,
+    id: 'amb-resume',
     title: 'Resume Medis Rawat Jalan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   priceList: {
-    id: defaultKeys.priceList,
+    id: 'price-list',
     title: 'Tarif Tindakan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
   initialNursingStudy: {
-    id: defaultKeys.initialNursingStudy,
+    id: 'initial-nursing-study',
     title: 'Kajian Awal Keperawatan',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -338,7 +301,7 @@ export function insertItemByAfterId(id: string, items: EncounterItem[], newItem:
 }
 
 export function injectComponents(id: string | number, data: EncounterListData, meta: EncounterListData) {
-  const currentKeys = { ...defaultMenus }
+  const currentKeys = { ...defaultKeys }
   if (currentKeys?.status) {
     currentKeys.status['component'] = StatusAsync
     currentKeys.status['props'] = { encounter: data?.encounter }
diff --git a/app/schemas/integration-encounter.schema.ts b/app/schemas/integration-encounter.schema.ts
index f2c8dfce..bb6749c8 100644
--- a/app/schemas/integration-encounter.schema.ts
+++ b/app/schemas/integration-encounter.schema.ts
@@ -1,3 +1,4 @@
+import { isValid } from "date-fns"
 import { z } from 'zod'
 
 const ERROR_MESSAGES = {
@@ -16,6 +17,7 @@ const ERROR_MESSAGES = {
 }
 
 const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+const isValidationSep = false
 
 const IntegrationEncounterSchema = z
   .object({
@@ -116,7 +118,7 @@ const IntegrationEncounterSchema = z
   .refine(
     (data) => {
       // If payment type is jkn and SEP type is selected, then SEP number is required
-      if (data.paymentMethod_code === 'jkn' && data.sepType && data.sepType.trim() !== '') {
+      if (isValidationSep && data.paymentMethod_code === 'jkn' && data.sepType && data.sepType.trim() !== '') {
         return data.sepNumber && data.sepNumber.trim() !== ''
       }
       return true

From a61407a0a647caadb096854c1962b245e01eec79 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Sat, 6 Dec 2025 04:47:18 +0700
Subject: [PATCH 26/28] fix: change payment

---
 .../{entry-form copy.vue => entry-form-prev.vue}         | 0
 app/components/app/encounter/entry-form.vue              | 9 +++++----
 2 files changed, 5 insertions(+), 4 deletions(-)
 rename app/components/app/encounter/{entry-form copy.vue => entry-form-prev.vue} (100%)

diff --git a/app/components/app/encounter/entry-form copy.vue b/app/components/app/encounter/entry-form-prev.vue
similarity index 100%
rename from app/components/app/encounter/entry-form copy.vue
rename to app/components/app/encounter/entry-form-prev.vue
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 64290f3e..01afe3c3 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -90,14 +90,13 @@ const isSepValid = computed(() => props.isSepValid || false) // SEP validation s
 const isCheckingSep = computed(() => props.isCheckingSep || false)
 const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
 const isDateLoading = ref(false)
-const isUsePaymentNew = true
 const debouncedSepNumber = refDebounced(sepNumber, 500)
 const debouncedCardNumber = refDebounced(cardNumber, 500)
 const sepFileReview = ref<any>(null)
 const sippFileReview = ref<any>(null)
 const unitFullName = ref('') // Unit, specialist, subspecialist
 const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
-const paymentMethodItems = isUsePaymentNew ? props.payments : CB.recStrToItem(paymentMethodCodes)
+const paymentMethodItems = CB.recStrToItem(paymentMethodCodes)
 
 if (mode === 'add') {
   // Set default sepDate to current date in YYYY-MM-DD format
@@ -127,13 +126,15 @@ watch(
       nationalIdentity.value = objects?.nationalIdentity || ''
       medicalRecordNumber.value = objects?.medicalRecordNumber || ''
       doctorCode.value = objects?.doctorCode || ''
-      paymentMethodCode.value = objects?.paymentMethodCode || ''
       patientCategory.value = objects?.patientCategory || ''
       cardNumber.value = objects?.cardNumber || ''
       sepType.value = objects?.sepType || ''
       sepNumber.value = objects?.sepNumber || ''
       sepFileReview.value = objects?.sepFileReview || ''
       sippFileReview.value = objects?.sippFileReview || ''
+      if (objects.paymentMethodCode) {
+        paymentMethodCode.value = objects.paymentMethodCode || ''
+      }
       isDateLoading.value = true
       setTimeout(() => {
         registerDate.value = objects?.registerDate || ''
@@ -397,7 +398,7 @@ defineExpose({
               id="paymentMethodCode"
               v-model="paymentMethodCode"
               v-bind="paymentMethodCodeAttrs"
-              :items="paymentMethodItems as any"
+              :items="payments || []"
               :disabled="isLoading || isReadonly"
               placeholder="Pilih Jenis Pembayaran"
             />

From 122b9c5fa54704ddbedaab718fde7dfaf5dcb0ea Mon Sep 17 00:00:00 2001
From: avsky0095 <andrianovsky95@gmail.com>
Date: Mon, 8 Dec 2025 08:05:39 +0700
Subject: [PATCH 27/28] feat/ap-lab-order-52: wip

---
 app/components/app/ap-lab-order/list.cfg.ts   |  58 ++
 app/components/app/ap-lab-order/list.vue      |  37 ++
 app/components/app/mcu-order/entry-for-ap.vue | 157 +++++
 app/components/content/ap-lab-order/entry.vue |  77 +++
 app/components/content/ap-lab-order/list.vue  | 159 +++++
 app/components/content/ap-lab-order/main.vue  |  16 +
 app/const/page-permission/ambulatory.ts       |   2 +-
 app/handlers/encounter-init.handler.ts        |  13 +-
 app/handlers/encounter-init.handler.vue.bu    | 587 ++++++++++++++++++
 9 files changed, 1099 insertions(+), 7 deletions(-)
 create mode 100644 app/components/app/ap-lab-order/list.cfg.ts
 create mode 100644 app/components/app/ap-lab-order/list.vue
 create mode 100644 app/components/app/mcu-order/entry-for-ap.vue
 create mode 100644 app/components/content/ap-lab-order/entry.vue
 create mode 100644 app/components/content/ap-lab-order/list.vue
 create mode 100644 app/components/content/ap-lab-order/main.vue
 create mode 100644 app/handlers/encounter-init.handler.vue.bu

diff --git a/app/components/app/ap-lab-order/list.cfg.ts b/app/components/app/ap-lab-order/list.cfg.ts
new file mode 100644
index 00000000..186e9f26
--- /dev/null
+++ b/app/components/app/ap-lab-order/list.cfg.ts
@@ -0,0 +1,58 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Tgl. Order' },
+    { label: 'No. Order' },
+    { label: 'Jadwal Pemeriksaan' },
+    { label: 'Lokalisasi' },
+    { label: 'Stadium' },
+    { label: 'Status' },
+    { label: 'Resume' },
+    { label: '' }]],
+
+  keys: [
+    'date',
+    'number',
+    'examinationDate',
+    'localization',
+    'stadium',
+    'resume',
+    '',
+  ],
+
+  delKeyNames: [
+    { key: 'date', label: 'Tanggal' },
+    { key: 'number', label: 'Nomor' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/ap-lab-order/list.vue b/app/components/app/ap-lab-order/list.vue
new file mode 100644
index 00000000..5d4820cc
--- /dev/null
+++ b/app/components/app/ap-lab-order/list.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <DataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/mcu-order/entry-for-ap.vue b/app/components/app/mcu-order/entry-for-ap.vue
new file mode 100644
index 00000000..80d0f7df
--- /dev/null
+++ b/app/components/app/mcu-order/entry-for-ap.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import * as Cbx from '~/components/pub/my-ui/checkboxes'
+import { fi } from 'date-fns/locale';
+
+const substances = [
+  { value: 'biopsi', label: 'Biopsi'},
+  { value: 'operation', label: 'Operasi' },
+  { value: 'scraping', label: 'Kerokan' },
+  { value: 'cytology', label: 'Sitologi' },
+  { value: 'fnab', label: 'FNAB' },
+]
+
+const fications = [
+  { value: 'pa-formaline-10p', label: 'pA. Formalin 10%' },
+  { value: 'spt-alcohol-70p', label: 'Sputum Alkohol 70%' },
+  { value: 'urn-alcohol-50p', label: 'Urine Alkohol 50%' },
+  { value: 'vgn-smr-alcohol-95p', label: 'Vagibal Smear 95%' },
+]
+
+const prevAp = [
+  { value: 'clinical', label: 'Klinik' },
+  { value: 'ro', label: 'RO' },
+  { value: 'clinical-pat', label: 'Pat. Klinik' },
+  { value: 'operation', label: 'Operasi' },
+  { value: 'necropsy', label: 'Nekropsi' },
+]
+
+
+
+</script>
+
+<template>
+  <div class="header">Data Order</div>
+  <DE.Block :col-count="3" :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Tgl. Order</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>DPJP</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>PPDS</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Bahan</div>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Field>
+        <Cbx.Checkboxes :items="substances" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Fiksasi</div>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Field>
+        <Cbx.Checkboxes :items="fications" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Data Klinis Pasien</div>
+  <DE.Block :col-count="6" :cell-flex="false">
+    <DE.Cell :col-span="3">
+      <DE.Label>Lokalisasi</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :col-span="3">
+      <DE.Label>Diagnosa Klinik</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium T</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium M</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium N</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <div class=""></div>
+    <DE.Cell :col-span="3">
+      <DE.Label>Keterangan Klinik</DE.Label>
+      <DE.Field>
+        <Textarea rows="2" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Riwayat Pemeriksaan</div>
+  <DE.Block :col-count="2" :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Riwayat Dulu</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Riwayat Sekarang</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Pemeriksaan PA Sebelumnya</DE.Label>
+      <DE.Field>
+        <Cbx.Checkboxes :items="prevAp" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+    <div></div>
+    <DE.Cell>
+      <DE.Label>Keterangan PA Sebelumnya</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Pemeriksaan Penunjang</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+
+  </DE.Block>
+
+</template>
+
+<style>
+.header {
+  @apply mb-1.5 text-sm 2xl:text-base font-semibold
+}
+</style>
diff --git a/app/components/content/ap-lab-order/entry.vue b/app/components/content/ap-lab-order/entry.vue
new file mode 100644
index 00000000..84349b70
--- /dev/null
+++ b/app/components/content/ap-lab-order/entry.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.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 { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import Entry from '~/components/app/mcu-order/entry-for-ap.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+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
+
+// MCU Sources
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Entry Order LAB PA',
+  icon: 'i-lucide-box',
+}
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Entry />
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/content/ap-lab-order/list.vue b/app/components/content/ap-lab-order/list.vue
new file mode 100644
index 00000000..b04cf7e5
--- /dev/null
+++ b/app/components/content/ap-lab-order/list.vue
@@ -0,0 +1,159 @@
+<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 RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+const { crudQueryParams } = useQueryCRUD()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "ap-lab",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab PA',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      crudQueryParams.value = { mode: 'entry', recordId: undefined }
+    },
+  },
+}
+
+provide('rec_id', recId)
+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 Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>
diff --git a/app/components/content/ap-lab-order/main.vue b/app/components/content/ap-lab-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/ap-lab-order/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/const/page-permission/ambulatory.ts b/app/const/page-permission/ambulatory.ts
index b66106d1..c77b59a4 100644
--- a/app/const/page-permission/ambulatory.ts
+++ b/app/const/page-permission/ambulatory.ts
@@ -158,7 +158,7 @@ export const permissions: Record<string, Record<string, Permission[]>> = {
     'emp|lab': ['R'],
     'emp|rad': ['R'],
   },
-  '/ambulatory/encounter/[id]/process?menu=pa-lab-order': {
+  '/ambulatory/encounter/[id]/process?menu=ap-lab-order': {
     'emp|doc': ['R', 'U'],
     'emp|nur': ['R'],
     'emp|thr': ['R'],
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index d70db428..a3dabf14 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -42,6 +42,7 @@ const PrescriptionAsync = defineAsyncComponent(() => import('~/components/conten
 const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
 const ProcedureRoomOrderAsync = defineAsyncComponent(() => import('~/components/content/procedure-room-order/main.vue'))
 const MicroLabOrderAsync = defineAsyncComponent(() => import('~/components/content/micro-lab-order/main.vue'))
+const ApLabOrderAsync = defineAsyncComponent(() => import('~/components/content/ap-lab-order/main.vue'))
 const CprjAsync = defineAsyncComponent(() => import('~/components/content/cprj/entry.vue'))
 const RadiologyAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
 const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
@@ -173,8 +174,8 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  paLabOrder: {
-    id: 'pa-lab-order',
+  apLabOrder: {
+    id: 'ap-lab-order',
     title: 'Order Lab PA',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -392,10 +393,10 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.microLabOrder['component'] = MicroLabOrderAsync
     currentKeys.microLabOrder['props'] = { encounter_id: id }
   }
-  if (currentKeys?.paLabOrder) {
-    // TODO: add component for paLabOrder
-    currentKeys.paLabOrder['component'] = null
-    currentKeys.paLabOrder['props'] = { encounter_id: id }
+  if (currentKeys?.apLabOrder) {
+    // TODO: add component for apLabOrder
+    currentKeys.apLabOrder['component'] = ApLabOrderAsync
+    currentKeys.apLabOrder['props'] = { encounter_id: id }
   }
   if (currentKeys?.procedureRoomOrder) {
     currentKeys.procedureRoomOrder['component'] = ProcedureRoomOrderAsync
diff --git a/app/handlers/encounter-init.handler.vue.bu b/app/handlers/encounter-init.handler.vue.bu
new file mode 100644
index 00000000..6c1580f1
--- /dev/null
+++ b/app/handlers/encounter-init.handler.vue.bu
@@ -0,0 +1,587 @@
+import { isValidDate } from '~/lib/date'
+import { medicalRoles } from '~/const/common/role'
+
+export interface EncounterItem {
+  id: string
+  title: string
+  classCode?: string[]
+  unit?: string
+  afterId?: string
+  component?: any
+  props?: Record<string, any>
+}
+
+export interface EncounterProps {
+  classCode: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+}
+
+export interface EncounterListData {
+  encounter?: any
+  status?: any
+  medicalAssessment?: any
+  medicalAssessmentRehab: any
+  functionAssessment?: any
+  protocolTheraphy?: any
+  protocolChemotherapy?: any
+  medicineProtocolChemotherapy?: any
+  consultation?: any
+  letterOfControl?: any
+}
+
+const StatusAsync = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+const EarlyMedicalRehabListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const EarlyMedicalAssesmentListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const InitialNursingStudyAsync = defineAsyncComponent(() => import('~/components/content/initial-nursing/entry.vue'))
+// const AssesmentFunctionListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const KfrListAsync = defineAsyncComponent(() => import('~/components/content/kfr/main.vue'))
+const ChemoProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.protocol.vue'))
+const ChemoMedicineProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.medicine.vue'))
+const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
+const CprjAsync = defineAsyncComponent(() => import('~/components/content/cprj/entry.vue'))
+
+const PrescriptionAsync = defineAsyncComponent(() => import('~/components/content/prescription/main.vue'))
+const DeviceOrderAsync = defineAsyncComponent(() => import('~/components/content/device-order/main.vue'))
+const RadiologyOrderAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
+const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
+const MicroLabOrderAsync = defineAsyncComponent(() => import('~/components/content/micro-lab-order/main.vue'))
+const ApLabOrderAsync = defineAsyncComponent(() => import('~/components/content/ap-lab-order/main.vue'))
+const ProcedureRoomOrderAsync = defineAsyncComponent(() => import('~/components/content/procedure-room-order/main.vue'))
+
+const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
+const DocUploadListAsync = defineAsyncComponent(() => import('~/components/content/document-upload/main.vue'))
+const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/main.vue'))
+const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/main.vue'))
+const PrbListAsync = defineAsyncComponent(() => import('~/components/content/prb/main.vue'))
+const SurgeryReportListAsync = defineAsyncComponent(() => import('~/components/content/surgery-report/main.vue'))
+const VaccineDataListAsync = defineAsyncComponent(() => import('~/components/content/vaccine-data/main.vue'))
+
+const defaultKeys: Record<string, any> = {
+  status: {
+    id: 'status',
+    title: 'Status Masuk/Keluar',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  earlyMedicalRehabAssessment: {
+    id: 'rehab-medical-assessment',
+    title: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    classCode: ['ambulatory'],
+    unit: 'rehab',
+  },
+  earlyMedicalAssessment: {
+    id: 'early-medical-assessment',
+    title: 'Pengkajian Awal Medis',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+    afterId: 'early-medical-assessment',
+  },
+  initialNursingStudy: {
+    id: 'initial-nursing-study',
+    title: 'Kajian Awal Keperawatan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  fkr: {
+    id: 'fkr',
+    title: 'FKR',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'rehab',
+  },
+  chemotherapyProtocol: {
+    id: 'chemotherapy-protocol',
+    title: 'Protokol Kemoterapi',
+    classCode: ['ambulatory'],
+    unit: 'chemo',
+  },
+  chemotherapyMedicine: {
+    id: 'chemotherapy-medicine',
+    title: 'Protokol Obat Kemoterapi',
+    classCode: ['ambulatory'],
+    unit: 'chemo',
+  },
+  educationAssessment: {
+    id: 'education-assessment',
+    title: 'Asesmen Kebutuhan Edukasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+
+  // NOTE: Replaced by FRK
+  // functionAssessment: {
+  //   id: 'function-assessment',
+  //   title: 'Asesmen Fungsi',
+  //   classCode: ['ambulatory'],
+  //   unit: 'rehab',
+  //   afterId: 'rehab-medical-assessment',
+  // },
+  // therapyProtocol: {
+  //   id: 'therapy-protocol',
+  //   classCode: ['ambulatory'],
+  //   title: 'Protokol Terapi',
+  //   unit: 'rehab',
+  //   afterId: 'function-assessment',
+  // },
+  generalConsent: {
+    id: 'general-consent',
+    title: 'General Consent',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  patientAmbNote: { // CPRJ
+    id: 'patient-amb-note',
+    title: 'CPRJ',
+    classCode: ['ambulatory', 'emergency'],
+    unit: 'ambulatory',
+  },
+  patientDevNote: { // CPPT
+    id: 'patient-dev-note',
+    title: 'CPP',
+    classCode: ['inpatient'],
+    unit: 'inpatient',
+  },
+
+  prescription: {
+    id: 'prescription',
+    title: 'Order Obat',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  deviceOrder: {
+    id: 'device-order',
+    title: 'Order Alkes',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  radiologyOrder: {
+    id: 'radiology-order',
+    title: 'Order Radiologi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  cpLabOrder: {
+    id: 'cp-lab-order',
+    title: 'Order Lab PK',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  microLabOrder: {
+    id: 'micro-lab-order',
+    title: 'Order Lab Mikro',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  paLabOrder: {
+    id: 'pa-lab-order',
+    title: 'Order Lab PA',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  procedureRoomOrder: {
+    id: 'procedure-room-order',
+    title: 'Order Ruang Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  mcuResult: {
+    id: 'mcu-result',
+    title: 'Hasil Penunjang',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  procedureReport: {
+    id: 'action-report',
+    title: 'Laporan Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  operationReport: {
+    id: 'action-report',
+    title: 'Laporan Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  ambulanceOrder: {
+    id: 'ambulance-order',
+    title: 'Order Ambulans',
+    classCode: ['ambulatory', 'emergency'],
+    unit: 'all',
+  },
+  surgeryReport: {
+    id: 'surgery-report',
+    title: 'Laporan Operasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  forensic: {
+    id: 'surgery-report',
+    title: 'Laporan Operasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  consultation: {
+    id: 'consultation',
+    title: 'Konsultasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  resume: {
+    id: 'resume',
+    title: 'Resume Medis',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  controlLetter: {
+    id: 'control-letter',
+    title: 'Surat Kontrol',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  inpatientLetter: {
+    id: 'inpatient-letter',
+    title: 'SPRI',
+    classCode: ['ambulatory', 'emergency'],
+    unit: 'all',
+  },
+  refBack: {
+    id: 'reference-back',
+    title: 'PRB',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  screening: {
+    id: 'screening',
+    title: 'Skrinning MPP',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  supportingDocument: {
+    id: 'supporting-document',
+    title: 'Upload Dokumen Pendukung',
+    classCode: ['ambulatory'],
+    unit: 'all',
+  },
+  vaccineData: {
+    id: 'vaccine-data',
+    title: 'Data Vaksin',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  priceList: {
+    id: 'price-list',
+    title: 'Tarif Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+}
+
+export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
+  return items.filter((item) => item.classCode?.includes(classCode))
+}
+
+export function getItemsByUnit(unit: string, items: EncounterItem[]) {
+  return items.filter((item) => item.unit === unit)
+}
+
+export function getItemsByIds(ids: string[], items: EncounterItem[]) {
+  return items.filter((item) => ids.includes(item.id))
+}
+
+export function getIndexById(id: string, items: EncounterItem[]) {
+  return items.findIndex((item) => item.id === id)
+}
+
+export const getItemsAll = (classCode: string, unit: string, items: EncounterItem[]) => {
+  const prevItems = [...items]
+  let updateItems = getItemsByClassCode(classCode, prevItems)
+  updateItems = getItemsByUnit(unit, updateItems)
+  return updateItems
+}
+
+export function insertItemByAfterId(id: string, items: EncounterItem[], newItem: EncounterItem) {
+  const index = getIndexById(id, items)
+  if (index > -1) {
+    items.splice(index + 1, 0, newItem)
+  }
+}
+
+export function injectComponents(id: string | number, data: EncounterListData, meta: EncounterListData) {
+  const currentKeys = { ...defaultKeys }
+  if (currentKeys?.status) {
+    currentKeys.status['component'] = StatusAsync
+    currentKeys.status['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.earlyMedicalAssessment) {
+    currentKeys.earlyMedicalAssessment['component'] = EarlyMedicalAssesmentListAsync
+    currentKeys.earlyMedicalAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'early-medic',
+      label: currentKeys.earlyMedicalAssessment['title'],
+    }
+  }
+  if (currentKeys?.earlyMedicalRehabAssessment) {
+    currentKeys.earlyMedicalRehabAssessment['component'] = EarlyMedicalRehabListAsync
+    currentKeys.earlyMedicalRehabAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'early-rehab',
+      label: currentKeys.earlyMedicalRehabAssessment['title'],
+    }
+  }
+  if (currentKeys?.functionAssessment) {
+    currentKeys.functionAssessment['component'] = AssesmentFunctionListAsync
+    currentKeys.functionAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'function',
+      label: currentKeys.functionAssessment['title'],
+    }
+  }
+  if (currentKeys?.therapyProtocol) {
+    // TODO: add component for therapyProtocol
+    currentKeys.therapyProtocol['component'] = null
+    currentKeys.therapyProtocol['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.protocolTheraphy,
+    }
+  }
+  if (currentKeys?.chemotherapyProtocol) {
+    currentKeys.chemotherapyProtocol['component'] = ChemoProtocolListAsync
+    currentKeys.chemotherapyProtocol['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.protocolChemotherapy,
+    }
+  }
+  if (currentKeys?.chemotherapyMedicine) {
+    currentKeys.chemotherapyMedicine['component'] = ChemoMedicineProtocolListAsync
+    currentKeys.chemotherapyMedicine['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.medicineProtocolChemotherapy,
+    }
+  }
+  if (currentKeys?.educationAssessment) {
+    // TODO: add component for education assessment
+    currentKeys.educationAssessment['component'] = null
+    currentKeys.educationAssessment['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.generalConsent) {
+    currentKeys.generalConsent['component'] = GeneralConsentListAsync
+    currentKeys.generalConsent['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.patientAmbNote) {
+    currentKeys.patientAmbNote['component'] = CprjAsync
+    currentKeys.patientAmbNote['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.prescription) {
+    currentKeys.prescription['component'] = PrescriptionAsync
+    currentKeys.prescription['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.deviceOrder) {
+    currentKeys.deviceOrder['component'] = DeviceOrderAsync
+    currentKeys.deviceOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.radiologyOrder) {
+    currentKeys.radiologyOrder['component'] = RadiologyOrderAsync
+    currentKeys.radiologyOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.cpLabOrder) {
+    currentKeys.cpLabOrder['component'] = CpLabOrderAsync
+    currentKeys.cpLabOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.microLabOrder) {
+    currentKeys.microLabOrder['component'] = MicroLabOrderAsync
+    currentKeys.microLabOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.paLabOrder) {
+    // TODO: add component for paLabOrder
+    currentKeys.paLabOrder['component'] = null
+    currentKeys.paLabOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.procedureRoomOrder) {
+    currentKeys.procedureRoomOrder['component'] = ProcedureRoomOrderAsync
+    currentKeys.procedureRoomOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.mcuResult) {
+    // TODO: add component for mcuResult
+    currentKeys.mcuResult['component'] = null
+    currentKeys.mcuResult['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.consultation) {
+    currentKeys.consultation['component'] = ConsultationAsync
+    currentKeys.consultation['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.resume) {
+    currentKeys.resume['component'] = ResumeListAsync
+    currentKeys.resume['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.controlLetter) {
+    currentKeys.controlLetter['component'] = ControlLetterListAsync
+    currentKeys.controlLetter['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.refBack) {
+    currentKeys.refBack['component'] = PrbListAsync
+    currentKeys.refBack['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.fkr) {
+    currentKeys.fkr['component'] = KfrListAsync
+    currentKeys.fkr['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.screening) {
+    // TODO: add component for screening
+    currentKeys.screening['component'] = null
+    currentKeys.screening['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.surgeryReport) {
+    currentKeys.surgeryReport['component'] = SurgeryReportListAsync
+    currentKeys.surgeryReport['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.vaccineData) {
+    currentKeys.vaccineData['component'] = VaccineDataListAsync
+    currentKeys.vaccineData['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.supportingDocument) {
+    currentKeys.supportingDocument['component'] = DocUploadListAsync
+    currentKeys.supportingDocument['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.priceList) {
+    // TODO: add component for priceList
+    currentKeys.priceList['component'] = null
+    currentKeys.priceList['props'] = { encounter_id: id }
+  }
+
+  if (currentKeys?.initialNursingStudy) {
+    currentKeys.initialNursingStudy['component'] = InitialNursingStudyAsync
+    currentKeys.initialNursingStudy['props'] = { encounter: data?.encounter }
+  }
+
+  return currentKeys
+}
+
+export function mergeArrayAt<T>(arraysOne: T[], arraysTwo: T[] | T, deleteCount = 0): T[] {
+  const prevItems = arraysOne.slice()
+  if (!prevItems) return prevItems
+  const nextItems = Array.isArray(arraysTwo) ? arraysTwo : [arraysTwo]
+  if (nextItems.length === 0) return prevItems
+  // determine insertion position using the first item's `id` if available
+  const firstId = (nextItems[0] as any)?.afterId || (prevItems[0] as any)?.id
+  let pos = prevItems.length
+  if (typeof firstId === 'string') {
+    const index = prevItems.findIndex((item: any) => item.id === firstId)
+    pos = index < 0 ? Math.max(prevItems.length + index, 0) : Math.min(index, prevItems.length)
+  }
+  prevItems.splice(pos, deleteCount, ...nextItems)
+  return prevItems
+}
+
+// Function to map API response to Encounter structure
+export function mapResponseToEncounter(result: any): any {
+  if (!result) return null
+
+  // Check if patient and patient.person exist (minimal validation)
+  if (!result.patient || !result.patient.person) {
+    return null
+  }
+
+  const mapped: any = {
+    id: result.id || 0,
+    patient_id: result.patient_id || result.patient?.id || 0,
+    patient: {
+      id: result.patient?.id || 0,
+      number: result.patient?.number || '',
+      person: {
+        id: result.patient?.person?.id || 0,
+        name: result.patient?.person?.name || '',
+        birthDate: result.patient?.person?.birthDate || null,
+        gender_code: result.patient?.person?.gender_code || '',
+        residentIdentityNumber: result.patient?.person?.residentIdentityNumber || null,
+        frontTitle: result.patient?.person?.frontTitle || '',
+        endTitle: result.patient?.person?.endTitle || '',
+        addresses: result.patient?.person?.addresses || [],
+      },
+    },
+    registeredAt: result.registeredAt || result.patient?.registeredAt || null,
+    class_code: result.class_code || '',
+    unit_id: result.unit_id || 0,
+    unit: result.unit || null,
+    specialist_id: result.specialist_id || null,
+    subspecialist_id: result.subspecialist_id || null,
+    visitDate: isValidDate(result.visitDate)
+      ? result.visitDate
+      : result.registeredAt || result.patient?.registeredAt || null,
+    adm_employee_id: result.adm_employee_id || 0,
+    adm_employee: result.adm_employee || null,
+    responsible_nurse_code: result.responsible_nurse_code || null,
+    responsible_nurse: result.responsible_nurse || null,
+    appointment_doctor_code: result.appointment_doctor_code || null,
+    appointment_doctor: result.appointment_doctor || null,
+    responsible_doctor_code: result.responsible_doctor_id || null,
+    responsible_doctor: result.responsible_doctor || null,
+    refSource_name: result.refSource_name || null,
+    appointment_id: result.appointment_id || null,
+    earlyEducation: result.earlyEducation || null,
+    medicalDischargeEducation: result.medicalDischargeEducation || '',
+    admDischargeEducation: result.admDischargeEducation || null,
+    discharge_method_code: result.discharge_method_code || null,
+    discharge_reason: result.dischargeReason || result.discharge_reason || null,
+    discharge_date: result.discharge_date || null,
+    status_code: result.status_code || '',
+    // Payment related fields
+    paymentMethod_code:
+      result.paymentMethod_code && result.paymentMethod_code.trim() !== '' ? result.paymentMethod_code : null,
+    trx_number: result.trx_number || null,
+    member_number: result.member_number || null,
+    ref_number: result.ref_number || null,
+  }
+
+  return mapped
+}
+
+export function getMenuItems(
+  id: string | number,
+  props: any,
+  user: any,
+  data: EncounterListData,
+  meta: any,
+) {
+  // const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
+  const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode
+  const currentKeys = injectComponents(id, data, meta)
+  const defaultItems: EncounterItem[] = Object.values(currentKeys)
+  const listItemsForOutpatientRehab = mergeArrayAt(
+    getItemsAll('ambulatory', 'all', defaultItems),
+    getItemsAll('ambulatory', 'rehab', defaultItems),
+  )
+  const listItemsForOutpatientChemo = mergeArrayAt(
+    getItemsAll('ambulatory', 'all', defaultItems),
+    getItemsAll('ambulatory', 'chemo', defaultItems),
+  )
+  const listItems: Record<string, Record<string, Record<string, any>>> = {
+    'installation|ambulatory': {
+      'unit|rehab': {
+        items: listItemsForOutpatientRehab,
+        roles: medicalRoles,
+      },
+      'unit|chemo': {
+        items: listItemsForOutpatientChemo,
+        roles: medicalRoles,
+      },
+      all: getItemsAll('ambulatory', 'all', defaultItems),
+    },
+    'installation|emergency': {
+      all: getItemsAll('emergency', 'all', defaultItems),
+    },
+    'installation|inpatient': {
+      all: getItemsAll('inpatient', 'all', defaultItems),
+    },
+  }
+  const currentListItems = listItems[`installation|${normalClassCode}`]
+  if (!currentListItems) return []
+  const unitCode = user?.unit_code ? `unit|${user.unit_code}` : 'all'
+  const currentUnitItems: any = currentListItems[`${unitCode}`]
+  if (!currentUnitItems) return []
+  let menus = []
+  if (currentUnitItems.roles && currentUnitItems.roles?.includes(user.activeRole)) {
+    menus = [...currentUnitItems.items]
+  } else {
+    menus = unitCode !== 'all' && currentUnitItems?.items ? [...currentUnitItems.items] : [...currentUnitItems]
+  }
+  return menus
+}

From 1a7a69162d10bac40e4fd31abc4fae9754bd9516 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Mon, 8 Dec 2025 11:21:56 +0700
Subject: [PATCH 28/28] feat: Create encounter entry form component for
 patient, doctor, and SEP details.

---
 app/components/app/encounter/entry-form.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 01afe3c3..46ad2db7 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -132,8 +132,8 @@ watch(
       sepNumber.value = objects?.sepNumber || ''
       sepFileReview.value = objects?.sepFileReview || ''
       sippFileReview.value = objects?.sippFileReview || ''
-      if (objects.paymentMethodCode) {
-        paymentMethodCode.value = objects.paymentMethodCode || ''
+      if (objects.paymentType) {
+        paymentMethodCode.value = objects.paymentType || ''
       }
       isDateLoading.value = true
       setTimeout(() => {
@@ -399,7 +399,7 @@ defineExpose({
               v-model="paymentMethodCode"
               v-bind="paymentMethodCodeAttrs"
               :items="payments || []"
-              :disabled="isLoading || isReadonly"
+              :disabled="isLoading || isReadonly || mode === 'edit'"
               placeholder="Pilih Jenis Pembayaran"
             />
           </DE.Field>