From 2bc314f4637e74d002de5b7fa2fcba157a8f0f01 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Wed, 22 Jul 2026 08:01:10 +0700
Subject: [PATCH] feat: implement dynamic role-based navigation sidebar using
 Pinia store and permission checking

---
 layouts/default.vue | 43 ++++++++++++++++++++++++++++++++++++-------
 stores/navItems1.ts |  2 +-
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 9a3ab7d..a5834dd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -12,22 +12,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import SideBar from "../components/layout/SideBar.vue";
 // Ensure this path matches your store location
 import { useNavItemsStore } from '~/stores/navItems1'; 
 import { useAuth } from "~/composables/useAuth";
-
-definePageMeta({
-  middleware: ['auth', 'checkPageAccess']
-})
+import { usePermissionStore } from '~/stores/permissionStore';
 
 // State for controlling the sidebar
 const drawer = ref(true);
 const rail = ref(true);
 
 const navItemsStore = useNavItemsStore();
+const permissionStore = usePermissionStore();
 const { user, checkAuth } = useAuth();
 
 // Navigation will be filtered via navItemsStore using the new hakAkses system
@@ -36,16 +34,47 @@ const filteredNavItems = computed(() => navItemsStore.filteredNavItems);
 
 onMounted(async () => {
   await checkAuth();
+  
   if (user.value) {
+    if (!permissionStore.isLoaded) {
+      const roles = [
+          ...(user.value.realm_access?.roles || []),
+          ...(user.value.roles || [])
+      ];
+      
+      const groups: string[] = [];
+      const rawGroups = (user.value as any).groups || [];
+      rawGroups.forEach((g: string) => {
+          const parts = g.split('/').filter(Boolean);
+          if (parts.length > 1) {
+              groups.push(parts[1]);
+          } else if (parts.length === 1) {
+              groups.push(parts[0]);
+          }
+      });
+      
+      const primaryRole = roles[0] || '';
+      const primaryGroup = groups[0] || '';
+      const username = user.value.preferred_username || user.value.email || user.value.name || '';
+      
+      await permissionStore.load(primaryRole, primaryGroup, username);
+    }
     await navItemsStore.refreshNavItems();
   }
 });
 
+// Watch for permissions loaded state to refresh navItems (fixes empty sidebar on F5)
+watch(() => permissionStore.isLoaded, async (isLoaded) => {
+  if (isLoaded && user.value) {
+    await navItemsStore.refreshNavItems();
+  }
+}, { immediate: true });
+
 // Watch for user changes to refresh navItems
 watch(() => user.value, async (newUser) => {
-  if (newUser) {
+  if (newUser && permissionStore.isLoaded) {
     await navItemsStore.refreshNavItems();
-  } else {
+  } else if (!newUser) {
     // Optionally reset navItems when logged out
     navItemsStore.filteredNavItems = [];
   }
diff --git a/stores/navItems1.ts b/stores/navItems1.ts
index 7a923bc..7609ce0 100644
--- a/stores/navItems1.ts
+++ b/stores/navItems1.ts
@@ -102,7 +102,7 @@ export const useNavItemsStore = defineStore('navItems', () => {
   }
 
   // Filtered navigation items based on hakAkses
-  const filteredNavItems = ref<NavItem[]>(defaultNavItems);
+  const filteredNavItems = ref<NavItem[]>([]);
 
   async function refreshNavItems() {
     const permissionStore = usePermissionStore();