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/AppShell.tsx

@@ -156,6 +156,7 @@ const NAV_HOVER_BG = 'rgba(255,255,255,0.06)'
 interface SidebarProps {
   collapsed: boolean
   activeWorkspace: WorkspaceType
+  allowedWorkspaces: WorkspaceType[]
   onWorkspaceClick: (workspace: WorkspaceType) => void
   onToggle: () => void
   userName: string
@@ -165,6 +166,7 @@ interface SidebarProps {
 function Sidebar({
   collapsed,
   activeWorkspace,
+  allowedWorkspaces,
   onWorkspaceClick,
   onToggle,
   userName,
@@ -172,6 +174,7 @@ function Sidebar({
 }: SidebarProps) {
   const config = WORKSPACE_CONFIG[activeWorkspace]
   const width = collapsed ? 60 : 240
+  const visibleWorkspaces = WORKSPACE_ORDER.filter((ws) => allowedWorkspaces.includes(ws))
 
   return (
     <Box
@@ -240,7 +243,7 @@ function Sidebar({
           flexShrink: 0,
         }}
       >
-        {WORKSPACE_ORDER.map((ws) => {
+        {visibleWorkspaces.map((ws) => {
           const wsConfig = WORKSPACE_CONFIG[ws]
           const Icon = wsConfig.icon
           const isActive = ws === activeWorkspace
@@ -506,12 +509,14 @@ export function AppShell() {
 
   const userName = currentUser?.name ?? 'User'
   const orgName = currentUser?.organizationName ?? ''
+  const allowedWorkspaces = currentUser?.allowedWorkspaces ?? WORKSPACE_ORDER
 
   return (
     <Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
       <Sidebar
         collapsed={sidebarCollapsed}
         activeWorkspace={activeWorkspace}
+        allowedWorkspaces={allowedWorkspaces}
         onWorkspaceClick={handleWorkspaceClick}
         onToggle={toggleSidebar}
         userName={userName}

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