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:
53
frontend/src/components/dashboard/QuickActions.tsx
Normal file
53
frontend/src/components/dashboard/QuickActions.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
|
||||
|
||||
const actions = [
|
||||
{
|
||||
label: "Neue Akte",
|
||||
href: "/akten?new=1",
|
||||
icon: FolderPlus,
|
||||
color: "text-blue-600 bg-blue-50 hover:bg-blue-100",
|
||||
},
|
||||
{
|
||||
label: "Frist eintragen",
|
||||
href: "/fristen?new=1",
|
||||
icon: Clock,
|
||||
color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
|
||||
},
|
||||
{
|
||||
label: "AI Analyse",
|
||||
href: "/ai",
|
||||
icon: Sparkles,
|
||||
color: "text-violet-600 bg-violet-50 hover:bg-violet-100",
|
||||
},
|
||||
{
|
||||
label: "CalDAV Sync",
|
||||
href: "/einstellungen",
|
||||
icon: CalendarSync,
|
||||
color: "text-emerald-600 bg-emerald-50 hover:bg-emerald-100",
|
||||
},
|
||||
];
|
||||
|
||||
export function QuickActions() {
|
||||
return (
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<h2 className="text-sm font-semibold text-neutral-900">
|
||||
Schnellzugriff
|
||||
</h2>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
{actions.map((action) => (
|
||||
<Link
|
||||
key={action.label}
|
||||
href={action.href}
|
||||
className={`flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${action.color}`}
|
||||
>
|
||||
<action.icon className="h-4 w-4" />
|
||||
{action.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user