feat: reporting dashboard — case stats, deadline compliance, workload, billing (P1)
Backend:
- ReportingService with aggregation queries (CTEs, FILTER clauses)
- 4 API endpoints: /api/reports/{cases,deadlines,workload,billing}
- Date range filtering via ?from=&to= query params
Frontend:
- /berichte page with 4 tabs: Akten, Fristen, Auslastung, Abrechnung
- recharts: bar/pie/line charts for all report types
- Date range picker, CSV export, print-friendly view
- Sidebar nav entry with BarChart3 icon
Also resolves merge conflicts between role-based, notification, and
audit trail branches, and adds missing TS types (AuditLogResponse,
Notification, NotificationPreferences).
This commit is contained in:
m
240
frontend/src/components/reports/BillingTab.tsx
Normal file
240
frontend/src/components/reports/BillingTab.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
"use client";
|
||||
|
||||
import type { BillingReport } from "@/lib/types";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Legend,
|
||||
LineChart,
|
||||
Line,
|
||||
} from "recharts";
|
||||
import { Receipt, TrendingUp, FolderOpen } from "lucide-react";
|
||||
|
||||
function formatMonth(period: string): string {
|
||||
const [year, month] = period.split("-");
|
||||
const months = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mär",
|
||||
"Apr",
|
||||
"Mai",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Okt",
|
||||
"Nov",
|
||||
"Dez",
|
||||
];
|
||||
return `${months[parseInt(month, 10) - 1]} ${year.slice(2)}`;
|
||||
}
|
||||
|
||||
export function BillingTab({ data }: { data: BillingReport }) {
|
||||
const chartData = data.monthly.map((m) => ({
|
||||
...m,
|
||||
name: formatMonth(m.period),
|
||||
}));
|
||||
|
||||
const totalNew = data.monthly.reduce((sum, m) => sum + m.cases_new, 0);
|
||||
const totalClosed = data.monthly.reduce((sum, m) => sum + m.cases_closed, 0);
|
||||
const totalByType = data.by_type.reduce((sum, t) => sum + t.total, 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Summary cards */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<div className="flex items-center gap-2 text-sm text-neutral-500">
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
Neue Mandate
|
||||
</div>
|
||||
<p className="mt-2 text-2xl font-semibold text-neutral-900">
|
||||
{totalNew}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-neutral-500">im Zeitraum</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<div className="flex items-center gap-2 text-sm text-neutral-500">
|
||||
<Receipt className="h-4 w-4" />
|
||||
Abgeschlossen
|
||||
</div>
|
||||
<p className="mt-2 text-2xl font-semibold text-neutral-900">
|
||||
{totalClosed}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-neutral-500">abrechenbar</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<div className="flex items-center gap-2 text-sm text-neutral-500">
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
Verfahrensarten
|
||||
</div>
|
||||
<p className="mt-2 text-2xl font-semibold text-neutral-900">
|
||||
{data.by_type.length}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-neutral-500">
|
||||
{totalByType} Akten gesamt
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New cases trend */}
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<h3 className="mb-4 text-sm font-medium text-neutral-900">
|
||||
Umsatzentwicklung (Mandate)
|
||||
</h3>
|
||||
{chartData.length === 0 ? (
|
||||
<p className="py-8 text-center text-sm text-neutral-400">
|
||||
Keine Daten im gewählten Zeitraum
|
||||
</p>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e5e5" />
|
||||
<XAxis dataKey="name" tick={{ fontSize: 12 }} stroke="#a3a3a3" />
|
||||
<YAxis
|
||||
allowDecimals={false}
|
||||
tick={{ fontSize: 12 }}
|
||||
stroke="#a3a3a3"
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
border: "1px solid #e5e5e5",
|
||||
borderRadius: 8,
|
||||
fontSize: 13,
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: 13 }} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="cases_new"
|
||||
name="Neue Mandate"
|
||||
stroke="#171717"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "#171717", r: 4 }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="cases_closed"
|
||||
name="Abgeschlossen"
|
||||
stroke="#a3a3a3"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "#a3a3a3", r: 4 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* By type breakdown */}
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
||||
<h3 className="mb-4 text-sm font-medium text-neutral-900">
|
||||
Mandate nach Verfahrensart
|
||||
</h3>
|
||||
{data.by_type.length === 0 ? (
|
||||
<p className="py-8 text-center text-sm text-neutral-400">
|
||||
Keine Daten
|
||||
</p>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<BarChart data={data.by_type} layout="vertical">
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e5e5" />
|
||||
<XAxis
|
||||
type="number"
|
||||
allowDecimals={false}
|
||||
tick={{ fontSize: 12 }}
|
||||
stroke="#a3a3a3"
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="case_type"
|
||||
tick={{ fontSize: 12 }}
|
||||
stroke="#a3a3a3"
|
||||
width={100}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
border: "1px solid #e5e5e5",
|
||||
borderRadius: 8,
|
||||
fontSize: 13,
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: 13 }} />
|
||||
<Bar
|
||||
dataKey="active"
|
||||
name="Aktiv"
|
||||
stackId="a"
|
||||
fill="#171717"
|
||||
/>
|
||||
<Bar
|
||||
dataKey="closed"
|
||||
name="Geschlossen"
|
||||
stackId="a"
|
||||
fill="#a3a3a3"
|
||||
radius={[0, 4, 4, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Summary table */}
|
||||
<div className="rounded-xl border border-neutral-200 bg-white">
|
||||
<div className="border-b border-neutral-100 px-5 py-4">
|
||||
<h3 className="text-sm font-medium text-neutral-900">
|
||||
Zusammenfassung
|
||||
</h3>
|
||||
</div>
|
||||
{data.by_type.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-neutral-400">
|
||||
Keine Daten
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-100 text-left text-neutral-500">
|
||||
<th className="px-5 py-3 font-medium">Verfahrensart</th>
|
||||
<th className="px-5 py-3 font-medium text-right">Aktiv</th>
|
||||
<th className="px-5 py-3 font-medium text-right">
|
||||
Geschlossen
|
||||
</th>
|
||||
<th className="px-5 py-3 font-medium text-right">
|
||||
Gesamt
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.by_type.map((t) => (
|
||||
<tr
|
||||
key={t.case_type}
|
||||
className="border-b border-neutral-50 last:border-b-0"
|
||||
>
|
||||
<td className="px-5 py-3 text-neutral-900">
|
||||
{t.case_type}
|
||||
</td>
|
||||
<td className="px-5 py-3 text-right text-neutral-600">
|
||||
{t.active}
|
||||
</td>
|
||||
<td className="px-5 py-3 text-right text-neutral-600">
|
||||
{t.closed}
|
||||
</td>
|
||||
<td className="px-5 py-3 text-right font-medium text-neutral-900">
|
||||
{t.total}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user