From 87a125f5c710805bb8a8e2d166bd67d53f36dc35 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 21 Nov 2025 14:44:29 +0700
Subject: [PATCH] feat(encounter): update encounter pages

---
 .../content/encounter/process-next.vue        | 126 +++++++++++++
 .../content/encounter/process-previous.vue    | 108 -----------
 app/components/content/encounter/process.vue  | 178 ++++++++----------
 .../inpatient/encounter/[id]/process.vue      |   2 +-
 .../outpatient/encounter/[id]/process.vue     |   2 +-
 .../chemotherapy/[id]/process.vue             |   2 +-
 .../rehab/encounter/[id]/process.vue          |   2 +-
 7 files changed, 210 insertions(+), 210 deletions(-)
 create mode 100644 app/components/content/encounter/process-next.vue
 delete mode 100644 app/components/content/encounter/process-previous.vue

diff --git a/app/components/content/encounter/process-next.vue b/app/components/content/encounter/process-next.vue
new file mode 100644
index 00000000..c8e7ad77
--- /dev/null
+++ b/app/components/content/encounter/process-next.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Components
+import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
+import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
+import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
+
+// Libraries
+import { getPositionAs } from '~/lib/roles'
+
+// Types
+import type { EncounterProps } from '~/handlers/encounter-init.handler'
+
+// Handlers
+import { getEncounterData } from '~/handlers/encounter-process.handler'
+import { getMenuItems } from "~/handlers/encounter-init.handler"
+
+const { user, getActiveRole } = useUserStore()
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps<{
+  classCode?: EncounterProps['classCode']
+  subClassCode?: EncounterProps['subClassCode']
+}>()
+
+const activeRole = getActiveRole()
+const activePosition = ref(getPositionAs(activeRole))
+const menus = ref([] as any)
+const activeMenu = computed({
+  get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
+  set: (value: string) => {
+    router.replace({ path: route.path, query: { menu: value } })
+  },
+})
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const data = ref<any>(null)
+const isShowPatient = computed(() => data.value && data.value?.patient?.person)
+
+if (activePosition.value === 'none') { // if user position is none, redirect to home page
+  router.push('/')
+}
+
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
+  {
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
+  },
+  {
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
+  },
+]
+
+const paginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+function handleClick(type: string) {
+  if (type === 'draft') {
+    router.back()
+  }
+}
+
+function initMenus() {
+  menus.value = getMenuItems(id, props, user, activePosition.value, {
+    status: data.value,
+    medicalAssessment: data.value,
+    medicalAssessmentRehab: data.value,
+    functionAssessment: data.value,
+    protocolTheraphy: data.value,
+    protocolChemotherapy: data.value,
+    medicineProtocolChemotherapy: data.value,
+    consultation: data.value,
+    letterOfControl: data.value,
+  }, {
+    protocolTheraphy: paginationMeta,
+    protocolChemotherapy: paginationMeta,
+    medicineProtocolChemotherapy: paginationMeta,
+  })
+  console.log(menus.value)
+}
+
+async function getData() {
+  data.value = await getEncounterData(id)
+}
+
+watch(getActiveRole, () => {
+  const activeRole = getActiveRole()
+  activePosition.value = getPositionAs(activeRole)
+  initMenus()
+})
+
+onMounted(async () => {
+  await getData()
+  initMenus()
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
+    </div>
+    <EncounterPatientInfo v-if="isShowPatient" :data="data" />
+    <EncounterHistoryButtonMenu v-if="isShowPatient" />
+    <SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
+  </div>
+</template>
diff --git a/app/components/content/encounter/process-previous.vue b/app/components/content/encounter/process-previous.vue
deleted file mode 100644
index a6bd32dd..00000000
--- a/app/components/content/encounter/process-previous.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-//
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-import { getDetail } from '~/services/encounter.service'
-
-//
-import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
-import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
-
-import { genEncounter } from '~/models/encounter'
-
-// PLASE ORDER BY TAB POSITION
-import Status from '~/components/content/encounter/status.vue'
-import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
-import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
-import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
-import DeviceOrder from '~/components/content/device-order/main.vue'
-import Prescription from '~/components/content/prescription/main.vue'
-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 DocUploadList from '~/components/content/document-upload/list.vue'
-import GeneralConsentList from '~/components/content/general-consent/entry.vue'
-import ResumeList from '~/components/content/resume/list.vue'
-import ControlLetterList from '~/components/content/control-letter/list.vue'
-
-const route = useRoute()
-const router = useRouter()
-
-// activeTab selalu sinkron dengan query param
-const activeTab = computed({
-  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
-  set: (val: string) => {
-    router.replace({ path: route.path, query: { tab: val } })
-  },
-})
-
-const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const data = ref(genEncounter())
-
-async function fetchDetail() {
-  const res = await getDetail(id, {
-    includes: 'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,EncounterDocuments',
-  })
-  if(res.body?.data) data.value = res.body?.data
-}
-
-onMounted(() => {
-  fetchDetail()
-})
-
-const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
-  {
-    value: 'early-medical-assessment',
-    label: 'Pengkajian Awal Medis',
-    component: EarlyMedicalAssesmentList,
-    props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
-  },
-  {
-    value: 'rehab-medical-assessment',
-    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
-    component: EarlyMedicalRehabList,
-    props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
-  },
-  {
-    value: 'function-assessment',
-    label: 'Asesmen Fungsi',
-    component: AssesmentFunctionList,
-    props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
-  },
-  { value: 'therapy-protocol', label: 'Protokol Terapi' },
-  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
-  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
-  { value: 'patient-note', label: 'CPRJ' },
-  { 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: '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' },
-  { value: 'mcu-result', label: 'Hasil Penunjang' },
-  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
-  { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
-  { value: 'control', label: 'Surat Kontrol' },
-  { value: 'resume', label: 'Resume' },
-  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
-  { value: 'screening', label: 'Skrinning MPP' },
-  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data },  },
-]
-</script>
-
-<template>
-  <div class="w-full">
-    <div class="mb-4">
-      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
-    </div>
-    <AppEncounterQuickInfo :data="data" />
-    <CompTab
-      :data="tabs"
-      :initial-active-tab="activeTab"
-      @change-tab="activeTab = $event"
-    />
-  </div>
-</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index c8e7ad77..a6bd32dd 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -1,126 +1,108 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue'
+//
+import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-// Components
-import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
-import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
-import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
+import { getDetail } from '~/services/encounter.service'
 
-// Libraries
-import { getPositionAs } from '~/lib/roles'
+//
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 
-// Types
-import type { EncounterProps } from '~/handlers/encounter-init.handler'
+import { genEncounter } from '~/models/encounter'
 
-// Handlers
-import { getEncounterData } from '~/handlers/encounter-process.handler'
-import { getMenuItems } from "~/handlers/encounter-init.handler"
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import DeviceOrder from '~/components/content/device-order/main.vue'
+import Prescription from '~/components/content/prescription/main.vue'
+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 DocUploadList from '~/components/content/document-upload/list.vue'
+import GeneralConsentList from '~/components/content/general-consent/entry.vue'
+import ResumeList from '~/components/content/resume/list.vue'
+import ControlLetterList from '~/components/content/control-letter/list.vue'
 
-const { user, getActiveRole } = useUserStore()
 const route = useRoute()
 const router = useRouter()
 
-const props = defineProps<{
-  classCode?: EncounterProps['classCode']
-  subClassCode?: EncounterProps['subClassCode']
-}>()
-
-const activeRole = getActiveRole()
-const activePosition = ref(getPositionAs(activeRole))
-const menus = ref([] as any)
-const activeMenu = computed({
-  get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
-  set: (value: string) => {
-    router.replace({ path: route.path, query: { menu: value } })
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
   },
 })
 
 const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const data = ref<any>(null)
-const isShowPatient = computed(() => data.value && data.value?.patient?.person)
+const data = ref(genEncounter())
 
-if (activePosition.value === 'none') { // if user position is none, redirect to home page
-  router.push('/')
-}
-
-// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
-const protocolRows = [
-  {
-    number: '1',
-    tanggal: new Date().toISOString().substring(0, 10),
-    siklus: 'I',
-    periode: 'Siklus I',
-    kehadiran: 'Hadir',
-    action: '',
-  },
-  {
-    number: '2',
-    tanggal: new Date().toISOString().substring(0, 10),
-    siklus: 'II',
-    periode: 'Siklus II',
-    kehadiran: 'Tidak Hadir',
-    action: '',
-  },
-]
-
-const paginationMeta = {
-  recordCount: protocolRows.length,
-  page: 1,
-  pageSize: 10,
-  totalPage: 1,
-  hasNext: false,
-  hasPrev: false,
-}
-
-function handleClick(type: string) {
-  if (type === 'draft') {
-    router.back()
-  }
-}
-
-function initMenus() {
-  menus.value = getMenuItems(id, props, user, activePosition.value, {
-    status: data.value,
-    medicalAssessment: data.value,
-    medicalAssessmentRehab: data.value,
-    functionAssessment: data.value,
-    protocolTheraphy: data.value,
-    protocolChemotherapy: data.value,
-    medicineProtocolChemotherapy: data.value,
-    consultation: data.value,
-    letterOfControl: data.value,
-  }, {
-    protocolTheraphy: paginationMeta,
-    protocolChemotherapy: paginationMeta,
-    medicineProtocolChemotherapy: paginationMeta,
+async function fetchDetail() {
+  const res = await getDetail(id, {
+    includes: 'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,EncounterDocuments',
   })
-  console.log(menus.value)
+  if(res.body?.data) data.value = res.body?.data
 }
 
-async function getData() {
-  data.value = await getEncounterData(id)
-}
-
-watch(getActiveRole, () => {
-  const activeRole = getActiveRole()
-  activePosition.value = getPositionAs(activeRole)
-  initMenus()
+onMounted(() => {
+  fetchDetail()
 })
 
-onMounted(async () => {
-  await getData()
-  initMenus()
-})
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    component: EarlyMedicalAssesmentList,
+    props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
+  },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    component: EarlyMedicalRehabList,
+    props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    component: AssesmentFunctionList,
+    props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
+  },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
+  { value: 'patient-note', label: 'CPRJ' },
+  { 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: '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' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
+  { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data },  },
+]
 </script>
 
 <template>
   <div class="w-full">
     <div class="mb-4">
-      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
-    <EncounterPatientInfo v-if="isShowPatient" :data="data" />
-    <EncounterHistoryButtonMenu v-if="isShowPatient" />
-    <SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/inpatient/encounter/[id]/process.vue b/app/pages/(features)/inpatient/encounter/[id]/process.vue
index 412a6174..c40dd189 100644
--- a/app/pages/(features)/inpatient/encounter/[id]/process.vue
+++ b/app/pages/(features)/inpatient/encounter/[id]/process.vue
@@ -2,7 +2,7 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import EncounterProcess from '~/components/content/encounter/process.vue'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
diff --git a/app/pages/(features)/outpatient/encounter/[id]/process.vue b/app/pages/(features)/outpatient/encounter/[id]/process.vue
index 725c2c6c..8a44a130 100644
--- a/app/pages/(features)/outpatient/encounter/[id]/process.vue
+++ b/app/pages/(features)/outpatient/encounter/[id]/process.vue
@@ -2,7 +2,7 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import EncounterProcess from '~/components/content/encounter/process.vue'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[id]/process.vue b/app/pages/(features)/outpation-action/chemotherapy/[id]/process.vue
index c02abbc0..0570c0f0 100644
--- a/app/pages/(features)/outpation-action/chemotherapy/[id]/process.vue
+++ b/app/pages/(features)/outpation-action/chemotherapy/[id]/process.vue
@@ -2,7 +2,7 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import EncounterProcess from '~/components/content/encounter/process.vue'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
index 68cc7c02..9708adfd 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -2,7 +2,7 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import EncounterProcess from '~/components/content/encounter/process.vue'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],