59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { AlertTriangle, CheckCircle2, ClipboardList, Clock, FilePenLine } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useAuth } from "@/components/auth";
|
|
import { apiGet } from "@/lib/api";
|
|
|
|
type DashboardData = {
|
|
validation_drafts: number;
|
|
validation_ready: number;
|
|
validation_in_review: number;
|
|
validation_approved: number;
|
|
validation_overdue: number;
|
|
};
|
|
|
|
const cards = [
|
|
{ label: "Entwuerfe", key: "validation_drafts", href: "/validations?status=ENTWURF", icon: FilePenLine },
|
|
{ label: "Bereit zur Pruefung", key: "validation_ready", href: "/validations?status=BEREIT_ZUR_PRUEFUNG", icon: ClipboardList },
|
|
{ label: "In Pruefung", key: "validation_in_review", href: "/validations?status=IN_PRUEFUNG", icon: Clock },
|
|
{ label: "Freigegeben", key: "validation_approved", href: "/validations?status=FREIGEGEBEN", icon: CheckCircle2 },
|
|
{ label: "Ueberfaellige Revalidierungen", key: "validation_overdue", href: "/validations?overdue_only=true", icon: AlertTriangle }
|
|
] as const;
|
|
|
|
export default function DashboardPage() {
|
|
const { token } = useAuth();
|
|
const query = useQuery({
|
|
queryKey: ["dashboard", token],
|
|
queryFn: () => apiGet<DashboardData>("/dashboard", token ?? ""),
|
|
enabled: Boolean(token)
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<header>
|
|
<h1 className="text-3xl font-semibold text-text">Dashboard</h1>
|
|
<p className="mt-2 text-text-light">Validierungsworkflow und faellige Revalidierungen.</p>
|
|
</header>
|
|
<section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
|
|
{cards.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link key={item.key} href={item.href} className="rounded-lg border border-border bg-surface p-6 shadow-soft transition hover:-translate-y-0.5 hover:border-primary/40">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-text-light">{item.label}</p>
|
|
<Icon className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<p className="mt-6 text-4xl font-semibold text-text">{query.data?.[item.key] ?? 0}</p>
|
|
</Link>
|
|
);
|
|
})}
|
|
</section>
|
|
<section className="rounded-lg border border-border bg-surface p-6 shadow-soft">
|
|
<h2 className="text-xl font-semibold">Zuletzt bearbeitete Validierungen</h2>
|
|
<p className="mt-2 text-sm leading-6 text-text-light">Die Validierungsverwaltung bietet Suche, Filter, Sortierung, Vorschau, Export und Workflow-Aktionen.</p>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|