feat: refactor case detail from useState tabs to URL-based nested routes

Refactors the monolithic cases/[id]/page.tsx into Next.js nested routes with a shared layout for the case header and tab navigation bar. Route structure: - cases/[id]/layout.tsx — case header + tab bar (active tab from URL) - cases/[id]/page.tsx — redirects to ./verlauf - cases/[id]/verlauf/page.tsx — timeline tab - cases/[id]/fristen/page.tsx — deadlines tab - cases/[id]/dokumente/page.tsx — documents tab (with upload) - cases/[id]/parteien/page.tsx — parties tab - cases/[id]/notizen/page.tsx — notes tab (new, uses NotesList) New shared components: - Breadcrumb.tsx — reusable breadcrumb navigation - NotesList.tsx — reusable notes CRUD (inline create/edit/delete) - Note type added to types.ts Benefits: deep linking, browser back/forward, bookmarkable tabs.
docs: design document for dashboard redesign + detail pages
2026-03-25 19:28:29 +01:00 · 2026-03-25 18:51:44 +01:00 · 2026-03-25 18:49:48 +01:00 · 2026-03-25 18:40:15 +01:00 · 2026-03-25 18:35:28 +01:00 · 2026-03-25 18:34:11 +01:00
28 changed files with 1421 additions and 379 deletions
--- a/DESIGN-dashboard-redesign.md
+++ b/DESIGN-dashboard-redesign.md
@@ -0,0 +1,665 @@
+# Design: Dashboard Redesign + Detail Pages
+
+**Task:** t-kz-060
+**Author:** cronus (inventor)
+**Date:** 2026-03-25
+**Status:** Design proposal
+
+---
+
+## Problem Statement
+
+The current dashboard is a read-only status board. Cards show counts but don't link anywhere. Timeline items are inert. Quick actions navigate to list pages rather than creation flows. There are no detail pages for individual events, deadlines, or appointments. Notes don't exist as a first-class entity. Case detail tabs use local state instead of URL segments, breaking deep linking and back navigation.
+
+## Design Principles
+
+1. **Everything clickable goes somewhere** — no dead-end UI
+2. **Breadcrumb navigation** — always know where you are, one click to go back
+3. **German labels throughout** — consistent with existing convention
+4. **Mobile responsive** — sidebar collapses, cards stack, touch targets >= 44px
+5. **Information density over whitespace** — law firm users want data, not decoration
+6. **URL-driven state** — tabs, filters, and views reflected in the URL for deep linking
+
+---
+
+## Part 1: Dashboard Redesign
+
+### 1.1 Traffic Light Cards → Click-to-Filter
+
+**Current:** Three cards (Ueberfaellig / Diese Woche / Im Zeitplan) show counts. `onFilter` prop exists but is never wired up in `dashboard/page.tsx`.
+
+**Proposed:**
+
+Clicking a traffic light card navigates to `/fristen?status={filter}`:
+
+| Card | Navigation Target |
+|------|------------------|
+| Ueberfaellig (red) | `/fristen?status=overdue` |
+| Diese Woche (amber) | `/fristen?status=this_week` |
+| Im Zeitplan (green) | `/fristen?status=ok` |
+
+**Implementation:**
+- Replace `onFilter` callback with `next/link` navigation using `href`
+- `DeadlineTrafficLights` becomes a pure link-based component (no callback needed)
+- `/fristen` page reads `searchParams.status` and pre-applies the filter
+- The DeadlineList component already supports status filtering — just needs to read from URL
+
+**Changes:**
+- `DeadlineTrafficLights.tsx`: Replace `<button onClick>` with `<Link href="/fristen?status=...">`
+- `fristen/page.tsx`: Read `searchParams` and pass as initial filter to DeadlineList
+- `DeadlineList.tsx`: Accept `initialStatus` prop from URL params
+
+### 1.2 Case Overview Grid → Click-to-Filter
+
+**Current:** Three static metrics (Aktive Akten / Neu / Abgeschlossen). No links.
+
+**Proposed:**
+
+| Card | Navigation Target |
+|------|------------------|
+| Aktive Akten | `/cases?status=active` |
+| Neu (Monat) | `/cases?status=active&since=month` |
+| Abgeschlossen | `/cases?status=closed` |
+
+**Implementation:**
+- Wrap each metric row in `<Link>` to `/cases` with appropriate query params
+- Cases list page already has filtering — needs to read URL params on mount
+- Add visual hover state (arrow icon on hover, background highlight)
+
+**Changes:**
+- `CaseOverviewGrid.tsx`: Each row becomes a `<Link>` with hover arrow
+- `cases/page.tsx`: Read `searchParams` for initial filter state
+
+### 1.3 Timeline Items → Click-to-Navigate
+
+**Current:** Timeline entries show deadline/appointment info but are not clickable. No link to the parent case or the item itself.
+
+**Proposed:**
+
+Each timeline entry becomes a clickable row:
+
+- **Deadline entries**: Click navigates to `/fristen/{id}` (new deadline detail page)
+- **Appointment entries**: Click navigates to `/termine/{id}` (new appointment detail page)
+- **Case reference** (Az. / case_number): Secondary click target linking to `/cases/{case_id}`
+
+**Visual changes:**
+- Add `cursor-pointer` and hover state (`hover:bg-neutral-100` transition)
+- Add a small chevron-right icon on the right edge
+- Case number becomes a subtle underlined link (click stops propagation)
+
+**Data changes:**
+- `UpcomingDeadline` needs `case_id` field (currently missing from the dashboard query — the backend model has it but the SQL join doesn't select it)
+- `UpcomingAppointment` already has `case_id`
+
+**Backend change:**
+- `dashboard_service.go` line 112: Add `d.case_id` to the upcoming deadlines SELECT
+- `DashboardService.UpcomingDeadline` struct: Add `CaseID uuid.UUID` field
+- Frontend `UpcomingDeadline` type: Already has `case_id` (it's in types.ts but the backend doesn't send it)
+
+### 1.4 Quick Actions → Proper Navigation
+
+**Current:** "Frist eintragen" goes to `/fristen` (list page), not a creation flow. "CalDAV Sync" goes to `/einstellungen`.
+
+**Proposed:**
+
+| Action | Current Target | New Target |
+|--------|---------------|------------|
+| Neue Akte | `/cases/new` | `/cases/new` (keep) |
+| Frist eintragen | `/fristen` | `/fristen/neu` (new creation page) |
+| Neuer Termin | (missing) | `/termine/neu` (new creation page) |
+| AI Analyse | `/ai/extract` | `/ai/extract` (keep) |
+
+Replace "CalDAV Sync" with "Neuer Termin" — CalDAV sync is a settings function, not a daily quick action. Creating an appointment is something a secretary does multiple times per day.
+
+**Changes:**
+- `QuickActions.tsx`: Update hrefs, swap CalDAV for appointment creation
+- Create `/fristen/neu/page.tsx` — standalone deadline creation form (select case, fill fields)
+- Create `/termine/neu/page.tsx` — standalone appointment creation form
+
+### 1.5 AI Summary Card → Refresh Button
+
+**Current:** Rule-based summary text, no refresh mechanism. Card regenerates on page load but not on demand.
+
+**Proposed:**
+- Add a small refresh icon button (RefreshCw) in the card header, next to "KI-Zusammenfassung"
+- Clicking it calls `refetch()` on the dashboard query (passed as prop)
+- Show a brief spinning animation during refetch
+- If/when real AI summarization is wired up, this button triggers `POST /api/ai/summarize-dashboard` (future endpoint)
+
+**Changes:**
+- `AISummaryCard.tsx`: Accept `onRefresh` prop, add button with spinning state
+- `dashboard/page.tsx`: Pass `refetch` to AISummaryCard
+
+### 1.6 Dashboard Layout: Add Recent Activity Section
+
+**Current:** The backend returns `recent_activity` (last 10 case events) but the frontend ignores it entirely.
+
+**Proposed:**
+- Add a "Letzte Aktivitaet" section below the timeline, full width
+- Shows the 10 most recent case events in a compact list
+- Each row: event icon (by type) | title | case number (linked) | relative time
+- Clicking a row navigates to the case event detail page `/cases/{case_id}/ereignisse/{event_id}`
+
+**Changes:**
+- New component: `RecentActivityList.tsx` in `components/dashboard/`
+- `dashboard/page.tsx`: Add section below the main grid
+- Add `RecentActivity` type to `types.ts` (needs `case_id` and `event_id` fields from backend)
+- Backend: Add `case_id` and `id` to the recent activity query
+
+---
+
+## Part 2: New Pages
+
+### 2.1 Deadline Detail Page — `/fristen/{id}`
+
+**Route:** `src/app/(app)/fristen/[id]/page.tsx`
+
+**Layout:**
+
+```
+Breadcrumb: Dashboard > Fristen > {deadline.title}
+---------------------------------------------------------+
+| [Status Badge]  {deadline.title}            [Erledigen] |
+| Fällig: 28. März 2026                                   |
+---------------------------------------------------------+
+| Akte: Az. 2024/001 — Müller v. Schmidt  [→ Zur Akte]   |
+| Quelle: Berechnet (R.118 RoP)                          |
+| Ursprüngliches Datum: 25. März 2026                     |
+| Warnungsdatum: 21. März 2026                            |
+---------------------------------------------------------+
+| Notizen                                      [Bearbeiten]|
+| Fristverlängerung beantragt am 20.03.         |
+---------------------------------------------------------+
+| Verlauf                                                  |
+| ○ Erstellt am 15.03.2026                                |
+| ○ Warnung gesendet am 21.03.2026                        |
+---------------------------------------------------------+
+```
+
+**Data requirements:**
+- `GET /api/deadlines/{id}` — new endpoint returning full deadline with case info
+- Returns: Deadline + associated case (number, title, id) + notes
+
+**Sections:**
+1. **Header**: Status badge (Offen/Erledigt/Ueberfaellig), title, "Erledigen" action button
+2. **Due date**: Large, with relative time ("in 3 Tagen" / "vor 2 Tagen ueberfaellig")
+3. **Context panel**: Parent case (linked), source (manual/calculated/caldav), rule reference, original vs adjusted date
+4. **Notes section**: Free-text notes (existing `notes` field on deadline), inline edit
+5. **Activity log**: Timeline of changes to this deadline (future: from case_events filtered by deadline)
+
+**Backend additions:**
+- `GET /api/deadlines/{id}` — new handler returning single deadline with case join
+- Handler: `deadlines.go` add `Get` method
+- Service: `deadline_service.go` add `GetByID` with case join
+
+### 2.2 Appointment Detail Page — `/termine/{id}`
+
+**Route:** `src/app/(app)/termine/[id]/page.tsx`
+
+**Layout:**
+
+```
+Breadcrumb: Dashboard > Termine > {appointment.title}
+---------------------------------------------------------+
+| {appointment.title}                    [Bearbeiten] [X] |
+| Typ: Verhandlung                                        |
+---------------------------------------------------------+
+| Datum: 28. März 2026, 10:00 – 12:00 Uhr                |
+| Ort: UPC München, Saal 3                                |
+---------------------------------------------------------+
+| Akte: Az. 2024/001 — Müller v. Schmidt  [→ Zur Akte]   |
+---------------------------------------------------------+
+| Beschreibung                                             |
+| Erste mündliche Verhandlung...                           |
+---------------------------------------------------------+
+| Notizen                                         [+ Neu] |
+| ○ 25.03. — Mandant über Termin informiert               |
+| ○ 24.03. — Schriftsatz vorbereitet                      |
+---------------------------------------------------------+
+```
+
+**Data requirements:**
+- `GET /api/appointments/{id}` — new endpoint returning single appointment with case info
+- Notes: Uses new `notes` table (see Part 3)
+
+**Backend additions:**
+- `GET /api/appointments/{id}` — new handler
+- Handler: `appointments.go` add `Get` method
+- Service: `appointment_service.go` add `GetByID` with optional case join
+
+### 2.3 Case Event Detail Page — `/cases/{id}/ereignisse/{eventId}`
+
+**Route:** `src/app/(app)/cases/[id]/ereignisse/[eventId]/page.tsx`
+
+**Layout:**
+
+```
+Breadcrumb: Akten > Az. 2024/001 > Verlauf > {event.title}
+---------------------------------------------------------+
+| [Event Type Icon]  {event.title}                        |
+| 25. März 2026, 14:30                                    |
+---------------------------------------------------------+
+| Beschreibung                                             |
+| Statusänderung: aktiv → geschlossen                     |
+---------------------------------------------------------+
+| Metadaten                                                |
+| Erstellt von: max.mustermann@kanzlei.de                 |
+| Typ: status_changed                                     |
+---------------------------------------------------------+
+| Notizen                                         [+ Neu] |
+| (keine Notizen)                                          |
+---------------------------------------------------------+
+```
+
+**Data requirements:**
+- `GET /api/case-events/{id}` — new endpoint
+- Notes: Uses new `notes` table
+
+**Backend additions:**
+- New handler: `case_events.go` with `Get` method
+- New service method: `CaseEventService.GetByID`
+- Or extend existing case handler to include event fetching
+
+### 2.4 Standalone Deadline Creation — `/fristen/neu`
+
+**Route:** `src/app/(app)/fristen/neu/page.tsx`
+
+**Layout:**
+
+```
+Breadcrumb: Fristen > Neue Frist
+---------------------------------------------------------+
+| Neue Frist anlegen                                       |
+---------------------------------------------------------+
+| Akte*:        [Dropdown: Aktenauswahl]                  |
+| Bezeichnung*: [________________________]                |
+| Beschreibung: [________________________]                |
+| Fällig am*:   [Datumsauswahl]                           |
+| Warnung am:   [Datumsauswahl]                           |
+| Notizen:      [Textarea]                                |
+---------------------------------------------------------+
+|                              [Abbrechen]  [Frist anlegen]|
+---------------------------------------------------------+
+```
+
+Reuses existing deadline creation logic but as a standalone page rather than requiring the user to first navigate to a case. Case is selected via dropdown.
+
+### 2.5 Standalone Appointment Creation — `/termine/neu`
+
+**Route:** `src/app/(app)/termine/neu/page.tsx`
+
+Same pattern as deadline creation. Reuses AppointmentModal fields but as a full page form. Appointment can optionally be linked to a case.
+
+### 2.6 Case Detail Tabs → URL Segments
+
+**Current:** Tabs use `useState<TabKey>` — no URL change, no deep linking, no browser back.
+
+**Proposed route structure:**
+
+```
+/cases/{id}              → redirects to /cases/{id}/verlauf
+/cases/{id}/verlauf      → Timeline tab
+/cases/{id}/fristen      → Deadlines tab
+/cases/{id}/dokumente    → Documents tab
+/cases/{id}/parteien     → Parties tab
+/cases/{id}/notizen      → Notes tab (new)
+```
+
+**Implementation approach:**
+
+Use Next.js nested layouts with a shared layout for the case header + tab bar:
+
+```
+src/app/(app)/cases/[id]/
+  layout.tsx              # Case header + tab navigation
+  page.tsx                # Redirect to ./verlauf
+  verlauf/page.tsx        # Timeline
+  fristen/page.tsx        # Deadlines
+  dokumente/page.tsx      # Documents
+  parteien/page.tsx       # Parties
+  notizen/page.tsx        # Notes (new)
+```
+
+The `layout.tsx` fetches case data and renders the header + tab bar. Each child page renders its tab content. The active tab is determined by the current pathname.
+
+**Benefits:**
+- Deep linking: `/cases/abc123/fristen` opens directly to the deadlines tab
+- Browser back button works between tabs
+- Each tab can have its own loading state
+- Bookmarkable
+
+---
+
+## Part 3: Notes System
+
+### 3.1 Data Model
+
+Notes are a polymorphic entity — they can be attached to cases, deadlines, appointments, or case events.
+
+**New table: `kanzlai.notes`**
+
+```sql
+CREATE TABLE kanzlai.notes (
+    id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    tenant_id   UUID NOT NULL REFERENCES kanzlai.tenants(id),
+
+    -- Polymorphic parent reference (exactly one must be set)
+    case_id         UUID REFERENCES kanzlai.cases(id) ON DELETE CASCADE,
+    deadline_id     UUID REFERENCES kanzlai.deadlines(id) ON DELETE CASCADE,
+    appointment_id  UUID REFERENCES kanzlai.appointments(id) ON DELETE CASCADE,
+    case_event_id   UUID REFERENCES kanzlai.case_events(id) ON DELETE CASCADE,
+
+    content     TEXT NOT NULL,
+    created_by  UUID,           -- auth.users reference
+    created_at  TIMESTAMPTZ NOT NULL DEFAULT now(),
+    updated_at  TIMESTAMPTZ NOT NULL DEFAULT now(),
+
+    -- Ensure exactly one parent is set
+    CONSTRAINT notes_single_parent CHECK (
+        (CASE WHEN case_id IS NOT NULL THEN 1 ELSE 0 END +
+         CASE WHEN deadline_id IS NOT NULL THEN 1 ELSE 0 END +
+         CASE WHEN appointment_id IS NOT NULL THEN 1 ELSE 0 END +
+         CASE WHEN case_event_id IS NOT NULL THEN 1 ELSE 0 END) = 1
+    )
+);
+
+-- Indexes for efficient lookup by parent
+CREATE INDEX idx_notes_case ON kanzlai.notes(tenant_id, case_id) WHERE case_id IS NOT NULL;
+CREATE INDEX idx_notes_deadline ON kanzlai.notes(tenant_id, deadline_id) WHERE deadline_id IS NOT NULL;
+CREATE INDEX idx_notes_appointment ON kanzlai.notes(tenant_id, appointment_id) WHERE appointment_id IS NOT NULL;
+CREATE INDEX idx_notes_case_event ON kanzlai.notes(tenant_id, case_event_id) WHERE case_event_id IS NOT NULL;
+
+-- RLS
+ALTER TABLE kanzlai.notes ENABLE ROW LEVEL SECURITY;
+CREATE POLICY notes_tenant_isolation ON kanzlai.notes
+    USING (tenant_id IN (
+        SELECT tenant_id FROM kanzlai.user_tenants WHERE user_id = auth.uid()
+    ));
+```
+
+### 3.2 Why Polymorphic Table vs Separate Tables
+
+**Considered alternatives:**
+
+1. **Separate notes per entity** (case_notes, deadline_notes, etc.) — More tables, duplicated logic, harder to search across all notes.
+2. **Generic `entity_type` + `entity_id` pattern** — Loses FK constraints, can't cascade delete, harder to query with joins.
+3. **Polymorphic with nullable FKs** (chosen) — FK constraints maintained, cascade deletes work, partial indexes keep queries fast, single service/handler. The CHECK constraint ensures data integrity.
+
+### 3.3 Backend Model & API
+
+**Go model:**
+
+```go
+type Note struct {
+    ID            uuid.UUID  `db:"id" json:"id"`
+    TenantID      uuid.UUID  `db:"tenant_id" json:"tenant_id"`
+    CaseID        *uuid.UUID `db:"case_id" json:"case_id,omitempty"`
+    DeadlineID    *uuid.UUID `db:"deadline_id" json:"deadline_id,omitempty"`
+    AppointmentID *uuid.UUID `db:"appointment_id" json:"appointment_id,omitempty"`
+    CaseEventID   *uuid.UUID `db:"case_event_id" json:"case_event_id,omitempty"`
+    Content       string     `db:"content" json:"content"`
+    CreatedBy     *uuid.UUID `db:"created_by" json:"created_by,omitempty"`
+    CreatedAt     time.Time  `db:"created_at" json:"created_at"`
+    UpdatedAt     time.Time  `db:"updated_at" json:"updated_at"`
+}
+```
+
+**API endpoints:**
+
+```
+GET    /api/notes?case_id={id}            # List notes for a case
+GET    /api/notes?deadline_id={id}        # List notes for a deadline
+GET    /api/notes?appointment_id={id}     # List notes for an appointment
+GET    /api/notes?case_event_id={id}      # List notes for a case event
+POST   /api/notes                         # Create note (body includes parent ID)
+PUT    /api/notes/{id}                    # Update note content
+DELETE /api/notes/{id}                    # Delete note
+```
+
+Single endpoint with query parameter filtering — simpler than nested routes, works uniformly across all parent types.
+
+**Service methods:**
+
+```go
+type NoteService struct { db *sqlx.DB }
+
+func (s *NoteService) ListByParent(ctx, tenantID, parentType, parentID) ([]Note, error)
+func (s *NoteService) Create(ctx, tenantID, note) (*Note, error)
+func (s *NoteService) Update(ctx, tenantID, noteID, content) (*Note, error)
+func (s *NoteService) Delete(ctx, tenantID, noteID) error
+```
+
+### 3.4 Notes UI Component
+
+Reusable `<NotesList>` component used on every detail page:
+
+```
+------------------------------------------------------------+
+| Notizen                                            [+ Neu] |
+------------------------------------------------------------+
+| m@kanzlei.de · 25. Mär 2026, 14:30                [X][E] |
+| Fristverlängerung beim Gericht beantragt.                  |
+------------------------------------------------------------+
+| m@kanzlei.de · 24. Mär 2026, 10:15                [X][E] |
+| Mandant telefonisch über Sachstand informiert.             |
+------------------------------------------------------------+
+```
+
+**Props:**
+```typescript
+interface NotesListProps {
+  parentType: "case" | "deadline" | "appointment" | "case_event";
+  parentId: string;
+}
+```
+
+**Features:**
+- Fetches notes via `GET /api/notes?{parentType}_id={parentId}`
+- "Neu" button opens inline textarea (not a modal — faster for quick notes)
+- Each note shows: author, timestamp, content, edit/delete buttons
+- Edit is inline (textarea replaces content)
+- Optimistic updates via react-query mutation + invalidation
+- Empty state: "Keine Notizen vorhanden. Klicken Sie +, um eine Notiz hinzuzufügen."
+
+### 3.5 Migration from `deadlines.notes` Field
+
+The existing `deadlines.notes` text field should be migrated:
+1. For each deadline with a non-null `notes` value, create a corresponding row in the `notes` table with `deadline_id` set
+2. Drop the `deadlines.notes` column after migration
+3. This can be a one-time SQL migration script
+
+---
+
+## Part 4: Breadcrumb Navigation
+
+### 4.1 Breadcrumb Component
+
+New shared component: `src/components/layout/Breadcrumb.tsx`
+
+```typescript
+interface BreadcrumbItem {
+  label: string;
+  href?: string;  // omit for current page (last item)
+}
+
+function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
+  // Renders: Home > Parent > Current
+  // Each item with href is a Link, last item is plain text
+}
+```
+
+**Placement:** At the top of every page, inside the main content area (not in the layout — different pages have different breadcrumbs).
+
+### 4.2 Breadcrumb Patterns
+
+| Page | Breadcrumb |
+|------|-----------|
+| Dashboard | Dashboard |
+| Fristen | Dashboard > Fristen |
+| Fristen Detail | Dashboard > Fristen > {title} |
+| Fristen Neu | Dashboard > Fristen > Neue Frist |
+| Termine | Dashboard > Termine |
+| Termine Detail | Dashboard > Termine > {title} |
+| Termine Neu | Dashboard > Termine > Neuer Termin |
+| Akten | Dashboard > Akten |
+| Akte Detail | Dashboard > Akten > {case_number} |
+| Akte > Fristen | Dashboard > Akten > {case_number} > Fristen |
+| Akte > Notizen | Dashboard > Akten > {case_number} > Notizen |
+| Ereignis Detail | Dashboard > Akten > {case_number} > Verlauf > {title} |
+| Einstellungen | Dashboard > Einstellungen |
+| AI Analyse | Dashboard > AI Analyse |
+
+---
+
+## Part 5: Summary of Backend Changes
+
+### New Endpoints
+
+| Method | Path | Handler | Purpose |
+|--------|------|---------|---------|
+| GET | `/api/deadlines/{id}` | `deadlineH.Get` | Single deadline with case context |
+| GET | `/api/appointments/{id}` | `apptH.Get` | Single appointment with case context |
+| GET | `/api/case-events/{id}` | `eventH.Get` | Single case event |
+| GET | `/api/notes` | `noteH.List` | List notes (filtered by parent) |
+| POST | `/api/notes` | `noteH.Create` | Create note |
+| PUT | `/api/notes/{id}` | `noteH.Update` | Update note |
+| DELETE | `/api/notes/{id}` | `noteH.Delete` | Delete note |
+
+### Modified Endpoints
+
+| Endpoint | Change |
+|----------|--------|
+| `GET /api/dashboard` | Add `case_id`, `id` to recent_activity; add `case_id` to upcoming_deadlines query |
+
+### New Files
+
+| File | Purpose |
+|------|---------|
+| `backend/internal/models/note.go` | Note model |
+| `backend/internal/services/note_service.go` | Note CRUD service |
+| `backend/internal/handlers/notes.go` | Note HTTP handlers |
+| `backend/internal/handlers/case_events.go` | Case event detail handler |
+
+### Database Migration
+
+1. Create `kanzlai.notes` table with polymorphic FK pattern
+2. Migrate existing `deadlines.notes` data
+3. Drop `deadlines.notes` column
+
+---
+
+## Part 6: Summary of Frontend Changes
+
+### New Files
+
+| File | Purpose |
+|------|---------|
+| `src/app/(app)/fristen/[id]/page.tsx` | Deadline detail page |
+| `src/app/(app)/fristen/neu/page.tsx` | Standalone deadline creation |
+| `src/app/(app)/termine/[id]/page.tsx` | Appointment detail page |
+| `src/app/(app)/termine/neu/page.tsx` | Standalone appointment creation |
+| `src/app/(app)/cases/[id]/layout.tsx` | Case detail shared layout (header + tabs) |
+| `src/app/(app)/cases/[id]/verlauf/page.tsx` | Case timeline tab |
+| `src/app/(app)/cases/[id]/fristen/page.tsx` | Case deadlines tab |
+| `src/app/(app)/cases/[id]/dokumente/page.tsx` | Case documents tab |
+| `src/app/(app)/cases/[id]/parteien/page.tsx` | Case parties tab |
+| `src/app/(app)/cases/[id]/notizen/page.tsx` | Case notes tab (new) |
+| `src/app/(app)/cases/[id]/ereignisse/[eventId]/page.tsx` | Case event detail |
+| `src/components/layout/Breadcrumb.tsx` | Reusable breadcrumb |
+| `src/components/notes/NotesList.tsx` | Reusable notes list + inline creation |
+| `src/components/dashboard/RecentActivityList.tsx` | Recent activity feed |
+
+### Modified Files
+
+| File | Change |
+|------|--------|
+| `src/components/dashboard/DeadlineTrafficLights.tsx` | Buttons → Links with navigation |
+| `src/components/dashboard/CaseOverviewGrid.tsx` | Static metrics → clickable links |
+| `src/components/dashboard/UpcomingTimeline.tsx` | Items → clickable with navigation |
+| `src/components/dashboard/AISummaryCard.tsx` | Add refresh button |
+| `src/components/dashboard/QuickActions.tsx` | Fix targets, swap CalDAV for Termin |
+| `src/app/(app)/dashboard/page.tsx` | Wire navigation, add RecentActivity section |
+| `src/app/(app)/fristen/page.tsx` | Read URL params for initial filter |
+| `src/app/(app)/cases/page.tsx` | Read URL params for initial filter |
+| `src/app/(app)/cases/[id]/page.tsx` | Refactor into layout + nested routes |
+| `src/lib/types.ts` | Add Note, RecentActivity types; update UpcomingDeadline |
+
+### Types to Add
+
+```typescript
+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 RecentActivity {
+  id: string;
+  event_type?: string;
+  title: string;
+  case_id: string;
+  case_number: string;
+  event_date?: string;
+  created_at: string;
+}
+```
+
+---
+
+## Part 7: Implementation Plan
+
+Recommended order for a coder to implement:
+
+### Phase A: Backend Foundation (can be done in parallel)
+1. Create `notes` table migration + model + service + handler
+2. Add `GET /api/deadlines/{id}` endpoint
+3. Add `GET /api/appointments/{id}` endpoint
+4. Add `GET /api/case-events/{id}` endpoint
+5. Fix dashboard query to include `case_id` in upcoming deadlines and recent activity
+
+### Phase B: Frontend — Dashboard Interactivity
+1. Create `Breadcrumb` component
+2. Make traffic light cards clickable (Links)
+3. Make case overview grid clickable (Links)
+4. Make timeline items clickable (Links)
+5. Fix quick actions (swap CalDAV for Termin, update hrefs)
+6. Add refresh button to AI Summary card
+7. Add RecentActivityList component + wire to dashboard
+
+### Phase C: Frontend — New Detail Pages
+1. Deadline detail page (`/fristen/[id]`)
+2. Appointment detail page (`/termine/[id]`)
+3. Case event detail page (`/cases/[id]/ereignisse/[eventId]`)
+4. Standalone deadline creation (`/fristen/neu`)
+5. Standalone appointment creation (`/termine/neu`)
+
+### Phase D: Frontend — Case Detail Refactor
+1. Extract case header + tabs into layout.tsx
+2. Create sub-route pages (verlauf, fristen, dokumente, parteien)
+3. Add notes tab
+4. Wire `NotesList` component into all detail pages
+
+### Phase E: Polish
+1. URL filter params on `/fristen` and `/cases` pages
+2. Breadcrumbs on all pages
+3. Mobile responsive testing
+4. Migration of existing `deadlines.notes` data
+
+---
+
+## Appendix: What This Design Does NOT Cover
+
+- Real AI-powered summary (currently rule-based — kept as-is with refresh button)
+- Notification system (toast-based alerts for approaching deadlines)
+- Audit log / change history per entity
+- Batch operations (mark multiple deadlines complete)
+- Print views
+
+These are separate features that can be designed independently.
--- a/frontend/.m/spawn.lock
+++ b/frontend/.m/spawn.lock
--- a/frontend/src/app/(app)/ai/extract/page.tsx
+++ b/frontend/src/app/(app)/ai/extract/page.tsx
@@ -27,7 +27,7 @@ export default function AIExtractPage() {
    queryFn: () => api.get<PaginatedResponse<Case>>("/cases"),
  });

-  const cases = casesData?.data ?? [];
+  const cases = Array.isArray(casesData?.data) ? casesData.data : [];

  async function handleExtract(file: File | null, text: string) {
    setIsExtracting(true);
--- a/frontend/src/app/(app)/cases/[id]/dokumente/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/cases/[id]/fristen/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/cases/[id]/layout.tsx
+++ b/frontend/src/app/(app)/cases/[id]/layout.tsx
@@ -0,0 +1,226 @@
+"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,
+  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: "notizen", label: "Notizen", icon: StickyNote },
+] as const;
+
+const TAB_LABELS: Record<string, string> = {
+  verlauf: "Verlauf",
+  fristen: "Fristen",
+  dokumente: "Dokumente",
+  parteien: "Parteien",
+  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>
+  );
+}
--- a/frontend/src/app/(app)/cases/[id]/notizen/page.tsx
+++ b/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} />;
+}
--- a/frontend/src/app/(app)/cases/[id]/page.tsx
+++ b/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";
-import { useParams } from "next/navigation";
-import { api } from "@/lib/api";
-import type { Case, CaseEvent, Party, Deadline, Document } from "@/lib/types";
-import { CaseTimeline } from "@/components/cases/CaseTimeline";
-import { PartyList } from "@/components/cases/PartyList";
-import {
-  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 = deadlinesData?.deadlines ?? [];
-  const documents = 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" && 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={caseDetail.recent_events ?? []} />
-        )}
-
-        {activeTab === "deadlines" && (
-          <DeadlinesList deadlines={deadlines} />
-        )}
-
-        {activeTab === "documents" && (
-          <DocumentsList documents={documents} />
-        )}
-
-        {activeTab === "parties" && (
-          <PartyList caseId={id} 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>
-  );
+export default async function CaseDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  redirect(`/cases/${id}/verlauf`);
 }
--- a/frontend/src/app/(app)/cases/[id]/parteien/page.tsx
+++ b/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} />;
+}
--- a/frontend/src/app/(app)/cases/[id]/verlauf/page.tsx
+++ b/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} />;
+}
--- a/frontend/src/app/(app)/cases/page.tsx
+++ b/frontend/src/app/(app)/cases/page.tsx
@@ -68,7 +68,7 @@ export default function CasesPage() {
    },
  });

-  const cases = data?.cases ?? [];
+  const cases = Array.isArray(data?.cases) ? data.cases : [];

  return (
    <div className="animate-fade-in">
--- a/frontend/src/app/(app)/dashboard/page.tsx
+++ b/frontend/src/app/(app)/dashboard/page.tsx
@@ -80,17 +80,17 @@ export default function DashboardPage() {
        </p>
      </div>

-      <DeadlineTrafficLights data={data.deadline_summary} />
+      <DeadlineTrafficLights data={data.deadline_summary ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 }} />

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2">
          <UpcomingTimeline
-            deadlines={data.upcoming_deadlines}
-            appointments={data.upcoming_appointments}
+            deadlines={Array.isArray(data.upcoming_deadlines) ? data.upcoming_deadlines : []}
+            appointments={Array.isArray(data.upcoming_appointments) ? data.upcoming_appointments : []}
          />
        </div>
        <div className="space-y-6">
-          <CaseOverviewGrid data={data.case_summary} />
+          <CaseOverviewGrid data={data.case_summary ?? { active_count: 0, new_this_month: 0, closed_count: 0 }} />
          <AISummaryCard data={data} />
          <QuickActions />
        </div>
--- a/frontend/src/app/(app)/einstellungen/page.tsx
+++ b/frontend/src/app/(app)/einstellungen/page.tsx
@@ -22,7 +22,7 @@ export default function EinstellungenPage() {
    refetch,
  } = useQuery({
    queryKey: ["tenant-current", tenantId],
-    queryFn: () => api.get<Tenant>(`/api/tenants/${tenantId}`),
+    queryFn: () => api.get<Tenant>(`/tenants/${tenantId}`),
    enabled: !!tenantId,
  });

--- a/frontend/src/app/(app)/fristen/page.tsx
+++ b/frontend/src/app/(app)/fristen/page.tsx
@@ -66,7 +66,7 @@ export default function FristenPage() {
      {view === "list" ? (
        <DeadlineList />
      ) : (
-        <DeadlineCalendarView deadlines={deadlines || []} />
+        <DeadlineCalendarView deadlines={Array.isArray(deadlines) ? deadlines : []} />
      )}
    </div>
  );
--- a/frontend/src/app/(app)/termine/page.tsx
+++ b/frontend/src/app/(app)/termine/page.tsx
@@ -84,7 +84,7 @@ export default function TerminePage() {
        <AppointmentList onEdit={handleEdit} />
      ) : (
        <AppointmentCalendar
-          appointments={appointments || []}
+          appointments={Array.isArray(appointments) ? appointments : []}
          onAppointmentClick={handleEdit}
        />
      )}
--- a/frontend/src/components/appointments/AppointmentList.tsx
+++ b/frontend/src/components/appointments/AppointmentList.tsx
@@ -73,12 +73,13 @@ export function AppointmentList({ onEdit }: AppointmentListProps) {

  const caseMap = useMemo(() => {
    const map = new Map<string, Case>();
-    cases?.cases?.forEach((c) => map.set(c.id, c));
+    const arr = Array.isArray(cases?.cases) ? cases.cases : [];
+    arr.forEach((c) => map.set(c.id, c));
    return map;
  }, [cases]);

  const filtered = useMemo(() => {
-    if (!appointments) return [];
+    if (!Array.isArray(appointments)) return [];
    return appointments
      .filter((a) => {
        if (caseFilter !== "all" && a.case_id !== caseFilter) return false;
@@ -91,7 +92,7 @@ export function AppointmentList({ onEdit }: AppointmentListProps) {
  const grouped = useMemo(() => groupByDate(filtered), [filtered]);

  const counts = useMemo(() => {
-    if (!appointments) return { today: 0, thisWeek: 0, total: 0 };
+    if (!Array.isArray(appointments)) return { today: 0, thisWeek: 0, total: 0 };
    let today = 0;
    let thisWeek = 0;
    for (const a of appointments) {
@@ -148,7 +149,7 @@ export function AppointmentList({ onEdit }: AppointmentListProps) {
            </option>
          ))}
        </select>
-        {cases?.cases && cases.cases.length > 0 && (
+        {Array.isArray(cases?.cases) && cases.cases.length > 0 && (
          <select
            value={caseFilter}
            onChange={(e) => setCaseFilter(e.target.value)}
--- a/frontend/src/components/appointments/AppointmentModal.tsx
+++ b/frontend/src/components/appointments/AppointmentModal.tsx
@@ -78,7 +78,7 @@ export function AppointmentModal({ open, onClose, appointment }: AppointmentModa

  const updateMutation = useMutation({
    mutationFn: (body: Record<string, unknown>) =>
-      api.put<Appointment>(`/api/appointments/${appointment!.id}`, body),
+      api.put<Appointment>(`/appointments/${appointment!.id}`, body),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["appointments"] });
      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
--- a/frontend/src/components/dashboard/AISummaryCard.tsx
+++ b/frontend/src/components/dashboard/AISummaryCard.tsx
@@ -9,7 +9,9 @@ interface Props {

 function generateSummary(data: DashboardData): string {
  const parts: string[] = [];
-  const { deadline_summary: ds, case_summary: cs, upcoming_deadlines: ud } = data;
+  const ds = data.deadline_summary ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 };
+  const cs = data.case_summary ?? { active_count: 0, new_this_month: 0, closed_count: 0 };
+  const ud = Array.isArray(data.upcoming_deadlines) ? data.upcoming_deadlines : [];

  // Deadline urgency
  if (ds.overdue_count > 0) {
--- a/frontend/src/components/dashboard/CaseOverviewGrid.tsx
+++ b/frontend/src/components/dashboard/CaseOverviewGrid.tsx
@@ -8,24 +8,25 @@ interface Props {
 }

 export function CaseOverviewGrid({ data }: Props) {
+  const safe = data ?? { active_count: 0, new_this_month: 0, closed_count: 0 };
  const items = [
    {
      label: "Aktive Akten",
-      value: data.active_count,
+      value: safe.active_count ?? 0,
      icon: FolderOpen,
      color: "text-blue-600",
      bg: "bg-blue-50",
    },
    {
      label: "Neu (Monat)",
-      value: data.new_this_month,
+      value: safe.new_this_month ?? 0,
      icon: FolderPlus,
      color: "text-violet-600",
      bg: "bg-violet-50",
    },
    {
      label: "Abgeschlossen",
-      value: data.closed_count,
+      value: safe.closed_count ?? 0,
      icon: Archive,
      color: "text-neutral-500",
      bg: "bg-neutral-50",
--- a/frontend/src/components/dashboard/DeadlineTrafficLights.tsx
+++ b/frontend/src/components/dashboard/DeadlineTrafficLights.tsx
@@ -31,24 +31,25 @@ interface Props {
 }

 export function DeadlineTrafficLights({ data, onFilter }: Props) {
+  const safe = data ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 };
  const cards = [
    {
      key: "overdue" as const,
      label: "Überfällig",
-      count: data.overdue_count,
+      count: safe.overdue_count ?? 0,
      icon: AlertTriangle,
      bg: "bg-red-50",
      border: "border-red-200",
      iconColor: "text-red-500",
      countColor: "text-red-700",
      labelColor: "text-red-600",
-      ring: data.overdue_count > 0 ? "ring-2 ring-red-300 ring-offset-1" : "",
-      pulse: data.overdue_count > 0,
+      ring: (safe.overdue_count ?? 0) > 0 ? "ring-2 ring-red-300 ring-offset-1" : "",
+      pulse: (safe.overdue_count ?? 0) > 0,
    },
    {
      key: "this_week" as const,
      label: "Diese Woche",
-      count: data.due_this_week,
+      count: safe.due_this_week ?? 0,
      icon: Clock,
      bg: "bg-amber-50",
      border: "border-amber-200",
@@ -61,7 +62,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
    {
      key: "ok" as const,
      label: "Im Zeitplan",
-      count: data.ok_count + data.due_next_week,
+      count: (safe.ok_count ?? 0) + (safe.due_next_week ?? 0),
      icon: CheckCircle,
      bg: "bg-emerald-50",
      border: "border-emerald-200",
--- a/frontend/src/components/dashboard/UpcomingTimeline.tsx
+++ b/frontend/src/components/dashboard/UpcomingTimeline.tsx
@@ -21,13 +21,16 @@ function formatDayLabel(date: Date): string {
 }

 export function UpcomingTimeline({ deadlines, appointments }: Props) {
+  const safeDeadlines = Array.isArray(deadlines) ? deadlines : [];
+  const safeAppointments = Array.isArray(appointments) ? appointments : [];
+
  const items: TimelineItem[] = [
-    ...deadlines.map((d) => ({
+    ...safeDeadlines.map((d) => ({
      type: "deadline" as const,
      date: parseISO(d.due_date),
      data: d,
    })),
-    ...appointments.map((a) => ({
+    ...safeAppointments.map((a) => ({
      type: "appointment" as const,
      date: parseISO(a.start_at),
      data: a,
--- a/frontend/src/components/deadlines/DeadlineList.tsx
+++ b/frontend/src/components/deadlines/DeadlineList.tsx
@@ -64,7 +64,7 @@ export function DeadlineList() {

  const completeMutation = useMutation({
    mutationFn: (id: string) =>
-      api.patch<Deadline>(`/api/deadlines/${id}/complete`),
+      api.patch<Deadline>(`/deadlines/${id}/complete`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
      toast.success("Frist als erledigt markiert");
@@ -76,12 +76,12 @@ export function DeadlineList() {

  const caseMap = useMemo(() => {
    const map = new Map<string, Case>();
-    cases?.forEach((c) => map.set(c.id, c));
+    (Array.isArray(cases) ? cases : []).forEach((c) => map.set(c.id, c));
    return map;
  }, [cases]);

  const filtered = useMemo(() => {
-    if (!deadlines) return [];
+    if (!Array.isArray(deadlines)) return [];
    return deadlines.filter((d) => {
      if (statusFilter === "pending" && d.status !== "pending") return false;
      if (statusFilter === "completed" && d.status !== "completed")
@@ -96,7 +96,7 @@ export function DeadlineList() {
  }, [deadlines, statusFilter, caseFilter]);

  const counts = useMemo(() => {
-    if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
+    if (!Array.isArray(deadlines)) return { overdue: 0, thisWeek: 0, ok: 0 };
    let overdue = 0,
      thisWeek = 0,
      ok = 0;
@@ -188,7 +188,7 @@ export function DeadlineList() {
          <option value="completed">Erledigt</option>
          <option value="overdue">Überfällig</option>
        </select>
-        {cases && cases.length > 0 && (
+        {Array.isArray(cases) && cases.length > 0 && (
          <select
            value={caseFilter}
            onChange={(e) => setCaseFilter(e.target.value)}
--- a/frontend/src/components/layout/Breadcrumb.tsx
+++ b/frontend/src/components/layout/Breadcrumb.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav className="flex items-center gap-1 text-sm text-neutral-400">
+      {items.map((item, i) => (
+        <span key={i} className="flex items-center gap-1">
+          {i > 0 && <ChevronRight className="h-3.5 w-3.5" />}
+          {item.href ? (
+            <Link
+              href={item.href}
+              className="transition-colors hover:text-neutral-700"
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span className="text-neutral-600">{item.label}</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}
--- a/frontend/src/components/layout/TenantSwitcher.tsx
+++ b/frontend/src/components/layout/TenantSwitcher.tsx
@@ -15,6 +15,7 @@ export function TenantSwitcher() {
    api
      .get<TenantWithRole[]>("/tenants")
      .then((data) => {
+        if (!Array.isArray(data)) return;
        setTenants(data);
        const savedId = localStorage.getItem("kanzlai_tenant_id");
        const match = data.find((t) => t.id === savedId) || data[0];
@@ -53,30 +54,33 @@ export function TenantSwitcher() {
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
      >
-        <span className="max-w-[120px] truncate sm:max-w-[160px]">
+        <span className="max-w-[200px] truncate sm:max-w-[280px]">
          {current.name}
        </span>
        <ChevronsUpDown className="h-3.5 w-3.5 text-neutral-400" />
      </button>

-      {open && tenants.length > 1 && (
-        <div className="animate-fade-in absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
+      {open && (
+        <div className="animate-fade-in absolute right-0 top-full z-50 mt-1 w-64 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
          {tenants.map((tenant) => (
            <button
              key={tenant.id}
              onClick={() => switchTenant(tenant)}
-              className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
+              className={`flex w-full items-center px-3 py-2 text-left text-sm transition-colors ${
                tenant.id === current.id
                  ? "bg-neutral-50 font-medium text-neutral-900"
                  : "text-neutral-600 hover:bg-neutral-50"
              }`}
            >
              <span className="truncate">{tenant.name}</span>
-              <span className="ml-auto text-xs text-neutral-400">
+              <span className="ml-auto shrink-0 text-xs text-neutral-400">
                {tenant.role}
              </span>
            </button>
          ))}
+          {tenants.length <= 1 && (
+            <p className="px-3 py-2 text-xs text-neutral-400">Einzige Kanzlei</p>
+          )}
        </div>
      )}
    </div>
--- a/frontend/src/components/notes/NotesList.tsx
+++ b/frontend/src/components/notes/NotesList.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+import { Plus, Pencil, Trash2, X, Loader2, StickyNote } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { Note } from "@/lib/types";
+
+type ParentType = "case" | "deadline" | "appointment" | "case_event";
+
+interface NotesListProps {
+  parentType: ParentType;
+  parentId: string;
+}
+
+const PARENT_PARAM: Record<ParentType, string> = {
+  case: "case_id",
+  deadline: "deadline_id",
+  appointment: "appointment_id",
+  case_event: "case_event_id",
+};
+
+export function NotesList({ parentType, parentId }: NotesListProps) {
+  const queryClient = useQueryClient();
+  const queryKey = ["notes", parentType, parentId];
+  const paramKey = PARENT_PARAM[parentType];
+
+  const [showForm, setShowForm] = useState(false);
+  const [newContent, setNewContent] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editContent, setEditContent] = useState("");
+
+  const { data, isLoading } = useQuery({
+    queryKey,
+    queryFn: () => api.get<Note[]>(`/notes?${paramKey}=${parentId}`),
+  });
+
+  const notes = Array.isArray(data) ? data : [];
+
+  const createMutation = useMutation({
+    mutationFn: (content: string) =>
+      api.post<Note>("/notes", { [paramKey]: parentId, content }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+      setNewContent("");
+      setShowForm(false);
+      toast.success("Notiz erstellt");
+    },
+    onError: () => toast.error("Fehler beim Erstellen"),
+  });
+
+  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"),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => api.delete(`/notes/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+      toast.success("Notiz geloescht");
+    },
+    onError: () => toast.error("Fehler beim Loeschen"),
+  });
+
+  function startEdit(note: Note) {
+    setEditingId(note.id);
+    setEditContent(note.content);
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-neutral-700">
+          Notizen ({notes.length})
+        </h3>
+        {!showForm && (
+          <button
+            onClick={() => setShowForm(true)}
+            className="inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Neu
+          </button>
+        )}
+      </div>
+
+      {showForm && (
+        <div className="mt-3 rounded-md border border-neutral-200 bg-neutral-50 p-3">
+          <textarea
+            value={newContent}
+            onChange={(e) => setNewContent(e.target.value)}
+            placeholder="Notiz eingeben..."
+            rows={3}
+            className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+            autoFocus
+          />
+          <div className="mt-2 flex justify-end gap-2">
+            <button
+              onClick={() => {
+                setShowForm(false);
+                setNewContent("");
+              }}
+              className="rounded-md px-3 py-1.5 text-sm text-neutral-500 hover:bg-neutral-200"
+            >
+              Abbrechen
+            </button>
+            <button
+              onClick={() => {
+                if (!newContent.trim()) return;
+                createMutation.mutate(newContent.trim());
+              }}
+              disabled={createMutation.isPending || !newContent.trim()}
+              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 ? "Speichern..." : "Speichern"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {notes.length === 0 && !showForm && (
+        <div className="mt-4 flex flex-col items-center py-6 text-center">
+          <div className="rounded-xl bg-neutral-100 p-3">
+            <StickyNote className="h-5 w-5 text-neutral-400" />
+          </div>
+          <p className="mt-2 text-sm text-neutral-500">
+            Keine Notizen vorhanden.
+          </p>
+        </div>
+      )}
+
+      <div className="mt-3 space-y-2">
+        {notes.map((note) => (
+          <div
+            key={note.id}
+            className="rounded-md border border-neutral-200 bg-white px-4 py-3"
+          >
+            {editingId === note.id ? (
+              <div>
+                <textarea
+                  value={editContent}
+                  onChange={(e) => setEditContent(e.target.value)}
+                  rows={3}
+                  className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+                  autoFocus
+                />
+                <div className="mt-2 flex justify-end gap-2">
+                  <button
+                    onClick={() => setEditingId(null)}
+                    className="rounded-md px-3 py-1.5 text-sm text-neutral-500 hover:bg-neutral-100"
+                  >
+                    Abbrechen
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (!editContent.trim()) return;
+                      updateMutation.mutate({
+                        id: note.id,
+                        content: editContent.trim(),
+                      });
+                    }}
+                    disabled={updateMutation.isPending || !editContent.trim()}
+                    className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+                  >
+                    {updateMutation.isPending ? "Speichern..." : "Speichern"}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div>
+                <div className="flex items-start justify-between">
+                  <p className="whitespace-pre-wrap text-sm text-neutral-800">
+                    {note.content}
+                  </p>
+                  <div className="ml-3 flex shrink-0 gap-1">
+                    <button
+                      onClick={() => startEdit(note)}
+                      className="rounded p-1 text-neutral-300 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
+                      title="Bearbeiten"
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                    </button>
+                    <button
+                      onClick={() => deleteMutation.mutate(note.id)}
+                      className="rounded p-1 text-neutral-300 transition-colors hover:bg-neutral-100 hover:text-red-500"
+                      title="Loeschen"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                </div>
+                <p className="mt-1 text-xs text-neutral-400">
+                  {format(new Date(note.created_at), "d. MMM yyyy, HH:mm", {
+                    locale: de,
+                  })}
+                  {note.updated_at !== note.created_at && " (bearbeitet)"}
+                </p>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/settings/CalDAVSettings.tsx
+++ b/frontend/src/components/settings/CalDAVSettings.tsx
@@ -68,7 +68,7 @@ export function CalDAVSettings({ tenant }: { tenant: Tenant }) {
        typeof window !== "undefined"
          ? localStorage.getItem("kanzlai_tenant_id")
          : null;
-      return api.put<Tenant>(`/api/tenants/${tenantId}/settings`, {
+      return api.put<Tenant>(`/tenants/${tenantId}/settings`, {
        caldav: cfg,
      });
    },
--- a/frontend/src/components/settings/TeamSettings.tsx
+++ b/frontend/src/components/settings/TeamSettings.tsx
@@ -32,13 +32,13 @@ export function TeamSettings() {
  } = useQuery({
    queryKey: ["tenant-members", tenantId],
    queryFn: () =>
-      api.get<UserTenant[]>(`/api/tenants/${tenantId}/members`),
+      api.get<UserTenant[]>(`/tenants/${tenantId}/members`),
    enabled: !!tenantId,
  });

  const inviteMutation = useMutation({
    mutationFn: (data: { email: string; role: string }) =>
-      api.post(`/api/tenants/${tenantId}/invite`, data),
+      api.post(`/tenants/${tenantId}/invite`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tenant-members"] });
      setEmail("");
@@ -52,7 +52,7 @@ export function TeamSettings() {

  const removeMutation = useMutation({
    mutationFn: (userId: string) =>
-      api.delete(`/api/tenants/${tenantId}/members/${userId}`),
+      api.delete(`/tenants/${tenantId}/members/${userId}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tenant-members"] });
      toast.success("Mitglied entfernt");
@@ -118,7 +118,7 @@ export function TeamSettings() {
      </form>

      {/* Members List */}
-      {members && members.length > 0 ? (
+      {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;
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -176,6 +176,19 @@ 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 ApiError {
  error: string;
  status: number;
Author	SHA1	Message	Date
m	9787450d91	feat: refactor case detail from useState tabs to URL-based nested routes Refactors the monolithic cases/[id]/page.tsx into Next.js nested routes with a shared layout for the case header and tab navigation bar. Route structure: - cases/[id]/layout.tsx — case header + tab bar (active tab from URL) - cases/[id]/page.tsx — redirects to ./verlauf - cases/[id]/verlauf/page.tsx — timeline tab - cases/[id]/fristen/page.tsx — deadlines tab - cases/[id]/dokumente/page.tsx — documents tab (with upload) - cases/[id]/parteien/page.tsx — parties tab - cases/[id]/notizen/page.tsx — notes tab (new, uses NotesList) New shared components: - Breadcrumb.tsx — reusable breadcrumb navigation - NotesList.tsx — reusable notes CRUD (inline create/edit/delete) - Note type added to types.ts Benefits: deep linking, browser back/forward, bookmarkable tabs.	2026-03-25 19:28:29 +01:00
m	9ad58e1ba3	docs: design document for dashboard redesign + detail pages	2026-03-25 18:51:44 +01:00
m	0712d9a367	docs: design document for dashboard redesign + detail pages (t-kz-060) Comprehensive design covering: - Dashboard interactivity (click-to-filter traffic lights, clickable timeline, fixed quick actions, AI summary refresh) - New detail pages (deadline, appointment, case event) - Notes system with polymorphic table design - Case detail URL-based tab navigation - Breadcrumb navigation system - Backend API additions and data model changes - Phased implementation plan for coders	2026-03-25 18:49:48 +01:00
m	cd31e76d07	fix: TenantSwitcher shows dropdown for single tenant, wider name display	2026-03-25 18:40:15 +01:00
m	f42b7ddec7	fix: add array guards to all frontend components consuming API responses	2026-03-25 18:35:28 +01:00
m	50bfa3deb4	fix: add array guards to all frontend components consuming API responses Prevents "M.forEach is not a function" crashes when API returns error objects or unexpected shapes instead of arrays. Guards all useQuery consumers with Array.isArray checks and safe defaults for object props. Files fixed: DeadlineList, AppointmentList, TenantSwitcher, DeadlineTrafficLights, UpcomingTimeline, CaseOverviewGrid, AISummaryCard, TeamSettings, and all page-level components (dashboard, cases, fristen, termine, ai/extract).	2026-03-25 18:34:11 +01:00
m	e635efa71e	fix: remove remaining /api/ double-prefix from template literal API calls Previous fix missed backtick template strings. Fixed 7 more api.*() calls in appointments, deadlines, settings, and einstellungen pages.	2026-03-25 18:20:35 +01:00
m	12e0407025	test: comprehensive E2E and API test suite for full KanzlAI stack	2026-03-25 16:21:32 +01:00