feat(chemo): add page process and modify components

app/components/app/chemotherapy/entry-form.vue

@@ -13,7 +13,7 @@ import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-singl
 import type z from 'zod'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { cemotherapySchema } from "~/schemas/cemotherapy.schema"
+import { chemotherapySchema } from "~/schemas/chemotherapy.schema"
 
 interface Props {
   values?: any
@@ -37,7 +37,7 @@ const emit = defineEmits<{
 }>()
 
 const { defineField, errors, meta } = useForm({
-  validationSchema: toTypedSchema(cemotherapySchema),
+  validationSchema: toTypedSchema(chemotherapySchema),
   initialValues: {
     namaPasien: '',
     tanggalLahir: '',

app/components/app/chemotherapy/list-cfg.medicine.ts

@@ -0,0 +1,69 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 60 },
+    { width: 200 },
+    { width: 100 },
+    { width: 100 },
+    { width: 150 },
+    { width: 80 },
+    { width: 200 },
+    { width: 120 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'NAMA OBAT' },
+      { label: 'DOSIS' },
+      { label: 'SATUAN' },
+      { label: 'RUTE PEMBERIAN' },
+      { label: 'HARI' },
+      { label: 'CATATAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'namaObat',
+    'dosis',
+    'satuan',
+    'rute',
+    'hari',
+    'catatan',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+

app/components/app/chemotherapy/list.medicine.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.medicine'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Protokol Obat Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Daftar obat-obatan yang digunakan dalam protokol kemoterapi.</p>
+        </div>
+        <button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
+          <i class="ri-add-line"></i>
+          Tambah Obat Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari obat..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+

app/components/app/chemotherapy/sample.ts

@@ -1,4 +1,4 @@
-export type CemotherapyData = {
+export type ChemotherapyData = {
   id: number
   tanggal: string
   noRm: string
@@ -14,7 +14,7 @@ export type CemotherapyData = {
   asal: string
 }
 
-export const sampleRows: CemotherapyData[] = [
+export const sampleRows: ChemotherapyData[] = [
   {
     id: 1,
     tanggal: '12 Agustus 2025',

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: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
-  { value: 'cemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
+  { value: 'chemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
 ]
 
 onMounted(async () => {

app/pages/(features)/outpatient-action/chemotherapy/[id]/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kemoterapi - Proses',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentChemotherapyProcess />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
+

app/pages/(features)/outpatient-action/chemotherapy/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Redirect to list page - the process page is now at [id]/index.vue
+const route = useRoute()
+navigateTo('/outpatient-action/chemotherapy/list')
+</script>
+
+<template>
+  <div />
+</template>

app/pages/(features)/outpatient-action/chemotherapy/list.vue

@@ -33,7 +33,7 @@ const canRead = true // hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <ContentCemotherapyList />
+      <ContentChemotherapyList />
     </div>
     <Error v-else :status-code="403" />
   </div>

app/pages/(features)/outpation-action/cemotherapy/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-</script>
-
-<template>
-  <ContentCemotherapyProtocol />
-</template>

app/schemas/chemotherapy.schema.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 const dateStringSchema = z.string().min(1)
 
-export const cemotherapySchema = z.object({
+export const chemotherapySchema = z.object({
   // Data Pasien
   namaPasien: z.string({
     required_error: 'Nama pasien harus diisi',

public/side-menu-items/doc.json

@@ -84,7 +84,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpatient-action/chemotherapy"
       },
       {
         "title": "Hemofilia",

public/side-menu-items/nur.json

@@ -63,7 +63,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpatient-action/chemotherapy"
       },
       {
         "title": "Hemofilia",

public/side-menu-items/nut.json

@@ -35,7 +35,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpatient-action/chemotherapy"
       },
       {
         "title": "Hemofilia",

public/side-menu-items/sys.json

@@ -139,7 +139,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpatient-action/chemotherapy"
       },
       {
         "title": "Hemofilia",