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
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>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
105
frontend/src/components/dashboard/DeadlineTrafficLights.tsx
Normal file
105
frontend/src/components/dashboard/DeadlineTrafficLights.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { AlertTriangle, Clock, CheckCircle } from "lucide-react";
|
||||
import type { DeadlineSummary } from "@/lib/types";
|
||||
|
||||
function AnimatedCount({ value }: { value: number }) {
|
||||
const ref = useRef<HTMLSpanElement>(null);
|
||||
const prevValue = useRef(value);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el || prevValue.current === value) return;
|
||||
|
||||
el.classList.remove("animate-count-up");
|
||||
void el.offsetWidth;
|
||||
el.classList.add("animate-count-up");
|
||||
prevValue.current = value;
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<span ref={ref} className="inline-block tabular-nums">
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
data: DeadlineSummary;
|
||||
onFilter?: (filter: "overdue" | "this_week" | "ok") => void;
|
||||
}
|
||||
|
||||
export function DeadlineTrafficLights({ data, onFilter }: Props) {
|
||||
const cards = [
|
||||
{
|
||||
key: "overdue" as const,
|
||||
label: "Überfällig",
|
||||
count: data.overdue_count,
|
||||
icon: AlertTriangle,
|
||||
bg: "bg-red-50",
|
||||
border: "border-red-200",
|
||||
iconColor: "text-red-500",
|
||||
countColor: "text-red-700",
|
||||
labelColor: "text-red-600",
|
||||
ring: data.overdue_count > 0 ? "ring-2 ring-red-300 ring-offset-1" : "",
|
||||
pulse: data.overdue_count > 0,
|
||||
},
|
||||
{
|
||||
key: "this_week" as const,
|
||||
label: "Diese Woche",
|
||||
count: data.due_this_week,
|
||||
icon: Clock,
|
||||
bg: "bg-amber-50",
|
||||
border: "border-amber-200",
|
||||
iconColor: "text-amber-500",
|
||||
countColor: "text-amber-700",
|
||||
labelColor: "text-amber-600",
|
||||
ring: "",
|
||||
pulse: false,
|
||||
},
|
||||
{
|
||||
key: "ok" as const,
|
||||
label: "Im Zeitplan",
|
||||
count: data.ok_count + data.due_next_week,
|
||||
icon: CheckCircle,
|
||||
bg: "bg-emerald-50",
|
||||
border: "border-emerald-200",
|
||||
iconColor: "text-emerald-500",
|
||||
countColor: "text-emerald-700",
|
||||
labelColor: "text-emerald-600",
|
||||
ring: "",
|
||||
pulse: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{cards.map((card) => (
|
||||
<button
|
||||
key={card.key}
|
||||
onClick={() => onFilter?.(card.key)}
|
||||
className={`group relative overflow-hidden rounded-xl border ${card.border} ${card.bg} ${card.ring} p-6 text-left transition-all hover:shadow-md active:scale-[0.98]`}
|
||||
>
|
||||
{card.pulse && (
|
||||
<span className="absolute right-4 top-4 flex h-3 w-3">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
|
||||
<span className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`rounded-lg p-2 ${card.bg}`}>
|
||||
<card.icon className={`h-5 w-5 ${card.iconColor}`} />
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${card.labelColor}`}>
|
||||
{card.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`mt-4 text-4xl font-bold tracking-tight ${card.countColor}`}>
|
||||
<AnimatedCount value={card.count} />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
134
frontend/src/components/dashboard/UpcomingTimeline.tsx
Normal file
134
frontend/src/components/dashboard/UpcomingTimeline.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { format, parseISO, isToday, isTomorrow } from "date-fns";
|
||||
import { de } from "date-fns/locale";
|
||||
import { Clock, Calendar, MapPin } from "lucide-react";
|
||||
import type { UpcomingDeadline, UpcomingAppointment } from "@/lib/types";
|
||||
|
||||
interface Props {
|
||||
deadlines: UpcomingDeadline[];
|
||||
appointments: UpcomingAppointment[];
|
||||
}
|
||||
|
||||
type TimelineItem =
|
||||
| { type: "deadline"; date: Date; data: UpcomingDeadline }
|
||||
| { type: "appointment"; date: Date; data: UpcomingAppointment };
|
||||
|
||||
function formatDayLabel(date: Date): string {
|
||||
if (isToday(date)) return "Heute";
|
||||
if (isTomorrow(date)) return "Morgen";
|
||||
return format(date, "EEEE, d. MMM", { locale: de });
|
||||
}
|
||||
|
||||
export function UpcomingTimeline({ deadlines, appointments }: Props) {
|
||||
const items: TimelineItem[] = [
|
||||
...deadlines.map((d) => ({
|
||||
type: "deadline" as const,
|
||||
date: parseISO(d.due_date),
|
||||
data: d,
|
||||
})),
|
||||
...appointments.map((a) => ({
|
||||
type: "appointment" as const,
|
||||
date: parseISO(a.start_at),
|
||||
data: a,
|
||||
})),
|
||||
].sort((a, b) => a.date.getTime() - b.date.getTime());
|
||||
|
||||
// Group by day
|
||||
const grouped = new Map<string, TimelineItem[]>();
|
||||
for (const item of items) {
|
||||
const key = format(item.date, "yyyy-MM-dd");
|
||||
const group = grouped.get(key) ?? [];
|
||||
group.push(item);
|
||||
grouped.set(key, group);
|
||||
}
|
||||
|
||||
const empty = items.length === 0;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<h2 className="text-sm font-semibold text-neutral-900">
|
||||
Nächste 7 Tage
|
||||
</h2>
|
||||
{empty ? (
|
||||
<p className="mt-6 text-center text-sm text-neutral-400">
|
||||
Keine anstehenden Termine oder Fristen
|
||||
</p>
|
||||
) : (
|
||||
<div className="mt-4 space-y-5">
|
||||
{Array.from(grouped.entries()).map(([dateKey, dayItems]) => (
|
||||
<div key={dateKey}>
|
||||
<p className="text-xs font-medium uppercase tracking-wider text-neutral-400">
|
||||
{formatDayLabel(dayItems[0].date)}
|
||||
</p>
|
||||
<div className="mt-2 space-y-2">
|
||||
{dayItems.map((item, i) => (
|
||||
<TimelineEntry key={`${item.type}-${i}`} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TimelineEntry({ item }: { item: TimelineItem }) {
|
||||
if (item.type === "deadline") {
|
||||
const d = item.data;
|
||||
return (
|
||||
<div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
|
||||
<div className="mt-0.5 rounded-md bg-amber-50 p-1">
|
||||
<Clock className="h-3.5 w-3.5 text-amber-500" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-neutral-900">
|
||||
{d.title}
|
||||
</p>
|
||||
<p className="mt-0.5 truncate text-xs text-neutral-500">
|
||||
{d.case_number} · {d.case_title}
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 text-xs font-medium text-amber-600">
|
||||
Frist
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const a = item.data;
|
||||
return (
|
||||
<div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
|
||||
<div className="mt-0.5 rounded-md bg-blue-50 p-1">
|
||||
<Calendar className="h-3.5 w-3.5 text-blue-500" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-neutral-900">
|
||||
{a.title}
|
||||
</p>
|
||||
<div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
|
||||
<span>{format(item.date, "HH:mm")} Uhr</span>
|
||||
{a.location && (
|
||||
<>
|
||||
<span className="text-neutral-300">·</span>
|
||||
<span className="flex items-center gap-0.5 truncate">
|
||||
<MapPin className="h-3 w-3" />
|
||||
{a.location}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{a.case_number && (
|
||||
<>
|
||||
<span className="text-neutral-300">·</span>
|
||||
<span>{a.case_number}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="shrink-0 text-xs font-medium text-blue-600">
|
||||
Termin
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
} from "lucide-react";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Dashboard", href: "/", icon: LayoutDashboard },
|
||||
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
|
||||
{ name: "Akten", href: "/akten", icon: FolderOpen },
|
||||
{ name: "Fristen", href: "/fristen", icon: Clock },
|
||||
{ name: "Termine", href: "/termine", icon: Calendar },
|
||||
@@ -30,10 +30,7 @@ export function Sidebar() {
|
||||
</div>
|
||||
<nav className="flex-1 space-y-0.5 p-2">
|
||||
{navigation.map((item) => {
|
||||
const isActive =
|
||||
item.href === "/"
|
||||
? pathname === "/"
|
||||
: pathname.startsWith(item.href);
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
|
||||
Reference in New Issue
Block a user