simrsx-fe/app/components/content/encounter/home.vue

<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: '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: 'report',
    label: 'Laporan Tindakan',
    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
    component: Consultation,
    props: { encounter: data },
  },
  { 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>