Merge pull request #164 from dikstub-rssa/feeat/pendaftaran-kemoterapi-141

Feat: Pendaftaran Kemoterapi

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>
+

app/components/app/chemotherapy/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>
+

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>

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

@@ -0,0 +1,302 @@
+<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 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 DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { chemotherapySchema } from "~/schemas/chemotherapy.schema"
+
+interface Props {
+  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(chemotherapySchema),
+  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="doctor"
+              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>

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>
+

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: {},
+}

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

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

app/components/app/chemotherapy/list-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: {},
+}

app/components/app/chemotherapy/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: {},
+}

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: {},
+}
+

app/components/app/chemotherapy/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: {},
+}
+

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>
+

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

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

app/components/app/chemotherapy/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>

app/components/app/chemotherapy/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>

app/components/app/chemotherapy/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>
+

app/components/app/chemotherapy/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>

app/components/app/chemotherapy/sample.ts

@@ -0,0 +1,49 @@
+export type ChemotherapyData = {
+  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: ChemotherapyData[] = [
+  {
+    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
+]

app/components/app/chemotherapy/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>
+

app/components/app/chemotherapy/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>
+

app/components/content/chemotherapy/admin-list.vue

@@ -0,0 +1,150 @@
+<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 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,
+})
+
+// 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}`)
+}
+
+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>
+
+<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 />
+        </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>
+

app/components/content/chemotherapy/list.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Components
+import AppChemotherapyList from '~/components/app/chemotherapy/list.vue'
+
+// Samples
+import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/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: ChemotherapyData) => {
+    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">
+      <AppChemotherapyList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+</template>

app/components/content/chemotherapy/process.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import EncounterHome from '~/components/content/encounter/home.vue'
+</script>
+
+<template>
+  <EncounterHome classes="chemotherapy" />
+</template>

app/components/content/chemotherapy/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/chemotherapy/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: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
+  { value: 'chemotherapy-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>

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 />
+        </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>
+

app/components/content/encounter/home.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { getDetail } from '~/services/encounter.service'
+
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
+import Consultation from '~/components/content/consultation/list.vue'
+import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
+import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps<{
+  classes?: string
+}>()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
+  },
+})
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+// const dataRes = await getDetail(id, {
+//   includes:
+//     'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
+// })
+// const dataResBody = dataRes.body ?? null
+// const data = dataResBody?.data ?? null
+
+// Dummy data so AppEncounterQuickInfo can render in development/storybook
+// Replace with real API result when available (see commented fetch below)
+const data = ref<any>({
+  patient: {
+    number: 'RM-2025-0001',
+    person: {
+      name: 'John Doe',
+      birthDate: '1980-01-01T00:00:00Z',
+      gender_code: 'M',
+      addresses: [{ address: 'Jl. Contoh No.1, Jakarta' }],
+      frontTitle: '',
+      endTitle: '',
+    },
+  },
+  visitDate: new Date().toISOString(),
+  unit: { name: 'Onkologi' },
+  responsible_doctor: null,
+  appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } },
+})
+
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
+  {
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
+  },
+  {
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
+  },
+]
+
+const paginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+const tabsRaws: TabItem[] = [
+  {
+    value: 'status',
+    label: 'Status Masuk/Keluar',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Status,
+    props: { encounter: data },
+  },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalAssesmentList,
+  },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: EarlyMedicalRehabList,
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    groups: ['ambulatory', 'rehabilitation'],
+    component: AssesmentFunctionList,
+  },
+  { value: 'therapy-protocol', groups: ['ambulatory', 'rehabilitation'], label: 'Protokol Terapi' },
+  {
+    value: 'chemotherapy-protocol',
+    label: 'Protokol Kemoterapi',
+    groups: ['chemotherapy'],
+    component: ProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  {
+    value: 'chemotherapy-medicine',
+    label: 'Protokol Obat Kemoterapi',
+    groups: ['chemotherapy'],
+    component: MedicineProtocolList,
+    props: { data: protocolRows, paginationMeta },
+  },
+  { value: 'report', label: 'Laporan Tindakan', groups: ['chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'education-assessment',
+    label: 'Asesmen Kebutuhan Edukasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+  },
+  { value: 'consent', label: 'General Consent', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'patient-note', label: 'CPRJ', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'prescription',
+    label: 'Order Obat',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: PrescriptionList,
+  },
+  { value: 'device', label: 'Order Alkes', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-radiology', label: 'Order Radiologi', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'medical-action', label: 'Order Ruang Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'mcu-result', label: 'Hasil Penunjang', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  {
+    value: 'consultation',
+    label: 'Konsultasi',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: Consultation,
+    props: { encounter: data },
+  },
+  { value: 'resume', label: 'Resume', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'control', label: 'Surat Kontrol', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'screening', label: 'Skrinning MPP', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', groups: ['ambulatory', 'rehabilitation'] },
+  { value: 'price-list', label: 'Tarif Tindakan', groups: ['ambulatory', 'rehabilitation', 'chemotherapy'] },
+]
+
+const tabs = computed(() => {
+  return tabsRaws
+    .filter((tab: TabItem) => tab.groups ? tab.groups.some((group: string) => props.classes?.includes(group)) : true)
+    .map((tab: TabItem) => {
+      return { ...tab, props: { ...tab.props, encounter: data } }
+    })
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    </div>
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
+  </div>
+</template>

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

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

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

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-  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>
-</template>

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>

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 === 'series') {
+      return 'Proses 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'" />
+      <ContentChemotherapyProcess v-else-if="mode === 'series'" />
+      <Error v-else :status-code="404" status-message="Mode tidak ditemukan" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
+

app/pages/(features)/outpation-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('/outpation-action/chemotherapy/list')
+</script>
+
+<template>
+  <div />
+</template>

app/pages/(features)/outpation-action/chemotherapy/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">
+      <ContentChemotherapyList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

app/schemas/chemotherapy.schema.ts

@@ -0,0 +1,73 @@
+import { z } from 'zod'
+
+const dateStringSchema = z.string().min(1)
+
+export const chemotherapySchema = 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',
+  }),
+})

public/side-menu-items/emp-doc.json

@@ -84,12 +84,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia/encounter"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },

public/side-menu-items/emp-nur.json

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

public/side-menu-items/emp-nut.json

@@ -35,12 +35,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-action/hemophilia"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },

public/side-menu-items/system.json

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