m.stubhan/alpenwerk-hr
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Let the export select on everything the data model holds

Browse Source 
The export offered four criteria — unit, location, status, employment
type — while the employee record carries around twenty selectable
attributes. Anything else had to be filtered by hand in Excel afterwards,
which is how a payroll hand-off stops matching the application it came
from.

All of them are now filters: contract type, blue/white collar,
collective agreement, paygrade, internal/external, gender, company car
and its drivetrain, works council, lateral leadership, C-level, type of
long-term absence, weekday worked, dependents on file, and open ranges
for entry, exit, birth date and weekly hours. The unit filter covers
every level rather than only divisions, so a single department can be
selected without going the long way round.

They live in one table in lib/report-criteria.ts, which the filter panel
builds itself from, the parser validates against, and the query turns
into conditions. A new criterion is one entry there and nothing else —
and it cannot end up working in the report while being silently ignored
by the export.

The two export links and the saved-report config now carry the query
string through as it stands instead of listing the parameters they know
about. That enumeration was the actual defect: adding a filter meant
remembering three separate places, and forgetting one produced an export
that quietly disagreed with the figure on screen.

Validation is not housekeeping here. These values reach SQL comparisons
and the download filename, i.e. a Content-Disposition header; what is not
in the list does not get through.

The company car dropdown leaves the employee list. It is one of twenty
equals under Berichte now, where the selection can also be exported —
which was the point of asking in the first place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Maximilian Stubhan
2026-08-12 12:40:47 +02:00
parent f14f1cb8df
commit 0b8f874fa5
10 changed files with 586 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
components/reports/ReportsPageClient.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { FileSpreadsheet, FileText, Save, Trash2 } from "lucide-react";
import { ChevronDown, FileSpreadsheet, FileText, Save, Trash2 } from "lucide-react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
@@ -10,6 +10,14 @@ import { CONTROL_CLASS, SelectField, TextField } from "@/components/ui/Field";
import { Modal } from "@/components/ui/Modal";
import { useToast } from "@/components/ui/Toast";
import { fmtDate } from "@/lib/format";
import {
anzahlKriterien,
AUSWAHL_KRITERIEN,
JANEIN_KRITERIEN,
kriterienParameter,
ZEITRAUM_KRITERIEN,
type Criteria,
} from "@/lib/report-criteria";
import {
AVERAGE_MEASURES,
EVENT_DATE_OPEN,
@@ -27,6 +35,7 @@ import {
type GroupDimension,
type Measure,
type ReportRow,
type UnitOption,
} from "@/lib/reports";
import type { HistoryEventType } from "@/lib/supabase/types";
@@ -40,7 +49,7 @@ type CommonProps = {
rows: ReportRow[];
total: number;
recordCount: number;
divisions: OrgOption[];
units: UnitOption[];
locations: OrgOption[];
savedReports: SavedReport[];
};
@@ -51,7 +60,8 @@ type SnapshotProps = CommonProps & {
group: GroupDimension;
split: GroupDimension | "";
asOf: string;
filters: { division: string; location: string; status: string; employment: string };
filters: { division: string; location: string; status: string };
criteria: Criteria;
};
type EventsProps = CommonProps & {
@@ -64,6 +74,144 @@ type EventsProps = CommonProps & {
type ReportsPageClientProps = SnapshotProps | EventsProps;
/**
* Alle übrigen Auswahlkriterien, eingeklappt.
*
* Aufgeklappt wäre die Leiste dreimal so lang wie der Bericht daneben, und
* die vier Filter, die fast immer gemeint sind, würden darin untergehen.
* Eingeklappt steht nur die Zahl der gesetzten Kriterien da — und die ist
* das, was man wissen muss: ob gerade etwas einschränkt, das man vergessen
* hat.
*/
function KriterienBlock({
criteria,
onChange,
onReset,
}: {
criteria: Criteria;
onChange: (patch: Record<string, string | undefined>) => void;
onReset: () => void;
}) {
const [offen, setOffen] = useState(false);
const anzahl = anzahlKriterien(criteria);
return (
<div className="mt-2 border-t border-border-subtle pt-2">
<div className="flex items-center justify-between">
<button
type="button"
onClick={() => setOffen(!offen)}
aria-expanded={offen}
className="flex items-center gap-1 rounded text-xs font-semibold text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
>
<ChevronDown className={`h-3.5 w-3.5 transition-transform ${offen ? "rotate-180" : ""}`} />
Weitere Kriterien
{anzahl > 0 && <span className="rounded-full bg-brand-500 px-1.5 text-[10px] text-white">{anzahl}</span>}
</button>
{anzahl > 0 && (
<button
type="button"
onClick={onReset}
className="rounded text-xs text-ink-muted hover:text-ink hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
>
Zurücksetzen
</button>
)}
</div>
{offen && (
<div className="mt-3 flex flex-col gap-2">
{AUSWAHL_KRITERIEN.map((k) => (
<select
key={k.key}
aria-label={`Nach ${k.label} filtern`}
value={criteria.auswahl[k.key] ?? ""}
onChange={(e) => onChange({ [k.key]: e.target.value || undefined })}
className={CONTROL_CLASS}
>
<option value="">{k.alle}</option>
{k.optionen.map((o) => (
<option key={o.wert} value={o.wert}>
{o.label}
</option>
))}
</select>
))}
<fieldset className="rounded border border-border px-3 py-2">
<legend className="mb-1.5 text-xs font-semibold text-ink-muted">Merkmale</legend>
<div className="flex flex-col gap-1.5">
{JANEIN_KRITERIEN.map((k) => (
<div key={k.key} className="flex items-center justify-between gap-2 text-sm text-ink-body">
<span>{k.label}</span>
<select
aria-label={`${k.label}: ja oder nein`}
value={criteria.jaNein[k.key] ?? ""}
onChange={(e) => onChange({ [k.key]: e.target.value || undefined })}
className="rounded border border-border px-2 py-1 text-xs focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500"
>
<option value="">egal</option>
<option value="ja">ja</option>
<option value="nein">nein</option>
</select>
</div>
))}
</div>
</fieldset>
{ZEITRAUM_KRITERIEN.map((k) => (
<fieldset key={k.key} className="rounded border border-border px-3 py-2">
<legend className="mb-1 text-xs font-semibold text-ink-muted">{k.label}</legend>
<div className="grid grid-cols-2 gap-2">
<TextField
label="Von"
dense
type="date"
value={criteria.zeitraum[k.key]?.von ?? ""}
onChange={(v) => onChange({ [`${k.key}From`]: v || undefined })}
/>
<TextField
label="Bis"
dense
type="date"
value={criteria.zeitraum[k.key]?.bis ?? ""}
onChange={(v) => onChange({ [`${k.key}To`]: v || undefined })}
/>
</div>
</fieldset>
))}
<fieldset className="rounded border border-border px-3 py-2">
<legend className="mb-1 text-xs font-semibold text-ink-muted">Wochenstunden</legend>
<div className="grid grid-cols-2 gap-2">
<TextField
label="Ab"
dense
type="number"
step="0.5"
value={criteria.stundenVon?.toString() ?? ""}
onChange={(v) => onChange({ hoursFrom: v || undefined })}
/>
<TextField
label="Bis"
dense
type="number"
step="0.5"
value={criteria.stundenBis?.toString() ?? ""}
onChange={(v) => onChange({ hoursTo: v || undefined })}
/>
</div>
</fieldset>
<p className="text-xs text-ink-muted">
Alle Kriterien gelten für den Bericht <em>und</em> für beide Exporte.
</p>
</div>
)}
</div>
);
}
function formatValue(measure: Measure, value: number): string {
if (measure === "headcount") return String(Math.round(value));
if (measure === "fte") return value.toFixed(1);
@@ -73,7 +221,7 @@ function formatValue(measure: Measure, value: number): string {
}
export function ReportsPageClient(props: ReportsPageClientProps) {
const { mode, rows, total, recordCount, divisions, locations, savedReports } = props;
const { mode, rows, total, recordCount, units, locations, savedReports } = props;
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
@@ -103,6 +251,12 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
updateParams({ status: next.length > 0 ? next.join(",") : undefined });
}
function resetKriterien() {
const patch: Record<string, undefined> = {};
for (const p of kriterienParameter()) patch[p] = undefined;
updateParams(patch);
}
function applyPreset(preset: { group: string; split?: string; eventType?: string; measure?: string }) {
const sp = new URLSearchParams({ mode });
if (preset.measure) sp.set("measure", preset.measure);
@@ -126,10 +280,13 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
showToast("Bitte einen Namen angeben.", "error");
return;
}
const config =
mode === "snapshot"
? { mode, measure: props.measure, group: props.group, split: props.split, asOf: props.asOf, ...props.filters }
: { mode, group: props.eventGroup, split: props.eventSplit, eventType: props.eventType, ...props.eventFilters };
// Auch hier die ganze Adresszeile: ein gespeicherter Bericht, der die
// Hälfte der Kriterien vergisst, führt beim nächsten Öffnen still zu
// anderen Zahlen.
const config: Record<string, string> = Object.fromEntries(searchParams.entries());
config.mode = mode;
config.group = mode === "snapshot" ? props.group : props.eventGroup;
if (mode === "snapshot") config.measure = props.measure;
setSavingReport(true);
const result = await saveReport({ name: newReportName.trim(), config });
setSavingReport(false);
@@ -153,41 +310,30 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
}
}
// Beide Ausgänge übernehmen die Adresszeile unverändert, statt die
// Parameter einzeln aufzuzählen. Genau diese Aufzählung war der Grund,
// warum ein neues Kriterium im Bericht wirkte und im Export fehlte — man
// musste daran denken, sie an drei Stellen zu ergänzen. Jetzt sieht der
// Export das, was der Bericht gesehen hat, weil es dieselbe Auswahl ist.
function exportHref(ziel: string, format: "csv" | "xlsx"): string {
const sp = new URLSearchParams(searchParams.toString());
sp.set("format", format);
return `${ziel}?${sp.toString()}`;
}
function reportExportHref(format: "csv" | "xlsx"): string {
const sp = new URLSearchParams();
const sp = new URLSearchParams(searchParams.toString());
sp.set("format", format);
sp.set("mode", mode);
if (mode === "snapshot") {
sp.set("measure", props.measure);
sp.set("group", props.group);
if (props.split) sp.set("split", props.split);
if (props.asOf) sp.set("asOf", props.asOf);
for (const [k, v] of Object.entries(props.filters)) if (v) sp.set(k, v);
} else {
sp.set("group", props.eventGroup);
if (props.eventSplit) sp.set("split", props.eventSplit);
if (props.eventType) sp.set("eventType", props.eventType);
for (const [k, v] of Object.entries(props.eventFilters)) if (v) sp.set(k, v);
}
// Die Vorgaben stehen nicht zwingend in der Adresszeile; die Route
// braucht sie aber, um dieselbe Auswertung zu bauen.
sp.set("group", mode === "snapshot" ? props.group : props.eventGroup);
if (mode === "snapshot") sp.set("measure", props.measure);
return `/api/export/report?${sp.toString()}`;
}
function fullExportHref(format: "csv" | "xlsx"): string {
if (mode === "snapshot") {
const sp = new URLSearchParams();
sp.set("format", format);
if (props.asOf) sp.set("asOf", props.asOf);
if (props.filters.division) sp.set("division", props.filters.division);
if (props.filters.location) sp.set("location", props.filters.location);
if (props.filters.status) sp.set("status", props.filters.status);
if (props.filters.employment) sp.set("employment", props.filters.employment);
return `/api/export/employees?${sp.toString()}`;
}
const sp = new URLSearchParams();
sp.set("format", format);
if (props.eventType) sp.set("eventType", props.eventType);
for (const [k, v] of Object.entries(props.eventFilters)) if (v) sp.set(k, v);
return `/api/export/events?${sp.toString()}`;
return exportHref(mode === "snapshot" ? "/api/export/employees" : "/api/export/events", format);
}
const isAverage = mode === "snapshot" && AVERAGE_MEASURES.includes(props.measure);
@@ -367,15 +513,19 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Filter</h3>
<div className="flex flex-col gap-2">
<select
aria-label="Nach Bereich filtern"
aria-label="Nach Organisationseinheit filtern"
value={mode === "snapshot" ? props.filters.division : props.eventFilters.division}
onChange={(e) => updateParams({ division: e.target.value })}
className={CONTROL_CLASS}
>
<option value="">Alle Bereiche</option>
{divisions.map((d) => (
<option key={d.id} value={d.id}>
{d.name}
<option value="">Alle Organisationseinheiten</option>
{units.map((u) => (
// Einrückung mit geschützten Leerzeichen: ein <optgroup> je
// Ebene ginge nicht, weil Einheiten dort auswählbar bleiben
// müssen — eine Abteilung ist selbst ein Filterwert.
<option key={u.id} value={u.id}>
{"  ".repeat(u.depth)}
{u.name}
</option>
))}
</select>
@@ -410,19 +560,13 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
))}
</div>
</fieldset>
<select
aria-label="Nach Beschäftigungsart filtern"
value={props.filters.employment}
onChange={(e) => updateParams({ employment: e.target.value })}
className={CONTROL_CLASS}
>
<option value="">Alle Beschäftigungsarten</option>
<option value="Vollzeit">Vollzeit</option>
<option value="Teilzeit">Teilzeit</option>
</select>
</>
)}
</div>
{mode === "snapshot" && (
<KriterienBlock criteria={props.criteria} onChange={updateParams} onReset={resetKriterien} />
)}
</div>
<div className="rounded border border-border bg-white p-4">