Add DEMO feature to the project

frontend/src/components/layout/Header/Header.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuthUser, useIsAuthenticated } from '../../../stores';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useNotifications } from '../../../hooks/useNotifications';
+import { useHasAccess } from '../../../hooks/useAccessControl';
 import { Button } from '../../ui';
 import { Badge } from '../../ui';
 import { TenantSwitcher } from '../../ui/TenantSwitcher';
@@ -87,7 +88,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const user = useAuthUser();
-  const isAuthenticated = useIsAuthenticated();
+  const hasAccess = useHasAccess(); // Check both authentication and demo mode
   const { theme, resolvedTheme, setTheme } = useTheme();
   const {
     notifications,
@@ -183,7 +184,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
         </div>
 
         {/* Tenant Switcher - Desktop */}
-        {isAuthenticated && (
+        {hasAccess && (
           <div className="hidden md:block mx-2 lg:mx-4 flex-shrink-0">
             <TenantSwitcher
               showLabel={true}
@@ -193,7 +194,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
         )}
 
         {/* Tenant Switcher - Mobile (in title area) */}
-        {isAuthenticated && (
+        {hasAccess && (
           <div className="md:hidden flex-1 min-w-0 ml-3">
             <TenantSwitcher
               showLabel={false}
@@ -203,7 +204,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
         )}
 
         {/* Space for potential future content */ }
-        {isAuthenticated && (
+        {hasAccess && (
           <div className="hidden md:flex items-center flex-1 max-w-md mx-4">
             &nbsp; {/* Empty space to maintain layout consistency */}
           </div>
@@ -211,12 +212,12 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
       </div>
 
       {/* Right section */}
-      {isAuthenticated && (
+      {hasAccess && (
         <div className="flex items-center gap-1">
           {/* Placeholder for potential future items */ }
 
           {/* Language selector */}
-          <CompactLanguageSelector className="w-auto min-w-[60px]" />
+          <CompactLanguageSelector className="w-auto min-w-[50px]" />
 
           {/* Theme toggle */}
           {showThemeToggle && (