Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/patient-63-adjustment

2025-12-08 15:37:35 +07:00
parent 05e2f32197 e4cd02f2ce
commit 1083bb5384
165 changed files with 8528 additions and 1005 deletions
@@ -0,0 +1,34 @@
+<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'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+
+const { mode, goToEntry, goToView } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry({ fromView: false })"
+      @view="goToView"
+    />
+    <View
+      v-else-if="mode === 'view'"
+      :encounter="props.encounter"
+    />
+    <Form v-else />
+  </div>
+</template>
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// type
+import { genDoctor, type Doctor } from '~/models/doctor'
+import type { ActionReportFormData } from '~/schemas/action-report.schema'
+
+// components
+import { toast } from '~/components/pub/ui/toast'
+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<ActionReportFormData>({} as unknown as ActionReportFormData)
+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 ActionReportFormData
+  isLoading.value = false
+  isDataReady.value = true
+}
+</script>
+
+<template>
+  <AppActionReportEntry
+    v-if="isDataReady"
+    :isLoading="isLoading"
+    :mode="entryMode"
+    @submit="(val) => console.log(val)"
+    @back="goBack"
+    @error="
+      (err: Error) => {
+        toast({
+          title: 'Terjadi Kesalahan',
+          description: err.message,
+          variant: 'destructive',
+        })
+      }
+    "
+    :doctors="doctors"
+    :initialValues="reportData"
+  >
+    <template #procedures>
+      <ArrangementProcedurePicker
+        field-name="procedures"
+        title="Tindakan Operatif/Non-Operatif Lain"
+        sub-title="Pilih Prosedur"
+      />
+    </template>
+  </AppActionReportEntry>
+  <div
+    v-else
+    class="flex items-center justify-center p-8"
+  >
+    <p class="text-muted-foreground">Memuat data...</p>
+  </div>
+</template>
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.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/action-report/list.cfg'
+
+// types
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import type { Encounter } from '~/models/encounter'
+
+// Samples
+import { sampleRows, type ActionReportData } from '~/components/app/action-report/sample'
+import sampleReport from './sample'
+
+// helpers
+import { toast } from '~/components/pub/ui/toast'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  (e: 'add'): void
+  (e: 'edit', id: number | string): void
+  (e: 'view', 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(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ActionReportData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+const goEdit = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+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)
+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], (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)
+      goView(id)
+      title.value = 'Detail Konsultasi'
+      break
+    case ActionEvents.showEdit:
+      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>
+
+<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"
+        />
+        <ButtonAction
+          preset="custom"
+          title="Filter List Laporan Tindakan"
+          label="Filter"
+          icon="i-lucide-filter"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+      </div>
+
+      <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">
+      <AppActionReportList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+
+  <Dialog
+    v-model:open="isDialogOpen"
+    title="Arsip Riwayat Laporan Tindakan"
+    size="2xl"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        isDialogOpen = value
+      }
+    "
+  >
+    <AppActionReportListHistory
+      :data="filtered"
+      :pagination-meta="{
+        recordCount: 2,
+        page: 1,
+        pageSize: 10,
+        totalPage: 1,
+        hasPrev: false,
+        hasNext: false,
+      }"
+    />
+  </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>
@@ -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',
+    },
+  ],
+}
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// types
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
+import { type Encounter } from '~/models/encounter'
+
+// Components
+import AppActionReportPreview from '~/components/app/action-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<{
+  encounter: Encounter
+}>()
+
+// #endregion
+
+// #region State & Computed
+const reportData = ref<ActionReportFormData | 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 ActionReportFormData
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function onEdit() {
+  router.push({
+    name: 'action-report-id-edit',
+    params: { id: 100 },
+  })
+}
+function onBack() {}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <AppActionReportPreview
+    v-if="reportData"
+    :data="reportData"
+    @back="backToList"
+    @edit="onEditFromView"
+  />
+</template>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,34 @@
+<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'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+
+const { mode, goToEntry, goToView } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry({ fromView: false })"
+      @view="goToView"
+    />
+    <View
+      v-else-if="mode === 'view'"
+      :encounter="props.encounter"
+    />
+    <Form v-else />
+  </div>
+</template>
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// type
+import { genDoctor, type Doctor } from '~/models/doctor'
+import type { ActionReportFormData } from '~/schemas/action-report.schema'
+
+// components
+import { toast } from '~/components/pub/ui/toast'
+import AppAssessmentEducationEntry from '~/components/app/assessment-education/entry.vue'
+
+// states
+const route = useRoute()
+const { mode, goBack } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+const reportData = ref<ActionReportFormData>({} as unknown as ActionReportFormData)
+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 ActionReportFormData
+  isLoading.value = false
+  isDataReady.value = true
+}
+</script>
+
+<template>
+  <AppAssessmentEducationEntry
+    v-if="isDataReady"
+    :isLoading="isLoading"
+    :mode="entryMode"
+    @submit="(val: {}) => console.log(val)"
+    @back="goBack"
+    @error="
+      (err: Error) => {
+        toast({
+          title: 'Terjadi Kesalahan',
+          description: err.message,
+          variant: 'destructive',
+        })
+      }
+    "
+    :doctors="doctors"
+    :initialValues="reportData"
+  />
+
+  <div
+    v-else
+    class="flex items-center justify-center p-8"
+  >
+    <p class="text-muted-foreground">Memuat data...</p>
+  </div>
+</template>
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import AppAssessmentEducationList from '~/components/app/assessment-education/list.vue'
+import AppAssessmentEducationListHistory from '~/components/app/assessment-education/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/assessment-education/list.cfg'
+
+// types
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import type { Encounter } from '~/models/encounter'
+
+// Samples
+import { sampleRows, type AssessmentEducationData } from '~/components/app/assessment-education/sample'
+import sampleReport from './sample'
+
+// helpers
+import { toast } from '~/components/pub/ui/toast'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  (e: 'add'): void
+  (e: 'edit', id: number | string): void
+  (e: 'view', 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(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ActionReportData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+const goEdit = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+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)
+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], (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)
+      goView(id)
+      title.value = 'Detail Konsultasi'
+      break
+    case ActionEvents.showEdit:
+      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>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Asesmen Kebutuhan Edukasi</h1>
+      <p class="mt-1 text-sm text-gray-500">Manajemen asesmen kebutuhan edukasi pasien rawat jalan</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"
+        />
+        <ButtonAction
+          preset="custom"
+          title="Filter List Asesmen"
+          label="Filter"
+          icon="i-lucide-filter"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+      </div>
+
+      <div class="ml-auto flex items-center gap-2">
+        <ButtonAction
+          preset="custom"
+          title="Riwayat"
+          icon="i-lucide-history"
+          label="Riwayat"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+        <ButtonAction
+          preset="add"
+          title="Tambah Asesmen"
+          icon="i-lucide-plus"
+          label="Asesmen"
+          @click="
+            () => {
+              goToEntry()
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <div class="overflow-x-auto p-4">
+      <AppAssessmentEducationList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+
+  <Dialog
+    v-model:open="isDialogOpen"
+    title="Arsip Riwayat Asesmen Kebutuhan Edukasi"
+    size="2xl"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        isDialogOpen = value
+      }
+    "
+  >
+    <AppAssessmentEducationListHistory
+      :data="filtered"
+      :pagination-meta="{
+        recordCount: 2,
+        page: 1,
+        pageSize: 10,
+        totalPage: 1,
+        hasPrev: false,
+        hasNext: false,
+      }"
+    />
+  </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>
@@ -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',
+    },
+  ],
+}
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// types
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
+import { type Encounter } from '~/models/encounter'
+
+// Components
+import AppActionReportPreview from '~/components/app/action-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<{
+  encounter: Encounter
+}>()
+
+// #endregion
+
+// #region State & Computed
+const reportData = ref<ActionReportFormData | 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 ActionReportFormData
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function onEdit() {
+  router.push({
+    name: 'action-report-id-edit',
+    params: { id: 100 },
+  })
+}
+function onBack() {}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <AppActionReportPreview
+    v-if="reportData"
+    :data="reportData"
+    @back="backToList"
+    @edit="onEditFromView"
+  />
+</template>
@@ -10,13 +10,14 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { type ControlLetter } from '~/models/control-letter'

 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
  callbackUrl?: string
-}>()
+}>(), {
+
+})

 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const controlLetterForm = ref<ExposedForm<any> | null>(null)
 // #endregion

@@ -72,7 +73,7 @@ async function composeFormData(): Promise<ControlLetter> {
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = controlLetter?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
  return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { withBase } from '~/models/_base'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import type { Patient } from '~/models/patient'
-import type { Person } from '~/models/person'
 import { getDetail } from '~/services/control-letter.service'

 // Components
@@ -11,18 +8,19 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { ControlLetter } from '~/models/control-letter'

 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => {},
+})

 // #endregion

 // #region State & Computed

-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
-
 const controlLetter = ref<ControlLetter | null>(null)

 const headerPrep: HeaderPrep = {
@@ -34,7 +32,7 @@ const headerPrep: HeaderPrep = {

 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(controlLetterId, {
+  const result = await getDetail(props.record_id, {
    includes: "unit,specialist,subspecialist,doctor-employee-person",
  })
  if (result.success) {
@@ -54,11 +52,7 @@ function goBack() {
 function handleAction(type: string) {
  switch (type) {
    case 'edit':
-      // TODO: Handle edit action
-      navigateTo({
-        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
-        params: { id: encounterId, "control_letter_id": controlLetterId },
-      })
+      props.redirectToForm(props.record_id)
      break

    case 'back':
@@ -1,17 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
-import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/control-letter.service'

 import {
@@ -26,27 +16,26 @@ import {
 } from '~/handlers/control-letter.handler'

 import { toast } from '~/components/pub/ui/toast'
-import { withBase } from '~/models/_base'
-import type { Person } from '~/models/person'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ControlLetter } from '~/models/control-letter'
 import { ControlLetterSchema } from '~/schemas/control-letter.schema'
 import { formatDateYyyyMmDd } from '~/lib/date'

 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
  callbackUrl?: string
-}>()
+  record_id: number 
+}>(), {
+
+})

 // form related state
 const controlLetterForm = ref<ExposedForm<any> | null>(null)
 // #endregion

 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0

 const isConfirmationOpen = ref(false)
 const controlLetter = ref({})
@@ -58,7 +47,7 @@ const selectedSubSpecialistId = ref<number|null>(null)

 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(controlLetterId)
+  const result = await getDetail(props.record_id)
  if (result.success) {
    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
    selectedUnitId.value = responseData?.unit_code
@@ -78,7 +67,7 @@ function goBack() {

 async function handleConfirmAdd() {
  const response = await handleActionEdit(
-    controlLetterId,
+    props.record_id,
    await composeFormData(),
    () => { },
    () => { },
@@ -99,7 +88,7 @@ async function composeFormData(): Promise<ControlLetter> {
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = controlLetter?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
  return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -13,24 +13,28 @@ import type { Encounter } from '~/models/encounter'
 import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
 // import type { PagePermission } from '~/models/role'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import { permissions } from '~/const/page-permission/chemoteraphy'
+import { permissions } from '~/const/page-permission/ambulatory'
 import { unauthorizedToast } from '~/lib/utils'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 import HistoryDialog from '~/components/app/control-letter/history-dialog.vue'
+import type { RoleAccesses } from '~/models/role'
 // #endregion

 // #region Permission
-const roleAccess = permissions['/rehab/encounter'] || {}
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)

 // #region State
-const props = defineProps<{
-  encounter?: Encounter
-}>()
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
+}>(), {
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
+})

 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
@@ -73,10 +77,11 @@ const headerPrep: HeaderPrep = {
 if (pagePermission.canCreate) {
  headerPrep.addNav = {
    label: "Surat Kontrol",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-control-letter-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      console.log('redirectToForm')
+      console.log(props.redirectToForm())
+      props.redirectToForm()
+    },
  }
 }
 // #endregion
@@ -136,18 +141,12 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction, timestamp], () => {
  switch (recAction.value) {
    case ActionEvents.showDetail:
-      navigateTo({
-        name: 'rehab-encounter-id-control-letter-control_letter_id',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
+      props.redirectToDetail(recId.value)
      break

    case ActionEvents.showEdit:
      if(pagePermission.canUpdate){ 
-        navigateTo({
-          name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
-          params: { id: encounterId, "control_letter_id": recId.value },
-        })
+        props.redirectToForm(recId.value)
      } else {
        unauthorizedToast()
      }
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Add from './add.vue'
+import Edit from './edit.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Add v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && !crudQueryParams.recordId"
+    :encounter_id="encounter_id" />
+  <Edit v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
@@ -10,13 +10,13 @@ import { toFormData } from '~/lib/utils'
 import { uploadAttachment } from '~/services/supporting-document.service'

 // #region Props & Emits
-const props = defineProps<{
-  callbackUrl?: string
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number 
+}>(), {
+
+})

 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
 const { user } = useUserStore()
 // #endregion
@@ -43,20 +43,14 @@ async function handleConfirmAdd() {
  const inputFormData: FormData = toFormData(inputData)

  const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
-  const data = (response?.body?.data ?? null)
-  if (!data) return
-
-  // // If has callback provided redirect to callback with patientData
-  if (props.callbackUrl) {
-    navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
-  }
+  // const data = (response?.body?.data ?? null)
  goBack()
 }

 async function composeFormData(): Promise<any> {
  inputForm.value?.setValues({
    ...inputForm.value?.values,
-    ref_id: encounterId,
+    ref_id: props.encounter_id,
    upload_employee_id: user.employee_id
  })

@@ -83,13 +77,7 @@ async function handleActionClick(eventType: string) {
    isConfirmationOpen.value = true
  }

-  if (eventType === 'back') {
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-    goBack()
-  }
+  if (eventType === 'back') goBack()
 }

 function handleCancelAdd() {
@@ -8,15 +8,15 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
 import { getDetail } from '~/services/supporting-document.service'

-// #region Props & Emits
-const props = defineProps<{
-  callbackUrl?: string
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number 
+  record_id: number 
+}>(), {
+  
+})

 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const docId = typeof route.params.document_id == 'string' ? parseInt(route.params.document_id) : 0
+const docId = props.record_id
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion

@@ -77,7 +77,7 @@ async function composeFormData(): Promise<any> {
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = inputFormState?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
  return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -88,14 +88,7 @@ async function handleActionClick(eventType: string) {
    isConfirmationOpen.value = true
  }

-  if (eventType === 'back') {
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-
-    goBack()
-  }
+  if (eventType === 'back') goBack()
 }

 function handleCancelAdd() {
@@ -109,7 +102,7 @@ function handleCancelAdd() {

 <template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-    <h1>Upload Dokumen</h1>
+    <h1>Update Upload Dokumen</h1>
  </div>
  <AppDocumentUploadEntryForm
    ref="inputForm"
@@ -9,33 +9,30 @@ import type { Encounter } from '~/models/encounter'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
-import type { PagePermission } from '~/models/role'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import type { Permission, RoleAccesses, } from '~/models/role'
 import { unauthorizedToast } from '~/lib/utils'
+import { permissions } from '~/const/page-permission/ambulatory'
+import { usePageChecker } from '~/lib/page-checker'
 // #endregion


 // #region Permission
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
-
-// const {user,userRole} = useUserStore()
-// const {getUserPermissions} = useRBAC()
 // #endregion

 // #region State
-const props = defineProps<{
-  encounter?: Encounter
-  refresh: () => void
-}>()
-
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => { }
+})

 const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
  fetchFn: (params) => getList({
-    'encounter-id': encounterId,
+    'encounter-id': props.encounter_id,
    // includes: "employee",
    ...params,
  }),
@@ -56,10 +53,9 @@ const headerPrep: HeaderPrep = {
 if (pagePermission.canCreate) {
  headerPrep.addNav = {
    label: "Upload Dokumen",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-document-upload-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
   }
 }

@@ -78,6 +74,7 @@ const refSearchNav: RefSearchNav = {

 // #region Lifecycle Hooks
 onMounted(() => {
+
 })
 // #endregion

@@ -99,7 +96,6 @@ async function handleConfirmDelete(record: any, action: string) {
  }
 }

-
 function handleCancelConfirmation() {
  // Reset record state when cancelled
  recId.value = 0
@@ -124,10 +120,7 @@ watch([recId, recAction, timestamp], () => {

    case ActionEvents.showEdit:
      if(pagePermission.canUpdate){
-        navigateTo({
-          name: 'rehab-encounter-id-document-upload-document_id-edit',
-          params: { id: encounterId, "document_id": recId.value },
-        })
+        props.redirectToForm(recId.value)
      } else {
        unauthorizedToast()
      }
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Add from './add.vue'
+import Edit from './edit.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list" :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+  <Add v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && !crudQueryParams.recordId" :encounter_id="encounter_id" />
+  <Edit v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && crudQueryParams.recordId"
+    :encounter_id="encounter_id" 
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+</template>
@@ -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
@@ -142,10 +142,10 @@ async function getPatientList() {
  try {
    const params: any = { includes: includesParams, ...filterParams.value }
    if (props.classCode) {
-      params.class_code = props.classCode
+      params['class-code'] = props.classCode
    }
    if (props.subClassCode) {
-      params.sub_class_code = props.subClassCode
+      params['sub-class-code'] = props.subClassCode
    }
    const result = await getEncounterList(params)
    if (result.success) {
@@ -29,8 +29,10 @@ 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 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 SummaryMedic from '~/components/content/summary-medic/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
 import ControlLetterList from '~/components/content/control-letter/list.vue'
 import InitialNursingStudy from '~/components/content/initial-nursing/entry.vue'
@@ -56,7 +58,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) => {
@@ -101,6 +103,13 @@ const protocolRows = [
  { value: 'therapy-protocol', label: 'Protokol Terapi' },
  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
  { value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
+  { value: 'summary-medic', label: 'Profil Ringkasan Medis', component: SummaryMedic, props: { encounter: data } },
+  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
+  { 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.value.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.id } },
  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
  {
    value: 'initial-nursing-study',
@@ -108,11 +117,6 @@ const protocolRows = [
    component: InitialNursingStudy,
    props: { encounter: data },
  },
-  { 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.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' },
@@ -121,6 +125,13 @@ const protocolRows = [
  { 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: ActionReport,
+    props: { encounter: data },
+  },
  {
    value: 'supporting-document',
    label: 'Upload Dokumen Pendukung',
@@ -117,7 +117,6 @@ async function actionHandler(type: string) {
      })
    }

-    console.log('data', result)
    const resp = await handleActionSave(
      {
        ...payload.value,
@@ -1,70 +1,198 @@
 <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'
+import { getValueLabelList as getItemGroupList } from '~/services/item.service'
+
+const items = 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,
+    })
+    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 () => {
+  items.value = await getItemGroupList()
+  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"
+      :items="items"
+      :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>
@@ -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 { itemGroupCodes } 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'
+
+// 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(recItem?.code ? recItem.code : recId, values, () => {
+              getItemList()
+              onResetState()
+            }, 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>
@@ -10,17 +10,16 @@ import { getDetail } from '~/services/kfr.service';

 // #region Props & Emits
 const props = withDefaults(defineProps<{
+  encounter_id: number
  callbackUrl?: string
-  mode?: 'add' | 'edit'
+  record_id: number 
 }>(), {
-  mode: "add",
+
 })

 // form related state
 const route = useRoute()
-
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const kfrId = typeof route.params.kfr_id == 'string' ? parseInt(route.params.kfr_id) : 0
+const mode = computed(() => props.record_id ? `edit` : `add`)
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion

@@ -31,13 +30,13 @@ const isConfirmationOpen = ref(false)

 // #region Lifecycle Hooks
 onMounted(() => {
-  if(props.mode === `edit`) init()
+  if(mode.value === `edit`) init()
 })
 // #endregion

 // #region Functions
 async function init(){
-  const result = await getDetail(kfrId)
+  const result = await getDetail(props.record_id)
  if (result.success) {
    const currentValue = result.body?.data || {}
    inputForm.value?.setValues(currentValue)
@@ -50,7 +49,7 @@ function goBack() {

 async function handleConfirmAdd() {
  const inputData: any = await composeFormData()
-  const response = props.mode === `add` 
+  const response = mode.value === `add` 
  ? await handleActionSave(
      inputData,
      () => { },
@@ -58,7 +57,7 @@ async function handleConfirmAdd() {
      toast,
    )
  : await handleActionEdit(
-      kfrId,
+      props.record_id,
      inputData,
      () => { },
      () => { },
@@ -82,7 +81,7 @@ async function composeFormData(): Promise<any> {
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id

  return new Promise((resolve) => resolve(formData))
 }
@@ -123,7 +122,7 @@ const initial = {

 <template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-    {{ props.mode === "add" ? `Tambah` : `Update` }} Formulir Rawat Jalan KFR
+    Formulir Rawat Jalan KFR
  </div>
  <AppKfrEntry
    ref="inputForm"
@@ -27,10 +27,12 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 interface Props {
  encounter: Encounter
 }
-const props = defineProps<Props>()
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const kfrId = typeof route.params.kfr_id == 'string' ? parseInt(route.params.kfr_id) : 0
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => { }
+})
 // #endregion

 // #region State
@@ -104,17 +106,16 @@ const addBtnTxt = computed(() => {
  }
  return `Tambah Asesmen`
 })
-
-  const headerPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
    title: "Formulir Rawat Jalan KFR",
    icon: 'i-lucide-newspaper',
  }
 if(isDoctor.value || isAdmin.value) {
  headerPrep.addNav = {
    label: addBtnTxt.value,
-    onClick: () => navigateTo({
-      name: 'rehab-encounter-id-kfr-add',
-    }),
+    onClick: () => {
+      props.redirectToForm()
+    },
  }
 }
 if(!isAssessment.value) {
@@ -283,12 +284,7 @@ watch([recId, recAction, timestamp], () => {
  switch (recAction.value) {
    case ActionEvents.showEdit:
      // if(pagePermission.canUpdate) { 
-      navigateTo({
-        name: 'rehab-encounter-id-kfr-kfr_id-edit',
-        params: {
-          kfr_id: kfrId
-        }
-      })
+      props.redirectToForm(recId.value)
      // } else {
      //   unauthorizedToast()
      // }
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
@@ -131,6 +131,7 @@ async function getItems() {

  <Detail :data="data" />

+  <div class="font-semibold pt-4 text-sm mb-1">Daftar Item</div>
  <ItemListEntry
    :data="items"
    @requestItem="requestItem"/>
@@ -11,17 +11,18 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { Prb } from '~/models/prb'

 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+}>(), {
+  
+})

 // #endregion

 // #region State & Computed

-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
 const Prb = ref<Prb | null>(null)

 const headerPrep: HeaderPrep = {
@@ -4,21 +4,11 @@ import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
 import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/prb.service'
 import type { Prb } from '~/models/prb'
 import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'

 import { toast } from '~/components/pub/ui/toast'
-import { withBase } from '~/models/_base'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { PrbSchema } from '~/schemas/prb.schema'
 import { formatDateYyyyMmDd } from '~/lib/date'
@@ -29,8 +19,10 @@ import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types
 import { formatDateToDatetimeLocal } from '~/lib/utils'

 // #region Props & Emits
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
  callbackUrl?: string
+  record_id: number 
  isBpjs?: boolean
 }>(), {
  isBpjs: false,
@@ -44,11 +36,7 @@ const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSe
 // #endregion

 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
-
 const inputForm = ref<ExposedForm<any> | null>(null)
 const Prb = ref({})
 const isConfirmationOpen = ref(false)
@@ -60,7 +48,7 @@ provide("isSepDialogOpen", isSepDialogOpen);

 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(PrbId)
+  const result = await getDetail(props.record_id)
  if (result.success) {
    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
    Prb.value = responseData
@@ -76,7 +64,7 @@ function goBack() {

 async function handleConfirmAdd() {
  const response = await handleActionEdit(
-    PrbId,
+    props.record_id,
    await composeFormData(),
    () => { },
    () => { },
@@ -97,7 +85,7 @@ async function composeFormData(): Promise<Prb> {
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
  return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -19,13 +19,16 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'

 // #region State
 const props = withDefaults(defineProps<{
-  encounter?: Encounter
+  encounter_id: number
  isBpjs?: boolean
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
 }>(), {
  isBpjs: false,
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
 })
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const { user } = useUserStore()

 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getList({ ...params, includes: '', }),
@@ -66,10 +69,9 @@ const headerPrep: HeaderPrep = {
 if(true){
  headerPrep.addNav = {
    label: "Program Rujuk Balik",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-prb-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
  };
 }
 headerPrep.components = [
@@ -134,10 +136,7 @@ provide('isHistoryDialogOpen', isHistoryDialogOpen)
 watch([recId, recAction, timestamp], () => {
  switch (recAction.value) {
    case ActionEvents.showEdit:
-      navigateTo({
-        name: 'rehab-encounter-id-prb-prb_id-edit',
-        params: { id: encounterId, "prb_id": recId.value },
-      })
+      props.redirectToForm(recId.value)
      break

    case ActionEvents.showPrint:
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
@@ -132,9 +132,20 @@ async function getItems() {

  <Detail :data="data" />

+  <div class="mb-5">
+    <div>Keterangan Klinis</div>
+    <Textarea />
+  </div>
+
  <ItemListEntry
    :data="items"
    @requestItem="requestItem"/>
+
+  <div class="my-5">
+    <div>Catatan Pemeriksaan DSA</div>
+    <Textarea />
+  </div>
+
  <Separator class="my-5" />

  <div class="w-full flex justify-center">
@@ -13,9 +13,13 @@ import FarmacyHistoryDialog from '~/components/app/resume/history-list/farmacy-h
 import NationalProgramHistoryDialog from '~/components/app/resume/history-list/national-program-history-dialog.vue';

 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  encounter_id: number
  callbackUrl?: string
-}>()
+  record_id: number 
+}>(), {
+
+})

 // form related state
 const personPatientForm = ref<ExposedForm<any> | null>(null)
@@ -19,18 +19,27 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ExposedForm } from '~/types/form'
 import { VerificationSchema } from '~/schemas/verification.schema'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
-import type { PagePermission } from '~/models/role'
+import type { RoleAccesses } from '~/models/role'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 import { unauthorizedToast } from '~/lib/utils'
+import { permissions } from '~/const/page-permission/ambulatory'
 // #endregion


 // #region Permission
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
+// #endregion

 // #region State
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => { }
+})
+
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
  entityName: 'patient',
@@ -67,7 +76,9 @@ const headerPrep: HeaderPrep = {
  if (pagePermission.canCreate) {
    headerPrep.addNav = {
      label: "Resume",
-      onClick: () => navigateTo('/resume/add'),
+      onClick: () => {
+        props.redirectToForm()
+      },
    }
  }
 // #endregion
@@ -158,6 +169,7 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction], () => {
    switch (recAction.value) {
      case ActionEvents.showVerify:
+          isVerifyDialogOpen.value = true
        if(pagePermission.canUpdate) { 
          isVerifyDialogOpen.value = true
        } else {
@@ -165,6 +177,7 @@ watch([recId, recAction], () => {
        }
        break
      case ActionEvents.showValidate:
+          isRecordConfirmationOpen.value = true
        if(pagePermission.canUpdate) {        
          isRecordConfirmationOpen.value = true
        } else {
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Entry from './add.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode'
+
+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 route = useRoute()
+
+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>
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/summary-medic/entry.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { SummaryMedicSchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+// Services
+import { getDetail } from '~/services/summary-medic.service'
+const { backToList } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+
+const route = useRoute()
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const isOpenFungsional = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const fungsional = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const selectedFungsional = ref<any>(null)
+const schema = SummaryMedicSchema
+const payload = ref({
+  typeCode: 'amb-resume',
+  encounter_id: 0,
+  time: '',
+  value: '',
+})
+const model = ref({
+  date: '',
+  doctor: '',
+  diagnosis: '',
+  essay: '',
+  plan: '',
+  note: '',
+})
+
+const fileUrl = ref('')
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getDiagnoses() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/diagnose-src')
+  if (resp.success) {
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  const mode = route.query.mode
+  const recordId = route.query['record-id']
+  if (mode === 'entry' && recordId) {
+  }
+})
+
+// TODO: mapping data detail when edit
+const loadEntryForEdit = async (id: number) => {
+  const result = await getDetail(id)
+
+  if (result?.success) {
+    console.log('model', model.value)
+  }
+}
+
+function handleClick(type: string) {
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  } else if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
+}
+const entryGeneralConsent = ref()
+async function actionHandler(type: string) {
+  if (type === 'back') {
+    backToList()
+    return
+  }
+  if (type === 'print') {
+    return
+  }
+  const result = await entryGeneralConsent.value?.validate()
+  if (result?.valid) {
+    // if (result.data.relatives.length > 0) {
+    //   result.data.relatives = result.data.relatives.map((item: any) => {
+    //     return item.name
+    //   })
+    // }
+
+    console.log('data', result)
+    const resp = await handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      () => {},
+      () => {},
+      toast,
+    )
+    backToList()
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    // icdPreview.value.procedures = selectedProcedure.value || []
+    // icdPreview.value.diagnoses = selectedDiagnose.value || []
+    // icdPreview.value.fungsional = selectedFungsional.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
+provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
+</script>
+<template>
+  <Entry
+    ref="entryGeneralConsent"
+    v-model="model"
+    :schema="schema"
+    @click="handleClick"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Preview General Content"
+    size="xl"
+    prevent-outside
+  >
+    <embed
+      style="width: 100%; height: 90vh"
+      :src="fileUrl"
+    />
+  </Dialog>
+</template>
@@ -0,0 +1,185 @@
+<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'
+import List from '~/components/app/soapi/list.vue'
+import Entry from '~/components/app/summary-medic/entry.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { GeneralConsentSchema, type GeneralConsentFormData } from '~/schemas/general-consent.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/summary-medic.handler'
+
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+const router = useRouter()
+const route = useRoute()
+
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      'encounter-id': route.params.id,
+      includes: 'encounter,employee',
+      'type-code': 'amb-resume',
+      search,
+      page,
+    })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'summary-medic',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Profil Ringkasan Medis',
+  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: () => {
+      goToEntry()
+    },
+  },
+}
+
+const goEdit = (id: string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+const today = new Date()
+
+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, () => {
+  console.log('recId', recId.value)
+  if (recAction.value === ActionEvents.showEdit) {
+    goEdit(recId.value)
+    return
+  } else {
+    isRecordConfirmationOpen.value = true
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, 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>
@@ -11,17 +11,18 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { SurgeryReport } from '~/models/surgery-report'

 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+}>(), {
+  
+})

 // #endregion

 // #region State & Computed

-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const surgeryReportId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
 const surgeryReport = ref<SurgeryReport | null>(null)

 const headerPrep: HeaderPrep = {
@@ -33,11 +34,11 @@ const headerPrep: HeaderPrep = {

 // #region Lifecycle Hooks
 // onMounted(async () => {
-//   const result = await getDetail(controlLetterId, {
+//   const result = await getDetail(props.record_id, {
 //     includes: "unit,specialist,subspecialist,doctor-employee-person",
 //   })
 //   if (result.success) {
-//     controlLetter.value = result.body?.data
+//     surgeryReport.value = result.body?.data
 //   }
 // })
 // #endregion
@@ -28,9 +28,13 @@ import { handleActionEdit } from '~/handlers/surgery-report.handler'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'

 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
  callbackUrl?: string
-}>()
+  record_id: number 
+}>(), {
+
+})

 // form related state
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
@@ -40,10 +44,7 @@ const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSe
 // #endregion

 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const surgeryReportId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0

 const inputForm = ref<ExposedForm<any> | null>(null)
 const surgeryReport = ref({})
@@ -53,7 +54,7 @@ const selectedOperativeAction = ref<any>(null)

 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(surgeryReportId)
+  const result = await getDetail(props.record_id)
  if (result.success) {
    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
    surgeryReport.value = responseData
@@ -69,7 +70,7 @@ function goBack() {

 async function handleConfirmAdd() {
  const response = await handleActionEdit(
-    surgeryReportId,
+    props.record_id,
    await composeFormData(),
    () => { },
    () => { },
@@ -90,7 +91,7 @@ async function composeFormData(): Promise<SurgeryReport> {
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
  return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -16,11 +16,14 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 // #endregion

 // #region State
-const props = defineProps<{
-  encounter?: Encounter
-}>()
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const props = withDefaults(defineProps<{
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
+}>(), {
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
+})

 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
@@ -42,10 +45,9 @@ const headerPrep: HeaderPrep = {
  icon: 'i-lucide-history',
  addNav: {
    label: "Laporan Operasi",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-surgery-report-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
  },
 }
 const refSearchNav: RefSearchNav = {
@@ -125,23 +127,14 @@ provide('isHistoryDialogOpen', isHistoryDialogOpen)
 watch([recId, recAction], () => {
  switch (recAction.value) {
    case ActionEvents.showDetail:
-      navigateTo({
-        name: 'rehab-encounter-id-surgery-report-control_letter_id',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
+      props.redirectToDetail(recId.value)
      break

    case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
-      navigateTo({
-        name: 'rehab-encounter-id-surgery-report-control_letter_id-edit',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
+      props.redirectToForm(recId.value)
      break

    case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
      isRecordConfirmationOpen.value = true
      break
  }
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
@@ -11,17 +11,18 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { VaccineData } from '~/models/vaccine-data'

 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+}>(), {
+  
+})

 // #endregion

 // #region State & Computed

-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
 const VaccineData = ref<VaccineData | null>(null)

 const headerPrep: HeaderPrep = {
@@ -1,21 +1,9 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
-import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/vaccine-data.service'
 import type { VaccineData } from '~/models/vaccine-data'
-import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'

 import { toast } from '~/components/pub/ui/toast'
 import { withBase } from '~/models/_base'
@@ -25,12 +13,13 @@ import { formatDateYyyyMmDd } from '~/lib/date'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { getList, remove } from '~/services/vaccine-data.service'
 import { handleActionEdit, handleActionSave } from '~/handlers/vaccine-data.handler'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 import { formatDateToDatetimeLocal } from '~/lib/utils'

 // #region Props & Emits
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
  callbackUrl?: string
+  record_id: number 
  isBpjs?: boolean
 }>(), {
  isBpjs: false,
@@ -44,11 +33,7 @@ const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSe
 // #endregion

 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
-
 const inputForm = ref<ExposedForm<any> | null>(null)
 const VaccineData = ref({})
 const isConfirmationOpen = ref(false)
@@ -60,7 +45,7 @@ provide("isSepDialogOpen", isSepDialogOpen);

 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(VaccineDataId)
+  const result = await getDetail(props.record_id)
  if (result.success) {
    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
    VaccineData.value = responseData
@@ -96,7 +81,7 @@ async function composeFormData(): Promise<VaccineData> {
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
  return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -20,14 +20,16 @@ import { medicalRoles } from '~/const/common/role'

 // #region State
 const props = withDefaults(defineProps<{
-  encounter?: Encounter
+  encounter_id: number
  isBpjs?: boolean
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
 }>(), {
  isBpjs: false,
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
 })
-const route = useRoute()
-const {user} = useUserStore()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const { user } = useUserStore()

 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getList({ ...params, includes: '', }),
@@ -61,10 +63,9 @@ const headerPrep: HeaderPrep = {
 if(user.activeRole === 'emp|doc' || user.activeRole === 'system') {
  headerPrep.addNav = {
    label: "Data Vaksin",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-vaccine-data-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
  };
 }
 // #endregion
@@ -123,10 +124,7 @@ provide('isHistoryDialogOpen', isHistoryDialogOpen)
 watch([recId, recAction, timestamp], () => {
  switch (recAction.value) {
    case ActionEvents.showDetail:
-      navigateTo({
-        name: 'rehab-encounter-id-vaccine-data-vaccine_data_id',
-        params: { id: encounterId, "vaccine_data_id": recId.value },
-      })
+      props.redirectToDetail(recId.value)
      break

    case ActionEvents.showConfirmDelete:
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>