Imporve the role based forntend protected roles

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, forwardRef, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAuthUser, useIsAuthenticated } from '../../../stores';
+import { useCurrentTenantAccess } from '../../../stores/tenant.store';
 import { getNavigationRoutes, canAccessRoute, ROUTES } from '../../../router/routes.config';
 import { Button } from '../../ui';
 import { Badge } from '../../ui';
@@ -127,6 +128,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
   const navigate = useNavigate();
   const user = useAuthUser();
   const isAuthenticated = useIsAuthenticated();
+  const currentTenantAccess = useCurrentTenantAccess();
   
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const [hoveredItem, setHoveredItem] = useState<string | null>(null);
@@ -160,8 +162,12 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
         ...item, // Create a shallow copy to avoid mutation
         children: item.children ? filterItemsByPermissions(item.children) : item.children
       })).filter(item => {
-        const userRoles = user.role ? [user.role] : [];
-        const userPermissions: string[] = user?.permissions || [];
+        // Combine global and tenant roles for comprehensive access control
+        const globalUserRoles = user.role ? [user.role as string] : [];
+        const tenantRole = currentTenantAccess?.role;
+        const tenantRoles = tenantRole ? [tenantRole as string] : [];
+        const allUserRoles = [...globalUserRoles, ...tenantRoles];
+        const tenantPermissions = currentTenantAccess?.permissions || [];
 
         const hasAccess = !item.requiredPermissions && !item.requiredRoles || 
           canAccessRoute(
@@ -171,8 +177,8 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
               requiredPermissions: item.requiredPermissions 
             } as any,
             isAuthenticated,
-            userRoles,
-            userPermissions
+            allUserRoles,
+            tenantPermissions
           );
 
         return hasAccess;
@@ -180,7 +186,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
     };
 
     return filterItemsByPermissions(navigationItems);
-  }, [navigationItems, isAuthenticated, user]);
+  }, [navigationItems, isAuthenticated, user, currentTenantAccess]);
 
   // Handle item click
   const handleItemClick = useCallback((item: NavigationItem) => {