feat: F002 authentication & session layer

Add permission matrix, ProtectedRoute, RoleGuard, PermissionGate,
DemoRoleSwitcher, OrganizationSwitcher, AccessDenied, SessionExpired,
and institutional LoginScreen. Wire workspace-level route protection
into App.tsx; sidebar filters tabs by allowedWorkspaces.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/layout/UserMenu.tsx

@@ -1,8 +1,18 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
-import { Avatar, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
+import { Avatar, Box, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
 import { LogOut, Settings, User } from 'lucide-react'
 import { useSessionStore } from '../../stores/sessionStore'
+import { DemoRoleSwitcher } from '../auth/DemoRoleSwitcher'
+
+const ROLE_LABELS: Record<string, string> = {
+  SUPER_ADMIN: 'Super Admin',
+  ORGANIZATION_ADMIN: 'Org Admin',
+  PROPERTY_MANAGER: 'Property Manager',
+  REVIEWER: 'Reviewer',
+  OWNER_VIEWER: 'Owner Viewer',
+  DEMAND_USER: 'Demand User',
+}
 
 function getUserInitials(name: string): string {
   return name
@@ -29,7 +39,7 @@ export function UserMenu() {
   function handleLogout() {
     handleClose()
     logout()
-    navigate('/')
+    navigate('/auth/login')
   }
 
   const initials = getUserInitials(currentUser?.name ?? 'U')
@@ -46,15 +56,25 @@ export function UserMenu() {
         anchorEl={anchorEl}
         open={!!anchorEl}
         onClose={handleClose}
-        slotProps={{ paper: { sx: { width: 200, mt: 1 } } }}
+        slotProps={{ paper: { sx: { width: 300, mt: 1 } } }}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       >
+        {/* User info header */}
         {currentUser && (
-          <MenuItem disabled sx={{ opacity: '1 !important' }}>
+          <Box sx={{ px: 2, py: 1.5 }}>
             <Typography variant="body2" sx={{ fontWeight: 600 }}>{currentUser.name}</Typography>
-          </MenuItem>
+            <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
+              {ROLE_LABELS[currentUser.role] ?? currentUser.role}
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
+              {currentUser.organizationName}
+            </Typography>
+          </Box>
         )}
+
+        <Divider />
+
         <MenuItem onClick={handleClose}>
           <ListItemIcon><User size={16} /></ListItemIcon>
           Profil
@@ -63,7 +83,16 @@ export function UserMenu() {
           <ListItemIcon><Settings size={16} /></ListItemIcon>
           Einstellungen
         </MenuItem>
+
         <Divider />
+
+        {/* Demo role switcher */}
+        <Box sx={{ px: 1, py: 1 }}>
+          <DemoRoleSwitcher />
+        </Box>
+
+        <Divider />
+
         <MenuItem onClick={handleLogout}>
           <ListItemIcon><LogOut size={16} /></ListItemIcon>
           Abmelden