feat: add frontend dashboard with traffic lights, timeline, and AI summary (Phase 2L)

Dashboard page at /dashboard with 5 components:
- DeadlineTrafficLights: RED/AMBER/GREEN cards with animated counts and pulse for overdue
- CaseOverviewGrid: active/new/closed case counts
- UpcomingTimeline: merged deadlines + appointments for next 7 days, grouped by day
- AISummaryCard: natural language summary generated from dashboard data
- QuickActions: shortcuts to create cases, deadlines, AI analysis, CalDAV sync

3-column responsive grid layout. Root / redirects to /dashboard.
Fetches from GET /api/dashboard with 60s auto-refresh via react-query.
This commit is contained in:
m
2026-03-25 13:49:24 +01:00
parent 0fac764211
commit 45188ff5cb
10 changed files with 552 additions and 14 deletions

View File

@@ -0,0 +1,55 @@
"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>
);
}