From 0ec9cc091f56f055dd18c10e55cfaa57ea1d62f2 Mon Sep 17 00:00:00 2001
From: "yusron.alamsyah2311" <yusron.alamsyah@rssa.id>
Date: Tue, 7 Jul 2026 08:51:56 +0700
Subject: [PATCH] feat access CRUD pages

---
 components/pendaftaran/CardAntrianList.vue |   4 +-
 pages/antrean/all.vue                      |  17 +-
 pages/antrean/kategori/[id].vue            |  18 +-
 pages/antrean/spesialis/[kode].vue         |  17 +-
 pages/antrean/subspesialis/[kode].vue      |  16 +-
 pages/dashboard.vue                        |  12 ++
 pages/setting/hak-akses/form.vue           | 184 ++++++++++++++++++---
 store/userMenu.ts                          |   8 +
 utils/menu.ts                              |  16 ++
 9 files changed, 251 insertions(+), 41 deletions(-)
 create mode 100644 utils/menu.ts

diff --git a/components/pendaftaran/CardAntrianList.vue b/components/pendaftaran/CardAntrianList.vue
index 3ea0bb1..9f21a73 100644
--- a/components/pendaftaran/CardAntrianList.vue
+++ b/components/pendaftaran/CardAntrianList.vue
@@ -10,7 +10,7 @@ interface Props {
     loading?: boolean;
     hasMore?: boolean;
     totalItems?: number;
-    getActions?: (item: any) => Array<{ icon: string; color: string; tooltip: string; event: string }>;
+    getActions?: (item: any) => Array<{ icon: string; color: string; tooltip: string; event: string; access?: boolean }>;
     context?: 'all' | 'kategori' | 'spesialis' | 'subspesialis';
 }
 
@@ -241,7 +241,7 @@ onUnmounted(() => {
                                     <v-col cols="4"   class="d-flex justify-end align-end">
                                         <v-btn-group density="compact" variant="outlined">
                                                 <template v-for="action in getActions(item)" :key="action.event">
-                                                    <v-btn  :color="action.color"
+                                                    <v-btn v-if="action.access"  :color="action.color"
                                                         :prepend-icon="action.icon" size="small" variant="tonal"
                                                         @click.stop="handleActionClick(action.event, item)">
                                                         {{ action.tooltip }}
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
index aa952af..9f7f452 100644
--- a/pages/antrean/all.vue
+++ b/pages/antrean/all.vue
@@ -13,6 +13,8 @@ import { usePendaftaranStore } from '~/store/pendaftaran';
 import type { Dokter } from '~/types/pendaftaran';
 import type { KategoriOperasi } from '~/types/antrean';
 import api from '~/services/api';
+import { findMenuItemByPath } from '~/utils/menu';
+import { useUserMenuStore } from '~/store/userMenu';
 
 definePageMeta({
   middleware: 'auth',
@@ -21,8 +23,12 @@ definePageMeta({
 
 const pendaftaranStore = usePendaftaranStore();
 const route = useRoute();
-const router = useRouter();
-
+const menuStore = useUserMenuStore();
+const keyAccess = '/antrean/all';
+const antreanAllMenuItem = computed(() => {
+    const findMenu = findMenuItemByPath(menuStore.menuItems as any[], keyAccess);
+    return findMenu;
+});
 const getSearchFromRoute = () => {
         const q = route.query.search;
         if (Array.isArray(q)) return q[0] ?? '';
@@ -264,9 +270,9 @@ const showSnackbar = (message: string, color: string = 'success') => {
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
         // { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
-        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
-        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
-        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete' }
+        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit', access : antreanAllMenuItem.value?.access?.update },
+        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus', access : antreanAllMenuItem.value?.access?.update },
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete', access : antreanAllMenuItem.value?.access?.delete }
     ];
 
     // If status is Selesai or Batal, only show View action
@@ -374,6 +380,7 @@ const handleFilterSearch = ({ modelKey, query }: { modelKey: string, query: stri
                         </div>
                         
                         <v-btn
+                            v-if="antreanAllMenuItem.access.create"
                             color="primary"
                             size="large"
                             elevation="2"
diff --git a/pages/antrean/kategori/[id].vue b/pages/antrean/kategori/[id].vue
index b7770c9..3dceccd 100644
--- a/pages/antrean/kategori/[id].vue
+++ b/pages/antrean/kategori/[id].vue
@@ -11,11 +11,21 @@ import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
 import { usePendaftaranStore } from '~/store/pendaftaran';
 import type { Dokter } from '~/types/pendaftaran';
 import api from '~/services/api';
+import { findMenuItemByPath } from '~/utils/menu';
+import { useUserMenuStore } from '~/store/userMenu';
 
 const route = useRoute();
 const idKategori = route.params.id as string;
 const categoryName = route.query.category as string || 'Kategori';
 const pendaftaranStore = usePendaftaranStore();
+
+const menuStore = useUserMenuStore();
+
+const antreanKategoriMenuItem = computed(() => {
+    const findMenu = findMenuItemByPath(menuStore.menuItems as any[], '/antrean/list-kategori');
+    return findMenu;
+});
+
 type SelectOption = { label: string; value: any };
 
 // State
@@ -208,9 +218,9 @@ onMounted(() => {
 // Function to get actions based on item status
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
-        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
-        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
-        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete' }
+        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit',access : antreanKategoriMenuItem.value?.access?.update },
+        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus', access : antreanKategoriMenuItem.value?.access?.update },
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete', access : antreanKategoriMenuItem.value?.access?.delete }
     ];
 
     // If status is Selesai or Batal, only show View action
@@ -305,7 +315,7 @@ const handleUpdateStatusSuccess = () => {
                     <FilterSortMenu v-model="filterValues" :filters="filterOptions" @search="handleFilterSearch" />
                 </div>
 
-                <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
+                <v-btn v-if="antreanKategoriMenuItem.access.create" color="primary" size="large" elevation="2" @click="showModal = true">
                     <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
                     Pendaftaran Operasi Baru
                 </v-btn>
diff --git a/pages/antrean/spesialis/[kode].vue b/pages/antrean/spesialis/[kode].vue
index 48ba250..64cf9f8 100644
--- a/pages/antrean/spesialis/[kode].vue
+++ b/pages/antrean/spesialis/[kode].vue
@@ -13,11 +13,20 @@ import { usePendaftaranStore } from '~/store/pendaftaran';
 import type { Dokter } from '~/types/pendaftaran';
 import type { KategoriOperasi } from '~/types/antrean';
 import api from '~/services/api';
+import { findMenuItemByPath } from '~/utils/menu';
+import { useUserMenuStore } from '~/store/userMenu';
 
 const route = useRoute();
 const kodeSpesialis = route.params.kode as string;
 const spesialisName = route.query.spesialis as string || 'Spesialis';
 const pendaftaranStore = usePendaftaranStore();
+const menuStore = useUserMenuStore();
+
+const antreanSpesialisMenuItem = computed(() => {
+    const findMenu = findMenuItemByPath(menuStore.menuItems as any[], '/antrean/list-spesialis');
+    return findMenu;
+});
+
 type SelectOption = { label: string; value: any };
 
 // State
@@ -243,9 +252,9 @@ onMounted(() => {
 // Function to get actions based on item status
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
-        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
-        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
-        { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit', access: antreanSpesialisMenuItem.value?.access?.update },
+        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus', access: antreanSpesialisMenuItem.value?.access?.update },
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete', access: antreanSpesialisMenuItem.value?.access?.delete }
     ];
 
     // If status is Selesai or Batal, only show View action
@@ -345,7 +354,7 @@ const handleUpdateStatusSuccess = () => {
                             />
                         </div>
 
-                        <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
+                        <v-btn v-if="antreanSpesialisMenuItem.access.create" color="primary" size="large" elevation="2" @click="showModal = true">
                             <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
                             Pendaftaran Operasi Baru
                         </v-btn>
diff --git a/pages/antrean/subspesialis/[kode].vue b/pages/antrean/subspesialis/[kode].vue
index 82b15d8..03c8f34 100644
--- a/pages/antrean/subspesialis/[kode].vue
+++ b/pages/antrean/subspesialis/[kode].vue
@@ -12,6 +12,8 @@ import { usePendaftaranStore } from '~/store/pendaftaran';
 import type { Dokter } from '~/types/pendaftaran';
 import type { KategoriOperasi } from '~/types/antrean';
 import api from '~/services/api';
+import { findMenuItemByPath } from '~/utils/menu';
+import { useUserMenuStore } from '~/store/userMenu';
 
 const route = useRoute();
 const kodeSubSpesialis = route.params.kode as string;
@@ -19,6 +21,12 @@ const subSpesialisName = route.query.subspecialis as string || 'Sub Spesialis';
 const spesialisId = route.query.spesialis_id as string || null;
 const pendaftaranStore = usePendaftaranStore();
 type SelectOption = { label: string; value: any };
+const menuStore = useUserMenuStore();
+
+const antreanSpesialisMenuItem = computed(() => {
+    const findMenu = findMenuItemByPath(menuStore.menuItems as any[], '/antrean/list-spesialis');
+    return findMenu;
+});
 
 // State
 const search = ref('');
@@ -243,9 +251,9 @@ onMounted(() => {
 // Function to get actions based on item status
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
-        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
-        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
-        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete' }
+        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit', access: antreanSpesialisMenuItem.value?.access?.update },
+        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus', access: antreanSpesialisMenuItem.value?.access?.update },
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete', access: antreanSpesialisMenuItem.value?.access?.delete }
     ];
 
     // If status is Selesai or Batal, only show View action
@@ -346,7 +354,7 @@ const handleUpdateStatusSuccess = () => {
                             />
                         </div>
 
-                        <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
+                        <v-btn v-if="antreanSpesialisMenuItem.access.create" color="primary" size="large" elevation="2" @click="showModal = true">
                             <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
                             Pendaftaran Operasi Baru
                         </v-btn>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 8e93908..57b4adc 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -8,11 +8,22 @@ import api from '@/services/api';
 import { useAuth } from '~/composables/useAuth';
 import { useUserMenuStore } from '~/store/userMenu';
 import { numberFormat } from '~/utils/helpers';
+import { findMenuItemByPath } from '~/utils/menu';
 
 // Check user access to dashboard
 const { user } = useAuth();
 const menuStore = useUserMenuStore();
 
+const dashboardMenuItem = computed(() => {
+    const findMenu = findMenuItemByPath(menuStore.menuItems as any[], '/dashboard');
+    return findMenu;
+});
+
+const canCreateFromDashboardMenu = computed(() => {
+    const access = dashboardMenuItem.value?.access;
+    return access?.create !== false;
+});
+
 // Check if user has access to dashboard menu item
 const hasDashboardAccess = computed(() => {
     if (!menuStore.hasMenu) return false;
@@ -751,6 +762,7 @@ definePageMeta({
                             </div>
                         </div>
                         <v-btn
+                            v-if="canCreateFromDashboardMenu"
                             color="primary"
                             size="large"
                             elevation="2"
diff --git a/pages/setting/hak-akses/form.vue b/pages/setting/hak-akses/form.vue
index 1e6e48c..8c51540 100644
--- a/pages/setting/hak-akses/form.vue
+++ b/pages/setting/hak-akses/form.vue
@@ -16,6 +16,29 @@ interface MenuGroup {
     children: MenuItem[];
 }
 
+type CrudAction = 'create' | 'read' | 'update' | 'delete';
+
+interface PagePermissionState {
+    create: boolean;
+    read: boolean;
+    update: boolean;
+    delete: boolean;
+}
+
+interface ApiPageItem {
+    id: string;
+    page: string;
+    to: string;
+    is_active: boolean;
+    sort: number;
+    parent_id: string;
+    create?: boolean;
+    read?: boolean;
+    update?: boolean;
+    delete?: boolean;
+    permissions?: CrudAction[];
+}
+
 
 
 const route = useRoute();
@@ -68,10 +91,11 @@ const valid = ref(true);
 const namaHakAkses = ref('');
 const status = ref(true);
 const selectedPages = ref<string[]>([]);
+const selectedPagePermissions = ref<Record<string, PagePermissionState>>({});
 const loading = ref(false);
 const currentId = ref<string | null>(null);
 const menuGroups = ref<MenuGroup[]>([]);
-const apiMenuItems = ref<{ id: string; header: string; pages: { id: string; page: string; to: string; is_active: boolean; sort: number; parent_id: string }[] }[]>([]);
+const apiMenuItems = ref<{ id: string; header: string; pages: ApiPageItem[] }[]>([]);
 
 // Snackbar state
 const snackbar = ref(false);
@@ -89,6 +113,81 @@ const rules = {
     required: (value: string) => !!value || 'Field ini wajib diisi'
 };
 
+const crudActions: CrudAction[] = ['create', 'read', 'update', 'delete'];
+
+const crudLabels: Record<CrudAction, string> = {
+    create: 'Create',
+    read: 'Read',
+    update: 'Update',
+    delete: 'Delete'
+};
+
+const createDefaultPagePermissions = (): PagePermissionState => ({
+    create: false,
+    read: false,
+    update: false,
+    delete: false
+});
+
+const ensurePagePermissions = (pageTo: string) => {
+    if (!selectedPagePermissions.value[pageTo]) {
+        selectedPagePermissions.value[pageTo] = createDefaultPagePermissions();
+    }
+
+    return selectedPagePermissions.value[pageTo];
+};
+
+const hasAnyPagePermission = (permissions: PagePermissionState) => {
+    return permissions.create || permissions.read || permissions.update || permissions.delete;
+};
+
+const isPageSelected = (pageTo: string) => selectedPages.value.includes(pageTo);
+
+const syncPageSelection = (pageTo: string, checked: boolean) => {
+    const permissions = ensurePagePermissions(pageTo);
+
+    if (checked) {
+        if (!selectedPages.value.includes(pageTo)) {
+            selectedPages.value.push(pageTo);
+        }
+
+        permissions.read = true;
+        return;
+    }
+
+    selectedPages.value = selectedPages.value.filter((page) => page !== pageTo);
+    selectedPagePermissions.value[pageTo] = createDefaultPagePermissions();
+};
+
+const setPagePermission = (pageTo: string, action: CrudAction, checked: boolean) => {
+    const permissions = ensurePagePermissions(pageTo);
+    permissions[action] = checked;
+
+    if (checked) {
+        if (!selectedPages.value.includes(pageTo)) {
+            selectedPages.value.push(pageTo);
+        }
+
+        if (action !== 'read') {
+            permissions.read = true;
+        }
+    }
+
+    if (action === 'read' && !checked) {
+        permissions.create = false;
+        permissions.update = false;
+        permissions.delete = false;
+    }
+
+    if (hasAnyPagePermission(permissions)) {
+        if (!selectedPages.value.includes(pageTo)) {
+            selectedPages.value.push(pageTo);
+        }
+    } else {
+        selectedPages.value = selectedPages.value.filter((page) => page !== pageTo);
+    }
+};
+
 // Get all menu items with their pages
 const menuItems = computed(() => {
     if (apiMenuItems.value.length === 0) {
@@ -111,17 +210,12 @@ const toggleSection = (sectionPages: { to: string }[]) => {
     if (allSelected) {
         // Unselect all in this section
         sectionPages.forEach(page => {
-            const index = selectedPages.value.indexOf(page.to);
-            if (index > -1) {
-                selectedPages.value.splice(index, 1);
-            }
+            syncPageSelection(page.to, false);
         });
     } else {
         // Select all in this section
         sectionPages.forEach(page => {
-            if (!selectedPages.value.includes(page.to)) {
-                selectedPages.value.push(page.to);
-            }
+            syncPageSelection(page.to, true);
         });
     }
 };
@@ -174,13 +268,20 @@ const handleSimpan = async () => {
                 
                 // Add child pages
                 section.pages.forEach((page) => {
-                    const isSelected = selectedPages.value.includes(page.to);
+                    const permissions = selectedPagePermissions.value[page.to] ?? createDefaultPagePermissions();
+                    const isSelected = selectedPages.value.includes(page.to) || hasAnyPagePermission(permissions);
                     accessPages.push({
                         id: page.id,
                         is_active: isSelected,
                         page: page.page,
                         parent_id: page.parent_id,
-                        sort: page.sort
+                        sort: page.sort,
+                        access: {
+                            create: permissions.create,
+                            read: permissions.read || isSelected,
+                            update: permissions.update,
+                            delete: permissions.delete
+                        }
                     });
                 });
             });
@@ -228,6 +329,7 @@ const handleReset = () => {
         namaHakAkses.value = '';
         status.value = false;
         selectedPages.value = [];
+        selectedPagePermissions.value = {};
     }
 };
 
@@ -297,21 +399,39 @@ onMounted(async () => {
             if (data.access_page && Array.isArray(data.access_page)) {
                 const menuStructure = transformAccessPageToMenuStructure(data.access_page);
                 apiMenuItems.value = menuStructure;
+                selectedPagePermissions.value = {};
                 
                 // Extract active pages
                 const extractedPages: string[] = [];
-                
                 menuStructure.forEach(section => {
                     section.pages.forEach((page: any) => {
+                        const permissionState = createDefaultPagePermissions();
+                        const permissionList =  page.access ? page.access : [];
+
+
+                        permissionState.create = permissionList.create;
+                        permissionState.read = permissionList.read;
+                        permissionState.update = permissionList.update;
+                        permissionState.delete = permissionList.delete;
+
+                        if (permissionState.create || permissionState.update || permissionState.delete) {
+                            permissionState.read = true;
+                        }
+
+                        selectedPagePermissions.value[page.to] = permissionState;
+
                         if (page.is_active && page.to) {
                             extractedPages.push(page.to);
                         }
+
+                        if (hasAnyPagePermission(permissionState) && page.to && !extractedPages.includes(page.to)) {
+                            extractedPages.push(page.to);
+                        }
                     });
                 });
                 
                 selectedPages.value = extractedPages;
                 console.log('Menu structure loaded:', menuStructure);
-                console.log('Selected pages:', extractedPages);
             }
         } else {
             showSnackbar(response?.message || 'Data tidak ditemukan', 'error');
@@ -423,18 +543,38 @@ onMounted(async () => {
                                     
                                     <v-divider class="mb-1"></v-divider>
                                     
-                                    <div class="pl-3">
-                                        <v-checkbox
+                                    <div class="pl-3 pr-3 pb-2">
+                                        <div
                                             v-for="page in section.pages"
                                             :key="page.to"
-                                            v-model="selectedPages"
-                                            :value="page.to"
-                                            :label="page.title"
-                                            hide-details
-                                            density="compact"
-                                            color="primary"
-                                            :readonly="isReadonly"
-                                        ></v-checkbox>
+                                            class="py-1"
+                                        >
+                                            <div class="d-flex flex-column gap-1">
+                                                <v-checkbox
+                                                    :model-value="isPageSelected(page.to)"
+                                                    @update:model-value="(value) => syncPageSelection(page.to, !!value)"
+                                                    :label="page.title"
+                                                    hide-details
+                                                    density="compact"
+                                                    color="primary"
+                                                    :readonly="isReadonly"
+                                                ></v-checkbox>
+
+                                                <div class="d-flex flex-wrap gap-2 pl-8">
+                                                    <v-checkbox
+                                                        v-for="action in crudActions"
+                                                        :key="`${page.to}-${action}`"
+                                                        :model-value="selectedPagePermissions[page.to]?.[action] ?? false"
+                                                        @update:model-value="(value) => setPagePermission(page.to, action, !!value)"
+                                                        :label="crudLabels[action]"
+                                                        hide-details
+                                                        density="compact"
+                                                        color="primary"
+                                                        :readonly="isReadonly"
+                                                    ></v-checkbox>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </v-card>
                             </v-col>
diff --git a/store/userMenu.ts b/store/userMenu.ts
index fc31fd3..611b2a4 100644
--- a/store/userMenu.ts
+++ b/store/userMenu.ts
@@ -4,9 +4,17 @@ export interface MenuItem {
   title?: string
   icon?: string
   to?: string
+  access? : AccessItem[] | null
   children?: MenuItem[] | null
 }
 
+export interface AccessItem {
+  create?: boolean
+  read?: boolean
+  update?: boolean
+  delete?: boolean
+}
+
 export interface MenuGroup {
   id: string
   header: string
diff --git a/utils/menu.ts b/utils/menu.ts
new file mode 100644
index 0000000..d87efd2
--- /dev/null
+++ b/utils/menu.ts
@@ -0,0 +1,16 @@
+export const findMenuItemByPath = (items: any[], targetPath: string): any | null => {
+    for (const item of items || []) {
+        if (item?.to === targetPath) {
+            return item;
+        }
+
+        if (Array.isArray(item?.children) && item.children.length > 0) {
+            const found = findMenuItemByPath(item.children, targetPath);
+            if (found) {
+                return found;
+            }
+        }
+    }
+
+    return null;
+};
\ No newline at end of file