feat: add frontend case list, detail, and creation pages (Phase 1F)

- Case list page (/cases) with search, status/type filters, status badges
- Case creation page (/cases/new) with reusable CaseForm component
- Case detail page (/cases/[id]) with tabs: Timeline, Deadlines, Documents, Parties
- CaseTimeline component for chronological case_events display
- PartyList component with inline party CRUD (add/delete)
- Updated sidebar navigation to route to /cases

backend/internal/handlers/deadline_rules.go

@@ -39,17 +39,6 @@ func (h *DeadlineRuleHandlers) List(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusOK, rules)
 }
 
-// ListProceedingTypes handles GET /api/proceeding-types
-func (h *DeadlineRuleHandlers) ListProceedingTypes(w http.ResponseWriter, r *http.Request) {
-	types, err := h.rules.ListProceedingTypes()
-	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to list proceeding types")
-		return
-	}
-
-	writeJSON(w, http.StatusOK, types)
-}
-
 // GetRuleTree handles GET /api/deadline-rules/{type}
 // {type} is the proceeding type code (e.g., "INF", "REV")
 func (h *DeadlineRuleHandlers) GetRuleTree(w http.ResponseWriter, r *http.Request) {

backend/internal/handlers/deadlines.go

@@ -20,23 +20,6 @@ func NewDeadlineHandlers(ds *services.DeadlineService, db *sqlx.DB) *DeadlineHan
 	return &DeadlineHandlers{deadlines: ds, db: db}
 }
 
-// ListAll handles GET /api/deadlines
-func (h *DeadlineHandlers) ListAll(w http.ResponseWriter, r *http.Request) {
-	tenantID, err := resolveTenant(r, h.db)
-	if err != nil {
-		handleTenantError(w, err)
-		return
-	}
-
-	deadlines, err := h.deadlines.ListAll(tenantID)
-	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to list deadlines")
-		return
-	}
-
-	writeJSON(w, http.StatusOK, deadlines)
-}
-
 // ListForCase handles GET /api/cases/{caseID}/deadlines
 func (h *DeadlineHandlers) ListForCase(w http.ResponseWriter, r *http.Request) {
 	tenantID, err := resolveTenant(r, h.db)

backend/internal/router/router.go

@@ -81,7 +81,6 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
 	scoped.HandleFunc("DELETE /api/parties/{partyId}", partyH.Delete)
 
 	// Deadlines
-	scoped.HandleFunc("GET /api/deadlines", deadlineH.ListAll)
 	scoped.HandleFunc("GET /api/cases/{caseID}/deadlines", deadlineH.ListForCase)
 	scoped.HandleFunc("POST /api/cases/{caseID}/deadlines", deadlineH.Create)
 	scoped.HandleFunc("PUT /api/deadlines/{deadlineID}", deadlineH.Update)
@@ -91,7 +90,6 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
 	// Deadline rules (reference data)
 	scoped.HandleFunc("GET /api/deadline-rules", ruleH.List)
 	scoped.HandleFunc("GET /api/deadline-rules/{type}", ruleH.GetRuleTree)
-	scoped.HandleFunc("GET /api/proceeding-types", ruleH.ListProceedingTypes)
 
 	// Deadline calculator
 	scoped.HandleFunc("POST /api/deadlines/calculate", calcH.Calculate)

backend/internal/services/deadline_service.go

@@ -21,23 +21,6 @@ func NewDeadlineService(db *sqlx.DB) *DeadlineService {
 	return &DeadlineService{db: db}
 }
 
-// ListAll returns all deadlines for a tenant, ordered by due_date
-func (s *DeadlineService) ListAll(tenantID uuid.UUID) ([]models.Deadline, error) {
-	query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,
-	                 warning_date, source, rule_id, status, completed_at,
-	                 caldav_uid, caldav_etag, notes, created_at, updated_at
-	          FROM deadlines
-	          WHERE tenant_id = $1
-	          ORDER BY due_date ASC`
-
-	var deadlines []models.Deadline
-	err := s.db.Select(&deadlines, query, tenantID)
-	if err != nil {
-		return nil, fmt.Errorf("listing all deadlines: %w", err)
-	}
-	return deadlines, nil
-}
-
 // ListForCase returns all deadlines for a case, scoped to tenant
 func (s *DeadlineService) ListForCase(tenantID, caseID uuid.UUID) ([]models.Deadline, error) {
 	query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,

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

@@ -0,0 +1,267 @@
+"use client";
+
+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 } from "lucide-react";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+import Link from "next/link";
+import { useState } from "react";
+
+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 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"];
+
+export default function CaseDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const [activeTab, setActiveTab] = useState<TabKey>("timeline");
+
+  const { data: caseDetail, isLoading } = 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 (
+      <div className="py-12 text-center text-sm text-neutral-400">
+        Laden...
+      </div>
+    );
+  }
+
+  if (!caseDetail) {
+    return (
+      <div className="py-12 text-center text-sm text-neutral-400">
+        Akte nicht gefunden.
+      </div>
+    );
+  }
+
+  const deadlines = deadlinesData?.deadlines ?? [];
+  const documents = documentsData ?? [];
+
+  return (
+    <div>
+      <Link
+        href="/cases"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        Zuruck zu Akten
+      </Link>
+
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="flex 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"}`}
+            >
+              {caseDetail.status}
+            </span>
+          </div>
+          <div className="mt-1 flex gap-4 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-4">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`inline-flex 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 (
+      <p className="py-8 text-center text-sm text-neutral-400">
+        Keine Fristen vorhanden.
+      </p>
+    );
+  }
+
+  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",
+  };
+
+  return (
+    <div className="space-y-2">
+      {deadlines.map((d) => (
+        <div
+          key={d.id}
+          className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
+        >
+          <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"}`}
+            >
+              {d.status}
+            </span>
+            <span className="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 (
+      <p className="py-8 text-center text-sm text-neutral-400">
+        Keine Dokumente vorhanden.
+      </p>
+    );
+  }
+
+  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 hover:text-neutral-700"
+          >
+            Herunterladen
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { Case } from "@/lib/types";
+import { CaseForm, type CaseFormData } from "@/components/cases/CaseForm";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function NewCasePage() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (data: CaseFormData) => api.post<Case>("/cases", data),
+    onSuccess: (created) => {
+      queryClient.invalidateQueries({ queryKey: ["cases"] });
+      toast.success("Akte angelegt");
+      router.push(`/cases/${created.id}`);
+    },
+    onError: () => {
+      toast.error("Fehler beim Anlegen der Akte");
+    },
+  });
+
+  return (
+    <div className="mx-auto max-w-2xl">
+      <Link
+        href="/cases"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        Zuruck zu Akten
+      </Link>
+      <h1 className="text-lg font-semibold text-neutral-900">Neue Akte</h1>
+      <p className="mt-0.5 text-sm text-neutral-500">
+        Neue Akte im System anlegen
+      </p>
+      <div className="mt-6 rounded-md border border-neutral-200 bg-white p-6">
+        <CaseForm
+          onSubmit={(data) => mutation.mutate(data)}
+          isSubmitting={mutation.isPending}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,172 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Case } from "@/lib/types";
+import Link from "next/link";
+import { useSearchParams, useRouter } from "next/navigation";
+import { Plus, Search } from "lucide-react";
+import { useState } from "react";
+
+const STATUS_OPTIONS = [
+  { value: "", label: "Alle Status" },
+  { value: "active", label: "Aktiv" },
+  { value: "pending", label: "Anhangig" },
+  { value: "closed", label: "Geschlossen" },
+  { value: "archived", label: "Archiviert" },
+];
+
+const TYPE_OPTIONS = [
+  { value: "", label: "Alle Typen" },
+  { value: "INF", label: "Verletzungsklage" },
+  { value: "REV", label: "Widerruf" },
+  { value: "CCR", label: "Einstweilige Verfugung" },
+  { value: "APP", label: "Berufung" },
+  { value: "PI", label: "Vorlaufiger Rechtsschutz" },
+  { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
+];
+
+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",
+};
+
+export default function CasesPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [search, setSearch] = useState(searchParams.get("search") ?? "");
+  const [status, setStatus] = useState(searchParams.get("status") ?? "");
+  const [type, setType] = useState(searchParams.get("type") ?? "");
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["cases", { search, status, type }],
+    queryFn: () => {
+      const params = new URLSearchParams();
+      if (search) params.set("search", search);
+      if (status) params.set("status", status);
+      if (type) params.set("type", type);
+      params.set("limit", "50");
+      const qs = params.toString();
+      return api.get<{ cases: Case[]; total: number }>(
+        `/cases${qs ? `?${qs}` : ""}`,
+      );
+    },
+  });
+
+  const cases = data?.cases ?? [];
+
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-neutral-900">Akten</h1>
+          <p className="mt-0.5 text-sm text-neutral-500">
+            {data ? `${data.total} Akten` : "Laden..."}
+          </p>
+        </div>
+        <Link
+          href="/cases/new"
+          className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800"
+        >
+          <Plus className="h-4 w-4" />
+          Neue Akte
+        </Link>
+      </div>
+
+      <div className="mt-4 flex items-center gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400" />
+          <input
+            type="text"
+            placeholder="Suchen nach Aktenzeichen, Titel..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full rounded-md border border-neutral-200 bg-white py-1.5 pl-9 pr-3 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+          />
+        </div>
+        <select
+          value={status}
+          onChange={(e) => setStatus(e.target.value)}
+          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
+        >
+          {STATUS_OPTIONS.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+        <select
+          value={type}
+          onChange={(e) => setType(e.target.value)}
+          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
+        >
+          {TYPE_OPTIONS.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="mt-4">
+        {isLoading ? (
+          <div className="py-12 text-center text-sm text-neutral-400">
+            Laden...
+          </div>
+        ) : cases.length === 0 ? (
+          <div className="py-12 text-center text-sm text-neutral-400">
+            Keine Akten gefunden.
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-md border border-neutral-200 bg-white">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-neutral-100 text-left text-xs font-medium uppercase tracking-wider text-neutral-400">
+                  <th className="px-4 py-2.5">Aktenzeichen</th>
+                  <th className="px-4 py-2.5">Titel</th>
+                  <th className="px-4 py-2.5">Typ</th>
+                  <th className="px-4 py-2.5">Gericht</th>
+                  <th className="px-4 py-2.5">Status</th>
+                  <th className="px-4 py-2.5">Erstellt</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-neutral-100">
+                {cases.map((c) => (
+                  <tr
+                    key={c.id}
+                    onClick={() => router.push(`/cases/${c.id}`)}
+                    className="cursor-pointer hover:bg-neutral-50"
+                  >
+                    <td className="px-4 py-2.5 font-medium text-neutral-900">
+                      {c.case_number}
+                    </td>
+                    <td className="px-4 py-2.5 text-neutral-700">{c.title}</td>
+                    <td className="px-4 py-2.5 text-neutral-500">
+                      {c.case_type ?? "-"}
+                    </td>
+                    <td className="px-4 py-2.5 text-neutral-500">
+                      {c.court ?? "-"}
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <span
+                        className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[c.status] ?? "bg-neutral-100 text-neutral-500"}`}
+                      >
+                        {c.status}
+                      </span>
+                    </td>
+                    <td className="px-4 py-2.5 text-neutral-400">
+                      {new Date(c.created_at).toLocaleDateString("de-DE")}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,73 +0,0 @@
-"use client";
-
-import { DeadlineList } from "@/components/deadlines/DeadlineList";
-import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { Deadline } from "@/lib/types";
-import { Calendar, List, Calculator } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-
-type ViewMode = "list" | "calendar";
-
-export default function FristenPage() {
-  const [view, setView] = useState<ViewMode>("list");
-
-  const { data: deadlines } = useQuery({
-    queryKey: ["deadlines"],
-    queryFn: () => api.get<Deadline[]>("/api/deadlines"),
-  });
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
-          <p className="mt-0.5 text-sm text-neutral-500">
-            Alle Fristen im Uberblick
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Link
-            href="/fristen/rechner"
-            className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
-          >
-            <Calculator className="h-3.5 w-3.5" />
-            Fristenrechner
-          </Link>
-          <div className="flex rounded-md border border-neutral-200 bg-white">
-            <button
-              onClick={() => setView("list")}
-              className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
-                view === "list"
-                  ? "bg-neutral-100 font-medium text-neutral-900"
-                  : "text-neutral-500 hover:text-neutral-700"
-              }`}
-            >
-              <List className="h-3.5 w-3.5" />
-              Liste
-            </button>
-            <button
-              onClick={() => setView("calendar")}
-              className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
-                view === "calendar"
-                  ? "bg-neutral-100 font-medium text-neutral-900"
-                  : "text-neutral-500 hover:text-neutral-700"
-              }`}
-            >
-              <Calendar className="h-3.5 w-3.5" />
-              Kalender
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {view === "list" ? (
-        <DeadlineList />
-      ) : (
-        <DeadlineCalendarView deadlines={deadlines || []} />
-      )}
-    </div>
-  );
-}

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

@@ -1,26 +0,0 @@
-"use client";
-
-import { DeadlineCalculator } from "@/components/deadlines/DeadlineCalculator";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
-
-export default function FristenrechnerPage() {
-  return (
-    <div className="space-y-4">
-      <div>
-        <Link
-          href="/fristen"
-          className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-          Zuruck zu Fristen
-        </Link>
-        <h1 className="text-lg font-semibold text-neutral-900">Fristenrechner</h1>
-        <p className="mt-0.5 text-sm text-neutral-500">
-          Berechnen Sie Fristen basierend auf Verfahrensart und Auslosedatum
-        </p>
-      </div>
-      <DeadlineCalculator />
-    </div>
-  );
-}

frontend/src/components/cases/CaseForm.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useState } from "react";
+
+const TYPE_OPTIONS = [
+  { value: "", label: "-- Typ wahlen --" },
+  { value: "INF", label: "Verletzungsklage (INF)" },
+  { value: "REV", label: "Widerruf (REV)" },
+  { value: "CCR", label: "Einstweilige Verfugung (CCR)" },
+  { value: "APP", label: "Berufung (APP)" },
+  { value: "PI", label: "Vorlaufiger Rechtsschutz (PI)" },
+  { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
+];
+
+export interface CaseFormData {
+  case_number: string;
+  title: string;
+  case_type?: string;
+  court?: string;
+  court_ref?: string;
+  status: string;
+}
+
+interface CaseFormProps {
+  initialData?: Partial<CaseFormData>;
+  onSubmit: (data: CaseFormData) => void;
+  isSubmitting?: boolean;
+  submitLabel?: string;
+}
+
+export function CaseForm({
+  initialData,
+  onSubmit,
+  isSubmitting,
+  submitLabel = "Akte anlegen",
+}: CaseFormProps) {
+  const [form, setForm] = useState<CaseFormData>({
+    case_number: initialData?.case_number ?? "",
+    title: initialData?.title ?? "",
+    case_type: initialData?.case_type ?? "",
+    court: initialData?.court ?? "",
+    court_ref: initialData?.court_ref ?? "",
+    status: initialData?.status ?? "active",
+  });
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const data: CaseFormData = {
+      ...form,
+      case_type: form.case_type || undefined,
+      court: form.court || undefined,
+      court_ref: form.court_ref || undefined,
+    };
+    onSubmit(data);
+  }
+
+  function update(field: keyof CaseFormData, value: string) {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  const inputClass =
+    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Aktenzeichen *
+          </label>
+          <input
+            type="text"
+            required
+            value={form.case_number}
+            onChange={(e) => update("case_number", e.target.value)}
+            placeholder="z.B. 2026/001"
+            className={inputClass}
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Status
+          </label>
+          <select
+            value={form.status}
+            onChange={(e) => update("status", e.target.value)}
+            className={inputClass}
+          >
+            <option value="active">Aktiv</option>
+            <option value="pending">Anhangig</option>
+            <option value="closed">Geschlossen</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label className="mb-1 block text-sm font-medium text-neutral-700">
+          Titel *
+        </label>
+        <input
+          type="text"
+          required
+          value={form.title}
+          onChange={(e) => update("title", e.target.value)}
+          placeholder="Bezeichnung der Akte"
+          className={inputClass}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Verfahrensart
+          </label>
+          <select
+            value={form.case_type}
+            onChange={(e) => update("case_type", e.target.value)}
+            className={inputClass}
+          >
+            {TYPE_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Gericht
+          </label>
+          <input
+            type="text"
+            value={form.court}
+            onChange={(e) => update("court", e.target.value)}
+            placeholder="z.B. UPC Munich Central Division"
+            className={inputClass}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="mb-1 block text-sm font-medium text-neutral-700">
+          Gerichtliches Aktenzeichen
+        </label>
+        <input
+          type="text"
+          value={form.court_ref}
+          onChange={(e) => update("court_ref", e.target.value)}
+          placeholder="z.B. UPC_CFI_123/2026"
+          className={inputClass}
+        />
+      </div>
+
+      <div className="flex justify-end pt-2">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+        >
+          {isSubmitting ? "Speichern..." : submitLabel}
+        </button>
+      </div>
+    </form>
+  );
+}

frontend/src/components/cases/CaseTimeline.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { CaseEvent } from "@/lib/types";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+
+const EVENT_ICONS: Record<string, string> = {
+  case_created: "bg-emerald-500",
+  status_changed: "bg-amber-500",
+  party_added: "bg-blue-500",
+  case_archived: "bg-neutral-400",
+  document_uploaded: "bg-violet-500",
+  deadline_created: "bg-red-500",
+};
+
+interface CaseTimelineProps {
+  events: CaseEvent[];
+}
+
+export function CaseTimeline({ events }: CaseTimelineProps) {
+  if (events.length === 0) {
+    return (
+      <p className="py-8 text-center text-sm text-neutral-400">
+        Keine Ereignisse vorhanden.
+      </p>
+    );
+  }
+
+  return (
+    <div className="relative space-y-0">
+      {events.map((event, i) => (
+        <div key={event.id} className="relative flex gap-3 pb-6">
+          {i < events.length - 1 && (
+            <div className="absolute left-[7px] top-4 h-full w-px bg-neutral-200" />
+          )}
+          <div
+            className={`mt-1 h-[15px] w-[15px] shrink-0 rounded-full border-2 border-white ${EVENT_ICONS[event.event_type ?? ""] ?? "bg-neutral-300"}`}
+          />
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-neutral-900">
+              {event.title}
+            </p>
+            {event.description && (
+              <p className="mt-0.5 text-sm text-neutral-500">
+                {event.description}
+              </p>
+            )}
+            <p className="mt-1 text-xs text-neutral-400">
+              {format(
+                new Date(event.event_date ?? event.created_at),
+                "d. MMM yyyy, HH:mm",
+                { locale: de },
+              )}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/cases/PartyList.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { Party } from "@/lib/types";
+import { Plus, Trash2, X } from "lucide-react";
+
+interface PartyListProps {
+  caseId: string;
+  parties: Party[];
+}
+
+interface PartyFormData {
+  name: string;
+  role: string;
+  representative: string;
+}
+
+const ROLE_OPTIONS = [
+  "Klager",
+  "Beklagter",
+  "Nebenintervenient",
+  "Patentinhaber",
+  "Streithelfer",
+];
+
+export function PartyList({ caseId, parties }: PartyListProps) {
+  const queryClient = useQueryClient();
+  const [showForm, setShowForm] = useState(false);
+  const [form, setForm] = useState<PartyFormData>({
+    name: "",
+    role: "",
+    representative: "",
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (data: PartyFormData) =>
+      api.post<Party>(`/cases/${caseId}/parties`, {
+        name: data.name,
+        role: data.role || undefined,
+        representative: data.representative || undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case", caseId] });
+      toast.success("Partei hinzugefugt");
+      setShowForm(false);
+      setForm({ name: "", role: "", representative: "" });
+    },
+    onError: () => toast.error("Fehler beim Hinzufugen"),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (partyId: string) => api.delete(`/parties/${partyId}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case", caseId] });
+      toast.success("Partei entfernt");
+    },
+    onError: () => toast.error("Fehler beim Entfernen"),
+  });
+
+  const inputClass =
+    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-neutral-700">
+          Parteien ({parties.length})
+        </h3>
+        {!showForm && (
+          <button
+            onClick={() => setShowForm(true)}
+            className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Hinzufugen
+          </button>
+        )}
+      </div>
+
+      {parties.length === 0 && !showForm && (
+        <p className="mt-4 py-4 text-center text-sm text-neutral-400">
+          Keine Parteien vorhanden.
+        </p>
+      )}
+
+      <div className="mt-3 space-y-2">
+        {parties.map((party) => (
+          <div
+            key={party.id}
+            className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-2.5"
+          >
+            <div>
+              <p className="text-sm font-medium text-neutral-900">
+                {party.name}
+              </p>
+              <div className="mt-0.5 flex gap-3 text-xs text-neutral-500">
+                {party.role && <span>{party.role}</span>}
+                {party.representative && (
+                  <span>Vertreter: {party.representative}</span>
+                )}
+              </div>
+            </div>
+            <button
+              onClick={() => deleteMutation.mutate(party.id)}
+              className="rounded p-1 text-neutral-300 hover:bg-neutral-100 hover:text-red-500"
+              title="Partei entfernen"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {showForm && (
+        <div className="mt-3 rounded-md border border-neutral-200 bg-neutral-50 p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-neutral-700">
+              Neue Partei
+            </span>
+            <button
+              onClick={() => setShowForm(false)}
+              className="text-neutral-400 hover:text-neutral-600"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              addMutation.mutate(form);
+            }}
+            className="mt-3 space-y-3"
+          >
+            <input
+              type="text"
+              required
+              placeholder="Name der Partei"
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              className={inputClass}
+            />
+            <div className="grid grid-cols-2 gap-3">
+              <select
+                value={form.role}
+                onChange={(e) => setForm({ ...form, role: e.target.value })}
+                className={inputClass}
+              >
+                <option value="">-- Rolle --</option>
+                {ROLE_OPTIONS.map((r) => (
+                  <option key={r} value={r}>
+                    {r}
+                  </option>
+                ))}
+              </select>
+              <input
+                type="text"
+                placeholder="Vertreter / Anwalt"
+                value={form.representative}
+                onChange={(e) =>
+                  setForm({ ...form, representative: e.target.value })
+                }
+                className={inputClass}
+              />
+            </div>
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                disabled={addMutation.isPending}
+                className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+              >
+                {addMutation.isPending ? "..." : "Hinzufugen"}
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/deadlines/DeadlineCalculator.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { ProceedingType, CalculateResponse, CalculatedDeadline } from "@/lib/types";
-import { format, parseISO, isPast, isThisWeek } from "date-fns";
-import { de } from "date-fns/locale";
-import { Calculator, Calendar, ArrowRight, AlertTriangle } from "lucide-react";
-import { useState } from "react";
-
-function getTimelineUrgency(dueDate: string): "red" | "amber" | "green" {
-  const due = parseISO(dueDate);
-  if (isPast(due)) return "red";
-  if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
-  return "green";
-}
-
-const dotColors = {
-  red: "bg-red-500",
-  amber: "bg-amber-500",
-  green: "bg-green-500",
-};
-
-export function DeadlineCalculator() {
-  const [proceedingType, setProceedingType] = useState("");
-  const [triggerDate, setTriggerDate] = useState("");
-
-  const { data: proceedingTypes, isLoading: typesLoading } = useQuery({
-    queryKey: ["proceeding-types"],
-    queryFn: () => api.get<ProceedingType[]>("/api/proceeding-types"),
-  });
-
-  const calculateMutation = useMutation({
-    mutationFn: (params: { proceeding_type: string; trigger_event_date: string }) =>
-      api.post<CalculateResponse>("/api/deadlines/calculate", params),
-  });
-
-  function handleCalculate(e: React.FormEvent) {
-    e.preventDefault();
-    if (!proceedingType || !triggerDate) return;
-    calculateMutation.mutate({
-      proceeding_type: proceedingType,
-      trigger_event_date: triggerDate,
-    });
-  }
-
-  const results = calculateMutation.data;
-
-  return (
-    <div className="space-y-6">
-      {/* Input form */}
-      <form onSubmit={handleCalculate} className="rounded-lg border border-neutral-200 bg-white p-5">
-        <div className="flex items-center gap-2 text-sm font-medium text-neutral-900">
-          <Calculator className="h-4 w-4" />
-          Fristenberechnung
-        </div>
-        <div className="mt-4 grid gap-4 sm:grid-cols-3">
-          <div>
-            <label className="mb-1 block text-xs font-medium text-neutral-500">
-              Verfahrensart
-            </label>
-            <select
-              value={proceedingType}
-              onChange={(e) => setProceedingType(e.target.value)}
-              disabled={typesLoading}
-              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
-            >
-              <option value="">Bitte wahlen...</option>
-              {proceedingTypes?.map((pt) => (
-                <option key={pt.id} value={pt.code}>
-                  {pt.name} ({pt.code})
-                </option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <label className="mb-1 block text-xs font-medium text-neutral-500">
-              Auslosedatum
-            </label>
-            <input
-              type="date"
-              value={triggerDate}
-              onChange={(e) => setTriggerDate(e.target.value)}
-              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
-            />
-          </div>
-          <div className="flex items-end">
-            <button
-              type="submit"
-              disabled={!proceedingType || !triggerDate || calculateMutation.isPending}
-              className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {calculateMutation.isPending ? "Berechne..." : "Berechnen"}
-              <ArrowRight className="h-3.5 w-3.5" />
-            </button>
-          </div>
-        </div>
-      </form>
-
-      {/* Error */}
-      {calculateMutation.isError && (
-        <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-          <AlertTriangle className="h-4 w-4 shrink-0" />
-          Fehler bei der Berechnung. Bitte Eingaben prufen.
-        </div>
-      )}
-
-      {/* Results */}
-      {results && results.deadlines && (
-        <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-neutral-900">
-              Berechnete Fristen
-            </h3>
-            <span className="text-xs text-neutral-500">
-              {results.deadlines.length} Fristen ab{" "}
-              {format(parseISO(results.trigger_event_date), "dd. MMM yyyy", { locale: de })}
-            </span>
-          </div>
-
-          {/* Timeline */}
-          <div className="relative rounded-lg border border-neutral-200 bg-white">
-            {results.deadlines.map((d: CalculatedDeadline, i: number) => {
-              const urgency = getTimelineUrgency(d.due_date);
-              const isLast = i === results.deadlines.length - 1;
-
-              return (
-                <div
-                  key={d.rule_id}
-                  className={`flex gap-3 px-4 py-3 ${!isLast ? "border-b border-neutral-100" : ""}`}
-                >
-                  {/* Timeline dot + line */}
-                  <div className="flex flex-col items-center pt-1">
-                    <div className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
-                    {!isLast && <div className="mt-1 w-px flex-1 bg-neutral-200" />}
-                  </div>
-
-                  {/* Content */}
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-start justify-between gap-2">
-                      <span className="text-sm font-medium text-neutral-900">
-                        {d.title}
-                      </span>
-                      <span className="shrink-0 text-sm font-medium tabular-nums text-neutral-700">
-                        {format(parseISO(d.due_date), "dd.MM.yyyy")}
-                      </span>
-                    </div>
-                    <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
-                      {d.rule_code && <span>{d.rule_code}</span>}
-                      {d.was_adjusted && (
-                        <>
-                          {d.rule_code && <span>·</span>}
-                          <span className="text-amber-600">
-                            Angepasst (Original: {format(parseISO(d.original_due_date), "dd.MM.yyyy")})
-                          </span>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* Empty state */}
-      {!results && !calculateMutation.isPending && (
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
-          <Calendar className="mx-auto h-8 w-8 text-neutral-300" />
-          <p className="mt-2 text-sm text-neutral-500">
-            Verfahrensart und Auslosedatum wahlen, um Fristen zu berechnen
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/deadlines/DeadlineCalendarView.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import type { Deadline } from "@/lib/types";
-import {
-  format,
-  startOfMonth,
-  endOfMonth,
-  startOfWeek,
-  endOfWeek,
-  eachDayOfInterval,
-  isSameMonth,
-  isToday,
-  parseISO,
-  isPast,
-  isThisWeek,
-  addMonths,
-  subMonths,
-} from "date-fns";
-import { de } from "date-fns/locale";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useState, useMemo } from "react";
-
-interface DeadlineCalendarViewProps {
-  deadlines: Deadline[];
-}
-
-function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
-  if (deadline.status === "completed") return "green";
-  const due = parseISO(deadline.due_date);
-  if (isPast(due)) return "red";
-  if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
-  return "green";
-}
-
-const dotColors = {
-  red: "bg-red-500",
-  amber: "bg-amber-500",
-  green: "bg-green-500",
-};
-
-export function DeadlineCalendarView({ deadlines }: DeadlineCalendarViewProps) {
-  const [currentMonth, setCurrentMonth] = useState(new Date());
-
-  const monthStart = startOfMonth(currentMonth);
-  const monthEnd = endOfMonth(currentMonth);
-  const calStart = startOfWeek(monthStart, { weekStartsOn: 1 });
-  const calEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
-  const days = eachDayOfInterval({ start: calStart, end: calEnd });
-
-  const deadlinesByDay = useMemo(() => {
-    const map = new Map<string, Deadline[]>();
-    for (const d of deadlines) {
-      if (d.status === "completed") continue;
-      const key = d.due_date.slice(0, 10);
-      const existing = map.get(key) || [];
-      existing.push(d);
-      map.set(key, existing);
-    }
-    return map;
-  }, [deadlines]);
-
-  const weekDays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
-
-  return (
-    <div className="rounded-lg border border-neutral-200 bg-white">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-neutral-200 px-4 py-3">
-        <button
-          onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
-          className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
-        >
-          <ChevronLeft className="h-4 w-4" />
-        </button>
-        <span className="text-sm font-medium text-neutral-900">
-          {format(currentMonth, "MMMM yyyy", { locale: de })}
-        </span>
-        <button
-          onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
-          className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
-        >
-          <ChevronRight className="h-4 w-4" />
-        </button>
-      </div>
-
-      {/* Weekday labels */}
-      <div className="grid grid-cols-7 border-b border-neutral-100">
-        {weekDays.map((d) => (
-          <div key={d} className="px-2 py-2 text-center text-xs font-medium text-neutral-400">
-            {d}
-          </div>
-        ))}
-      </div>
-
-      {/* Days grid */}
-      <div className="grid grid-cols-7">
-        {days.map((day, i) => {
-          const key = format(day, "yyyy-MM-dd");
-          const dayDeadlines = deadlinesByDay.get(key) || [];
-          const inMonth = isSameMonth(day, currentMonth);
-          const today = isToday(day);
-
-          return (
-            <div
-              key={i}
-              className={`min-h-[4.5rem] border-b border-r border-neutral-100 p-1.5 ${
-                !inMonth ? "bg-neutral-50" : ""
-              }`}
-            >
-              <div
-                className={`mb-1 text-right text-xs ${
-                  today
-                    ? "font-bold text-neutral-900"
-                    : inMonth
-                      ? "text-neutral-600"
-                      : "text-neutral-300"
-                }`}
-              >
-                {today ? (
-                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-neutral-900 text-white">
-                    {format(day, "d")}
-                  </span>
-                ) : (
-                  format(day, "d")
-                )}
-              </div>
-              <div className="space-y-0.5">
-                {dayDeadlines.slice(0, 3).map((dl) => {
-                  const urgency = getUrgency(dl);
-                  return (
-                    <div
-                      key={dl.id}
-                      className="flex items-center gap-1 truncate"
-                      title={dl.title}
-                    >
-                      <div className={`h-1.5 w-1.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
-                      <span className="truncate text-[10px] text-neutral-700">
-                        {dl.title}
-                      </span>
-                    </div>
-                  );
-                })}
-                {dayDeadlines.length > 3 && (
-                  <div className="text-[10px] text-neutral-400">
-                    +{dayDeadlines.length - 3} mehr
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

frontend/src/components/deadlines/DeadlineList.tsx

@@ -1,257 +0,0 @@
-"use client";
-
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { Deadline, Case } from "@/lib/types";
-import { format, isPast, isThisWeek, parseISO } from "date-fns";
-import { de } from "date-fns/locale";
-import { Check, Clock, Filter } from "lucide-react";
-import { toast } from "sonner";
-import { useState, useMemo } from "react";
-
-type StatusFilter = "all" | "pending" | "completed" | "overdue";
-
-function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
-  if (deadline.status === "completed") return "green";
-  const due = parseISO(deadline.due_date);
-  if (isPast(due)) return "red";
-  if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
-  return "green";
-}
-
-const urgencyConfig = {
-  red: {
-    bg: "bg-red-50",
-    border: "border-red-200",
-    badge: "bg-red-100 text-red-700",
-    dot: "bg-red-500",
-    label: "Uberschritten",
-  },
-  amber: {
-    bg: "bg-amber-50",
-    border: "border-amber-200",
-    badge: "bg-amber-100 text-amber-700",
-    dot: "bg-amber-500",
-    label: "Diese Woche",
-  },
-  green: {
-    bg: "bg-white",
-    border: "border-neutral-200",
-    badge: "bg-green-100 text-green-700",
-    dot: "bg-green-500",
-    label: "OK",
-  },
-};
-
-export function DeadlineList() {
-  const queryClient = useQueryClient();
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
-  const [caseFilter, setCaseFilter] = useState<string>("all");
-
-  const { data: deadlines, isLoading } = useQuery({
-    queryKey: ["deadlines"],
-    queryFn: () => api.get<Deadline[]>("/api/deadlines"),
-  });
-
-  const { data: cases } = useQuery({
-    queryKey: ["cases"],
-    queryFn: () => api.get<Case[]>("/api/cases"),
-  });
-
-  const completeMutation = useMutation({
-    mutationFn: (id: string) =>
-      api.patch<Deadline>(`/api/deadlines/${id}/complete`),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
-      toast.success("Frist als erledigt markiert");
-    },
-    onError: () => {
-      toast.error("Fehler beim Abschliessen der Frist");
-    },
-  });
-
-  const caseMap = useMemo(() => {
-    const map = new Map<string, Case>();
-    cases?.forEach((c) => map.set(c.id, c));
-    return map;
-  }, [cases]);
-
-  const filtered = useMemo(() => {
-    if (!deadlines) return [];
-    return deadlines.filter((d) => {
-      if (statusFilter === "pending" && d.status !== "pending") return false;
-      if (statusFilter === "completed" && d.status !== "completed") return false;
-      if (statusFilter === "overdue") {
-        if (d.status === "completed") return false;
-        if (!isPast(parseISO(d.due_date))) return false;
-      }
-      if (caseFilter !== "all" && d.case_id !== caseFilter) return false;
-      return true;
-    });
-  }, [deadlines, statusFilter, caseFilter]);
-
-  const counts = useMemo(() => {
-    if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
-    let overdue = 0, thisWeek = 0, ok = 0;
-    for (const d of deadlines) {
-      if (d.status === "completed") continue;
-      const urgency = getUrgency(d);
-      if (urgency === "red") overdue++;
-      else if (urgency === "amber") thisWeek++;
-      else ok++;
-    }
-    return { overdue, thisWeek, ok };
-  }, [deadlines]);
-
-  if (isLoading) {
-    return (
-      <div className="space-y-3">
-        {[1, 2, 3, 4, 5].map((i) => (
-          <div key={i} className="h-16 animate-pulse rounded-lg bg-neutral-100" />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Summary cards */}
-      <div className="grid grid-cols-3 gap-3">
-        <button
-          onClick={() => setStatusFilter(statusFilter === "overdue" ? "all" : "overdue")}
-          className={`rounded-lg border p-3 text-left transition-colors ${
-            statusFilter === "overdue"
-              ? "border-red-300 bg-red-50"
-              : "border-neutral-200 bg-white hover:bg-neutral-50"
-          }`}
-        >
-          <div className="text-2xl font-semibold text-red-600">{counts.overdue}</div>
-          <div className="text-xs text-neutral-500">Uberschritten</div>
-        </button>
-        <button
-          onClick={() => setStatusFilter(statusFilter === "pending" ? "all" : "pending")}
-          className={`rounded-lg border p-3 text-left transition-colors ${
-            statusFilter === "pending"
-              ? "border-amber-300 bg-amber-50"
-              : "border-neutral-200 bg-white hover:bg-neutral-50"
-          }`}
-        >
-          <div className="text-2xl font-semibold text-amber-600">{counts.thisWeek}</div>
-          <div className="text-xs text-neutral-500">Diese Woche</div>
-        </button>
-        <button
-          onClick={() => setStatusFilter("all")}
-          className={`rounded-lg border p-3 text-left transition-colors ${
-            statusFilter === "all"
-              ? "border-green-300 bg-green-50"
-              : "border-neutral-200 bg-white hover:bg-neutral-50"
-          }`}
-        >
-          <div className="text-2xl font-semibold text-green-600">{counts.ok}</div>
-          <div className="text-xs text-neutral-500">OK</div>
-        </button>
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-1.5 text-sm text-neutral-500">
-          <Filter className="h-3.5 w-3.5" />
-          <span>Filter:</span>
-        </div>
-        <select
-          value={statusFilter}
-          onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
-          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
-        >
-          <option value="all">Alle Status</option>
-          <option value="pending">Offen</option>
-          <option value="completed">Erledigt</option>
-          <option value="overdue">Uberschritten</option>
-        </select>
-        {cases && cases.length > 0 && (
-          <select
-            value={caseFilter}
-            onChange={(e) => setCaseFilter(e.target.value)}
-            className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
-          >
-            <option value="all">Alle Akten</option>
-            {cases.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.case_number} — {c.title}
-              </option>
-            ))}
-          </select>
-        )}
-      </div>
-
-      {/* Deadline list */}
-      {filtered.length === 0 ? (
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
-          <Clock className="mx-auto h-8 w-8 text-neutral-300" />
-          <p className="mt-2 text-sm text-neutral-500">Keine Fristen gefunden</p>
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {filtered.map((deadline) => {
-            const urgency = getUrgency(deadline);
-            const config = urgencyConfig[urgency];
-            const caseInfo = caseMap.get(deadline.case_id);
-
-            return (
-              <div
-                key={deadline.id}
-                className={`flex items-center gap-3 rounded-lg border px-4 py-3 ${config.bg} ${config.border}`}
-              >
-                <div className={`h-2.5 w-2.5 shrink-0 rounded-full ${config.dot}`} />
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="truncate text-sm font-medium text-neutral-900">
-                      {deadline.title}
-                    </span>
-                    <span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${config.badge}`}>
-                      {config.label}
-                    </span>
-                    {deadline.status === "completed" && (
-                      <span className="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 text-xs font-medium text-neutral-500">
-                        Erledigt
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
-                    <span>
-                      {format(parseISO(deadline.due_date), "dd. MMM yyyy", { locale: de })}
-                    </span>
-                    {caseInfo && (
-                      <>
-                        <span>·</span>
-                        <span className="truncate">
-                          {caseInfo.case_number} — {caseInfo.title}
-                        </span>
-                      </>
-                    )}
-                    {deadline.source !== "manual" && (
-                      <>
-                        <span>·</span>
-                        <span>{deadline.source}</span>
-                      </>
-                    )}
-                  </div>
-                </div>
-                {deadline.status !== "completed" && (
-                  <button
-                    onClick={() => completeMutation.mutate(deadline.id)}
-                    disabled={completeMutation.isPending}
-                    title="Als erledigt markieren"
-                    className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-white hover:text-green-600"
-                  >
-                    <Check className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/layout/Sidebar.tsx

@@ -13,7 +13,7 @@ import {
 
 const navigation = [
   { name: "Dashboard", href: "/", icon: LayoutDashboard },
-  { name: "Akten", href: "/akten", icon: FolderOpen },
+  { name: "Akten", href: "/cases", icon: FolderOpen },
   { name: "Fristen", href: "/fristen", icon: Clock },
   { name: "Termine", href: "/termine", icon: Calendar },
   { name: "AI Analyse", href: "/ai", icon: Brain },

frontend/src/lib/api.ts

@@ -69,13 +69,6 @@ class ApiClient {
     });
   }
 
-  patch<T>(path: string, body?: unknown) {
-    return this.request<T>(path, {
-      method: "PATCH",
-      body: body ? JSON.stringify(body) : undefined,
-    });
-  }
-
   delete<T>(path: string) {
     return this.request<T>(path, { method: "DELETE" });
   }

frontend/src/lib/types.ts

@@ -104,54 +104,6 @@ export interface Document {
   updated_at: string;
 }
 
-export interface DeadlineRule {
-  id: string;
-  proceeding_type_id?: number;
-  parent_id?: string;
-  code?: string;
-  name: string;
-  description?: string;
-  primary_party?: string;
-  event_type?: string;
-  is_mandatory: boolean;
-  duration_value: number;
-  duration_unit: string;
-  timing?: string;
-  rule_code?: string;
-  deadline_notes?: string;
-  sequence_order: number;
-}
-
-export interface RuleTreeNode extends DeadlineRule {
-  children?: RuleTreeNode[];
-}
-
-export interface ProceedingType {
-  id: number;
-  code: string;
-  name: string;
-  description?: string;
-  jurisdiction?: string;
-  default_color: string;
-  sort_order: number;
-  is_active: boolean;
-}
-
-export interface CalculatedDeadline {
-  rule_code: string;
-  rule_id: string;
-  title: string;
-  due_date: string;
-  original_due_date: string;
-  was_adjusted: boolean;
-}
-
-export interface CalculateResponse {
-  proceeding_type: string;
-  trigger_event_date: string;
-  deadlines: CalculatedDeadline[];
-}
-
 export interface ApiError {
   error: string;
   status: number;