Add DEMO feature to the project

frontend/src/router/AppRouter.tsx

@@ -8,6 +8,7 @@ import { AppShell } from '../components/layout';
 const LandingPage = React.lazy(() => import('../pages/public/LandingPage'));
 const LoginPage = React.lazy(() => import('../pages/public/LoginPage'));
 const RegisterPage = React.lazy(() => import('../pages/public/RegisterPage'));
+const DemoPage = React.lazy(() => import('../pages/public/DemoPage'));
 const DashboardPage = React.lazy(() => import('../pages/app/DashboardPage'));
 
 // Operations pages
@@ -58,6 +59,7 @@ export const AppRouter: React.FC = () => {
         <Route path="/" element={<LandingPage />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/register" element={<RegisterPage />} />
+        <Route path="/demo" element={<DemoPage />} />
         
         {/* Protected Routes with AppShell Layout */}
         <Route 

frontend/src/router/ProtectedRoute.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { useAuthUser, useIsAuthenticated, useAuthLoading } from '../stores';
 import { useCurrentTenantAccess, useTenantPermissions } from '../stores/tenant.store';
+import { useHasAccess, useIsDemoMode } from '../hooks/useAccessControl';
 import { RouteConfig, canAccessRoute, ROUTES } from './routes.config';
 
 interface ProtectedRouteProps {
@@ -130,6 +131,8 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
   const currentTenantAccess = useCurrentTenantAccess();
   const { hasPermission } = useTenantPermissions();
   const location = useLocation();
+  const hasAccess = useHasAccess(); // Check both authentication and demo mode
+  const isDemoMode = useIsDemoMode();
 
   // Note: Onboarding routes are now properly protected and require authentication
   // Mock mode only applies to the onboarding flow content, not to route protection
@@ -144,15 +147,20 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
     return <>{children}</>;
   }
 
+  // If user has access (authenticated OR demo mode), allow access
+  if (hasAccess) {
+    return <>{children}</>;
+  }
+
   // If not authenticated and route requires auth, redirect to login
   if (!isAuthenticated) {
     const redirectPath = redirectTo || ROUTES.LOGIN;
     const returnUrl = location.pathname + location.search;
-    
+
     return (
-      <Navigate 
-        to={`${redirectPath}?returnUrl=${encodeURIComponent(returnUrl)}`} 
-        replace 
+      <Navigate
+        to={`${redirectPath}?returnUrl=${encodeURIComponent(returnUrl)}`}
+        replace
       />
     );
   }