feat: Phase C frontend detail pages for deadlines, appointments, events

- Deadline detail page (/fristen/[id]) with status badge, due date, case context, complete button, and notes - Appointment detail page (/termine/[id]) with datetime, location, type badge, case link, description, and notes - Case event detail page (/cases/[id]/ereignisse/[eventId]) with event type icon, description, metadata, and notes - Standalone deadline creation (/fristen/neu) with case dropdown - Standalone appointment creation (/termine/neu) with optional case - Reusable Breadcrumb component for navigation hierarchy - Reusable NotesList component with inline create/edit/delete - Added Note and RecentActivity types to lib/types.ts
2026-03-25 19:29:12 +01:00
16 changed files with 1332 additions and 424 deletions
--- a/backend/internal/handlers/appointments.go
+++ b/backend/internal/handlers/appointments.go
@@ -22,33 +22,6 @@ func NewAppointmentHandler(svc *services.AppointmentService) *AppointmentHandler
 	return &AppointmentHandler{svc: svc}
 }

-// Get handles GET /api/appointments/{id}
-func (h *AppointmentHandler) Get(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "missing tenant")
-		return
-	}
-
-	id, err := uuid.Parse(r.PathValue("id"))
-	if err != nil {
-		writeError(w, http.StatusBadRequest, "invalid appointment id")
-		return
-	}
-
-	appt, err := h.svc.GetByID(r.Context(), tenantID, id)
-	if err != nil {
-		if errors.Is(err, sql.ErrNoRows) {
-			writeError(w, http.StatusNotFound, "appointment not found")
-			return
-		}
-		writeError(w, http.StatusInternalServerError, "failed to fetch appointment")
-		return
-	}
-
-	writeJSON(w, http.StatusOK, appt)
-}
-
 func (h *AppointmentHandler) List(w http.ResponseWriter, r *http.Request) {
 	tenantID, ok := auth.TenantFromContext(r.Context())
 	if !ok {
--- a/backend/internal/handlers/case_events.go
+++ b/backend/internal/handlers/case_events.go
@@ -1,52 +0,0 @@
-package handlers
-
-import (
-	"database/sql"
-	"errors"
-	"net/http"
-
-	"github.com/google/uuid"
-
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/auth"
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/models"
-	"github.com/jmoiron/sqlx"
-)
-
-type CaseEventHandler struct {
-	db *sqlx.DB
-}
-
-func NewCaseEventHandler(db *sqlx.DB) *CaseEventHandler {
-	return &CaseEventHandler{db: db}
-}
-
-// Get handles GET /api/case-events/{id}
-func (h *CaseEventHandler) Get(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "missing tenant")
-		return
-	}
-
-	eventID, err := uuid.Parse(r.PathValue("id"))
-	if err != nil {
-		writeError(w, http.StatusBadRequest, "invalid event ID")
-		return
-	}
-
-	var event models.CaseEvent
-	err = h.db.GetContext(r.Context(), &event,
-		`SELECT id, tenant_id, case_id, event_type, title, description, event_date, created_by, metadata, created_at, updated_at
-		 FROM case_events
-		 WHERE id = $1 AND tenant_id = $2`, eventID, tenantID)
-	if err != nil {
-		if errors.Is(err, sql.ErrNoRows) {
-			writeError(w, http.StatusNotFound, "case event not found")
-			return
-		}
-		writeError(w, http.StatusInternalServerError, "failed to fetch case event")
-		return
-	}
-
-	writeJSON(w, http.StatusOK, event)
-}
--- a/backend/internal/handlers/deadlines.go
+++ b/backend/internal/handlers/deadlines.go
@@ -20,33 +20,6 @@ func NewDeadlineHandlers(ds *services.DeadlineService, db *sqlx.DB) *DeadlineHan
 	return &DeadlineHandlers{deadlines: ds, db: db}
 }

-// Get handles GET /api/deadlines/{deadlineID}
-func (h *DeadlineHandlers) Get(w http.ResponseWriter, r *http.Request) {
-	tenantID, err := resolveTenant(r, h.db)
-	if err != nil {
-		handleTenantError(w, err)
-		return
-	}
-
-	deadlineID, err := parsePathUUID(r, "deadlineID")
-	if err != nil {
-		writeError(w, http.StatusBadRequest, "invalid deadline ID")
-		return
-	}
-
-	deadline, err := h.deadlines.GetByID(tenantID, deadlineID)
-	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to fetch deadline")
-		return
-	}
-	if deadline == nil {
-		writeError(w, http.StatusNotFound, "deadline not found")
-		return
-	}
-
-	writeJSON(w, http.StatusOK, deadline)
-}
-
 // ListAll handles GET /api/deadlines
 func (h *DeadlineHandlers) ListAll(w http.ResponseWriter, r *http.Request) {
 	tenantID, err := resolveTenant(r, h.db)
--- a/backend/internal/handlers/notes.go
+++ b/backend/internal/handlers/notes.go
@@ -1,159 +0,0 @@
-package handlers
-
-import (
-	"encoding/json"
-	"fmt"
-	"net/http"
-
-	"github.com/google/uuid"
-
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/auth"
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
-)
-
-type NoteHandler struct {
-	svc *services.NoteService
-}
-
-func NewNoteHandler(svc *services.NoteService) *NoteHandler {
-	return &NoteHandler{svc: svc}
-}
-
-// List handles GET /api/notes?{parent_type}_id={id}
-func (h *NoteHandler) List(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "missing tenant")
-		return
-	}
-
-	parentType, parentID, err := parseNoteParent(r)
-	if err != nil {
-		writeError(w, http.StatusBadRequest, err.Error())
-		return
-	}
-
-	notes, err := h.svc.ListByParent(r.Context(), tenantID, parentType, parentID)
-	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to list notes")
-		return
-	}
-
-	writeJSON(w, http.StatusOK, notes)
-}
-
-// Create handles POST /api/notes
-func (h *NoteHandler) Create(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "missing tenant")
-		return
-	}
-	userID, _ := auth.UserFromContext(r.Context())
-
-	var input services.CreateNoteInput
-	if err := json.NewDecoder(r.Body).Decode(&input); err != nil {
-		writeError(w, http.StatusBadRequest, "invalid request body")
-		return
-	}
-	if input.Content == "" {
-		writeError(w, http.StatusBadRequest, "content is required")
-		return
-	}
-
-	var createdBy *uuid.UUID
-	if userID != uuid.Nil {
-		createdBy = &userID
-	}
-
-	note, err := h.svc.Create(r.Context(), tenantID, createdBy, input)
-	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to create note")
-		return
-	}
-
-	writeJSON(w, http.StatusCreated, note)
-}
-
-// Update handles PUT /api/notes/{id}
-func (h *NoteHandler) Update(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "missing tenant")
-		return
-	}
-
-	noteID, err := uuid.Parse(r.PathValue("id"))
-	if err != nil {
-		writeError(w, http.StatusBadRequest, "invalid note ID")
-		return
-	}
-
-	var req struct {
-		Content string `json:"content"`
-	}
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		writeError(w, http.StatusBadRequest, "invalid request body")
-		return
-	}
-	if req.Content == "" {
-		writeError(w, http.StatusBadRequest, "content is required")
-		return
-	}
-
-	note, err := h.svc.Update(r.Context(), tenantID, noteID, req.Content)
-	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to update note")
-		return
-	}
-	if note == nil {
-		writeError(w, http.StatusNotFound, "note not found")
-		return
-	}
-
-	writeJSON(w, http.StatusOK, note)
-}
-
-// Delete handles DELETE /api/notes/{id}
-func (h *NoteHandler) Delete(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "missing tenant")
-		return
-	}
-
-	noteID, err := uuid.Parse(r.PathValue("id"))
-	if err != nil {
-		writeError(w, http.StatusBadRequest, "invalid note ID")
-		return
-	}
-
-	if err := h.svc.Delete(r.Context(), tenantID, noteID); err != nil {
-		writeError(w, http.StatusNotFound, "note not found")
-		return
-	}
-
-	w.WriteHeader(http.StatusNoContent)
-}
-
-// parseNoteParent extracts the parent type and ID from query parameters.
-func parseNoteParent(r *http.Request) (string, uuid.UUID, error) {
-	params := map[string]string{
-		"case_id":       "case",
-		"deadline_id":   "deadline",
-		"appointment_id": "appointment",
-		"case_event_id": "case_event",
-	}
-
-	for param, parentType := range params {
-		if v := r.URL.Query().Get(param); v != "" {
-			id, err := uuid.Parse(v)
-			if err != nil {
-				return "", uuid.Nil, fmt.Errorf("invalid %s", param)
-			}
-			return parentType, id, nil
-		}
-	}
-
-	return "", uuid.Nil, fmt.Errorf("one of case_id, deadline_id, appointment_id, or case_event_id is required")
-}
--- a/backend/internal/models/note.go
+++ b/backend/internal/models/note.go
@@ -1,20 +0,0 @@
-package models
-
-import (
-	"time"
-
-	"github.com/google/uuid"
-)
-
-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"`
-}
--- a/backend/internal/router/router.go
+++ b/backend/internal/router/router.go
@@ -40,7 +40,6 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 	// Middleware
 	tenantResolver := auth.NewTenantResolver(tenantSvc)

-	noteSvc := services.NewNoteService(db)
 	dashboardSvc := services.NewDashboardService(db)

 	// Handlers
@@ -52,8 +51,6 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 	ruleH := handlers.NewDeadlineRuleHandlers(deadlineRuleSvc)
 	calcH := handlers.NewCalculateHandlers(calculator, deadlineRuleSvc)
 	dashboardH := handlers.NewDashboardHandler(dashboardSvc)
-	noteH := handlers.NewNoteHandler(noteSvc)
-	eventH := handlers.NewCaseEventHandler(db)
 	docH := handlers.NewDocumentHandler(documentSvc)

 	// Public routes
@@ -88,7 +85,6 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 	scoped.HandleFunc("DELETE /api/parties/{partyId}", partyH.Delete)

 	// Deadlines
-	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)
@@ -105,21 +101,11 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 	scoped.HandleFunc("POST /api/deadlines/calculate", calcH.Calculate)

 	// Appointments
-	scoped.HandleFunc("GET /api/appointments/{id}", apptH.Get)
 	scoped.HandleFunc("GET /api/appointments", apptH.List)
 	scoped.HandleFunc("POST /api/appointments", apptH.Create)
 	scoped.HandleFunc("PUT /api/appointments/{id}", apptH.Update)
 	scoped.HandleFunc("DELETE /api/appointments/{id}", apptH.Delete)

-	// Case events
-	scoped.HandleFunc("GET /api/case-events/{id}", eventH.Get)
-
-	// Notes
-	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
 	scoped.HandleFunc("GET /api/dashboard", dashboardH.Get)

--- a/backend/internal/services/dashboard_service.go
+++ b/backend/internal/services/dashboard_service.go
@@ -42,7 +42,6 @@ type UpcomingDeadline struct {
 	ID         uuid.UUID `json:"id" db:"id"`
 	Title      string    `json:"title" db:"title"`
 	DueDate    string    `json:"due_date" db:"due_date"`
-	CaseID     uuid.UUID `json:"case_id" db:"case_id"`
 	CaseNumber string    `json:"case_number" db:"case_number"`
 	CaseTitle  string    `json:"case_title" db:"case_title"`
 	Status     string    `json:"status" db:"status"`
@@ -57,10 +56,8 @@ type UpcomingAppointment struct {
 }

 type RecentActivity struct {
-	ID         uuid.UUID  `json:"id" db:"id"`
 	EventType  *string    `json:"event_type" db:"event_type"`
 	Title      string     `json:"title" db:"title"`
-	CaseID     uuid.UUID  `json:"case_id" db:"case_id"`
 	CaseNumber string     `json:"case_number" db:"case_number"`
 	EventDate  *time.Time `json:"event_date" db:"event_date"`
 }
@@ -112,7 +109,7 @@ func (s *DashboardService) Get(ctx context.Context, tenantID uuid.UUID) (*Dashbo

 	// Upcoming deadlines (next 7 days)
 	deadlineQuery := `
-		SELECT d.id, d.title, d.due_date, d.case_id, c.case_number, c.title AS case_title, d.status
+		SELECT d.id, d.title, d.due_date, c.case_number, c.title AS case_title, d.status
 		FROM deadlines d
 		JOIN cases c ON c.id = d.case_id AND c.tenant_id = d.tenant_id
 		WHERE d.tenant_id = $1 AND d.status = 'pending' AND d.due_date >= $2 AND d.due_date <= $3
@@ -138,7 +135,7 @@ func (s *DashboardService) Get(ctx context.Context, tenantID uuid.UUID) (*Dashbo

 	// Recent activity (last 10 case events)
 	activityQuery := `
-		SELECT ce.id, ce.event_type, ce.title, ce.case_id, c.case_number, ce.event_date
+		SELECT ce.event_type, ce.title, c.case_number, ce.event_date
 		FROM case_events ce
 		JOIN cases c ON c.id = ce.case_id AND c.tenant_id = ce.tenant_id
 		WHERE ce.tenant_id = $1
--- a/backend/internal/services/note_service.go
+++ b/backend/internal/services/note_service.go
@@ -1,120 +0,0 @@
-package services
-
-import (
-	"context"
-	"database/sql"
-	"fmt"
-	"time"
-
-	"github.com/google/uuid"
-	"github.com/jmoiron/sqlx"
-
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/models"
-)
-
-type NoteService struct {
-	db *sqlx.DB
-}
-
-func NewNoteService(db *sqlx.DB) *NoteService {
-	return &NoteService{db: db}
-}
-
-// ListByParent returns all notes for a given parent entity, scoped to tenant.
-func (s *NoteService) ListByParent(ctx context.Context, tenantID uuid.UUID, parentType string, parentID uuid.UUID) ([]models.Note, error) {
-	col, err := parentColumn(parentType)
-	if err != nil {
-		return nil, err
-	}
-
-	query := fmt.Sprintf(
-		`SELECT id, tenant_id, case_id, deadline_id, appointment_id, case_event_id,
-		        content, created_by, created_at, updated_at
-		 FROM notes
-		 WHERE tenant_id = $1 AND %s = $2
-		 ORDER BY created_at DESC`, col)
-
-	var notes []models.Note
-	if err := s.db.SelectContext(ctx, &notes, query, tenantID, parentID); err != nil {
-		return nil, fmt.Errorf("listing notes by %s: %w", parentType, err)
-	}
-	if notes == nil {
-		notes = []models.Note{}
-	}
-	return notes, nil
-}
-
-type CreateNoteInput struct {
-	CaseID        *uuid.UUID `json:"case_id,omitempty"`
-	DeadlineID    *uuid.UUID `json:"deadline_id,omitempty"`
-	AppointmentID *uuid.UUID `json:"appointment_id,omitempty"`
-	CaseEventID   *uuid.UUID `json:"case_event_id,omitempty"`
-	Content       string     `json:"content"`
-}
-
-// Create inserts a new note.
-func (s *NoteService) Create(ctx context.Context, tenantID uuid.UUID, createdBy *uuid.UUID, input CreateNoteInput) (*models.Note, error) {
-	id := uuid.New()
-	now := time.Now().UTC()
-
-	query := `INSERT INTO notes (id, tenant_id, case_id, deadline_id, appointment_id, case_event_id, content, created_by, created_at, updated_at)
-	          VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $9)
-	          RETURNING id, tenant_id, case_id, deadline_id, appointment_id, case_event_id, content, created_by, created_at, updated_at`
-
-	var n models.Note
-	err := s.db.GetContext(ctx, &n, query,
-		id, tenantID, input.CaseID, input.DeadlineID, input.AppointmentID, input.CaseEventID,
-		input.Content, createdBy, now)
-	if err != nil {
-		return nil, fmt.Errorf("creating note: %w", err)
-	}
-	return &n, nil
-}
-
-// Update modifies a note's content.
-func (s *NoteService) Update(ctx context.Context, tenantID, noteID uuid.UUID, content string) (*models.Note, error) {
-	query := `UPDATE notes SET content = $1, updated_at = $2
-	          WHERE id = $3 AND tenant_id = $4
-	          RETURNING id, tenant_id, case_id, deadline_id, appointment_id, case_event_id, content, created_by, created_at, updated_at`
-
-	var n models.Note
-	err := s.db.GetContext(ctx, &n, query, content, time.Now().UTC(), noteID, tenantID)
-	if err != nil {
-		if err == sql.ErrNoRows {
-			return nil, nil
-		}
-		return nil, fmt.Errorf("updating note: %w", err)
-	}
-	return &n, nil
-}
-
-// Delete removes a note.
-func (s *NoteService) Delete(ctx context.Context, tenantID, noteID uuid.UUID) error {
-	result, err := s.db.ExecContext(ctx, "DELETE FROM notes WHERE id = $1 AND tenant_id = $2", noteID, tenantID)
-	if err != nil {
-		return fmt.Errorf("deleting note: %w", err)
-	}
-	rows, err := result.RowsAffected()
-	if err != nil {
-		return fmt.Errorf("checking delete result: %w", err)
-	}
-	if rows == 0 {
-		return fmt.Errorf("note not found")
-	}
-	return nil
-}
-
-func parentColumn(parentType string) (string, error) {
-	switch parentType {
-	case "case":
-		return "case_id", nil
-	case "deadline":
-		return "deadline_id", nil
-	case "appointment":
-		return "appointment_id", nil
-	case "case_event":
-		return "case_event_id", nil
-	default:
-		return "", fmt.Errorf("invalid parent type: %s", parentType)
-	}
-}
--- a/frontend/src/app/(app)/cases/[id]/ereignisse/[eventId]/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/fristen/[id]/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/fristen/neu/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/termine/[id]/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/termine/neu/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/layout/Breadcrumb.tsx
+++ b/frontend/src/components/layout/Breadcrumb.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
+  return (
+    <nav className="mb-4 flex items-center gap-1 text-sm text-neutral-500">
+      {items.map((item, i) => (
+        <span key={i} className="flex items-center gap-1">
+          {i > 0 && <ChevronRight className="h-3.5 w-3.5 text-neutral-300" />}
+          {item.href ? (
+            <Link
+              href={item.href}
+              className="transition-colors hover:text-neutral-700"
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span className="font-medium text-neutral-900">{item.label}</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}
--- a/frontend/src/components/notes/NotesList.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -230,6 +230,31 @@ export interface DashboardData {
  upcoming_appointments: UpcomingAppointment[];
 }

+// 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

 export interface ExtractedDeadline {