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
This commit is contained in:
m
2026-03-25 19:29:13 +01:00
parent 9ad58e1ba3
commit 84b178edbf
13 changed files with 357 additions and 87 deletions

View File

@@ -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">
{item.value}
</span>
</div>
<div className="flex items-center gap-1.5">
<span className="text-lg font-semibold tabular-nums text-neutral-900">
{item.value}
</span>
<ChevronRight className="h-4 w-4 text-neutral-300 transition-colors group-hover:text-neutral-500" />
</div>
</Link>
))}
</div>
</div>