feat(chemo): add page process and modify components

app/components/content/chemotherapy/list.vue

@@ -2,10 +2,10 @@
 import { ref, computed } from 'vue'
 
 // Components
-import AppCemotherapyList from '~/components/app/cemotherapy/list.vue'
+import AppChemotherapyList from '~/components/app/chemotherapy/list.vue'
 
 // Samples
-import { sampleRows, type CemotherapyData } from '~/components/app/cemotherapy/sample'
+import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
 
 const search = ref('')
 const dateFrom = ref('')
@@ -14,7 +14,7 @@ const dateTo = ref('')
 // filter + pencarian sederhana (client-side)
 const filtered = computed(() => {
   const q = search.value.trim().toLowerCase()
-  return sampleRows.filter((r: CemotherapyData) => {
+  return sampleRows.filter((r: ChemotherapyData) => {
     if (q) {
       return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
     }
@@ -59,7 +59,7 @@ const filtered = computed(() => {
     </div>
 
     <div class="overflow-x-auto p-4">
-      <AppCemotherapyList
+      <AppChemotherapyList
         :data="filtered"
         :pagination-meta="{
           recordCount: 2,

app/components/content/chemotherapy/process.vue

@@ -0,0 +1,83 @@
+<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 ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
+import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.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 : 'chemotherapy-protocol'),
+  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
+
+// 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,
+}
+
+const tabs: TabItem[] = [
+  { value: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
+  { value: 'chemotherapy-medicine', label: 'Protokol Obat Kemoterapi', component: MedicineProtocolList, props: { data: protocolRows, paginationMeta } },
+]
+</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/components/content/chemotherapy/protocol.vue

@@ -8,7 +8,7 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 
 // Components
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
-import ProtocolList from '~/components/app/cemotherapy/list.protocol.vue'
+import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
 
 // Services
 import { getDetail } from '~/services/encounter.service'
@@ -76,8 +76,8 @@ const paginationMeta: PaginationMeta = {
 }
 
 const tabs: TabItem[] = [
-  { value: 'cemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
-  { value: 'cemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
+  { value: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
+  { value: 'chemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
 ]
 
 onMounted(async () => {