Phase 6/7: Reports builder and Audit log - all 7 routes now complete
Reports (§4.8): - lib/reports.ts: generic server-side aggregation engine over 9 measures (Headcount, FTE, Eintritte, Austritte, Ø Bruttogehalt, Teilzeitquote, Ø Alter, Ø Zugehoerigkeit, Frauenanteil) x 10 group-by dimensions, with an optional second-dimension split (disabled for average-type measures) and per-row drill-down data. - app/(app)/reports/page.tsx: reads filters from the URL, fetches the matching employees_directory rows server-side, aggregates in Node (not shipped raw to the client), computes the total. - ReportsPageClient: measure/group/split/filter controls, 6 preset chips, saved-reports list (actions/reports.ts), CSV export (client-side blob download), stacked bars with a color-keyed legend when split is active, and click-to-drill-down into the underlying people (capped at 12, "+N weitere", linking to /employees/[id]). Audit log (§4.9): - app/(app)/audit/page.tsx + AuditFilters: search (target/details/actor) + action-type filter, paginated table with colored action badges, row links to the affected employee when target_employee_id is set, and the required "unveraenderbar" footer note. This completes every route from the spec's information architecture: Dashboard, Mitarbeiter:innen (list+detail), Organigramm (3 views), Positionen & Bereiche, Berichte, Audit-Log, plus the Hire wizard and all 6 action panels reachable from them. Final verification: clean npm run build + tsc --noEmit, then a full browser walkthrough of all 6 authenticated routes as hr_admin (zero console errors, zero 5xx responses) and a role-check pass as the manager test account confirming action buttons and the "+ Neueinstellung" button are hidden, and salary is masked as "... (ausgeblendet)" on the Vertrag & Gehalt tab. Swept the database for leftover test data from the debugging sessions above - none found, seed data is clean.
This commit is contained in:
76
components/audit/AuditFilters.tsx
Normal file
76
components/audit/AuditFilters.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { Search } from "lucide-react";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const ACTIONS = [
|
||||
"Neueinstellung",
|
||||
"Wiedereinstellung",
|
||||
"Rückkehr",
|
||||
"Austritt",
|
||||
"Versetzung",
|
||||
"Ausschreibung",
|
||||
"Interne Besetzung",
|
||||
"Beförderung",
|
||||
"Reorganisation",
|
||||
"Reorganisation rückgängig",
|
||||
"Karenz",
|
||||
"Vertragsänderung",
|
||||
"Stammdatenänderung",
|
||||
"Gehaltsanpassung",
|
||||
];
|
||||
|
||||
export function AuditFilters() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const [q, setQ] = useState(searchParams.get("q") ?? "");
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
const current = new URLSearchParams(searchParams.toString());
|
||||
if (q) current.set("q", q);
|
||||
else current.delete("q");
|
||||
current.delete("page");
|
||||
const next = current.toString();
|
||||
if (next !== searchParams.toString()) router.push(`${pathname}?${next}`);
|
||||
}, 300);
|
||||
return () => clearTimeout(handle);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [q]);
|
||||
|
||||
function updateParam(key: string, value: string) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (value) params.set(key, value);
|
||||
else params.delete(key);
|
||||
params.delete("page");
|
||||
router.push(`${pathname}?${params.toString()}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex min-w-[240px] flex-1 items-center gap-2 rounded border border-border bg-white px-3 py-2">
|
||||
<Search className="h-4 w-4 shrink-0 text-ink-muted" />
|
||||
<input
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
placeholder="Objekt, Details, Benutzer:in…"
|
||||
className="w-full text-sm text-ink outline-none placeholder:text-ink-muted"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
defaultValue={searchParams.get("action") ?? ""}
|
||||
onChange={(e) => updateParam("action", e.target.value)}
|
||||
className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
|
||||
>
|
||||
<option value="">Alle Aktionen</option>
|
||||
{ACTIONS.map((a) => (
|
||||
<option key={a} value={a}>
|
||||
{a}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
354
components/reports/ReportsPageClient.tsx
Normal file
354
components/reports/ReportsPageClient.tsx
Normal file
@@ -0,0 +1,354 @@
|
||||
"use client";
|
||||
|
||||
import { Download, Save, Trash2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { deleteReport, saveReport } from "@/actions/reports";
|
||||
import { useToast } from "@/components/ui/Toast";
|
||||
import { fmtDate } from "@/lib/format";
|
||||
import {
|
||||
AVERAGE_MEASURES,
|
||||
DATE_SCOPED_MEASURES,
|
||||
GROUP_LABELS,
|
||||
MEASURE_LABELS,
|
||||
REPORT_PRESETS,
|
||||
type GroupDimension,
|
||||
type Measure,
|
||||
type ReportRow,
|
||||
} from "@/lib/reports";
|
||||
|
||||
const SPLIT_COLORS = ["bg-brand-500", "bg-info-text", "bg-purple-text", "bg-warning-text", "bg-success-text", "bg-danger-solid"];
|
||||
|
||||
type SavedReport = { id: string; name: string; config: Record<string, unknown> };
|
||||
|
||||
type ReportsPageClientProps = {
|
||||
measure: Measure;
|
||||
group: GroupDimension;
|
||||
split: GroupDimension | "";
|
||||
filters: { division: string; location: string; status: string; employment: string; from: string; to: string };
|
||||
rows: ReportRow[];
|
||||
total: number;
|
||||
recordCount: number;
|
||||
divisions: { id: string; name: string }[];
|
||||
locations: { id: string; name: string }[];
|
||||
savedReports: SavedReport[];
|
||||
};
|
||||
|
||||
function formatValue(measure: Measure, value: number): string {
|
||||
if (["headcount", "hires", "exits"].includes(measure)) return String(Math.round(value));
|
||||
if (measure === "fte") return value.toFixed(1);
|
||||
if (measure === "avg_salary") return new Intl.NumberFormat("de-AT", { style: "currency", currency: "EUR" }).format(value);
|
||||
if (measure === "parttime_rate" || measure === "female_share") return `${value.toFixed(1)}%`;
|
||||
if (measure === "avg_age" || measure === "avg_tenure") return `${value.toFixed(1)} Jahre`;
|
||||
return value.toFixed(1);
|
||||
}
|
||||
|
||||
export function ReportsPageClient(props: ReportsPageClientProps) {
|
||||
const { measure, group, split, filters, rows, total, recordCount, divisions, locations, savedReports } = props;
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const { showToast } = useToast();
|
||||
const [expandedKey, setExpandedKey] = useState<string | null>(null);
|
||||
|
||||
function updateParams(patch: Record<string, string | undefined>) {
|
||||
const sp = new URLSearchParams(searchParams.toString());
|
||||
for (const [k, v] of Object.entries(patch)) {
|
||||
if (v) sp.set(k, v);
|
||||
else sp.delete(k);
|
||||
}
|
||||
router.push(`${pathname}?${sp.toString()}`);
|
||||
}
|
||||
|
||||
function applyPreset(preset: (typeof REPORT_PRESETS)[number]) {
|
||||
router.push(`${pathname}?measure=${preset.measure}&group=${preset.group}${preset.split ? `&split=${preset.split}` : ""}`);
|
||||
}
|
||||
|
||||
function applySavedReport(config: Record<string, unknown>) {
|
||||
const sp = new URLSearchParams();
|
||||
for (const [k, v] of Object.entries(config)) {
|
||||
if (typeof v === "string" && v) sp.set(k, v);
|
||||
}
|
||||
router.push(`${pathname}?${sp.toString()}`);
|
||||
}
|
||||
|
||||
async function handleSaveReport() {
|
||||
const name = window.prompt("Name für diesen Bericht:");
|
||||
if (!name) return;
|
||||
const result = await saveReport({ name, config: { measure, group, split, ...filters } });
|
||||
if (result.success) {
|
||||
showToast("Bericht gespeichert.");
|
||||
router.refresh();
|
||||
} else {
|
||||
showToast(result.error ?? "Fehler beim Speichern.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteReport(id: string) {
|
||||
const result = await deleteReport(id);
|
||||
if (result.success) {
|
||||
showToast("Bericht gelöscht.");
|
||||
router.refresh();
|
||||
} else {
|
||||
showToast(result.error ?? "Fehler beim Löschen.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function handleExportCsv() {
|
||||
const header = [GROUP_LABELS[group], MEASURE_LABELS[measure], "Anzahl", "Anteil (%)"];
|
||||
const lines = [header.join(";")];
|
||||
for (const row of rows) {
|
||||
const share = total > 0 ? ((row.value / total) * 100).toFixed(1) : "0";
|
||||
lines.push([row.key, formatValue(measure, row.value), String(row.count), share].join(";"));
|
||||
}
|
||||
const blob = new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8;" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `bericht-${measure}-${group}.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
const isAverage = AVERAGE_MEASURES.includes(measure);
|
||||
const isDateScoped = DATE_SCOPED_MEASURES.includes(measure);
|
||||
const maxValue = Math.max(1, ...rows.map((r) => r.value));
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-[320px_1fr]">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Kennzahl</label>
|
||||
<select
|
||||
value={measure}
|
||||
onChange={(e) => updateParams({ measure: e.target.value, split: AVERAGE_MEASURES.includes(e.target.value as Measure) ? undefined : split })}
|
||||
className="w-full rounded border border-border px-3 py-2 text-sm"
|
||||
>
|
||||
{(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => (
|
||||
<option key={m} value={m}>
|
||||
{MEASURE_LABELS[m]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
|
||||
<select value={group} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
|
||||
{(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => (
|
||||
<option key={g} value={g}>
|
||||
{GROUP_LABELS[g]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
|
||||
<select
|
||||
value={split}
|
||||
disabled={isAverage}
|
||||
onChange={(e) => updateParams({ split: e.target.value || undefined })}
|
||||
className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
|
||||
>
|
||||
<option value="">Keine Aufteilung</option>
|
||||
{(Object.keys(GROUP_LABELS) as GroupDimension[])
|
||||
.filter((g) => g !== group)
|
||||
.map((g) => (
|
||||
<option key={g} value={g}>
|
||||
{GROUP_LABELS[g]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Filter</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select value={filters.division} onChange={(e) => updateParams({ division: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
|
||||
<option value="">Alle Bereiche</option>
|
||||
{divisions.map((d) => (
|
||||
<option key={d.id} value={d.id}>
|
||||
{d.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={filters.location} onChange={(e) => updateParams({ location: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
|
||||
<option value="">Alle Standorte</option>
|
||||
{locations.map((l) => (
|
||||
<option key={l.id} value={l.id}>
|
||||
{l.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={filters.status} onChange={(e) => updateParams({ status: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
|
||||
<option value="">Alle Status</option>
|
||||
<option value="Aktiv">Aktiv</option>
|
||||
<option value="Karenz">Karenz</option>
|
||||
<option value="Geplant">Geplant</option>
|
||||
<option value="Ausgetreten">Ausgetreten</option>
|
||||
</select>
|
||||
<select
|
||||
value={filters.employment}
|
||||
onChange={(e) => updateParams({ employment: e.target.value })}
|
||||
className="w-full rounded border border-border px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Alle Beschäftigungsarten</option>
|
||||
<option value="Vollzeit">Vollzeit</option>
|
||||
<option value="Teilzeit">Teilzeit</option>
|
||||
</select>
|
||||
{isDateScoped && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={filters.from}
|
||||
onChange={(e) => updateParams({ from: e.target.value })}
|
||||
className="w-full rounded border border-border px-2 py-2 text-xs"
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.to}
|
||||
onChange={(e) => updateParams({ to: e.target.value })}
|
||||
className="w-full rounded border border-border px-2 py-2 text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Vorlagen</h3>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{REPORT_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset.name}
|
||||
type="button"
|
||||
onClick={() => applyPreset(preset)}
|
||||
className="rounded-full border border-border px-2.5 py-1 text-xs font-semibold text-ink-body hover:bg-surface"
|
||||
>
|
||||
{preset.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{savedReports.length > 0 && (
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Gespeicherte Berichte</h3>
|
||||
<ul className="flex flex-col divide-y divide-border">
|
||||
{savedReports.map((r) => (
|
||||
<li key={r.id} className="flex items-center justify-between py-1.5 text-sm">
|
||||
<button type="button" onClick={() => applySavedReport(r.config)} className="text-left text-ink-body hover:text-brand-700 hover:underline">
|
||||
{r.name}
|
||||
</button>
|
||||
<button type="button" onClick={() => handleDeleteReport(r.id)} aria-label="Löschen" className="text-ink-muted hover:text-danger-solid">
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-ink">
|
||||
{MEASURE_LABELS[measure]} nach {GROUP_LABELS[group]}
|
||||
</h2>
|
||||
<p className="text-xs text-ink-muted">{recordCount} Datensätze</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExportCsv}
|
||||
className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
CSV exportieren
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSaveReport}
|
||||
className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
Bericht speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mb-4 text-2xl font-extrabold text-ink">{formatValue(measure, total)}</p>
|
||||
|
||||
{split && (
|
||||
<div className="mb-3 flex flex-wrap gap-3">
|
||||
{Array.from(new Set(rows.flatMap((r) => r.split?.map((s) => s.key) ?? []))).map((key, i) => (
|
||||
<span key={key} className="flex items-center gap-1.5 text-xs text-ink-body">
|
||||
<span className={`h-2.5 w-2.5 rounded-full ${SPLIT_COLORS[i % SPLIT_COLORS.length]}`} />
|
||||
{key}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{rows.map((row) => {
|
||||
const share = total > 0 ? (row.value / total) * 100 : 0;
|
||||
const isExpanded = expandedKey === row.key;
|
||||
return (
|
||||
<div key={row.key}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpandedKey(isExpanded ? null : row.key)}
|
||||
className="w-full text-left"
|
||||
>
|
||||
<div className="mb-1 flex items-center justify-between text-sm">
|
||||
<span className="font-semibold text-ink">{row.key}</span>
|
||||
<span className="text-ink-body">
|
||||
{formatValue(measure, row.value)} <span className="text-xs text-ink-muted">({share.toFixed(1)}%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex h-2.5 overflow-hidden rounded bg-surface">
|
||||
{row.split ? (
|
||||
row.split.map((s, i) => (
|
||||
<div
|
||||
key={s.key}
|
||||
className={SPLIT_COLORS[i % SPLIT_COLORS.length]}
|
||||
style={{ width: `${maxValue > 0 ? (s.value / maxValue) * 100 : 0}%` }}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="bg-brand-500" style={{ width: `${(row.value / maxValue) * 100}%` }} />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
{isExpanded && (
|
||||
<div className="mt-2 rounded border border-border bg-surface p-3">
|
||||
<ul className="flex flex-col divide-y divide-border">
|
||||
{row.people.slice(0, 12).map((p) => (
|
||||
<li key={p.id} className="flex items-center justify-between py-1.5 text-sm">
|
||||
<Link href={`/employees/${p.id}`} className="font-semibold text-ink hover:text-brand-700 hover:underline">
|
||||
{p.name}
|
||||
</Link>
|
||||
<span className="text-xs text-ink-muted">
|
||||
{p.title} · {p.team} · {fmtDate(p.entry_date)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{row.people.length > 12 && <p className="mt-2 text-xs text-ink-muted">+{row.people.length - 12} weitere</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{rows.length === 0 && <p className="text-sm text-ink-muted">Keine Daten für diese Auswahl.</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user