From a1efe0a73b1f825a19325a3049b1d797d674e853 Mon Sep 17 00:00:00 2001
From: Yusron alamsyah <icus.yusron@gmail.com>
Date: Fri, 27 Feb 2026 13:26:52 +0700
Subject: [PATCH] feat(FE) : implementasi hak akses

---
 app.vue                                       |   3 +
 .../layout/full/vertical-header/ProfileDD.vue |  18 +-
 .../full/vertical-sidebar/VerticalSidebar.vue |  28 +-
 .../full/vertical-sidebar/sidebarItem.ts      |   4 +-
 composables/useAuth.ts                        |  73 ++--
 composables/useUserMenu.ts                    |  74 ++++
 data/mock/users.json                          |  12 +-
 middleware/auth.ts                            | 284 ++++++++-----
 pages/auth/access-denied.vue                  |  67 +++-
 pages/dashboard.vue                           | 126 +++++-
 pages/setting/hak-akses/form.vue              | 374 +++++++++++-------
 pages/setting/hak-akses/index.vue             |  90 +++--
 pages/setting/user/index.vue                  |  82 +++-
 plugins/auth.client.ts                        |  27 ++
 scss/_override.scss                           |   7 +
 server/api/auth/keycloak-callback.get.ts      |  34 +-
 services/access.ts                            |  99 +++++
 store/userMenu.ts                             | 123 ++++++
 types/auth.ts                                 |   1 +
 types/setting.ts                              |  44 ++-
 20 files changed, 1178 insertions(+), 392 deletions(-)
 create mode 100644 composables/useUserMenu.ts
 create mode 100644 plugins/auth.client.ts
 create mode 100644 services/access.ts
 create mode 100644 store/userMenu.ts

diff --git a/app.vue b/app.vue
index 2ccd360..e3500ab 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 // Global error handler
 const error = useError();
+
+// Auth initialization is now handled by plugins/auth.client.ts
+// No need to call checkAuth() here anymore
 </script>
 
 <template>
diff --git a/components/layout/full/vertical-header/ProfileDD.vue b/components/layout/full/vertical-header/ProfileDD.vue
index cf18f75..d34c62e 100644
--- a/components/layout/full/vertical-header/ProfileDD.vue
+++ b/components/layout/full/vertical-header/ProfileDD.vue
@@ -3,16 +3,13 @@
 import { MailIcon } from "vue-tabler-icons";
 import { PerfectScrollbar } from "vue3-perfect-scrollbar";
 import { useAuth } from "~/composables/useAuth";
-import { computed, onMounted } from "vue";
+import { computed, onMounted, watch } from "vue";
 
 const auth = useAuth();
 
-// Load user data on mount
-onMounted(async () => {
-  if (!auth.user.value) {
-    await auth.checkAuth();
-  }
-});
+
+// Auth state is automatically populated by plugins/auth.client.ts
+// No need to call checkAuth() here
 
 // Logout with confirmation
 const logoutWithConfirmation = async () => {
@@ -28,20 +25,21 @@ const logoutWithConfirmation = async () => {
 };
 
 // Get user display info from auth
-const displayInfo = computed(() => {
+const displayInfo = computed(() => {  
   if (!auth.user.value) {
     return {
       name: "Guest User",
       email: "guest@example.com",
-      role: "Guest"
+      role: ["Guest"]
     };
   }
 
   const user = auth.user.value;
+  
   return {
     name: user.name || user.preferred_username || "User",
     email: user.email || "No email",
-    role: user.client_roles
+    role: user.client_roles || []
   };
 });
 
diff --git a/components/layout/full/vertical-sidebar/VerticalSidebar.vue b/components/layout/full/vertical-sidebar/VerticalSidebar.vue
index 35f6fbd..7b69df8 100644
--- a/components/layout/full/vertical-sidebar/VerticalSidebar.vue
+++ b/components/layout/full/vertical-sidebar/VerticalSidebar.vue
@@ -7,8 +7,11 @@ import { Icon } from "@iconify/vue";
 import { useRoute } from "vue-router";
 // MiniSidebar Icons
 import MiniSideIcons from "./MinIconItems";
+import { useUserMenu } from "~/composables/useUserMenu";
+
 
 const route = useRoute();
+const { menuItems, hasMenu, isLoading, error, initializeMenu } = useUserMenu();
 
 
 const findTitleByPath = (items: any, path: any) => {
@@ -37,7 +40,17 @@ const findTitleByPath = (items: any, path: any) => {
 
   return title;
 };
-const foundId = findTitleByPath(sidebarItems, route.path);
+
+const sidebarMenu = computed(() => {
+  if (hasMenu.value) {
+    return menuItems.value;
+  } else {
+    return [];
+  }
+});
+
+
+const foundId = findTitleByPath(sidebarMenu.value, route.path);
 const getCurrent = foundId ? foundId : 1;
 const currentMenu = ref<any>(getCurrent);
 function showData(data: any) {
@@ -47,7 +60,6 @@ function showData(data: any) {
 
 // MiniSidebar Icons End
 const customizer = useCustomizerStore();
-const sidebarMenu = shallowRef(sidebarItems);
 
 // Toggle mini sidebar
 const toggleMiniSidebar = () => {
@@ -80,7 +92,15 @@ const toggleMiniSidebar = () => {
     <!---Navigation -->
     <!-- ---------------------------------------------- -->
     <perfect-scrollbar class="scrollnavbar">
-      <div class="px-4 py-0 sidebar-menus">
+        <!-- Loading State -->
+      <div v-if="isLoading" class="px-4 py-8 text-center">
+        <v-skeleton-loader type="article" :loading="true"  class="mb-0 grey-skeleton" />
+        <v-skeleton-loader type="article" :loading="true"  class="mb-0 grey-skeleton" />
+
+        <!-- <v-skeleton-loader type="list-item-two-line" :loading="true"  class="mb-4 grey-skeleton" />
+        <v-skeleton-loader type="list-item-three-line" :loading="true"  class="mb-4 grey-skeleton" /> -->
+      </div>
+      <div v-else class="px-4 py-0 sidebar-menus">
         <v-list class="py-1">
           <template v-for="(item, i) in sidebarMenu">
             <template v-if="currentMenu == item.id">
@@ -88,7 +108,7 @@ const toggleMiniSidebar = () => {
               <LazyLayoutFullVerticalSidebarNavGroup
                 :item="item"
                 v-if="item.header && !customizer.mini_sidebar"
-                :key="item.title"
+                :key="i"
               />
               <!---If Has Child -->
               <template v-for="sItem in item.children">
diff --git a/components/layout/full/vertical-sidebar/sidebarItem.ts b/components/layout/full/vertical-sidebar/sidebarItem.ts
index 71c92d4..85d6f04 100644
--- a/components/layout/full/vertical-sidebar/sidebarItem.ts
+++ b/components/layout/full/vertical-sidebar/sidebarItem.ts
@@ -54,9 +54,9 @@ const sidebarItem: menu[] = [
       id: 1,
       children: [
           {
-              title: 'Halaman',
+              title: 'Hak Akses',
               icon: 'shield-user-line-duotone',
-              to: '/setting/halaman',
+              to: '/setting/hak-akses',
           },
           {
               title: 'User',
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
index 723f6b5..59102b2 100644
--- a/composables/useAuth.ts
+++ b/composables/useAuth.ts
@@ -2,21 +2,24 @@
 import type { User, SessionResponse, LoginResponse, LogoutResponse } from '~/types/auth'
 
 export const useAuth = () => {
-  const user = ref<User | null>(null)
-  const accessToken = ref<string | null>(null)
-  const isLoading = ref(false)
-  const error = ref<string | null>(null)
-  const isAuthenticated = computed(() => !!user.value)
+  // Use useState inside the composable function (not at module level)
+  // This ensures all components and plugins share the same reactive state
+  const _user = useState<User | null>('auth:user', () => null)
+  const _accessToken = useState<string | null>('auth:accessToken', () => null)
+  const _isLoading = useState<boolean>('auth:isLoading', () => false)
+  const _error = useState<string | null>('auth:error', () => null)
+  
+  const isAuthenticated = computed(() => !!_user.value)
 
   const clearError = () => {
-    error.value = null
+    _error.value = null
   }
 
   const checkAuth = async (): Promise<User | null> => {
     try {
-      isLoading.value = true
+      _isLoading.value = true
       clearError()
-      
+            
       // The session API returns SessionResponse, or throws 401 if not authenticated
       // $fetch automatically sends cookies for same-origin requests
       const response = await $fetch<SessionResponse>('/api/auth/session', {
@@ -25,8 +28,9 @@ export const useAuth = () => {
       
       // Handle response structure - session API returns { success, user, ... }
       if (response && response.user) {
-        user.value = response.user
-        accessToken.value = response.accessToken || null
+        _user.value = response.user
+        _accessToken.value = response.accessToken || null
+        
         
         // Store tokens to localStorage for API interceptor (only on client-side)
         // Only update if localStorage is empty to avoid overwriting refreshed tokens
@@ -47,19 +51,19 @@ export const useAuth = () => {
       }
       
       // If response exists but no user, clear and return null
-      user.value = null
-      accessToken.value = null
+      _user.value = null
+      _accessToken.value = null
       return null
     } catch (fetchError: any) {
-      console.error('Session check failed:', fetchError)
+      console.error('❌ checkAuth: Session check failed:', fetchError)
       // 401 errors are expected when not authenticated
       if (fetchError.statusCode === 401 || fetchError.status === 401) {
-        error.value = null // Don't show error for expected unauthenticated state
+        _error.value = null // Don't show error for expected unauthenticated state
       } else {
-        error.value = 'Failed to check authentication status'
+        _error.value = 'Failed to check authentication status'
       }
-      user.value = null
-      accessToken.value = null
+      _user.value = null
+      _accessToken.value = null
       
       // Clear tokens from localStorage on auth failure
       if (process.client) {
@@ -70,7 +74,7 @@ export const useAuth = () => {
       
       return null
     } finally {
-      isLoading.value = false
+      _isLoading.value = false
     }
   }
 
@@ -82,33 +86,31 @@ export const useAuth = () => {
       })
 
       if (response?.success && response?.data?.authUrl) {
-        console.log('🔗 Redirecting to Keycloak login...')
         window.location.href = response.data.authUrl
       } else {
         const errorMsg = response?.error || 'Failed to get authorization URL'
-        error.value = errorMsg
+        _error.value = errorMsg
         throw new Error(errorMsg)
       }
     } catch (loginError: any) {
       console.error('❌ Login error:', loginError)
-      error.value = loginError.message || 'Login failed'
+      _error.value = loginError.message || 'Login failed'
       throw loginError
     }
   }
 
   const logout = async (): Promise<void> => {
     try {
-      isLoading.value = true
+      _isLoading.value = true
       clearError()
-      console.log('🚪 Starting logout process...')
       
       const response = await $fetch<LogoutResponse>('/api/auth/logout', {
         method: 'POST'
       })
       
       // Clear user immediately regardless of response
-      user.value = null
-      accessToken.value = null
+      _user.value = null
+      _accessToken.value = null
       
       if (response?.success && response?.logoutUrl) {
         //remove all tokens from localstorage
@@ -116,7 +118,6 @@ export const useAuth = () => {
         localStorage.removeItem('accessToken');
         localStorage.removeItem('refreshToken');
 
-        console.log('🔗 Redirecting to Keycloak logout...')
         // Keycloak will redirect back to the base URL after logout
         // We can add a query param to detect the logout and show a message
         // window.location.href = response.logoutUrl
@@ -124,17 +125,17 @@ export const useAuth = () => {
       } else {
         const warningMsg = response?.error || response?.message || 'No logout URL received'
         console.warn('⚠️', warningMsg)
-        error.value = warningMsg
+        _error.value = warningMsg
         await navigateTo('/auth/login')
       }
     } catch (logoutError: any) {
       console.error('❌ Logout error:', logoutError)
-      error.value = logoutError.message || 'Logout failed'
-      user.value = null
-      accessToken.value = null
+      _error.value = logoutError.message || 'Logout failed'
+      _user.value = null
+      _accessToken.value = null
       await navigateTo('/auth/login')
     } finally {
-      isLoading.value = false
+      _isLoading.value = false
     }
   }
 
@@ -145,12 +146,12 @@ export const useAuth = () => {
   }
 
   return {
-    // State
-    user: readonly(user),
-    accessToken: readonly(accessToken),
+    // State - expose the global state
+    user: _user,
+    accessToken: _accessToken,
     isAuthenticated,
-    isLoading: readonly(isLoading),
-    error: readonly(error),
+    isLoading: _isLoading,
+    error: _error,
     
     // Actions
     checkAuth,
diff --git a/composables/useUserMenu.ts b/composables/useUserMenu.ts
new file mode 100644
index 0000000..338cec8
--- /dev/null
+++ b/composables/useUserMenu.ts
@@ -0,0 +1,74 @@
+import { useUserMenuStore } from '~/store/userMenu'
+
+export const useUserMenu = () => {
+  const menuStore = useUserMenuStore()
+  const { user } = useAuth()
+
+  const initializeMenu = async () => {
+    // Get token from localStorage (client-side only)
+    if (!process.client) {
+      return
+    }
+
+    // Skip if menu already fetched (even if empty/no access)
+    if (menuStore.menuFetched) {
+      console.log('ℹ️ Menu already fetched, skipping re-fetch')
+      return
+    }
+
+    // Check if user ID is available
+    if (!user.value?.id) {
+      console.warn('⚠️ Cannot fetch menu: User ID not available')
+      return
+    }
+
+    const token = localStorage.getItem('idToken')
+    if (!token) {
+      console.warn('⚠️ Cannot fetch menu: No token available in localStorage')
+      return
+    }
+
+    // Use actual user ID from auth
+    const userIdToUse = user.value.id
+    
+    try {
+      await menuStore.fetchUserMenu(userIdToUse, token)
+    } catch (error) {
+      console.error('❌ Error initializing menu:', error)
+    }
+  }
+
+  const refreshMenu = async () => {
+    if (!user.value?.id || !process.client) return
+    
+    const token = localStorage.getItem('idToken')
+    if (!token) return
+
+    await menuStore.fetchUserMenu(user.value.id, token)
+  }
+
+  // Watch for user changes and auto-initialize menu
+  if (process.client) {
+    // Watch for user.id to become available
+    watchEffect(async () => {
+      const userId = user.value?.id
+      const hasToken = !!localStorage.getItem('idToken')
+  
+      // Initialize if user ID and token exist, and menu not fetched yet
+      if (userId && hasToken && !menuStore.menuFetched && !menuStore.isLoading) {
+        await initializeMenu()
+      }
+    })
+  }
+
+  return {
+    menuStore,
+    menuItems: computed(() => menuStore.sidebarMenuItems),
+    hasMenu: computed(() => menuStore.hasMenu),
+    isLoading: computed(() => menuStore.isLoading),
+    error: computed(() => menuStore.error),
+    noAccess: computed(() => menuStore.noAccess),
+    initializeMenu,
+    refreshMenu
+  }
+}
diff --git a/data/mock/users.json b/data/mock/users.json
index 980c994..eaf293c 100644
--- a/data/mock/users.json
+++ b/data/mock/users.json
@@ -1,27 +1,27 @@
 [
     {
         "id": "a2507dbf-5dfc-4f38-bdd5-bb227eb20015",
-        "namaUser": "Akbar Attallah",
+        "name": "Akbar Attallah",
         "email": "akbarantrean@gmail.com",
-        "hakAkses": [
+        "hak_akses": [
             "superadmin"
         ],
         "status": "aktif"
     },
     {
         "id": "31e5227f-78d2-4b4d-b255-afcc5ece6b27",
-        "namaUser": "renaldy",
+        "name": "renaldy",
         "email": "renaldy.brada@gmail.com",
-        "hakAkses": [
+        "hak_akses": [
             "Writer"
         ],
         "status": "aktif"
     },
     {
         "id": "d6621539-9e8e-4937-ba9a-fca68f625e39",
-        "namaUser": "yusron",
+        "name": "yusron",
         "email": "yusron.sandbox@gmai.com",
-        "hakAkses": [
+        "hak_akses": [
             "superadmin",
             "Writer"
         ],
diff --git a/middleware/auth.ts b/middleware/auth.ts
index ea428c7..ed8b487 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,123 +1,213 @@
 import { defineNuxtRouteMiddleware, navigateTo } from '#app';
 import type { RouteLocationNormalized } from 'vue-router';
 import { useAuth } from '~/composables/useAuth'; 
+import { useUserMenuStore } from '~/store/userMenu';
 
 export default defineNuxtRouteMiddleware(async (to: RouteLocationNormalized) => {
   console.log('🛡️ Auth middleware triggered for:', to.path);
 
-  // Allow the login page to handle its own checks without redirection loops
-  if (to.path === '/auth/login') {
-    console.log('⏭️ Allowing access to Login page');
+  // Allow the login page and access denied page without checks
+  if (to.path === '/auth/login' || to.path === '/auth/access-denied') {
+    console.log('⏭️ Allowing access to auth page:', to.path);
     return;
   }
 
-  // Check for authentication signal from successful login redirect FIRST
-  // This must be checked before the root redirect logic
-  const isAuthRedirect: boolean = to.query.authenticated === 'true';
-  
-  if (isAuthRedirect) {
-    console.log('🔐 Authentication redirect detected, allowing access to verify session');
-    // Don't redirect, let it proceed to auth verification below
-  } else {
-    // Check for bypass flag (from keyboard shortcut)
-    if (process.client) {
-      const bypassFlag = sessionStorage.getItem('bypassRootRedirect');
-      if (bypassFlag === 'true' && to.path === '/') {
-        console.log('🔑 Bypass flag detected - allowing root access');
-        // Clear the flag immediately to prevent future bypasses
-        sessionStorage.removeItem('bypassRootRedirect');
-        return; // Allow access without any redirect
-      }
-    }
-
-    // Redirect root path to Login page (only if not authenticated redirect)
-    if (to.path === '/') {
-      console.log('🔄 Redirecting from root to Login page');
-      return navigateTo('/auth/login', { replace: true });
-    }
-  }
-  
-  // On server-side during development, skip intensive checks
-  // The cookie check will happen on client-side
-  if (process.server && process.env.NODE_ENV === 'development') {
-    if (isAuthRedirect) {
-      console.log('⏭️ Server-side: Allowing authenticated redirect to pass through (dev mode)');
-      return; // Allow server-side render to proceed, client will verify
-    }
-    console.log('⏭️ Skipping intensive check on server-side during development');
-    useAuth();
+  // Skip middleware on server-side - auth plugin handles client-side initialization
+  if (process.server) {
+    console.log('⏭️ Server-side: Skipping auth check (plugin will handle on client)');
     return;
   }
 
-  // Process the authentication redirect
+  // Check for authentication signal from successful login redirect
+  const isAuthRedirect = to.query.authenticated === 'true';
+  
+  
+  const { user, checkAuth } = useAuth();
+
+  // Special handling for authentication redirect from Keycloak callback
   if (isAuthRedirect) {
-    console.log('⏳ Client-side is processing a new login session, checking cookie...');
+    console.log('🔐 Authentication redirect detected');
     
-    // Give the browser a moment to process the cookie from the redirect
-    if (process.client) {
-      await new Promise(resolve => setTimeout(resolve, 50));
+    // Give browser a moment to process the cookie from redirect
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    // Verify session was created successfully
+    await checkAuth();
+    
+    if (user.value) {
+      console.log('✅ Session verified after redirect:', user.value.name);
+      // Clean up query parameter
+      return navigateTo({ path: to.path, query: {} }, { replace: true });
+    } else {
+      console.error('❌ Session verification failed after redirect');
+      return navigateTo('/auth/login?error=session_failed');
     }
+  }
+
+  // For all other routes, check if user is authenticated
+  // User state should already be populated by auth plugin
+  // Only call checkAuth if user state is not available (edge case)
+  if (!user.value) {
+    console.log('⚠️ User not in state, verifying session...');
+    await checkAuth();
+  }
+
+  if (user.value) {
+    console.log('✅ User authenticated:', user.value.name);
     
-    // Check authentication first before removing query parameter
-    try {
-      const { checkAuth } = useAuth();
-      console.log('🔍 Checking authentication after redirect...');
-      
-      let user = await checkAuth();
-      
-      // If not found, retry once more
-      if (!user && process.client) {
-        console.log('⚠️ Cookie not available yet, retrying...');
-        await new Promise(resolve => setTimeout(resolve, 150));
-        user = await checkAuth();
+    // Authorization Check: Verify if user has access to the requested path
+    const menuStore = useUserMenuStore();
+
+    // Check if user has no access (role inactive)
+      if (menuStore.noAccess) {
+        console.warn('⛔ User has no access (role inactive or no permissions)');
+        return navigateTo({
+          path: '/auth/access-denied',
+          query: { reason: 'no_role_or_inactive' }
+        }, { replace: true });
       }
-      
-      if (user) {
-        console.log('✅ User is authenticated after redirect:', user.name || user.preferred_username || user.email);
-        // Remove query parameter and allow access
-        await navigateTo({ path: to.path, query: {} }, { replace: true });
-        return; // Allow access
-      } else {
-        console.log('❌ Still no session after retry, redirecting to login');
-        return navigateTo('/auth/login');
-      }
-    } catch (authError) {
-      console.error('❌ Auth check failed after redirect:', authError);
-      // Retry once
-      if (process.client) {
-        await new Promise(resolve => setTimeout(resolve, 150));
-        try {
-          const { checkAuth } = useAuth();
-          const retryUser = await checkAuth();
-          if (retryUser) {
-            console.log('✅ User authenticated on retry after error');
-            await navigateTo({ path: to.path, query: {} }, { replace: true });
-            return;
+    
+    // Skip authorization check for certain paths
+    const publicPaths = ['/','/dashboard', '/auth/access-denied'];
+    const isPublicPath = publicPaths.includes(to.path);
+    
+    if (!isPublicPath) {
+      // If menu is not fetched yet, wait for it to load (with timeout)
+      if (!menuStore.menuFetched) {
+        console.log('⏳ Menu not fetched yet, loading...');
+        
+        const token = localStorage.getItem('idToken');
+        if (token && user.value.id) {
+          try {
+            // Try to load menu
+            await menuStore.fetchUserMenu(user.value.id, token);
+            console.log('✅ Menu loaded in middleware');
+          } catch (error) {
+            console.error('❌ Failed to load menu in middleware:', error);
+            // If menu fails to load, deny access by default for security
+            return navigateTo({
+              path: '/auth/access-denied',
+              query: { path: to.path, reason: 'menu_load_failed' }
+            }, { replace: true });
           }
-        } catch (retryError) {
-          console.error('❌ Retry also failed:', retryError);
+        } else {
+          console.error('❌ Cannot load menu: No token or user ID');
+          return navigateTo('/auth/login');
         }
       }
-      return navigateTo('/auth/login');
-    }
-  }
-
-  try {
-    const { checkAuth } = useAuth();
-    console.log('🔍 Checking authentication status using useAuth...');
-    
-    const user = await checkAuth(); 
-
-    if (user) {
-      console.log('✅ User is authenticated:', user.name || user.preferred_username || user.email);
-      return;
+      
+      
+      
+      // Now that menu is loaded (or was already loaded), check authorization
+      if (menuStore.hasMenu) {
+        // Extract all eligible paths from user's menu
+        const eligiblePaths = new Set<string>();
+        
+        menuStore.menuItems.forEach((group) => {
+          if (group.children) {
+            group.children.forEach((item) => {
+              if (item.to) {
+                eligiblePaths.add(item.to);
+              }
+              // Handle nested children if any
+              if (item.children) {
+                item.children.forEach((subItem) => {
+                  if (subItem.to) {
+                    eligiblePaths.add(subItem.to);
+                  }
+                });
+              }
+            });
+          }
+        });
+        
+        // Define path dependencies: child path requires parent path access
+        const pathDependencies: Record<string, string[]> = {
+          '/setting/hak-akses/form': ['/setting/hak-akses'],
+          '/antrean/kategori': ['/antrean/list-kategori'],
+          '/antrean/spesialis': ['/antrean/list-spesialis'],
+          '/antrean/subspesialis': ['/antrean/list-spesialis'],
+        };
+        
+        // Helper function to check if a path matches considering dynamic segments
+        const pathMatches = (requestedPath: string, eligiblePath: string): boolean => {
+          // Exact match
+          if (requestedPath === eligiblePath) return true;
+          
+          // Check if eligiblePath is a parent of requestedPath (for nested routes)
+          // e.g., /antrean/kategori matches /antrean/kategori/123
+          const eligibleSegments = eligiblePath.split('/').filter(s => s);
+          const requestedSegments = requestedPath.split('/').filter(s => s);
+          
+          if (eligibleSegments.length > requestedSegments.length) return false;
+          
+          // Check if all eligible segments match (considering the requested path might have more segments)
+          return eligibleSegments.every((seg, idx) => seg === requestedSegments[idx]);
+        };
+        
+        // Check if user has access to the requested path (direct or pattern match)
+        let hasAccess = false;
+        for (const eligiblePath of eligiblePaths) {
+          if (pathMatches(to.path, eligiblePath)) {
+            hasAccess = true;
+            break;
+          }
+        }
+        
+        // If no direct access, check if this path is a child with satisfied dependencies
+        // If user has the required parent paths, grant access to the child
+        let grantedByDependency = false;
+        if (!hasAccess) {
+          for (const [childPath, requiredPaths] of Object.entries(pathDependencies)) {
+            if (pathMatches(to.path, childPath)) {
+              // This is a child path with dependencies
+              // Check if user has all required parent paths
+              const hasAllRequired = requiredPaths.every(requiredPath => 
+                Array.from(eligiblePaths).some(eligible => pathMatches(requiredPath, eligible))
+              );
+              if (hasAllRequired) {
+                grantedByDependency = true;
+                console.log('✅ Access granted by dependency:', {
+                  requestedPath: to.path,
+                  satisfiedDependencies: requiredPaths
+                });
+                break;
+              }
+            }
+          }
+        }
+        
+        console.log('🔐 Authorization check:', {
+          requestedPath: to.path,
+          eligiblePaths: Array.from(eligiblePaths),
+          hasAccess,
+          grantedByDependency
+        });
+        
+        if (!hasAccess && !grantedByDependency) {
+          console.warn('⛔ Access denied: User does not have permission to access', to.path);
+          return navigateTo({
+            path: '/auth/access-denied',
+            query: { path: to.path }
+          }, { replace: true });
+        }
+        
+        console.log('✅ Authorization granted for:', to.path);
+      } else {
+        // Menu fetched but empty (no access)
+        console.error('❌ Menu is empty, denying access for security');
+        return navigateTo({
+          path: '/auth/access-denied',
+          query: { path: to.path, reason: 'no_permissions' }
+        }, { replace: true });
+      }
     } else {
-      console.log('❌ No valid session found, redirecting to login');
-      return navigateTo('/auth/login');
+      console.log('✅ Public path, skipping authorization:', to.path);
     }
-  } catch (error) {
-    console.error('❌ Auth middleware error:', error);
-    console.log('🔄 Redirecting to login due to error');
+    
+    return; // Allow access
+  } else {
+    console.log('❌ No active session, redirecting to login');
     return navigateTo('/auth/login');
   }
 });
\ No newline at end of file
diff --git a/pages/auth/access-denied.vue b/pages/auth/access-denied.vue
index bc37b19..b2ff028 100644
--- a/pages/auth/access-denied.vue
+++ b/pages/auth/access-denied.vue
@@ -1,16 +1,79 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useAuth } from '~/composables/useAuth';
+import { getUserAccess } from '~/services/access';
+import type { SessionResponse } from '~/types/auth';
+
 /*-For Set Blank Layout-*/
 definePageMeta({
   layout: "blank",
+  middleware: [] // Skip auth middleware for this page
 });
+
+const router = useRouter();
+const route = useRoute();
+const { user, logout } = useAuth();
+
+const requestedPath = ref('');
+
+onMounted(() => {
+  // Get the path from query or from document.referrer
+  requestedPath.value = (route.query.path as string) || 'Unknown';
+  
+});
+
+//loading gotodashboard
+const loading = ref(false);
+
+
+const goToDashboard = async () => {
+  try {
+    loading.value = true;
+    const IdToken = localStorage.getItem('idToken');
+
+    if (!user.value || !IdToken) {
+      router.push('/login');
+      return;
+    }
+    // Check user access
+    const userAccess = await getUserAccess(user.value?.id, IdToken);
+
+    if (userAccess && userAccess.data) {
+      loading.value = false;
+      router.push('/dashboard');
+    } else {
+      loading.value = false;
+      await logout();
+    }
+  } catch (error) {
+    console.error('❌ Error checking user access:', error);
+    await logout();
+  }
+};
 </script>
 <template>
     <div class="d-flex justify-center align-center text-center h-100vh bg-primary">
         <div>
             <img src="@/assets/images/backgrounds/error-access-denied.svg" width="400" alt="Access Denied" />
             <h1 class="text-h1 pt-3">Access Denied!</h1>
-            <h4 class="text-h4 my-8">You don't have access. Call administrator.</h4>
-            <v-btn flat color="white" class="mb-4" to="/">Go To Login Page</v-btn>
+            <h4 class="text-h4 my-4">You don't have permission to access this page.</h4>
+            
+            <!-- Show requested path if available -->
+            <div v-if="requestedPath && requestedPath !== 'Unknown'" class="my-4">
+              <v-chip color="white" variant="outlined" size="small">
+                Requested: {{ requestedPath }}
+              </v-chip>
+            </div>
+            
+            <!-- Show user info -->
+             
+            
+            <p class="text-body-1 my-4" style="color: rgba(255,255,255,0.8)">
+              Contact your administrator if you believe this is an error.
+            </p>
+            
+            <v-btn :loading="loading" flat variant="outlined" :prepend-icon="'mdi-arrow-left'" color="white" class="mb-4"  @click="goToDashboard">Go To Back Page</v-btn>
         </div>
     </div>
 </template>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 6ed4ea4..0aa756f 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -5,6 +5,39 @@ import { Icon } from '@iconify/vue';
 import VueApexCharts from "vue3-apexcharts";
 import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
 import api from '@/services/api';
+import { useAuth } from '~/composables/useAuth';
+import { useUserMenuStore } from '~/store/userMenu';
+
+// Check user access to dashboard
+const { user } = useAuth();
+const menuStore = useUserMenuStore();
+
+// Check if user has access to dashboard menu item
+const hasDashboardAccess = computed(() => {
+    if (!menuStore.hasMenu) return false;
+    
+    // Extract all eligible paths from menu
+    const eligiblePaths: string[] = [];
+    menuStore.menuItems.forEach((group) => {
+        if (group.children) {
+            group.children.forEach((item) => {
+                if (item.to) {
+                    eligiblePaths.push(item.to);
+                }
+                if (item.children) {
+                    item.children.forEach((subItem) => {
+                        if (subItem.to) {
+                            eligiblePaths.push(subItem.to);
+                        }
+                    });
+                }
+            });
+        }
+    });
+    
+    // Check if /dashboard is in eligible paths
+    return eligiblePaths.includes('/dashboard');
+});
 
 // Filter bulan
 const selectedMonth = ref(new Date().getMonth());
@@ -409,20 +442,35 @@ const headersSubspesialis = [
 
 // Watch untuk refetch data saat bulan atau tahun berubah
 watch([selectedMonth, selectedYear], () => {
-    fetchStatusAntrian();
-    fetchKategoriAntrian();
-    fetchAntrianPerHari();
-    fetchAntrianPerSpesialis();
-    fetchAntrianPerSubspesialis();
+    if (hasDashboardAccess.value) {
+        fetchStatusAntrian();
+        fetchKategoriAntrian();
+        fetchAntrianPerHari();
+        fetchAntrianPerSpesialis();
+        fetchAntrianPerSubspesialis();
+    }
+});
+
+// Watch for dashboard access changes (when menu loads)
+watch(hasDashboardAccess, (hasAccess) => {
+    if (hasAccess) {
+        fetchStatusAntrian();
+        fetchKategoriAntrian();
+        fetchAntrianPerHari();
+        fetchAntrianPerSpesialis();
+        fetchAntrianPerSubspesialis();
+    }
 });
 
 // Fetch data saat component mounted
 onMounted(() => {
-    fetchStatusAntrian();
-    fetchKategoriAntrian();
-    fetchAntrianPerHari();
-    fetchAntrianPerSpesialis();
-    fetchAntrianPerSubspesialis();
+    if (hasDashboardAccess.value) {
+        fetchStatusAntrian();
+        fetchKategoriAntrian();
+        fetchAntrianPerHari();
+        fetchAntrianPerSpesialis();
+        fetchAntrianPerSubspesialis();
+    }
 });
 
 definePageMeta({
@@ -433,6 +481,63 @@ definePageMeta({
 </script>
 
 <template>
+    <!-- Loading State - Menu Belum Ready -->
+    <v-row v-if="!menuStore.menuFetched">
+        <div> </div>
+    </v-row>
+
+    <!-- Welcome Card - Limited Access (Setelah Menu Ready) -->
+    <v-row v-else-if="!hasDashboardAccess">
+        <!-- Main Welcome Card -->
+        <v-col cols="12">
+            <v-card elevation="10" class="overflow-hidden">
+                <v-card-item class="pa-6">
+                    <div class="d-flex align-center ga-6 flex-wrap">
+                        <!-- Left Side - Avatar -->
+                        <div class="flex-shrink-0">
+                            <v-avatar size="140" class="elevation-1 bg-lightprimary">
+                                <Icon icon="solar:user-circle-bold" height="100" class="text-primary" />
+                            </v-avatar>
+                        </div>
+                        
+                        <!-- Right Side - Content -->
+                        <div class="flex-grow-1">
+                            
+                            <h1 class="text-h3 font-weight-bold text-primary mb-2">
+                                👋 Selamat Datang, {{ user?.name || 'User' }}!
+                            </h1>
+                            <p class="text-h6 text-medium-emphasis mb-1">
+                                Sistem Informasi Antrean Operasi RSSA
+                            </p>
+                            <div class="d-flex align-center ga-2 text-medium-emphasis mb-3">
+                                <Icon icon="solar:calendar-bold" height="18" class="text-primary" />
+                                <span class="text-body-1">
+                                    {{ new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}
+                                </span>
+                            </div>
+                            <div class="d-flex align-center ga-2 flex-wrap">
+                                <v-chip size="small" color="success" variant="flat" class="font-weight-bold px-3">
+                                    <Icon icon="solar:shield-check-bold" height="16" class="text-white mr-1" />
+                                    Terautentikasi
+                                </v-chip>
+                                <v-chip v-if="user?.client_roles && user.client_roles.length > 0" 
+                                    size="small" 
+                                    color="primary" 
+                                    variant="outlined" 
+                                    class="font-weight-medium px-3">
+                                    <Icon icon="solar:user-id-bold" height="16" class="text-primary mr-1" />
+                                    {{ user.client_roles.join(', ') }}
+                                </v-chip>
+                            </div>
+                        </div>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+    </v-row>
+
+    <!-- Full Dashboard - With Access -->
+    <template v-else>
     <v-row class="mb-4">
         <v-col cols="12">
         </v-col>    
@@ -755,6 +860,7 @@ definePageMeta({
             </v-card>
         </v-col>
     </v-row>
+    </template>
 
     <!-- Modal Pendaftaran -->
     <ModalPendaftaran 
diff --git a/pages/setting/hak-akses/form.vue b/pages/setting/hak-akses/form.vue
index a1e466a..1e6e48c 100644
--- a/pages/setting/hak-akses/form.vue
+++ b/pages/setting/hak-akses/form.vue
@@ -1,18 +1,31 @@
 <script setup lang="ts">
-import sidebarItem from '@/components/layout/full/vertical-sidebar/sidebarItem';
+import { getListRoleById, updateRolePage } from '~/services/access';
 import type { PageMode } from '~/types/common';
+import LoadingState from '~/components/shared/LoadingState.vue';
+
+interface MenuItem {
+    title?: string;
+    icon?: string;
+    to?: string;
+    children?: MenuItem[] | null;
+}
+
+interface MenuGroup {
+    id: string;
+    header: string;
+    children: MenuItem[];
+}
 
 
 
 const route = useRoute();
 const router = useRouter();
 
-// Detect mode from route query
+// Detect mode from route query (only edit and view)
 const mode = computed<PageMode>(() => {
     const modeParam = route.query.mode as string;
-    if (modeParam === 'edit') return 'edit';
     if (modeParam === 'view') return 'view';
-    return 'create';
+    return 'edit'; // Default to edit
 });
 
 // Computed readonly state
@@ -20,26 +33,12 @@ const isReadonly = computed(() => mode.value === 'view');
 
 // Dynamic page title based on mode
 const pageTitle = computed(() => {
-    switch (mode.value) {
-        case 'edit':
-            return 'Edit Hak Akses';
-        case 'view':
-            return 'Detail Hak Akses';
-        default:
-            return 'Tambah Hak Akses';
-    }
+    return mode.value === 'view' ? 'Detail Hak Akses' : 'Edit Hak Akses';
 });
 
 // Dynamic breadcrumbs based on mode
 const breadcrumbText = computed(() => {
-    switch (mode.value) {
-        case 'edit':
-            return 'Edit';
-        case 'view':
-            return 'Detail';
-        default:
-            return 'Tambah';
-    }
+    return mode.value === 'view' ? 'Detail' : 'Edit';
 });
 
 definePageMeta({
@@ -67,10 +66,12 @@ watch([pageTitle, breadcrumbText], ([title, crumb]) => {
 const form = ref();
 const valid = ref(true);
 const namaHakAkses = ref('');
-const status = ref('aktif');
+const status = ref(true);
 const selectedPages = ref<string[]>([]);
 const loading = ref(false);
-const currentId = ref<number | null>(null);
+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 }[] }[]>([]);
 
 // Snackbar state
 const snackbar = ref(false);
@@ -90,21 +91,17 @@ const rules = {
 
 // Get all menu items with their pages
 const menuItems = computed(() => {
-    const items: { header: string; pages: { title: string; to: string }[] }[] = [];
+    if (apiMenuItems.value.length === 0) {
+        return [];
+    }
     
-    sidebarItem.forEach(section => {
-        if (section.children && section.children.length > 0) {
-            items.push({
-                header: section.header || '',
-                pages: section.children.map(child => ({
-                    title: child.title || '',
-                    to: child.to || ''
-                }))
-            });
-        }
-    });
-    
-    return items;
+    return apiMenuItems.value.map(section => ({
+        header: section.header,
+        pages: section.pages.map(page => ({
+            title: page.page,
+            to: page.to
+        }))
+    }));
 });
 
 // Toggle all pages in a section
@@ -149,30 +146,56 @@ const handleSimpan = async () => {
             return;
         }
         
+        if (!currentId.value) {
+            showSnackbar('ID tidak ditemukan', 'error');
+            return;
+        }
+        
         loading.value = true;
         
         try {
+            // Build access_page array from API menu structure
+            const accessPages: any[] = [];
+            
+            apiMenuItems.value.forEach((section) => {
+                // Check if any child in this section is selected
+                const hasActiveChild = section.pages.some((page) => 
+                    selectedPages.value.includes(page.to)
+                );
+                
+                // Add header item (parent) - active if any child is active
+                accessPages.push({
+                    id: section.id,
+                    is_active: hasActiveChild,
+                    page: section.header,
+                    parent_id: '',
+                    sort: accessPages.length
+                });
+                
+                // Add child pages
+                section.pages.forEach((page) => {
+                    const isSelected = selectedPages.value.includes(page.to);
+                    accessPages.push({
+                        id: page.id,
+                        is_active: isSelected,
+                        page: page.page,
+                        parent_id: page.parent_id,
+                        sort: page.sort
+                    });
+                });
+            });
+            
             const payload = {
-                namaHakAkses: namaHakAkses.value,
+                id: currentId.value || '',
+                name: namaHakAkses.value,
                 status: status.value,
-                pages: selectedPages.value
+                access_page: accessPages
             };
             
             let response;
             
-            if (mode.value === 'edit' && currentId.value) {
-                // Update existing
-                response = await $fetch(`/api/hak-akses/${currentId.value}`, {
-                    method: 'PUT',
-                    body: payload
-                });
-            } else {
-                // Create new
-                response = await $fetch('/api/hak-akses', {
-                    method: 'POST',
-                    body: payload
-                });
-            }
+            // Update existing role
+            response = await updateRolePage(currentId.value, payload);
             
             if (response && typeof response === 'object' && 'success' in response && response.success) {
                 const message = 'message' in response && typeof response.message === 'string' 
@@ -203,7 +226,7 @@ const handleReset = () => {
     if (confirm('Apakah Anda yakin ingin mereset form?')) {
         form.value.reset();
         namaHakAkses.value = '';
-        status.value = 'aktif';
+        status.value = false;
         selectedPages.value = [];
     }
 };
@@ -212,104 +235,157 @@ const handleKembali = () => {
     router.push('/setting/hak-akses');
 };
 
-// Load data if edit or view mode
-onMounted(async () => {
-    if (mode.value !== 'create') {
-        const id = route.query.id;
-        
-        if (id) {
-            loading.value = true;
+// Helper function to transform access_page array to menu structure
+const transformAccessPageToMenuStructure = (accessPages: any[]) => {
+    const headers = accessPages.filter((item: any) => !item.parent_id);
+    const children = accessPages.filter((item: any) => item.parent_id);
+    
+    const menuStructure: { id: string; header: string; pages: any[] }[] = [];
+    
+    headers.forEach((header: any) => {
+        const headerChildren = children.filter((child: any) => child.parent_id === header.id);
+        if (headerChildren.length > 0) {
+            // Add 'to' property to each child page
+            const pagesWithRoutes = headerChildren.map((child: any) => ({
+                ...child,
+                to: child.to || `/route-placeholder/${child.page.toLowerCase().replace(/\s+/g, '-')}`
+            }));
             
-            try {
-                const response = await $fetch(`/api/hak-akses/${id}`);
-                
-                if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
-                    const data = response.data;
-                    
-                    if (data && typeof data === 'object') {
-                        currentId.value = 'id' in data && typeof data.id === 'number' ? data.id : null;
-                        namaHakAkses.value = 'namaHakAkses' in data && typeof data.namaHakAkses === 'string' ? data.namaHakAkses : '';
-                        status.value = 'status' in data && typeof data.status === 'string' ? data.status : 'aktif';
-                        selectedPages.value = 'pages' in data && Array.isArray(data.pages) ? data.pages : [];
-                    }
-                } else {
-                    const message = response && typeof response === 'object' && 'message' in response && typeof response.message === 'string' 
-                        ? response.message 
-                        : 'Data tidak ditemukan';
-                    showSnackbar(message, 'error');
-                    
-                    // Redirect to list after 2 seconds
-                    setTimeout(() => {
-                        router.push('/setting/hak-akses');
-                    }, 2000);
-                }
-            } catch (error) {
-                console.error('Error loading hak akses:', error);
-                showSnackbar('Gagal memuat data', 'error');
-                
-                // Redirect to list after 2 seconds
-                setTimeout(() => {
-                    router.push('/setting/hak-akses');
-                }, 2000);
-            } finally {
-                loading.value = false;
-            }
+            menuStructure.push({
+                id: header.id,
+                header: header.page,
+                pages: pagesWithRoutes
+            });
         }
+    });
+    
+    return menuStructure;
+};
+
+// Load role data
+onMounted(async () => {
+    loading.value = true;
+    
+    try {
+        const id = route.query.id as string;
+        
+        if (!id) {
+            showSnackbar('ID tidak ditemukan', 'error');
+            setTimeout(() => {
+                router.push('/setting/hak-akses');
+            }, 2000);
+            return;
+        }
+        
+        const response = await getListRoleById(id);
+        
+        if (response && response.success && response.data) {
+            const data = response.data;
+            
+            // Store current role ID
+            currentId.value = id;
+            
+            // Extract role name and status
+            if (data.name) {
+                namaHakAkses.value = data.name;
+            }
+            if ('status' in data) {
+                status.value = data.status;
+            }
+            
+            // Extract and transform access_page array
+            if (data.access_page && Array.isArray(data.access_page)) {
+                const menuStructure = transformAccessPageToMenuStructure(data.access_page);
+                apiMenuItems.value = menuStructure;
+                
+                // Extract active pages
+                const extractedPages: string[] = [];
+                
+                menuStructure.forEach(section => {
+                    section.pages.forEach((page: any) => {
+                        if (page.is_active && 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');
+            
+            setTimeout(() => {
+                router.push('/setting/hak-akses');
+            }, 2000);
+        }
+    } catch (error) {
+        console.error('Error loading data:', error);
+        showSnackbar('Gagal memuat data', 'error');
+        
+        setTimeout(() => {
+            router.push('/setting/hak-akses');
+        }, 2000);
+    } finally {
+        loading.value = false;
     }
 });
 </script>
 
 <template>
-    <v-form ref="form" v-model="valid" lazy-validation>
-        <v-row>
-            <!-- Form Card -->
-            <v-col cols="12">
-                <v-card elevation="10">
-                    <v-card-item>
-                        <h5 class="text-h5 font-weight-bold">Informasi Hak Akses</h5>
-                    </v-card-item>
-                    <v-divider></v-divider>
-                    <v-card-text>
-                        <v-row>
-                            <!-- Nama Hak Akses -->
-                            <v-col cols="12" md="6">
-                                <v-label class="mb-2 font-weight-medium">Nama Hak Akses <span class="text-error">*</span></v-label>
-                                <v-text-field
-                                    v-model="namaHakAkses"
-                                    placeholder="Contoh: Admin, Dokter, Perawat"
-                                    variant="outlined"
-                                    density="comfortable"
-                                    :rules="[rules.required]"
-                                    hide-details="auto"
-                                    :readonly="isReadonly"
-                                    :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
-                                ></v-text-field>
-                            </v-col>
+    <LoadingState 
+        :loading="loading"
+        loadingText="Memuat data..."
+        minHeight="400px"
+    >
+        <v-form ref="form" v-model="valid" lazy-validation>
+            <v-row>
+                <!-- Form Card -->
+                <v-col cols="12">
+                    <v-card elevation="10">
+                        <v-card-item>
+                            <h5 class="text-h5 font-weight-bold">Informasi Hak Akses</h5>
+                        </v-card-item>
+                        <v-divider></v-divider>
+                        <v-card-text>
+                            <v-row>
+                                <!-- Nama Hak Akses -->
+                                <v-col cols="12" md="6">
+                                    <v-label class="mb-2 font-weight-medium">Nama Hak Akses <span class="text-error">*</span></v-label>
+                                    <v-text-field
+                                        v-model="namaHakAkses"
+                                        placeholder="Contoh: Admin, Dokter, Perawat"
+                                        variant="outlined"
+                                        density="comfortable"
+                                        :rules="[rules.required]"
+                                        hide-details="auto"
+                                        :readonly="isReadonly"
+                                        :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
+                                    ></v-text-field>
+                                </v-col>
 
-                            <!-- Status -->
-                            <v-col cols="12" md="6">
-                                <v-label class="mb-2 font-weight-medium">Status <span class="text-error">*</span></v-label>
-                                <v-switch
-                                    v-model="status"
-                                    true-value="aktif"
-                                    false-value="tidak aktif"
-                                    color="success"
-                                    hide-details="auto"
-                                    :readonly="isReadonly"
-                                    :disabled="isReadonly"
-                                    inset
-                                >
-                                    <template #label>
-                                        <span :class="status === 'aktif' ? 'text-success' : 'text-error'">
-                                            {{ status === 'aktif' ? 'Aktif' : 'Tidak Aktif' }}
-                                        </span>
-                                    </template>
-                                </v-switch>
-                            </v-col>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
-            </v-col>
+                                <!-- Status -->
+                                <v-col cols="12" md="6">
+                                    <v-label class="mb-2 font-weight-medium">Status <span class="text-error">*</span></v-label>
+                                    <v-switch
+                                        v-model="status"
+                                        color="success"
+                                        hide-details="auto"
+                                        :readonly="isReadonly"
+                                        inset
+                                    >
+                                        <template #label>
+                                            <span :class="status ? 'text-success' : 'text-error'">
+                                                {{ status ? 'Aktif' : 'Tidak Aktif' }}
+                                            </span>
+                                        </template>
+                                    </v-switch>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </v-col>
 
             <!-- Akses Halaman Card -->
             <v-col cols="12">
@@ -335,7 +411,7 @@ onMounted(async () => {
                                             hide-details
                                             density="compact"
                                             color="primary"
-                                            :disabled="isReadonly"
+                                            :readonly="isReadonly"
                                         >
                                             <template #label>
                                                 <span class="text-capitalize font-weight-bold">
@@ -357,7 +433,7 @@ onMounted(async () => {
                                             hide-details
                                             density="compact"
                                             color="primary"
-                                            :disabled="isReadonly"
+                                            :readonly="isReadonly"
                                         ></v-checkbox>
                                     </div>
                                 </v-card>
@@ -383,15 +459,6 @@ onMounted(async () => {
                 <v-card elevation="10">
                     <v-card-text>
                         <div class="d-flex justify-end ga-3">
-                            <v-btn
-                                color="default"
-                                size="large"
-                                variant="outlined"
-                                prepend-icon="mdi-arrow-left"
-                                @click="handleKembali"
-                            >
-                                Kembali
-                            </v-btn>
                             <v-btn
                                 v-if="!isReadonly"
                                 color="error"
@@ -419,6 +486,7 @@ onMounted(async () => {
             </v-col>
         </v-row>
     </v-form>
+    </LoadingState>
 
     <!-- Snackbar for notifications -->
     <v-snackbar
diff --git a/pages/setting/hak-akses/index.vue b/pages/setting/hak-akses/index.vue
index 9f2e0dd..d366da3 100644
--- a/pages/setting/hak-akses/index.vue
+++ b/pages/setting/hak-akses/index.vue
@@ -1,25 +1,16 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import type { HakAkses } from '~/types/setting';
+import { getListRole } from '~/services/access';
 
-const page = ref({ title: 'Hak Akses' });
-const breadcrumbs = ref([
-    {
-        text: 'Setting',
-        disabled: false,
-        href: '#'
-    },
-    {
-        text: 'Hak Akses',
-        disabled: true,
-        href: '#'
-    }
-]);
 
 const router = useRouter();
 const search = ref('');
 const hakAksesList = ref<HakAkses[]>([]);
 const loading = ref(false);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+const totalItems = ref(0);
 
 // Snackbar state
 const snackbar = ref(false);
@@ -33,18 +24,23 @@ const showSnackbar = (message: string, color: string = 'success') => {
 };
 
 // Load data from API
-const loadData = async () => {
+const fetchData = async () => {
     loading.value = true;
-    
     try {
-        const response = await $fetch('/api/hak-akses');
+        const offset = (currentPage.value - 1) * itemsPerPage.value;
+        const response = await getListRole({
+            limit: itemsPerPage.value,
+            offset: offset,
+            search: search.value || undefined
+        });
         
-        if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
-            hakAksesList.value = Array.isArray(response.data) ? response.data : [];
+        if (response && response.success) {
+            hakAksesList.value = response.data;
+            totalItems.value = response.Paginate.Total;
         }
     } catch (error) {
-        console.error('Error loading hak akses:', error);
-        showSnackbar('Gagal memuat data', 'error');
+        console.error('Error fetching hak akses:', error);
+        showSnackbar('Gagal mengambil data hak akses', 'error');
     } finally {
         loading.value = false;
     }
@@ -52,15 +48,14 @@ const loadData = async () => {
 
 const headers = [
     { title: 'No', key: 'no', width: '100px', align: 'center' as const },
-    { title: 'Nama Hak Akses', key: 'namaHakAkses', sortable: true },
-    { title: 'Status', key: 'status', sortable: true, align: 'center' as const },
+    { title: 'Nama Hak Akses', key: 'name', sortable: true },
+    { title: 'Status', key: 'is_active', sortable: true, align: 'center' as const },
     { title: 'Actions', key: 'actions', sortable: false }
 ];
 
 const actions = [
     { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
-    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
-    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' }
 ];
 
 const handleView = (item: unknown) => {
@@ -87,7 +82,7 @@ const handleEdit = (item: unknown) => {
 
 const handleDelete = async (item: unknown) => {
     const data = item as HakAkses;
-    if (confirm(`Apakah Anda yakin ingin menghapus hak akses "${data.namaHakAkses}"?`)) {
+    if (confirm(`Apakah Anda yakin ingin menghapus hak akses "${data.name}"?`)) {
         loading.value = true;
         
         try {
@@ -121,9 +116,32 @@ const handleDelete = async (item: unknown) => {
     }
 };
 
-// Load data on mount
+// Watch for page changes
+watch(currentPage, () => {
+    fetchData();
+});
+
+watch(itemsPerPage, () => {
+    currentPage.value = 1;
+    fetchData();
+});
+
+
+// Watch for search with debounce
+let searchTimeout: NodeJS.Timeout | null = null;
+watch(search, () => {
+    if (searchTimeout) {
+        clearTimeout(searchTimeout);
+    }
+    searchTimeout = setTimeout(() => {
+        currentPage.value = 1;
+        fetchData();
+    }, 500); // 500ms debounce
+});
+
+// Initial fetch
 onMounted(() => {
-    loadData();
+    fetchData();
 });
 
 definePageMeta({
@@ -147,35 +165,37 @@ definePageMeta({
                             style="max-width: 400px;"
                         ></v-text-field>
                         
-                        <v-btn
+                        <!-- <v-btn
                             color="primary"
                             prepend-icon="mdi-plus"
                             to="/setting/hak-akses/form"
                         >
                             Tambah Hak Akses
-                        </v-btn>
+                        </v-btn> -->
                     </div>
 
                     <TableAntrian
                         :headers="headers"
                         :items="hakAksesList"
-                        :search="search"
-                        :actions="actions"
+                        :server-side="true"
+                        :total-items="totalItems"
+                        :current-page="currentPage"
+                        :items-per-page="itemsPerPage"
                         :loading="loading"
+                        :get-actions="() => actions"
                         min-width="900px"
                         @view="handleView"
                         @edit="handleEdit"
-                        @delete="handleDelete"
                     >
                         <template #item.no="{ index }">
                             {{ index + 1 }}
                         </template>
-                        <template #item.status="{ item }">
+                        <template #item.is_active="{ item }">
                             <v-chip
-                                :color="item.status === 'aktif' ? 'success' : 'error'"
+                                :color="item.is_active === true ? 'success' : 'error'"
                                 size="small"
                             >
-                                {{ item.status }}
+                                {{ item.is_active === true ? 'Aktif' : 'Nonaktif' }}
                             </v-chip>
                         </template>
                     </TableAntrian>
diff --git a/pages/setting/user/index.vue b/pages/setting/user/index.vue
index 4bb5f3f..e0e11ff 100644
--- a/pages/setting/user/index.vue
+++ b/pages/setting/user/index.vue
@@ -1,18 +1,73 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
-import usersData from '~/data/mock/users.json';
 import type { User } from '~/types/setting';
+import { getListUser } from '~/services/access';
 
 
 const router = useRouter();
 const search = ref('');
-const usersList = ref<User[]>(usersData);
+const usersList = ref<User[]>([]);
+const loading = ref(false);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+const totalItems = ref(0);
 
 // Snackbar state
 const snackbar = ref(false);
 const snackbarMessage = ref('');
 const snackbarColor = ref('success');
 
+const fetchData = async () => {
+    loading.value = true;
+    try {
+        const offset = (currentPage.value - 1) * itemsPerPage.value;
+        const response = await getListUser({
+            limit: itemsPerPage.value,
+            offset: offset,
+            search: search.value || undefined
+        });
+        
+        if (response && response.success) {
+            usersList.value = response.data;
+            totalItems.value = response.Paginate.Total;
+        }
+    } catch (error) {
+        console.error('Error fetching users:', error);
+        showSnackbar('Gagal mengambil data user', 'error');
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+// Watch for page changes
+watch(currentPage, () => {
+    fetchData();
+});
+
+watch(itemsPerPage, () => {
+    currentPage.value = 1;
+    fetchData();
+});
+
+
+// Watch for search with debounce
+let searchTimeout: NodeJS.Timeout | null = null;
+watch(search, () => {
+    if (searchTimeout) {
+        clearTimeout(searchTimeout);
+    }
+    searchTimeout = setTimeout(() => {
+        currentPage.value = 1;
+        fetchData();
+    }, 500); // 500ms debounce
+});
+
+// Initial fetch
+onMounted(() => {
+    fetchData();
+});
+
 const showSnackbar = (message: string, color: string = 'success') => {
     snackbarMessage.value = message;
     snackbarColor.value = color;
@@ -21,19 +76,12 @@ const showSnackbar = (message: string, color: string = 'success') => {
 
 const headers = [
     { title: 'No', key: 'no', width: '100px', align: 'center' as const },
-    { title: 'Nama User', key: 'namaUser', sortable: true },
+    { title: 'Nama User', key: 'name', sortable: true },
     { title: 'Email', key: 'email', sortable: true },
-    { title: 'Hak Akses', key: 'hakAkses', sortable: true },
-    { title: 'Status', key: 'status', sortable: true, align: 'center' as const },
+    { title: 'Hak Akses', key: 'hak_akses', sortable: true },
     // { title: 'Actions', key: 'actions', sortable: false, align: 'center' as const }
 ];
 
-const actions = [
-    { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
-    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
-    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
-];
-
 const handleView = (item: unknown) => {
     const data = item as User;
     router.push({
@@ -58,7 +106,7 @@ const handleEdit = (item: unknown) => {
 
 const handleDelete = (item: unknown) => {
     const data = item as User;
-    if (confirm(`Apakah Anda yakin ingin menghapus user "${data.namaUser}"?`)) {
+    if (confirm(`Apakah Anda yakin ingin menghapus user "${data.name}"?`)) {
         // Remove from list
         const index = usersList.value.findIndex(u => u.id === data.id);
         if (index > -1) {
@@ -101,7 +149,11 @@ definePageMeta({
                     <TableAntrian
                         :headers="headers"
                         :items="usersList"
-                        :search="search"
+                        :server-side="true"
+                        :total-items="totalItems"
+                        :current-page="currentPage"
+                        :items-per-page="itemsPerPage"
+                        :loading="loading"
                         min-width="1200px"
                         @view="handleView"
                         @edit="handleEdit"
@@ -110,9 +162,9 @@ definePageMeta({
                         <template #item.no="{ index }">
                             {{ index + 1 }}
                         </template>
-                        <template #item.hakAkses="{ item }">
+                        <template #item.hak_akses="{ item }">
                             <v-chip
-                                v-for="(hak, idx) in item.hakAkses"
+                                v-for="(hak, idx) in item.hak_akses"
                                 :key="idx"
                                 class="ma-1"
                                 color="primary"
diff --git a/plugins/auth.client.ts b/plugins/auth.client.ts
new file mode 100644
index 0000000..f456b6f
--- /dev/null
+++ b/plugins/auth.client.ts
@@ -0,0 +1,27 @@
+// plugins/auth.client.ts
+// This plugin initializes authentication state once on app load
+// Runs only on client-side before any components mount
+
+export default defineNuxtPlugin({
+  name: 'auth',
+  enforce: 'pre', // Run before other plugins
+  async setup(nuxtApp) {
+    
+    const { checkAuth, user } = useAuth();
+    
+    try {
+      // Initialize auth state once on app load
+      // This MUST complete before app renders
+      const userData = await checkAuth();
+      
+      if (userData) {
+        console.log('✅ Auth plugin: User authenticated');
+      } else {
+        console.log('ℹ️ Auth plugin: No active session');
+      }
+    } catch (err) {
+      console.error('❌ Auth plugin: Failed to initialize auth:', err);
+    }
+    
+  }
+});
diff --git a/scss/_override.scss b/scss/_override.scss
index d1c9612..05bfcca 100644
--- a/scss/_override.scss
+++ b/scss/_override.scss
@@ -164,4 +164,11 @@ html {
     rgba(196, 194, 194, 0.6),
     transparent
   ) !important;
+}
+
+.grey-skeleton .v-skeleton-loader__bone .v-skeleton-loader__heading {
+  background: #e0e0e0 !important;
+}
+.grey-skeleton .v-skeleton-loader__bone .v-skeleton-loader__text {
+  background: #e0e0e0 !important;
 }
\ No newline at end of file
diff --git a/server/api/auth/keycloak-callback.get.ts b/server/api/auth/keycloak-callback.get.ts
index 91c39bb..569e006 100644
--- a/server/api/auth/keycloak-callback.get.ts
+++ b/server/api/auth/keycloak-callback.get.ts
@@ -1,4 +1,5 @@
 // server/api/auth/keycloak-callback.ts - EXTENDED SESSION FIX
+import { syncRole } from '~/services/access';
 
 // Add this at the top of the file (after imports)
 const SESSION_DURATION = 1 * 60 * 60; // 1 hour in seconds (3600 seconds)
@@ -227,24 +228,19 @@ export default defineEventHandler(async (event) => {
         console.log('   - Host:', event.node.req.headers.host);
         
         // Auto-sync hakAkses and user data after successful login
+        let responseUserAcess
         try {
             console.log('🔄 Starting auto-sync process...');
             
-            // 1. Sync hakAkses (roles) to hakAkses.json
-            const { syncHakAksesFromRoles } = await import('~/server/utils/hakAksesSync');
-            const hakAksesResult = syncHakAksesFromRoles(clientRoles);
-            console.log(`📋 HakAkses sync result:`, hakAksesResult);
-            
-            // 2. Sync user data to users.json
-            const { syncUserData } = await import('~/server/utils/userDataSync');
-            const userResult = syncUserData({
-                id: sessionData.user.id,
-                name: sessionData.user.name,
-                email: sessionData.user.email,
-                roles: clientRoles
-            });
-            console.log(`👤 User sync result: ${userResult.action} - ${userResult.message}`);
-            
+            responseUserAcess = await syncRole({
+                client_role: clientRoles,
+                email: sessionData.user.email || '',
+                keycloak_id: sessionData.user.id,
+                name: sessionData.user.name || sessionData.user.preferred_username || 'Unknown',
+            }, tokens.id_token);
+
+            console.log("responseUserAcess", responseUserAcess);
+
             console.log('✅ Auto-sync process completed successfully');
         } catch (syncError: any) {
             // Don't fail the login if sync fails, just log it
@@ -261,7 +257,13 @@ export default defineEventHandler(async (event) => {
         
         // Use sendRedirect - it should include the Set-Cookie header
         // The browser will receive the cookie and include it in the next request
-        return sendRedirect(event, '/dashboard?authenticated=true', 302);
+        
+        // check user access before redirecting to dashboard
+        if(responseUserAcess && responseUserAcess.data){
+            return sendRedirect(event, '/dashboard?authenticated=true', 302);
+        }else{
+            return sendRedirect(event, '/auth/access-denied', 302);
+        }
 
     } catch (error: any) {
         console.error('❌ === CALLBACK ERROR ===');
diff --git a/services/access.ts b/services/access.ts
new file mode 100644
index 0000000..c757882
--- /dev/null
+++ b/services/access.ts
@@ -0,0 +1,99 @@
+import api from './api'
+import type { ListUserResponse, ListRoleResponse } from '~/types/setting'
+
+interface SyncRolePayload {
+    client_role: string[]
+    email: string
+    keycloak_id: string
+    name: string
+}
+
+interface MenuItem {
+    title?: string
+    icon?: string
+    to?: string
+    children?: MenuItem[] | null
+}
+
+interface MenuGroup {
+    id: string
+    header: string
+    children: MenuItem[]
+}
+
+interface MenuResponse {
+    success: boolean
+    code: number
+    message: string
+    data: MenuGroup[]
+}
+
+export const syncRole = async (payload: SyncRolePayload, customToken: string): Promise<any> => {
+    try {
+        const response = await api.post('/access/sync-keycloak-role', payload, {
+            headers: {
+                'Authorization': `Bearer ${customToken}`
+            }
+        })
+        return response.data
+    } catch (error) {
+        console.error('Error syncing role:', error)
+        return null
+    }
+}
+
+export const getUserAccess = async (userId: string, customToken: string): Promise<MenuResponse | null> => {
+    try {
+        const response = await api.get(`/access/eligible-menu?keycloak_id=${userId}`, {
+            headers: {
+                'Authorization': `Bearer ${customToken}`
+            }
+        })        
+        return response.data
+    } catch (error: any) {
+        console.error('❌ Error getting user access:', {
+            message: error?.message,
+            response: error?.response?.data,
+            status: error?.response?.status
+        })
+        return null
+    }
+}
+
+export const getListUser = async (params: { 
+    limit?: number; 
+    offset?: number; 
+    search?: string;
+} = {}): Promise<ListUserResponse | null> => {
+    try {
+        const response = await api.get('/access/list-user', { params })
+        return response.data
+    } catch (error) {
+        console.error('Error getting list user:', error)
+        return null
+    }
+}
+
+export const getListRole = async (params: { 
+    limit?: number; 
+    offset?: number; 
+    search?: string;
+} = {}): Promise<ListRoleResponse | null> => {
+    try {
+        const response = await api.get('/access/role-permission', { params })
+        return response.data
+    } catch (error) {
+        console.error('Error getting list role:', error)
+        return null
+    }
+}
+
+export const getListRoleById = async (id: string ) => {
+  const response = await api.get(`/access/role-permission/${id}`)
+  return response.data
+}
+
+export const updateRolePage = async (id: string, data: any) => {
+  const response = await api.put(`/access/role-permission/${id}`, data)
+  return response.data
+}
\ No newline at end of file
diff --git a/store/userMenu.ts b/store/userMenu.ts
new file mode 100644
index 0000000..fc31fd3
--- /dev/null
+++ b/store/userMenu.ts
@@ -0,0 +1,123 @@
+import { defineStore } from 'pinia'
+
+export interface MenuItem {
+  title?: string
+  icon?: string
+  to?: string
+  children?: MenuItem[] | null
+}
+
+export interface MenuGroup {
+  id: string
+  header: string
+  children: MenuItem[]
+}
+
+export interface UserMenuState {
+  menuItems: MenuGroup[]
+  isLoading: boolean
+  error: string | null
+  menuFetched: boolean // Track if menu has been fetched (even if empty)
+  noAccess: boolean // Track if user has no access (data: null from API)
+}
+
+export const useUserMenuStore = defineStore('userMenu', {
+  state: (): UserMenuState => ({
+    menuItems: [],
+    isLoading: false,
+    error: null,
+    menuFetched: false,
+    noAccess: false
+  }),
+
+  getters: {
+    hasMenu: (state) => state.menuItems.length > 0,
+    
+    // Transform to format compatible with existing sidebar
+    sidebarMenuItems: (state) => {
+      const result = state.menuItems.map((group, index) => ({
+        header: group.header,
+        id: group.id || (index + 1).toString(),
+        children: group.children
+      }))
+      return result
+    }
+  },
+
+  actions: {
+    setMenuItems(items: MenuGroup[]) {
+      this.menuItems = items
+      this.error = null
+      this.menuFetched = true
+      this.noAccess = false
+    },
+
+    setNoAccess() {
+      this.menuItems = []
+      this.error = 'No access - User role is inactive or has no permissions'
+      this.menuFetched = true
+      this.noAccess = true
+    },
+
+    setLoading(loading: boolean) {
+      this.isLoading = loading
+    },
+
+    setError(error: string) {
+      this.error = error
+      this.menuFetched = true
+    },
+
+    clearMenu() {
+      this.menuItems = []
+      this.error = null
+      this.menuFetched = false
+      this.noAccess = false
+    },
+
+    async fetchUserMenu(userId: string, token: string) {
+      this.setLoading(true)
+      
+      try {
+        const { getUserAccess } = await import('~/services/access')
+        const response = await getUserAccess(userId, token)
+        
+        if (response && response.success) {
+          // Check if data is null (user has no access/role inactive)
+          if (response.data === null) {
+            console.warn('⚠️ User has no access - role inactive or no permissions')
+            this.setNoAccess()
+            return
+          }
+          
+          // Data exists, process it
+          if (response.data && response.data.length > 0) {
+            //change all id to 1
+            response.data.forEach((group: any) => {
+              group.id = '1'
+            })
+            this.setMenuItems(response.data)
+          } else {
+            // Empty data array (different from null)
+            console.warn('⚠️ No menu items returned from API')
+            this.setMenuItems([])
+          }
+        } else {
+          const errorMsg = response?.message || 'Failed to fetch user menu'
+          console.error('❌ API returned unsuccessful response:', errorMsg)
+          throw new Error(errorMsg)
+        }
+      } catch (error: any) {
+        console.error('❌ Error in fetchUserMenu:', {
+          message: error?.message,
+          stack: error?.stack?.split('\n')[0]
+        })
+        this.setError(error.message || 'Failed to fetch menu')
+        // Set empty menu on error
+        this.menuItems = []
+      } finally {
+        this.setLoading(false)
+      }
+    }
+  }
+})
diff --git a/types/auth.ts b/types/auth.ts
index 58aa4f5..a90bb5d 100644
--- a/types/auth.ts
+++ b/types/auth.ts
@@ -30,6 +30,7 @@ export interface User {
   given_name?: string
   family_name?: string
   roles?: string[]
+  client_roles?: string[] // Add client_roles from Keycloak
   realm_access?: {
     roles: string[]
   }
diff --git a/types/setting.ts b/types/setting.ts
index d114e57..86a54b0 100644
--- a/types/setting.ts
+++ b/types/setting.ts
@@ -2,15 +2,47 @@
 
 export interface User {
     id: string;
-    namaUser: string;
+    name: string;
     email: string;
-    hakAkses: string[];
-    status: string;
+    hak_akses: string[];
+}
+
+// API Response Types
+export interface UserApiItem {
+    id: string;
+    name: string;
+    email: string;
+    hak_akses: string[];
+}
+
+export interface Pagination {
+    Limit: number;
+    Offset: number;
+    Total: number;
+    TotalPages: number;
+    CurrentPage: number;
+    HasNext: boolean;
+    HasPrev: boolean;
+}
+
+export interface ListUserResponse {
+    success: boolean;
+    code: number;
+    message: string;
+    data: UserApiItem[];
+    Paginate: Pagination;
 }
 
 export interface HakAkses {
     id: string;
-    namaHakAkses: string;
-    status: string;
-    pages: string[];
+    name: string;
+    is_active: boolean;
+}
+
+export interface ListRoleResponse {
+    success: boolean;
+    code: number;
+    message: string;
+    data: HakAkses[];
+    Paginate: Pagination;
 }