Add DEMO feature to the project

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

@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuthUser, useIsAuthenticated, useAuthActions } from '../../../stores';
 import { useCurrentTenantAccess } from '../../../stores/tenant.store';
+import { useHasAccess } from '../../../hooks/useAccessControl';
 import { getNavigationRoutes, canAccessRoute, ROUTES } from '../../../router/routes.config';
 import { useSubscriptionAwareRoutes } from '../../../hooks/useSubscriptionAwareRoutes';
 import { Button } from '../../ui';
@@ -138,7 +139,8 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
   const location = useLocation();
   const navigate = useNavigate();
   const user = useAuthUser();
-  const isAuthenticated = useIsAuthenticated();
+  const isAuthenticated = useIsAuthenticated(); // Keep for logout check
+  const hasAccess = useHasAccess(); // For UI visibility
   const currentTenantAccess = useCurrentTenantAccess();
   const { logout } = useAuthActions();
   
@@ -207,37 +209,42 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
   // Filter items based on user permissions - memoized to prevent infinite re-renders
   const visibleItems = useMemo(() => {
     const filterItemsByPermissions = (items: NavigationItem[]): NavigationItem[] => {
-      if (!isAuthenticated || !user) return [];
+      if (!hasAccess) return [];
 
       return items.map(item => ({
         ...item, // Create a shallow copy to avoid mutation
         children: item.children ? filterItemsByPermissions(item.children) : item.children
       })).filter(item => {
         // Combine global and tenant roles for comprehensive access control
-        const globalUserRoles = user.role ? [user.role as string] : [];
+        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(
-            { 
-              path: item.path, 
-              requiredRoles: item.requiredRoles, 
-              requiredPermissions: item.requiredPermissions 
-            } as any,
-            isAuthenticated,
-            allUserRoles,
-            tenantPermissions
-          );
+        // If no specific permissions/roles required, allow access
+        if (!item.requiredPermissions && !item.requiredRoles) {
+          return true;
+        }
 
-        return hasAccess;
+        // Check access based on roles and permissions
+        const canAccessItem = canAccessRoute(
+          {
+            path: item.path,
+            requiredRoles: item.requiredRoles,
+            requiredPermissions: item.requiredPermissions
+          } as any,
+          isAuthenticated,
+          allUserRoles,
+          tenantPermissions
+        );
+
+        return canAccessItem;
       });
     };
 
     return filterItemsByPermissions(navigationItems);
-  }, [navigationItems, isAuthenticated, user, currentTenantAccess]);
+  }, [navigationItems, hasAccess, isAuthenticated, user, currentTenantAccess]);
 
   // Handle item click
   const handleItemClick = useCallback((item: NavigationItem) => {
@@ -645,7 +652,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
     );
   };
 
-  if (!isAuthenticated) {
+  if (!hasAccess) {
     return null;
   }