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
2026-03-25 19:29:13 +01:00
parent 9ad58e1ba3
commit 84b178edbf
13 changed files with 357 additions and 87 deletions
--- a/frontend/src/app/(app)/cases/page.tsx
+++ b/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>
--- a/frontend/src/app/(app)/dashboard/page.tsx
+++ b/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>
  );
 }
--- a/frontend/src/app/(app)/fristen/page.tsx
+++ b/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>
-          <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
-          <p className="mt-0.5 text-sm text-neutral-500">
-            Alle Fristen im Überblick
-          </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"
-              }`}
+      <div>
+        <Breadcrumb
+          items={[
+            { label: "Dashboard", href: "/dashboard" },
+            { label: "Fristen" },
+          ]}
+        />
+        <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">Fristen</h1>
+            <p className="mt-0.5 text-sm text-neutral-500">
+              Alle Fristen im Überblick
+            </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"
            >
-              <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>
+              <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>
      </div>

      {view === "list" ? (
-        <DeadlineList />
+        <DeadlineList initialStatus={initialStatus} />
      ) : (
        <DeadlineCalendarView deadlines={Array.isArray(deadlines) ? deadlines : []} />
      )}
--- a/frontend/src/app/(app)/termine/page.tsx
+++ b/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>