Merge branch 'dev' into feat/radiology-order-54

2025-11-15 20:15:07 +07:00
parent e3fc1e4ab9 ccabe0177b
commit 3211972a84
62 changed files with 3559 additions and 130 deletions
@@ -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>
+
@@ -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>
+
@@ -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>
@@ -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>
@@ -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>
+
@@ -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: {},
+}
@@ -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: {},
+}
+
@@ -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: {},
+}
@@ -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: {},
+}
@@ -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: {},
+}
+
@@ -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: {},
+}
+
@@ -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>
+
@@ -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>
+
@@ -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>
@@ -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>
@@ -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>
+
@@ -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>
@@ -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
+]
@@ -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>
+
@@ -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>
+
@@ -0,0 +1,50 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: "Dosis" },
+    { label: 'Satuan' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['name', 'dose', 'uom.name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup_code || '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action: (rec: unknown, idx: number): RecComponent => {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {}
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+
+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">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
@@ -1,14 +1,30 @@
 <script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
 import { config } from './list-entry.cfg'

 defineProps<{
-  data: any[]
+  data: PrescriptionItem[]
 }>()
+
+const emit = defineEmits<{
+  add: [mode: 'mix' | 'non-mix']
+}>()
+
 </script>

 <template>
-  <PubMyUiDataTable
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
    v-bind="config"
    :rows="data"
  />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('add', 'mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+    <Button @click="emit('add', 'non-mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+  </div>
 </template>
@@ -0,0 +1,41 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+}
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: PrescriptionItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-2 2xl:mb-3"
+    v-bind="config"
+    :rows="data"
+  />
+</template>
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { LucidePlus } from 'lucide-vue-next';
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue';
+import * as Table from '~/components/pub/ui/table'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+
+import { genBase } from '~/models/_base';
+import { genMedicine } from '~/models/medicine';
+import type { MedicinemixItem } from '~/models/medicinemix-item';
+import type { PrescriptionItem } from '~/models/prescription-item';
+
+const props = defineProps<{
+  data: PrescriptionItem
+  items: MedicinemixItem[]
+}>()
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem, items: MedicinemixItem[]],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data, props.items)
+  }
+}
+
+function addItem() {
+  props.items.push({
+    ...genBase(),
+    medicineMix_id: 0,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    dose: 0,
+    uom_code: '',
+  })
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Frequensi</DE.Label>
+        <DE.Field><Input v-model="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Field><Input v-model="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Total</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
+  <Table.Table class="border mb-3 2xl:mb-4">
+    <Table.TableHeader class="[&_th]:h-8 [&_th]:2xl:h-9">
+      <Table.TableRow>
+        <Table.TableHead>Nama</Table.TableHead>
+        <Table.TableHead class="w-24">Dosis</Table.TableHead>
+        <Table.TableHead class="w-24">Satuan</Table.TableHead>
+        <Table.TableHead class="w-20">..</Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody class="[&_td]:p-0.6">
+      <Table.TableRow v-if="items.length > 0" v-for="item in items">
+        <Table.TableCell>
+          <Input v-model="item.medicine.name" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input v-model="item.dose" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input />
+        </Table.TableCell>
+      </Table.TableRow>
+      <Table.TableRow v-else>
+        <Table.TableCell colspan="4" class="!p-5 text-center">
+          Belum ada data
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <div>
+    <Button @click="addItem">
+      <LucidePlus />
+      Tambah
+    </Button>
+  </div>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+import { bigTimeUnitCodes } from '~/lib/constants'
+
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const props = defineProps<{
+  data: PrescriptionItem
+}>()
+
+type ClickType = 'close' | 'save'
+type Item = {
+  value: string
+  label: string
+}
+
+const bigTimeUnitCodeItems: Item[] = []
+
+if(!props.data.intervalUnit_code) {
+  props.data.intervalUnit_code = 'day'
+}
+
+Object.keys(bigTimeUnitCodes).forEach((key) => {
+  bigTimeUnitCodeItems.push({
+    value: key,
+    label: bigTimeUnitCodes[key] || '',
+  })
+})
+
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Frequensi</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Dosis</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Interval</DE.Label>
+      <DE.Field>
+        <Select
+          v-model="data.intervalUnit_code"
+          :items="bigTimeUnitCodeItems"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Total</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Prescription } from '~/models/prescription'
+
+const props = defineProps<{
+  data: Prescription
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data.issuedAt?.substring(0, 10) || data.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>
@@ -1,32 +1,36 @@
 <template>
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div class="md:pe-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
+    <div class="md:ps-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
  </div>
 </template>
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { Prescription } from '~/models/prescription'
+
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import PrescriptionItemList from '~/components/app/prescription-item/list-entry.vue';
+
+interface Props {
+  data: Prescription[]
+  isLoading: boolean
+  paginationMeta?: PaginationMeta
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div v-if="isLoading" class="p-10 text-center">
+    Memuat data..
+  </div>
+  <div v-else-if="data && data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <!-- <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div> -->
+  </div>
+  <div v-else v-for="(item, idx) in data">
+    <Separator class="my-5" />
+    <div class="md:grid md:grid-cols-2 font-semibold">
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>Order #{{ data.length - idx }}</DE.Label>
+            <DE.Field>
+              2025-01-01
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Status</DE.Label>
+            <DE.Field>
+                {{ item.status_code }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>DPJP</DE.Label>
+            <DE.Field>
+                {{ item.doctor?.employee?.person.name }} 
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>PPDS</DE.Label>
+            <DE.Field>
+                {{ item.specialistIntern?.person.name }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+    </div>
+    <PrescriptionItemList :data="item.items || []" />
+  </div>
+</template>
+
+
+<!-- <Separator class="my-4 xl:my-5" />
+<AppPrescriptionEntry />
+<div class="flex content-center mb-3">
+  <div class="me-auto pt-2">
+    <div class="font-semibold md:text-sm xl:text-base">Daftar Obat</div>
+  </div>
+  <div>
+    <Button @click="addMedicine" class="me-2">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+    <Button @click="addMedicineMix">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+  </div>
+</div>
+<PrescriptionItemListEntry :data=[] /> -->
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// import { Block, Cell } from '~/components/pub/my-ui/doc-entry/index'
+// import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+// import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Separator class="my-5" />
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Order #1</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+            2025-01-01
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Status
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama Dokter
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>PPDS</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama PPDS
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+  </div>
+</template>
@@ -1,5 +1,37 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+import { add } from 'date-fns';
+
+interface Props {
+  data: Prescription[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
 <template>
-  <div class="p-10 text-center">
+  <div v-if="data.length == 0" class="p-10 text-center">
    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
    <div>
      <Button>
@@ -8,35 +40,33 @@
      </Button>
    </div>
  </div>
-  <Separator class="my-5" />
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
-  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count="7" class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
+    <!-- <div v-if="idx < data.length - 1" class="my-8 -mx-4 border-t border-t-slate-300" /> -->
+  </template>
 </template>
@@ -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>
+
@@ -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>
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import EncounterHome from '~/components/content/encounter/home.vue'
+</script>
+
+<template>
+  <EncounterHome classes="chemotherapy" />
+</template>
@@ -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>
@@ -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>
+
@@ -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>
@@ -14,7 +14,7 @@ import Status from '~/components/content/encounter/status.vue'
 import AssesmentFunctionList from '~/components/content/soapi/entry.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 Prescription from '~/components/content/prescription/main.vue'
 import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
 import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
@@ -62,7 +62,7 @@ const tabs: TabItem[] = [
  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
  { value: 'consent', label: 'General Consent' },
  { value: 'patient-note', label: 'CPRJ' },
-  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
+  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
  { value: 'device', label: 'Order Alkes' },
  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+import { getDetail } from '~/services/prescription.service'
+import Detail from '~/components/app/prescription/detail.vue'
+import { getList as getPrescriptionItemList } from '~/services/prescription-item.service'
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import { type PrescriptionItem } from '~/models/prescription-item'
+
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
+import { create } from '~/services/prescription-item.service';
+
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+
+import {
+  recItem,
+} from '~/handlers/prescription-item.handler'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+// const route = useRoute()
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data || null
+const items = ref(data?.items || [])
+
+const {
+  data: prescriptionItems,
+  fetchData: getMyList,
+} = usePaginatedList<PrescriptionItem> ({
+  fetchFn: async ({ page, search }) => {
+    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription-item',
+})
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Tambah Order Obat / Resep',
+  icon: 'i-lucide-box',
+}
+
+const mixDialogOpen = ref(false)
+const nonMixDialogOpen = ref(false)
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function addItem(mode: 'mix' | 'non-mix') {
+  if (mode === 'mix') {
+    mixDialogOpen.value = true
+  } else if (mode === 'non-mix') {
+    nonMixDialogOpen.value = true
+  }
+}
+
+function saveMix() {
+  create({data})
+}
+
+function saveNonMix(data: PrescriptionItem) {
+  create({data})
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="prescriptionItems"
+    @add="addItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="mixDialogOpen"
+    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <MixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveMix"
+    />
+  </Dialog>
+
+  <Dialog
+    v-model:open="nonMixDialogOpen"
+    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <NonMixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveNonMix"
+    />
+  </Dialog>
+</template>
@@ -1,37 +1,82 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { toast } from '~/components/pub/ui/toast'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'

-const data = ref([])
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionRemove,
+  handleActionSave,
+} from '~/handlers/prescription.handler'

-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Services
+import { getList, getDetail } from '~/services/prescription.service'
+import List from '~/components/app/prescription/list.vue'
+import type { Prescription } from '~/models/prescription'

-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  fetchData: getMyList,
+} = usePaginatedList<Prescription>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription'
 })

-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
 const headerPrep: HeaderPrep = {
-  title: 'Resep Obat',
-  icon: 'i-lucide-panel-bottom',
+  title: 'Order Obat',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
  addNav: {
    label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
  },
 }

@@ -40,33 +85,82 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)

-onMounted(() => {
-  getMaterialList()
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Konsultasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      break
+  }
 })

-async function getMaterialList() {
-  isLoading.dataListLoading = true
+watch([isFormEntryDialogOpen], async () => {
+  if (isFormEntryDialogOpen.value) {
+    isFormEntryDialogOpen.value = false;
+    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
+  }
+})

-  // const resp = await xfetch('/api/v1/material')
-  // if (resp.success) {
-  //   data.value = (resp.body as Record<string, any>).data
-  // }
-
-  isLoading.dataListLoading = false
+function cancel(data: Prescription) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
 }
+
+function edit(data: Prescription) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: Prescription) {
+}
+
 </script>

 <template>
-  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...headerPrep }" />
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />

-  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
-
-  <AppPrescriptionEntry />
-
-  <PrescriptionItemListEntry :data=[] />
-  <div>
-    <Button>
-      Tambah
-    </Button>
-  </div>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+  </RecordConfirmation>
 </template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
@@ -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'
@@ -2,5 +2,6 @@ export interface TabItem {
  value: string
  label: string
  component?: any
+  groups?: string[]
  props?: Record<string, any>
 }
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
@@ -0,0 +1,17 @@
+import { createCrudHandler, genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/prescription.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove})
@@ -28,9 +28,10 @@ export interface DeleteDto {

 export function genCreateDto(): CreateDto {
  return {
+    date: '',
    encounter_id: 0,
    problem: '',
-    unit_id: 0,
+    dstUnit_id: 0,
  }
 }

@@ -1,10 +1,10 @@
+import { type Base, genBase } from "./_base";
 import { type Encounter, genEncounter } from "./encounter";
 import { type Doctor, genDoctor } from "./doctor";
 import { type PrescriptionItem } from "./prescription-item";
 import type { SpecialistIntern } from "./specialist-intern";

-export interface Prescription {
-  id: number
+export interface Prescription extends Base {
  encounter_id: number
  encounter: Encounter
  doctor_id: number
@@ -44,7 +44,7 @@ export interface DeleteDto {

 export function genPresciption(): Prescription {
  return {
-    id: 0,
+    ...genBase(),
    encounter_id: 0,
    encounter: genEncounter(),
    doctor_id: 0,
@@ -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>
@@ -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>
@@ -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>
+
@@ -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>
@@ -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>
@@ -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',
+  }),
+})
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const PrescriptionItemSchema = z.object({
+})
+
+type PrescriptionItemFormData = z.infer<typeof PrescriptionItemSchema> & PrescriptionItem
+
+export { PrescriptionItemSchema }
+export type { PrescriptionItemFormData }
@@ -0,0 +1,11 @@
+import { z } from 'zod'
+import type { Prescription } from '~/models/prescription'
+
+const PrescriptionSchema = z.object({
+    'encounter-id': z.number().nullable().optional(),
+})
+
+type PrescriptionFormData = z.infer<typeof PrescriptionSchema> & Prescription
+
+export { PrescriptionSchema }
+export type { PrescriptionFormData }
@@ -0,0 +1,23 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/prescription-item'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
@@ -0,0 +1,24 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/prescription'
+const name = 'prescription'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
@@ -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"
      }
    ]
  },
@@ -63,7 +63,7 @@
      {
        "title": "Kemoterapi",
        "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
      },
      {
        "title": "Hemofilia",
@@ -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"
      }
    ]
  },
@@ -139,7 +139,7 @@
      {
        "title": "Kemoterapi",
        "icon": "i-lucide-droplets",
-        "link": "/outpation-action/cemotherapy"
+        "link": "/outpation-action/chemotherapy"
      },
      {
        "title": "Hemofilia",