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

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

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