feat: reporting dashboard with charts (P1)
This commit is contained in:
m
262
frontend/src/app/(app)/berichte/page.tsx
Normal file
262
frontend/src/app/(app)/berichte/page.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "@/lib/api";
|
||||
import type {
|
||||
CaseReport,
|
||||
DeadlineReport,
|
||||
WorkloadReport,
|
||||
BillingReport,
|
||||
} from "@/lib/types";
|
||||
import { Breadcrumb } from "@/components/layout/Breadcrumb";
|
||||
import { Skeleton } from "@/components/ui/Skeleton";
|
||||
import {
|
||||
AlertTriangle,
|
||||
RefreshCw,
|
||||
Download,
|
||||
Printer,
|
||||
FolderOpen,
|
||||
Clock,
|
||||
Users,
|
||||
Receipt,
|
||||
} from "lucide-react";
|
||||
import { CasesTab } from "@/components/reports/CasesTab";
|
||||
import { DeadlinesTab } from "@/components/reports/DeadlinesTab";
|
||||
import { WorkloadTab } from "@/components/reports/WorkloadTab";
|
||||
import { BillingTab } from "@/components/reports/BillingTab";
|
||||
|
||||
type TabKey = "cases" | "deadlines" | "workload" | "billing";
|
||||
|
||||
const TABS: { key: TabKey; label: string; icon: typeof FolderOpen }[] = [
|
||||
{ key: "cases", label: "Akten", icon: FolderOpen },
|
||||
{ key: "deadlines", label: "Fristen", icon: Clock },
|
||||
{ key: "workload", label: "Auslastung", icon: Users },
|
||||
{ key: "billing", label: "Abrechnung", icon: Receipt },
|
||||
];
|
||||
|
||||
function getDefaultDateRange(): { from: string; to: string } {
|
||||
const now = new Date();
|
||||
const from = new Date(now.getFullYear() - 1, now.getMonth(), 1);
|
||||
return {
|
||||
from: from.toISOString().split("T")[0],
|
||||
to: now.toISOString().split("T")[0],
|
||||
};
|
||||
}
|
||||
|
||||
function ReportSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-24 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<Skeleton className="h-72 rounded-xl" />
|
||||
<Skeleton className="h-48 rounded-xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BerichtePage() {
|
||||
const [activeTab, setActiveTab] = useState<TabKey>("cases");
|
||||
const defaults = getDefaultDateRange();
|
||||
const [from, setFrom] = useState(defaults.from);
|
||||
const [to, setTo] = useState(defaults.to);
|
||||
|
||||
const queryParams = `?from=${from}&to=${to}`;
|
||||
|
||||
const casesQuery = useQuery({
|
||||
queryKey: ["reports", "cases", from, to],
|
||||
queryFn: () => api.get<CaseReport>(`/reports/cases${queryParams}`),
|
||||
enabled: activeTab === "cases",
|
||||
});
|
||||
|
||||
const deadlinesQuery = useQuery({
|
||||
queryKey: ["reports", "deadlines", from, to],
|
||||
queryFn: () => api.get<DeadlineReport>(`/reports/deadlines${queryParams}`),
|
||||
enabled: activeTab === "deadlines",
|
||||
});
|
||||
|
||||
const workloadQuery = useQuery({
|
||||
queryKey: ["reports", "workload", from, to],
|
||||
queryFn: () => api.get<WorkloadReport>(`/reports/workload${queryParams}`),
|
||||
enabled: activeTab === "workload",
|
||||
});
|
||||
|
||||
const billingQuery = useQuery({
|
||||
queryKey: ["reports", "billing", from, to],
|
||||
queryFn: () => api.get<BillingReport>(`/reports/billing${queryParams}`),
|
||||
enabled: activeTab === "billing",
|
||||
});
|
||||
|
||||
const currentQuery = {
|
||||
cases: casesQuery,
|
||||
deadlines: deadlinesQuery,
|
||||
workload: workloadQuery,
|
||||
billing: billingQuery,
|
||||
}[activeTab];
|
||||
|
||||
function exportCSV() {
|
||||
if (!currentQuery.data) return;
|
||||
let csv = "";
|
||||
const data = currentQuery.data;
|
||||
|
||||
if (activeTab === "cases") {
|
||||
const d = data as CaseReport;
|
||||
csv = "Monat,Eroeffnet,Geschlossen,Aktiv\n";
|
||||
csv += d.monthly
|
||||
.map((r) => `${r.period},${r.opened},${r.closed},${r.active}`)
|
||||
.join("\n");
|
||||
} else if (activeTab === "deadlines") {
|
||||
const d = data as DeadlineReport;
|
||||
csv = "Monat,Gesamt,Eingehalten,Versaeumt,Ausstehend,Quote (%)\n";
|
||||
csv += d.monthly
|
||||
.map(
|
||||
(r) =>
|
||||
`${r.period},${r.total},${r.met},${r.missed},${r.pending},${r.compliance_rate.toFixed(1)}`,
|
||||
)
|
||||
.join("\n");
|
||||
} else if (activeTab === "workload") {
|
||||
const d = data as WorkloadReport;
|
||||
csv = "Benutzer-ID,Aktive Akten,Fristen,Ueberfaellig,Erledigt\n";
|
||||
csv += d.users
|
||||
.map(
|
||||
(r) =>
|
||||
`${r.user_id},${r.active_cases},${r.deadlines},${r.overdue},${r.completed}`,
|
||||
)
|
||||
.join("\n");
|
||||
} else if (activeTab === "billing") {
|
||||
const d = data as BillingReport;
|
||||
csv = "Monat,Aktiv,Geschlossen,Neu\n";
|
||||
csv += d.monthly
|
||||
.map(
|
||||
(r) =>
|
||||
`${r.period},${r.cases_active},${r.cases_closed},${r.cases_new}`,
|
||||
)
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `bericht-${activeTab}-${from}-${to}.csv`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="animate-fade-in mx-auto max-w-6xl space-y-6 print:max-w-none">
|
||||
<div className="print:hidden">
|
||||
<Breadcrumb items={[{ label: "Berichte" }]} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-neutral-900">Berichte</h1>
|
||||
<p className="mt-0.5 text-sm text-neutral-500">
|
||||
Statistiken und Auswertungen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 print:hidden">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<label className="text-neutral-500">Von</label>
|
||||
<input
|
||||
type="date"
|
||||
value={from}
|
||||
onChange={(e) => setFrom(e.target.value)}
|
||||
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-900 outline-none focus:border-neutral-400"
|
||||
/>
|
||||
<label className="text-neutral-500">Bis</label>
|
||||
<input
|
||||
type="date"
|
||||
value={to}
|
||||
onChange={(e) => setTo(e.target.value)}
|
||||
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-900 outline-none focus:border-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={exportCSV}
|
||||
disabled={!currentQuery.data}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 disabled:opacity-50"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
CSV
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
|
||||
>
|
||||
<Printer className="h-3.5 w-3.5" />
|
||||
Drucken
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-neutral-200 print:hidden">
|
||||
<nav className="-mb-px flex gap-6">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`flex items-center gap-1.5 border-b-2 py-2.5 text-sm font-medium transition-colors ${
|
||||
activeTab === tab.key
|
||||
? "border-neutral-900 text-neutral-900"
|
||||
: "border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700"
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
{currentQuery.isLoading && <ReportSkeleton />}
|
||||
|
||||
{currentQuery.error && (
|
||||
<div className="py-12 text-center">
|
||||
<div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
|
||||
<AlertTriangle className="h-6 w-6 text-red-500" />
|
||||
</div>
|
||||
<h2 className="text-sm font-medium text-neutral-900">
|
||||
Bericht konnte nicht geladen werden
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
Bitte versuchen Sie es erneut.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => currentQuery.refetch()}
|
||||
className="mt-4 inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
Erneut laden
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!currentQuery.isLoading && !currentQuery.error && currentQuery.data && (
|
||||
<>
|
||||
{activeTab === "cases" && (
|
||||
<CasesTab data={currentQuery.data as CaseReport} />
|
||||
)}
|
||||
{activeTab === "deadlines" && (
|
||||
<DeadlinesTab data={currentQuery.data as DeadlineReport} />
|
||||
)}
|
||||
{activeTab === "workload" && (
|
||||
<WorkloadTab data={currentQuery.data as WorkloadReport} />
|
||||
)}
|
||||
{activeTab === "billing" && (
|
||||
<BillingTab data={currentQuery.data as BillingReport} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user