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

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

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