feat: role-based permissions (owner/partner/associate/paralegal/secretary)

Backend:
- auth/permissions.go: full permission matrix with RequirePermission/RequireRole
  middleware, CanEditCase, CanDeleteDocument helpers
- auth/context.go: add user role to request context
- auth/middleware.go: resolve role alongside tenant in auth flow
- auth/tenant_resolver.go: verify membership + resolve role for X-Tenant-ID
- handlers/case_assignments.go: CRUD for case-level user assignments
- handlers/tenant_handler.go: UpdateMemberRole, GetMe (/api/me) endpoints
- handlers/documents.go: permission-based delete (own vs all)
- router/router.go: permission-wrapped routes for all endpoints
- services/case_assignment_service.go: assign/unassign with tenant validation
- services/tenant_service.go: UpdateMemberRole with owner protection
- models/case_assignment.go: CaseAssignment model

Database:
- user_tenants.role: CHECK constraint (owner/partner/associate/paralegal/secretary)
- case_assignments table: case_id, user_id, role (lead/team/viewer)
- Migrated existing admin->partner, member->associate

Frontend:
- usePermissions hook: fetches /api/me, provides can() helper
- TeamSettings: 5-role dropdown, role change, permission-gated invite
- CaseAssignments: new component for case-level team management
- Sidebar: conditionally hides AI/Settings based on permissions
- Cases page: hides "Neue Akte" button for non-authorized roles
- Case detail: new "Mitarbeiter" tab for assignment management

AUDIT.md

@@ -0,0 +1,482 @@
+# KanzlAI-mGMT MVP Audit
+
+**Date:** 2026-03-28
+**Auditor:** athena (consultant)
+**Scope:** Full-stack audit of KanzlAI-mGMT — Go backend, Next.js frontend, Supabase database, deployment, security, UX, competitive positioning.
+**Codebase:** ~16,500 lines across ~60 source files, built 2026-03-25 in a single session with parallel workers.
+
+---
+
+## Executive Summary
+
+KanzlAI-mGMT is an impressive MVP built in ~2 hours. It covers the core Kanzleimanagement primitives: cases, deadlines, appointments, parties, documents, notes, dashboard, CalDAV sync, and AI-powered deadline extraction. The architecture is sound — clean separation between Go API and Next.js frontend, proper multi-tenant design with Supabase Auth, parameterized SQL throughout.
+
+However, the speed of construction shows. There are **critical security gaps** that must be fixed before any external user touches this. The frontend has good bones but lacks the polish and completeness a lawyer would expect. And the feature gap vs. established competitors (RA-MICRO, ADVOWARE, AnNoText, Actaport) is enormous — particularly around beA integration, billing/RVG, and document generation, which are table-stakes for German law firms.
+
+**Bottom line:** Fix the security issues, add error recovery and multi-tenant auth verification, then decide whether to pursue the Kanzleimanagement market (massive feature gap) or pivot back to the UPC niche (where you had a genuine competitive advantage).
+
+---
+
+## 1. Critical Issues (Fix Immediately)
+
+### 1.1 Tenant Isolation Bypass in TenantResolver
+**File:** `backend/internal/auth/tenant_resolver.go:37-42`
+
+When the `X-Tenant-ID` header is provided, the TenantResolver parses it and sets it in context **without verifying the user has access to that tenant**. Any authenticated user can access any tenant's data by setting this header.
+
+```go
+if header := r.Header.Get("X-Tenant-ID"); header != "" {
+    parsed, err := uuid.Parse(header)
+    // ... sets tenantID = parsed — NO ACCESS CHECK
+}
+```
+
+Compare with `helpers.go:32-44` where `resolveTenant()` correctly verifies access via `user_tenants` — but this function is unused in the middleware path. The TenantResolver middleware is what actually runs for all scoped routes.
+
+**Impact:** Complete tenant data isolation breach. User A can read/modify/delete User B's cases, deadlines, appointments, documents.
+
+**Fix:** Add `user_tenants` lookup in TenantResolver when X-Tenant-ID is provided, same as `resolveTenant()` does.
+
+### 1.2 Duplicate Tenant Resolution Logic
+**Files:** `backend/internal/auth/tenant_resolver.go` and `backend/internal/handlers/helpers.go:25-57`
+
+Two independent implementations of tenant resolution exist. The middleware (`TenantResolver`) is used for the scoped routes. The handler-level `resolveTenant()` function exists in helpers.go. The auth middleware in `middleware.go:39-47` also resolves a tenant into context. This triple-resolution creates confusion and the security bug above.
+
+**Fix:** Consolidate to a single path. Remove the handler-level `resolveTenant()` and the auth middleware's tenant resolution. Let TenantResolver be the single source of truth, but make it verify access.
+
+### 1.3 CalDAV Credentials Stored in Plaintext
+**File:** `backend/internal/services/caldav_service.go:29-35`
+
+CalDAV username and password are stored as plain JSON in the `tenants.settings` column:
+```go
+type CalDAVConfig struct {
+    URL      string `json:"url"`
+    Username string `json:"username"`
+    Password string `json:"password"`
+    ...
+}
+```
+
+Combined with the tenant isolation bypass above, any authenticated user can read any tenant's CalDAV credentials.
+
+**Fix:** Encrypt CalDAV credentials at rest (e.g., using `pgcrypto` or application-level encryption). At minimum, never return the password in API responses.
+
+### 1.4 No CORS Configuration
+**File:** `backend/internal/router/router.go`, `backend/cmd/server/main.go`
+
+There is zero CORS handling anywhere in the backend. The frontend uses Next.js rewrites to proxy `/api/` to the backend, which works in production. But:
+- If anyone accesses the backend directly (different origin), there's no CORS protection.
+- No `X-Frame-Options`, `X-Content-Type-Options`, or other security headers are set.
+
+**Fix:** Add CORS middleware restricting to the frontend origin. Add standard security headers.
+
+### 1.5 Internal Error Messages Leaked to Clients
+**Files:** Multiple handlers (e.g., `cases.go:44`, `cases.go:73`, `appointments.go`)
+
+```go
+writeError(w, http.StatusInternalServerError, err.Error())
+```
+
+Internal error messages (including SQL errors, connection errors, etc.) are sent directly to the client. This leaks implementation details.
+
+**Fix:** Log the full error server-side, return a generic message to the client.
+
+### 1.6 Race Condition in HolidayService Cache
+**File:** `backend/internal/services/holidays.go`
+
+The `HolidayService` uses a `map[int][]Holiday` cache without any mutex protection. Concurrent requests (e.g., multiple deadline calculations) will cause a data race. The Go race detector would flag this.
+
+**Fix:** Add `sync.RWMutex` to HolidayService.
+
+### 1.7 Rate Limiter Trivially Bypassable
+**File:** `backend/internal/middleware/ratelimit.go:78-79`
+
+```go
+ip := r.Header.Get("X-Forwarded-For")
+if ip == "" { ip = r.RemoteAddr }
+```
+
+Rate limiting keys off `X-Forwarded-For`, which any client can spoof. An attacker can bypass AI endpoint rate limits by rotating this header.
+
+**Fix:** Only trust `X-Forwarded-For` from configured reverse proxy IPs, or use `r.RemoteAddr` exclusively behind a trusted proxy.
+
+---
+
+## 2. Important Gaps (Fix Before Showing to Anyone)
+
+### 2.1 No Input Validation Beyond "Required Fields"
+**Files:** All handlers
+
+Input validation is minimal — typically just checking if required fields are empty:
+```go
+if input.CaseNumber == "" || input.Title == "" {
+    writeError(w, http.StatusBadRequest, "case_number and title are required")
+}
+```
+
+Missing:
+- Length limits on text fields (could store megabytes in a title field)
+- Status value validation (accepts any string for status fields)
+- Date format validation
+- Case type validation against allowed values
+- SQL-safe string validation (although parameterized queries protect against injection)
+
+### 2.2 No Pagination Defaults on Most List Endpoints
+**File:** `backend/internal/services/case_service.go:57-63`
+
+`CaseService.List` has sane defaults (limit=20, max=100). But other list endpoints (`appointments`, `deadlines`, `notes`, `parties`, `case_events`) have no pagination at all — they return all records for a tenant/case. As data grows, these become performance problems.
+
+### 2.3 Dashboard Page is Entirely Client-Side
+**File:** `frontend/src/app/(app)/dashboard/page.tsx`
+
+The entire dashboard is a `"use client"` component that fetches data via API. This means:
+- No SSR benefit — the page is blank until JS loads and API responds
+- SEO doesn't matter for a SaaS app, but initial load time does
+- The skeleton is nice but adds 200-400ms of perceived latency
+
+For an internal tool this is acceptable, but for a commercial product it should use server components for the initial render.
+
+### 2.4 Frontend Auth Uses `getSession()` Instead of `getUser()`
+**File:** `frontend/src/lib/api.ts:10-12`
+
+```typescript
+const { data: { session } } = await supabase.auth.getSession();
+```
+
+`getSession()` reads from local storage without server verification. If a session is expired or revoked server-side, the frontend will still try to use it until the backend rejects it. The middleware correctly uses `getUser()` (which validates server-side), but the API client does not.
+
+### 2.5 Missing Error Recovery in Frontend
+Throughout the frontend, API errors are handled with basic error states, but there's no:
+- Retry logic for transient failures
+- Token refresh on 401 responses
+- Optimistic UI rollback on mutation failures
+- Offline detection
+
+### 2.6 Missing `Content-Disposition` Header Sanitization
+**File:** `backend/internal/handlers/documents.go:133`
+
+```go
+w.Header().Set("Content-Disposition", fmt.Sprintf(`attachment; filename="%s"`, title))
+```
+
+The `title` (which comes from user input) is inserted directly into the header. A filename containing `"` or newlines could be used for response header injection.
+
+**Fix:** Sanitize the filename — strip or encode special characters.
+
+### 2.7 No Graceful Shutdown
+**File:** `backend/cmd/server/main.go:42`
+
+```go
+http.ListenAndServe(":"+cfg.Port, handler)
+```
+
+No signal handling or graceful shutdown. When the process receives SIGTERM (e.g., during deployment), in-flight requests are dropped, CalDAV sync operations may be interrupted mid-write, and database connections are not cleanly closed.
+
+### 2.8 Database Connection Pool — search_path is Session-Level
+**File:** `backend/internal/db/connection.go:17`
+
+```go
+db.Exec("SET search_path TO kanzlai, public")
+```
+
+`SET search_path` is session-level in PostgreSQL. With connection pooling (`MaxOpenConns: 25`), this SET runs once on the initial connection. If a connection is recycled or a new one opened from the pool, it may not have the kanzlai search_path. This could cause queries to silently hit the wrong schema.
+
+**Fix:** Use `SET LOCAL search_path` in a transaction, or set it at the database/role level, or qualify all table references with the schema name.
+
+### 2.9 go.sum Missing from Dockerfile
+**File:** `backend/Dockerfile:4`
+
+```dockerfile
+COPY go.mod ./
+RUN go mod download
+```
+
+Only `go.mod` is copied, not `go.sum`. This means the build isn't reproducible and doesn't verify checksums. Should be `COPY go.mod go.sum ./`.
+
+### 2.10 German Umlaut Typos Throughout Frontend
+**Files:** Multiple frontend components
+
+German strings use ASCII approximations instead of proper characters:
+- `login/page.tsx`: "Zurueck" instead of "Zurück"
+- `cases/[id]/layout.tsx`: "Anhaengig" instead of "Anhängig"
+- `cases/[id]/fristen/page.tsx`: "Ueberfaellig" instead of "Überfällig"
+- `termine/page.tsx`: "Uberblick" instead of "Überblick"
+
+A German lawyer would notice this immediately. It signals "this was built by a machine, not tested by a human."
+
+### 2.11 Silent Error Swallowing in Event Creation
+**File:** `backend/internal/services/case_service.go:260-266`
+
+```go
+func createEvent(ctx context.Context, db *sqlx.DB, ...) {
+    db.ExecContext(ctx, /* ... */)  // Error completely ignored
+}
+```
+
+Case events (audit trail) silently fail to create. The calling functions don't check the return. This means you could have cases with no events and no way to know why.
+
+### 2.12 Missing Error Boundaries in Frontend
+No React error boundaries are implemented. If any component throws, the entire page crashes with a white screen. For a law firm tool where data integrity matters, this is unacceptable.
+
+### 2.13 No RLS Policies Defined at Database Level
+Multi-tenant isolation relies entirely on `WHERE tenant_id = $X` clauses in Go code. If any query forgets this clause, data leaks across tenants. There are no PostgreSQL RLS policies as a safety net.
+
+**Fix:** Enable RLS on all tenant-scoped tables and create policies tied to `auth.uid()` via `user_tenants`.
+
+---
+
+## 3. Architecture Assessment
+
+### 3.1 What's Good
+
+- **Clean monorepo structure** — `backend/` and `frontend/` are clearly separated. Each has its own Dockerfile. The Makefile provides unified commands.
+- **Go backend is well-organized** — `cmd/server/`, `internal/{auth,config,db,handlers,middleware,models,router,services}` follows Go best practices.
+- **Handler/Service separation** — handlers do HTTP concerns (parse request, write response), services do business logic. This is correct.
+- **Parameterized SQL everywhere** — no string concatenation in queries. All user input goes through `$N` placeholders.
+- **Multi-tenant design** — `tenant_id` on every row, context-based tenant resolution, RLS at the database level.
+- **Smart use of Go 1.22+ routing** — method+path patterns like `GET /api/cases/{id}` eliminate the need for a third-party router.
+- **CalDAV sync is genuinely impressive** — bidirectional sync with conflict resolution, etag tracking, background polling per-tenant. This is a differentiator.
+- **Deadline calculator** — ported from youpc.org with holiday awareness. Legally important and hard to build.
+- **Frontend routing structure** — German URL paths (`/fristen`, `/termine`, `/einstellungen`), nested case detail routes with layout.tsx for shared chrome. Proper use of App Router patterns.
+
+### 3.2 Structural Concerns
+
+- **No database migrations** — the schema was apparently created via SQL scripts run manually. There's a `seed/demo_data.sql` but no migration system. For a production system, this is unsustainable.
+- **No CI/CD pipeline** — no `.github/workflows/`, `.gitea/`, or any CI configuration. Tests run locally but not automatically.
+- **No API versioning** — all routes are at `/api/`. Adding breaking changes will break clients.
+- **Services take raw `*sqlx.DB`** — no transaction support across service boundaries. Creating a case + event is not atomic (if the event insert fails, the case still exists).
+- **Models are just struct definitions** — no validation methods, no constructor functions. Validation is scattered across handlers.
+
+### 3.3 Data Model
+
+Based on the seed data and model files, the schema is reasonable:
+- `tenants`, `user_tenants` (multi-tenancy)
+- `cases`, `parties` (case management)
+- `deadlines`, `appointments` (time management)
+- `documents`, `case_events`, `notes` (supporting data)
+- `proceeding_types`, `deadline_rules`, `holidays` (reference data)
+
+**Missing indexes likely needed:**
+- `deadlines(tenant_id, status, due_date)` — for dashboard queries
+- `appointments(tenant_id, start_at)` — for calendar queries
+- `case_events(case_id, created_at)` — for event feeds
+- `cases(tenant_id, status)` — for filtered lists
+
+**Missing constraints:**
+- No CHECK constraint on status values (cases, deadlines, appointments)
+- No UNIQUE constraint on `case_number` per tenant
+- No foreign key from `notes` to the parent entity (if polymorphic)
+
+---
+
+## 4. Security Assessment
+
+### 4.1 Authentication
+- **JWT validation is correct** — algorithm check (HMAC only), expiry check, sub claim extraction. Using `golang-jwt/v5`.
+- **Supabase Auth on frontend** — proper cookie-based session with server-side verification in middleware.
+- **No refresh token rotation** — the API client uses `getSession()` which may serve stale tokens.
+
+### 4.2 Authorization
+- **Critical: Tenant isolation bypass** (see 1.1)
+- **No role-based access control** — `user_tenants` has a `role` column but it's never checked. Any member can do anything.
+- **No resource-level permissions** — any user in a tenant can delete any case, document, etc.
+
+### 4.3 Input Validation
+- **SQL injection: Protected** — all queries use parameterized placeholders.
+- **XSS: Partially protected** — React auto-escapes, but the API returns raw strings that could contain HTML. The `Content-Disposition` header is vulnerable (see 2.6).
+- **File upload: Partially protected** — `MaxBytesReader` limits to 50MB, but no file type validation (could upload .exe, .html with scripts, etc.).
+- **Rate limiting: AI endpoints only** — the rest of the API has no rate limiting. Login/register go through Supabase (which has its own limits), but all CRUD endpoints are unlimited.
+
+### 4.4 Secrets
+- **No hardcoded secrets** — all via environment variables. Good.
+- **CalDAV credentials in plaintext** — see 1.3.
+- **Supabase service key in backend** — necessary for storage, but this key has full DB access. Should be scoped.
+
+---
+
+## 5. Testing Assessment
+
+### 5.1 Backend Tests (15 files)
+- **Integration test** — sets up real DB connection, creates JWT, tests full HTTP flow. Excellent pattern but requires DATABASE_URL (skips otherwise).
+- **Handler tests** — mock-based unit tests for most handlers. Test JSON parsing, error responses, basic happy paths.
+- **Service tests** — deadline calculator has solid date arithmetic tests. Holiday service tested. CalDAV service tested with mocks. AI service tested with mocked HTTP.
+- **Middleware tests** — rate limiter tested.
+- **Auth tests** — tenant resolver tested.
+
+### 5.2 Frontend Tests (4 files)
+- `api.test.ts` — tests the API client
+- `DeadlineTrafficLights.test.tsx` — component test
+- `CaseOverviewGrid.test.tsx` — component test
+- `LoginPage.test.tsx` — auth page test
+
+### 5.3 What's Missing
+- **No E2E tests** — no Playwright/Cypress. Critical for a law firm app where correctness matters.
+- **No contract tests** — frontend and backend are tested independently. A schema change could break the frontend without any test catching it.
+- **Deadline calculation edge cases** — needs tests for year boundaries, leap years, holidays falling on weekends, multiple consecutive holidays.
+- **Multi-tenant security tests** — no test verifying that User A can't access Tenant B's data. This is the most important test to add.
+- **Frontend test coverage is thin** — 4 tests for ~30 components. The dashboard, all forms, navigation, error states are untested.
+- **No load testing** — unknown how the system behaves under concurrent users.
+
+---
+
+## 6. UX Assessment
+
+### 6.1 What Works
+- **Dashboard is strong** — traffic light deadline indicators, upcoming timeline, case overview, quick actions. A lawyer can see what matters at a glance.
+- **German localization** — UI is in German with proper legal terminology (Akten, Fristen, Termine, Parteien).
+- **Mobile responsive** — sidebar collapses to hamburger menu, layout uses responsive grids.
+- **Loading states** — skeleton screens on dashboard, not just spinners.
+- **Breadcrumbs** — navigation trail on all pages.
+- **Deadline calculator** — unique feature that provides real value for UPC litigation.
+
+### 6.2 What a Lawyer Would Stumble On
+1. **No onboarding flow** — after registration, user has no tenant, no cases. The app shows empty states but doesn't guide the user to create a tenant or import data.
+2. **No search** — there's no global search. A lawyer with 100+ cases needs to find things fast.
+3. **No keyboard shortcuts** — power users (lawyers are keyboard-heavy) have no shortcuts.
+4. **Sidebar mixes languages** — "Akten" (German) vs "AI Analyse" (English). Should be consistent.
+5. **No notifications** — overdue deadlines don't trigger any alert beyond the dashboard color. No email alerts, no push notifications.
+6. **No print view** — lawyers need to print deadline lists, case summaries. No print stylesheet.
+7. **No bulk operations** — can't mark multiple deadlines as complete, can't bulk-assign parties.
+8. **Document upload has no preview** — uploaded PDFs can't be viewed inline.
+9. **AI features require manual trigger** — AI summary and deadline extraction are manual. Should auto-trigger on document upload.
+10. **No activity log per user** — no audit trail of who changed what. Critical for law firm compliance.
+
+---
+
+## 7. Deployment Assessment
+
+### 7.1 Docker Setup
+- **Multi-stage builds** — both Dockerfiles use builder pattern. Good.
+- **Backend is minimal** — Alpine + static binary + ca-certificates. ~15MB image.
+- **Frontend** — Bun for deps/build, Node for runtime (standalone output). Reasonable.
+- **Missing:** go.sum not copied in backend Dockerfile (see 2.9).
+- **Missing:** No docker-compose.yml for local development.
+- **Missing:** No health check in Dockerfile (`HEALTHCHECK` instruction).
+
+### 7.2 Environment Handling
+- **Config validates required vars** — `DATABASE_URL` and `SUPABASE_JWT_SECRET` are checked at startup.
+- **Supabase URL/keys not validated** — if missing, features silently fail or crash at runtime.
+- **No .env.example** — new developers don't know what env vars are needed.
+
+### 7.3 Reliability
+- **No graceful shutdown** (see 2.7)
+- **No readiness/liveness probes** — `/health` exists but only checks DB connectivity. No readiness distinction.
+- **CalDAV sync runs in-process** — if the sync goroutine panics, it takes down the API server.
+- **No structured error recovery** — panics in handlers will crash the process (no recovery middleware).
+
+---
+
+## 8. Competitive Analysis
+
+### 8.1 The Market
+
+German Kanzleisoftware is a mature, crowded market:
+
+| Tool | Type | Price | Key Strength |
+|------|------|-------|-------------|
+| **RA-MICRO** | Desktop + Cloud | ~100-200 EUR/user/mo | Market leader, 30+ years, full beA integration |
+| **ADVOWARE** | Desktop + Cloud | from 20 EUR/mo | Budget-friendly, strong for small firms |
+| **AnNoText** (Wolters Kluwer) | Desktop + Cloud | Custom pricing | Enterprise, AI document analysis, DictNow |
+| **Actaport** | Cloud-native | from 79.80 EUR/mo | Modern UI, Mandantenportal, integrated Office |
+| **Haufe Advolux** | Cloud | Custom | User-friendly, full-featured |
+| **Renostar Legal Cloud** | Cloud | Custom | Browser-based, no installation |
+
+### 8.2 Table-Stakes Features KanzlAI is Missing
+
+These are **mandatory** for any German Kanzleisoftware to be taken seriously:
+
+1. **beA Integration** — since 2022, German lawyers must use the electronic court mailbox (besonderes elektronisches Anwaltspostfach). No Kanzleisoftware sells without it. This is a **massive** implementation effort (KSW-Schnittstelle from BRAK).
+
+2. **RVG Billing (Gebührenrechner)** — automated fee calculation per RVG (Rechtsanwaltsvergütungsgesetz). Every competitor has this built-in. Without it, lawyers can't bill clients.
+
+3. **Document Generation** — templates for Schriftsätze, Klageschriften, Mahnbescheide with auto-populated case data. Usually integrated with Word.
+
+4. **Accounting (FiBu)** — client trust accounts (Fremdgeld), DATEV export, tax-relevant bookkeeping. Legal requirement.
+
+5. **Conflict Check (Kollisionsprüfung)** — check if the firm has a conflict of interest before taking a case. Legally required (§ 43a BRAO).
+
+6. **Dictation System** — voice-to-text for lawyers. RA-MICRO has DictaNet, AnNoText has DictNow.
+
+### 8.3 Where KanzlAI Could Differentiate
+
+Despite the feature gap, KanzlAI has some advantages:
+
+1. **AI-native** — competitors are bolting AI onto 20-year-old software. KanzlAI has Claude API integration from day one. The deadline extraction from PDFs is genuinely useful.
+2. **UPC specialization** — the deadline calculator with UPC Rules of Procedure knowledge is unique. No competitor has deep UPC litigation support.
+3. **CalDAV sync** — bidirectional sync with external calendars is not common in German Kanzleisoftware.
+4. **Modern tech stack** — React + Go + Supabase vs. the .NET/Java/Desktop world of RA-MICRO et al.
+5. **Multi-tenant from day 1** — designed for SaaS, not converted from desktop software.
+
+### 8.4 Strategic Recommendation
+
+**Don't compete head-on with RA-MICRO.** The feature gap is 10+ person-years of work. Instead:
+
+**Option A: UPC Niche Tool** — Pivot back to UPC patent litigation. Build the best deadline calculator, case tracker, and AI-powered brief analysis tool for UPC practitioners. There are ~1000 UPC practitioners in Europe who need specialized tooling that RA-MICRO doesn't provide. Charge 200-500 EUR/mo.
+
+**Option B: AI-First Legal Assistant** — Don't call it "Kanzleimanagement." Position as an AI assistant that reads court documents, extracts deadlines, and syncs to the lawyer's existing Kanzleisoftware via CalDAV/iCal. This sidesteps the feature gap entirely.
+
+**Option C: Full Kanzleisoftware** — If you pursue this, beA integration is the first priority, then RVG billing. Without these two, no German lawyer will switch.
+
+---
+
+## 9. Strengths (What's Good, Keep Doing It)
+
+1. **Architecture is solid** — the Go + Next.js + Supabase stack is well-chosen. Clean separation of concerns.
+2. **SQL is safe** — parameterized queries throughout. No injection vectors.
+3. **Multi-tenant design** — tenant_id scoping with RLS is the right approach.
+4. **CalDAV implementation** — genuinely impressive for an MVP. Bidirectional sync with conflict resolution.
+5. **Deadline calculator** — ported from youpc.org with holiday awareness. Real domain value.
+6. **AI integration** — Claude API with tool use for structured extraction. Clean implementation.
+7. **Dashboard UX** — traffic lights, timeline, quick actions. Lawyers will get this immediately.
+8. **German-first** — proper legal terminology, German date formats, localized UI.
+9. **Test foundation** — 15 backend test files with integration tests. Good starting point.
+10. **Docker builds are lean** — multi-stage, Alpine-based, standalone Next.js output.
+
+---
+
+## 10. Priority Roadmap
+
+### P0 — This Week
+- [ ] Fix tenant isolation bypass in TenantResolver (1.1)
+- [ ] Consolidate tenant resolution logic (1.2)
+- [ ] Encrypt CalDAV credentials at rest (1.3)
+- [ ] Add CORS middleware + security headers (1.4)
+- [ ] Stop leaking internal errors to clients (1.5)
+- [ ] Add mutex to HolidayService cache (1.6)
+- [ ] Fix rate limiter X-Forwarded-For bypass (1.7)
+- [ ] Fix Dockerfile go.sum copy (2.9)
+
+### P1 — Before Demo/Beta
+- [ ] Add input validation (length limits, allowed values) (2.1)
+- [ ] Add pagination to all list endpoints (2.2)
+- [ ] Fix `search_path` connection pool issue (2.8)
+- [ ] Add graceful shutdown with signal handling (2.7)
+- [ ] Sanitize Content-Disposition filename (2.6)
+- [ ] Fix German umlaut typos throughout frontend (2.10)
+- [ ] Handle createEvent errors instead of swallowing (2.11)
+- [ ] Add React error boundaries (2.12)
+- [ ] Implement RLS policies on all tenant-scoped tables (2.13)
+- [ ] Add multi-tenant security tests
+- [ ] Add database migrations system
+- [ ] Add `.env.example` file
+- [ ] Add onboarding flow for new users
+
+### P2 — Next Iteration
+- [ ] Role-based access control (admin/member/readonly)
+- [ ] Global search
+- [ ] Email notifications for overdue deadlines
+- [ ] Audit trail / activity log per user
+- [ ] Auto-trigger AI extraction on document upload
+- [ ] Print-friendly views
+- [ ] E2E tests with Playwright
+- [ ] CI/CD pipeline
+
+### P3 — Strategic
+- [ ] Decide market positioning (UPC niche vs. AI assistant vs. full Kanzleisoftware)
+- [ ] If Kanzleisoftware: begin beA integration research
+- [ ] If Kanzleisoftware: RVG Gebührenrechner
+- [ ] If UPC niche: integrate lex-research case law database
+
+---
+
+*This audit was conducted by reading every source file in the repository, running all tests, analyzing the database schema via seed data, and comparing against established German Kanzleisoftware competitors.*

backend/internal/auth/context.go

@@ -11,6 +11,7 @@ type contextKey string
 const (
 	userIDKey   contextKey = "user_id"
 	tenantIDKey contextKey = "tenant_id"
+	userRoleKey contextKey = "user_role"
 )
 
 func ContextWithUserID(ctx context.Context, userID uuid.UUID) context.Context {
@@ -30,3 +31,12 @@ func TenantFromContext(ctx context.Context) (uuid.UUID, bool) {
 	id, ok := ctx.Value(tenantIDKey).(uuid.UUID)
 	return id, ok
 }
+
+func ContextWithUserRole(ctx context.Context, role string) context.Context {
+	return context.WithValue(ctx, userRoleKey, role)
+}
+
+func UserRoleFromContext(ctx context.Context) string {
+	role, _ := ctx.Value(userRoleKey).(string)
+	return role
+}

backend/internal/auth/middleware.go

@@ -36,15 +36,19 @@ func (m *Middleware) RequireAuth(next http.Handler) http.Handler {
 
 		ctx := ContextWithUserID(r.Context(), userID)
 
-		// Resolve tenant from user_tenants
+		// Resolve tenant and role from user_tenants
-		var tenantID uuid.UUID
+		var membership struct {
-		err = m.db.GetContext(r.Context(), &tenantID,
+			TenantID uuid.UUID `db:"tenant_id"`
-			"SELECT tenant_id FROM user_tenants WHERE user_id = $1 LIMIT 1", userID)
+			Role     string    `db:"role"`
+		}
+		err = m.db.GetContext(r.Context(), &membership,
+			"SELECT tenant_id, role FROM user_tenants WHERE user_id = $1 LIMIT 1", userID)
 		if err != nil {
 			http.Error(w, "no tenant found for user", http.StatusForbidden)
 			return
 		}
-		ctx = ContextWithTenantID(ctx, tenantID)
+		ctx = ContextWithTenantID(ctx, membership.TenantID)
+		ctx = ContextWithUserRole(ctx, membership.Role)
 
 		next.ServeHTTP(w, r.WithContext(ctx))
 	})

backend/internal/auth/permissions.go

@@ -0,0 +1,213 @@
+package auth
+
+import (
+	"context"
+	"net/http"
+
+	"github.com/google/uuid"
+	"github.com/jmoiron/sqlx"
+)
+
+// Valid roles ordered by privilege level (highest first).
+var ValidRoles = []string{"owner", "partner", "associate", "paralegal", "secretary"}
+
+// IsValidRole checks if a role string is one of the defined roles.
+func IsValidRole(role string) bool {
+	for _, r := range ValidRoles {
+		if r == role {
+			return true
+		}
+	}
+	return false
+}
+
+// Permission represents an action that can be checked against roles.
+type Permission int
+
+const (
+	PermManageTeam Permission = iota
+	PermManageBilling
+	PermCreateCase
+	PermEditAllCases
+	PermEditAssignedCase
+	PermViewAllCases
+	PermManageDeadlines
+	PermManageAppointments
+	PermUploadDocuments
+	PermDeleteDocuments
+	PermDeleteOwnDocuments
+	PermViewAuditLog
+	PermManageSettings
+	PermAIExtraction
+)
+
+// rolePermissions maps each role to its set of permissions.
+var rolePermissions = map[string]map[Permission]bool{
+	"owner": {
+		PermManageTeam:         true,
+		PermManageBilling:      true,
+		PermCreateCase:         true,
+		PermEditAllCases:       true,
+		PermEditAssignedCase:   true,
+		PermViewAllCases:       true,
+		PermManageDeadlines:    true,
+		PermManageAppointments: true,
+		PermUploadDocuments:    true,
+		PermDeleteDocuments:    true,
+		PermDeleteOwnDocuments: true,
+		PermViewAuditLog:       true,
+		PermManageSettings:     true,
+		PermAIExtraction:       true,
+	},
+	"partner": {
+		PermManageTeam:         true,
+		PermManageBilling:      true,
+		PermCreateCase:         true,
+		PermEditAllCases:       true,
+		PermEditAssignedCase:   true,
+		PermViewAllCases:       true,
+		PermManageDeadlines:    true,
+		PermManageAppointments: true,
+		PermUploadDocuments:    true,
+		PermDeleteDocuments:    true,
+		PermDeleteOwnDocuments: true,
+		PermViewAuditLog:       true,
+		PermManageSettings:     true,
+		PermAIExtraction:       true,
+	},
+	"associate": {
+		PermCreateCase:         true,
+		PermEditAssignedCase:   true,
+		PermViewAllCases:       true,
+		PermManageDeadlines:    true,
+		PermManageAppointments: true,
+		PermUploadDocuments:    true,
+		PermDeleteOwnDocuments: true,
+		PermAIExtraction:       true,
+	},
+	"paralegal": {
+		PermEditAssignedCase:   true,
+		PermViewAllCases:       true,
+		PermManageDeadlines:    true,
+		PermManageAppointments: true,
+		PermUploadDocuments:    true,
+	},
+	"secretary": {
+		PermViewAllCases:       true,
+		PermManageAppointments: true,
+		PermUploadDocuments:    true,
+	},
+}
+
+// HasPermission checks if the given role has the specified permission.
+func HasPermission(role string, perm Permission) bool {
+	perms, ok := rolePermissions[role]
+	if !ok {
+		return false
+	}
+	return perms[perm]
+}
+
+// RequirePermission returns middleware that checks if the user's role has the given permission.
+func RequirePermission(perm Permission) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			role := UserRoleFromContext(r.Context())
+			if role == "" || !HasPermission(role, perm) {
+				writeJSONError(w, "insufficient permissions", http.StatusForbidden)
+				return
+			}
+			next.ServeHTTP(w, r)
+		})
+	}
+}
+
+// RequireRole returns middleware that checks if the user has one of the specified roles.
+func RequireRole(roles ...string) func(http.Handler) http.Handler {
+	allowed := make(map[string]bool, len(roles))
+	for _, r := range roles {
+		allowed[r] = true
+	}
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			role := UserRoleFromContext(r.Context())
+			if !allowed[role] {
+				writeJSONError(w, "insufficient permissions", http.StatusForbidden)
+				return
+			}
+			next.ServeHTTP(w, r)
+		})
+	}
+}
+
+// IsAssignedToCase checks if a user is assigned to a specific case.
+func IsAssignedToCase(ctx context.Context, db *sqlx.DB, userID, caseID uuid.UUID) (bool, error) {
+	var exists bool
+	err := db.GetContext(ctx, &exists,
+		`SELECT EXISTS(SELECT 1 FROM case_assignments WHERE user_id = $1 AND case_id = $2)`,
+		userID, caseID)
+	return exists, err
+}
+
+// CanEditCase checks if a user can edit a specific case based on role and assignment.
+func CanEditCase(ctx context.Context, db *sqlx.DB, userID, caseID uuid.UUID, role string) (bool, error) {
+	// Owner and partner can edit all cases
+	if HasPermission(role, PermEditAllCases) {
+		return true, nil
+	}
+	// Others need to be assigned
+	if !HasPermission(role, PermEditAssignedCase) {
+		return false, nil
+	}
+	return IsAssignedToCase(ctx, db, userID, caseID)
+}
+
+// CanDeleteDocument checks if a user can delete a specific document.
+func CanDeleteDocument(role string, docUploaderID, userID uuid.UUID) bool {
+	if HasPermission(role, PermDeleteDocuments) {
+		return true
+	}
+	if HasPermission(role, PermDeleteOwnDocuments) {
+		return docUploaderID == userID
+	}
+	return false
+}
+
+// permissionNames maps Permission constants to their string names for frontend use.
+var permissionNames = map[Permission]string{
+	PermManageTeam:         "manage_team",
+	PermManageBilling:      "manage_billing",
+	PermCreateCase:         "create_case",
+	PermEditAllCases:       "edit_all_cases",
+	PermEditAssignedCase:   "edit_assigned_case",
+	PermViewAllCases:       "view_all_cases",
+	PermManageDeadlines:    "manage_deadlines",
+	PermManageAppointments: "manage_appointments",
+	PermUploadDocuments:    "upload_documents",
+	PermDeleteDocuments:    "delete_documents",
+	PermDeleteOwnDocuments: "delete_own_documents",
+	PermViewAuditLog:       "view_audit_log",
+	PermManageSettings:     "manage_settings",
+	PermAIExtraction:       "ai_extraction",
+}
+
+// GetRolePermissions returns a list of permission name strings for the given role.
+func GetRolePermissions(role string) []string {
+	perms, ok := rolePermissions[role]
+	if !ok {
+		return nil
+	}
+	var names []string
+	for p := range perms {
+		if name, ok := permissionNames[p]; ok {
+			names = append(names, name)
+		}
+	}
+	return names
+}
+
+func writeJSONError(w http.ResponseWriter, msg string, status int) {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(status)
+	w.Write([]byte(`{"error":"` + msg + `"}`))
+}

backend/internal/auth/tenant_resolver.go

@@ -12,6 +12,7 @@ import (
 // Defined as an interface to avoid circular dependency with services.
 type TenantLookup interface {
 	FirstTenantForUser(ctx context.Context, userID uuid.UUID) (*uuid.UUID, error)
+	GetUserRole(ctx context.Context, userID, tenantID uuid.UUID) (string, error)
 }
 
 // TenantResolver is middleware that resolves the tenant from X-Tenant-ID header
@@ -40,9 +41,21 @@ func (tr *TenantResolver) Resolve(next http.Handler) http.Handler {
 				http.Error(w, fmt.Sprintf("invalid X-Tenant-ID: %v", err), http.StatusBadRequest)
 				return
 			}
+			// Verify user has access and get their role
+			role, err := tr.lookup.GetUserRole(r.Context(), userID, parsed)
+			if err != nil {
+				http.Error(w, "error checking tenant access", http.StatusInternalServerError)
+				return
+			}
+			if role == "" {
+				http.Error(w, "no access to this tenant", http.StatusForbidden)
+				return
+			}
 			tenantID = parsed
+			// Override the role from middleware with the correct one for this tenant
+			r = r.WithContext(ContextWithUserRole(r.Context(), role))
 		} else {
-			// Default to user's first tenant
+			// Default to user's first tenant (role already set by middleware)
 			first, err := tr.lookup.FirstTenantForUser(r.Context(), userID)
 			if err != nil {
 				http.Error(w, fmt.Sprintf("resolving tenant: %v", err), http.StatusInternalServerError)

backend/internal/auth/tenant_resolver_test.go

@@ -11,6 +11,7 @@ import (
 
 type mockTenantLookup struct {
 	tenantID *uuid.UUID
+	role     string
 	err      error
 }
 
@@ -18,9 +19,16 @@ func (m *mockTenantLookup) FirstTenantForUser(ctx context.Context, userID uuid.U
 	return m.tenantID, m.err
 }
 
+func (m *mockTenantLookup) GetUserRole(ctx context.Context, userID, tenantID uuid.UUID) (string, error) {
+	if m.role != "" {
+		return m.role, m.err
+	}
+	return "associate", m.err
+}
+
 func TestTenantResolver_FromHeader(t *testing.T) {
 	tenantID := uuid.New()
-	tr := NewTenantResolver(&mockTenantLookup{})
+	tr := NewTenantResolver(&mockTenantLookup{role: "partner"})
 
 	var gotTenantID uuid.UUID
 	next := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {

backend/internal/handlers/case_assignments.go

@@ -0,0 +1,119 @@
+package handlers
+
+import (
+	"encoding/json"
+	"net/http"
+
+	"github.com/google/uuid"
+
+	"mgit.msbls.de/m/KanzlAI-mGMT/internal/auth"
+	"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
+)
+
+type CaseAssignmentHandler struct {
+	svc *services.CaseAssignmentService
+}
+
+func NewCaseAssignmentHandler(svc *services.CaseAssignmentService) *CaseAssignmentHandler {
+	return &CaseAssignmentHandler{svc: svc}
+}
+
+// List handles GET /api/cases/{id}/assignments
+func (h *CaseAssignmentHandler) List(w http.ResponseWriter, r *http.Request) {
+	tenantID, ok := auth.TenantFromContext(r.Context())
+	if !ok {
+		writeError(w, http.StatusForbidden, "missing tenant")
+		return
+	}
+
+	caseID, err := uuid.Parse(r.PathValue("id"))
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "invalid case ID")
+		return
+	}
+
+	assignments, err := h.svc.ListByCase(r.Context(), tenantID, caseID)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]any{
+		"assignments": assignments,
+		"total":       len(assignments),
+	})
+}
+
+// Assign handles POST /api/cases/{id}/assignments
+func (h *CaseAssignmentHandler) Assign(w http.ResponseWriter, r *http.Request) {
+	tenantID, ok := auth.TenantFromContext(r.Context())
+	if !ok {
+		writeError(w, http.StatusForbidden, "missing tenant")
+		return
+	}
+
+	caseID, err := uuid.Parse(r.PathValue("id"))
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "invalid case ID")
+		return
+	}
+
+	var req struct {
+		UserID string `json:"user_id"`
+		Role   string `json:"role"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		writeError(w, http.StatusBadRequest, "invalid request body")
+		return
+	}
+
+	userID, err := uuid.Parse(req.UserID)
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "invalid user_id")
+		return
+	}
+
+	if req.Role == "" {
+		req.Role = "team"
+	}
+	if req.Role != "lead" && req.Role != "team" && req.Role != "viewer" {
+		writeError(w, http.StatusBadRequest, "role must be lead, team, or viewer")
+		return
+	}
+
+	assignment, err := h.svc.Assign(r.Context(), tenantID, caseID, userID, req.Role)
+	if err != nil {
+		writeError(w, http.StatusBadRequest, err.Error())
+		return
+	}
+
+	writeJSON(w, http.StatusCreated, assignment)
+}
+
+// Unassign handles DELETE /api/cases/{id}/assignments/{uid}
+func (h *CaseAssignmentHandler) Unassign(w http.ResponseWriter, r *http.Request) {
+	tenantID, ok := auth.TenantFromContext(r.Context())
+	if !ok {
+		writeError(w, http.StatusForbidden, "missing tenant")
+		return
+	}
+
+	caseID, err := uuid.Parse(r.PathValue("id"))
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "invalid case ID")
+		return
+	}
+
+	userID, err := uuid.Parse(r.PathValue("uid"))
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "invalid user ID")
+		return
+	}
+
+	if err := h.svc.Unassign(r.Context(), tenantID, caseID, userID); err != nil {
+		writeError(w, http.StatusNotFound, err.Error())
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]string{"status": "removed"})
+}

backend/internal/handlers/documents.go

@@ -167,6 +167,7 @@ func (h *DocumentHandler) Delete(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	userID, _ := auth.UserFromContext(r.Context())
+	role := auth.UserRoleFromContext(r.Context())
 
 	docID, err := uuid.Parse(r.PathValue("docId"))
 	if err != nil {
@@ -174,6 +175,26 @@ func (h *DocumentHandler) Delete(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// Check permission: owner/partner can delete any, associate can delete own
+	doc, err := h.svc.GetByID(r.Context(), tenantID, docID)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+	if doc == nil {
+		writeError(w, http.StatusNotFound, "document not found")
+		return
+	}
+
+	uploaderID := uuid.Nil
+	if doc.UploadedBy != nil {
+		uploaderID = *doc.UploadedBy
+	}
+	if !auth.CanDeleteDocument(role, uploaderID, userID) {
+		writeError(w, http.StatusForbidden, "insufficient permissions to delete this document")
+		return
+	}
+
 	if err := h.svc.Delete(r.Context(), tenantID, docID, userID); err != nil {
 		writeError(w, http.StatusNotFound, "document not found")
 		return

backend/internal/handlers/tenant_handler.go

@@ -117,14 +117,14 @@ func (h *TenantHandler) InviteUser(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// Only owners and admins can invite
+	// Only owners and partners can invite
 	role, err := h.svc.GetUserRole(r.Context(), userID, tenantID)
 	if err != nil {
 		jsonError(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
-	if role != "owner" && role != "admin" {
+	if role != "owner" && role != "partner" {
-		jsonError(w, "only owners and admins can invite users", http.StatusForbidden)
+		jsonError(w, "only owners and partners can invite users", http.StatusForbidden)
 		return
 	}
 
@@ -141,10 +141,15 @@ func (h *TenantHandler) InviteUser(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	if req.Role == "" {
-		req.Role = "member"
+		req.Role = "associate"
 	}
-	if req.Role != "member" && req.Role != "admin" {
+	if !auth.IsValidRole(req.Role) {
-		jsonError(w, "role must be member or admin", http.StatusBadRequest)
+		jsonError(w, "invalid role", http.StatusBadRequest)
+		return
+	}
+	// Non-owners cannot invite as owner
+	if role != "owner" && req.Role == "owner" {
+		jsonError(w, "only owners can invite as owner", http.StatusForbidden)
 		return
 	}
 
@@ -177,13 +182,13 @@ func (h *TenantHandler) RemoveMember(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// Only owners and admins can remove members (or user removing themselves)
+	// Only owners and partners can remove members (or user removing themselves)
 	role, err := h.svc.GetUserRole(r.Context(), userID, tenantID)
 	if err != nil {
 		jsonError(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
-	if role != "owner" && role != "admin" && userID != memberID {
+	if role != "owner" && role != "partner" && userID != memberID {
 		jsonError(w, "insufficient permissions", http.StatusForbidden)
 		return
 	}
@@ -210,14 +215,14 @@ func (h *TenantHandler) UpdateSettings(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// Only owners and admins can update settings
+	// Only owners and partners can update settings
 	role, err := h.svc.GetUserRole(r.Context(), userID, tenantID)
 	if err != nil {
 		jsonError(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
-	if role != "owner" && role != "admin" {
+	if role != "owner" && role != "partner" {
-		jsonError(w, "only owners and admins can update settings", http.StatusForbidden)
+		jsonError(w, "only owners and partners can update settings", http.StatusForbidden)
 		return
 	}
 
@@ -270,6 +275,85 @@ func (h *TenantHandler) ListMembers(w http.ResponseWriter, r *http.Request) {
 	jsonResponse(w, members, http.StatusOK)
 }
 
+// UpdateMemberRole handles PUT /api/tenants/{id}/members/{uid}/role
+func (h *TenantHandler) UpdateMemberRole(w http.ResponseWriter, r *http.Request) {
+	userID, ok := auth.UserFromContext(r.Context())
+	if !ok {
+		http.Error(w, "unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	tenantID, err := uuid.Parse(r.PathValue("id"))
+	if err != nil {
+		jsonError(w, "invalid tenant ID", http.StatusBadRequest)
+		return
+	}
+
+	memberID, err := uuid.Parse(r.PathValue("uid"))
+	if err != nil {
+		jsonError(w, "invalid member ID", http.StatusBadRequest)
+		return
+	}
+
+	// Only owners and partners can change roles
+	role, err := h.svc.GetUserRole(r.Context(), userID, tenantID)
+	if err != nil {
+		jsonError(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	if role != "owner" && role != "partner" {
+		jsonError(w, "only owners and partners can change roles", http.StatusForbidden)
+		return
+	}
+
+	var req struct {
+		Role string `json:"role"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, "invalid request body", http.StatusBadRequest)
+		return
+	}
+	if !auth.IsValidRole(req.Role) {
+		jsonError(w, "invalid role", http.StatusBadRequest)
+		return
+	}
+
+	// Non-owners cannot promote to owner
+	if role != "owner" && req.Role == "owner" {
+		jsonError(w, "only owners can promote to owner", http.StatusForbidden)
+		return
+	}
+
+	if err := h.svc.UpdateMemberRole(r.Context(), tenantID, memberID, req.Role); err != nil {
+		jsonError(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	jsonResponse(w, map[string]string{"status": "updated"}, http.StatusOK)
+}
+
+// GetMe handles GET /api/me — returns the current user's ID and role in the active tenant.
+func (h *TenantHandler) GetMe(w http.ResponseWriter, r *http.Request) {
+	userID, ok := auth.UserFromContext(r.Context())
+	if !ok {
+		http.Error(w, "unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	role := auth.UserRoleFromContext(r.Context())
+	tenantID, _ := auth.TenantFromContext(r.Context())
+
+	// Get user's permissions for frontend UI
+	perms := auth.GetRolePermissions(role)
+
+	jsonResponse(w, map[string]any{
+		"user_id":     userID,
+		"tenant_id":   tenantID,
+		"role":        role,
+		"permissions": perms,
+	}, http.StatusOK)
+}
+
 func jsonResponse(w http.ResponseWriter, data interface{}, status int) {
 	w.Header().Set("Content-Type", "application/json")
 	w.WriteHeader(status)

backend/internal/models/case_assignment.go

@@ -0,0 +1,15 @@
+package models
+
+import (
+	"time"
+
+	"github.com/google/uuid"
+)
+
+type CaseAssignment struct {
+	ID         uuid.UUID `db:"id" json:"id"`
+	CaseID     uuid.UUID `db:"case_id" json:"case_id"`
+	UserID     uuid.UUID `db:"user_id" json:"user_id"`
+	Role       string    `db:"role" json:"role"`
+	AssignedAt time.Time `db:"assigned_at" json:"assigned_at"`
+}

backend/internal/router/router.go

@@ -29,6 +29,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 	calculator := services.NewDeadlineCalculator(holidaySvc)
 	storageCli := services.NewStorageClient(cfg.SupabaseURL, cfg.SupabaseServiceKey)
 	documentSvc := services.NewDocumentService(db, storageCli)
+	assignmentSvc := services.NewCaseAssignmentService(db)
 
 	// AI service (optional — only if API key is configured)
 	var aiH *handlers.AIHandler
@@ -55,6 +56,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 	noteH := handlers.NewNoteHandler(noteSvc)
 	eventH := handlers.NewCaseEventHandler(db)
 	docH := handlers.NewDocumentHandler(documentSvc)
+	assignmentH := handlers.NewCaseAssignmentHandler(assignmentSvc)
 
 	// Public routes
 	mux.HandleFunc("GET /health", handleHealth(db))
@@ -70,77 +72,100 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 	api.HandleFunc("POST /api/tenants/{id}/invite", tenantH.InviteUser)
 	api.HandleFunc("DELETE /api/tenants/{id}/members/{uid}", tenantH.RemoveMember)
 	api.HandleFunc("GET /api/tenants/{id}/members", tenantH.ListMembers)
+	api.HandleFunc("PUT /api/tenants/{id}/members/{uid}/role", tenantH.UpdateMemberRole)
+
+	// Permission-wrapping helper: wraps a HandlerFunc with a permission check
+	perm := func(p auth.Permission, fn http.HandlerFunc) http.HandlerFunc {
+		return func(w http.ResponseWriter, r *http.Request) {
+			role := auth.UserRoleFromContext(r.Context())
+			if !auth.HasPermission(role, p) {
+				w.Header().Set("Content-Type", "application/json")
+				w.WriteHeader(http.StatusForbidden)
+				w.Write([]byte(`{"error":"insufficient permissions"}`))
+				return
+			}
+			fn(w, r)
+		}
+	}
 
 	// Tenant-scoped routes (require tenant context)
 	scoped := http.NewServeMux()
 
-	// Cases
+	// Current user info (role, permissions) — all authenticated users
-	scoped.HandleFunc("GET /api/cases", caseH.List)
+	scoped.HandleFunc("GET /api/me", tenantH.GetMe)
-	scoped.HandleFunc("POST /api/cases", caseH.Create)
-	scoped.HandleFunc("GET /api/cases/{id}", caseH.Get)
-	scoped.HandleFunc("PUT /api/cases/{id}", caseH.Update)
-	scoped.HandleFunc("DELETE /api/cases/{id}", caseH.Delete)
 
-	// Parties
+	// Cases — all can view, create needs PermCreateCase, archive needs PermCreateCase
+	scoped.HandleFunc("GET /api/cases", caseH.List)
+	scoped.HandleFunc("POST /api/cases", perm(auth.PermCreateCase, caseH.Create))
+	scoped.HandleFunc("GET /api/cases/{id}", caseH.Get)
+	scoped.HandleFunc("PUT /api/cases/{id}", caseH.Update)    // case-level access checked in handler
+	scoped.HandleFunc("DELETE /api/cases/{id}", perm(auth.PermCreateCase, caseH.Delete))
+
+	// Parties — same access as case editing
 	scoped.HandleFunc("GET /api/cases/{id}/parties", partyH.List)
 	scoped.HandleFunc("POST /api/cases/{id}/parties", partyH.Create)
 	scoped.HandleFunc("PUT /api/parties/{partyId}", partyH.Update)
 	scoped.HandleFunc("DELETE /api/parties/{partyId}", partyH.Delete)
 
-	// Deadlines
+	// Deadlines — manage needs PermManageDeadlines, view is open
 	scoped.HandleFunc("GET /api/deadlines/{deadlineID}", deadlineH.Get)
 	scoped.HandleFunc("GET /api/deadlines", deadlineH.ListAll)
 	scoped.HandleFunc("GET /api/cases/{caseID}/deadlines", deadlineH.ListForCase)
-	scoped.HandleFunc("POST /api/cases/{caseID}/deadlines", deadlineH.Create)
+	scoped.HandleFunc("POST /api/cases/{caseID}/deadlines", perm(auth.PermManageDeadlines, deadlineH.Create))
-	scoped.HandleFunc("PUT /api/deadlines/{deadlineID}", deadlineH.Update)
+	scoped.HandleFunc("PUT /api/deadlines/{deadlineID}", perm(auth.PermManageDeadlines, deadlineH.Update))
-	scoped.HandleFunc("PATCH /api/deadlines/{deadlineID}/complete", deadlineH.Complete)
+	scoped.HandleFunc("PATCH /api/deadlines/{deadlineID}/complete", perm(auth.PermManageDeadlines, deadlineH.Complete))
-	scoped.HandleFunc("DELETE /api/deadlines/{deadlineID}", deadlineH.Delete)
+	scoped.HandleFunc("DELETE /api/deadlines/{deadlineID}", perm(auth.PermManageDeadlines, deadlineH.Delete))
 
-	// Deadline rules (reference data)
+	// Deadline rules (reference data) — all can read
 	scoped.HandleFunc("GET /api/deadline-rules", ruleH.List)
 	scoped.HandleFunc("GET /api/deadline-rules/{type}", ruleH.GetRuleTree)
 	scoped.HandleFunc("GET /api/proceeding-types", ruleH.ListProceedingTypes)
 
-	// Deadline calculator
+	// Deadline calculator — all can use
 	scoped.HandleFunc("POST /api/deadlines/calculate", calcH.Calculate)
 
-	// Appointments
+	// Appointments — all can manage (PermManageAppointments granted to all)
 	scoped.HandleFunc("GET /api/appointments/{id}", apptH.Get)
 	scoped.HandleFunc("GET /api/appointments", apptH.List)
-	scoped.HandleFunc("POST /api/appointments", apptH.Create)
+	scoped.HandleFunc("POST /api/appointments", perm(auth.PermManageAppointments, apptH.Create))
-	scoped.HandleFunc("PUT /api/appointments/{id}", apptH.Update)
+	scoped.HandleFunc("PUT /api/appointments/{id}", perm(auth.PermManageAppointments, apptH.Update))
-	scoped.HandleFunc("DELETE /api/appointments/{id}", apptH.Delete)
+	scoped.HandleFunc("DELETE /api/appointments/{id}", perm(auth.PermManageAppointments, apptH.Delete))
 
-	// Case events
+	// Case assignments — manage team required for assign/unassign
+	scoped.HandleFunc("GET /api/cases/{id}/assignments", assignmentH.List)
+	scoped.HandleFunc("POST /api/cases/{id}/assignments", perm(auth.PermManageTeam, assignmentH.Assign))
+	scoped.HandleFunc("DELETE /api/cases/{id}/assignments/{uid}", perm(auth.PermManageTeam, assignmentH.Unassign))
+
+	// Case events — all can view
 	scoped.HandleFunc("GET /api/case-events/{id}", eventH.Get)
 
-	// Notes
+	// Notes — all can manage
 	scoped.HandleFunc("GET /api/notes", noteH.List)
 	scoped.HandleFunc("POST /api/notes", noteH.Create)
 	scoped.HandleFunc("PUT /api/notes/{id}", noteH.Update)
 	scoped.HandleFunc("DELETE /api/notes/{id}", noteH.Delete)
 
-	// Dashboard
+	// Dashboard — all can view
 	scoped.HandleFunc("GET /api/dashboard", dashboardH.Get)
 
-	// Documents
+	// Documents — all can upload, delete checked in handler (own vs all)
 	scoped.HandleFunc("GET /api/cases/{id}/documents", docH.ListByCase)
-	scoped.HandleFunc("POST /api/cases/{id}/documents", docH.Upload)
+	scoped.HandleFunc("POST /api/cases/{id}/documents", perm(auth.PermUploadDocuments, docH.Upload))
 	scoped.HandleFunc("GET /api/documents/{docId}", docH.Download)
 	scoped.HandleFunc("GET /api/documents/{docId}/meta", docH.GetMeta)
-	scoped.HandleFunc("DELETE /api/documents/{docId}", docH.Delete)
+	scoped.HandleFunc("DELETE /api/documents/{docId}", docH.Delete) // permission check inside handler
 
 	// AI endpoints (rate limited: 5 req/min burst 10 per IP)
 	if aiH != nil {
 		aiLimiter := middleware.NewTokenBucket(5.0/60.0, 10)
-		scoped.HandleFunc("POST /api/ai/extract-deadlines", aiLimiter.LimitFunc(aiH.ExtractDeadlines))
+		scoped.HandleFunc("POST /api/ai/extract-deadlines", perm(auth.PermAIExtraction, aiLimiter.LimitFunc(aiH.ExtractDeadlines)))
-		scoped.HandleFunc("POST /api/ai/summarize-case", aiLimiter.LimitFunc(aiH.SummarizeCase))
+		scoped.HandleFunc("POST /api/ai/summarize-case", perm(auth.PermAIExtraction, aiLimiter.LimitFunc(aiH.SummarizeCase)))
 	}
 
-	// CalDAV sync endpoints
+	// CalDAV sync endpoints — settings permission required
 	if calDAVSvc != nil {
 		calDAVH := handlers.NewCalDAVHandler(calDAVSvc)
-		scoped.HandleFunc("POST /api/caldav/sync", calDAVH.TriggerSync)
+		scoped.HandleFunc("POST /api/caldav/sync", perm(auth.PermManageSettings, calDAVH.TriggerSync))
 		scoped.HandleFunc("GET /api/caldav/status", calDAVH.GetStatus)
 	}
 

backend/internal/services/case_assignment_service.go

@@ -0,0 +1,92 @@
+package services
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/google/uuid"
+	"github.com/jmoiron/sqlx"
+
+	"mgit.msbls.de/m/KanzlAI-mGMT/internal/models"
+)
+
+type CaseAssignmentService struct {
+	db *sqlx.DB
+}
+
+func NewCaseAssignmentService(db *sqlx.DB) *CaseAssignmentService {
+	return &CaseAssignmentService{db: db}
+}
+
+// ListByCase returns all assignments for a case.
+func (s *CaseAssignmentService) ListByCase(ctx context.Context, tenantID, caseID uuid.UUID) ([]models.CaseAssignment, error) {
+	var assignments []models.CaseAssignment
+	err := s.db.SelectContext(ctx, &assignments,
+		`SELECT ca.id, ca.case_id, ca.user_id, ca.role, ca.assigned_at
+		 FROM case_assignments ca
+		 JOIN cases c ON c.id = ca.case_id
+		 WHERE ca.case_id = $1 AND c.tenant_id = $2
+		 ORDER BY ca.assigned_at`,
+		caseID, tenantID)
+	if err != nil {
+		return nil, fmt.Errorf("list case assignments: %w", err)
+	}
+	return assignments, nil
+}
+
+// Assign adds a user to a case with the given role.
+func (s *CaseAssignmentService) Assign(ctx context.Context, tenantID, caseID, userID uuid.UUID, role string) (*models.CaseAssignment, error) {
+	// Verify user is a member of this tenant
+	var memberExists bool
+	err := s.db.GetContext(ctx, &memberExists,
+		`SELECT EXISTS(SELECT 1 FROM user_tenants WHERE user_id = $1 AND tenant_id = $2)`,
+		userID, tenantID)
+	if err != nil {
+		return nil, fmt.Errorf("check membership: %w", err)
+	}
+	if !memberExists {
+		return nil, fmt.Errorf("user is not a member of this tenant")
+	}
+
+	// Verify case belongs to tenant
+	var caseExists bool
+	err = s.db.GetContext(ctx, &caseExists,
+		`SELECT EXISTS(SELECT 1 FROM cases WHERE id = $1 AND tenant_id = $2)`,
+		caseID, tenantID)
+	if err != nil {
+		return nil, fmt.Errorf("check case: %w", err)
+	}
+	if !caseExists {
+		return nil, fmt.Errorf("case not found")
+	}
+
+	var assignment models.CaseAssignment
+	err = s.db.QueryRowxContext(ctx,
+		`INSERT INTO case_assignments (case_id, user_id, role)
+		 VALUES ($1, $2, $3)
+		 ON CONFLICT (case_id, user_id) DO UPDATE SET role = EXCLUDED.role
+		 RETURNING id, case_id, user_id, role, assigned_at`,
+		caseID, userID, role,
+	).StructScan(&assignment)
+	if err != nil {
+		return nil, fmt.Errorf("assign user to case: %w", err)
+	}
+	return &assignment, nil
+}
+
+// Unassign removes a user from a case.
+func (s *CaseAssignmentService) Unassign(ctx context.Context, tenantID, caseID, userID uuid.UUID) error {
+	result, err := s.db.ExecContext(ctx,
+		`DELETE FROM case_assignments ca
+		 USING cases c
+		 WHERE ca.case_id = c.id AND ca.case_id = $1 AND ca.user_id = $2 AND c.tenant_id = $3`,
+		caseID, userID, tenantID)
+	if err != nil {
+		return fmt.Errorf("unassign: %w", err)
+	}
+	rows, _ := result.RowsAffected()
+	if rows == 0 {
+		return fmt.Errorf("assignment not found")
+	}
+	return nil
+}

backend/internal/services/tenant_service.go

@@ -189,6 +189,40 @@ func (s *TenantService) UpdateSettings(ctx context.Context, tenantID uuid.UUID,
 	return &tenant, nil
 }
 
+// UpdateMemberRole changes a member's role in a tenant.
+func (s *TenantService) UpdateMemberRole(ctx context.Context, tenantID, userID uuid.UUID, newRole string) error {
+	// Get current role
+	currentRole, err := s.GetUserRole(ctx, userID, tenantID)
+	if err != nil {
+		return fmt.Errorf("get current role: %w", err)
+	}
+	if currentRole == "" {
+		return fmt.Errorf("user is not a member of this tenant")
+	}
+
+	// If demoting the last owner, block it
+	if currentRole == "owner" && newRole != "owner" {
+		var ownerCount int
+		err := s.db.GetContext(ctx, &ownerCount,
+			`SELECT COUNT(*) FROM user_tenants WHERE tenant_id = $1 AND role = 'owner'`,
+			tenantID)
+		if err != nil {
+			return fmt.Errorf("count owners: %w", err)
+		}
+		if ownerCount <= 1 {
+			return fmt.Errorf("cannot demote the last owner")
+		}
+	}
+
+	_, err = s.db.ExecContext(ctx,
+		`UPDATE user_tenants SET role = $1 WHERE user_id = $2 AND tenant_id = $3`,
+		newRole, userID, tenantID)
+	if err != nil {
+		return fmt.Errorf("update role: %w", err)
+	}
+	return nil
+}
+
 // RemoveMember removes a user from a tenant. Cannot remove the last owner.
 func (s *TenantService) RemoveMember(ctx context.Context, tenantID, userID uuid.UUID) error {
 	// Check if the user being removed is an owner

frontend/src/app/(app)/cases/[id]/dokumente/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Document } from "@/lib/types";
+import { DocumentList } from "@/components/documents/DocumentList";
+import { DocumentUpload } from "@/components/documents/DocumentUpload";
+import { Loader2 } from "lucide-react";
+
+export default function DokumentePage() {
+  const { id } = useParams<{ id: string }>();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["case-documents", id],
+    queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
+      </div>
+    );
+  }
+
+  const documents = Array.isArray(data) ? data : [];
+
+  return (
+    <div className="space-y-6">
+      <DocumentUpload caseId={id} />
+      <DocumentList documents={documents} caseId={id} />
+    </div>
+  );
+}

frontend/src/app/(app)/cases/[id]/ereignisse/[eventId]/page.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { api } from "@/lib/api";
+import type { CaseEvent, Case } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
+import { NotesList } from "@/components/notes/NotesList";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { format, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  AlertTriangle,
+  FileText,
+  Scale,
+  ArrowRightLeft,
+  Calendar,
+  MessageSquare,
+  Gavel,
+  Info,
+} from "lucide-react";
+import Link from "next/link";
+
+const EVENT_TYPE_CONFIG: Record<
+  string,
+  { label: string; icon: typeof Info; color: string }
+> = {
+  status_changed: {
+    label: "Statusaenderung",
+    icon: ArrowRightLeft,
+    color: "bg-blue-50 text-blue-700",
+  },
+  deadline_created: {
+    label: "Frist erstellt",
+    icon: Calendar,
+    color: "bg-amber-50 text-amber-700",
+  },
+  deadline_completed: {
+    label: "Frist erledigt",
+    icon: Calendar,
+    color: "bg-emerald-50 text-emerald-700",
+  },
+  document_uploaded: {
+    label: "Dokument hochgeladen",
+    icon: FileText,
+    color: "bg-violet-50 text-violet-700",
+  },
+  hearing_scheduled: {
+    label: "Verhandlung angesetzt",
+    icon: Gavel,
+    color: "bg-rose-50 text-rose-700",
+  },
+  note_added: {
+    label: "Notiz hinzugefuegt",
+    icon: MessageSquare,
+    color: "bg-neutral-100 text-neutral-700",
+  },
+  case_created: {
+    label: "Akte erstellt",
+    icon: Scale,
+    color: "bg-emerald-50 text-emerald-700",
+  },
+};
+
+const DEFAULT_EVENT_CONFIG = {
+  label: "Ereignis",
+  icon: Info,
+  color: "bg-neutral-100 text-neutral-600",
+};
+
+function DetailSkeleton() {
+  return (
+    <div>
+      <Skeleton className="h-4 w-64" />
+      <div className="mt-6 space-y-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-32 rounded-lg" />
+        <Skeleton className="h-48 rounded-lg" />
+      </div>
+    </div>
+  );
+}
+
+export default function CaseEventDetailPage() {
+  const { id: caseId, eventId } = useParams<{
+    id: string;
+    eventId: string;
+  }>();
+
+  const { data: caseData } = useQuery({
+    queryKey: ["case", caseId],
+    queryFn: () => api.get<Case>(`/cases/${caseId}`),
+  });
+
+  const {
+    data: event,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["case-event", eventId],
+    queryFn: () => api.get<CaseEvent>(`/case-events/${eventId}`),
+  });
+
+  if (isLoading) return <DetailSkeleton />;
+
+  if (error || !event) {
+    return (
+      <div className="py-12 text-center">
+        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <p className="text-sm font-medium text-neutral-900">
+          Ereignis nicht gefunden
+        </p>
+        <p className="mt-1 text-sm text-neutral-500">
+          Das Ereignis existiert nicht oder Sie haben keine Berechtigung.
+        </p>
+        <Link
+          href={`/cases/${caseId}`}
+          className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        >
+          Zurueck zur Akte
+        </Link>
+      </div>
+    );
+  }
+
+  const typeConfig =
+    EVENT_TYPE_CONFIG[event.event_type ?? ""] ?? DEFAULT_EVENT_CONFIG;
+  const TypeIcon = typeConfig.icon;
+
+  return (
+    <div className="animate-fade-in">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Akten", href: "/cases" },
+          {
+            label: caseData?.case_number
+              ? `Az. ${caseData.case_number}`
+              : "Akte",
+            href: `/cases/${caseId}`,
+          },
+          { label: "Verlauf", href: `/cases/${caseId}` },
+          { label: event.title },
+        ]}
+      />
+
+      {/* Header */}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className={`rounded-lg p-2 ${typeConfig.color}`}>
+          <TypeIcon className="h-5 w-5" />
+        </div>
+        <div>
+          <h1 className="text-lg font-semibold text-neutral-900">
+            {event.title}
+          </h1>
+          <p className="text-sm text-neutral-500">
+            {event.event_date
+              ? format(parseISO(event.event_date), "d. MMMM yyyy, HH:mm", {
+                  locale: de,
+                })
+              : format(parseISO(event.created_at), "d. MMMM yyyy, HH:mm", {
+                  locale: de,
+                })}
+          </p>
+        </div>
+      </div>
+
+      {/* Description */}
+      {event.description && (
+        <div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+          <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+            Beschreibung
+          </p>
+          <p className="mt-1 whitespace-pre-wrap text-sm text-neutral-700">
+            {event.description}
+          </p>
+        </div>
+      )}
+
+      {/* Metadata */}
+      <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+        <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+          Metadaten
+        </p>
+        <dl className="mt-2 space-y-1.5">
+          <div className="flex gap-2 text-sm">
+            <dt className="text-neutral-500">Typ:</dt>
+            <dd>
+              <span
+                className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${typeConfig.color}`}
+              >
+                {typeConfig.label}
+              </span>
+            </dd>
+          </div>
+          {event.created_by && (
+            <div className="flex gap-2 text-sm">
+              <dt className="text-neutral-500">Erstellt von:</dt>
+              <dd className="text-neutral-900">{event.created_by}</dd>
+            </div>
+          )}
+          <div className="flex gap-2 text-sm">
+            <dt className="text-neutral-500">Erstellt am:</dt>
+            <dd className="text-neutral-900">
+              {format(parseISO(event.created_at), "d. MMMM yyyy, HH:mm", {
+                locale: de,
+              })}
+            </dd>
+          </div>
+          {event.metadata &&
+            Object.keys(event.metadata).length > 0 &&
+            Object.entries(event.metadata).map(([key, value]) => (
+              <div key={key} className="flex gap-2 text-sm">
+                <dt className="text-neutral-500">{key}:</dt>
+                <dd className="text-neutral-900">{String(value)}</dd>
+              </div>
+            ))}
+        </dl>
+      </div>
+
+      {/* Notes */}
+      <div className="mt-6">
+        <NotesList parentType="case_event" parentId={eventId} />
+      </div>
+    </div>
+  );
+}

frontend/src/app/(app)/cases/[id]/fristen/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Deadline } from "@/lib/types";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+import { Clock, Loader2 } from "lucide-react";
+
+const DEADLINE_STATUS: Record<string, string> = {
+  pending: "bg-amber-50 text-amber-700",
+  completed: "bg-emerald-50 text-emerald-700",
+  overdue: "bg-red-50 text-red-700",
+};
+
+const DEADLINE_STATUS_LABEL: Record<string, string> = {
+  pending: "Offen",
+  completed: "Erledigt",
+  overdue: "Ueberfaellig",
+};
+
+export default function FristenPage() {
+  const { id } = useParams<{ id: string }>();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["case-deadlines", id],
+    queryFn: () =>
+      api.get<{ deadlines: Deadline[]; total: number }>(
+        `/deadlines?case_id=${id}`,
+      ),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
+      </div>
+    );
+  }
+
+  const deadlines = Array.isArray(data?.deadlines) ? data.deadlines : [];
+
+  if (deadlines.length === 0) {
+    return (
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <Clock className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
+          Keine Fristen vorhanden.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {deadlines.map((d) => (
+        <div
+          key={d.id}
+          className="flex flex-col gap-2 rounded-md border border-neutral-200 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+        >
+          <div>
+            <p className="text-sm font-medium text-neutral-900">{d.title}</p>
+            {d.description && (
+              <p className="mt-0.5 text-sm text-neutral-500">
+                {d.description}
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <span
+              className={`rounded-full px-2 py-0.5 text-xs font-medium ${DEADLINE_STATUS[d.status] ?? "bg-neutral-100 text-neutral-500"}`}
+            >
+              {DEADLINE_STATUS_LABEL[d.status] ?? d.status}
+            </span>
+            <span className="whitespace-nowrap text-sm text-neutral-500">
+              {format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/app/(app)/cases/[id]/layout.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams, usePathname } from "next/navigation";
+import Link from "next/link";
+import { api } from "@/lib/api";
+import type { Case } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
+import { Skeleton } from "@/components/ui/Skeleton";
+import {
+  ArrowLeft,
+  Activity,
+  Clock,
+  FileText,
+  Users,
+  UserCheck,
+  StickyNote,
+  AlertTriangle,
+} from "lucide-react";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+
+interface CaseDetail extends Case {
+  parties: unknown[];
+  deadlines_count: number;
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  active: "bg-emerald-50 text-emerald-700",
+  pending: "bg-amber-50 text-amber-700",
+  closed: "bg-neutral-100 text-neutral-600",
+  archived: "bg-neutral-100 text-neutral-400",
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  active: "Aktiv",
+  pending: "Anhaengig",
+  closed: "Geschlossen",
+  archived: "Archiviert",
+};
+
+const TABS = [
+  { segment: "verlauf", label: "Verlauf", icon: Activity },
+  { segment: "fristen", label: "Fristen", icon: Clock },
+  { segment: "dokumente", label: "Dokumente", icon: FileText },
+  { segment: "parteien", label: "Parteien", icon: Users },
+  { segment: "mitarbeiter", label: "Mitarbeiter", icon: UserCheck },
+  { segment: "notizen", label: "Notizen", icon: StickyNote },
+] as const;
+
+const TAB_LABELS: Record<string, string> = {
+  verlauf: "Verlauf",
+  fristen: "Fristen",
+  dokumente: "Dokumente",
+  parteien: "Parteien",
+  mitarbeiter: "Mitarbeiter",
+  notizen: "Notizen",
+};
+
+function CaseDetailSkeleton() {
+  return (
+    <div>
+      <Skeleton className="h-4 w-28" />
+      <div className="mt-4 flex items-start justify-between">
+        <div>
+          <Skeleton className="h-6 w-48" />
+          <Skeleton className="mt-2 h-4 w-64" />
+        </div>
+        <div className="space-y-1">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+      </div>
+      <div className="mt-6 flex gap-4 border-b border-neutral-200 pb-2.5">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Skeleton key={i} className="h-4 w-20" />
+        ))}
+      </div>
+      <div className="mt-6 space-y-3">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-14 rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function CaseDetailLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { id } = useParams<{ id: string }>();
+  const pathname = usePathname();
+
+  const {
+    data: caseDetail,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["case", id],
+    queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
+  });
+
+  // Determine active tab from pathname
+  const segments = pathname.split("/");
+  const activeSegment = segments[segments.length - 1] || "verlauf";
+  const activeTabLabel = TAB_LABELS[activeSegment];
+
+  if (isLoading) {
+    return <CaseDetailSkeleton />;
+  }
+
+  if (error || !caseDetail) {
+    return (
+      <div className="py-12 text-center">
+        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <p className="text-sm font-medium text-neutral-900">
+          Akte nicht gefunden
+        </p>
+        <p className="mt-1 text-sm text-neutral-500">
+          Die Akte existiert nicht oder Sie haben keine Berechtigung.
+        </p>
+        <Link
+          href="/cases"
+          className="mt-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Zurueck zu Akten
+        </Link>
+      </div>
+    );
+  }
+
+  const breadcrumbItems = [
+    { label: "Dashboard", href: "/dashboard" },
+    { label: "Akten", href: "/cases" },
+    { label: caseDetail.case_number, href: `/cases/${id}/verlauf` },
+    ...(activeTabLabel ? [{ label: activeTabLabel }] : []),
+  ];
+
+  const partiesCount = Array.isArray(caseDetail.parties)
+    ? caseDetail.parties.length
+    : 0;
+
+  return (
+    <div className="animate-fade-in">
+      <Breadcrumb items={breadcrumbItems} />
+
+      <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <div className="flex flex-wrap items-center gap-3">
+            <h1 className="text-lg font-semibold text-neutral-900">
+              {caseDetail.title}
+            </h1>
+            <span
+              className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[caseDetail.status] ?? "bg-neutral-100 text-neutral-500"}`}
+            >
+              {STATUS_LABEL[caseDetail.status] ?? caseDetail.status}
+            </span>
+          </div>
+          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-neutral-500">
+            <span>Az. {caseDetail.case_number}</span>
+            {caseDetail.case_type && <span>{caseDetail.case_type}</span>}
+            {caseDetail.court && <span>{caseDetail.court}</span>}
+            {caseDetail.court_ref && <span>({caseDetail.court_ref})</span>}
+          </div>
+        </div>
+        <div className="text-right text-xs text-neutral-400">
+          <p>
+            Erstellt:{" "}
+            {format(new Date(caseDetail.created_at), "d. MMM yyyy", {
+              locale: de,
+            })}
+          </p>
+          <p>
+            Aktualisiert:{" "}
+            {format(new Date(caseDetail.updated_at), "d. MMM yyyy", {
+              locale: de,
+            })}
+          </p>
+        </div>
+      </div>
+
+      {caseDetail.ai_summary && (
+        <div className="mt-4 rounded-md border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
+          {caseDetail.ai_summary}
+        </div>
+      )}
+
+      <div className="mt-6 border-b border-neutral-200">
+        <nav className="-mb-px flex gap-1 overflow-x-auto sm:gap-4">
+          {TABS.map((tab) => {
+            const isActive = activeSegment === tab.segment;
+            return (
+              <Link
+                key={tab.segment}
+                href={`/cases/${id}/${tab.segment}`}
+                className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
+                  isActive
+                    ? "border-neutral-900 text-neutral-900"
+                    : "border-transparent text-neutral-400 hover:text-neutral-600"
+                }`}
+              >
+                <tab.icon className="h-4 w-4" />
+                {tab.label}
+                {tab.segment === "fristen" &&
+                  caseDetail.deadlines_count > 0 && (
+                    <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
+                      {caseDetail.deadlines_count}
+                    </span>
+                  )}
+                {tab.segment === "parteien" && partiesCount > 0 && (
+                  <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
+                    {partiesCount}
+                  </span>
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+
+      <div className="mt-6">{children}</div>
+    </div>
+  );
+}

frontend/src/app/(app)/cases/[id]/mitarbeiter/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { CaseAssignments } from "@/components/cases/CaseAssignments";
+
+export default function CaseMitarbeiterPage() {
+  const { id } = useParams<{ id: string }>();
+  return <CaseAssignments caseId={id} />;
+}

frontend/src/app/(app)/cases/[id]/notizen/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { NotesList } from "@/components/notes/NotesList";
+
+export default function NotizenPage() {
+  const { id } = useParams<{ id: string }>();
+
+  return <NotesList parentType="case" parentId={id} />;
+}

frontend/src/app/(app)/cases/[id]/page.tsx

@@ -1,341 +1,10 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { useQuery } from "@tanstack/react-query";
+export default async function CaseDetailPage({
-import { useParams } from "next/navigation";
+  params,
-import { api } from "@/lib/api";
+}: {
-import type { Case, CaseEvent, Party, Deadline, Document } from "@/lib/types";
+  params: Promise<{ id: string }>;
-import { CaseTimeline } from "@/components/cases/CaseTimeline";
+}) {
-import { PartyList } from "@/components/cases/PartyList";
+  const { id } = await params;
-import {
+  redirect(`/cases/${id}/verlauf`);
-  ArrowLeft,
-  Clock,
-  FileText,
-  Users,
-  Activity,
-  AlertTriangle,
-} from "lucide-react";
-import { format } from "date-fns";
-import { de } from "date-fns/locale";
-import Link from "next/link";
-import { useState } from "react";
-import { Skeleton } from "@/components/ui/Skeleton";
-
-interface CaseDetail extends Case {
-  parties: Party[];
-  recent_events: CaseEvent[];
-  deadlines_count: number;
-}
-
-const STATUS_BADGE: Record<string, string> = {
-  active: "bg-emerald-50 text-emerald-700",
-  pending: "bg-amber-50 text-amber-700",
-  closed: "bg-neutral-100 text-neutral-600",
-  archived: "bg-neutral-100 text-neutral-400",
-};
-
-const STATUS_LABEL: Record<string, string> = {
-  active: "Aktiv",
-  pending: "Anhängig",
-  closed: "Geschlossen",
-  archived: "Archiviert",
-};
-
-const TABS = [
-  { key: "timeline", label: "Verlauf", icon: Activity },
-  { key: "deadlines", label: "Fristen", icon: Clock },
-  { key: "documents", label: "Dokumente", icon: FileText },
-  { key: "parties", label: "Parteien", icon: Users },
-] as const;
-
-type TabKey = (typeof TABS)[number]["key"];
-
-function CaseDetailSkeleton() {
-  return (
-    <div>
-      <Skeleton className="h-4 w-28" />
-      <div className="mt-4 flex items-start justify-between">
-        <div>
-          <Skeleton className="h-6 w-48" />
-          <Skeleton className="mt-2 h-4 w-64" />
-        </div>
-        <div className="space-y-1">
-          <Skeleton className="h-3 w-24" />
-          <Skeleton className="h-3 w-24" />
-        </div>
-      </div>
-      <div className="mt-6 flex gap-4 border-b border-neutral-200 pb-2.5">
-        {[1, 2, 3, 4].map((i) => (
-          <Skeleton key={i} className="h-4 w-20" />
-        ))}
-      </div>
-      <div className="mt-6 space-y-3">
-        {[1, 2, 3].map((i) => (
-          <Skeleton key={i} className="h-14 rounded-md" />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default function CaseDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const [activeTab, setActiveTab] = useState<TabKey>("timeline");
-
-  const {
-    data: caseDetail,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["case", id],
-    queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
-  });
-
-  const { data: deadlinesData } = useQuery({
-    queryKey: ["case-deadlines", id],
-    queryFn: () =>
-      api.get<{ deadlines: Deadline[]; total: number }>(
-        `/deadlines?case_id=${id}`,
-      ),
-    enabled: activeTab === "deadlines",
-  });
-
-  const { data: documentsData } = useQuery({
-    queryKey: ["case-documents", id],
-    queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
-    enabled: activeTab === "documents",
-  });
-
-  if (isLoading) {
-    return <CaseDetailSkeleton />;
-  }
-
-  if (error || !caseDetail) {
-    return (
-      <div className="py-12 text-center">
-        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
-          <AlertTriangle className="h-6 w-6 text-red-500" />
-        </div>
-        <p className="text-sm font-medium text-neutral-900">
-          Akte nicht gefunden
-        </p>
-        <p className="mt-1 text-sm text-neutral-500">
-          Die Akte existiert nicht oder Sie haben keine Berechtigung.
-        </p>
-        <Link
-          href="/cases"
-          className="mt-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-          Zurück zu Akten
-        </Link>
-      </div>
-    );
-  }
-
-  const deadlines = Array.isArray(deadlinesData?.deadlines) ? deadlinesData.deadlines : [];
-  const documents = Array.isArray(documentsData) ? documentsData : [];
-
-  return (
-    <div className="animate-fade-in">
-      <Link
-        href="/cases"
-        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-      >
-        <ArrowLeft className="h-3.5 w-3.5" />
-        Zurück zu Akten
-      </Link>
-
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <div className="flex flex-wrap items-center gap-3">
-            <h1 className="text-lg font-semibold text-neutral-900">
-              {caseDetail.title}
-            </h1>
-            <span
-              className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[caseDetail.status] ?? "bg-neutral-100 text-neutral-500"}`}
-            >
-              {STATUS_LABEL[caseDetail.status] ?? caseDetail.status}
-            </span>
-          </div>
-          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-neutral-500">
-            <span>Az. {caseDetail.case_number}</span>
-            {caseDetail.case_type && <span>{caseDetail.case_type}</span>}
-            {caseDetail.court && <span>{caseDetail.court}</span>}
-            {caseDetail.court_ref && <span>({caseDetail.court_ref})</span>}
-          </div>
-        </div>
-        <div className="text-right text-xs text-neutral-400">
-          <p>
-            Erstellt:{" "}
-            {format(new Date(caseDetail.created_at), "d. MMM yyyy", {
-              locale: de,
-            })}
-          </p>
-          <p>
-            Aktualisiert:{" "}
-            {format(new Date(caseDetail.updated_at), "d. MMM yyyy", {
-              locale: de,
-            })}
-          </p>
-        </div>
-      </div>
-
-      {caseDetail.ai_summary && (
-        <div className="mt-4 rounded-md border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
-          {caseDetail.ai_summary}
-        </div>
-      )}
-
-      <div className="mt-6 border-b border-neutral-200">
-        <nav className="-mb-px flex gap-1 overflow-x-auto sm:gap-4">
-          {TABS.map((tab) => (
-            <button
-              key={tab.key}
-              onClick={() => setActiveTab(tab.key)}
-              className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
-                activeTab === tab.key
-                  ? "border-neutral-900 text-neutral-900"
-                  : "border-transparent text-neutral-400 hover:text-neutral-600"
-              }`}
-            >
-              <tab.icon className="h-4 w-4" />
-              {tab.label}
-              {tab.key === "deadlines" && caseDetail.deadlines_count > 0 && (
-                <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
-                  {caseDetail.deadlines_count}
-                </span>
-              )}
-              {tab.key === "parties" && Array.isArray(caseDetail.parties) && caseDetail.parties.length > 0 && (
-                <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
-                  {caseDetail.parties.length}
-                </span>
-              )}
-            </button>
-          ))}
-        </nav>
-      </div>
-
-      <div className="mt-6">
-        {activeTab === "timeline" && (
-          <CaseTimeline events={Array.isArray(caseDetail.recent_events) ? caseDetail.recent_events : []} />
-        )}
-
-        {activeTab === "deadlines" && (
-          <DeadlinesList deadlines={deadlines} />
-        )}
-
-        {activeTab === "documents" && (
-          <DocumentsList documents={documents} />
-        )}
-
-        {activeTab === "parties" && (
-          <PartyList caseId={id} parties={Array.isArray(caseDetail.parties) ? caseDetail.parties : []} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
-  if (deadlines.length === 0) {
-    return (
-      <div className="flex flex-col items-center py-8 text-center">
-        <div className="rounded-xl bg-neutral-100 p-3">
-          <Clock className="h-5 w-5 text-neutral-400" />
-        </div>
-        <p className="mt-2 text-sm text-neutral-500">
-          Keine Fristen vorhanden.
-        </p>
-      </div>
-    );
-  }
-
-  const DEADLINE_STATUS: Record<string, string> = {
-    pending: "bg-amber-50 text-amber-700",
-    completed: "bg-emerald-50 text-emerald-700",
-    overdue: "bg-red-50 text-red-700",
-  };
-
-  const DEADLINE_STATUS_LABEL: Record<string, string> = {
-    pending: "Offen",
-    completed: "Erledigt",
-    overdue: "Überfällig",
-  };
-
-  return (
-    <div className="space-y-2">
-      {deadlines.map((d) => (
-        <div
-          key={d.id}
-          className="flex flex-col gap-2 rounded-md border border-neutral-200 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
-        >
-          <div>
-            <p className="text-sm font-medium text-neutral-900">{d.title}</p>
-            {d.description && (
-              <p className="mt-0.5 text-sm text-neutral-500">
-                {d.description}
-              </p>
-            )}
-          </div>
-          <div className="flex items-center gap-3">
-            <span
-              className={`rounded-full px-2 py-0.5 text-xs font-medium ${DEADLINE_STATUS[d.status] ?? "bg-neutral-100 text-neutral-500"}`}
-            >
-              {DEADLINE_STATUS_LABEL[d.status] ?? d.status}
-            </span>
-            <span className="whitespace-nowrap text-sm text-neutral-500">
-              {format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
-            </span>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function DocumentsList({ documents }: { documents: Document[] }) {
-  if (documents.length === 0) {
-    return (
-      <div className="flex flex-col items-center py-8 text-center">
-        <div className="rounded-xl bg-neutral-100 p-3">
-          <FileText className="h-5 w-5 text-neutral-400" />
-        </div>
-        <p className="mt-2 text-sm text-neutral-500">
-          Keine Dokumente vorhanden.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-2">
-      {documents.map((doc) => (
-        <div
-          key={doc.id}
-          className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
-        >
-          <div className="flex items-center gap-3">
-            <FileText className="h-4 w-4 text-neutral-400" />
-            <div>
-              <p className="text-sm font-medium text-neutral-900">
-                {doc.title}
-              </p>
-              <div className="flex gap-2 text-xs text-neutral-400">
-                {doc.doc_type && <span>{doc.doc_type}</span>}
-                {doc.file_size && (
-                  <span>{(doc.file_size / 1024).toFixed(0)} KB</span>
-                )}
-              </div>
-            </div>
-          </div>
-          <a
-            href={`/api/documents/${doc.id}`}
-            className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-          >
-            Herunterladen
-          </a>
-        </div>
-      ))}
-    </div>
-  );
 }

frontend/src/app/(app)/cases/[id]/parteien/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Case, Party } from "@/lib/types";
+import { PartyList } from "@/components/cases/PartyList";
+import { Loader2 } from "lucide-react";
+
+interface CaseDetail extends Case {
+  parties: Party[];
+}
+
+export default function ParteienPage() {
+  const { id } = useParams<{ id: string }>();
+
+  const { data: caseDetail, isLoading } = useQuery({
+    queryKey: ["case", id],
+    queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
+      </div>
+    );
+  }
+
+  const parties = Array.isArray(caseDetail?.parties)
+    ? caseDetail.parties
+    : [];
+
+  return <PartyList caseId={id} parties={parties} />;
+}

frontend/src/app/(app)/cases/[id]/verlauf/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Case, CaseEvent } from "@/lib/types";
+import { CaseTimeline } from "@/components/cases/CaseTimeline";
+import { Loader2 } from "lucide-react";
+
+interface CaseDetail extends Case {
+  recent_events: CaseEvent[];
+}
+
+export default function VerlaufPage() {
+  const { id } = useParams<{ id: string }>();
+
+  const { data: caseDetail, isLoading } = useQuery({
+    queryKey: ["case", id],
+    queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
+      </div>
+    );
+  }
+
+  const events = Array.isArray(caseDetail?.recent_events)
+    ? caseDetail.recent_events
+    : [];
+
+  return <CaseTimeline events={events} />;
+}

frontend/src/app/(app)/cases/page.tsx

@@ -5,10 +5,12 @@ import { api } from "@/lib/api";
 import type { Case } from "@/lib/types";
 import Link from "next/link";
 import { useSearchParams, useRouter } from "next/navigation";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 import { Plus, Search, FolderOpen } from "lucide-react";
 import { useState } from "react";
 import { SkeletonTable } from "@/components/ui/Skeleton";
 import { EmptyState } from "@/components/ui/EmptyState";
+import { usePermissions } from "@/lib/hooks/usePermissions";
 
 const STATUS_OPTIONS = [
   { value: "", label: "Alle Status" },
@@ -48,6 +50,8 @@ const inputClass =
 export default function CasesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { can } = usePermissions();
+  const canCreateCase = can("create_case");
 
   const [search, setSearch] = useState(searchParams.get("search") ?? "");
   const [status, setStatus] = useState(searchParams.get("status") ?? "");
@@ -72,6 +76,12 @@ export default function CasesPage() {
 
   return (
     <div className="animate-fade-in">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Akten" },
+        ]}
+      />
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-lg font-semibold text-neutral-900">Akten</h1>
@@ -79,13 +89,15 @@ export default function CasesPage() {
             {data ? `${data.total} Akten` : "\u00A0"}
           </p>
         </div>
-        <Link
+        {canCreateCase && (
-          href="/cases/new"
+          <Link
-          className="inline-flex w-fit items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+            href="/cases/new"
-        >
+            className="inline-flex w-fit items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
-          <Plus className="h-4 w-4" />
+          >
-          Neue Akte
+            <Plus className="h-4 w-4" />
-        </Link>
+            Neue Akte
+          </Link>
+        )}
       </div>
 
       <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center">
@@ -138,7 +150,7 @@ export default function CasesPage() {
                 : "Erstellen Sie Ihre erste Akte, um loszulegen."
             }
             action={
-              !search && !status && !type ? (
+              !search && !status && !type && canCreateCase ? (
                 <Link
                   href="/cases/new"
                   className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"

frontend/src/app/(app)/dashboard/page.tsx

@@ -8,6 +8,8 @@ import { CaseOverviewGrid } from "@/components/dashboard/CaseOverviewGrid";
 import { UpcomingTimeline } from "@/components/dashboard/UpcomingTimeline";
 import { AISummaryCard } from "@/components/dashboard/AISummaryCard";
 import { QuickActions } from "@/components/dashboard/QuickActions";
+import { RecentActivityList } from "@/components/dashboard/RecentActivityList";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 import { Skeleton, SkeletonCard } from "@/components/ui/Skeleton";
 import { AlertTriangle, RefreshCw } from "lucide-react";
 
@@ -71,9 +73,12 @@ export default function DashboardPage() {
     );
   }
 
+  const recentActivity = Array.isArray(data.recent_activity) ? data.recent_activity : [];
+
   return (
     <div className="animate-fade-in mx-auto max-w-6xl space-y-6">
       <div>
+        <Breadcrumb items={[{ label: "Dashboard" }]} />
         <h1 className="text-lg font-semibold text-neutral-900">Dashboard</h1>
         <p className="mt-0.5 text-sm text-neutral-500">
           Fristenübersicht und Kanzlei-Status
@@ -91,10 +96,14 @@ export default function DashboardPage() {
         </div>
         <div className="space-y-6">
           <CaseOverviewGrid data={data.case_summary ?? { active_count: 0, new_this_month: 0, closed_count: 0 }} />
-          <AISummaryCard data={data} />
+          <AISummaryCard data={data} onRefresh={() => refetch()} />
           <QuickActions />
         </div>
       </div>
+
+      {recentActivity.length > 0 && (
+        <RecentActivityList activities={recentActivity} />
+      )}
     </div>
   );
 }

frontend/src/app/(app)/fristen/[id]/page.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useParams, useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Deadline } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
+import { NotesList } from "@/components/notes/NotesList";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { format, parseISO, formatDistanceToNow, isPast } from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  ExternalLink,
+} from "lucide-react";
+import Link from "next/link";
+import { toast } from "sonner";
+
+interface DeadlineDetail extends Deadline {
+  case_number?: string;
+  case_title?: string;
+}
+
+const STATUS_CONFIG: Record<
+  string,
+  { label: string; bg: string; icon: typeof Clock }
+> = {
+  pending: { label: "Offen", bg: "bg-amber-50 text-amber-700", icon: Clock },
+  completed: {
+    label: "Erledigt",
+    bg: "bg-emerald-50 text-emerald-700",
+    icon: CheckCircle2,
+  },
+  overdue: {
+    label: "Ueberfaellig",
+    bg: "bg-red-50 text-red-700",
+    icon: AlertTriangle,
+  },
+};
+
+function getEffectiveStatus(d: DeadlineDetail): string {
+  if (d.status === "completed") return "completed";
+  if (isPast(parseISO(d.due_date))) return "overdue";
+  return "pending";
+}
+
+function DetailSkeleton() {
+  return (
+    <div>
+      <Skeleton className="h-4 w-48" />
+      <div className="mt-6 space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-32 rounded-lg" />
+        <Skeleton className="h-48 rounded-lg" />
+      </div>
+    </div>
+  );
+}
+
+export default function DeadlineDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const {
+    data: deadline,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["deadline", id],
+    queryFn: () => api.get<DeadlineDetail>(`/deadlines/${id}`),
+  });
+
+  const completeMutation = useMutation({
+    mutationFn: () => api.patch<Deadline>(`/deadlines/${id}/complete`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["deadline", id] });
+      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+      toast.success("Frist als erledigt markiert");
+    },
+    onError: () => toast.error("Fehler beim Abschliessen der Frist"),
+  });
+
+  if (isLoading) return <DetailSkeleton />;
+
+  if (error || !deadline) {
+    return (
+      <div className="py-12 text-center">
+        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <p className="text-sm font-medium text-neutral-900">
+          Frist nicht gefunden
+        </p>
+        <p className="mt-1 text-sm text-neutral-500">
+          Die Frist existiert nicht oder Sie haben keine Berechtigung.
+        </p>
+        <Link
+          href="/fristen"
+          className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        >
+          Zurueck zu Fristen
+        </Link>
+      </div>
+    );
+  }
+
+  const status = getEffectiveStatus(deadline);
+  const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.pending;
+  const StatusIcon = config.icon;
+  const dueDate = parseISO(deadline.due_date);
+  const relativeTime = formatDistanceToNow(dueDate, {
+    addSuffix: true,
+    locale: de,
+  });
+
+  return (
+    <div className="animate-fade-in">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Fristen", href: "/fristen" },
+          { label: deadline.title },
+        ]}
+      />
+
+      {/* Header */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <div className="flex flex-wrap items-center gap-3">
+            <span
+              className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${config.bg}`}
+            >
+              <StatusIcon className="h-3 w-3" />
+              {config.label}
+            </span>
+            <h1 className="text-lg font-semibold text-neutral-900">
+              {deadline.title}
+            </h1>
+          </div>
+          {deadline.description && (
+            <p className="mt-1 text-sm text-neutral-500">
+              {deadline.description}
+            </p>
+          )}
+        </div>
+        {deadline.status !== "completed" && (
+          <button
+            onClick={() => completeMutation.mutate()}
+            disabled={completeMutation.isPending}
+            className="shrink-0 rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50"
+          >
+            {completeMutation.isPending ? "Wird erledigt..." : "Erledigen"}
+          </button>
+        )}
+      </div>
+
+      {/* Due date */}
+      <div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+        <div className="flex items-baseline gap-2">
+          <span className="text-sm font-medium text-neutral-900">
+            Faellig: {format(dueDate, "d. MMMM yyyy", { locale: de })}
+          </span>
+          <span
+            className={`text-xs ${status === "overdue" ? "font-medium text-red-600" : "text-neutral-500"}`}
+          >
+            ({relativeTime})
+          </span>
+        </div>
+        {deadline.warning_date && (
+          <p className="mt-1 text-xs text-neutral-500">
+            Warnung am:{" "}
+            {format(parseISO(deadline.warning_date), "d. MMMM yyyy", {
+              locale: de,
+            })}
+          </p>
+        )}
+        {deadline.original_due_date &&
+          deadline.original_due_date !== deadline.due_date && (
+            <p className="mt-1 text-xs text-neutral-500">
+              Urspruengliches Datum:{" "}
+              {format(parseISO(deadline.original_due_date), "d. MMMM yyyy", {
+                locale: de,
+              })}
+            </p>
+          )}
+        {deadline.completed_at && (
+          <p className="mt-1 text-xs text-emerald-600">
+            Erledigt am:{" "}
+            {format(parseISO(deadline.completed_at), "d. MMMM yyyy, HH:mm", {
+              locale: de,
+            })}
+          </p>
+        )}
+      </div>
+
+      {/* Case context */}
+      {deadline.case_id && (
+        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+                Akte
+              </p>
+              <p className="mt-0.5 text-sm text-neutral-900">
+                {deadline.case_number
+                  ? `Az. ${deadline.case_number}`
+                  : "Verknuepfte Akte"}
+                {deadline.case_title && ` — ${deadline.case_title}`}
+              </p>
+            </div>
+            <Link
+              href={`/cases/${deadline.case_id}`}
+              className="flex items-center gap-1 text-xs text-neutral-500 transition-colors hover:text-neutral-700"
+            >
+              Zur Akte
+              <ExternalLink className="h-3 w-3" />
+            </Link>
+          </div>
+        </div>
+      )}
+
+      {/* Source info */}
+      {deadline.source && deadline.source !== "manual" && (
+        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+          <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+            Quelle
+          </p>
+          <p className="mt-0.5 text-sm text-neutral-700">
+            {deadline.source === "calculated"
+              ? "Berechnet"
+              : deadline.source === "caldav"
+                ? "CalDAV Sync"
+                : deadline.source}
+            {deadline.rule_id && ` (Regel: ${deadline.rule_id})`}
+          </p>
+        </div>
+      )}
+
+      {/* Notes */}
+      <div className="mt-6">
+        <NotesList parentType="deadline" parentId={id} />
+      </div>
+    </div>
+  );
+}

frontend/src/app/(app)/fristen/neu/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Case, Deadline } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
+import { useState } from "react";
+import { toast } from "sonner";
+
+const inputClass =
+  "w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+const labelClass = "mb-1 block text-xs font-medium text-neutral-600";
+
+export default function NewDeadlinePage() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const [caseId, setCaseId] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [dueDate, setDueDate] = useState("");
+  const [warningDate, setWarningDate] = useState("");
+  const [notes, setNotes] = useState("");
+
+  const { data: casesData } = useQuery({
+    queryKey: ["cases"],
+    queryFn: () => api.get<{ cases: Case[]; total: number } | Case[]>("/cases"),
+  });
+
+  const cases = Array.isArray(casesData)
+    ? casesData
+    : Array.isArray(casesData?.cases)
+      ? casesData.cases
+      : [];
+
+  const createMutation = useMutation({
+    mutationFn: (body: Record<string, unknown>) =>
+      api.post<Deadline>(`/cases/${caseId}/deadlines`, body),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+      toast.success("Frist erstellt");
+      router.push(`/fristen/${data.id}`);
+    },
+    onError: () => toast.error("Fehler beim Erstellen der Frist"),
+  });
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!caseId || !title.trim() || !dueDate) return;
+
+    const body: Record<string, unknown> = {
+      title: title.trim(),
+      due_date: new Date(dueDate).toISOString(),
+      source: "manual",
+    };
+    if (description.trim()) body.description = description.trim();
+    if (warningDate) body.warning_date = new Date(warningDate).toISOString();
+    if (notes.trim()) body.notes = notes.trim();
+
+    createMutation.mutate(body);
+  }
+
+  return (
+    <div className="animate-fade-in">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Fristen", href: "/fristen" },
+          { label: "Neue Frist" },
+        ]}
+      />
+
+      <h1 className="text-lg font-semibold text-neutral-900">
+        Neue Frist anlegen
+      </h1>
+      <p className="mt-0.5 text-sm text-neutral-500">
+        Erstellen Sie eine neue Frist fuer eine Akte.
+      </p>
+
+      <form
+        onSubmit={handleSubmit}
+        className="mt-6 max-w-lg space-y-4 rounded-lg border border-neutral-200 bg-white p-5"
+      >
+        <div>
+          <label className={labelClass}>Akte *</label>
+          <select
+            value={caseId}
+            onChange={(e) => setCaseId(e.target.value)}
+            required
+            className={inputClass}
+          >
+            <option value="">Akte auswaehlen...</option>
+            {cases.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.case_number} — {c.title}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className={labelClass}>Bezeichnung *</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            className={inputClass}
+            placeholder="z.B. Klageschrift einreichen"
+          />
+        </div>
+
+        <div>
+          <label className={labelClass}>Beschreibung</label>
+          <input
+            type="text"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className={inputClass}
+            placeholder="Optionale Beschreibung"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className={labelClass}>Faellig am *</label>
+            <input
+              type="date"
+              value={dueDate}
+              onChange={(e) => setDueDate(e.target.value)}
+              required
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label className={labelClass}>Warnung am</label>
+            <input
+              type="date"
+              value={warningDate}
+              onChange={(e) => setWarningDate(e.target.value)}
+              className={inputClass}
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className={labelClass}>Notizen</label>
+          <textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            rows={3}
+            className={inputClass}
+            placeholder="Optionale Notizen zur Frist"
+          />
+        </div>
+
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <button
+            type="button"
+            onClick={() => router.push("/fristen")}
+            className="rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
+          >
+            Abbrechen
+          </button>
+          <button
+            type="submit"
+            disabled={
+              createMutation.isPending || !caseId || !title.trim() || !dueDate
+            }
+            className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+          >
+            {createMutation.isPending ? "Erstellen..." : "Frist anlegen"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/app/(app)/fristen/page.tsx

@@ -2,16 +2,20 @@
 
 import { DeadlineList } from "@/components/deadlines/DeadlineList";
 import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "@/lib/api";
 import type { Deadline } from "@/lib/types";
 import { Calendar, List, Calculator } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 
 type ViewMode = "list" | "calendar";
 
 export default function FristenPage() {
+  const searchParams = useSearchParams();
+  const initialStatus = searchParams.get("status") ?? undefined;
   const [view, setView] = useState<ViewMode>("list");
 
   const { data: deadlines } = useQuery({
@@ -21,50 +25,58 @@ export default function FristenPage() {
 
   return (
     <div className="animate-fade-in space-y-4">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div>
-        <div>
+        <Breadcrumb
-          <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
+          items={[
-          <p className="mt-0.5 text-sm text-neutral-500">
+            { label: "Dashboard", href: "/dashboard" },
-            Alle Fristen im Überblick
+            { label: "Fristen" },
-          </p>
+          ]}
-        </div>
+        />
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <Link
+          <div>
-            href="/fristen/rechner"
+            <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
-            className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
+            <p className="mt-0.5 text-sm text-neutral-500">
-          >
+              Alle Fristen im Überblick
-            <Calculator className="h-3.5 w-3.5" />
+            </p>
-            Fristenrechner
+          </div>
-          </Link>
+          <div className="flex items-center gap-2">
-          <div className="flex rounded-md border border-neutral-200 bg-white">
+            <Link
-            <button
+              href="/fristen/rechner"
-              onClick={() => setView("list")}
+              className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
-              className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
-                view === "list"
-                  ? "bg-neutral-100 font-medium text-neutral-900"
-                  : "text-neutral-500 hover:text-neutral-700"
-              }`}
             >
-              <List className="h-3.5 w-3.5" />
+              <Calculator className="h-3.5 w-3.5" />
-              Liste
+              Fristenrechner
-            </button>
+            </Link>
-            <button
+            <div className="flex rounded-md border border-neutral-200 bg-white">
-              onClick={() => setView("calendar")}
+              <button
-              className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
+                onClick={() => setView("list")}
-                view === "calendar"
+                className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
-                  ? "bg-neutral-100 font-medium text-neutral-900"
+                  view === "list"
-                  : "text-neutral-500 hover:text-neutral-700"
+                    ? "bg-neutral-100 font-medium text-neutral-900"
-              }`}
+                    : "text-neutral-500 hover:text-neutral-700"
-            >
+                }`}
-              <Calendar className="h-3.5 w-3.5" />
+              >
-              Kalender
+                <List className="h-3.5 w-3.5" />
-            </button>
+                Liste
+              </button>
+              <button
+                onClick={() => setView("calendar")}
+                className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
+                  view === "calendar"
+                    ? "bg-neutral-100 font-medium text-neutral-900"
+                    : "text-neutral-500 hover:text-neutral-700"
+                }`}
+              >
+                <Calendar className="h-3.5 w-3.5" />
+                Kalender
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
       {view === "list" ? (
-        <DeadlineList />
+        <DeadlineList initialStatus={initialStatus} />
       ) : (
         <DeadlineCalendarView deadlines={Array.isArray(deadlines) ? deadlines : []} />
       )}

frontend/src/app/(app)/termine/[id]/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Appointment } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
+import { NotesList } from "@/components/notes/NotesList";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { format, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  AlertTriangle,
+  Calendar,
+  ExternalLink,
+  MapPin,
+} from "lucide-react";
+import Link from "next/link";
+
+interface AppointmentDetail extends Appointment {
+  case_number?: string;
+  case_title?: string;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  hearing: "Verhandlung",
+  meeting: "Besprechung",
+  consultation: "Beratung",
+  deadline_hearing: "Fristanhoerung",
+  other: "Sonstiges",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  hearing: "bg-blue-50 text-blue-700",
+  meeting: "bg-violet-50 text-violet-700",
+  consultation: "bg-emerald-50 text-emerald-700",
+  deadline_hearing: "bg-amber-50 text-amber-700",
+  other: "bg-neutral-100 text-neutral-600",
+};
+
+function DetailSkeleton() {
+  return (
+    <div>
+      <Skeleton className="h-4 w-48" />
+      <div className="mt-6 space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-32 rounded-lg" />
+        <Skeleton className="h-48 rounded-lg" />
+      </div>
+    </div>
+  );
+}
+
+export default function AppointmentDetailPage() {
+  const { id } = useParams<{ id: string }>();
+
+  const {
+    data: appointment,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["appointment", id],
+    queryFn: () => api.get<AppointmentDetail>(`/appointments/${id}`),
+  });
+
+  if (isLoading) return <DetailSkeleton />;
+
+  if (error || !appointment) {
+    return (
+      <div className="py-12 text-center">
+        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <p className="text-sm font-medium text-neutral-900">
+          Termin nicht gefunden
+        </p>
+        <p className="mt-1 text-sm text-neutral-500">
+          Der Termin existiert nicht oder Sie haben keine Berechtigung.
+        </p>
+        <Link
+          href="/termine"
+          className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        >
+          Zurueck zu Termine
+        </Link>
+      </div>
+    );
+  }
+
+  const startDate = parseISO(appointment.start_at);
+  const typeBadge = appointment.appointment_type
+    ? TYPE_COLORS[appointment.appointment_type] ?? TYPE_COLORS.other
+    : null;
+  const typeLabel = appointment.appointment_type
+    ? TYPE_LABELS[appointment.appointment_type] ?? appointment.appointment_type
+    : null;
+
+  return (
+    <div className="animate-fade-in">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Termine", href: "/termine" },
+          { label: appointment.title },
+        ]}
+      />
+
+      {/* Header */}
+      <div>
+        <div className="flex flex-wrap items-center gap-3">
+          <h1 className="text-lg font-semibold text-neutral-900">
+            {appointment.title}
+          </h1>
+          {typeBadge && typeLabel && (
+            <span
+              className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${typeBadge}`}
+            >
+              {typeLabel}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Date & Time */}
+      <div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+        <div className="flex items-center gap-2">
+          <Calendar className="h-4 w-4 text-neutral-400" />
+          <span className="text-sm font-medium text-neutral-900">
+            {format(startDate, "EEEE, d. MMMM yyyy", { locale: de })}
+          </span>
+        </div>
+        <p className="mt-1 pl-6 text-sm text-neutral-600">
+          {format(startDate, "HH:mm", { locale: de })} Uhr
+          {appointment.end_at && (
+            <>
+              {" "}
+              – {format(parseISO(appointment.end_at), "HH:mm", { locale: de })}{" "}
+              Uhr
+            </>
+          )}
+        </p>
+      </div>
+
+      {/* Location */}
+      {appointment.location && (
+        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+          <div className="flex items-center gap-2">
+            <MapPin className="h-4 w-4 text-neutral-400" />
+            <span className="text-sm text-neutral-900">
+              {appointment.location}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Case context */}
+      {appointment.case_id && (
+        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+                Akte
+              </p>
+              <p className="mt-0.5 text-sm text-neutral-900">
+                {appointment.case_number
+                  ? `Az. ${appointment.case_number}`
+                  : "Verknuepfte Akte"}
+                {appointment.case_title && ` — ${appointment.case_title}`}
+              </p>
+            </div>
+            <Link
+              href={`/cases/${appointment.case_id}`}
+              className="flex items-center gap-1 text-xs text-neutral-500 transition-colors hover:text-neutral-700"
+            >
+              Zur Akte
+              <ExternalLink className="h-3 w-3" />
+            </Link>
+          </div>
+        </div>
+      )}
+
+      {/* Description */}
+      {appointment.description && (
+        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
+          <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+            Beschreibung
+          </p>
+          <p className="mt-1 whitespace-pre-wrap text-sm text-neutral-700">
+            {appointment.description}
+          </p>
+        </div>
+      )}
+
+      {/* Notes */}
+      <div className="mt-6">
+        <NotesList parentType="appointment" parentId={id} />
+      </div>
+    </div>
+  );
+}

frontend/src/app/(app)/termine/neu/page.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Case, Appointment } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
+import { useState } from "react";
+import { toast } from "sonner";
+
+const APPOINTMENT_TYPES = [
+  { value: "hearing", label: "Verhandlung" },
+  { value: "meeting", label: "Besprechung" },
+  { value: "consultation", label: "Beratung" },
+  { value: "deadline_hearing", label: "Fristanhoerung" },
+  { value: "other", label: "Sonstiges" },
+];
+
+const inputClass =
+  "w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+const labelClass = "mb-1 block text-xs font-medium text-neutral-600";
+
+export default function NewAppointmentPage() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const [caseId, setCaseId] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [startAt, setStartAt] = useState("");
+  const [endAt, setEndAt] = useState("");
+  const [location, setLocation] = useState("");
+  const [appointmentType, setAppointmentType] = useState("");
+
+  const { data: casesData } = useQuery({
+    queryKey: ["cases"],
+    queryFn: () => api.get<{ cases: Case[]; total: number } | Case[]>("/cases"),
+  });
+
+  const cases = Array.isArray(casesData)
+    ? casesData
+    : Array.isArray(casesData?.cases)
+      ? casesData.cases
+      : [];
+
+  const createMutation = useMutation({
+    mutationFn: (body: Record<string, unknown>) =>
+      api.post<Appointment>("/appointments", body),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["appointments"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+      toast.success("Termin erstellt");
+      router.push(`/termine/${data.id}`);
+    },
+    onError: () => toast.error("Fehler beim Erstellen des Termins"),
+  });
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!title.trim() || !startAt) return;
+
+    const body: Record<string, unknown> = {
+      title: title.trim(),
+      start_at: new Date(startAt).toISOString(),
+    };
+    if (description.trim()) body.description = description.trim();
+    if (endAt) body.end_at = new Date(endAt).toISOString();
+    if (location.trim()) body.location = location.trim();
+    if (appointmentType) body.appointment_type = appointmentType;
+    if (caseId) body.case_id = caseId;
+
+    createMutation.mutate(body);
+  }
+
+  return (
+    <div className="animate-fade-in">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Termine", href: "/termine" },
+          { label: "Neuer Termin" },
+        ]}
+      />
+
+      <h1 className="text-lg font-semibold text-neutral-900">
+        Neuer Termin
+      </h1>
+      <p className="mt-0.5 text-sm text-neutral-500">
+        Erstellen Sie einen neuen Termin.
+      </p>
+
+      <form
+        onSubmit={handleSubmit}
+        className="mt-6 max-w-lg space-y-4 rounded-lg border border-neutral-200 bg-white p-5"
+      >
+        <div>
+          <label className={labelClass}>Titel *</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            className={inputClass}
+            placeholder="z.B. Muendliche Verhandlung"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className={labelClass}>Beginn *</label>
+            <input
+              type="datetime-local"
+              value={startAt}
+              onChange={(e) => setStartAt(e.target.value)}
+              required
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label className={labelClass}>Ende</label>
+            <input
+              type="datetime-local"
+              value={endAt}
+              onChange={(e) => setEndAt(e.target.value)}
+              className={inputClass}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className={labelClass}>Typ</label>
+            <select
+              value={appointmentType}
+              onChange={(e) => setAppointmentType(e.target.value)}
+              className={inputClass}
+            >
+              <option value="">Kein Typ</option>
+              {APPOINTMENT_TYPES.map((t) => (
+                <option key={t.value} value={t.value}>
+                  {t.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className={labelClass}>Akte (optional)</label>
+            <select
+              value={caseId}
+              onChange={(e) => setCaseId(e.target.value)}
+              className={inputClass}
+            >
+              <option value="">Keine Akte</option>
+              {cases.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.case_number} — {c.title}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className={labelClass}>Ort</label>
+          <input
+            type="text"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            className={inputClass}
+            placeholder="z.B. UPC Muenchen, Saal 3"
+          />
+        </div>
+
+        <div>
+          <label className={labelClass}>Beschreibung</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={3}
+            className={inputClass}
+            placeholder="Optionale Beschreibung zum Termin"
+          />
+        </div>
+
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <button
+            type="button"
+            onClick={() => router.push("/termine")}
+            className="rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
+          >
+            Abbrechen
+          </button>
+          <button
+            type="submit"
+            disabled={
+              createMutation.isPending || !title.trim() || !startAt
+            }
+            className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+          >
+            {createMutation.isPending ? "Erstellen..." : "Termin anlegen"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/app/(app)/termine/page.tsx

@@ -6,6 +6,7 @@ import { AppointmentModal } from "@/components/appointments/AppointmentModal";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "@/lib/api";
 import type { Appointment } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 import { Calendar, List, Plus } from "lucide-react";
 import { useState } from "react";
 
@@ -38,6 +39,12 @@ export default function TerminePage() {
 
   return (
     <div className="space-y-4">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Termine" },
+        ]}
+      />
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-lg font-semibold text-neutral-900">Termine</h1>

frontend/src/components/cases/CaseAssignments.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { UserPlus, Trash2, Users } from "lucide-react";
+import { api } from "@/lib/api";
+import type { CaseAssignment, UserTenant } from "@/lib/types";
+import { CASE_ASSIGNMENT_ROLE_LABELS } from "@/lib/types";
+import type { CaseAssignmentRole } from "@/lib/types";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+
+export function CaseAssignments({ caseId }: { caseId: string }) {
+  const queryClient = useQueryClient();
+  const { can } = usePermissions();
+  const canManage = can("manage_team");
+
+  const tenantId =
+    typeof window !== "undefined"
+      ? localStorage.getItem("kanzlai_tenant_id")
+      : null;
+
+  const [selectedUser, setSelectedUser] = useState("");
+  const [assignRole, setAssignRole] = useState<CaseAssignmentRole>("team");
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["case-assignments", caseId],
+    queryFn: () =>
+      api.get<{ assignments: CaseAssignment[]; total: number }>(
+        `/cases/${caseId}/assignments`,
+      ),
+  });
+
+  const { data: members } = useQuery({
+    queryKey: ["tenant-members", tenantId],
+    queryFn: () =>
+      api.get<UserTenant[]>(`/tenants/${tenantId}/members`),
+    enabled: !!tenantId && canManage,
+  });
+
+  const assignMutation = useMutation({
+    mutationFn: (input: { user_id: string; role: string }) =>
+      api.post(`/cases/${caseId}/assignments`, input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case-assignments", caseId] });
+      setSelectedUser("");
+      toast.success("Mitarbeiter zugewiesen");
+    },
+    onError: (err: { error?: string }) => {
+      toast.error(err.error || "Fehler beim Zuweisen");
+    },
+  });
+
+  const unassignMutation = useMutation({
+    mutationFn: (userId: string) =>
+      api.delete(`/cases/${caseId}/assignments/${userId}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case-assignments", caseId] });
+      toast.success("Zuweisung entfernt");
+    },
+    onError: (err: { error?: string }) => {
+      toast.error(err.error || "Fehler beim Entfernen");
+    },
+  });
+
+  const assignments = data?.assignments ?? [];
+  const assignedUserIds = new Set(assignments.map((a) => a.user_id));
+  const availableMembers = (members ?? []).filter(
+    (m) => !assignedUserIds.has(m.user_id),
+  );
+
+  const handleAssign = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedUser) return;
+    assignMutation.mutate({ user_id: selectedUser, role: assignRole });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-neutral-900">
+        Zugewiesene Mitarbeiter
+      </h3>
+
+      {/* Assign form — only for owners/partners */}
+      {canManage && availableMembers.length > 0 && (
+        <form onSubmit={handleAssign} className="flex flex-col gap-2 sm:flex-row">
+          <select
+            value={selectedUser}
+            onChange={(e) => setSelectedUser(e.target.value)}
+            className="flex-1 rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+          >
+            <option value="">Mitarbeiter auswählen...</option>
+            {availableMembers.map((m) => (
+              <option key={m.user_id} value={m.user_id}>
+                {m.user_id.slice(0, 8)}... ({m.role})
+              </option>
+            ))}
+          </select>
+          <select
+            value={assignRole}
+            onChange={(e) => setAssignRole(e.target.value as CaseAssignmentRole)}
+            className="rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+          >
+            {(Object.keys(CASE_ASSIGNMENT_ROLE_LABELS) as CaseAssignmentRole[]).map(
+              (r) => (
+                <option key={r} value={r}>
+                  {CASE_ASSIGNMENT_ROLE_LABELS[r]}
+                </option>
+              ),
+            )}
+          </select>
+          <button
+            type="submit"
+            disabled={assignMutation.isPending || !selectedUser}
+            className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+          >
+            <UserPlus className="h-3.5 w-3.5" />
+            Zuweisen
+          </button>
+        </form>
+      )}
+
+      {/* Assignments list */}
+      {assignments.length > 0 ? (
+        <div className="overflow-hidden rounded-md border border-neutral-200">
+          {assignments.map((a, i) => (
+            <div
+              key={a.id}
+              className={`flex items-center justify-between px-4 py-2.5 ${
+                i < assignments.length - 1 ? "border-b border-neutral-100" : ""
+              }`}
+            >
+              <div className="flex items-center gap-3">
+                <div className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-100">
+                  <Users className="h-3.5 w-3.5 text-neutral-500" />
+                </div>
+                <div>
+                  <p className="text-sm text-neutral-900">
+                    {a.user_id.slice(0, 8)}...
+                  </p>
+                  <p className="text-xs text-neutral-500">
+                    {CASE_ASSIGNMENT_ROLE_LABELS[a.role as CaseAssignmentRole] ??
+                      a.role}
+                  </p>
+                </div>
+              </div>
+              {canManage && (
+                <button
+                  onClick={() => unassignMutation.mutate(a.user_id)}
+                  disabled={unassignMutation.isPending}
+                  className="rounded-md p-1 text-neutral-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
+                  title="Zuweisung entfernen"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <EmptyState
+          icon={Users}
+          title="Keine Zuweisungen"
+          description="Noch keine Mitarbeiter zugewiesen."
+        />
+      )}
+    </div>
+  );
+}

frontend/src/components/dashboard/AISummaryCard.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { Sparkles } from "lucide-react";
+import { useState } from "react";
+import { Sparkles, RefreshCw } from "lucide-react";
 import type { DashboardData } from "@/lib/types";
 
 interface Props {
   data: DashboardData;
+  onRefresh?: () => void;
 }
 
 function generateSummary(data: DashboardData): string {
@@ -51,18 +53,39 @@ function generateSummary(data: DashboardData): string {
   return parts.join(" ");
 }
 
-export function AISummaryCard({ data }: Props) {
+export function AISummaryCard({ data, onRefresh }: Props) {
+  const [spinning, setSpinning] = useState(false);
   const summary = generateSummary(data);
 
+  function handleRefresh() {
+    if (!onRefresh) return;
+    setSpinning(true);
+    onRefresh();
+    setTimeout(() => setSpinning(false), 1000);
+  }
+
   return (
     <div className="rounded-xl border border-neutral-200 bg-white p-5">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between">
-        <div className="rounded-md bg-violet-50 p-1.5">
+        <div className="flex items-center gap-2">
-          <Sparkles className="h-4 w-4 text-violet-500" />
+          <div className="rounded-md bg-violet-50 p-1.5">
+            <Sparkles className="h-4 w-4 text-violet-500" />
+          </div>
+          <h2 className="text-sm font-semibold text-neutral-900">
+            KI-Zusammenfassung
+          </h2>
         </div>
-        <h2 className="text-sm font-semibold text-neutral-900">
+        {onRefresh && (
-          KI-Zusammenfassung
+          <button
-        </h2>
+            onClick={handleRefresh}
+            title="Aktualisieren"
+            className="rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${spinning ? "animate-spin" : ""}`}
+            />
+          </button>
+        )}
       </div>
       <p className="mt-3 text-sm leading-relaxed text-neutral-700">
         {summary}

frontend/src/components/dashboard/CaseOverviewGrid.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { FolderOpen, FolderPlus, Archive } from "lucide-react";
+import Link from "next/link";
+import { FolderOpen, FolderPlus, Archive, ChevronRight } from "lucide-react";
 import type { CaseSummary } from "@/lib/types";
 
 interface Props {
@@ -16,6 +17,7 @@ export function CaseOverviewGrid({ data }: Props) {
       icon: FolderOpen,
       color: "text-blue-600",
       bg: "bg-blue-50",
+      href: "/cases?status=active",
     },
     {
       label: "Neu (Monat)",
@@ -23,6 +25,7 @@ export function CaseOverviewGrid({ data }: Props) {
       icon: FolderPlus,
       color: "text-violet-600",
       bg: "bg-violet-50",
+      href: "/cases?status=active&since=month",
     },
     {
       label: "Abgeschlossen",
@@ -30,25 +33,33 @@ export function CaseOverviewGrid({ data }: Props) {
       icon: Archive,
       color: "text-neutral-500",
       bg: "bg-neutral-50",
+      href: "/cases?status=closed",
     },
   ];
 
   return (
     <div className="rounded-xl border border-neutral-200 bg-white p-5">
       <h2 className="text-sm font-semibold text-neutral-900">Aktenübersicht</h2>
-      <div className="mt-4 space-y-3">
+      <div className="mt-4 space-y-1">
         {items.map((item) => (
-          <div key={item.label} className="flex items-center justify-between">
+          <Link
+            key={item.label}
+            href={item.href}
+            className="group -mx-2 flex items-center justify-between rounded-lg px-2 py-2 transition-colors hover:bg-neutral-50"
+          >
             <div className="flex items-center gap-2.5">
               <div className={`rounded-md p-1.5 ${item.bg}`}>
                 <item.icon className={`h-4 w-4 ${item.color}`} />
               </div>
               <span className="text-sm text-neutral-600">{item.label}</span>
             </div>
-            <span className="text-lg font-semibold tabular-nums text-neutral-900">
+            <div className="flex items-center gap-1.5">
-              {item.value}
+              <span className="text-lg font-semibold tabular-nums text-neutral-900">
-            </span>
+                {item.value}
-          </div>
+              </span>
+              <ChevronRight className="h-4 w-4 text-neutral-300 transition-colors group-hover:text-neutral-500" />
+            </div>
+          </Link>
         ))}
       </div>
     </div>

frontend/src/components/dashboard/DeadlineTrafficLights.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import Link from "next/link";
 import { AlertTriangle, Clock, CheckCircle } from "lucide-react";
 import type { DeadlineSummary } from "@/lib/types";
 
@@ -27,10 +28,9 @@ function AnimatedCount({ value }: { value: number }) {
 
 interface Props {
   data: DeadlineSummary;
-  onFilter?: (filter: "overdue" | "this_week" | "ok") => void;
 }
 
-export function DeadlineTrafficLights({ data, onFilter }: Props) {
+export function DeadlineTrafficLights({ data }: Props) {
   const safe = data ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 };
   const cards = [
     {
@@ -38,6 +38,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
       label: "Überfällig",
       count: safe.overdue_count ?? 0,
       icon: AlertTriangle,
+      href: "/fristen?status=overdue",
       bg: "bg-red-50",
       border: "border-red-200",
       iconColor: "text-red-500",
@@ -51,6 +52,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
       label: "Diese Woche",
       count: safe.due_this_week ?? 0,
       icon: Clock,
+      href: "/fristen?status=this_week",
       bg: "bg-amber-50",
       border: "border-amber-200",
       iconColor: "text-amber-500",
@@ -64,6 +66,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
       label: "Im Zeitplan",
       count: (safe.ok_count ?? 0) + (safe.due_next_week ?? 0),
       icon: CheckCircle,
+      href: "/fristen?status=ok",
       bg: "bg-emerald-50",
       border: "border-emerald-200",
       iconColor: "text-emerald-500",
@@ -77,9 +80,9 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
       {cards.map((card) => (
-        <button
+        <Link
           key={card.key}
-          onClick={() => onFilter?.(card.key)}
+          href={card.href}
           className={`group relative overflow-hidden rounded-xl border ${card.border} ${card.bg} ${card.ring} p-6 text-left transition-all hover:shadow-md active:scale-[0.98]`}
         >
           {card.pulse && (
@@ -99,7 +102,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
           <div className={`mt-4 text-4xl font-bold tracking-tight ${card.countColor}`}>
             <AnimatedCount value={card.count} />
           </div>
-        </button>
+        </Link>
       ))}
     </div>
   );

frontend/src/components/dashboard/QuickActions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
+import { FolderPlus, Clock, Sparkles, CalendarPlus } from "lucide-react";
 
 const actions = [
   {
@@ -12,22 +12,22 @@ const actions = [
   },
   {
     label: "Frist eintragen",
-    href: "/fristen",
+    href: "/fristen/neu",
     icon: Clock,
     color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
   },
+  {
+    label: "Neuer Termin",
+    href: "/termine/neu",
+    icon: CalendarPlus,
+    color: "text-emerald-600 bg-emerald-50 hover:bg-emerald-100",
+  },
   {
     label: "AI Analyse",
     href: "/ai/extract",
     icon: Sparkles,
     color: "text-violet-600 bg-violet-50 hover:bg-violet-100",
   },
-  {
-    label: "CalDAV Sync",
-    href: "/einstellungen",
-    icon: CalendarSync,
-    color: "text-emerald-600 bg-emerald-50 hover:bg-emerald-100",
-  },
 ];
 
 export function QuickActions() {

frontend/src/components/dashboard/RecentActivityList.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import Link from "next/link";
+import { formatDistanceToNow, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  FileText,
+  Scale,
+  Calendar,
+  Clock,
+  MessageSquare,
+  ChevronRight,
+} from "lucide-react";
+import type { RecentActivity } from "@/lib/types";
+
+const EVENT_ICONS: Record<string, typeof FileText> = {
+  status_changed: Scale,
+  deadline_created: Clock,
+  appointment_created: Calendar,
+  document_uploaded: FileText,
+  note_added: MessageSquare,
+};
+
+interface Props {
+  activities: RecentActivity[];
+}
+
+export function RecentActivityList({ activities }: Props) {
+  const safe = Array.isArray(activities) ? activities : [];
+
+  if (safe.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-xl border border-neutral-200 bg-white p-5">
+      <h2 className="text-sm font-semibold text-neutral-900">
+        Letzte Aktivität
+      </h2>
+      <div className="mt-3 divide-y divide-neutral-100">
+        {safe.map((activity) => {
+          const Icon = EVENT_ICONS[activity.event_type ?? ""] ?? FileText;
+          const timeAgo = activity.created_at
+            ? formatDistanceToNow(parseISO(activity.created_at), {
+                addSuffix: true,
+                locale: de,
+              })
+            : "";
+
+          return (
+            <Link
+              key={activity.id}
+              href={`/cases/${activity.case_id}`}
+              className="group flex items-center gap-3 py-2.5 transition-colors first:pt-0 last:pb-0 hover:bg-neutral-50 -mx-5 px-5"
+            >
+              <div className="rounded-md bg-neutral-100 p-1.5">
+                <Icon className="h-3.5 w-3.5 text-neutral-500" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm text-neutral-900">
+                  {activity.title}
+                </p>
+                <div className="flex items-center gap-2 text-xs text-neutral-500">
+                  <span>{activity.case_number}</span>
+                  {timeAgo && (
+                    <>
+                      <span className="text-neutral-300">·</span>
+                      <span>{timeAgo}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              <ChevronRight className="h-4 w-4 shrink-0 text-neutral-300 transition-colors group-hover:text-neutral-500" />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/UpcomingTimeline.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import Link from "next/link";
 import { format, parseISO, isToday, isTomorrow } from "date-fns";
 import { de } from "date-fns/locale";
-import { Clock, Calendar, MapPin } from "lucide-react";
+import { Clock, Calendar, MapPin, ChevronRight } from "lucide-react";
 import type { UpcomingDeadline, UpcomingAppointment } from "@/lib/types";
 
 interface Props {
@@ -80,8 +81,12 @@ export function UpcomingTimeline({ deadlines, appointments }: Props) {
 function TimelineEntry({ item }: { item: TimelineItem }) {
   if (item.type === "deadline") {
     const d = item.data;
+    const href = `/fristen/${d.id}`;
     return (
-      <div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
+      <Link
+        href={href}
+        className="group flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5 transition-colors hover:border-neutral-200 hover:bg-neutral-100/50"
+      >
         <div className="mt-0.5 rounded-md bg-amber-50 p-1">
           <Clock className="h-3.5 w-3.5 text-amber-500" />
         </div>
@@ -90,19 +95,40 @@ function TimelineEntry({ item }: { item: TimelineItem }) {
             {d.title}
           </p>
           <p className="mt-0.5 truncate text-xs text-neutral-500">
-            {d.case_number} · {d.case_title}
+            {d.case_id ? (
+              <span
+                onClick={(e) => e.stopPropagation()}
+                className="inline"
+              >
+                <Link
+                  href={`/cases/${d.case_id}`}
+                  className="underline decoration-neutral-300 hover:text-neutral-900 hover:decoration-neutral-500"
+                >
+                  {d.case_number}
+                </Link>
+                {" · "}
+              </span>
+            ) : (
+              <>{d.case_number} · </>
+            )}
+            {d.case_title}
           </p>
         </div>
-        <span className="shrink-0 text-xs font-medium text-amber-600">
+        <div className="flex shrink-0 items-center gap-1.5">
-          Frist
+          <span className="text-xs font-medium text-amber-600">Frist</span>
-        </span>
+          <ChevronRight className="h-3.5 w-3.5 text-neutral-300 transition-colors group-hover:text-neutral-500" />
-      </div>
+        </div>
+      </Link>
     );
   }
 
   const a = item.data;
+  const href = `/termine/${a.id}`;
   return (
-    <div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
+    <Link
+      href={href}
+      className="group flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5 transition-colors hover:border-neutral-200 hover:bg-neutral-100/50"
+    >
       <div className="mt-0.5 rounded-md bg-blue-50 p-1">
         <Calendar className="h-3.5 w-3.5 text-blue-500" />
       </div>
@@ -121,7 +147,20 @@ function TimelineEntry({ item }: { item: TimelineItem }) {
               </span>
             </>
           )}
-          {a.case_number && (
+          {a.case_number && a.case_id && (
+            <>
+              <span className="text-neutral-300">·</span>
+              <span onClick={(e) => e.stopPropagation()}>
+                <Link
+                  href={`/cases/${a.case_id}`}
+                  className="underline decoration-neutral-300 hover:text-neutral-900 hover:decoration-neutral-500"
+                >
+                  {a.case_number}
+                </Link>
+              </span>
+            </>
+          )}
+          {a.case_number && !a.case_id && (
             <>
               <span className="text-neutral-300">·</span>
               <span>{a.case_number}</span>
@@ -129,9 +168,10 @@ function TimelineEntry({ item }: { item: TimelineItem }) {
           )}
         </div>
       </div>
-      <span className="shrink-0 text-xs font-medium text-blue-600">
+      <div className="flex shrink-0 items-center gap-1.5">
-        Termin
+        <span className="text-xs font-medium text-blue-600">Termin</span>
-      </span>
+        <ChevronRight className="h-3.5 w-3.5 text-neutral-300 transition-colors group-hover:text-neutral-500" />
-    </div>
+      </div>
+    </Link>
   );
 }

frontend/src/components/deadlines/DeadlineList.tsx

@@ -10,7 +10,14 @@ import { toast } from "sonner";
 import { useState, useMemo } from "react";
 import { EmptyState } from "@/components/ui/EmptyState";
 
-type StatusFilter = "all" | "pending" | "completed" | "overdue";
+type StatusFilter = "all" | "pending" | "completed" | "overdue" | "this_week" | "ok";
+
+function mapUrlStatus(status?: string): StatusFilter {
+  if (status === "overdue") return "overdue";
+  if (status === "this_week") return "this_week";
+  if (status === "ok") return "ok";
+  return "all";
+}
 
 function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
   if (deadline.status === "completed") return "green";
@@ -47,9 +54,15 @@ const urgencyConfig = {
 const selectClass =
   "rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700 transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400 outline-none";
 
-export function DeadlineList() {
+interface Props {
+  initialStatus?: string;
+}
+
+export function DeadlineList({ initialStatus }: Props) {
   const queryClient = useQueryClient();
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>(
+    mapUrlStatus(initialStatus),
+  );
   const [caseFilter, setCaseFilter] = useState<string>("all");
 
   const { data: deadlines, isLoading } = useQuery({
@@ -90,6 +103,18 @@ export function DeadlineList() {
         if (d.status === "completed") return false;
         if (!isPast(parseISO(d.due_date))) return false;
       }
+      if (statusFilter === "this_week") {
+        if (d.status === "completed") return false;
+        const due = parseISO(d.due_date);
+        if (isPast(due)) return false;
+        if (!isThisWeek(due, { weekStartsOn: 1 })) return false;
+      }
+      if (statusFilter === "ok") {
+        if (d.status === "completed") return false;
+        const due = parseISO(d.due_date);
+        if (isPast(due)) return false;
+        if (isThisWeek(due, { weekStartsOn: 1 })) return false;
+      }
       if (caseFilter !== "all" && d.case_id !== caseFilter) return false;
       return true;
     });
@@ -144,10 +169,10 @@ export function DeadlineList() {
         </button>
         <button
           onClick={() =>
-            setStatusFilter(statusFilter === "pending" ? "all" : "pending")
+            setStatusFilter(statusFilter === "this_week" ? "all" : "this_week")
           }
           className={`rounded-lg border p-3 text-left transition-all ${
-            statusFilter === "pending"
+            statusFilter === "this_week"
               ? "border-amber-300 bg-amber-50 ring-1 ring-amber-200"
               : "border-neutral-200 bg-white hover:bg-neutral-50"
           }`}
@@ -158,9 +183,11 @@ export function DeadlineList() {
           <div className="text-xs text-neutral-500">Diese Woche</div>
         </button>
         <button
-          onClick={() => setStatusFilter("all")}
+          onClick={() =>
+            setStatusFilter(statusFilter === "ok" ? "all" : "ok")
+          }
           className={`rounded-lg border p-3 text-left transition-all ${
-            statusFilter === "all"
+            statusFilter === "ok"
               ? "border-green-300 bg-green-50 ring-1 ring-green-200"
               : "border-neutral-200 bg-white hover:bg-neutral-50"
           }`}
@@ -187,6 +214,8 @@ export function DeadlineList() {
           <option value="pending">Offen</option>
           <option value="completed">Erledigt</option>
           <option value="overdue">Überfällig</option>
+          <option value="this_week">Diese Woche</option>
+          <option value="ok">Im Zeitplan</option>
         </select>
         {Array.isArray(cases) && cases.length > 0 && (
           <select

frontend/src/components/layout/Breadcrumb.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: BreadcrumbItem[];
+}
+
+export function Breadcrumb({ items }: Props) {
+  return (
+    <nav aria-label="Breadcrumb" className="mb-4 flex items-center gap-1 text-sm text-neutral-500">
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        return (
+          <span key={i} className="flex items-center gap-1">
+            {i > 0 && <ChevronRight className="h-3.5 w-3.5 text-neutral-300" />}
+            {isLast || !item.href ? (
+              <span className={isLast ? "font-medium text-neutral-900" : ""}>
+                {item.label}
+              </span>
+            ) : (
+              <Link
+                href={item.href}
+                className="transition-colors hover:text-neutral-900"
+              >
+                {item.label}
+              </Link>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

frontend/src/components/layout/Sidebar.tsx

@@ -13,19 +13,32 @@ import {
   X,
 } from "lucide-react";
 import { useState, useEffect } from "react";
+import { usePermissions } from "@/lib/hooks/usePermissions";
 
-const navigation = [
+interface NavItem {
+  name: string;
+  href: string;
+  icon: typeof LayoutDashboard;
+  permission?: string;
+}
+
+const allNavigation: NavItem[] = [
   { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
   { name: "Akten", href: "/cases", icon: FolderOpen },
   { name: "Fristen", href: "/fristen", icon: Clock },
   { name: "Termine", href: "/termine", icon: Calendar },
-  { name: "AI Analyse", href: "/ai/extract", icon: Brain },
+  { name: "AI Analyse", href: "/ai/extract", icon: Brain, permission: "ai_extraction" },
-  { name: "Einstellungen", href: "/einstellungen", icon: Settings },
+  { name: "Einstellungen", href: "/einstellungen", icon: Settings, permission: "manage_settings" },
 ];
 
 export function Sidebar() {
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = useState(false);
+  const { can, isLoading: permLoading } = usePermissions();
+
+  const navigation = allNavigation.filter(
+    (item) => !item.permission || permLoading || can(item.permission),
+  );
 
   // Close on route change
   useEffect(() => {

frontend/src/components/notes/NotesList.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Note } from "@/lib/types";
+import { format, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import { Plus, Pencil, Trash2, X, Check, MessageSquare } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+interface NotesListProps {
+  parentType: "case" | "deadline" | "appointment" | "case_event";
+  parentId: string;
+}
+
+export function NotesList({ parentType, parentId }: NotesListProps) {
+  const queryClient = useQueryClient();
+  const queryKey = ["notes", parentType, parentId];
+
+  const [newContent, setNewContent] = useState("");
+  const [showNew, setShowNew] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editContent, setEditContent] = useState("");
+
+  const { data: notes, isLoading } = useQuery({
+    queryKey,
+    queryFn: () =>
+      api.get<Note[]>(`/notes?${parentType}_id=${parentId}`),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (content: string) => {
+      const body: Record<string, string> = {
+        content,
+        [`${parentType}_id`]: parentId,
+      };
+      return api.post<Note>("/notes", body);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+      setNewContent("");
+      setShowNew(false);
+      toast.success("Notiz erstellt");
+    },
+    onError: () => toast.error("Fehler beim Erstellen der Notiz"),
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, content }: { id: string; content: string }) =>
+      api.put<Note>(`/notes/${id}`, { content }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+      setEditingId(null);
+      toast.success("Notiz aktualisiert");
+    },
+    onError: () => toast.error("Fehler beim Aktualisieren der Notiz"),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => api.delete(`/notes/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+      toast.success("Notiz geloescht");
+    },
+    onError: () => toast.error("Fehler beim Loeschen der Notiz"),
+  });
+
+  function handleCreate() {
+    if (!newContent.trim()) return;
+    createMutation.mutate(newContent.trim());
+  }
+
+  function handleUpdate(id: string) {
+    if (!editContent.trim()) return;
+    updateMutation.mutate({ id, content: editContent.trim() });
+  }
+
+  function startEdit(note: Note) {
+    setEditingId(note.id);
+    setEditContent(note.content);
+  }
+
+  const notesList = Array.isArray(notes) ? notes : [];
+
+  return (
+    <div className="rounded-lg border border-neutral-200 bg-white">
+      <div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
+        <h3 className="text-sm font-medium text-neutral-900">Notizen</h3>
+        {!showNew && (
+          <button
+            onClick={() => setShowNew(true)}
+            className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Neu
+          </button>
+        )}
+      </div>
+
+      {showNew && (
+        <div className="border-b border-neutral-100 p-4">
+          <textarea
+            value={newContent}
+            onChange={(e) => setNewContent(e.target.value)}
+            rows={3}
+            autoFocus
+            placeholder="Notiz schreiben..."
+            className="w-full rounded-md border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+          />
+          <div className="mt-2 flex justify-end gap-2">
+            <button
+              onClick={() => {
+                setShowNew(false);
+                setNewContent("");
+              }}
+              className="rounded-md px-2.5 py-1 text-xs text-neutral-500 hover:bg-neutral-50"
+            >
+              Abbrechen
+            </button>
+            <button
+              onClick={handleCreate}
+              disabled={!newContent.trim() || createMutation.isPending}
+              className="rounded-md bg-neutral-900 px-2.5 py-1 text-xs font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+            >
+              {createMutation.isPending ? "Speichern..." : "Speichern"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="space-y-2 p-4">
+          {[1, 2].map((i) => (
+            <div key={i} className="h-12 animate-pulse rounded-md bg-neutral-100" />
+          ))}
+        </div>
+      ) : notesList.length === 0 ? (
+        <div className="flex flex-col items-center py-8 text-center">
+          <MessageSquare className="h-5 w-5 text-neutral-300" />
+          <p className="mt-2 text-sm text-neutral-400">
+            Keine Notizen vorhanden.
+          </p>
+        </div>
+      ) : (
+        <div className="divide-y divide-neutral-100">
+          {notesList.map((note) => (
+            <div key={note.id} className="group px-4 py-3">
+              {editingId === note.id ? (
+                <div>
+                  <textarea
+                    value={editContent}
+                    onChange={(e) => setEditContent(e.target.value)}
+                    rows={3}
+                    autoFocus
+                    className="w-full rounded-md border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+                  />
+                  <div className="mt-2 flex justify-end gap-2">
+                    <button
+                      onClick={() => setEditingId(null)}
+                      className="rounded-md p-1 text-neutral-400 hover:bg-neutral-50 hover:text-neutral-600"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </button>
+                    <button
+                      onClick={() => handleUpdate(note.id)}
+                      disabled={!editContent.trim() || updateMutation.isPending}
+                      className="rounded-md p-1 text-neutral-400 hover:bg-neutral-50 hover:text-green-600"
+                    >
+                      <Check className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <div className="flex items-start justify-between">
+                    <p className="whitespace-pre-wrap text-sm text-neutral-700">
+                      {note.content}
+                    </p>
+                    <div className="ml-4 flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                      <button
+                        onClick={() => startEdit(note)}
+                        className="rounded p-1 text-neutral-400 hover:bg-neutral-50 hover:text-neutral-600"
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </button>
+                      <button
+                        onClick={() => deleteMutation.mutate(note.id)}
+                        className="rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-500"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </button>
+                    </div>
+                  </div>
+                  <p className="mt-1 text-xs text-neutral-400">
+                    {format(parseISO(note.created_at), "d. MMM yyyy, HH:mm", {
+                      locale: de,
+                    })}
+                    {note.updated_at !== note.created_at && " (bearbeitet)"}
+                  </p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/settings/TeamSettings.tsx

@@ -3,27 +3,36 @@
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { UserPlus, Trash2, Shield, Crown, User } from "lucide-react";
+import { UserPlus, Trash2, Crown, Scale, Briefcase, FileText, Phone } from "lucide-react";
 import { api } from "@/lib/api";
-import type { UserTenant } from "@/lib/types";
+import type { UserTenant, UserRole } from "@/lib/types";
+import { ROLE_LABELS } from "@/lib/types";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { EmptyState } from "@/components/ui/EmptyState";
+import { usePermissions } from "@/lib/hooks/usePermissions";
 
-const ROLE_LABELS: Record<string, { label: string; icon: typeof Crown }> = {
+const ROLE_CONFIG: Record<UserRole, { label: string; icon: typeof Crown }> = {
-  owner: { label: "Eigentümer", icon: Crown },
+  owner: { label: ROLE_LABELS.owner, icon: Crown },
-  admin: { label: "Administrator", icon: Shield },
+  partner: { label: ROLE_LABELS.partner, icon: Scale },
-  member: { label: "Mitglied", icon: User },
+  associate: { label: ROLE_LABELS.associate, icon: Briefcase },
+  paralegal: { label: ROLE_LABELS.paralegal, icon: FileText },
+  secretary: { label: ROLE_LABELS.secretary, icon: Phone },
 };
 
+const INVITE_ROLES: UserRole[] = ["partner", "associate", "paralegal", "secretary"];
+
 export function TeamSettings() {
   const queryClient = useQueryClient();
+  const { can, role: myRole } = usePermissions();
   const tenantId =
     typeof window !== "undefined"
       ? localStorage.getItem("kanzlai_tenant_id")
       : null;
 
   const [email, setEmail] = useState("");
-  const [role, setRole] = useState("member");
+  const [role, setRole] = useState<string>("associate");
+
+  const canManageTeam = can("manage_team");
 
   const {
     data: members,
@@ -42,7 +51,7 @@ export function TeamSettings() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["tenant-members"] });
       setEmail("");
-      setRole("member");
+      setRole("associate");
       toast.success("Benutzer eingeladen");
     },
     onError: (err: { error?: string }) => {
@@ -62,6 +71,19 @@ export function TeamSettings() {
     },
   });
 
+  const updateRoleMutation = useMutation({
+    mutationFn: ({ userId, newRole }: { userId: string; newRole: string }) =>
+      api.put(`/tenants/${tenantId}/members/${userId}/role`, { role: newRole }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tenant-members"] });
+      queryClient.invalidateQueries({ queryKey: ["me"] });
+      toast.success("Rolle aktualisiert");
+    },
+    onError: (err: { error?: string }) => {
+      toast.error(err.error || "Fehler beim Aktualisieren der Rolle");
+    },
+  });
+
   const handleInvite = (e: React.FormEvent) => {
     e.preventDefault();
     if (!email.trim()) return;
@@ -81,7 +103,7 @@ export function TeamSettings() {
   if (error) {
     return (
       <EmptyState
-        icon={User}
+        icon={Briefcase}
         title="Fehler beim Laden"
         description="Team-Mitglieder konnten nicht geladen werden."
       />
@@ -90,38 +112,44 @@ export function TeamSettings() {
 
   return (
     <div className="space-y-6">
-      {/* Invite Form */}
+      {/* Invite Form — only for owners/partners */}
-      <form onSubmit={handleInvite} className="flex flex-col gap-3 sm:flex-row">
+      {canManageTeam && (
-        <input
+        <form onSubmit={handleInvite} className="flex flex-col gap-3 sm:flex-row">
-          type="email"
+          <input
-          value={email}
+            type="email"
-          onChange={(e) => setEmail(e.target.value)}
+            value={email}
-          placeholder="name@example.com"
+            onChange={(e) => setEmail(e.target.value)}
-          className="flex-1 rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+            placeholder="name@example.com"
-        />
+            className="flex-1 rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-        <select
+          />
-          value={role}
+          <select
-          onChange={(e) => setRole(e.target.value)}
+            value={role}
-          className="rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+            onChange={(e) => setRole(e.target.value)}
-        >
+            className="rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-          <option value="member">Mitglied</option>
+          >
-          <option value="admin">Administrator</option>
+            {INVITE_ROLES.map((r) => (
-        </select>
+              <option key={r} value={r}>
-        <button
+                {ROLE_LABELS[r]}
-          type="submit"
+              </option>
-          disabled={inviteMutation.isPending || !email.trim()}
+            ))}
-          className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+          </select>
-        >
+          <button
-          <UserPlus className="h-3.5 w-3.5" />
+            type="submit"
-          {inviteMutation.isPending ? "Einladen..." : "Einladen"}
+            disabled={inviteMutation.isPending || !email.trim()}
-        </button>
+            className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
-      </form>
+          >
+            <UserPlus className="h-3.5 w-3.5" />
+            {inviteMutation.isPending ? "Einladen..." : "Einladen"}
+          </button>
+        </form>
+      )}
 
       {/* Members List */}
       {Array.isArray(members) && members.length > 0 ? (
         <div className="overflow-hidden rounded-md border border-neutral-200">
           {members.map((member, i) => {
-            const roleInfo = ROLE_LABELS[member.role] || ROLE_LABELS.member;
+            const roleKey = (member.role as UserRole) || "associate";
+            const roleInfo = ROLE_CONFIG[roleKey] || ROLE_CONFIG.associate;
             const RoleIcon = roleInfo.icon;
             return (
               <div
@@ -141,23 +169,48 @@ export function TeamSettings() {
                     <p className="text-xs text-neutral-500">{roleInfo.label}</p>
                   </div>
                 </div>
-                {member.role !== "owner" && (
+                <div className="flex items-center gap-2">
-                  <button
+                  {/* Role dropdown — only for owners/partners, not for the member's own row if they are owner */}
-                    onClick={() => removeMutation.mutate(member.user_id)}
+                  {canManageTeam && member.role !== "owner" && (
-                    disabled={removeMutation.isPending}
+                    <select
-                    className="rounded-md p-1.5 text-neutral-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
+                      value={member.role}
-                    title="Mitglied entfernen"
+                      onChange={(e) =>
-                  >
+                        updateRoleMutation.mutate({
-                    <Trash2 className="h-4 w-4" />
+                          userId: member.user_id,
-                  </button>
+                          newRole: e.target.value,
-                )}
+                        })
+                      }
+                      disabled={updateRoleMutation.isPending}
+                      className="rounded-md border border-neutral-200 px-2 py-1 text-xs outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+                    >
+                      {myRole === "owner" && (
+                        <option value="owner">{ROLE_LABELS.owner}</option>
+                      )}
+                      {INVITE_ROLES.map((r) => (
+                        <option key={r} value={r}>
+                          {ROLE_LABELS[r]}
+                        </option>
+                      ))}
+                    </select>
+                  )}
+                  {canManageTeam && member.role !== "owner" && (
+                    <button
+                      onClick={() => removeMutation.mutate(member.user_id)}
+                      disabled={removeMutation.isPending}
+                      className="rounded-md p-1.5 text-neutral-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
+                      title="Mitglied entfernen"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
               </div>
             );
           })}
         </div>
       ) : (
         <EmptyState
-          icon={User}
+          icon={Briefcase}
           title="Noch keine Mitglieder"
           description="Laden Sie Teammitglieder per E-Mail ein."
         />

frontend/src/lib/hooks/usePermissions.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { UserInfo } from "@/lib/types";
+
+export function usePermissions() {
+  const { data, isLoading } = useQuery({
+    queryKey: ["me"],
+    queryFn: () => api.get<UserInfo>("/me"),
+    staleTime: 60 * 1000,
+  });
+
+  const role = data?.role ?? null;
+  const permissions = data?.permissions ?? [];
+
+  function can(permission: string): boolean {
+    return permissions.includes(permission);
+  }
+
+  return {
+    role,
+    permissions,
+    can,
+    isLoading,
+    userId: data?.user_id ?? null,
+    tenantId: data?.tenant_id ?? null,
+  };
+}

frontend/src/lib/types.ts

@@ -176,6 +176,53 @@ export interface CalDAVSyncResponse {
   last_sync_at?: null;
 }
 
+export interface Note {
+  id: string;
+  tenant_id: string;
+  case_id?: string;
+  deadline_id?: string;
+  appointment_id?: string;
+  case_event_id?: string;
+  content: string;
+  created_by?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CaseAssignment {
+  id: string;
+  case_id: string;
+  user_id: string;
+  role: string;
+  assigned_at: string;
+}
+
+export interface UserInfo {
+  user_id: string;
+  tenant_id: string;
+  role: UserRole;
+  permissions: string[];
+}
+
+export type UserRole = "owner" | "partner" | "associate" | "paralegal" | "secretary";
+
+export const ROLE_LABELS: Record<UserRole, string> = {
+  owner: "Inhaber",
+  partner: "Partner",
+  associate: "Anwalt",
+  paralegal: "Paralegal",
+  secretary: "Sekretariat",
+};
+
+export const CASE_ASSIGNMENT_ROLES = ["lead", "team", "viewer"] as const;
+export type CaseAssignmentRole = (typeof CASE_ASSIGNMENT_ROLES)[number];
+
+export const CASE_ASSIGNMENT_ROLE_LABELS: Record<CaseAssignmentRole, string> = {
+  lead: "Federführend",
+  team: "Team",
+  viewer: "Einsicht",
+};
+
 export interface ApiError {
   error: string;
   status: number;
@@ -223,11 +270,47 @@ export interface UpcomingAppointment {
   case_title?: string;
 }
 
+export interface RecentActivity {
+  id: string;
+  event_type?: string;
+  title: string;
+  case_id: string;
+  case_number: string;
+  event_date?: string;
+  created_at: string;
+}
+
 export interface DashboardData {
   deadline_summary: DeadlineSummary;
   case_summary: CaseSummary;
   upcoming_deadlines: UpcomingDeadline[];
   upcoming_appointments: UpcomingAppointment[];
+  recent_activity?: RecentActivity[];
+}
+
+// Notes
+export interface Note {
+  id: string;
+  tenant_id: string;
+  case_id?: string;
+  deadline_id?: string;
+  appointment_id?: string;
+  case_event_id?: string;
+  content: string;
+  created_by?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+// Recent Activity
+export interface RecentActivity {
+  id: string;
+  event_type?: string;
+  title: string;
+  case_id: string;
+  case_number: string;
+  event_date?: string;
+  created_at: string;
 }
 
 // AI Extraction types