feat: add deadline management frontend (Phase 1G)

- Fristen page with list view (sortable, filterable by status/case)
- Calendar view with month navigation and deadline dots
- Deadline calculator page (proceeding type + trigger date = timeline)
- Traffic light urgency: red (overdue), amber (this week), green (OK)
- Backend: GET /api/deadlines (all tenant deadlines), GET /api/proceeding-types
- API client: added patch() method
- Types: DeadlineRule, ProceedingType, CalculatedDeadline, RuleTreeNode

backend/internal/handlers/deadline_rules.go

@@ -39,6 +39,17 @@ 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,6 +20,23 @@ 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,6 +81,7 @@ 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)
@@ -90,6 +91,7 @@ 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,6 +21,23 @@ 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/bun.lock

@@ -13,7 +13,6 @@
         "next": "15.5.14",
         "react": "19.1.0",
         "react-dom": "19.1.0",
-        "react-dropzone": "^15.0.0",
         "sonner": "^2.0.7",
       },
       "devDependencies": {
@@ -316,8 +315,6 @@
 
     "async-function": ["async-function@1.0.0", "", {}, "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="],
 
-    "attr-accept": ["attr-accept@2.2.5", "", {}, "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ=="],
-
     "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
 
     "axe-core": ["axe-core@4.11.1", "", {}, "sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A=="],
@@ -448,8 +445,6 @@
 
     "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
 
-    "file-selector": ["file-selector@2.1.2", "", { "dependencies": { "tslib": "^2.7.0" } }, "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig=="],
-
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
@@ -700,8 +695,6 @@
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
-    "react-dropzone": ["react-dropzone@15.0.0", "", { "dependencies": { "attr-accept": "^2.2.4", "file-selector": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.8 || 18.0.0" } }, "sha512-lGjYV/EoqEjEWPnmiSvH4v5IoIAwQM2W4Z1C0Q/Pw2xD0eVzKPS359BQTUMum+1fa0kH2nrKjuavmTPOGhpLPg=="],
-
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],

frontend/package.json

@@ -17,7 +17,6 @@
     "next": "15.5.14",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-dropzone": "^15.0.0",
     "sonner": "^2.0.7"
   },
   "devDependencies": {

frontend/src/app/(app)/ai/extract/page.tsx

@@ -1,142 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
-import { Brain } from "lucide-react";
-import { api } from "@/lib/api";
-import type {
-  Case,
-  ExtractedDeadline,
-  ExtractionResponse,
-  PaginatedResponse,
-} from "@/lib/types";
-import { ExtractionForm } from "@/components/ai/ExtractionForm";
-import { ExtractionResults } from "@/components/ai/ExtractionResults";
-
-export default function AIExtractPage() {
-  const router = useRouter();
-  const [selectedCaseId, setSelectedCaseId] = useState("");
-  const [isExtracting, setIsExtracting] = useState(false);
-  const [isAdopting, setIsAdopting] = useState(false);
-  const [results, setResults] = useState<ExtractedDeadline[] | null>(null);
-
-  const { data: casesData } = useQuery({
-    queryKey: ["cases"],
-    queryFn: () => api.get<PaginatedResponse<Case>>("/api/cases"),
-  });
-
-  const cases = casesData?.data ?? [];
-
-  async function handleExtract(file: File | null, text: string) {
-    setIsExtracting(true);
-    setResults(null);
-
-    try {
-      let response: ExtractionResponse;
-
-      if (file) {
-        const formData = new FormData();
-        formData.append("file", file);
-        response = await api.postFormData<ExtractionResponse>(
-          "/api/ai/extract-deadlines",
-          formData,
-        );
-      } else {
-        response = await api.post<ExtractionResponse>(
-          "/api/ai/extract-deadlines",
-          { text },
-        );
-      }
-
-      setResults(response.deadlines);
-
-      if (response.count === 0) {
-        toast.info("Keine Fristen im Dokument gefunden.");
-      } else {
-        toast.success(`${response.count} Frist(en) erkannt.`);
-      }
-    } catch (err: unknown) {
-      const message =
-        err && typeof err === "object" && "error" in err
-          ? (err as { error: string }).error
-          : "Analyse fehlgeschlagen";
-      toast.error(message);
-    } finally {
-      setIsExtracting(false);
-    }
-  }
-
-  async function handleAdopt(deadlines: ExtractedDeadline[]) {
-    if (!selectedCaseId) return;
-    setIsAdopting(true);
-
-    try {
-      const promises = deadlines.map((d) =>
-        api.post(`/api/cases/${selectedCaseId}/deadlines`, {
-          title: d.title,
-          due_date: d.due_date ?? "",
-          source: "ai_extraction",
-          notes: [
-            d.rule_reference ? `Rechtsgrundlage: ${d.rule_reference}` : "",
-            d.source_quote ? `Quelle: "${d.source_quote}"` : "",
-            `Konfidenz: ${Math.round(d.confidence * 100)}%`,
-          ]
-            .filter(Boolean)
-            .join("\n"),
-        }),
-      );
-
-      await Promise.all(promises);
-      toast.success(
-        `${deadlines.length} Frist(en) erfolgreich uebernommen.`,
-      );
-      router.push(`/akten/${selectedCaseId}`);
-    } catch (err: unknown) {
-      const message =
-        err && typeof err === "object" && "error" in err
-          ? (err as { error: string }).error
-          : "Uebernahme fehlgeschlagen";
-      toast.error(message);
-    } finally {
-      setIsAdopting(false);
-    }
-  }
-
-  return (
-    <div className="mx-auto max-w-4xl">
-      <div className="mb-6 flex items-center gap-3">
-        <Brain className="h-5 w-5 text-neutral-500" />
-        <div>
-          <h1 className="text-lg font-semibold text-neutral-900">
-            AI Fristenanalyse
-          </h1>
-          <p className="text-sm text-neutral-500">
-            Fristen automatisch aus Dokumenten extrahieren
-          </p>
-        </div>
-      </div>
-
-      <div className="rounded-lg border border-neutral-200 bg-white p-6">
-        <ExtractionForm
-          cases={cases}
-          selectedCaseId={selectedCaseId}
-          onCaseChange={setSelectedCaseId}
-          onExtract={handleExtract}
-          isLoading={isExtracting}
-        />
-      </div>
-
-      {results !== null && (
-        <div className="mt-6 rounded-lg border border-neutral-200 bg-white p-6">
-          <ExtractionResults
-            deadlines={results}
-            onAdopt={handleAdopt}
-            isAdopting={isAdopting}
-          />
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -0,0 +1,73 @@
+"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

@@ -0,0 +1,26 @@
+"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/ai/ExtractionForm.tsx

@@ -1,169 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { Upload, FileText, X, Loader2 } from "lucide-react";
-import type { Case } from "@/lib/types";
-
-interface ExtractionFormProps {
-  cases: Case[];
-  selectedCaseId: string;
-  onCaseChange: (caseId: string) => void;
-  onExtract: (file: File | null, text: string) => void;
-  isLoading: boolean;
-}
-
-export function ExtractionForm({
-  cases,
-  selectedCaseId,
-  onCaseChange,
-  onExtract,
-  isLoading,
-}: ExtractionFormProps) {
-  const [file, setFile] = useState<File | null>(null);
-  const [text, setText] = useState("");
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    if (acceptedFiles.length > 0) {
-      setFile(acceptedFiles[0]);
-      setText("");
-    }
-  }, []);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept: { "application/pdf": [".pdf"] },
-    maxFiles: 1,
-    disabled: isLoading,
-  });
-
-  function removeFile() {
-    setFile(null);
-  }
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!selectedCaseId || (!file && !text.trim())) return;
-    onExtract(file, text.trim());
-  }
-
-  const hasInput = file !== null || text.trim().length > 0;
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-5">
-      {/* Case selector */}
-      <div>
-        <label
-          htmlFor="case-select"
-          className="mb-1.5 block text-sm font-medium text-neutral-700"
-        >
-          Akte
-        </label>
-        <select
-          id="case-select"
-          value={selectedCaseId}
-          onChange={(e) => onCaseChange(e.target.value)}
-          className="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500"
-          disabled={isLoading}
-        >
-          <option value="">Akte auswaehlen...</option>
-          {cases.map((c) => (
-            <option key={c.id} value={c.id}>
-              {c.case_number} - {c.title}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* PDF dropzone */}
-      <div>
-        <label className="mb-1.5 block text-sm font-medium text-neutral-700">
-          PDF hochladen
-        </label>
-        {file ? (
-          <div className="flex items-center gap-3 rounded-md border border-neutral-200 bg-neutral-50 px-4 py-3">
-            <FileText className="h-5 w-5 shrink-0 text-neutral-500" />
-            <div className="min-w-0 flex-1">
-              <p className="truncate text-sm font-medium text-neutral-900">
-                {file.name}
-              </p>
-              <p className="text-xs text-neutral-500">
-                {(file.size / 1024).toFixed(0)} KB
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={removeFile}
-              disabled={isLoading}
-              className="rounded p-1 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-600"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          </div>
-        ) : (
-          <div
-            {...getRootProps()}
-            className={`cursor-pointer rounded-md border-2 border-dashed px-6 py-8 text-center transition-colors ${
-              isDragActive
-                ? "border-neutral-500 bg-neutral-50"
-                : "border-neutral-300 hover:border-neutral-400"
-            } ${isLoading ? "pointer-events-none opacity-50" : ""}`}
-          >
-            <input {...getInputProps()} />
-            <Upload className="mx-auto h-8 w-8 text-neutral-400" />
-            <p className="mt-2 text-sm text-neutral-600">
-              PDF hierher ziehen oder{" "}
-              <span className="font-medium text-neutral-900">durchsuchen</span>
-            </p>
-            <p className="mt-1 text-xs text-neutral-400">Nur PDF-Dateien</p>
-          </div>
-        )}
-      </div>
-
-      {/* Divider */}
-      <div className="flex items-center gap-3">
-        <div className="h-px flex-1 bg-neutral-200" />
-        <span className="text-xs text-neutral-400">oder</span>
-        <div className="h-px flex-1 bg-neutral-200" />
-      </div>
-
-      {/* Text input */}
-      <div>
-        <label
-          htmlFor="text-input"
-          className="mb-1.5 block text-sm font-medium text-neutral-700"
-        >
-          Text eingeben
-        </label>
-        <textarea
-          id="text-input"
-          value={text}
-          onChange={(e) => {
-            setText(e.target.value);
-            if (e.target.value.trim()) setFile(null);
-          }}
-          placeholder="Gerichtsschriftsatz, Beschluss oder sonstigen Text hier einfuegen..."
-          rows={6}
-          disabled={isLoading}
-          className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500 disabled:opacity-50"
-        />
-      </div>
-
-      {/* Submit */}
-      <button
-        type="submit"
-        disabled={isLoading || !hasInput || !selectedCaseId}
-        className="inline-flex items-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"
-      >
-        {isLoading ? (
-          <>
-            <Loader2 className="h-4 w-4 animate-spin" />
-            Analysiere...
-          </>
-        ) : (
-          "Analysieren"
-        )}
-      </button>
-    </form>
-  );
-}

frontend/src/components/ai/ExtractionResults.tsx

@@ -1,238 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Trash2, Check, Pencil, X, Loader2 } from "lucide-react";
-import type { ExtractedDeadline } from "@/lib/types";
-
-interface ExtractionResultsProps {
-  deadlines: ExtractedDeadline[];
-  onAdopt: (deadlines: ExtractedDeadline[]) => void;
-  isAdopting: boolean;
-}
-
-function confidenceColor(confidence: number): string {
-  if (confidence >= 0.8) return "bg-green-100 text-green-800";
-  if (confidence >= 0.5) return "bg-yellow-100 text-yellow-800";
-  return "bg-red-100 text-red-800";
-}
-
-function confidenceLabel(confidence: number): string {
-  if (confidence >= 0.8) return "Hoch";
-  if (confidence >= 0.5) return "Mittel";
-  return "Niedrig";
-}
-
-export function ExtractionResults({
-  deadlines: initialDeadlines,
-  onAdopt,
-  isAdopting,
-}: ExtractionResultsProps) {
-  const [deadlines, setDeadlines] = useState(initialDeadlines);
-  const [editingIndex, setEditingIndex] = useState<number | null>(null);
-  const [editForm, setEditForm] = useState<ExtractedDeadline | null>(null);
-
-  function removeDeadline(index: number) {
-    setDeadlines((prev) => prev.filter((_, i) => i !== index));
-  }
-
-  function startEdit(index: number) {
-    setEditingIndex(index);
-    setEditForm({ ...deadlines[index] });
-  }
-
-  function cancelEdit() {
-    setEditingIndex(null);
-    setEditForm(null);
-  }
-
-  function saveEdit() {
-    if (editingIndex === null || !editForm) return;
-    setDeadlines((prev) =>
-      prev.map((d, i) => (i === editingIndex ? editForm : d)),
-    );
-    setEditingIndex(null);
-    setEditForm(null);
-  }
-
-  if (deadlines.length === 0) {
-    return (
-      <div className="rounded-md border border-neutral-200 bg-neutral-50 p-6 text-center">
-        <p className="text-sm text-neutral-500">
-          Keine Fristen gefunden. Alle extrahierten Fristen wurden entfernt.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-medium text-neutral-900">
-          {deadlines.length} Frist{deadlines.length !== 1 ? "en" : ""} erkannt
-        </h3>
-        <button
-          onClick={() => onAdopt(deadlines)}
-          disabled={isAdopting || deadlines.length === 0}
-          className="inline-flex items-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"
-        >
-          {isAdopting ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Uebernehme...
-            </>
-          ) : (
-            <>
-              <Check className="h-4 w-4" />
-              Fristen uebernehmen
-            </>
-          )}
-        </button>
-      </div>
-
-      <div className="overflow-hidden rounded-md border border-neutral-200">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-neutral-200 bg-neutral-50">
-              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
-                Frist
-              </th>
-              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
-                Faelligkeitsdatum
-              </th>
-              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
-                Rechtsgrundlage
-              </th>
-              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
-                Konfidenz
-              </th>
-              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
-                Quellenangabe
-              </th>
-              <th className="px-4 py-2.5 text-right font-medium text-neutral-700">
-                Aktionen
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {deadlines.map((d, i) => (
-              <tr
-                key={i}
-                className="border-b border-neutral-100 last:border-b-0"
-              >
-                {editingIndex === i && editForm ? (
-                  <>
-                    <td className="px-4 py-2">
-                      <input
-                        value={editForm.title}
-                        onChange={(e) =>
-                          setEditForm({ ...editForm, title: e.target.value })
-                        }
-                        className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
-                      />
-                    </td>
-                    <td className="px-4 py-2">
-                      <input
-                        type="date"
-                        value={editForm.due_date ?? ""}
-                        onChange={(e) =>
-                          setEditForm({
-                            ...editForm,
-                            due_date: e.target.value || null,
-                          })
-                        }
-                        className="rounded border border-neutral-300 px-2 py-1 text-sm"
-                      />
-                    </td>
-                    <td className="px-4 py-2">
-                      <input
-                        value={editForm.rule_reference}
-                        onChange={(e) =>
-                          setEditForm({
-                            ...editForm,
-                            rule_reference: e.target.value,
-                          })
-                        }
-                        className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
-                      />
-                    </td>
-                    <td className="px-4 py-2">
-                      <span
-                        className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${confidenceColor(editForm.confidence)}`}
-                      >
-                        {confidenceLabel(editForm.confidence)}
-                      </span>
-                    </td>
-                    <td className="px-4 py-2 text-xs text-neutral-500">
-                      {editForm.source_quote}
-                    </td>
-                    <td className="px-4 py-2 text-right">
-                      <div className="flex items-center justify-end gap-1">
-                        <button
-                          onClick={saveEdit}
-                          className="rounded p-1 text-green-600 hover:bg-green-50"
-                          title="Speichern"
-                        >
-                          <Check className="h-4 w-4" />
-                        </button>
-                        <button
-                          onClick={cancelEdit}
-                          className="rounded p-1 text-neutral-400 hover:bg-neutral-100"
-                          title="Abbrechen"
-                        >
-                          <X className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </td>
-                  </>
-                ) : (
-                  <>
-                    <td className="px-4 py-2.5 font-medium text-neutral-900">
-                      {d.title}
-                    </td>
-                    <td className="px-4 py-2.5 text-neutral-700">
-                      {d.due_date
-                        ? new Date(d.due_date).toLocaleDateString("de-DE")
-                        : `${d.duration_value} ${d.duration_unit}`}
-                    </td>
-                    <td className="px-4 py-2.5 text-neutral-600">
-                      {d.rule_reference || "-"}
-                    </td>
-                    <td className="px-4 py-2.5">
-                      <span
-                        className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${confidenceColor(d.confidence)}`}
-                      >
-                        {confidenceLabel(d.confidence)}{" "}
-                        {Math.round(d.confidence * 100)}%
-                      </span>
-                    </td>
-                    <td className="max-w-48 truncate px-4 py-2.5 text-xs text-neutral-500">
-                      {d.source_quote || "-"}
-                    </td>
-                    <td className="px-4 py-2.5 text-right">
-                      <div className="flex items-center justify-end gap-1">
-                        <button
-                          onClick={() => startEdit(i)}
-                          className="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
-                          title="Bearbeiten"
-                        >
-                          <Pencil className="h-3.5 w-3.5" />
-                        </button>
-                        <button
-                          onClick={() => removeDeadline(i)}
-                          className="rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-600"
-                          title="Entfernen"
-                        >
-                          <Trash2 className="h-3.5 w-3.5" />
-                        </button>
-                      </div>
-                    </td>
-                  </>
-                )}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

frontend/src/components/deadlines/DeadlineCalculator.tsx

@@ -0,0 +1,178 @@
+"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

@@ -0,0 +1,154 @@
+"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

@@ -0,0 +1,257 @@
+"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

@@ -16,7 +16,7 @@ const navigation = [
   { name: "Akten", href: "/akten", icon: FolderOpen },
   { name: "Fristen", href: "/fristen", icon: Clock },
   { name: "Termine", href: "/termine", icon: Calendar },
-  { name: "AI Analyse", href: "/ai/extract", icon: Brain },
+  { name: "AI Analyse", href: "/ai", icon: Brain },
   { name: "Einstellungen", href: "/einstellungen", icon: Settings },
 ];
 

frontend/src/lib/api.ts

@@ -69,43 +69,15 @@ class ApiClient {
     });
   }
 
-  delete<T>(path: string) {
+  patch<T>(path: string, body?: unknown) {
-    return this.request<T>(path, { method: "DELETE" });
+    return this.request<T>(path, {
+      method: "PATCH",
+      body: body ? JSON.stringify(body) : undefined,
+    });
   }
 
-  async postFormData<T>(path: string, formData: FormData): Promise<T> {
+  delete<T>(path: string) {
-    const supabase = createClient();
+    return this.request<T>(path, { method: "DELETE" });
-    const {
-      data: { session },
-    } = await supabase.auth.getSession();
-
-    const headers: HeadersInit = {};
-    if (session?.access_token) {
-      headers["Authorization"] = `Bearer ${session.access_token}`;
-    }
-    const tenantId = typeof window !== "undefined"
-      ? localStorage.getItem("kanzlai_tenant_id")
-      : null;
-    if (tenantId) {
-      headers["X-Tenant-ID"] = tenantId;
-    }
-
-    const res = await fetch(`${this.baseUrl}${path}`, {
-      method: "POST",
-      headers,
-      body: formData,
-    });
-
-    if (!res.ok) {
-      const body = await res.json().catch(() => ({}));
-      const err: ApiError = {
-        error: body.error || res.statusText,
-        status: res.status,
-      };
-      throw err;
-    }
-
-    return res.json();
   }
 }
 

frontend/src/lib/types.ts

@@ -104,21 +104,52 @@ export interface Document {
   updated_at: string;
 }
 
-export interface ExtractedDeadline {
+export interface DeadlineRule {
-  title: string;
+  id: string;
-  due_date: string | null;
+  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;
+  timing?: string;
-  trigger_event: string;
+  rule_code?: string;
-  rule_reference: string;
+  deadline_notes?: string;
-  confidence: number;
+  sequence_order: number;
-  source_quote: string;
 }
 
-export interface ExtractionResponse {
+export interface RuleTreeNode extends DeadlineRule {
-  deadlines: ExtractedDeadline[];
+  children?: RuleTreeNode[];
-  count: number;
+}
+
+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 {