feat(cemo): add home encounter

app/components/content/chemotherapy/process.vue

@@ -1,143 +1,7 @@
 <script setup lang="ts">
-//
+import EncounterHome from '~/components/content/encounter/home.vue'
-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 EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
-import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
-import PrescriptionList from '~/components/content/prescription/list.vue'
-import Consultation from '~/components/content/consultation/list.vue'
-import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
-import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.vue'
-
-const route = useRoute()
-const router = useRouter()
-const mode = computed(() => {
-  return route.query.mode as string || 'series'
-})
-
-// 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 data so AppEncounterQuickInfo can render in development/storybook
-// Replace with real API result when available (see commented fetch below)
-const data = ref<any>({
-  patient: {
-    number: 'RM-2025-0001',
-    person: {
-      name: 'John Doe',
-      birthDate: '1980-01-01T00:00:00Z',
-      gender_code: 'M',
-      addresses: [{ address: 'Jl. Contoh No.1, Jakarta' }],
-      frontTitle: '',
-      endTitle: '',
-    },
-  },
-  visitDate: new Date().toISOString(),
-  unit: { name: 'Onkologi' },
-  responsible_doctor: null,
-  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } },
-})
-
-// 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: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
-  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
-  {
-    value: 'rehab-medical-assessment',
-    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
-    component: EarlyMedicalRehabList,
-  },
-  {
-    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 },
-  },
-  { value: 'report', label: 'Laporan Tindakan' },
-  { value: 'patient-note', label: 'CPRJ' },
-  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
-  { value: 'device', label: 'Order Alkes' },
-  { value: 'mcu-radiology', label: 'Order Radiologi' },
-  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
-  { 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' },
-  { value: 'screening', label: 'Skrinning MPP' },
-  { value: 'price-list', label: 'Tarif Tindakan' },
-]
 </script>
 
 <template>
-  <div class="w-full">
+  <EncounterHome classes="chemotherapy" />
-    <div class="mb-4">
-      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
-    </div>
-    <AppEncounterQuickInfo :data="data" />
-    <CompTab
-      v-if="mode === 'series'"
-      :data="tabs"
-      :initial-active-tab="activeTab"
-      @change-tab="activeTab = $event"
-    />
-  </div>
 </template>

app/components/content/encounter/home.vue

@@ -0,0 +1,190 @@
+<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/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
+import Consultation from '~/components/content/consultation/list.vue'
+import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
+import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps<{
+  classes?: string
+}>()
+
+// 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
+
+// Dummy data so AppEncounterQuickInfo can render in development/storybook
+// Replace with real API result when available (see commented fetch below)
+const data = ref<any>({
+  patient: {
+    number: 'RM-2025-0001',
+    person: {
+      name: 'John Doe',
+      birthDate: '1980-01-01T00:00:00Z',
+      gender_code: 'M',
+      addresses: [{ address: 'Jl. Contoh No.1, Jakarta' }],
+      frontTitle: '',
+      endTitle: '',
+    },
+  },
+  visitDate: new Date().toISOString(),
+  unit: { name: 'Onkologi' },
+  responsible_doctor: null,
+  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } },
+})
+
+// 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 tabsRaws: TabItem[] = [
+  {
+    value: 'status',
+    label: 'Status Masuk/Keluar',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Status,
+    props: { encounter: data },
+  },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalAssesmentList,
+  },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalRehabList,
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    groups: ['ambulatory', 'rehabilitation'],
+    component: AssesmentFunctionList,
+  },
+  { value: 'therapy-protocol', groups: ['ambulatory', 'rehabilitation'], label: 'Protokol Terapi' },
+  {
+    value: 'chemotherapy-protocol',
+    label: 'Protokol Kemoterapi',
+    groups: ['chemotherapy'],
+    component: ProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  {
+    value: 'chemotherapy-medicine',
+    label: 'Protokol Obat Kemoterapi',
+    groups: ['chemotherapy'],
+    component: MedicineProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  { value: 'report', label: 'Laporan Tindakan', groups: ['chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'education-assessment',
+    label: 'Asesmen Kebutuhan Edukasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+  },
+  { value: 'consent', label: 'General Consent', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'prescription',
+    label: 'Order Obat',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: PrescriptionList,
+  },
+  { value: 'device', label: 'Order Alkes', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-radiology', label: 'Order Radiologi', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'medical-action', label: 'Order Ruang Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-result', label: 'Hasil Penunjang', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'consultation',
+    label: 'Konsultasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Consultation,
+    props: { encounter: data },
+  },
+  { value: 'resume', label: 'Resume', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'control', label: 'Surat Kontrol', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'screening', label: 'Skrinning MPP', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', groups: ['ambulatory', 'rehabilitation'] },
+  { value: 'price-list', label: 'Tarif Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+]
+
+const tabs = computed(() => {
+  return tabsRaws
+    .filter((tab: TabItem) => tab.groups ? tab.groups.some((group: string) => props.classes?.includes(group)) : true)
+    .map((tab: TabItem) => {
+      return { ...tab, props: { ...tab.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>

app/components/pub/my-ui/comp-tab/type.ts

@@ -2,5 +2,6 @@ export interface TabItem {
   value: string
   label: string
   component?: any
+  groups?: string[]
   props?: Record<string, any>
 }