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:
70
frontend/src/components/dashboard/AISummaryCard.tsx
Normal file
70
frontend/src/components/dashboard/AISummaryCard.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { Sparkles } from "lucide-react";
|
||||
import type { DashboardData } from "@/lib/types";
|
||||
|
||||
interface Props {
|
||||
data: DashboardData;
|
||||
}
|
||||
|
||||
function generateSummary(data: DashboardData): string {
|
||||
const parts: string[] = [];
|
||||
const { deadline_summary: ds, case_summary: cs, upcoming_deadlines: ud } = data;
|
||||
|
||||
// Deadline urgency
|
||||
if (ds.overdue_count > 0) {
|
||||
parts.push(
|
||||
`${ds.overdue_count} Frist${ds.overdue_count > 1 ? "en" : ""} ${ds.overdue_count > 1 ? "sind" : "ist"} überfällig und ${ds.overdue_count > 1 ? "erfordern" : "erfordert"} sofortige Aufmerksamkeit.`,
|
||||
);
|
||||
}
|
||||
|
||||
if (ds.due_this_week > 0) {
|
||||
parts.push(
|
||||
`${ds.due_this_week} Frist${ds.due_this_week > 1 ? "en laufen" : " läuft"} diese Woche ab.`,
|
||||
);
|
||||
}
|
||||
|
||||
// Highlight most critical upcoming deadline
|
||||
if (ud.length > 0) {
|
||||
const next = ud[0];
|
||||
parts.push(
|
||||
`Die nächste Frist ist "${next.title}" in Akte ${next.case_number}.`,
|
||||
);
|
||||
}
|
||||
|
||||
// Case activity
|
||||
if (cs.new_this_month > 0) {
|
||||
parts.push(
|
||||
`${cs.new_this_month} neue Akte${cs.new_this_month > 1 ? "n" : ""} diesen Monat bei ${cs.active_count} aktiven Verfahren.`,
|
||||
);
|
||||
} else {
|
||||
parts.push(`${cs.active_count} aktive Verfahren.`);
|
||||
}
|
||||
|
||||
// All good
|
||||
if (ds.overdue_count === 0 && ds.due_this_week === 0) {
|
||||
parts.unshift("Alle Fristen sind im Zeitplan.");
|
||||
}
|
||||
|
||||
return parts.join(" ");
|
||||
}
|
||||
|
||||
export function AISummaryCard({ data }: Props) {
|
||||
const summary = generateSummary(data);
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
<p className="mt-3 text-sm leading-relaxed text-neutral-700">
|
||||
{summary}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user