From 323485347300abee84439e5956815cc2dafc5cf9 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 29 Oct 2025 15:39:55 +0700
Subject: [PATCH 01/13] feat(cemo): add list of cemo

---
 app/components/app/cemotherapy/list-cfg.ts | 80 ++++++++++++++++++++++
 app/components/app/cemotherapy/list.vue    | 36 ++++++++++
 app/components/app/cemotherapy/sample.ts   | 49 +++++++++++++
 3 files changed, 165 insertions(+)
 create mode 100644 app/components/app/cemotherapy/list-cfg.ts
 create mode 100644 app/components/app/cemotherapy/list.vue
 create mode 100644 app/components/app/cemotherapy/sample.ts

diff --git a/app/components/app/cemotherapy/list-cfg.ts b/app/components/app/cemotherapy/list-cfg.ts
new file mode 100644
index 00000000..29c24e6f
--- /dev/null
+++ b/app/components/app/cemotherapy/list-cfg.ts
@@ -0,0 +1,80 @@
+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: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    '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: {},
+}
diff --git a/app/components/app/cemotherapy/list.vue b/app/components/app/cemotherapy/list.vue
new file mode 100644
index 00000000..19642581
--- /dev/null
+++ b/app/components/app/cemotherapy/list.vue
@@ -0,0 +1,36 @@
+<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'
+
+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">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/cemotherapy/sample.ts b/app/components/app/cemotherapy/sample.ts
new file mode 100644
index 00000000..254e64f6
--- /dev/null
+++ b/app/components/app/cemotherapy/sample.ts
@@ -0,0 +1,49 @@
+export type Row = {
+  id: number
+  tanggal: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: Row[] = [
+  {
+    id: 1,
+    tanggal: '12 Agustus 2025',
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    tanggal: '11 Agustus 2025',
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]

From dc4edc1dc0053f350cdf8ad82c4c816099285671 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 29 Oct 2025 15:58:52 +0700
Subject: [PATCH 02/13] feat(cemo): show list cemo

---
 app/components/app/cemotherapy/sample.ts      |  4 +-
 app/components/content/cemotherapy/list.vue   | 75 +++++++++++++++++++
 .../outpation-action/cemotherapy/list.vue     | 40 ++++++++++
 3 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 app/components/content/cemotherapy/list.vue
 create mode 100644 app/pages/(features)/outpation-action/cemotherapy/list.vue

diff --git a/app/components/app/cemotherapy/sample.ts b/app/components/app/cemotherapy/sample.ts
index 254e64f6..24b9ebbf 100644
--- a/app/components/app/cemotherapy/sample.ts
+++ b/app/components/app/cemotherapy/sample.ts
@@ -1,4 +1,4 @@
-export type Row = {
+export type CemotherapyData = {
   id: number
   tanggal: string
   noRm: string
@@ -14,7 +14,7 @@ export type Row = {
   asal: string
 }
 
-export const sampleRows: Row[] = [
+export const sampleRows: CemotherapyData[] = [
   {
     id: 1,
     tanggal: '12 Agustus 2025',
diff --git a/app/components/content/cemotherapy/list.vue b/app/components/content/cemotherapy/list.vue
new file mode 100644
index 00000000..957a827f
--- /dev/null
+++ b/app/components/content/cemotherapy/list.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Components
+import AppCemotherapyList from '~/components/app/cemotherapy/list.vue'
+
+// Samples
+import { sampleRows, type CemotherapyData } from '~/components/app/cemotherapy/sample'
+
+const search = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+
+// filter + pencarian sederhana (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: CemotherapyData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
+      </p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <div class="flex items-center gap-2">
+        <input
+          v-model="search"
+          placeholder="Cari Nama / No.RM"
+          class="w-64 rounded border px-3 py-2"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input
+          v-model="dateFrom"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <span class="text-sm text-gray-500">-</span>
+        <input
+          v-model="dateTo"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+      </div>
+
+      <button class="ml-auto rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">Filter</button>
+    </div>
+
+    <div class="overflow-x-auto p-4">
+      <AppCemotherapyList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/list.vue b/app/pages/(features)/outpation-action/cemotherapy/list.vue
new file mode 100644
index 00000000..02326343
--- /dev/null
+++ b/app/pages/(features)/outpation-action/cemotherapy/list.vue
@@ -0,0 +1,40 @@
+<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: 'Daftar Kempterapi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentCemotherapyList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

From e866c0cf2ae2c3daf1b508e31b9b0ad8a28cfa69 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 30 Oct 2025 14:41:52 +0700
Subject: [PATCH 03/13] feat(cemo): layouting protocol

---
 .../app/cemotherapy/list-cfg.protocol.ts      |  62 ++++++++++
 .../app/cemotherapy/list.protocol.vue         |  75 +++++++++++++
 .../content/cemotherapy/protocol.vue          | 106 ++++++++++++++++++
 .../outpation-action/cemotherapy/index.vue    |   7 +-
 4 files changed, 245 insertions(+), 5 deletions(-)
 create mode 100644 app/components/app/cemotherapy/list-cfg.protocol.ts
 create mode 100644 app/components/app/cemotherapy/list.protocol.vue
 create mode 100644 app/components/content/cemotherapy/protocol.vue

diff --git a/app/components/app/cemotherapy/list-cfg.protocol.ts b/app/components/app/cemotherapy/list-cfg.protocol.ts
new file mode 100644
index 00000000..da678c0f
--- /dev/null
+++ b/app/components/app/cemotherapy/list-cfg.protocol.ts
@@ -0,0 +1,62 @@
+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: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'TANGGAL' },
+      { label: 'SIKLUS' },
+      { label: 'PERIODE KEMOTERAPI' },
+      { label: 'KEHADIRAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'tanggal',
+    'siklus',
+    'periode',
+    'kehadiran',
+    '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: {},
+}
diff --git a/app/components/app/cemotherapy/list.protocol.vue b/app/components/app/cemotherapy/list.protocol.vue
new file mode 100644
index 00000000..7b5c3234
--- /dev/null
+++ b/app/components/app/cemotherapy/list.protocol.vue
@@ -0,0 +1,75 @@
+<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.protocol'
+
+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 Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Rangkaian prosedur kemoterapi yang terintegrasi dan konsisten.</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 Protokol Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari protokol..."
+          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>
diff --git a/app/components/content/cemotherapy/protocol.vue b/app/components/content/cemotherapy/protocol.vue
new file mode 100644
index 00000000..427b4642
--- /dev/null
+++ b/app/components/content/cemotherapy/protocol.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Types
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Components
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+import ProtocolList from '~/components/app/cemotherapy/list.protocol.vue'
+
+// Services
+import { getDetail } from '~/services/encounter.service'
+
+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 } })
+  },
+})
+
+// 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: PaginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+const tabs: TabItem[] = [
+  { value: 'cemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
+  { value: 'cemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
+]
+
+onMounted(async () => {
+  // const id = typeof route.query.id == 'string' ? parseInt(route.query.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
+  // data.value = dataResBody?.data ?? null
+})
+</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>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/index.vue b/app/pages/(features)/outpation-action/cemotherapy/index.vue
index 50485cec..06da4369 100644
--- a/app/pages/(features)/outpation-action/cemotherapy/index.vue
+++ b/app/pages/(features)/outpation-action/cemotherapy/index.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-  const route = useRoute();
+const route = useRoute()
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
-  </div>
+  <ContentCemotherapyProtocol />
 </template>

From 45cc019ec1f37583e5e950a45a095c74ff099538 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 30 Oct 2025 15:43:50 +0700
Subject: [PATCH 04/13] feat(cemo): layouting form

---
 app/components/app/cemotherapy/entry-form.vue | 306 ++++++++++++++++++
 1 file changed, 306 insertions(+)
 create mode 100644 app/components/app/cemotherapy/entry-form.vue

diff --git a/app/components/app/cemotherapy/entry-form.vue b/app/components/app/cemotherapy/entry-form.vue
new file mode 100644
index 00000000..1b6e9140
--- /dev/null
+++ b/app/components/app/cemotherapy/entry-form.vue
@@ -0,0 +1,306 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import Input from '~/components/pub/ui/input/Input.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+// Types
+import type { Ref } from 'vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+const emit = defineEmits<{
+  submit: [values: any, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    namaPasien: '',
+    tanggalLahir: '',
+    noRM: '',
+    alamat: '',
+    beratBadan: '',
+    tinggiBadan: '',
+    diagnosa: '',
+    siklus: '',
+    periodeAwal: '',
+    periodeAkhir: '',
+    tanggalKemoterapi: '',
+    dokterKRJ: '',
+  },
+})
+
+// Define form fields
+const [namaPasien, namaPasienAttrs] = defineField('namaPasien')
+const [tanggalLahir, tanggalLahirAttrs] = defineField('tanggalLahir')
+const [noRM, noRMAttrs] = defineField('noRM')
+const [alamat, alamatAttrs] = defineField('alamat')
+const [beratBadan, beratBadanAttrs] = defineField('beratBadan')
+const [tinggiBadan, tinggiBadanAttrs] = defineField('tinggiBadan')
+const [diagnosa, diagnosaAttrs] = defineField('diagnosa')
+const [siklus, siklusAttrs] = defineField('siklus')
+const [periodeAwal, periodeAwalAttrs] = defineField('periodeAwal')
+const [periodeAkhir, periodeAkhirAttrs] = defineField('periodeAkhir')
+const [tanggalKemoterapi, tanggalKemoterapiAttrs] = defineField('tanggalKemoterapi')
+const [dokterKRJ, dokterKRJAttrs] = defineField('dokterKRJ')
+
+// Set initial values if provided
+if (props.values) {
+  Object.entries(props.values).forEach(([key, value]) => {
+    if (value !== undefined) {
+      const field = defineField(key)[0]
+      field.value = value
+    }
+  })
+}
+
+const resetForm = () => {
+  // Object.keys(meta.value.initialValues).forEach((key) => {
+  //   const field = defineField(key)[0]
+  //   field.value = ''
+  // })
+}
+
+function onSubmitForm() {
+  const formData = {
+    namaPasien: namaPasien.value,
+    tanggalLahir: tanggalLahir.value,
+    noRM: noRM.value,
+    alamat: alamat.value,
+    beratBadan: beratBadan.value,
+    tinggiBadan: tinggiBadan.value,
+    diagnosa: diagnosa.value,
+    siklus: siklus.value,
+    periodeAwal: periodeAwal.value,
+    periodeAkhir: periodeAkhir.value,
+    tanggalKemoterapi: tanggalKemoterapi.value,
+    dokterKRJ: dokterKRJ.value,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form @submit.prevent>
+    <!-- Data Pasien Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Data Pasien</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Nama Pasien</Label>
+          <Field :errMessage="errors.namaPasien">
+            <Input
+              v-model="namaPasien"
+              v-bind="namaPasienAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nama pasien"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Lahir</Label>
+          <Field :errMessage="errors.tanggalLahir">
+            <DatePicker
+              v-model="tanggalLahir"
+              v-bind="tanggalLahirAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal lahir"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">No. RM</Label>
+          <Field :errMessage="errors.noRM">
+            <Input
+              v-model="noRM"
+              v-bind="noRMAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nomor RM"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Alamat</Label>
+          <Field :errMessage="errors.alamat">
+            <Input
+              v-model="alamat"
+              v-bind="alamatAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan alamat"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Berat Badan</Label>
+          <Field :errMessage="errors.beratBadan">
+            <Input
+              v-model="beratBadan"
+              v-bind="beratBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan berat badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tinggi Badan</Label>
+          <Field :errMessage="errors.tinggiBadan">
+            <Input
+              v-model="tinggiBadan"
+              v-bind="tinggiBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan tinggi badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Diagnosa</Label>
+          <Field :errMessage="errors.diagnosa">
+            <Combobox
+              id="diagnose"
+              v-model="diagnosa"
+              v-bind="diagnosaAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Tentukan diagnosa pasien"
+              search-placeholder="Cari diagnosa"
+              empty-message="Diagnosa tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Protokol Kemoterapi Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Protokol Kemoterapi</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Siklus</Label>
+          <Field :errMessage="errors.siklus">
+            <Input
+              v-model="siklus"
+              v-bind="siklusAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan siklus"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Periode</Label>
+          <div class="flex items-center gap-4">
+            <Field
+              :errMessage="errors.periodeAwal"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAwal"
+                v-bind="periodeAwalAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Mulai Periode"
+              />
+            </Field>
+            <span>Sampai</span>
+            <Field
+              :errMessage="errors.periodeAkhir"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAkhir"
+                v-bind="periodeAkhirAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Akhir Periode"
+              />
+            </Field>
+          </div>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Kemoterapi</Label>
+          <Field :errMessage="errors.tanggalKemoterapi">
+            <DatepickerSingle
+              v-model="tanggalKemoterapi"
+              v-bind="tanggalKemoterapiAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal kemoterapi"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Dokter Ruang Tindakan</Label>
+          <Field :errMessage="errors.dokterKRJ">
+            <Combobox
+              id="doktor"
+              v-model="dokterKRJ"
+              v-bind="dokterKRJAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih dokter"
+              search-placeholder="Cari dokter"
+              empty-message="Dokter tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Form Actions -->
+    <div class="flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>

From 7119f67402b5261226257b3aa6e193d516f33041 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 31 Oct 2025 13:09:59 +0700
Subject: [PATCH 05/13] feat(cemo): modify schema

---
 app/components/app/cemotherapy/entry-form.vue | 24 +++---
 app/schemas/cemotherapy.schema.ts             | 73 +++++++++++++++++++
 2 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 app/schemas/cemotherapy.schema.ts

diff --git a/app/components/app/cemotherapy/entry-form.vue b/app/components/app/cemotherapy/entry-form.vue
index 1b6e9140..3a4104b8 100644
--- a/app/components/app/cemotherapy/entry-form.vue
+++ b/app/components/app/cemotherapy/entry-form.vue
@@ -4,22 +4,18 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Input from '~/components/pub/ui/input/Input.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
 import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-import Input from '~/components/pub/ui/input/Input.vue'
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
-// Types
-import type { Ref } from 'vue'
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
-
 // Helpers
 import type z from 'zod'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
+import { cemotherapySchema } from "~/schemas/cemotherapy.schema"
 
 interface Props {
-  schema: z.ZodSchema<any>
   values?: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -41,7 +37,7 @@ const emit = defineEmits<{
 }>()
 
 const { defineField, errors, meta } = useForm({
-  validationSchema: toTypedSchema(props.schema),
+  validationSchema: toTypedSchema(cemotherapySchema),
   initialValues: {
     namaPasien: '',
     tanggalLahir: '',
@@ -74,12 +70,12 @@ const [dokterKRJ, dokterKRJAttrs] = defineField('dokterKRJ')
 
 // Set initial values if provided
 if (props.values) {
-  Object.entries(props.values).forEach(([key, value]) => {
-    if (value !== undefined) {
-      const field = defineField(key)[0]
-      field.value = value
-    }
-  })
+  // Object.entries(props.values).forEach(([key, value]) => {
+  //   if (value !== undefined) {
+  //     const field = defineField(key)[0]
+  //     field.value = value
+  //   }
+  // })
 }
 
 const resetForm = () => {
@@ -268,7 +264,7 @@ function onCancelForm() {
           <Label height="compact">Dokter Ruang Tindakan</Label>
           <Field :errMessage="errors.dokterKRJ">
             <Combobox
-              id="doktor"
+              id="doctor"
               v-model="dokterKRJ"
               v-bind="dokterKRJAttrs"
               :items="items"
diff --git a/app/schemas/cemotherapy.schema.ts b/app/schemas/cemotherapy.schema.ts
new file mode 100644
index 00000000..df00c200
--- /dev/null
+++ b/app/schemas/cemotherapy.schema.ts
@@ -0,0 +1,73 @@
+import { z } from 'zod'
+
+const dateStringSchema = z.string().min(1)
+
+export const cemotherapySchema = z.object({
+  // Data Pasien
+  namaPasien: z.string({
+    required_error: 'Nama pasien harus diisi',
+  }).min(1, 'Nama pasien harus diisi'),
+  
+  tanggalLahir: z.string({
+    required_error: 'Tanggal lahir harus diisi',
+  }).min(1, 'Tanggal lahir harus diisi'),
+  
+  noRM: z.string({
+    required_error: 'Nomor RM harus diisi',
+  }).min(1, 'Nomor RM harus diisi'),
+  
+  alamat: z.string({
+    required_error: 'Alamat harus diisi',
+  }).min(1, 'Alamat harus diisi'),
+  
+  beratBadan: z.union([
+    z.string(),
+    z.number()
+  ]).transform(val => val === '' ? null : Number(val))
+    .refine(val => val === null || (val >= 0 && val <= 500), {
+      message: 'Berat badan harus di antara 0-500 kg',
+    }),
+  
+  tinggiBadan: z.union([
+    z.string(),
+    z.number()
+  ]).transform(val => val === '' ? null : Number(val))
+    .refine(val => val === null || (val >= 0 && val <= 300), {
+      message: 'Tinggi badan harus di antara 0-300 cm',
+    }),
+  
+  diagnosa: z.string({
+    required_error: 'Diagnosa harus dipilih',
+  }).min(1, 'Diagnosa harus dipilih'),
+
+  // Protokol Kemoterapi
+  siklus: z.string({
+    required_error: 'Siklus harus diisi',
+  }).min(1, 'Siklus harus diisi'),
+  
+  periodeAwal: z.string({
+    required_error: 'Periode awal harus diisi',
+  }).min(1, 'Periode awal harus diisi'),
+  
+  periodeAkhir: dateStringSchema.refine((val) => {
+    if (!val) return false
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, {
+    message: 'Format tanggal tidak valid'
+  }),
+
+  tanggalKemoterapi: dateStringSchema.refine((val) => {
+    if (!val) return false
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, {
+    message: 'Format tanggal tidak valid'
+  }),
+  
+  dokterKRJ: z.string({
+    required_error: 'Dokter harus dipilih',
+  }).refine(val => val !== '', {
+    message: 'Dokter harus dipilih',
+  }),
+})
\ No newline at end of file

From 71d68e5a0ee084b586be48ddf4035735647f2f34 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 31 Oct 2025 14:49:21 +0700
Subject: [PATCH 06/13] feat(cemo): add dialog verification and list register

---
 .../app/cemotherapy/dialog-verification.vue   | 164 ++++++++++++++++++
 .../app/cemotherapy/list.register.vue         |  71 ++++++++
 2 files changed, 235 insertions(+)
 create mode 100644 app/components/app/cemotherapy/dialog-verification.vue
 create mode 100644 app/components/app/cemotherapy/list.register.vue

diff --git a/app/components/app/cemotherapy/dialog-verification.vue b/app/components/app/cemotherapy/dialog-verification.vue
new file mode 100644
index 00000000..2d617445
--- /dev/null
+++ b/app/components/app/cemotherapy/dialog-verification.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+import Input from '~/components/pub/ui/input/Input.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+interface Props {
+  open?: boolean
+  tanggalPemeriksaan?: string | Date
+  jadwalTanggalPemeriksaan?: string | Date
+  isLoading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  tanggalPemeriksaan: undefined,
+  jadwalTanggalPemeriksaan: undefined,
+  isLoading: false,
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'update:date': [value: string | undefined]
+  'update:schedule': [value: string | undefined]
+  submit: [data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }]
+}>()
+
+// Local state for jadwal tanggal pemeriksaan
+const jadwalTanggal = ref<string | undefined>(
+  props.jadwalTanggalPemeriksaan
+    ? typeof props.jadwalTanggalPemeriksaan === 'string'
+      ? props.jadwalTanggalPemeriksaan
+      : format(props.jadwalTanggalPemeriksaan, 'yyyy-MM-dd')
+    : undefined,
+)
+
+// Watch for external changes
+watch(
+  () => props.jadwalTanggalPemeriksaan,
+  (newValue) => {
+    if (newValue) {
+      jadwalTanggal.value =
+        typeof newValue === 'string' ? newValue : format(newValue, 'yyyy-MM-dd')
+    } else {
+      jadwalTanggal.value = undefined
+    }
+  },
+)
+
+// Watch local changes
+watch(jadwalTanggal, (newValue) => {
+  emit('update:schedule', newValue)
+})
+
+// Format date for display
+const formattedTanggalPemeriksaan = computed(() => {
+  if (!props.tanggalPemeriksaan) return ''
+  try {
+    const date =
+      props.tanggalPemeriksaan instanceof Date
+        ? props.tanggalPemeriksaan
+        : parseISO(props.tanggalPemeriksaan)
+    return format(date, 'dd MMMM yyyy', { locale: localeID })
+  } catch {
+    return props.tanggalPemeriksaan.toString()
+  }
+})
+
+// Handle submit
+function handleSubmit() {
+  emit('submit', {
+    tanggalPemeriksaan: props.tanggalPemeriksaan
+      ? typeof props.tanggalPemeriksaan === 'string'
+        ? props.tanggalPemeriksaan
+        : format(props.tanggalPemeriksaan, 'yyyy-MM-dd')
+      : undefined,
+    jadwalTanggalPemeriksaan: jadwalTanggal.value,
+  })
+}
+
+// Table data for Jadwal Ruang Tindakan
+const scheduleData = [
+  {
+    no: 1,
+    namaJenis: 'Ruang Tindakan',
+    jenisPemeriksaan: 'KEMOTERAPI',
+  },
+]
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    size="lg"
+    title="Verifikasi Jadwal Pasien"
+    @update:open="$emit('update:open', $event)"
+  >
+    <div class="space-y-6 py-4">
+      <!-- Jadwal Ruang Tindakan Section -->
+      <div class="space-y-3">
+        <h4 class="text-base font-semibold">Jadwal Ruang Tindakan</h4>
+        <div class="overflow-hidden rounded-md border">
+          <Table>
+            <TableHeader class="bg-gray-50">
+              <TableRow>
+                <TableHead class="font-semibold">NO</TableHead>
+                <TableHead class="font-semibold">NAMA JENIS</TableHead>
+                <TableHead class="font-semibold">JENIS PEMERIKSAAN</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow v-for="(row, index) in scheduleData" :key="index">
+                <TableCell>{{ row.no }}</TableCell>
+                <TableCell>{{ row.namaJenis }}</TableCell>
+                <TableCell>{{ row.jenisPemeriksaan }}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      <!-- Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">Tanggal Pemeriksaan</label>
+        <Input
+          :model-value="formattedTanggalPemeriksaan"
+          :disabled="true"
+          class="bg-gray-100 text-gray-700"
+          readonly
+        />
+      </div>
+
+      <!-- Jadwal Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">
+          Jadwal Tanggal Pemeriksaan
+          <span class="text-red-500">*</span>
+        </label>
+        <DatepickerSingle
+          v-model="jadwalTanggal"
+          placeholder="Pilih Jadwal"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <!-- Action Button -->
+      <div class="flex justify-end pt-4">
+        <Button
+          type="button"
+          :disabled="isLoading || !jadwalTanggal"
+          class="bg-gradient-to-r from-orange-500 to-orange-400 hover:from-orange-600 hover:to-orange-500 text-white shadow-md"
+          @click="handleSubmit"
+        >
+          <Icon name="i-lucide-calendar-check" class="mr-2 h-4 w-4" />
+          Simpan Jadwal
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
diff --git a/app/components/app/cemotherapy/list.register.vue b/app/components/app/cemotherapy/list.register.vue
new file mode 100644
index 00000000..131afc04
--- /dev/null
+++ b/app/components/app/cemotherapy/list.register.vue
@@ -0,0 +1,71 @@
+<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.protocol'
+
+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">Daftar Kunjungan Rawat Jalan Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan.</p>
+        </div>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari jadwal pemeriksaan..."
+          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>

From d1369d513bf5781a03e39c51786f8485338f6e0f Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 31 Oct 2025 16:08:22 +0700
Subject: [PATCH 07/13] feat(cemo): add list verification

---
 .../app/cemotherapy/list-cfg.visit.ts         | 99 +++++++++++++++++++
 app/components/app/cemotherapy/list.visit.vue | 45 +++++++++
 .../app/cemotherapy/status-badge.vue          | 28 ++++++
 .../app/cemotherapy/verify-button.vue         | 31 ++++++
 4 files changed, 203 insertions(+)
 create mode 100644 app/components/app/cemotherapy/list-cfg.visit.ts
 create mode 100644 app/components/app/cemotherapy/list.visit.vue
 create mode 100644 app/components/app/cemotherapy/status-badge.vue
 create mode 100644 app/components/app/cemotherapy/verify-button.vue

diff --git a/app/components/app/cemotherapy/list-cfg.visit.ts b/app/components/app/cemotherapy/list-cfg.visit.ts
new file mode 100644
index 00000000..cb242d62
--- /dev/null
+++ b/app/components/app/cemotherapy/list-cfg.visit.ts
@@ -0,0 +1,99 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+type VisitDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 150 }, // TANGGAL MASUK
+    { width: 180 }, // PJ BERKAS RM
+    { width: 200 }, // DOKTER
+    { width: 150 }, // JENIS RUANGAN
+    { width: 150 }, // JENIS TINDAKAN
+    { width: 180 }, // TANGGAL JADWAL TINDAKAN
+    { width: 150 }, // STATUS
+    { width: 120 }, // AKSI
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggal_masuk',
+    'pj_berkas_rm',
+    'dokter',
+    'jenis_ruangan',
+    'jenis_tindakan',
+    'tanggal_jadwal_tindakan',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'nama', label: 'Nama' },
+  ],
+
+  parses: {
+    tanggal_masuk: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_masuk) return '-'
+      try {
+        const date = typeof recX.tanggal_masuk === 'string' ? parseISO(recX.tanggal_masuk) : recX.tanggal_masuk
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_masuk.toString()
+      }
+    },
+    tanggal_jadwal_tindakan: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_jadwal_tindakan) return '-'
+      try {
+        const date =
+          typeof recX.tanggal_jadwal_tindakan === 'string'
+            ? parseISO(recX.tanggal_jadwal_tindakan)
+            : recX.tanggal_jadwal_tindakan
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_jadwal_tindakan.toString()
+      }
+    },
+  },
+
+  components: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/cemotherapy/list.visit.vue b/app/components/app/cemotherapy/list.visit.vue
new file mode 100644
index 00000000..de451f31
--- /dev/null
+++ b/app/components/app/cemotherapy/list.visit.vue
@@ -0,0 +1,45 @@
+<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.visit'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  verify: [rec: any]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+
+// Provide verify handler to child components via provide/inject
+function handleVerify(rec: any) {
+  emit('verify', rec)
+}
+
+provide('verify-handler', handleVerify)
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
+
diff --git a/app/components/app/cemotherapy/status-badge.vue b/app/components/app/cemotherapy/status-badge.vue
new file mode 100644
index 00000000..1a7d94ca
--- /dev/null
+++ b/app/components/app/cemotherapy/status-badge.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusMap: Record<string, { text: string; variant: 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline' }> = {
+  'belum_terverifikasi': { text: 'Belum Terverifikasi', variant: 'secondary' },
+  'terverifikasi': { text: 'Terverifikasi', variant: 'positive' },
+  'ditolak': { text: 'Ditolak', variant: 'destructive' },
+}
+
+const statusInfo = computed(() => {
+  const status = props.rec.status?.toLowerCase() || props.rec.status_code?.toLowerCase() || 'belum_terverifikasi'
+  return statusMap[status] || statusMap['belum_terverifikasi']
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="statusInfo.variant">
+      {{ statusInfo.text }}
+    </Badge>
+  </div>
+</template>
+
diff --git a/app/components/app/cemotherapy/verify-button.vue b/app/components/app/cemotherapy/verify-button.vue
new file mode 100644
index 00000000..1d9c2d3a
--- /dev/null
+++ b/app/components/app/cemotherapy/verify-button.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get verify handler from parent via inject
+const verifyHandler = inject<(rec: any) => void>('verify-handler', null)
+
+function handleVerify() {
+  if (verifyHandler) {
+    verifyHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      variant="outline"
+      class="border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100 hover:text-orange-700"
+      @click="handleVerify"
+    >
+      Verifikasi
+    </Button>
+  </div>
+</template>
+

From 89b2fb9cd95a0e60efaa139ee6efcf7ebe00a61e Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Mon, 3 Nov 2025 15:03:56 +0700
Subject: [PATCH 08/13] feat(chemo): add page process and modify components

---
 .../dialog-verification.vue                   |  0
 .../entry-form.vue                            |  4 +-
 .../app/chemotherapy/list-cfg.medicine.ts     | 69 +++++++++++++++
 .../list-cfg.protocol.ts                      |  0
 .../{cemotherapy => chemotherapy}/list-cfg.ts |  0
 .../list-cfg.visit.ts                         |  0
 .../app/chemotherapy/list.medicine.vue        | 76 +++++++++++++++++
 .../list.protocol.vue                         |  0
 .../list.register.vue                         |  0
 .../list.visit.vue                            |  0
 .../{cemotherapy => chemotherapy}/list.vue    |  0
 .../{cemotherapy => chemotherapy}/sample.ts   |  4 +-
 .../status-badge.vue                          |  0
 .../verify-button.vue                         |  0
 .../{cemotherapy => chemotherapy}/list.vue    |  8 +-
 .../content/chemotherapy/process.vue          | 83 +++++++++++++++++++
 .../protocol.vue                              |  6 +-
 .../chemotherapy/[id]/index.vue               | 42 ++++++++++
 .../outpatient-action/chemotherapy/index.vue  |  9 ++
 .../chemotherapy}/list.vue                    |  2 +-
 .../outpation-action/cemotherapy/index.vue    |  7 --
 ...erapy.schema.ts => chemotherapy.schema.ts} |  2 +-
 public/side-menu-items/doc.json               |  2 +-
 public/side-menu-items/nur.json               |  2 +-
 public/side-menu-items/nut.json               |  2 +-
 public/side-menu-items/sys.json               |  2 +-
 26 files changed, 296 insertions(+), 24 deletions(-)
 rename app/components/app/{cemotherapy => chemotherapy}/dialog-verification.vue (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/entry-form.vue (98%)
 create mode 100644 app/components/app/chemotherapy/list-cfg.medicine.ts
 rename app/components/app/{cemotherapy => chemotherapy}/list-cfg.protocol.ts (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/list-cfg.ts (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/list-cfg.visit.ts (100%)
 create mode 100644 app/components/app/chemotherapy/list.medicine.vue
 rename app/components/app/{cemotherapy => chemotherapy}/list.protocol.vue (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/list.register.vue (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/list.visit.vue (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/list.vue (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/sample.ts (92%)
 rename app/components/app/{cemotherapy => chemotherapy}/status-badge.vue (100%)
 rename app/components/app/{cemotherapy => chemotherapy}/verify-button.vue (100%)
 rename app/components/content/{cemotherapy => chemotherapy}/list.vue (88%)
 create mode 100644 app/components/content/chemotherapy/process.vue
 rename app/components/content/{cemotherapy => chemotherapy}/protocol.vue (90%)
 create mode 100644 app/pages/(features)/outpatient-action/chemotherapy/[id]/index.vue
 create mode 100644 app/pages/(features)/outpatient-action/chemotherapy/index.vue
 rename app/pages/(features)/{outpation-action/cemotherapy => outpatient-action/chemotherapy}/list.vue (96%)
 delete mode 100644 app/pages/(features)/outpation-action/cemotherapy/index.vue
 rename app/schemas/{cemotherapy.schema.ts => chemotherapy.schema.ts} (97%)

diff --git a/app/components/app/cemotherapy/dialog-verification.vue b/app/components/app/chemotherapy/dialog-verification.vue
similarity index 100%
rename from app/components/app/cemotherapy/dialog-verification.vue
rename to app/components/app/chemotherapy/dialog-verification.vue
diff --git a/app/components/app/cemotherapy/entry-form.vue b/app/components/app/chemotherapy/entry-form.vue
similarity index 98%
rename from app/components/app/cemotherapy/entry-form.vue
rename to app/components/app/chemotherapy/entry-form.vue
index 3a4104b8..39113d63 100644
--- a/app/components/app/cemotherapy/entry-form.vue
+++ b/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: '',
diff --git a/app/components/app/chemotherapy/list-cfg.medicine.ts b/app/components/app/chemotherapy/list-cfg.medicine.ts
new file mode 100644
index 00000000..103452f5
--- /dev/null
+++ b/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: {},
+}
+
diff --git a/app/components/app/cemotherapy/list-cfg.protocol.ts b/app/components/app/chemotherapy/list-cfg.protocol.ts
similarity index 100%
rename from app/components/app/cemotherapy/list-cfg.protocol.ts
rename to app/components/app/chemotherapy/list-cfg.protocol.ts
diff --git a/app/components/app/cemotherapy/list-cfg.ts b/app/components/app/chemotherapy/list-cfg.ts
similarity index 100%
rename from app/components/app/cemotherapy/list-cfg.ts
rename to app/components/app/chemotherapy/list-cfg.ts
diff --git a/app/components/app/cemotherapy/list-cfg.visit.ts b/app/components/app/chemotherapy/list-cfg.visit.ts
similarity index 100%
rename from app/components/app/cemotherapy/list-cfg.visit.ts
rename to app/components/app/chemotherapy/list-cfg.visit.ts
diff --git a/app/components/app/chemotherapy/list.medicine.vue b/app/components/app/chemotherapy/list.medicine.vue
new file mode 100644
index 00000000..748c8cb9
--- /dev/null
+++ b/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>
+
diff --git a/app/components/app/cemotherapy/list.protocol.vue b/app/components/app/chemotherapy/list.protocol.vue
similarity index 100%
rename from app/components/app/cemotherapy/list.protocol.vue
rename to app/components/app/chemotherapy/list.protocol.vue
diff --git a/app/components/app/cemotherapy/list.register.vue b/app/components/app/chemotherapy/list.register.vue
similarity index 100%
rename from app/components/app/cemotherapy/list.register.vue
rename to app/components/app/chemotherapy/list.register.vue
diff --git a/app/components/app/cemotherapy/list.visit.vue b/app/components/app/chemotherapy/list.visit.vue
similarity index 100%
rename from app/components/app/cemotherapy/list.visit.vue
rename to app/components/app/chemotherapy/list.visit.vue
diff --git a/app/components/app/cemotherapy/list.vue b/app/components/app/chemotherapy/list.vue
similarity index 100%
rename from app/components/app/cemotherapy/list.vue
rename to app/components/app/chemotherapy/list.vue
diff --git a/app/components/app/cemotherapy/sample.ts b/app/components/app/chemotherapy/sample.ts
similarity index 92%
rename from app/components/app/cemotherapy/sample.ts
rename to app/components/app/chemotherapy/sample.ts
index 24b9ebbf..082cde66 100644
--- a/app/components/app/cemotherapy/sample.ts
+++ b/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',
diff --git a/app/components/app/cemotherapy/status-badge.vue b/app/components/app/chemotherapy/status-badge.vue
similarity index 100%
rename from app/components/app/cemotherapy/status-badge.vue
rename to app/components/app/chemotherapy/status-badge.vue
diff --git a/app/components/app/cemotherapy/verify-button.vue b/app/components/app/chemotherapy/verify-button.vue
similarity index 100%
rename from app/components/app/cemotherapy/verify-button.vue
rename to app/components/app/chemotherapy/verify-button.vue
diff --git a/app/components/content/cemotherapy/list.vue b/app/components/content/chemotherapy/list.vue
similarity index 88%
rename from app/components/content/cemotherapy/list.vue
rename to app/components/content/chemotherapy/list.vue
index 957a827f..d4104f03 100644
--- a/app/components/content/cemotherapy/list.vue
+++ b/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,
diff --git a/app/components/content/chemotherapy/process.vue b/app/components/content/chemotherapy/process.vue
new file mode 100644
index 00000000..e6ae4b45
--- /dev/null
+++ b/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>
+
diff --git a/app/components/content/cemotherapy/protocol.vue b/app/components/content/chemotherapy/protocol.vue
similarity index 90%
rename from app/components/content/cemotherapy/protocol.vue
rename to app/components/content/chemotherapy/protocol.vue
index 427b4642..82050d79 100644
--- a/app/components/content/cemotherapy/protocol.vue
+++ b/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 () => {
diff --git a/app/pages/(features)/outpatient-action/chemotherapy/[id]/index.vue b/app/pages/(features)/outpatient-action/chemotherapy/[id]/index.vue
new file mode 100644
index 00000000..edc1cd02
--- /dev/null
+++ b/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>
+
diff --git a/app/pages/(features)/outpatient-action/chemotherapy/index.vue b/app/pages/(features)/outpatient-action/chemotherapy/index.vue
new file mode 100644
index 00000000..4dd31ebe
--- /dev/null
+++ b/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>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/list.vue b/app/pages/(features)/outpatient-action/chemotherapy/list.vue
similarity index 96%
rename from app/pages/(features)/outpation-action/cemotherapy/list.vue
rename to app/pages/(features)/outpatient-action/chemotherapy/list.vue
index 02326343..a141baaa 100644
--- a/app/pages/(features)/outpation-action/cemotherapy/list.vue
+++ b/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>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/index.vue b/app/pages/(features)/outpation-action/cemotherapy/index.vue
deleted file mode 100644
index 06da4369..00000000
--- a/app/pages/(features)/outpation-action/cemotherapy/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-</script>
-
-<template>
-  <ContentCemotherapyProtocol />
-</template>
diff --git a/app/schemas/cemotherapy.schema.ts b/app/schemas/chemotherapy.schema.ts
similarity index 97%
rename from app/schemas/cemotherapy.schema.ts
rename to app/schemas/chemotherapy.schema.ts
index df00c200..212e5358 100644
--- a/app/schemas/cemotherapy.schema.ts
+++ b/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',
diff --git a/public/side-menu-items/doc.json b/public/side-menu-items/doc.json
index e3ab2cdf..a0c8aa7d 100644
--- a/public/side-menu-items/doc.json
+++ b/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",
diff --git a/public/side-menu-items/nur.json b/public/side-menu-items/nur.json
index 8185456c..ca5a6108 100644
--- a/public/side-menu-items/nur.json
+++ b/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",
diff --git a/public/side-menu-items/nut.json b/public/side-menu-items/nut.json
index 4368b22e..0de1a113 100644
--- a/public/side-menu-items/nut.json
+++ b/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",
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 19491069..1e11655c 100644
--- a/public/side-menu-items/sys.json
+++ b/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",

From fb7731188d249dc0f02ba276e034a1030a686b5d Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Mon, 3 Nov 2025 15:52:35 +0700
Subject: [PATCH 09/13] feat(cemo): add mode adm + series

---
 .../content/chemotherapy/process.vue          | 76 +++++++++++++++++--
 .../chemotherapy/[id]/index.vue               |  0
 .../chemotherapy/index.vue                    |  2 +-
 .../chemotherapy/list.vue                     |  0
 public/side-menu-items/doc.json               |  4 +-
 public/side-menu-items/nur.json               |  2 +-
 public/side-menu-items/nut.json               |  4 +-
 public/side-menu-items/sys.json               |  2 +-
 8 files changed, 75 insertions(+), 15 deletions(-)
 rename app/pages/(features)/{outpatient-action => outpation-action}/chemotherapy/[id]/index.vue (100%)
 rename app/pages/(features)/{outpatient-action => outpation-action}/chemotherapy/index.vue (76%)
 rename app/pages/(features)/{outpatient-action => outpation-action}/chemotherapy/list.vue (100%)

diff --git a/app/components/content/chemotherapy/process.vue b/app/components/content/chemotherapy/process.vue
index e6ae4b45..e6238c82 100644
--- a/app/components/content/chemotherapy/process.vue
+++ b/app/components/content/chemotherapy/process.vue
@@ -10,11 +10,19 @@ 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({
@@ -25,12 +33,32 @@ const activeTab = computed({
 })
 
 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 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' } } },
 })
-const dataResBody = dataRes.body ?? null
-const data = dataResBody?.data ?? null
 
 // Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
 const protocolRows = [
@@ -62,8 +90,40 @@ const paginationMeta = {
 }
 
 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 } },
+  { 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>
 
@@ -74,10 +134,10 @@ const tabs: TabItem[] = [
     </div>
     <AppEncounterQuickInfo :data="data" />
     <CompTab
+      v-if="mode === 'series'"
       :data="tabs"
       :initial-active-tab="activeTab"
       @change-tab="activeTab = $event"
     />
   </div>
 </template>
-
diff --git a/app/pages/(features)/outpatient-action/chemotherapy/[id]/index.vue b/app/pages/(features)/outpation-action/chemotherapy/[id]/index.vue
similarity index 100%
rename from app/pages/(features)/outpatient-action/chemotherapy/[id]/index.vue
rename to app/pages/(features)/outpation-action/chemotherapy/[id]/index.vue
diff --git a/app/pages/(features)/outpatient-action/chemotherapy/index.vue b/app/pages/(features)/outpation-action/chemotherapy/index.vue
similarity index 76%
rename from app/pages/(features)/outpatient-action/chemotherapy/index.vue
rename to app/pages/(features)/outpation-action/chemotherapy/index.vue
index 4dd31ebe..a2dfdea5 100644
--- a/app/pages/(features)/outpatient-action/chemotherapy/index.vue
+++ b/app/pages/(features)/outpation-action/chemotherapy/index.vue
@@ -1,7 +1,7 @@
 <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')
+navigateTo('/outpation-action/chemotherapy/list')
 </script>
 
 <template>
diff --git a/app/pages/(features)/outpatient-action/chemotherapy/list.vue b/app/pages/(features)/outpation-action/chemotherapy/list.vue
similarity index 100%
rename from app/pages/(features)/outpatient-action/chemotherapy/list.vue
rename to app/pages/(features)/outpation-action/chemotherapy/list.vue
diff --git a/public/side-menu-items/doc.json b/public/side-menu-items/doc.json
index a0c8aa7d..b7ecb430 100644
--- a/public/side-menu-items/doc.json
+++ b/public/side-menu-items/doc.json
@@ -84,12 +84,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/chemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia/encounter"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
diff --git a/public/side-menu-items/nur.json b/public/side-menu-items/nur.json
index ca5a6108..edcbd575 100644
--- a/public/side-menu-items/nur.json
+++ b/public/side-menu-items/nur.json
@@ -63,7 +63,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/chemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
diff --git a/public/side-menu-items/nut.json b/public/side-menu-items/nut.json
index 0de1a113..ef71282a 100644
--- a/public/side-menu-items/nut.json
+++ b/public/side-menu-items/nut.json
@@ -35,12 +35,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/chemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 1e11655c..52db794c 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -139,7 +139,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/chemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",

From 64fe2524fbdb2279e9df651cadaa110dc4aa8896 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Tue, 4 Nov 2025 12:02:31 +0700
Subject: [PATCH 10/13] feat(cemo): enhance admin mode functionality and update
 series handling

---
 .../app/chemotherapy/action-proses.vue        |  30 +++
 .../app/chemotherapy/list-admin.vue           |  37 +++
 .../app/chemotherapy/list-cfg.verification.ts |  78 ++++++
 .../app/chemotherapy/list-verification.vue    |  37 +++
 .../content/chemotherapy/admin-list.vue       | 130 ++++++++++
 .../content/chemotherapy/verification.vue     | 241 ++++++++++++++++++
 .../chemotherapy/[mode]/index.vue             |  55 ++++
 7 files changed, 608 insertions(+)
 create mode 100644 app/components/app/chemotherapy/action-proses.vue
 create mode 100644 app/components/app/chemotherapy/list-admin.vue
 create mode 100644 app/components/app/chemotherapy/list-cfg.verification.ts
 create mode 100644 app/components/app/chemotherapy/list-verification.vue
 create mode 100644 app/components/content/chemotherapy/admin-list.vue
 create mode 100644 app/components/content/chemotherapy/verification.vue
 create mode 100644 app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue

diff --git a/app/components/app/chemotherapy/action-proses.vue b/app/components/app/chemotherapy/action-proses.vue
new file mode 100644
index 00000000..4e2efeb3
--- /dev/null
+++ b/app/components/app/chemotherapy/action-proses.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get proses handler from parent via inject
+const prosesHandler = inject<(rec: any) => void>('proses-handler', null)
+
+function handleProses() {
+  if (prosesHandler) {
+    prosesHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      class="border-orange-500 bg-orange-500 text-white hover:bg-orange-600"
+      @click="handleProses"
+    >
+      Proses
+    </Button>
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/list-admin.vue b/app/components/app/chemotherapy/list-admin.vue
new file mode 100644
index 00000000..a201f2a1
--- /dev/null
+++ b/app/components/app/chemotherapy/list-admin.vue
@@ -0,0 +1,37 @@
+<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.admin'
+
+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">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
+
diff --git a/app/components/app/chemotherapy/list-cfg.verification.ts b/app/components/app/chemotherapy/list-cfg.verification.ts
new file mode 100644
index 00000000..e75aa615
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.verification.ts
@@ -0,0 +1,78 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 180 },
+    { width: 150 },
+    { width: 100 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggalMasuk',
+    'pjBerkasRm',
+    'dokter',
+    'jenisRuangan',
+    'jenisTindakan',
+    'tanggalJadwalTindakan',
+    'status',
+    '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: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+
diff --git a/app/components/app/chemotherapy/list-verification.vue b/app/components/app/chemotherapy/list-verification.vue
new file mode 100644
index 00000000..93120f69
--- /dev/null
+++ b/app/components/app/chemotherapy/list-verification.vue
@@ -0,0 +1,37 @@
+<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.verification'
+
+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">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
+
diff --git a/app/components/content/chemotherapy/admin-list.vue b/app/components/content/chemotherapy/admin-list.vue
new file mode 100644
index 00000000..ef4f2a89
--- /dev/null
+++ b/app/components/content/chemotherapy/admin-list.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { format } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { Button } from '~/components/pub/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+import Input from '~/components/pub/ui/input/Input.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
+import AppChemotherapyListAdmin from '~/components/app/chemotherapy/list-admin.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Sample data - replace with actual API call
+import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
+
+const search = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: null,
+  to: null,
+})
+
+// Format date range for display
+const dateRangeDisplay = computed(() => {
+  if (dateRange.value.from && dateRange.value.to) {
+    return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
+  }
+  return '12 Agustus 2025 - 32 Agustus 2025' // Default display
+})
+
+// Filter + search (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ChemotherapyData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+// Pagination meta
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: filtered.value.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: Math.ceil(filtered.value.length / 10),
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  paginationMeta.page = page
+  paginationMeta.hasNext = page < paginationMeta.totalPage
+  paginationMeta.hasPrev = page > 1
+}
+
+function handleFilter() {
+  // TODO: Implement filter logic
+  console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
+}
+
+// Provide proses handler for action button
+function handleProses(rec: any) {
+  // Navigate to verification page with record
+  navigateTo(`/outpation-action/chemotherapy/verification?id=${rec.id}`)
+}
+
+provide('proses-handler', handleProses)
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <!-- Header Section -->
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Administrasi Pasien Rawat Jalan Kemoterapi</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
+      </p>
+    </div>
+
+    <!-- Search and Filter Bar -->
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <!-- Search Input -->
+      <div class="relative">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Input
+          v-model="search"
+          placeholder="Cari Nama /No.RM"
+          class="w-64 pl-9"
+        />
+      </div>
+
+      <!-- Date Range Picker -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
+          >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            {{ dateRangeDisplay }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <RangeCalendar v-model="dateRange" />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Filter Button -->
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
+        @click="handleFilter"
+      >
+        <FilterIcon class="mr-2 h-4 w-4" />
+        Filter
+      </Button>
+    </div>
+
+    <!-- Data Table -->
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyListAdmin
+        :data="filtered"
+        :pagination-meta="paginationMeta"
+        @page-change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
diff --git a/app/components/content/chemotherapy/verification.vue b/app/components/content/chemotherapy/verification.vue
new file mode 100644
index 00000000..5d993ca0
--- /dev/null
+++ b/app/components/content/chemotherapy/verification.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { format } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { Button } from '~/components/pub/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+import Input from '~/components/pub/ui/input/Input.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
+import AppChemotherapyListVerification from '~/components/app/chemotherapy/list-verification.vue'
+import DialogVerification from '~/components/app/chemotherapy/dialog-verification.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+const route = useRoute()
+const router = useRouter()
+
+// Sample patient data - replace with actual API call
+const patientData = ref({
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  jenisPembayaran: 'PKS',
+  noBilling: '18291822',
+  tanggalLahir: '23 April 1992',
+  usia: '33 tahun',
+  jenisKelamin: 'Laki-Laki (L)',
+  diagnosis: 'C34.9 - Karsinoma Paru',
+  klinik: 'Penyakit Dalam',
+})
+
+// Sample schedule data - replace with actual API call
+const scheduleData = ref([
+  {
+    id: 1,
+    tanggalMasuk: '12 Agustus 2025',
+    pjBerkasRm: 'TPP Rawat Jalan',
+    dokter: 'Dr. Andreas Sutaji',
+    jenisRuangan: 'Ruang Tindakan',
+    jenisTindakan: 'KEMOTERAPI',
+    tanggalJadwalTindakan: '-',
+    status: 'belum_terverifikasi',
+    tanggalPemeriksaan: '2025-08-12',
+  },
+])
+
+const search = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: null,
+  to: null,
+})
+
+// Format date range for display
+const dateRangeDisplay = computed(() => {
+  if (dateRange.value.from && dateRange.value.to) {
+    return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
+  }
+  return '12 Agustus 2025 - 32 Agustus 2025' // Default display
+})
+
+// Filter + search (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return scheduleData.value.filter((r: any) => {
+    if (q) {
+      return r.dokter.toLowerCase().includes(q) || patientData.value.noRm.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+// Pagination meta
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: filtered.value.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: Math.ceil(filtered.value.length / 10),
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  paginationMeta.page = page
+  paginationMeta.hasNext = page < paginationMeta.totalPage
+  paginationMeta.hasPrev = page > 1
+}
+
+function handleFilter() {
+  // TODO: Implement filter logic
+  console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
+}
+
+// Dialog verification state
+const isDialogVerificationOpen = ref(false)
+const selectedSchedule = ref<any>(null)
+
+// Provide verify handler for verify button
+function handleVerify(rec: any) {
+  selectedSchedule.value = rec
+  isDialogVerificationOpen.value = true
+}
+
+provide('verify-handler', handleVerify)
+
+function handleDialogSubmit(data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }) {
+  // TODO: Implement submit logic
+  console.log('Verification submitted', data)
+  isDialogVerificationOpen.value = false
+  // Refresh data after verification
+}
+
+function handleBackToAdmin() {
+  router.push('/outpation-action/chemotherapy/admin')
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <!-- Back Button -->
+    <div class="mb-4">
+      <Button
+        variant="outline"
+        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+        @click="handleBackToAdmin"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Kembali ke Administrasi Kunjungan
+      </Button>
+    </div>
+
+    <!-- Data Pasien Section -->
+    <div class="mb-6 rounded-md border bg-white p-4 shadow-sm">
+      <h3 class="mb-4 text-lg font-semibold">Data Pasien:</h3>
+      <div class="grid grid-cols-2 gap-6">
+        <!-- Left Column -->
+        <div class="space-y-3">
+          <div class="flex">
+            <span class="w-48 font-medium">No. RM:</span>
+            <span>{{ patientData.noRm }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Nama:</span>
+            <span>{{ patientData.nama }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Jenis Pembayaran:</span>
+            <span>{{ patientData.jenisPembayaran }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">No Billing:</span>
+            <span>{{ patientData.noBilling }}</span>
+          </div>
+        </div>
+        <!-- Right Column -->
+        <div class="space-y-3">
+          <div class="flex">
+            <span class="w-48 font-medium">Tanggal Lahir / Usia:</span>
+            <span>{{ patientData.tanggalLahir }} / {{ patientData.usia }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Jenis Kelamin:</span>
+            <span>{{ patientData.jenisKelamin }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Diagnosis:</span>
+            <span>{{ patientData.diagnosis }}</span>
+          </div>
+          <div class="flex">
+            <span class="w-48 font-medium">Klinik:</span>
+            <span>{{ patientData.klinik }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Header Section -->
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Verifikasi Jadwal Pasien</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Pantau riwayat masuk, dokter penanggung jawab, dan status pasien secara real-time.
+      </p>
+    </div>
+
+    <!-- Search and Filter Bar -->
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <!-- Search Input -->
+      <div class="relative">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Input
+          v-model="search"
+          placeholder="Cari Nama /No.RM"
+          class="w-64 pl-9"
+        />
+      </div>
+
+      <!-- Date Range Picker -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
+          >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            {{ dateRangeDisplay }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <RangeCalendar v-model="dateRange" />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Filter Button -->
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
+        @click="handleFilter"
+      >
+        <FilterIcon class="mr-2 h-4 w-4" />
+        Filter
+      </Button>
+    </div>
+
+    <!-- Data Table -->
+    <div class="overflow-x-auto p-4">
+      <AppChemotherapyListVerification
+        :data="filtered"
+        :pagination-meta="paginationMeta"
+        @page-change="handlePageChange"
+      />
+    </div>
+
+    <!-- Dialog Verification -->
+    <DialogVerification
+      v-model:open="isDialogVerificationOpen"
+      :tanggal-pemeriksaan="selectedSchedule?.tanggalPemeriksaan"
+      :jadwal-tanggal-pemeriksaan="selectedSchedule?.jadwalTanggalPemeriksaan"
+      @submit="handleDialogSubmit"
+    />
+  </div>
+</template>
+
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
new file mode 100644
index 00000000..281939aa
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
@@ -0,0 +1,55 @@
+<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'
+import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
+import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kemoterapi Admin',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => {
+    const mode = route.params.mode as string
+    if (mode === 'admin') {
+      return 'Administrasi Pasien Rawat Jalan Kemoterapi'
+    } else if (mode === 'verification') {
+      return 'Verifikasi Jadwal Pasien'
+    }
+    return route.meta.title as string
+  },
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+
+const mode = computed(() => route.params.mode as string)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyAdminList v-if="mode === 'admin'" />
+      <ContentChemotherapyVerification v-else-if="mode === 'verification'" />
+      <Error v-else :status-code="404" status-message="Mode tidak ditemukan" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
+

From be0a761170afd9cbbb1f163bbe9ed6520b71816e Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Tue, 4 Nov 2025 13:23:52 +0700
Subject: [PATCH 11/13] feat(cemo): change flow admin

---
 .../chemotherapy/dropdown-action-process.vue  | 63 +++++++++++++++
 .../app/chemotherapy/list-cfg.admin.ts        | 80 +++++++++++++++++++
 .../content/chemotherapy/admin-list.vue       | 22 ++++-
 .../content/chemotherapy/verification.vue     |  2 +-
 .../chemotherapy/[id]/index.vue               | 42 ----------
 .../chemotherapy/[mode]/[id]/verification.vue | 47 +++++++++++
 .../chemotherapy/[mode]/index.vue             |  6 +-
 7 files changed, 215 insertions(+), 47 deletions(-)
 create mode 100644 app/components/app/chemotherapy/dropdown-action-process.vue
 create mode 100644 app/components/app/chemotherapy/list-cfg.admin.ts
 delete mode 100644 app/pages/(features)/outpation-action/chemotherapy/[id]/index.vue
 create mode 100644 app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue

diff --git a/app/components/app/chemotherapy/dropdown-action-process.vue b/app/components/app/chemotherapy/dropdown-action-process.vue
new file mode 100644
index 00000000..56e14886
--- /dev/null
+++ b/app/components/app/chemotherapy/dropdown-action-process.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Proses',
+    onClick: () => {
+      process()
+    },
+    icon: 'i-lucide-pencil',
+  },
+]
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'Process'
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/app/chemotherapy/list-cfg.admin.ts b/app/components/app/chemotherapy/list-cfg.admin.ts
new file mode 100644
index 00000000..38d77121
--- /dev/null
+++ b/app/components/app/chemotherapy/list-cfg.admin.ts
@@ -0,0 +1,80 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('./dropdown-action-process.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    '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: {},
+}
diff --git a/app/components/content/chemotherapy/admin-list.vue b/app/components/content/chemotherapy/admin-list.vue
index ef4f2a89..be6d5810 100644
--- a/app/components/content/chemotherapy/admin-list.vue
+++ b/app/components/content/chemotherapy/admin-list.vue
@@ -13,7 +13,14 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 // Sample data - replace with actual API call
 import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
 
+
+const route = useRoute()
+const recId = ref(0)
+const recAction = ref('')
+const recItem = ref<any>(null)
+
 const search = ref('')
+const mode = route.params.mode as string || 'admin'
 const dateRange = ref<{ from: Date | null; to: Date | null }>({
   from: null,
   to: null,
@@ -65,6 +72,19 @@ function handleProses(rec: any) {
   navigateTo(`/outpation-action/chemotherapy/verification?id=${rec.id}`)
 }
 
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case 'Process':
+      navigateTo(`/outpation-action/chemotherapy/${mode}/${recId.value}/verification`)
+      break
+    case 'Verification':
+      break
+  }
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
 provide('proses-handler', handleProses)
 </script>
 
@@ -102,7 +122,7 @@ provide('proses-handler', handleProses)
           </Button>
         </PopoverTrigger>
         <PopoverContent class="w-auto p-0">
-          <RangeCalendar v-model="dateRange" />
+          <RangeCalendar />
         </PopoverContent>
       </Popover>
 
diff --git a/app/components/content/chemotherapy/verification.vue b/app/components/content/chemotherapy/verification.vue
index 5d993ca0..3243547a 100644
--- a/app/components/content/chemotherapy/verification.vue
+++ b/app/components/content/chemotherapy/verification.vue
@@ -205,7 +205,7 @@ function handleBackToAdmin() {
           </Button>
         </PopoverTrigger>
         <PopoverContent class="w-auto p-0">
-          <RangeCalendar v-model="dateRange" />
+          <RangeCalendar />
         </PopoverContent>
       </Popover>
 
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[id]/index.vue b/app/pages/(features)/outpation-action/chemotherapy/[id]/index.vue
deleted file mode 100644
index edc1cd02..00000000
--- a/app/pages/(features)/outpation-action/chemotherapy/[id]/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
-
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue b/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
new file mode 100644
index 00000000..ef936ff2
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/[mode]/[id]/verification.vue
@@ -0,0 +1,47 @@
+<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'
+import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
+import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kemoterapi Admin',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => 'Verifikasi Jadwal Pasien',
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+
+const mode = computed(() => route.params.mode as string)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentChemotherapyVerification />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
index 281939aa..cf33691a 100644
--- a/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
+++ b/app/pages/(features)/outpation-action/chemotherapy/[mode]/index.vue
@@ -19,8 +19,8 @@ useHead({
     const mode = route.params.mode as string
     if (mode === 'admin') {
       return 'Administrasi Pasien Rawat Jalan Kemoterapi'
-    } else if (mode === 'verification') {
-      return 'Verifikasi Jadwal Pasien'
+    } else if (mode === 'series') {
+      return 'Proses Jadwal Pasien'
     }
     return route.meta.title as string
   },
@@ -46,7 +46,7 @@ const mode = computed(() => route.params.mode as string)
   <div>
     <div v-if="canRead">
       <ContentChemotherapyAdminList v-if="mode === 'admin'" />
-      <ContentChemotherapyVerification v-else-if="mode === 'verification'" />
+      <ContentChemotherapyProcess v-else-if="mode === 'series'" />
       <Error v-else :status-code="404" status-message="Mode tidak ditemukan" />
     </div>
     <Error v-else :status-code="403" />

From a592a0be367f571d11f0a51619d22c0b00c56d51 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Tue, 4 Nov 2025 15:15:38 +0700
Subject: [PATCH 12/13] feat(cemo): add home encounter

---
 .../content/chemotherapy/process.vue          | 140 +------------
 app/components/content/encounter/home.vue     | 190 ++++++++++++++++++
 app/components/pub/my-ui/comp-tab/type.ts     |   1 +
 3 files changed, 193 insertions(+), 138 deletions(-)
 create mode 100644 app/components/content/encounter/home.vue

diff --git a/app/components/content/chemotherapy/process.vue b/app/components/content/chemotherapy/process.vue
index e6238c82..7f355b4b 100644
--- a/app/components/content/chemotherapy/process.vue
+++ b/app/components/content/chemotherapy/process.vue
@@ -1,143 +1,7 @@
 <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 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' },
-]
+import EncounterHome from '~/components/content/encounter/home.vue'
 </script>
 
 <template>
-  <div class="w-full">
-    <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>
+  <EncounterHome classes="chemotherapy" />
 </template>
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
new file mode 100644
index 00000000..1f2c2943
--- /dev/null
+++ b/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>
diff --git a/app/components/pub/my-ui/comp-tab/type.ts b/app/components/pub/my-ui/comp-tab/type.ts
index e6faacce..ba21d0b7 100644
--- a/app/components/pub/my-ui/comp-tab/type.ts
+++ b/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>
 }

From ccabe0177b12182e794d71be101b78657bd9f48a Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Fri, 14 Nov 2025 16:39:21 +0700
Subject: [PATCH 13/13] dev: hotfix, added combobox objectsToItems

---
 app/components/pub/my-ui/combobox/index.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
index 82a3b3cd..e4864f7f 100644
--- a/app/components/pub/my-ui/combobox/index.ts
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -20,4 +20,17 @@ export function recStrToItem(input: Record<string, string>): Item[] {
   return items
 }
 
+export function objectsToItems(input: object[], key = 'id', label = 'name'): Item[] {
+  const items: Item[] = []
+  for (const item of input) {
+    if (item.hasOwnProperty(key) && item.hasOwnProperty(label)) {
+      items.push({
+        value: item[key as keyof typeof item], // the hasOwnProperty check should be enough
+        label: item[label as keyof typeof item], // the hasOwnProperty check should be enough
+      })
+    }
+  }
+  return items
+}
+
 export { default as Combobox } from './combobox.vue'