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/auth/AccessDenied.tsx

@@ -0,0 +1,75 @@
+import { Box, Button, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { ShieldOff } from 'lucide-react'
+import { useNavigate } from 'react-router'
+
+interface AccessDeniedProps {
+  title?: string
+  message?: string
+  onBack?: () => void
+  sx?: SxProps<Theme>
+}
+
+export function AccessDenied({
+  title = 'Kein Zugriff',
+  message = 'Sie haben keine Berechtigung, diesen Bereich zu öffnen.',
+  onBack,
+  sx,
+}: AccessDeniedProps) {
+  const navigate = useNavigate()
+
+  function handleBack() {
+    if (onBack) {
+      onBack()
+    } else {
+      navigate(-1)
+    }
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 400,
+        gap: 2,
+        p: 4,
+        ...sx,
+      }}
+    >
+      <Box
+        sx={{
+          width: 56,
+          height: 56,
+          borderRadius: '50%',
+          bgcolor: 'rgba(239,68,68,0.08)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <ShieldOff size={28} color="#ef4444" />
+      </Box>
+
+      <Box sx={{ textAlign: 'center', maxWidth: 400 }}>
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 0.5 }}>
+          {title}
+        </Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {message}
+        </Typography>
+      </Box>
+
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={handleBack}
+        sx={{ mt: 1, textTransform: 'none' }}
+      >
+        Zurück
+      </Button>
+    </Box>
+  )
+}

src/components/auth/DemoRoleSwitcher.tsx

@@ -0,0 +1,55 @@
+import { Box, Chip, Typography } from '@mui/material'
+import { UserRole } from '../../domain/enums'
+import { authService } from '../../services/authService'
+import { useSessionStore } from '../../stores/sessionStore'
+
+const ROLE_LABELS: Record<UserRole, string> = {
+  [UserRole.SUPER_ADMIN]: 'Super Admin',
+  [UserRole.ORGANIZATION_ADMIN]: 'Org Admin',
+  [UserRole.PROPERTY_MANAGER]: 'Prop. Manager',
+  [UserRole.REVIEWER]: 'Reviewer',
+  [UserRole.OWNER_VIEWER]: 'Owner Viewer',
+  [UserRole.DEMAND_USER]: 'Demand User',
+}
+
+export function DemoRoleSwitcher() {
+  const { currentUser } = useSessionStore()
+
+  async function handleSwitch(role: UserRole) {
+    await authService.switchDemoRole(role)
+  }
+
+  return (
+    <Box sx={{ px: 1, py: 0.5 }}>
+      <Typography
+        variant="caption"
+        sx={{ color: 'text.secondary', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}
+      >
+        Demo-Modus
+      </Typography>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+        {Object.values(UserRole).map((role) => {
+          const active = currentUser?.role === role
+          return (
+            <Chip
+              key={role}
+              label={ROLE_LABELS[role]}
+              size="small"
+              clickable
+              onClick={() => handleSwitch(role)}
+              sx={{
+                fontSize: '0.7rem',
+                height: 22,
+                bgcolor: active ? '#1e3a5f' : 'transparent',
+                color: active ? '#fff' : 'text.secondary',
+                border: '1px solid',
+                borderColor: active ? '#1e3a5f' : 'divider',
+                '&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
+              }}
+            />
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}

src/components/auth/OrganizationSwitcher.tsx

@@ -0,0 +1,40 @@
+import { FormControl, MenuItem, Select, Typography } from '@mui/material'
+import type { SelectChangeEvent } from '@mui/material'
+import { authService } from '../../services/authService'
+import { useSessionStore } from '../../stores/sessionStore'
+
+const MOCK_ORGANIZATIONS = [
+  { id: 'org-wincasa', name: 'Wincasa AG' },
+  { id: 'org-mobimo', name: 'Mobimo Management AG' },
+  { id: 'org-ubs', name: 'UBS Asset Management RE' },
+]
+
+export function OrganizationSwitcher() {
+  const { activeOrganizationId } = useSessionStore()
+
+  async function handleChange(e: SelectChangeEvent<string>) {
+    await authService.switchOrganization(e.target.value)
+  }
+
+  return (
+    <FormControl size="small" fullWidth sx={{ mt: 0.5 }}>
+      <Typography
+        variant="caption"
+        sx={{ color: 'text.secondary', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.5, display: 'block' }}
+      >
+        Organisation
+      </Typography>
+      <Select
+        value={activeOrganizationId ?? ''}
+        onChange={handleChange}
+        sx={{ fontSize: '0.8rem' }}
+      >
+        {MOCK_ORGANIZATIONS.map((org) => (
+          <MenuItem key={org.id} value={org.id} sx={{ fontSize: '0.8rem' }}>
+            {org.name}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  )
+}

src/components/auth/PermissionGate.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+import type { MockUser } from '../../stores/sessionStore'
+import { useSessionStore } from '../../stores/sessionStore'
+
+interface PermissionGateProps {
+  check: (user: MockUser) => boolean
+  fallback?: ReactNode
+  children: ReactNode
+}
+
+export function PermissionGate({ check, fallback = null, children }: PermissionGateProps) {
+  const { currentUser } = useSessionStore()
+
+  if (!currentUser || !check(currentUser)) {
+    return <>{fallback}</>
+  }
+
+  return <>{children}</>
+}

src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,38 @@
+import { Navigate, Outlet } from 'react-router'
+import type { WorkspaceType } from '../../domain/enums'
+import { useSessionStore } from '../../stores/sessionStore'
+import { SessionStatus } from '../../stores/sessionStore'
+import { canAccessWorkspace } from '../../lib/permissions'
+import { AccessDenied } from './AccessDenied'
+import { SessionExpired } from './SessionExpired'
+
+interface ProtectedRouteProps {
+  workspace?: WorkspaceType
+}
+
+export function ProtectedRoute({ workspace }: ProtectedRouteProps) {
+  const { isAuthenticated, currentUser, sessionStatus } = useSessionStore()
+
+  if (!isAuthenticated || sessionStatus === SessionStatus.UNAUTHENTICATED) {
+    return <Navigate to="/auth/login" replace />
+  }
+
+  if (sessionStatus === SessionStatus.EXPIRED) {
+    return <SessionExpired />
+  }
+
+  if (workspace && currentUser && !canAccessWorkspace(currentUser, workspace)) {
+    const workspaceLabel: Record<string, string> = {
+      SUPPLY: 'Supply',
+      DEMAND: 'Demand',
+      OPERATIONS: 'Operations',
+    }
+    return (
+      <AccessDenied
+        message={`Sie haben keine Berechtigung für den ${workspaceLabel[workspace] ?? workspace}-Bereich.`}
+      />
+    )
+  }
+
+  return <Outlet />
+}

src/components/auth/RoleGuard.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import type { UserRole } from '../../domain/enums'
+import { useSessionStore } from '../../stores/sessionStore'
+import { AccessDenied } from './AccessDenied'
+
+interface RoleGuardProps {
+  roles: UserRole[]
+  fallback?: ReactNode
+  children: ReactNode
+}
+
+export function RoleGuard({ roles, fallback, children }: RoleGuardProps) {
+  const { currentUser } = useSessionStore()
+
+  if (!currentUser || !roles.includes(currentUser.role)) {
+    return <>{fallback ?? <AccessDenied />}</>
+  }
+
+  return <>{children}</>
+}

src/components/auth/SessionExpired.tsx

@@ -0,0 +1,60 @@
+import { Box, Button, Typography } from '@mui/material'
+import { Clock } from 'lucide-react'
+import { useNavigate } from 'react-router'
+import { useSessionStore } from '../../stores/sessionStore'
+
+export function SessionExpired() {
+  const { logout } = useSessionStore()
+  const navigate = useNavigate()
+
+  function handleRelogin() {
+    logout()
+    navigate('/auth/login')
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        gap: 2,
+        bgcolor: '#f8fafc',
+        p: 4,
+      }}
+    >
+      <Box
+        sx={{
+          width: 56,
+          height: 56,
+          borderRadius: '50%',
+          bgcolor: 'rgba(245,158,11,0.1)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Clock size={28} color="#f59e0b" />
+      </Box>
+
+      <Box sx={{ textAlign: 'center', maxWidth: 380 }}>
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 0.5 }}>
+          Sitzung abgelaufen
+        </Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          Ihre Sitzung ist abgelaufen. Bitte melden Sie sich erneut an.
+        </Typography>
+      </Box>
+
+      <Button
+        variant="contained"
+        onClick={handleRelogin}
+        sx={{ mt: 1, bgcolor: '#1e3a5f', textTransform: 'none' }}
+      >
+        Erneut anmelden
+      </Button>
+    </Box>
+  )
+}

src/components/auth/index.ts

@@ -0,0 +1,7 @@
+export { AccessDenied } from './AccessDenied'
+export { SessionExpired } from './SessionExpired'
+export { PermissionGate } from './PermissionGate'
+export { RoleGuard } from './RoleGuard'
+export { ProtectedRoute } from './ProtectedRoute'
+export { DemoRoleSwitcher } from './DemoRoleSwitcher'
+export { OrganizationSwitcher } from './OrganizationSwitcher'