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:
55
frontend/src/components/dashboard/CaseOverviewGrid.tsx
Normal file
55
frontend/src/components/dashboard/CaseOverviewGrid.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user