fix: refactor process content

app/components/content/encounter/process-next.vue

@@ -0,0 +1,290 @@
+<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 CompMenu from '~/components/pub/my-ui/comp-menu/comp-menu.vue'
+
+// Libraries
+import { getPositionAs } from '~/lib/roles'
+
+// Types
+import type { EncounterProps } from '~/handlers/encounter-process.handler'
+
+// Services
+import { getDetail } from '~/services/encounter.service'
+
+// Handlers
+import { getIndexById, listItems, mapResponseToEncounter } from '~/handlers/encounter-process.handler'
+
+const StatusAsync = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+const AssesmentFunctionListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const EarlyMedicalAssesmentListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const EarlyMedicalRehabListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const PrescriptionAsync = defineAsyncComponent(() => import('~/components/content/prescription/main.vue'))
+// const PrescriptionListAsync = defineAsyncComponent(() => import('~/components/content/prescription/list.vue'))
+const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
+const RadiologyAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
+const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
+const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
+const ProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.protocol.vue'))
+const MedicineProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.medicine.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 } })
+  },
+})
+
+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('/')
+}
+
+console.log(JSON.stringify(user, null, 4))
+
+// 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,
+}
+
+async function getData() {
+  try {
+    const dataRes = await getDetail(id, {
+      includes:
+        'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person',
+    })
+    const dataResBody = dataRes.body ?? null
+    const result = dataResBody?.data ?? null
+
+    if (result) {
+      const mappedData = mapResponseToEncounter(result)
+      if (mappedData) {
+        data.value = mappedData
+      } else {
+        data.value = null
+      }
+    } else {
+      data.value = null
+    }
+  } catch (error) {
+    console.error('Error fetching encounter data:', error)
+    data.value = null
+  }
+}
+
+function getMenus() {
+  const currentListItems = listItems[`installation|${props.classCode}`];
+  if (!currentListItems) return []
+  const unitCode = user?.unit?.code ? `unit|${user.unit.code}` : 'all';
+  const currentUnitItems = currentListItems[`${unitCode}`];
+  if (!currentUnitItems) return []
+  if (currentUnitItems.roles && currentUnitItems.roles?.some((role: string) => role !== activePosition.value)) return []
+  let menus = [...currentUnitItems.items]
+  const indexStatus = getIndexById('status', menus)
+  const indexEarlyMedicalAssessment = getIndexById('early-medical-assessment', menus)
+  const indexRehabMedicalAssessment = getIndexById('rehab-medical-assessment', menus)
+  const indexFunctionAssessment = getIndexById('function-assessment', menus)
+  const indexTherapyProtocol = getIndexById('therapy-protocol', menus)
+  const indexChemotherapyProtocol = getIndexById('chemotherapy-protocol', menus)
+  const indexChemotherapyMedicine = getIndexById('chemotherapy-medicine', menus)
+  const indexPrescription = getIndexById('prescription', menus)
+  const indexDevice = getIndexById('device', menus)
+  const indexMcuRadiology = getIndexById('mcu-radiology', menus)
+  const indexMcuLabPc = getIndexById('mcu-lab-pc', menus)
+  const indexMcuLabMicro = getIndexById('mcu-lab-micro', menus)
+  const indexMcuLabPa = getIndexById('mcu-lab-pa', menus)
+  const indexMedicalAction = getIndexById('medical-action', menus)
+  const indexMcuResult = getIndexById('mcu-result', menus)
+  const indexConsultation = getIndexById('consultation', menus)
+  const indexResume = getIndexById('resume', menus)
+  const indexControlLetter = getIndexById('control', menus)
+  const indexScreening = getIndexById('screening', menus)
+  const indexSupportingDocument = getIndexById('supporting-document', menus)
+  const indexPriceList = getIndexById('price-list', menus)
+
+  if (indexStatus > -1) {
+    menus.splice(indexStatus, 1, {
+      ...menus[indexStatus],
+      component: StatusAsync,
+      props: { encounter: data },
+    })
+  }
+  if (indexEarlyMedicalAssessment > -1) {
+    menus.splice(indexEarlyMedicalAssessment, 1, {
+      ...menus[indexEarlyMedicalAssessment],
+      component: EarlyMedicalAssesmentListAsync,
+      props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
+    })
+  }
+  if (indexRehabMedicalAssessment > -1) {
+    menus.splice(indexRehabMedicalAssessment, 1, {
+      ...menus[indexRehabMedicalAssessment],
+      component: EarlyMedicalRehabListAsync,
+      props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+    })
+  }
+  if (indexFunctionAssessment > -1) {
+    menus.splice(indexFunctionAssessment, 1, {
+      ...menus[indexFunctionAssessment],
+      component: AssesmentFunctionListAsync,
+      props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
+    })
+  }
+  if (indexTherapyProtocol > -1) {
+    menus.splice(indexTherapyProtocol, 1, {
+      ...menus[indexTherapyProtocol],
+      component: ProtocolListAsync,
+      props: { data: protocolRows, paginationMeta },
+    })
+  }
+  if (indexChemotherapyProtocol > -1) {
+    menus.splice(indexChemotherapyProtocol, 1, {
+      ...menus[indexChemotherapyProtocol],
+      component: ProtocolListAsync,
+      props: { data: protocolRows, paginationMeta },
+    })
+  }
+  if (indexChemotherapyMedicine > -1) {
+    menus.splice(indexChemotherapyMedicine, 1, {
+      ...menus[indexChemotherapyMedicine],
+      component: MedicineProtocolListAsync,
+      props: { data: protocolRows, paginationMeta },
+    })
+  }
+  if (indexPrescription > -1) {
+    menus.splice(indexPrescription, 1, {
+      ...menus[indexPrescription],
+      component: PrescriptionAsync,
+      props: { encounter_id: id }
+    })
+  }
+  if (indexDevice > -1) {
+    menus.splice(indexDevice, 1, { ...menus[indexDevice], component: null })
+  }
+  if (indexMcuRadiology > -1) {
+    menus.splice(indexMcuRadiology, 1, {
+      ...menus[indexMcuRadiology],
+      component: RadiologyAsync,
+      props: { encounter_id: id }
+    })
+  }
+  if (indexMcuLabPc > -1) {
+    menus.splice(indexMcuLabPc, 1, {
+      ...menus[indexMcuLabPc],
+      component: CpLabOrderAsync,
+      props: { encounter_id: id }
+    })
+  }
+  if (indexMcuLabMicro > -1) {
+    menus.splice(indexMcuLabMicro, 1, { ...menus[indexMcuLabMicro], component: null })
+  }
+  if (indexMcuLabPa > -1) {
+    menus.splice(indexMcuLabPa, 1, { ...menus[indexMcuLabPa], component: null })
+  }
+  if (indexMedicalAction > -1) {
+    menus.splice(indexMcuLabPa, 1, { ...menus[indexMcuLabPa], component: null })
+  }
+  if (indexConsultation > -1) {
+    menus.splice(indexConsultation, 1, {
+      ...menus[indexConsultation],
+      component: ConsultationAsync,
+      props: { encounter: data }
+    })
+  }
+  if (indexMcuResult > -1) {
+    menus.splice(indexMcuResult, 1, { ...menus[indexMcuResult], component: null })
+  }
+  if (indexResume > -1) {
+    menus.splice(indexResume, 1, { ...menus[indexResume], component: null })
+  }
+  if (indexControlLetter > -1) {
+    menus.splice(indexControlLetter, 1, {
+      ...menus[indexControlLetter],
+      component: ControlLetterListAsync,
+      props: { encounter: data }
+    })
+  }
+  if (indexScreening > -1) {
+    menus.splice(indexScreening, 1, { ...menus[indexScreening], component: null })
+  }
+  if (indexSupportingDocument > -1) {
+    menus.splice(indexSupportingDocument, 1, { ...menus[indexSupportingDocument], component: null })
+  }
+  if (indexPriceList > -1) {
+    menus.splice(indexPriceList, 1, { ...menus[indexPriceList], component: null })
+  }
+
+  return menus
+}
+
+function handleClick(type: string) {
+  if (type === 'draft') {
+    router.back()
+  }
+}
+
+watch(getActiveRole, () => {
+  const activeRole = getActiveRole()
+  activePosition.value = getPositionAs(activeRole)
+  menus.value = getMenus()
+})
+
+onMounted(async () => {
+  await getData()
+  menus.value = getMenus()
+})
+</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" />
+    <CompMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
+  </div>
+</template>

app/components/content/encounter/process-previous.vue

@@ -1,94 +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'
-
-// 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 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 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 dataRes = await getDetail(id, {
-  includes:
-    'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
-})
-const dataResBody = dataRes.body ?? null
-const data = dataResBody?.data ?? null
-
-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' },
-  { value: 'patient-note', label: 'CPRJ' },
-  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
-  { value: 'device', label: 'Order Alkes' },
-  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
-  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
-  { value: 'mcu-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' },
-  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
-  { value: 'screening', label: 'Skrinning MPP' },
-  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
-]
-</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>

app/handlers/encounter-process.handler.ts

@@ -1,11 +1,19 @@
-import { medicalPositions } from "~/lib/roles"
+import { isValidDate } from '~/lib/date'
+import { medicalPositions } from '~/lib/roles'
 
 export interface EncounterItem {
   id: string
   title: string
   classCode?: string[]
-  unit?: string,
+  unit?: string
   afterId?: string
+  component?: any
+  props?: Record<string, any>
+}
+
+export interface EncounterProps {
+  classCode: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
 }
 
 export const defaultItems: EncounterItem[] = [
@@ -174,11 +182,11 @@ const getItemsByUnit = (unit: string, items: EncounterItem[]) => {
   return items.filter((item) => item.unit === unit)
 }
 
-const getItemsByIds = (ids: string[], items: EncounterItem[]) => {
+export const getItemsByIds = (ids: string[], items: EncounterItem[]) => {
   return items.filter((item) => ids.includes(item.id))
 }
 
-const getIndexById = (id: string, items: EncounterItem[]) => {
+export const getIndexById = (id: string, items: EncounterItem[]) => {
   return items.findIndex((item) => item.id === id)
 }
 
@@ -189,17 +197,13 @@ export function insertItemByAfterId(id: string, items: EncounterItem[], newItem:
   }
 }
 
-export function mergeArrayAt<T>(
+export function mergeArrayAt<T>(arraysOne: T[], arraysTwo: T[] | T, deleteCount = 0): T[] {
-  arraysOne: T[],
-  arraysTwo: T[] | T,
-  deleteCount = 0,
-): T[] {
   const prevItems = arraysOne.slice()
   if (!prevItems) return prevItems
   const nextItems = Array.isArray(arraysTwo) ? arraysTwo : [arraysTwo]
   if (nextItems.length === 0) return prevItems
   // determine insertion position using the first item's `id` if available
-  const firstId =  (nextItems[0] as any)?.afterId || (prevItems[0] as any)?.id
+  const firstId = (nextItems[0] as any)?.afterId || (prevItems[0] as any)?.id
   let pos = prevItems.length
   if (typeof firstId === 'string') {
     const index = prevItems.findIndex((item: any) => item.id === firstId)
@@ -216,6 +220,66 @@ export const getItemsAll = (classCode: string, unit: string, items: EncounterIte
   return updateItems
 }
 
+// Function to map API response to Encounter structure
+export function mapResponseToEncounter(result: any): any {
+  if (!result) return null
+
+  // Check if patient and patient.person exist (minimal validation)
+  if (!result.patient || !result.patient.person) {
+    return null
+  }
+
+  const mapped: any = {
+    id: result.id || 0,
+    patient_id: result.patient_id || result.patient?.id || 0,
+    patient: {
+      id: result.patient?.id || 0,
+      number: result.patient?.number || '',
+      person: {
+        id: result.patient?.person?.id || 0,
+        name: result.patient?.person?.name || '',
+        birthDate: result.patient?.person?.birthDate || null,
+        gender_code: result.patient?.person?.gender_code || '',
+        residentIdentityNumber: result.patient?.person?.residentIdentityNumber || null,
+        frontTitle: result.patient?.person?.frontTitle || '',
+        endTitle: result.patient?.person?.endTitle || '',
+        addresses: result.patient?.person?.addresses || [],
+      },
+    },
+    registeredAt: result.registeredAt || result.patient?.registeredAt || null,
+    class_code: result.class_code || '',
+    unit_id: result.unit_id || 0,
+    unit: result.unit || null,
+    specialist_id: result.specialist_id || null,
+    subspecialist_id: result.subspecialist_id || null,
+    visitDate: isValidDate(result.visitDate)
+      ? result.visitDate
+      : result.registeredAt || result.patient?.registeredAt || null,
+    adm_employee_id: result.adm_employee_id || 0,
+    appointment_doctor_id: result.appointment_doctor_id || null,
+    responsible_doctor_id: result.responsible_doctor_id || null,
+    appointment_doctor: result.appointment_doctor || null,
+    responsible_doctor: result.responsible_doctor || null,
+    refSource_name: result.refSource_name || null,
+    appointment_id: result.appointment_id || null,
+    earlyEducation: result.earlyEducation || null,
+    medicalDischargeEducation: result.medicalDischargeEducation || '',
+    admDischargeEducation: result.admDischargeEducation || null,
+    discharge_method_code: result.discharge_method_code || null,
+    discharge_reason: result.dischargeReason || result.discharge_reason || null,
+    discharge_date: result.discharge_date || null,
+    status_code: result.status_code || '',
+    // Payment related fields
+    paymentMethod_code:
+      result.paymentMethod_code && result.paymentMethod_code.trim() !== '' ? result.paymentMethod_code : null,
+    trx_number: result.trx_number || null,
+    member_number: result.member_number || null,
+    ref_number: result.ref_number || null,
+  }
+
+  return mapped
+}
+
 const listItemsForOutpatientRehab = mergeArrayAt(
   getItemsAll('ambulatory', 'all', defaultItems),
   getItemsAll('ambulatory', 'rehab', defaultItems),
@@ -226,22 +290,22 @@ const listItemsForOutpatientChemo = mergeArrayAt(
   getItemsAll('ambulatory', 'chemo', defaultItems),
 )
 
-export const listItems = {
+export const listItems: Record<string, Record<string, Record<string, any>>> = {
   'installation|outpatient': {
     'unit|rehab': {
-      'items': listItemsForOutpatientRehab,
+      items: listItemsForOutpatientRehab,
-      'roles': medicalPositions,
+      roles: medicalPositions,
     },
     'unit|chemo': {
-      'items': listItemsForOutpatientChemo,
+      items: listItemsForOutpatientChemo,
-      'roles': medicalPositions,
+      roles: medicalPositions,
     },
-    'all': getItemsAll('ambulatory', 'all', defaultItems),
+    all: getItemsAll('ambulatory', 'all', defaultItems),
   },
   'installation|emergency': {
-    'all': getItemsAll('emergency', 'all', defaultItems),
+    all: getItemsAll('emergency', 'all', defaultItems),
   },
   'installation|inpatient': {
-    'all': getItemsAll('inpatient', 'all', defaultItems),
+    all: getItemsAll('inpatient', 'all', defaultItems),
-  }
+  },
 }

app/lib/date.ts

@@ -73,3 +73,16 @@ export function formatDateYyyyMmDd(isoDateString: string): string {
 	const day = String(date.getDate()).padStart(2, '0');
 	return `${year}-${month}-${day}`;
 }
+
+// Function to check if date is invalid (like "0001-01-01T00:00:00Z")
+export function isValidDate(dateString: string | null | undefined): boolean {
+  if (!dateString) return false
+  // Check for invalid date patterns
+  if (dateString.startsWith('0001-01-01')) return false
+  try {
+    const date = new Date(dateString)
+    return !isNaN(date.getTime())
+  } catch {
+    return false
+  }
+}

app/pages/(features)/outpatient/encounter/[id]/process.vue

@@ -2,6 +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-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
@@ -35,7 +36,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterHome display="menu" class-code="ambulatory" sub-class-code="reg" />
+    <EncounterProcess class-code="ambulatory" sub-class-code="reg" />
   </div>
   <Error
     v-else