feat: Phase B — interactive dashboard, breadcrumbs, clickable navigation

- Breadcrumb component: reusable nav with items array (label+href)
- DeadlineTrafficLights: buttons → Links to /fristen?status={filter}
- CaseOverviewGrid: static metrics → clickable Links to /cases?status={filter}
- UpcomingTimeline: items → clickable Links to /fristen/{id} or /termine/{id}
  with case number links and hover chevron
- QuickActions: swap CalDAV Sync for "Neuer Termin" → /termine/neu,
  fix "Frist eintragen" → /fristen/neu
- AISummaryCard: add RefreshCw button with spinning animation
- RecentActivityList: new component showing recent case events
- DeadlineList: accept initialStatus prop, add this_week/ok filters
- fristen/page.tsx: read searchParams.status for initial filter
- Add breadcrumbs to dashboard, fristen, cases, termine pages
- Add RecentActivity type, update DashboardData type

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

@@ -1,230 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
-import { api } from "@/lib/api";
-import type { CaseEvent, Case } from "@/lib/types";
-import { Breadcrumb } from "@/components/layout/Breadcrumb";
-import { NotesList } from "@/components/notes/NotesList";
-import { Skeleton } from "@/components/ui/Skeleton";
-import { format, parseISO } from "date-fns";
-import { de } from "date-fns/locale";
-import {
-  AlertTriangle,
-  FileText,
-  Scale,
-  ArrowRightLeft,
-  Calendar,
-  MessageSquare,
-  Gavel,
-  Info,
-} from "lucide-react";
-import Link from "next/link";
-
-const EVENT_TYPE_CONFIG: Record<
-  string,
-  { label: string; icon: typeof Info; color: string }
-> = {
-  status_changed: {
-    label: "Statusaenderung",
-    icon: ArrowRightLeft,
-    color: "bg-blue-50 text-blue-700",
-  },
-  deadline_created: {
-    label: "Frist erstellt",
-    icon: Calendar,
-    color: "bg-amber-50 text-amber-700",
-  },
-  deadline_completed: {
-    label: "Frist erledigt",
-    icon: Calendar,
-    color: "bg-emerald-50 text-emerald-700",
-  },
-  document_uploaded: {
-    label: "Dokument hochgeladen",
-    icon: FileText,
-    color: "bg-violet-50 text-violet-700",
-  },
-  hearing_scheduled: {
-    label: "Verhandlung angesetzt",
-    icon: Gavel,
-    color: "bg-rose-50 text-rose-700",
-  },
-  note_added: {
-    label: "Notiz hinzugefuegt",
-    icon: MessageSquare,
-    color: "bg-neutral-100 text-neutral-700",
-  },
-  case_created: {
-    label: "Akte erstellt",
-    icon: Scale,
-    color: "bg-emerald-50 text-emerald-700",
-  },
-};
-
-const DEFAULT_EVENT_CONFIG = {
-  label: "Ereignis",
-  icon: Info,
-  color: "bg-neutral-100 text-neutral-600",
-};
-
-function DetailSkeleton() {
-  return (
-    <div>
-      <Skeleton className="h-4 w-64" />
-      <div className="mt-6 space-y-4">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-4 w-32" />
-        <Skeleton className="h-32 rounded-lg" />
-        <Skeleton className="h-48 rounded-lg" />
-      </div>
-    </div>
-  );
-}
-
-export default function CaseEventDetailPage() {
-  const { id: caseId, eventId } = useParams<{
-    id: string;
-    eventId: string;
-  }>();
-
-  const { data: caseData } = useQuery({
-    queryKey: ["case", caseId],
-    queryFn: () => api.get<Case>(`/cases/${caseId}`),
-  });
-
-  const {
-    data: event,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["case-event", eventId],
-    queryFn: () => api.get<CaseEvent>(`/case-events/${eventId}`),
-  });
-
-  if (isLoading) return <DetailSkeleton />;
-
-  if (error || !event) {
-    return (
-      <div className="py-12 text-center">
-        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
-          <AlertTriangle className="h-6 w-6 text-red-500" />
-        </div>
-        <p className="text-sm font-medium text-neutral-900">
-          Ereignis nicht gefunden
-        </p>
-        <p className="mt-1 text-sm text-neutral-500">
-          Das Ereignis existiert nicht oder Sie haben keine Berechtigung.
-        </p>
-        <Link
-          href={`/cases/${caseId}`}
-          className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-        >
-          Zurueck zur Akte
-        </Link>
-      </div>
-    );
-  }
-
-  const typeConfig =
-    EVENT_TYPE_CONFIG[event.event_type ?? ""] ?? DEFAULT_EVENT_CONFIG;
-  const TypeIcon = typeConfig.icon;
-
-  return (
-    <div className="animate-fade-in">
-      <Breadcrumb
-        items={[
-          { label: "Dashboard", href: "/dashboard" },
-          { label: "Akten", href: "/cases" },
-          {
-            label: caseData?.case_number
-              ? `Az. ${caseData.case_number}`
-              : "Akte",
-            href: `/cases/${caseId}`,
-          },
-          { label: "Verlauf", href: `/cases/${caseId}` },
-          { label: event.title },
-        ]}
-      />
-
-      {/* Header */}
-      <div className="flex flex-wrap items-center gap-3">
-        <div className={`rounded-lg p-2 ${typeConfig.color}`}>
-          <TypeIcon className="h-5 w-5" />
-        </div>
-        <div>
-          <h1 className="text-lg font-semibold text-neutral-900">
-            {event.title}
-          </h1>
-          <p className="text-sm text-neutral-500">
-            {event.event_date
-              ? format(parseISO(event.event_date), "d. MMMM yyyy, HH:mm", {
-                  locale: de,
-                })
-              : format(parseISO(event.created_at), "d. MMMM yyyy, HH:mm", {
-                  locale: de,
-                })}
-          </p>
-        </div>
-      </div>
-
-      {/* Description */}
-      {event.description && (
-        <div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-          <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-            Beschreibung
-          </p>
-          <p className="mt-1 whitespace-pre-wrap text-sm text-neutral-700">
-            {event.description}
-          </p>
-        </div>
-      )}
-
-      {/* Metadata */}
-      <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-        <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-          Metadaten
-        </p>
-        <dl className="mt-2 space-y-1.5">
-          <div className="flex gap-2 text-sm">
-            <dt className="text-neutral-500">Typ:</dt>
-            <dd>
-              <span
-                className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${typeConfig.color}`}
-              >
-                {typeConfig.label}
-              </span>
-            </dd>
-          </div>
-          {event.created_by && (
-            <div className="flex gap-2 text-sm">
-              <dt className="text-neutral-500">Erstellt von:</dt>
-              <dd className="text-neutral-900">{event.created_by}</dd>
-            </div>
-          )}
-          <div className="flex gap-2 text-sm">
-            <dt className="text-neutral-500">Erstellt am:</dt>
-            <dd className="text-neutral-900">
-              {format(parseISO(event.created_at), "d. MMMM yyyy, HH:mm", {
-                locale: de,
-              })}
-            </dd>
-          </div>
-          {event.metadata &&
-            Object.keys(event.metadata).length > 0 &&
-            Object.entries(event.metadata).map(([key, value]) => (
-              <div key={key} className="flex gap-2 text-sm">
-                <dt className="text-neutral-500">{key}:</dt>
-                <dd className="text-neutral-900">{String(value)}</dd>
-              </div>
-            ))}
-        </dl>
-      </div>
-
-      {/* Notes */}
-      <div className="mt-6">
-        <NotesList parentType="case_event" parentId={eventId} />
-      </div>
-    </div>
-  );
-}

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

@@ -5,6 +5,7 @@ import { api } from "@/lib/api";
 import type { Case } from "@/lib/types";
 import Link from "next/link";
 import { useSearchParams, useRouter } from "next/navigation";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 import { Plus, Search, FolderOpen } from "lucide-react";
 import { useState } from "react";
 import { SkeletonTable } from "@/components/ui/Skeleton";
@@ -72,6 +73,12 @@ export default function CasesPage() {
 
   return (
     <div className="animate-fade-in">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Akten" },
+        ]}
+      />
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-lg font-semibold text-neutral-900">Akten</h1>

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

@@ -8,6 +8,8 @@ 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 { RecentActivityList } from "@/components/dashboard/RecentActivityList";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 import { Skeleton, SkeletonCard } from "@/components/ui/Skeleton";
 import { AlertTriangle, RefreshCw } from "lucide-react";
 
@@ -71,9 +73,12 @@ export default function DashboardPage() {
     );
   }
 
+  const recentActivity = Array.isArray(data.recent_activity) ? data.recent_activity : [];
+
   return (
     <div className="animate-fade-in mx-auto max-w-6xl space-y-6">
       <div>
+        <Breadcrumb items={[{ label: "Dashboard" }]} />
         <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
@@ -91,10 +96,14 @@ export default function DashboardPage() {
         </div>
         <div className="space-y-6">
           <CaseOverviewGrid data={data.case_summary ?? { active_count: 0, new_this_month: 0, closed_count: 0 }} />
-          <AISummaryCard data={data} />
+          <AISummaryCard data={data} onRefresh={() => refetch()} />
           <QuickActions />
         </div>
       </div>
+
+      {recentActivity.length > 0 && (
+        <RecentActivityList activities={recentActivity} />
+      )}
     </div>
   );
 }

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

@@ -1,250 +0,0 @@
-"use client";
-
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useParams, useRouter } from "next/navigation";
-import { api } from "@/lib/api";
-import type { Deadline } from "@/lib/types";
-import { Breadcrumb } from "@/components/layout/Breadcrumb";
-import { NotesList } from "@/components/notes/NotesList";
-import { Skeleton } from "@/components/ui/Skeleton";
-import { format, parseISO, formatDistanceToNow, isPast } from "date-fns";
-import { de } from "date-fns/locale";
-import {
-  AlertTriangle,
-  CheckCircle2,
-  Clock,
-  ExternalLink,
-} from "lucide-react";
-import Link from "next/link";
-import { toast } from "sonner";
-
-interface DeadlineDetail extends Deadline {
-  case_number?: string;
-  case_title?: string;
-}
-
-const STATUS_CONFIG: Record<
-  string,
-  { label: string; bg: string; icon: typeof Clock }
-> = {
-  pending: { label: "Offen", bg: "bg-amber-50 text-amber-700", icon: Clock },
-  completed: {
-    label: "Erledigt",
-    bg: "bg-emerald-50 text-emerald-700",
-    icon: CheckCircle2,
-  },
-  overdue: {
-    label: "Ueberfaellig",
-    bg: "bg-red-50 text-red-700",
-    icon: AlertTriangle,
-  },
-};
-
-function getEffectiveStatus(d: DeadlineDetail): string {
-  if (d.status === "completed") return "completed";
-  if (isPast(parseISO(d.due_date))) return "overdue";
-  return "pending";
-}
-
-function DetailSkeleton() {
-  return (
-    <div>
-      <Skeleton className="h-4 w-48" />
-      <div className="mt-6 space-y-4">
-        <Skeleton className="h-8 w-64" />
-        <Skeleton className="h-4 w-40" />
-        <Skeleton className="h-32 rounded-lg" />
-        <Skeleton className="h-48 rounded-lg" />
-      </div>
-    </div>
-  );
-}
-
-export default function DeadlineDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const router = useRouter();
-  const queryClient = useQueryClient();
-
-  const {
-    data: deadline,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["deadline", id],
-    queryFn: () => api.get<DeadlineDetail>(`/deadlines/${id}`),
-  });
-
-  const completeMutation = useMutation({
-    mutationFn: () => api.patch<Deadline>(`/deadlines/${id}/complete`),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["deadline", id] });
-      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
-      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
-      toast.success("Frist als erledigt markiert");
-    },
-    onError: () => toast.error("Fehler beim Abschliessen der Frist"),
-  });
-
-  if (isLoading) return <DetailSkeleton />;
-
-  if (error || !deadline) {
-    return (
-      <div className="py-12 text-center">
-        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
-          <AlertTriangle className="h-6 w-6 text-red-500" />
-        </div>
-        <p className="text-sm font-medium text-neutral-900">
-          Frist nicht gefunden
-        </p>
-        <p className="mt-1 text-sm text-neutral-500">
-          Die Frist existiert nicht oder Sie haben keine Berechtigung.
-        </p>
-        <Link
-          href="/fristen"
-          className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-        >
-          Zurueck zu Fristen
-        </Link>
-      </div>
-    );
-  }
-
-  const status = getEffectiveStatus(deadline);
-  const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.pending;
-  const StatusIcon = config.icon;
-  const dueDate = parseISO(deadline.due_date);
-  const relativeTime = formatDistanceToNow(dueDate, {
-    addSuffix: true,
-    locale: de,
-  });
-
-  return (
-    <div className="animate-fade-in">
-      <Breadcrumb
-        items={[
-          { label: "Dashboard", href: "/dashboard" },
-          { label: "Fristen", href: "/fristen" },
-          { label: deadline.title },
-        ]}
-      />
-
-      {/* Header */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <div className="flex flex-wrap items-center gap-3">
-            <span
-              className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${config.bg}`}
-            >
-              <StatusIcon className="h-3 w-3" />
-              {config.label}
-            </span>
-            <h1 className="text-lg font-semibold text-neutral-900">
-              {deadline.title}
-            </h1>
-          </div>
-          {deadline.description && (
-            <p className="mt-1 text-sm text-neutral-500">
-              {deadline.description}
-            </p>
-          )}
-        </div>
-        {deadline.status !== "completed" && (
-          <button
-            onClick={() => completeMutation.mutate()}
-            disabled={completeMutation.isPending}
-            className="shrink-0 rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50"
-          >
-            {completeMutation.isPending ? "Wird erledigt..." : "Erledigen"}
-          </button>
-        )}
-      </div>
-
-      {/* Due date */}
-      <div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-        <div className="flex items-baseline gap-2">
-          <span className="text-sm font-medium text-neutral-900">
-            Faellig: {format(dueDate, "d. MMMM yyyy", { locale: de })}
-          </span>
-          <span
-            className={`text-xs ${status === "overdue" ? "font-medium text-red-600" : "text-neutral-500"}`}
-          >
-            ({relativeTime})
-          </span>
-        </div>
-        {deadline.warning_date && (
-          <p className="mt-1 text-xs text-neutral-500">
-            Warnung am:{" "}
-            {format(parseISO(deadline.warning_date), "d. MMMM yyyy", {
-              locale: de,
-            })}
-          </p>
-        )}
-        {deadline.original_due_date &&
-          deadline.original_due_date !== deadline.due_date && (
-            <p className="mt-1 text-xs text-neutral-500">
-              Urspruengliches Datum:{" "}
-              {format(parseISO(deadline.original_due_date), "d. MMMM yyyy", {
-                locale: de,
-              })}
-            </p>
-          )}
-        {deadline.completed_at && (
-          <p className="mt-1 text-xs text-emerald-600">
-            Erledigt am:{" "}
-            {format(parseISO(deadline.completed_at), "d. MMMM yyyy, HH:mm", {
-              locale: de,
-            })}
-          </p>
-        )}
-      </div>
-
-      {/* Case context */}
-      {deadline.case_id && (
-        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-                Akte
-              </p>
-              <p className="mt-0.5 text-sm text-neutral-900">
-                {deadline.case_number
-                  ? `Az. ${deadline.case_number}`
-                  : "Verknuepfte Akte"}
-                {deadline.case_title && ` — ${deadline.case_title}`}
-              </p>
-            </div>
-            <Link
-              href={`/cases/${deadline.case_id}`}
-              className="flex items-center gap-1 text-xs text-neutral-500 transition-colors hover:text-neutral-700"
-            >
-              Zur Akte
-              <ExternalLink className="h-3 w-3" />
-            </Link>
-          </div>
-        </div>
-      )}
-
-      {/* Source info */}
-      {deadline.source && deadline.source !== "manual" && (
-        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-          <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-            Quelle
-          </p>
-          <p className="mt-0.5 text-sm text-neutral-700">
-            {deadline.source === "calculated"
-              ? "Berechnet"
-              : deadline.source === "caldav"
-                ? "CalDAV Sync"
-                : deadline.source}
-            {deadline.rule_id && ` (Regel: ${deadline.rule_id})`}
-          </p>
-        </div>
-      )}
-
-      {/* Notes */}
-      <div className="mt-6">
-        <NotesList parentType="deadline" parentId={id} />
-      </div>
-    </div>
-  );
-}

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

@@ -1,180 +0,0 @@
-"use client";
-
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { api } from "@/lib/api";
-import type { Case, Deadline } from "@/lib/types";
-import { Breadcrumb } from "@/components/layout/Breadcrumb";
-import { useState } from "react";
-import { toast } from "sonner";
-
-const inputClass =
-  "w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
-const labelClass = "mb-1 block text-xs font-medium text-neutral-600";
-
-export default function NewDeadlinePage() {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-
-  const [caseId, setCaseId] = useState("");
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [dueDate, setDueDate] = useState("");
-  const [warningDate, setWarningDate] = useState("");
-  const [notes, setNotes] = useState("");
-
-  const { data: casesData } = useQuery({
-    queryKey: ["cases"],
-    queryFn: () => api.get<{ cases: Case[]; total: number } | Case[]>("/cases"),
-  });
-
-  const cases = Array.isArray(casesData)
-    ? casesData
-    : Array.isArray(casesData?.cases)
-      ? casesData.cases
-      : [];
-
-  const createMutation = useMutation({
-    mutationFn: (body: Record<string, unknown>) =>
-      api.post<Deadline>(`/cases/${caseId}/deadlines`, body),
-    onSuccess: (data) => {
-      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
-      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
-      toast.success("Frist erstellt");
-      router.push(`/fristen/${data.id}`);
-    },
-    onError: () => toast.error("Fehler beim Erstellen der Frist"),
-  });
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!caseId || !title.trim() || !dueDate) return;
-
-    const body: Record<string, unknown> = {
-      title: title.trim(),
-      due_date: new Date(dueDate).toISOString(),
-      source: "manual",
-    };
-    if (description.trim()) body.description = description.trim();
-    if (warningDate) body.warning_date = new Date(warningDate).toISOString();
-    if (notes.trim()) body.notes = notes.trim();
-
-    createMutation.mutate(body);
-  }
-
-  return (
-    <div className="animate-fade-in">
-      <Breadcrumb
-        items={[
-          { label: "Dashboard", href: "/dashboard" },
-          { label: "Fristen", href: "/fristen" },
-          { label: "Neue Frist" },
-        ]}
-      />
-
-      <h1 className="text-lg font-semibold text-neutral-900">
-        Neue Frist anlegen
-      </h1>
-      <p className="mt-0.5 text-sm text-neutral-500">
-        Erstellen Sie eine neue Frist fuer eine Akte.
-      </p>
-
-      <form
-        onSubmit={handleSubmit}
-        className="mt-6 max-w-lg space-y-4 rounded-lg border border-neutral-200 bg-white p-5"
-      >
-        <div>
-          <label className={labelClass}>Akte *</label>
-          <select
-            value={caseId}
-            onChange={(e) => setCaseId(e.target.value)}
-            required
-            className={inputClass}
-          >
-            <option value="">Akte auswaehlen...</option>
-            {cases.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.case_number} — {c.title}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div>
-          <label className={labelClass}>Bezeichnung *</label>
-          <input
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            required
-            className={inputClass}
-            placeholder="z.B. Klageschrift einreichen"
-          />
-        </div>
-
-        <div>
-          <label className={labelClass}>Beschreibung</label>
-          <input
-            type="text"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            className={inputClass}
-            placeholder="Optionale Beschreibung"
-          />
-        </div>
-
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <label className={labelClass}>Faellig am *</label>
-            <input
-              type="date"
-              value={dueDate}
-              onChange={(e) => setDueDate(e.target.value)}
-              required
-              className={inputClass}
-            />
-          </div>
-          <div>
-            <label className={labelClass}>Warnung am</label>
-            <input
-              type="date"
-              value={warningDate}
-              onChange={(e) => setWarningDate(e.target.value)}
-              className={inputClass}
-            />
-          </div>
-        </div>
-
-        <div>
-          <label className={labelClass}>Notizen</label>
-          <textarea
-            value={notes}
-            onChange={(e) => setNotes(e.target.value)}
-            rows={3}
-            className={inputClass}
-            placeholder="Optionale Notizen zur Frist"
-          />
-        </div>
-
-        <div className="flex items-center justify-end gap-2 pt-2">
-          <button
-            type="button"
-            onClick={() => router.push("/fristen")}
-            className="rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
-          >
-            Abbrechen
-          </button>
-          <button
-            type="submit"
-            disabled={
-              createMutation.isPending || !caseId || !title.trim() || !dueDate
-            }
-            className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
-          >
-            {createMutation.isPending ? "Erstellen..." : "Frist anlegen"}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}

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

@@ -2,16 +2,20 @@
 
 import { DeadlineList } from "@/components/deadlines/DeadlineList";
 import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 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";
+import { useSearchParams } from "next/navigation";
 
 type ViewMode = "list" | "calendar";
 
 export default function FristenPage() {
+  const searchParams = useSearchParams();
+  const initialStatus = searchParams.get("status") ?? undefined;
   const [view, setView] = useState<ViewMode>("list");
 
   const { data: deadlines } = useQuery({
@@ -21,50 +25,58 @@ export default function FristenPage() {
 
   return (
     <div className="animate-fade-in space-y-4">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div>
-        <div>
+        <Breadcrumb
-          <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
+          items={[
-          <p className="mt-0.5 text-sm text-neutral-500">
+            { label: "Dashboard", href: "/dashboard" },
-            Alle Fristen im Überblick
+            { label: "Fristen" },
-          </p>
+          ]}
-        </div>
+        />
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <Link
+          <div>
-            href="/fristen/rechner"
+            <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
-            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"
+            <p className="mt-0.5 text-sm text-neutral-500">
-          >
+              Alle Fristen im Überblick
-            <Calculator className="h-3.5 w-3.5" />
+            </p>
-            Fristenrechner
+          </div>
-          </Link>
+          <div className="flex items-center gap-2">
-          <div className="flex rounded-md border border-neutral-200 bg-white">
+            <Link
-            <button
+              href="/fristen/rechner"
-              onClick={() => setView("list")}
+              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"
-              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" />
+              <Calculator className="h-3.5 w-3.5" />
-              Liste
+              Fristenrechner
-            </button>
+            </Link>
-            <button
+            <div className="flex rounded-md border border-neutral-200 bg-white">
-              onClick={() => setView("calendar")}
+              <button
-              className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
+                onClick={() => setView("list")}
-                view === "calendar"
+                className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
-                  ? "bg-neutral-100 font-medium text-neutral-900"
+                  view === "list"
-                  : "text-neutral-500 hover:text-neutral-700"
+                    ? "bg-neutral-100 font-medium text-neutral-900"
-              }`}
+                    : "text-neutral-500 hover:text-neutral-700"
-            >
+                }`}
-              <Calendar className="h-3.5 w-3.5" />
+              >
-              Kalender
+                <List className="h-3.5 w-3.5" />
-            </button>
+                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>
       </div>
 
       {view === "list" ? (
-        <DeadlineList />
+        <DeadlineList initialStatus={initialStatus} />
       ) : (
         <DeadlineCalendarView deadlines={Array.isArray(deadlines) ? deadlines : []} />
       )}

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

@@ -1,201 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
-import { api } from "@/lib/api";
-import type { Appointment } from "@/lib/types";
-import { Breadcrumb } from "@/components/layout/Breadcrumb";
-import { NotesList } from "@/components/notes/NotesList";
-import { Skeleton } from "@/components/ui/Skeleton";
-import { format, parseISO } from "date-fns";
-import { de } from "date-fns/locale";
-import {
-  AlertTriangle,
-  Calendar,
-  ExternalLink,
-  MapPin,
-} from "lucide-react";
-import Link from "next/link";
-
-interface AppointmentDetail extends Appointment {
-  case_number?: string;
-  case_title?: string;
-}
-
-const TYPE_LABELS: Record<string, string> = {
-  hearing: "Verhandlung",
-  meeting: "Besprechung",
-  consultation: "Beratung",
-  deadline_hearing: "Fristanhoerung",
-  other: "Sonstiges",
-};
-
-const TYPE_COLORS: Record<string, string> = {
-  hearing: "bg-blue-50 text-blue-700",
-  meeting: "bg-violet-50 text-violet-700",
-  consultation: "bg-emerald-50 text-emerald-700",
-  deadline_hearing: "bg-amber-50 text-amber-700",
-  other: "bg-neutral-100 text-neutral-600",
-};
-
-function DetailSkeleton() {
-  return (
-    <div>
-      <Skeleton className="h-4 w-48" />
-      <div className="mt-6 space-y-4">
-        <Skeleton className="h-8 w-64" />
-        <Skeleton className="h-4 w-40" />
-        <Skeleton className="h-32 rounded-lg" />
-        <Skeleton className="h-48 rounded-lg" />
-      </div>
-    </div>
-  );
-}
-
-export default function AppointmentDetailPage() {
-  const { id } = useParams<{ id: string }>();
-
-  const {
-    data: appointment,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["appointment", id],
-    queryFn: () => api.get<AppointmentDetail>(`/appointments/${id}`),
-  });
-
-  if (isLoading) return <DetailSkeleton />;
-
-  if (error || !appointment) {
-    return (
-      <div className="py-12 text-center">
-        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
-          <AlertTriangle className="h-6 w-6 text-red-500" />
-        </div>
-        <p className="text-sm font-medium text-neutral-900">
-          Termin nicht gefunden
-        </p>
-        <p className="mt-1 text-sm text-neutral-500">
-          Der Termin existiert nicht oder Sie haben keine Berechtigung.
-        </p>
-        <Link
-          href="/termine"
-          className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-        >
-          Zurueck zu Termine
-        </Link>
-      </div>
-    );
-  }
-
-  const startDate = parseISO(appointment.start_at);
-  const typeBadge = appointment.appointment_type
-    ? TYPE_COLORS[appointment.appointment_type] ?? TYPE_COLORS.other
-    : null;
-  const typeLabel = appointment.appointment_type
-    ? TYPE_LABELS[appointment.appointment_type] ?? appointment.appointment_type
-    : null;
-
-  return (
-    <div className="animate-fade-in">
-      <Breadcrumb
-        items={[
-          { label: "Dashboard", href: "/dashboard" },
-          { label: "Termine", href: "/termine" },
-          { label: appointment.title },
-        ]}
-      />
-
-      {/* Header */}
-      <div>
-        <div className="flex flex-wrap items-center gap-3">
-          <h1 className="text-lg font-semibold text-neutral-900">
-            {appointment.title}
-          </h1>
-          {typeBadge && typeLabel && (
-            <span
-              className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${typeBadge}`}
-            >
-              {typeLabel}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Date & Time */}
-      <div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-        <div className="flex items-center gap-2">
-          <Calendar className="h-4 w-4 text-neutral-400" />
-          <span className="text-sm font-medium text-neutral-900">
-            {format(startDate, "EEEE, d. MMMM yyyy", { locale: de })}
-          </span>
-        </div>
-        <p className="mt-1 pl-6 text-sm text-neutral-600">
-          {format(startDate, "HH:mm", { locale: de })} Uhr
-          {appointment.end_at && (
-            <>
-              {" "}
-              – {format(parseISO(appointment.end_at), "HH:mm", { locale: de })}{" "}
-              Uhr
-            </>
-          )}
-        </p>
-      </div>
-
-      {/* Location */}
-      {appointment.location && (
-        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-          <div className="flex items-center gap-2">
-            <MapPin className="h-4 w-4 text-neutral-400" />
-            <span className="text-sm text-neutral-900">
-              {appointment.location}
-            </span>
-          </div>
-        </div>
-      )}
-
-      {/* Case context */}
-      {appointment.case_id && (
-        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-                Akte
-              </p>
-              <p className="mt-0.5 text-sm text-neutral-900">
-                {appointment.case_number
-                  ? `Az. ${appointment.case_number}`
-                  : "Verknuepfte Akte"}
-                {appointment.case_title && ` — ${appointment.case_title}`}
-              </p>
-            </div>
-            <Link
-              href={`/cases/${appointment.case_id}`}
-              className="flex items-center gap-1 text-xs text-neutral-500 transition-colors hover:text-neutral-700"
-            >
-              Zur Akte
-              <ExternalLink className="h-3 w-3" />
-            </Link>
-          </div>
-        </div>
-      )}
-
-      {/* Description */}
-      {appointment.description && (
-        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
-          <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-            Beschreibung
-          </p>
-          <p className="mt-1 whitespace-pre-wrap text-sm text-neutral-700">
-            {appointment.description}
-          </p>
-        </div>
-      )}
-
-      {/* Notes */}
-      <div className="mt-6">
-        <NotesList parentType="appointment" parentId={id} />
-      </div>
-    </div>
-  );
-}

frontend/src/app/(app)/termine/neu/page.tsx

@@ -1,206 +0,0 @@
-"use client";
-
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { api } from "@/lib/api";
-import type { Case, Appointment } from "@/lib/types";
-import { Breadcrumb } from "@/components/layout/Breadcrumb";
-import { useState } from "react";
-import { toast } from "sonner";
-
-const APPOINTMENT_TYPES = [
-  { value: "hearing", label: "Verhandlung" },
-  { value: "meeting", label: "Besprechung" },
-  { value: "consultation", label: "Beratung" },
-  { value: "deadline_hearing", label: "Fristanhoerung" },
-  { value: "other", label: "Sonstiges" },
-];
-
-const inputClass =
-  "w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
-const labelClass = "mb-1 block text-xs font-medium text-neutral-600";
-
-export default function NewAppointmentPage() {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-
-  const [caseId, setCaseId] = useState("");
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [startAt, setStartAt] = useState("");
-  const [endAt, setEndAt] = useState("");
-  const [location, setLocation] = useState("");
-  const [appointmentType, setAppointmentType] = useState("");
-
-  const { data: casesData } = useQuery({
-    queryKey: ["cases"],
-    queryFn: () => api.get<{ cases: Case[]; total: number } | Case[]>("/cases"),
-  });
-
-  const cases = Array.isArray(casesData)
-    ? casesData
-    : Array.isArray(casesData?.cases)
-      ? casesData.cases
-      : [];
-
-  const createMutation = useMutation({
-    mutationFn: (body: Record<string, unknown>) =>
-      api.post<Appointment>("/appointments", body),
-    onSuccess: (data) => {
-      queryClient.invalidateQueries({ queryKey: ["appointments"] });
-      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
-      toast.success("Termin erstellt");
-      router.push(`/termine/${data.id}`);
-    },
-    onError: () => toast.error("Fehler beim Erstellen des Termins"),
-  });
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!title.trim() || !startAt) return;
-
-    const body: Record<string, unknown> = {
-      title: title.trim(),
-      start_at: new Date(startAt).toISOString(),
-    };
-    if (description.trim()) body.description = description.trim();
-    if (endAt) body.end_at = new Date(endAt).toISOString();
-    if (location.trim()) body.location = location.trim();
-    if (appointmentType) body.appointment_type = appointmentType;
-    if (caseId) body.case_id = caseId;
-
-    createMutation.mutate(body);
-  }
-
-  return (
-    <div className="animate-fade-in">
-      <Breadcrumb
-        items={[
-          { label: "Dashboard", href: "/dashboard" },
-          { label: "Termine", href: "/termine" },
-          { label: "Neuer Termin" },
-        ]}
-      />
-
-      <h1 className="text-lg font-semibold text-neutral-900">
-        Neuer Termin
-      </h1>
-      <p className="mt-0.5 text-sm text-neutral-500">
-        Erstellen Sie einen neuen Termin.
-      </p>
-
-      <form
-        onSubmit={handleSubmit}
-        className="mt-6 max-w-lg space-y-4 rounded-lg border border-neutral-200 bg-white p-5"
-      >
-        <div>
-          <label className={labelClass}>Titel *</label>
-          <input
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            required
-            className={inputClass}
-            placeholder="z.B. Muendliche Verhandlung"
-          />
-        </div>
-
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <label className={labelClass}>Beginn *</label>
-            <input
-              type="datetime-local"
-              value={startAt}
-              onChange={(e) => setStartAt(e.target.value)}
-              required
-              className={inputClass}
-            />
-          </div>
-          <div>
-            <label className={labelClass}>Ende</label>
-            <input
-              type="datetime-local"
-              value={endAt}
-              onChange={(e) => setEndAt(e.target.value)}
-              className={inputClass}
-            />
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <label className={labelClass}>Typ</label>
-            <select
-              value={appointmentType}
-              onChange={(e) => setAppointmentType(e.target.value)}
-              className={inputClass}
-            >
-              <option value="">Kein Typ</option>
-              {APPOINTMENT_TYPES.map((t) => (
-                <option key={t.value} value={t.value}>
-                  {t.label}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <label className={labelClass}>Akte (optional)</label>
-            <select
-              value={caseId}
-              onChange={(e) => setCaseId(e.target.value)}
-              className={inputClass}
-            >
-              <option value="">Keine Akte</option>
-              {cases.map((c) => (
-                <option key={c.id} value={c.id}>
-                  {c.case_number} — {c.title}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div>
-          <label className={labelClass}>Ort</label>
-          <input
-            type="text"
-            value={location}
-            onChange={(e) => setLocation(e.target.value)}
-            className={inputClass}
-            placeholder="z.B. UPC Muenchen, Saal 3"
-          />
-        </div>
-
-        <div>
-          <label className={labelClass}>Beschreibung</label>
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            rows={3}
-            className={inputClass}
-            placeholder="Optionale Beschreibung zum Termin"
-          />
-        </div>
-
-        <div className="flex items-center justify-end gap-2 pt-2">
-          <button
-            type="button"
-            onClick={() => router.push("/termine")}
-            className="rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
-          >
-            Abbrechen
-          </button>
-          <button
-            type="submit"
-            disabled={
-              createMutation.isPending || !title.trim() || !startAt
-            }
-            className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
-          >
-            {createMutation.isPending ? "Erstellen..." : "Termin anlegen"}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}

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

@@ -6,6 +6,7 @@ import { AppointmentModal } from "@/components/appointments/AppointmentModal";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "@/lib/api";
 import type { Appointment } from "@/lib/types";
+import { Breadcrumb } from "@/components/layout/Breadcrumb";
 import { Calendar, List, Plus } from "lucide-react";
 import { useState } from "react";
 
@@ -38,6 +39,12 @@ export default function TerminePage() {
 
   return (
     <div className="space-y-4">
+      <Breadcrumb
+        items={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: "Termine" },
+        ]}
+      />
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-lg font-semibold text-neutral-900">Termine</h1>

frontend/src/components/dashboard/AISummaryCard.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { Sparkles } from "lucide-react";
+import { useState } from "react";
+import { Sparkles, RefreshCw } from "lucide-react";
 import type { DashboardData } from "@/lib/types";
 
 interface Props {
   data: DashboardData;
+  onRefresh?: () => void;
 }
 
 function generateSummary(data: DashboardData): string {
@@ -51,18 +53,39 @@ function generateSummary(data: DashboardData): string {
   return parts.join(" ");
 }
 
-export function AISummaryCard({ data }: Props) {
+export function AISummaryCard({ data, onRefresh }: Props) {
+  const [spinning, setSpinning] = useState(false);
   const summary = generateSummary(data);
 
+  function handleRefresh() {
+    if (!onRefresh) return;
+    setSpinning(true);
+    onRefresh();
+    setTimeout(() => setSpinning(false), 1000);
+  }
+
   return (
     <div className="rounded-xl border border-neutral-200 bg-white p-5">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between">
-        <div className="rounded-md bg-violet-50 p-1.5">
+        <div className="flex items-center gap-2">
-          <Sparkles className="h-4 w-4 text-violet-500" />
+          <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>
-        <h2 className="text-sm font-semibold text-neutral-900">
+        {onRefresh && (
-          KI-Zusammenfassung
+          <button
-        </h2>
+            onClick={handleRefresh}
+            title="Aktualisieren"
+            className="rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${spinning ? "animate-spin" : ""}`}
+            />
+          </button>
+        )}
       </div>
       <p className="mt-3 text-sm leading-relaxed text-neutral-700">
         {summary}

frontend/src/components/dashboard/CaseOverviewGrid.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { FolderOpen, FolderPlus, Archive } from "lucide-react";
+import Link from "next/link";
+import { FolderOpen, FolderPlus, Archive, ChevronRight } from "lucide-react";
 import type { CaseSummary } from "@/lib/types";
 
 interface Props {
@@ -16,6 +17,7 @@ export function CaseOverviewGrid({ data }: Props) {
       icon: FolderOpen,
       color: "text-blue-600",
       bg: "bg-blue-50",
+      href: "/cases?status=active",
     },
     {
       label: "Neu (Monat)",
@@ -23,6 +25,7 @@ export function CaseOverviewGrid({ data }: Props) {
       icon: FolderPlus,
       color: "text-violet-600",
       bg: "bg-violet-50",
+      href: "/cases?status=active&since=month",
     },
     {
       label: "Abgeschlossen",
@@ -30,25 +33,33 @@ export function CaseOverviewGrid({ data }: Props) {
       icon: Archive,
       color: "text-neutral-500",
       bg: "bg-neutral-50",
+      href: "/cases?status=closed",
     },
   ];
 
   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">
+      <div className="mt-4 space-y-1">
         {items.map((item) => (
-          <div key={item.label} className="flex items-center justify-between">
+          <Link
+            key={item.label}
+            href={item.href}
+            className="group -mx-2 flex items-center justify-between rounded-lg px-2 py-2 transition-colors hover:bg-neutral-50"
+          >
             <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">
+            <div className="flex items-center gap-1.5">
-              {item.value}
+              <span className="text-lg font-semibold tabular-nums text-neutral-900">
-            </span>
+                {item.value}
-          </div>
+              </span>
+              <ChevronRight className="h-4 w-4 text-neutral-300 transition-colors group-hover:text-neutral-500" />
+            </div>
+          </Link>
         ))}
       </div>
     </div>

frontend/src/components/dashboard/DeadlineTrafficLights.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import Link from "next/link";
 import { AlertTriangle, Clock, CheckCircle } from "lucide-react";
 import type { DeadlineSummary } from "@/lib/types";
 
@@ -27,10 +28,9 @@ function AnimatedCount({ value }: { value: number }) {
 
 interface Props {
   data: DeadlineSummary;
-  onFilter?: (filter: "overdue" | "this_week" | "ok") => void;
 }
 
-export function DeadlineTrafficLights({ data, onFilter }: Props) {
+export function DeadlineTrafficLights({ data }: Props) {
   const safe = data ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 };
   const cards = [
     {
@@ -38,6 +38,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
       label: "Überfällig",
       count: safe.overdue_count ?? 0,
       icon: AlertTriangle,
+      href: "/fristen?status=overdue",
       bg: "bg-red-50",
       border: "border-red-200",
       iconColor: "text-red-500",
@@ -51,6 +52,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
       label: "Diese Woche",
       count: safe.due_this_week ?? 0,
       icon: Clock,
+      href: "/fristen?status=this_week",
       bg: "bg-amber-50",
       border: "border-amber-200",
       iconColor: "text-amber-500",
@@ -64,6 +66,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
       label: "Im Zeitplan",
       count: (safe.ok_count ?? 0) + (safe.due_next_week ?? 0),
       icon: CheckCircle,
+      href: "/fristen?status=ok",
       bg: "bg-emerald-50",
       border: "border-emerald-200",
       iconColor: "text-emerald-500",
@@ -77,9 +80,9 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
       {cards.map((card) => (
-        <button
+        <Link
           key={card.key}
-          onClick={() => onFilter?.(card.key)}
+          href={card.href}
           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 && (
@@ -99,7 +102,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
           <div className={`mt-4 text-4xl font-bold tracking-tight ${card.countColor}`}>
             <AnimatedCount value={card.count} />
           </div>
-        </button>
+        </Link>
       ))}
     </div>
   );

frontend/src/components/dashboard/QuickActions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
+import { FolderPlus, Clock, Sparkles, CalendarPlus } from "lucide-react";
 
 const actions = [
   {
@@ -12,22 +12,22 @@ const actions = [
   },
   {
     label: "Frist eintragen",
-    href: "/fristen",
+    href: "/fristen/neu",
     icon: Clock,
     color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
   },
+  {
+    label: "Neuer Termin",
+    href: "/termine/neu",
+    icon: CalendarPlus,
+    color: "text-emerald-600 bg-emerald-50 hover:bg-emerald-100",
+  },
   {
     label: "AI Analyse",
     href: "/ai/extract",
     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() {

frontend/src/components/dashboard/RecentActivityList.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import Link from "next/link";
+import { formatDistanceToNow, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  FileText,
+  Scale,
+  Calendar,
+  Clock,
+  MessageSquare,
+  ChevronRight,
+} from "lucide-react";
+import type { RecentActivity } from "@/lib/types";
+
+const EVENT_ICONS: Record<string, typeof FileText> = {
+  status_changed: Scale,
+  deadline_created: Clock,
+  appointment_created: Calendar,
+  document_uploaded: FileText,
+  note_added: MessageSquare,
+};
+
+interface Props {
+  activities: RecentActivity[];
+}
+
+export function RecentActivityList({ activities }: Props) {
+  const safe = Array.isArray(activities) ? activities : [];
+
+  if (safe.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-xl border border-neutral-200 bg-white p-5">
+      <h2 className="text-sm font-semibold text-neutral-900">
+        Letzte Aktivität
+      </h2>
+      <div className="mt-3 divide-y divide-neutral-100">
+        {safe.map((activity) => {
+          const Icon = EVENT_ICONS[activity.event_type ?? ""] ?? FileText;
+          const timeAgo = activity.created_at
+            ? formatDistanceToNow(parseISO(activity.created_at), {
+                addSuffix: true,
+                locale: de,
+              })
+            : "";
+
+          return (
+            <Link
+              key={activity.id}
+              href={`/cases/${activity.case_id}`}
+              className="group flex items-center gap-3 py-2.5 transition-colors first:pt-0 last:pb-0 hover:bg-neutral-50 -mx-5 px-5"
+            >
+              <div className="rounded-md bg-neutral-100 p-1.5">
+                <Icon className="h-3.5 w-3.5 text-neutral-500" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm text-neutral-900">
+                  {activity.title}
+                </p>
+                <div className="flex items-center gap-2 text-xs text-neutral-500">
+                  <span>{activity.case_number}</span>
+                  {timeAgo && (
+                    <>
+                      <span className="text-neutral-300">·</span>
+                      <span>{timeAgo}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              <ChevronRight className="h-4 w-4 shrink-0 text-neutral-300 transition-colors group-hover:text-neutral-500" />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/UpcomingTimeline.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import Link from "next/link";
 import { format, parseISO, isToday, isTomorrow } from "date-fns";
 import { de } from "date-fns/locale";
-import { Clock, Calendar, MapPin } from "lucide-react";
+import { Clock, Calendar, MapPin, ChevronRight } from "lucide-react";
 import type { UpcomingDeadline, UpcomingAppointment } from "@/lib/types";
 
 interface Props {
@@ -80,8 +81,12 @@ export function UpcomingTimeline({ deadlines, appointments }: Props) {
 function TimelineEntry({ item }: { item: TimelineItem }) {
   if (item.type === "deadline") {
     const d = item.data;
+    const href = `/fristen/${d.id}`;
     return (
-      <div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
+      <Link
+        href={href}
+        className="group flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5 transition-colors hover:border-neutral-200 hover:bg-neutral-100/50"
+      >
         <div className="mt-0.5 rounded-md bg-amber-50 p-1">
           <Clock className="h-3.5 w-3.5 text-amber-500" />
         </div>
@@ -90,19 +95,40 @@ function TimelineEntry({ item }: { item: TimelineItem }) {
             {d.title}
           </p>
           <p className="mt-0.5 truncate text-xs text-neutral-500">
-            {d.case_number} · {d.case_title}
+            {d.case_id ? (
+              <span
+                onClick={(e) => e.stopPropagation()}
+                className="inline"
+              >
+                <Link
+                  href={`/cases/${d.case_id}`}
+                  className="underline decoration-neutral-300 hover:text-neutral-900 hover:decoration-neutral-500"
+                >
+                  {d.case_number}
+                </Link>
+                {" · "}
+              </span>
+            ) : (
+              <>{d.case_number} · </>
+            )}
+            {d.case_title}
           </p>
         </div>
-        <span className="shrink-0 text-xs font-medium text-amber-600">
+        <div className="flex shrink-0 items-center gap-1.5">
-          Frist
+          <span className="text-xs font-medium text-amber-600">Frist</span>
-        </span>
+          <ChevronRight className="h-3.5 w-3.5 text-neutral-300 transition-colors group-hover:text-neutral-500" />
-      </div>
+        </div>
+      </Link>
     );
   }
 
   const a = item.data;
+  const href = `/termine/${a.id}`;
   return (
-    <div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
+    <Link
+      href={href}
+      className="group flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5 transition-colors hover:border-neutral-200 hover:bg-neutral-100/50"
+    >
       <div className="mt-0.5 rounded-md bg-blue-50 p-1">
         <Calendar className="h-3.5 w-3.5 text-blue-500" />
       </div>
@@ -121,7 +147,20 @@ function TimelineEntry({ item }: { item: TimelineItem }) {
               </span>
             </>
           )}
-          {a.case_number && (
+          {a.case_number && a.case_id && (
+            <>
+              <span className="text-neutral-300">·</span>
+              <span onClick={(e) => e.stopPropagation()}>
+                <Link
+                  href={`/cases/${a.case_id}`}
+                  className="underline decoration-neutral-300 hover:text-neutral-900 hover:decoration-neutral-500"
+                >
+                  {a.case_number}
+                </Link>
+              </span>
+            </>
+          )}
+          {a.case_number && !a.case_id && (
             <>
               <span className="text-neutral-300">·</span>
               <span>{a.case_number}</span>
@@ -129,9 +168,10 @@ function TimelineEntry({ item }: { item: TimelineItem }) {
           )}
         </div>
       </div>
-      <span className="shrink-0 text-xs font-medium text-blue-600">
+      <div className="flex shrink-0 items-center gap-1.5">
-        Termin
+        <span className="text-xs font-medium text-blue-600">Termin</span>
-      </span>
+        <ChevronRight className="h-3.5 w-3.5 text-neutral-300 transition-colors group-hover:text-neutral-500" />
-    </div>
+      </div>
+    </Link>
   );
 }

frontend/src/components/deadlines/DeadlineList.tsx

@@ -10,7 +10,14 @@ import { toast } from "sonner";
 import { useState, useMemo } from "react";
 import { EmptyState } from "@/components/ui/EmptyState";
 
-type StatusFilter = "all" | "pending" | "completed" | "overdue";
+type StatusFilter = "all" | "pending" | "completed" | "overdue" | "this_week" | "ok";
+
+function mapUrlStatus(status?: string): StatusFilter {
+  if (status === "overdue") return "overdue";
+  if (status === "this_week") return "this_week";
+  if (status === "ok") return "ok";
+  return "all";
+}
 
 function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
   if (deadline.status === "completed") return "green";
@@ -47,9 +54,15 @@ const urgencyConfig = {
 const selectClass =
   "rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700 transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400 outline-none";
 
-export function DeadlineList() {
+interface Props {
+  initialStatus?: string;
+}
+
+export function DeadlineList({ initialStatus }: Props) {
   const queryClient = useQueryClient();
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>(
+    mapUrlStatus(initialStatus),
+  );
   const [caseFilter, setCaseFilter] = useState<string>("all");
 
   const { data: deadlines, isLoading } = useQuery({
@@ -90,6 +103,18 @@ export function DeadlineList() {
         if (d.status === "completed") return false;
         if (!isPast(parseISO(d.due_date))) return false;
       }
+      if (statusFilter === "this_week") {
+        if (d.status === "completed") return false;
+        const due = parseISO(d.due_date);
+        if (isPast(due)) return false;
+        if (!isThisWeek(due, { weekStartsOn: 1 })) return false;
+      }
+      if (statusFilter === "ok") {
+        if (d.status === "completed") return false;
+        const due = parseISO(d.due_date);
+        if (isPast(due)) return false;
+        if (isThisWeek(due, { weekStartsOn: 1 })) return false;
+      }
       if (caseFilter !== "all" && d.case_id !== caseFilter) return false;
       return true;
     });
@@ -144,10 +169,10 @@ export function DeadlineList() {
         </button>
         <button
           onClick={() =>
-            setStatusFilter(statusFilter === "pending" ? "all" : "pending")
+            setStatusFilter(statusFilter === "this_week" ? "all" : "this_week")
           }
           className={`rounded-lg border p-3 text-left transition-all ${
-            statusFilter === "pending"
+            statusFilter === "this_week"
               ? "border-amber-300 bg-amber-50 ring-1 ring-amber-200"
               : "border-neutral-200 bg-white hover:bg-neutral-50"
           }`}
@@ -158,9 +183,11 @@ export function DeadlineList() {
           <div className="text-xs text-neutral-500">Diese Woche</div>
         </button>
         <button
-          onClick={() => setStatusFilter("all")}
+          onClick={() =>
+            setStatusFilter(statusFilter === "ok" ? "all" : "ok")
+          }
           className={`rounded-lg border p-3 text-left transition-all ${
-            statusFilter === "all"
+            statusFilter === "ok"
               ? "border-green-300 bg-green-50 ring-1 ring-green-200"
               : "border-neutral-200 bg-white hover:bg-neutral-50"
           }`}
@@ -187,6 +214,8 @@ export function DeadlineList() {
           <option value="pending">Offen</option>
           <option value="completed">Erledigt</option>
           <option value="overdue">Überfällig</option>
+          <option value="this_week">Diese Woche</option>
+          <option value="ok">Im Zeitplan</option>
         </select>
         {Array.isArray(cases) && cases.length > 0 && (
           <select

frontend/src/components/layout/Breadcrumb.tsx

@@ -6,24 +6,33 @@ export interface BreadcrumbItem {
   href?: string;
 }
 
-export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
+interface Props {
+  items: BreadcrumbItem[];
+}
+
+export function Breadcrumb({ items }: Props) {
   return (
-    <nav className="mb-4 flex items-center gap-1 text-sm text-neutral-500">
+    <nav aria-label="Breadcrumb" className="mb-4 flex items-center gap-1 text-sm text-neutral-500">
-      {items.map((item, i) => (
+      {items.map((item, i) => {
-        <span key={i} className="flex items-center gap-1">
+        const isLast = i === items.length - 1;
-          {i > 0 && <ChevronRight className="h-3.5 w-3.5 text-neutral-300" />}
+        return (
-          {item.href ? (
+          <span key={i} className="flex items-center gap-1">
-            <Link
+            {i > 0 && <ChevronRight className="h-3.5 w-3.5 text-neutral-300" />}
-              href={item.href}
+            {isLast || !item.href ? (
-              className="transition-colors hover:text-neutral-700"
+              <span className={isLast ? "font-medium text-neutral-900" : ""}>
-            >
+                {item.label}
-              {item.label}
+              </span>
-            </Link>
+            ) : (
-          ) : (
+              <Link
-            <span className="font-medium text-neutral-900">{item.label}</span>
+                href={item.href}
-          )}
+                className="transition-colors hover:text-neutral-900"
-        </span>
+              >
-      ))}
+                {item.label}
+              </Link>
+            )}
+          </span>
+        );
+      })}
     </nav>
   );
 }

frontend/src/components/notes/NotesList.tsx

@@ -1,209 +0,0 @@
-"use client";
-
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { Note } from "@/lib/types";
-import { format, parseISO } from "date-fns";
-import { de } from "date-fns/locale";
-import { Plus, Pencil, Trash2, X, Check, MessageSquare } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-
-interface NotesListProps {
-  parentType: "case" | "deadline" | "appointment" | "case_event";
-  parentId: string;
-}
-
-export function NotesList({ parentType, parentId }: NotesListProps) {
-  const queryClient = useQueryClient();
-  const queryKey = ["notes", parentType, parentId];
-
-  const [newContent, setNewContent] = useState("");
-  const [showNew, setShowNew] = useState(false);
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editContent, setEditContent] = useState("");
-
-  const { data: notes, isLoading } = useQuery({
-    queryKey,
-    queryFn: () =>
-      api.get<Note[]>(`/notes?${parentType}_id=${parentId}`),
-  });
-
-  const createMutation = useMutation({
-    mutationFn: (content: string) => {
-      const body: Record<string, string> = {
-        content,
-        [`${parentType}_id`]: parentId,
-      };
-      return api.post<Note>("/notes", body);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-      setNewContent("");
-      setShowNew(false);
-      toast.success("Notiz erstellt");
-    },
-    onError: () => toast.error("Fehler beim Erstellen der Notiz"),
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, content }: { id: string; content: string }) =>
-      api.put<Note>(`/notes/${id}`, { content }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-      setEditingId(null);
-      toast.success("Notiz aktualisiert");
-    },
-    onError: () => toast.error("Fehler beim Aktualisieren der Notiz"),
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => api.delete(`/notes/${id}`),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-      toast.success("Notiz geloescht");
-    },
-    onError: () => toast.error("Fehler beim Loeschen der Notiz"),
-  });
-
-  function handleCreate() {
-    if (!newContent.trim()) return;
-    createMutation.mutate(newContent.trim());
-  }
-
-  function handleUpdate(id: string) {
-    if (!editContent.trim()) return;
-    updateMutation.mutate({ id, content: editContent.trim() });
-  }
-
-  function startEdit(note: Note) {
-    setEditingId(note.id);
-    setEditContent(note.content);
-  }
-
-  const notesList = Array.isArray(notes) ? notes : [];
-
-  return (
-    <div className="rounded-lg border border-neutral-200 bg-white">
-      <div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
-        <h3 className="text-sm font-medium text-neutral-900">Notizen</h3>
-        {!showNew && (
-          <button
-            onClick={() => setShowNew(true)}
-            className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-700"
-          >
-            <Plus className="h-3.5 w-3.5" />
-            Neu
-          </button>
-        )}
-      </div>
-
-      {showNew && (
-        <div className="border-b border-neutral-100 p-4">
-          <textarea
-            value={newContent}
-            onChange={(e) => setNewContent(e.target.value)}
-            rows={3}
-            autoFocus
-            placeholder="Notiz schreiben..."
-            className="w-full rounded-md border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-          />
-          <div className="mt-2 flex justify-end gap-2">
-            <button
-              onClick={() => {
-                setShowNew(false);
-                setNewContent("");
-              }}
-              className="rounded-md px-2.5 py-1 text-xs text-neutral-500 hover:bg-neutral-50"
-            >
-              Abbrechen
-            </button>
-            <button
-              onClick={handleCreate}
-              disabled={!newContent.trim() || createMutation.isPending}
-              className="rounded-md bg-neutral-900 px-2.5 py-1 text-xs font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
-            >
-              {createMutation.isPending ? "Speichern..." : "Speichern"}
-            </button>
-          </div>
-        </div>
-      )}
-
-      {isLoading ? (
-        <div className="space-y-2 p-4">
-          {[1, 2].map((i) => (
-            <div key={i} className="h-12 animate-pulse rounded-md bg-neutral-100" />
-          ))}
-        </div>
-      ) : notesList.length === 0 ? (
-        <div className="flex flex-col items-center py-8 text-center">
-          <MessageSquare className="h-5 w-5 text-neutral-300" />
-          <p className="mt-2 text-sm text-neutral-400">
-            Keine Notizen vorhanden.
-          </p>
-        </div>
-      ) : (
-        <div className="divide-y divide-neutral-100">
-          {notesList.map((note) => (
-            <div key={note.id} className="group px-4 py-3">
-              {editingId === note.id ? (
-                <div>
-                  <textarea
-                    value={editContent}
-                    onChange={(e) => setEditContent(e.target.value)}
-                    rows={3}
-                    autoFocus
-                    className="w-full rounded-md border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-                  />
-                  <div className="mt-2 flex justify-end gap-2">
-                    <button
-                      onClick={() => setEditingId(null)}
-                      className="rounded-md p-1 text-neutral-400 hover:bg-neutral-50 hover:text-neutral-600"
-                    >
-                      <X className="h-3.5 w-3.5" />
-                    </button>
-                    <button
-                      onClick={() => handleUpdate(note.id)}
-                      disabled={!editContent.trim() || updateMutation.isPending}
-                      className="rounded-md p-1 text-neutral-400 hover:bg-neutral-50 hover:text-green-600"
-                    >
-                      <Check className="h-3.5 w-3.5" />
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div>
-                  <div className="flex items-start justify-between">
-                    <p className="whitespace-pre-wrap text-sm text-neutral-700">
-                      {note.content}
-                    </p>
-                    <div className="ml-4 flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-                      <button
-                        onClick={() => startEdit(note)}
-                        className="rounded p-1 text-neutral-400 hover:bg-neutral-50 hover:text-neutral-600"
-                      >
-                        <Pencil className="h-3 w-3" />
-                      </button>
-                      <button
-                        onClick={() => deleteMutation.mutate(note.id)}
-                        className="rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-500"
-                      >
-                        <Trash2 className="h-3 w-3" />
-                      </button>
-                    </div>
-                  </div>
-                  <p className="mt-1 text-xs text-neutral-400">
-                    {format(parseISO(note.created_at), "d. MMM yyyy, HH:mm", {
-                      locale: de,
-                    })}
-                    {note.updated_at !== note.created_at && " (bearbeitet)"}
-                  </p>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/lib/types.ts

@@ -223,28 +223,6 @@ export interface UpcomingAppointment {
   case_title?: string;
 }
 
-export interface DashboardData {
-  deadline_summary: DeadlineSummary;
-  case_summary: CaseSummary;
-  upcoming_deadlines: UpcomingDeadline[];
-  upcoming_appointments: UpcomingAppointment[];
-}
-
-// Notes
-export interface Note {
-  id: string;
-  tenant_id: string;
-  case_id?: string;
-  deadline_id?: string;
-  appointment_id?: string;
-  case_event_id?: string;
-  content: string;
-  created_by?: string;
-  created_at: string;
-  updated_at: string;
-}
-
-// Recent Activity
 export interface RecentActivity {
   id: string;
   event_type?: string;
@@ -255,6 +233,14 @@ export interface RecentActivity {
   created_at: string;
 }
 
+export interface DashboardData {
+  deadline_summary: DeadlineSummary;
+  case_summary: CaseSummary;
+  upcoming_deadlines: UpcomingDeadline[];
+  upcoming_appointments: UpcomingAppointment[];
+  recent_activity?: RecentActivity[];
+}
+
 // AI Extraction types
 
 export interface ExtractedDeadline {