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
2026-03-25 13:53:12 +01:00
20 changed files with 797 additions and 545 deletions
--- a/backend/internal/handlers/deadline_rules.go
+++ b/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) {
--- a/backend/internal/handlers/deadlines.go
+++ b/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)
--- a/backend/internal/router/router.go
+++ b/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)
--- a/backend/internal/services/deadline_service.go
+++ b/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,
--- a/frontend/src/app/(app)/dashboard/page.tsx
+++ b/frontend/src/app/(app)/dashboard/page.tsx
@@ -1,69 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { DashboardData } from "@/lib/types";
-import { DeadlineTrafficLights } from "@/components/dashboard/DeadlineTrafficLights";
-import { CaseOverviewGrid } from "@/components/dashboard/CaseOverviewGrid";
-import { UpcomingTimeline } from "@/components/dashboard/UpcomingTimeline";
-import { AISummaryCard } from "@/components/dashboard/AISummaryCard";
-import { QuickActions } from "@/components/dashboard/QuickActions";
-import { Loader2 } from "lucide-react";
-
-export default function DashboardPage() {
-  const { data, isLoading, error } = useQuery({
-    queryKey: ["dashboard"],
-    queryFn: () => api.get<DashboardData>("/dashboard"),
-    refetchInterval: 60_000,
-  });
-
-  if (isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
-      </div>
-    );
-  }
-
-  if (error || !data) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-neutral-500">
-          Dashboard konnte nicht geladen werden.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-6xl space-y-6">
-      <div>
-        <h1 className="text-lg font-semibold text-neutral-900">Dashboard</h1>
-        <p className="mt-0.5 text-sm text-neutral-500">
-          Fristenübersicht und Kanzlei-Status
-        </p>
-      </div>
-
-      {/* Traffic Lights — the hero section */}
-      <DeadlineTrafficLights data={data.deadline_summary} />
-
-      {/* Main content grid */}
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {/* Left column: Timeline (takes 2 cols) */}
-        <div className="lg:col-span-2">
-          <UpcomingTimeline
-            deadlines={data.upcoming_deadlines}
-            appointments={data.upcoming_appointments}
-          />
-        </div>
-
-        {/* Right column: Case overview, AI summary, Quick actions */}
-        <div className="space-y-6">
-          <CaseOverviewGrid data={data.case_summary} />
-          <AISummaryCard data={data} />
-          <QuickActions />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/frontend/src/app/(app)/fristen/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/fristen/rechner/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/app/(app)/page.tsx
+++ b/frontend/src/app/(app)/page.tsx
@@ -1,5 +1,10 @@
-import { redirect } from "next/navigation";
-
-export default function RootPage() {
-  redirect("/dashboard");
+export default function DashboardPage() {
+  return (
+    <div>
+      <h1 className="text-lg font-semibold text-neutral-900">Dashboard</h1>
+      <p className="mt-1 text-sm text-neutral-500">
+        Willkommen bei KanzlAI
+      </p>
+    </div>
+  );
 }
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -9,18 +9,3 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
-
-@keyframes count-up {
-  0% {
-    transform: translateY(8px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.animate-count-up {
-  animation: count-up 0.3s ease-out;
-}
--- a/frontend/src/components/dashboard/AISummaryCard.tsx
+++ b/frontend/src/components/dashboard/AISummaryCard.tsx
@@ -1,70 +0,0 @@
-"use client";
-
-import { Sparkles } from "lucide-react";
-import type { DashboardData } from "@/lib/types";
-
-interface Props {
-  data: DashboardData;
-}
-
-function generateSummary(data: DashboardData): string {
-  const parts: string[] = [];
-  const { deadline_summary: ds, case_summary: cs, upcoming_deadlines: ud } = data;
-
-  // Deadline urgency
-  if (ds.overdue_count > 0) {
-    parts.push(
-      `${ds.overdue_count} Frist${ds.overdue_count > 1 ? "en" : ""} ${ds.overdue_count > 1 ? "sind" : "ist"} überfällig und ${ds.overdue_count > 1 ? "erfordern" : "erfordert"} sofortige Aufmerksamkeit.`,
-    );
-  }
-
-  if (ds.due_this_week > 0) {
-    parts.push(
-      `${ds.due_this_week} Frist${ds.due_this_week > 1 ? "en laufen" : " läuft"} diese Woche ab.`,
-    );
-  }
-
-  // Highlight most critical upcoming deadline
-  if (ud.length > 0) {
-    const next = ud[0];
-    parts.push(
-      `Die nächste Frist ist "${next.title}" in Akte ${next.case_number}.`,
-    );
-  }
-
-  // Case activity
-  if (cs.new_this_month > 0) {
-    parts.push(
-      `${cs.new_this_month} neue Akte${cs.new_this_month > 1 ? "n" : ""} diesen Monat bei ${cs.active_count} aktiven Verfahren.`,
-    );
-  } else {
-    parts.push(`${cs.active_count} aktive Verfahren.`);
-  }
-
-  // All good
-  if (ds.overdue_count === 0 && ds.due_this_week === 0) {
-    parts.unshift("Alle Fristen sind im Zeitplan.");
-  }
-
-  return parts.join(" ");
-}
-
-export function AISummaryCard({ data }: Props) {
-  const summary = generateSummary(data);
-
-  return (
-    <div className="rounded-xl border border-neutral-200 bg-white p-5">
-      <div className="flex items-center gap-2">
-        <div className="rounded-md bg-violet-50 p-1.5">
-          <Sparkles className="h-4 w-4 text-violet-500" />
-        </div>
-        <h2 className="text-sm font-semibold text-neutral-900">
-          KI-Zusammenfassung
-        </h2>
-      </div>
-      <p className="mt-3 text-sm leading-relaxed text-neutral-700">
-        {summary}
-      </p>
-    </div>
-  );
-}
--- a/frontend/src/components/dashboard/CaseOverviewGrid.tsx
+++ b/frontend/src/components/dashboard/CaseOverviewGrid.tsx
@@ -1,55 +0,0 @@
-"use client";
-
-import { FolderOpen, FolderPlus, Archive } from "lucide-react";
-import type { CaseSummary } from "@/lib/types";
-
-interface Props {
-  data: CaseSummary;
-}
-
-export function CaseOverviewGrid({ data }: Props) {
-  const items = [
-    {
-      label: "Aktive Akten",
-      value: data.active_count,
-      icon: FolderOpen,
-      color: "text-blue-600",
-      bg: "bg-blue-50",
-    },
-    {
-      label: "Neu (Monat)",
-      value: data.new_this_month,
-      icon: FolderPlus,
-      color: "text-violet-600",
-      bg: "bg-violet-50",
-    },
-    {
-      label: "Abgeschlossen",
-      value: data.closed_count,
-      icon: Archive,
-      color: "text-neutral-500",
-      bg: "bg-neutral-50",
-    },
-  ];
-
-  return (
-    <div className="rounded-xl border border-neutral-200 bg-white p-5">
-      <h2 className="text-sm font-semibold text-neutral-900">Aktenübersicht</h2>
-      <div className="mt-4 space-y-3">
-        {items.map((item) => (
-          <div key={item.label} className="flex items-center justify-between">
-            <div className="flex items-center gap-2.5">
-              <div className={`rounded-md p-1.5 ${item.bg}`}>
-                <item.icon className={`h-4 w-4 ${item.color}`} />
-              </div>
-              <span className="text-sm text-neutral-600">{item.label}</span>
-            </div>
-            <span className="text-lg font-semibold tabular-nums text-neutral-900">
-              {item.value}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/frontend/src/components/dashboard/DeadlineTrafficLights.tsx
+++ b/frontend/src/components/dashboard/DeadlineTrafficLights.tsx
@@ -1,105 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { AlertTriangle, Clock, CheckCircle } from "lucide-react";
-import type { DeadlineSummary } from "@/lib/types";
-
-function AnimatedCount({ value }: { value: number }) {
-  const ref = useRef<HTMLSpanElement>(null);
-  const prevValue = useRef(value);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || prevValue.current === value) return;
-
-    el.classList.remove("animate-count-up");
-    void el.offsetWidth;
-    el.classList.add("animate-count-up");
-    prevValue.current = value;
-  }, [value]);
-
-  return (
-    <span ref={ref} className="inline-block tabular-nums">
-      {value}
-    </span>
-  );
-}
-
-interface Props {
-  data: DeadlineSummary;
-  onFilter?: (filter: "overdue" | "this_week" | "ok") => void;
-}
-
-export function DeadlineTrafficLights({ data, onFilter }: Props) {
-  const cards = [
-    {
-      key: "overdue" as const,
-      label: "Überfällig",
-      count: data.overdue_count,
-      icon: AlertTriangle,
-      bg: "bg-red-50",
-      border: "border-red-200",
-      iconColor: "text-red-500",
-      countColor: "text-red-700",
-      labelColor: "text-red-600",
-      ring: data.overdue_count > 0 ? "ring-2 ring-red-300 ring-offset-1" : "",
-      pulse: data.overdue_count > 0,
-    },
-    {
-      key: "this_week" as const,
-      label: "Diese Woche",
-      count: data.due_this_week,
-      icon: Clock,
-      bg: "bg-amber-50",
-      border: "border-amber-200",
-      iconColor: "text-amber-500",
-      countColor: "text-amber-700",
-      labelColor: "text-amber-600",
-      ring: "",
-      pulse: false,
-    },
-    {
-      key: "ok" as const,
-      label: "Im Zeitplan",
-      count: data.ok_count + data.due_next_week,
-      icon: CheckCircle,
-      bg: "bg-emerald-50",
-      border: "border-emerald-200",
-      iconColor: "text-emerald-500",
-      countColor: "text-emerald-700",
-      labelColor: "text-emerald-600",
-      ring: "",
-      pulse: false,
-    },
-  ];
-
-  return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-      {cards.map((card) => (
-        <button
-          key={card.key}
-          onClick={() => onFilter?.(card.key)}
-          className={`group relative overflow-hidden rounded-xl border ${card.border} ${card.bg} ${card.ring} p-6 text-left transition-all hover:shadow-md active:scale-[0.98]`}
-        >
-          {card.pulse && (
-            <span className="absolute right-4 top-4 flex h-3 w-3">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
-              <span className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
-            </span>
-          )}
-          <div className="flex items-center gap-3">
-            <div className={`rounded-lg p-2 ${card.bg}`}>
-              <card.icon className={`h-5 w-5 ${card.iconColor}`} />
-            </div>
-            <span className={`text-sm font-medium ${card.labelColor}`}>
-              {card.label}
-            </span>
-          </div>
-          <div className={`mt-4 text-4xl font-bold tracking-tight ${card.countColor}`}>
-            <AnimatedCount value={card.count} />
-          </div>
-        </button>
-      ))}
-    </div>
-  );
-}
--- a/frontend/src/components/dashboard/QuickActions.tsx
+++ b/frontend/src/components/dashboard/QuickActions.tsx
@@ -1,53 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
-
-const actions = [
-  {
-    label: "Neue Akte",
-    href: "/akten?new=1",
-    icon: FolderPlus,
-    color: "text-blue-600 bg-blue-50 hover:bg-blue-100",
-  },
-  {
-    label: "Frist eintragen",
-    href: "/fristen?new=1",
-    icon: Clock,
-    color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
-  },
-  {
-    label: "AI Analyse",
-    href: "/ai",
-    icon: Sparkles,
-    color: "text-violet-600 bg-violet-50 hover:bg-violet-100",
-  },
-  {
-    label: "CalDAV Sync",
-    href: "/einstellungen",
-    icon: CalendarSync,
-    color: "text-emerald-600 bg-emerald-50 hover:bg-emerald-100",
-  },
-];
-
-export function QuickActions() {
-  return (
-    <div className="rounded-xl border border-neutral-200 bg-white p-5">
-      <h2 className="text-sm font-semibold text-neutral-900">
-        Schnellzugriff
-      </h2>
-      <div className="mt-3 grid grid-cols-2 gap-2">
-        {actions.map((action) => (
-          <Link
-            key={action.label}
-            href={action.href}
-            className={`flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${action.color}`}
-          >
-            <action.icon className="h-4 w-4" />
-            {action.label}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/frontend/src/components/dashboard/UpcomingTimeline.tsx
+++ b/frontend/src/components/dashboard/UpcomingTimeline.tsx
@@ -1,134 +0,0 @@
-"use client";
-
-import { format, parseISO, isToday, isTomorrow } from "date-fns";
-import { de } from "date-fns/locale";
-import { Clock, Calendar, MapPin } from "lucide-react";
-import type { UpcomingDeadline, UpcomingAppointment } from "@/lib/types";
-
-interface Props {
-  deadlines: UpcomingDeadline[];
-  appointments: UpcomingAppointment[];
-}
-
-type TimelineItem =
-  | { type: "deadline"; date: Date; data: UpcomingDeadline }
-  | { type: "appointment"; date: Date; data: UpcomingAppointment };
-
-function formatDayLabel(date: Date): string {
-  if (isToday(date)) return "Heute";
-  if (isTomorrow(date)) return "Morgen";
-  return format(date, "EEEE, d. MMM", { locale: de });
-}
-
-export function UpcomingTimeline({ deadlines, appointments }: Props) {
-  const items: TimelineItem[] = [
-    ...deadlines.map((d) => ({
-      type: "deadline" as const,
-      date: parseISO(d.due_date),
-      data: d,
-    })),
-    ...appointments.map((a) => ({
-      type: "appointment" as const,
-      date: parseISO(a.start_at),
-      data: a,
-    })),
-  ].sort((a, b) => a.date.getTime() - b.date.getTime());
-
-  // Group by day
-  const grouped = new Map<string, TimelineItem[]>();
-  for (const item of items) {
-    const key = format(item.date, "yyyy-MM-dd");
-    const group = grouped.get(key) ?? [];
-    group.push(item);
-    grouped.set(key, group);
-  }
-
-  const empty = items.length === 0;
-
-  return (
-    <div className="rounded-xl border border-neutral-200 bg-white p-5">
-      <h2 className="text-sm font-semibold text-neutral-900">
-        Nächste 7 Tage
-      </h2>
-      {empty ? (
-        <p className="mt-6 text-center text-sm text-neutral-400">
-          Keine anstehenden Termine oder Fristen
-        </p>
-      ) : (
-        <div className="mt-4 space-y-5">
-          {Array.from(grouped.entries()).map(([dateKey, dayItems]) => (
-            <div key={dateKey}>
-              <p className="text-xs font-medium uppercase tracking-wider text-neutral-400">
-                {formatDayLabel(dayItems[0].date)}
-              </p>
-              <div className="mt-2 space-y-2">
-                {dayItems.map((item, i) => (
-                  <TimelineEntry key={`${item.type}-${i}`} item={item} />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function TimelineEntry({ item }: { item: TimelineItem }) {
-  if (item.type === "deadline") {
-    const d = item.data;
-    return (
-      <div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
-        <div className="mt-0.5 rounded-md bg-amber-50 p-1">
-          <Clock className="h-3.5 w-3.5 text-amber-500" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-medium text-neutral-900">
-            {d.title}
-          </p>
-          <p className="mt-0.5 truncate text-xs text-neutral-500">
-            {d.case_number} · {d.case_title}
-          </p>
-        </div>
-        <span className="shrink-0 text-xs font-medium text-amber-600">
-          Frist
-        </span>
-      </div>
-    );
-  }
-
-  const a = item.data;
-  return (
-    <div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
-      <div className="mt-0.5 rounded-md bg-blue-50 p-1">
-        <Calendar className="h-3.5 w-3.5 text-blue-500" />
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-medium text-neutral-900">
-          {a.title}
-        </p>
-        <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
-          <span>{format(item.date, "HH:mm")} Uhr</span>
-          {a.location && (
-            <>
-              <span className="text-neutral-300">·</span>
-              <span className="flex items-center gap-0.5 truncate">
-                <MapPin className="h-3 w-3" />
-                {a.location}
-              </span>
-            </>
-          )}
-          {a.case_number && (
-            <>
-              <span className="text-neutral-300">·</span>
-              <span>{a.case_number}</span>
-            </>
-          )}
-        </div>
-      </div>
-      <span className="shrink-0 text-xs font-medium text-blue-600">
-        Termin
-      </span>
-    </div>
-  );
-}
--- a/frontend/src/components/deadlines/DeadlineCalculator.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/deadlines/DeadlineCalendarView.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/deadlines/DeadlineList.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -12,7 +12,7 @@ import {
 } from "lucide-react";

 const navigation = [
-  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+  { name: "Dashboard", href: "/", icon: LayoutDashboard },
  { name: "Akten", href: "/akten", icon: FolderOpen },
  { name: "Fristen", href: "/fristen", icon: Clock },
  { name: "Termine", href: "/termine", icon: Calendar },
@@ -30,7 +30,10 @@ export function Sidebar() {
      </div>
      <nav className="flex-1 space-y-0.5 p-2">
        {navigation.map((item) => {
-          const isActive = pathname.startsWith(item.href);
+          const isActive =
+            item.href === "/"
+              ? pathname === "/"
+              : pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -69,6 +69,13 @@ 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" });
  }
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -104,49 +104,52 @@ export interface Document {
  updated_at: string;
 }

-export interface DeadlineSummary {
-  overdue_count: number;
-  due_this_week: number;
-  due_next_week: number;
-  ok_count: number;
-}
-
-export interface CaseSummary {
-  active_count: number;
-  new_this_month: number;
-  closed_count: number;
-}
-
-export interface UpcomingDeadline {
+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;
-  case_number: string;
-  case_title: string;
-  status: string;
+  original_due_date: string;
+  was_adjusted: boolean;
 }

-export interface UpcomingAppointment {
-  id: string;
-  title: string;
-  start_at: string;
-  case_number: string | null;
-  location: string | null;
-}
-
-export interface RecentActivityItem {
-  event_type: string | null;
-  title: string;
-  case_number: string;
-  event_date: string | null;
-}
-
-export interface DashboardData {
-  deadline_summary: DeadlineSummary;
-  case_summary: CaseSummary;
-  upcoming_deadlines: UpcomingDeadline[];
-  upcoming_appointments: UpcomingAppointment[];
-  recent_activity: RecentActivityItem[];
+export interface CalculateResponse {
+  proceeding_type: string;
+  trigger_event_date: string;
+  deadlines: CalculatedDeadline[];
 }

 export interface ApiError {