Andrei Laas
96c94642ba
In den Berichten hing jedes Datumsfeld unmittelbar an der Adresszeile: eine Aenderung hiess router.push, also neu laden und neu rendern. Ein <input type="date"> meldet beim Tippen der Jahreszahl aber viermal -- 0002, 0020, 0202, 2026 -- und die ersten drei loesten je eine Navigation aus, die das Feld auf den Stand aus der Adresse zuruecksetzte. Mitten im Tippen. Mit dem Kalender ging es, weil der in einem Zug ein fertiges Datum setzt; das war der Hinweis darauf, wo es klemmt. DateField haelt den Tippstand jetzt bei sich und meldet nur, was eine Aussage ist: ein vollstaendiges Datum mit vierstelliger Jahreszahl ab 1000, oder das Leeren des Feldes. Beim Verlassen wird nachgereicht, was liegengeblieben ist. Der Stichtag im Organigramm ist ein blankes input und benutzt dieselbe Regel ueber istMeldbaresDatum -- zwei Fassungen davon liefen hier erfahrungsgemaess auseinander. Der Abgleich mit dem Wert von aussen laeuft waehrend des Renderns, nicht in einem Effekt: der liefe erst nach dem Zeichnen, das Feld zeigte also fuer einen Bildaufbau den alten Stand -- und die Regel gegen setState im Effekt verbietet ihn aus genau diesem Grund. Die Felder in den Panels bleiben, wie sie sind: dort ist der Zustand lokal, es gibt keine Navigation und damit auch kein Zuruecksetzen.
888 lines
38 KiB
TypeScript
888 lines
38 KiB
TypeScript
"use client";
|
||
|
||
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";
|
||
import { deleteReport, saveReport } from "@/actions/reports";
|
||
import { Button, LINK_BUTTON_CLASS } from "@/components/ui/Button";
|
||
import { CONTROL_CLASS, DateField, 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,
|
||
beschreibeKriterien,
|
||
JANEIN_KRITERIEN,
|
||
kriterienParameter,
|
||
ZEITRAUM_KRITERIEN,
|
||
type Criteria,
|
||
} from "@/lib/report-criteria";
|
||
import {
|
||
AVERAGE_MEASURES,
|
||
EVENT_DATE_OPEN,
|
||
EVENT_GROUP_LABELS,
|
||
EREIGNIS_AUSWAHL,
|
||
EREIGNIS_UNTERTYP,
|
||
EVENT_REPORT_PRESETS,
|
||
EVENT_TYPE_LABELS,
|
||
GROUP_LABELS,
|
||
MEASURE_LABELS,
|
||
messgroesseLabel,
|
||
parseStatuses,
|
||
REPORT_PRESETS,
|
||
sortKeysForDimension,
|
||
STATUS_OPTIONS,
|
||
todayIso,
|
||
untertypOptionen,
|
||
type EventGroupDimension,
|
||
type GroupDimension,
|
||
type Measure,
|
||
type ReportRow,
|
||
type UnitOption,
|
||
} from "@/lib/reports";
|
||
import type { HistoryEventType } from "@/lib/types";
|
||
|
||
const SPLIT_COLORS = ["bg-brand-500", "bg-info-text", "bg-purple-text", "bg-warning-text", "bg-success-text", "bg-danger-solid"];
|
||
const EVENT_TYPES = EREIGNIS_AUSWAHL;
|
||
|
||
/** Wie viele Namen eine aufgeklappte Zeile zeigt, bevor der Rest auf Klick kommt. */
|
||
const VORSCHAU_NAMEN = 12;
|
||
|
||
/**
|
||
* Die Exporte, die in ein anderes System geladen werden.
|
||
*
|
||
* Sie stehen zusammen und getrennt vom Datenexport darüber, weil sie etwas
|
||
* anderes sind: der Datenexport gibt Zahlen heraus, die jemand ansieht, diese
|
||
* hier legen im Zielsystem Datensätze an. Nebeneinander in einer Reihe
|
||
* gleichartiger Karten war das nicht zu sehen — und eine versehentlich
|
||
* eingeschränkte Auswahl wirkt sich hier ganz anders aus.
|
||
*/
|
||
const ZIELSYSTEME: readonly { name: string; pfad: string }[] = [
|
||
{ name: "Honestly — Mitarbeiterbefragung", pfad: "/api/export/honestly" },
|
||
{ name: "Cornerstone — Lernsystem", pfad: "/api/export/cornerstone" },
|
||
{ name: "LOLYO — Mitarbeiter-App", pfad: "/api/export/lolyo" },
|
||
];
|
||
|
||
type SavedReport = { id: string; name: string; config: Record<string, unknown> };
|
||
type OrgOption = { id: string; name: string };
|
||
|
||
type CommonProps = {
|
||
rows: ReportRow[];
|
||
total: number;
|
||
recordCount: number;
|
||
units: UnitOption[];
|
||
locations: OrgOption[];
|
||
savedReports: SavedReport[];
|
||
};
|
||
|
||
type SnapshotProps = CommonProps & {
|
||
mode: "snapshot";
|
||
measure: Measure;
|
||
group: GroupDimension;
|
||
split: GroupDimension | "";
|
||
asOf: string;
|
||
filters: { division: string; location: string; status: string };
|
||
criteria: Criteria;
|
||
};
|
||
|
||
type EventsProps = CommonProps & {
|
||
mode: "events";
|
||
eventGroup: EventGroupDimension;
|
||
eventSplit: EventGroupDimension | "";
|
||
eventType: string;
|
||
/** Beendigungsart bzw. Art der Langzeitabwesenheit; leer heisst „alle". */
|
||
eventSubtype: string;
|
||
eventFilters: { division: string; location: string; from: string; to: string };
|
||
};
|
||
|
||
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">
|
||
<DateField
|
||
label="Von"
|
||
dense
|
||
value={criteria.zeitraum[k.key]?.von ?? ""}
|
||
onChange={(v) => onChange({ [`${k.key}From`]: v || undefined })}
|
||
/>
|
||
<DateField
|
||
label="Bis"
|
||
dense
|
||
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 jeden Export dieser Seite — auch für den
|
||
Honestly- und den Cornerstone-Report. Was gerade eingestellt ist, steht auf der jeweiligen Karte.
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Was gerade in die Datei geht — Stichtag, Status, Einheit, Standort und jedes
|
||
* gesetzte Kriterium, dazu die Zeilenzahl.
|
||
*
|
||
* Auf den Karten stand nur der Status. Alles andere schränkt den Export
|
||
* genauso ein, steht aber eingeklappt weiter oben: eine Datei mit 40 statt 785
|
||
* Personen sah genauso aus wie eine vollständige. Für einen Bericht ist das
|
||
* ärgerlich, für ein Load-File ins Zielsystem ist es ein Datenstand, den dort
|
||
* niemand mehr hinterfragt.
|
||
*/
|
||
function AuswahlHinweis({ texte, anzahl }: { texte: string[]; anzahl: number }) {
|
||
return (
|
||
<div className="mb-2 rounded bg-surface px-2 py-1.5 text-xs text-ink-body">
|
||
<span className="font-semibold">Auswahl:</span> {texte.join(" · ")}
|
||
<span className="mt-0.5 block font-semibold">
|
||
{anzahl} {anzahl === 1 ? "Person" : "Personen"}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function formatValue(measure: Measure, value: number): string {
|
||
if (measure === "headcount") return String(Math.round(value));
|
||
if (measure === "fte") return value.toFixed(1);
|
||
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 { mode, rows, total, recordCount, units, locations, savedReports } = props;
|
||
const router = useRouter();
|
||
const pathname = usePathname();
|
||
const searchParams = useSearchParams();
|
||
const { showToast } = useToast();
|
||
const [expandedKey, setExpandedKey] = useState<string | null>(null);
|
||
// Welche aufgeklappte Zeile ihre Namen **vollständig** zeigt. Vorher stand
|
||
// dort „+794 weitere" als blosser Text: die Auskunft, dass es mehr gibt,
|
||
// ohne einen Weg dorthin. Wer die Liste brauchte, musste sie exportieren.
|
||
const [volleListeKey, setVolleListeKey] = useState<string | null>(null);
|
||
const [saveModalOpen, setSaveModalOpen] = useState(false);
|
||
const [newReportName, setNewReportName] = useState("");
|
||
const [savingReport, setSavingReport] = useState(false);
|
||
|
||
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()}`, { scroll: false });
|
||
}
|
||
|
||
function switchMode(next: "snapshot" | "events") {
|
||
router.push(`${pathname}?mode=${next}`, { scroll: false });
|
||
}
|
||
|
||
function toggleStatus(status: string) {
|
||
if (mode !== "snapshot") return;
|
||
const current = parseStatuses(props.filters.status);
|
||
const next = current.includes(status as (typeof current)[number]) ? current.filter((s) => s !== status) : [...current, status];
|
||
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);
|
||
sp.set("group", preset.group);
|
||
if (preset.split) sp.set("split", preset.split);
|
||
if (preset.eventType) sp.set("eventType", preset.eventType);
|
||
router.push(`${pathname}?${sp.toString()}`, { scroll: false });
|
||
}
|
||
|
||
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);
|
||
}
|
||
if (!sp.get("mode")) sp.set("mode", "snapshot");
|
||
router.push(`${pathname}?${sp.toString()}`, { scroll: false });
|
||
}
|
||
|
||
async function handleConfirmSaveReport() {
|
||
if (!newReportName.trim()) {
|
||
showToast("Bitte einen Namen angeben.", "error");
|
||
return;
|
||
}
|
||
// 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);
|
||
if (result.success) {
|
||
showToast("Bericht gespeichert.");
|
||
setSaveModalOpen(false);
|
||
setNewReportName("");
|
||
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");
|
||
}
|
||
}
|
||
|
||
// 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(searchParams.toString());
|
||
sp.set("format", format);
|
||
sp.set("mode", mode);
|
||
// 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 {
|
||
return exportHref(mode === "snapshot" ? "/api/export/employees" : "/api/export/events", format);
|
||
}
|
||
|
||
const isAverage = mode === "snapshot" && AVERAGE_MEASURES.includes(props.measure);
|
||
const maxValue = Math.max(1, ...rows.map((r) => r.value));
|
||
const rawSplitKeys = Array.from(new Set(rows.flatMap((r) => r.split?.map((s) => s.key) ?? [])));
|
||
const splitKeys = mode === "snapshot" && props.split ? sortKeysForDimension(rawSplitKeys, props.split) : rawSplitKeys;
|
||
const showWeekdayMultiCountNote = mode === "snapshot" && (props.group === "weekday" || props.split === "weekday");
|
||
const selectedStatuses = mode === "snapshot" ? parseStatuses(props.filters.status) : [];
|
||
const statusExportLabel = selectedStatuses.length === STATUS_OPTIONS.length ? "Alle" : selectedStatuses.join(", ");
|
||
// Einheit und Standort stehen in der Adresszeile als Kennung; auf der Karte
|
||
// hilft nur der Name.
|
||
const einheitName = mode === "snapshot" ? units.find((u) => u.id === props.filters.division)?.name : undefined;
|
||
const standortName = mode === "snapshot" ? locations.find((l) => l.id === props.filters.location)?.name : undefined;
|
||
const auswahlTexte =
|
||
mode === "snapshot"
|
||
? [
|
||
`Stichtag ${fmtDate(props.asOf || todayIso())}`,
|
||
`Status ${statusExportLabel}`,
|
||
...(einheitName ? [`Einheit ${einheitName}`] : []),
|
||
...(standortName ? [`Standort ${standortName}`] : []),
|
||
...beschreibeKriterien(props.criteria),
|
||
]
|
||
: [];
|
||
const currentYear = new Date().getFullYear();
|
||
const defaultEventFrom = `${currentYear}-01-01`;
|
||
const defaultEventTo = `${currentYear}-12-31`;
|
||
|
||
const heading =
|
||
mode === "snapshot"
|
||
? `${messgroesseLabel(props.measure, selectedStatuses)} nach ${GROUP_LABELS[props.group]}`
|
||
: `${props.eventType ? EVENT_TYPE_LABELS[props.eventType as HistoryEventType] : "Ereignisse"} nach ${EVENT_GROUP_LABELS[props.eventGroup]}`;
|
||
const totalDisplay = mode === "snapshot" ? formatValue(props.measure, total) : String(Math.round(total));
|
||
|
||
return (
|
||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-[320px_1fr]">
|
||
<div className="flex flex-col gap-4">
|
||
<div role="tablist" aria-label="Berichtsart" className="flex rounded border border-border bg-white p-1 text-sm font-semibold">
|
||
{(["snapshot", "events"] as const).map((m) => (
|
||
<button
|
||
key={m}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={mode === m}
|
||
onClick={() => switchMode(m)}
|
||
className={`flex-1 rounded px-3 py-1.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500 ${
|
||
mode === m ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"
|
||
}`}
|
||
>
|
||
{m === "snapshot" ? "Bestand" : "Ereignisse"}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{mode === "snapshot" ? (
|
||
<div className="rounded border border-border bg-white p-4">
|
||
<div className="flex flex-col gap-3">
|
||
<SelectField
|
||
label="Kennzahl"
|
||
dense
|
||
value={props.measure}
|
||
onChange={(v) => updateParams({ measure: v, split: AVERAGE_MEASURES.includes(v as Measure) ? undefined : props.split })}
|
||
options={(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => ({ value: m, label: MEASURE_LABELS[m] }))}
|
||
/>
|
||
<SelectField
|
||
label="Gruppieren nach"
|
||
dense
|
||
value={props.group}
|
||
onChange={(v) => updateParams({ group: v })}
|
||
options={(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => ({ value: g, label: GROUP_LABELS[g] }))}
|
||
/>
|
||
<SelectField
|
||
label="Aufteilen nach"
|
||
dense
|
||
value={props.split}
|
||
disabled={isAverage}
|
||
onChange={(v) => updateParams({ split: v || undefined })}
|
||
hint={isAverage ? "Bei Durchschnittswerten nicht verfügbar." : undefined}
|
||
options={[
|
||
{ value: "", label: "Keine Aufteilung" },
|
||
...(Object.keys(GROUP_LABELS) as GroupDimension[])
|
||
.filter((g) => g !== props.group)
|
||
.map((g) => ({ value: g, label: GROUP_LABELS[g] })),
|
||
]}
|
||
/>
|
||
<div>
|
||
<div className="flex items-end gap-2">
|
||
<DateField
|
||
label="Stichtag"
|
||
dense
|
||
className="flex-1"
|
||
value={props.asOf || todayIso()}
|
||
onChange={(v) => updateParams({ asOf: v })}
|
||
/>
|
||
{props.asOf && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => updateParams({ asOf: undefined })}
|
||
className="!px-1 whitespace-nowrap text-brand-700 hover:!bg-transparent hover:underline"
|
||
>
|
||
Heute
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<p className="mt-1 text-xs text-ink-muted">
|
||
Bestand wird rückgerechnet (Eintritt/Austritt/Langzeitabwesenheit); Bereich/Team zeigen die aktuelle
|
||
Zuordnung.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="rounded border border-border bg-white p-4">
|
||
<div className="flex flex-col gap-3">
|
||
<SelectField
|
||
label="Ereignistyp"
|
||
dense
|
||
value={props.eventType}
|
||
// Der Untertyp gehört zum Ereignistyp und fällt mit ihm weg.
|
||
// Bliebe er in der Adresse stehen, filterte eine Auswahl
|
||
// weiter, die auf dem Bildschirm nicht mehr zu sehen ist.
|
||
onChange={(v) => updateParams({ eventType: v || undefined, eventSubtype: undefined })}
|
||
options={[
|
||
{ value: "", label: "Alle Ereignistypen" },
|
||
...EVENT_TYPES.map((t) => ({ value: t, label: EVENT_TYPE_LABELS[t] })),
|
||
]}
|
||
/>
|
||
{/* Nur dort, wo es einen gibt: eine Versetzung hat keine
|
||
Beendigungsart, und ein leeres zweites Feld wäre eine Frage
|
||
ohne Antwortmöglichkeit. */}
|
||
{(() => {
|
||
const typ = props.eventType ? (props.eventType as HistoryEventType) : null;
|
||
const untertyp = typ ? EREIGNIS_UNTERTYP[typ] : undefined;
|
||
if (!untertyp) return null;
|
||
return (
|
||
<SelectField
|
||
label={untertyp.label}
|
||
dense
|
||
value={props.eventSubtype}
|
||
onChange={(v) => updateParams({ eventSubtype: v || undefined })}
|
||
options={[
|
||
{ value: "", label: untertyp.alle },
|
||
...untertypOptionen(typ).map((o) => ({ value: o, label: o })),
|
||
]}
|
||
/>
|
||
);
|
||
})()}
|
||
<SelectField
|
||
label="Gruppieren nach"
|
||
dense
|
||
value={props.eventGroup}
|
||
onChange={(v) => updateParams({ group: v })}
|
||
options={(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[]).map((g) => ({ value: g, label: EVENT_GROUP_LABELS[g] }))}
|
||
/>
|
||
<SelectField
|
||
label="Aufteilen nach"
|
||
dense
|
||
value={props.eventSplit}
|
||
onChange={(v) => updateParams({ split: v || undefined })}
|
||
options={[
|
||
{ value: "", label: "Keine Aufteilung" },
|
||
...(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[])
|
||
.filter((g) => g !== props.eventGroup)
|
||
.map((g) => ({ value: g, label: EVENT_GROUP_LABELS[g] })),
|
||
]}
|
||
/>
|
||
<fieldset>
|
||
<legend className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Zeitraum</legend>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<DateField
|
||
label="Von"
|
||
dense
|
||
value={props.eventFilters.from === EVENT_DATE_OPEN ? "" : props.eventFilters.from || defaultEventFrom}
|
||
disabled={props.eventFilters.from === EVENT_DATE_OPEN}
|
||
onChange={(v) => updateParams({ from: v })}
|
||
/>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => updateParams({ from: props.eventFilters.from === EVENT_DATE_OPEN ? defaultEventFrom : EVENT_DATE_OPEN })}
|
||
className="mt-1 !px-0 text-brand-700 hover:!bg-transparent hover:underline"
|
||
>
|
||
{props.eventFilters.from === EVENT_DATE_OPEN ? "Startdatum setzen" : "Ab Anfang (offen)"}
|
||
</Button>
|
||
</div>
|
||
<div>
|
||
<DateField
|
||
label="Bis"
|
||
dense
|
||
value={props.eventFilters.to === EVENT_DATE_OPEN ? "" : props.eventFilters.to || defaultEventTo}
|
||
disabled={props.eventFilters.to === EVENT_DATE_OPEN}
|
||
onChange={(v) => updateParams({ to: v })}
|
||
/>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => updateParams({ to: props.eventFilters.to === EVENT_DATE_OPEN ? defaultEventTo : EVENT_DATE_OPEN })}
|
||
className="mt-1 !px-0 text-brand-700 hover:!bg-transparent hover:underline"
|
||
>
|
||
{props.eventFilters.to === EVENT_DATE_OPEN ? "Enddatum setzen" : "Bis heute (offen)"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
</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
|
||
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 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>
|
||
<select
|
||
aria-label="Nach Standort filtern"
|
||
value={mode === "snapshot" ? props.filters.location : props.eventFilters.location}
|
||
onChange={(e) => updateParams({ location: e.target.value })}
|
||
className={CONTROL_CLASS}
|
||
>
|
||
<option value="">Alle Standorte</option>
|
||
{locations.map((l) => (
|
||
<option key={l.id} value={l.id}>
|
||
{l.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
{mode === "snapshot" && (
|
||
<>
|
||
<fieldset className="rounded border border-border px-3 py-2">
|
||
<legend className="mb-1.5 text-xs font-semibold text-ink-muted">Status (zum Stichtag)</legend>
|
||
<div className="flex flex-wrap gap-x-4 gap-y-1.5">
|
||
{STATUS_OPTIONS.map((s) => (
|
||
<label key={s} className="flex items-center gap-1.5 text-sm text-ink-body">
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedStatuses.includes(s)}
|
||
onChange={() => toggleStatus(s)}
|
||
className="h-4 w-4 rounded border-border accent-brand-500"
|
||
/>
|
||
{s}
|
||
</label>
|
||
))}
|
||
</div>
|
||
</fieldset>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{mode === "snapshot" && (
|
||
<KriterienBlock criteria={props.criteria} onChange={updateParams} onReset={resetKriterien} />
|
||
)}
|
||
</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">
|
||
{(mode === "snapshot" ? REPORT_PRESETS : EVENT_REPORT_PRESETS).map((preset) => (
|
||
<Button key={preset.name} variant="secondary" size="sm" onClick={() => applyPreset(preset)} className="!rounded-full !px-2.5 !py-1">
|
||
{preset.name}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded border border-border bg-white p-4">
|
||
<h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-ink-muted">Vollständiger Datenexport</h3>
|
||
{mode === "snapshot" ? (
|
||
<>
|
||
<p className="mb-1 text-xs text-ink-muted">Alle Mitarbeiterdaten, nicht nur die Kennzahl.</p>
|
||
<AuswahlHinweis texte={auswahlTexte} anzahl={recordCount} />
|
||
</>
|
||
) : (
|
||
<p className="mb-2 text-xs text-ink-muted">Alle Ereignisse im gewählten Zeitraum als Rohdaten (eine Zeile pro Ereignis).</p>
|
||
)}
|
||
<div className="flex gap-2">
|
||
<a href={fullExportHref("csv")} className={LINK_BUTTON_CLASS}>
|
||
<FileText className="h-4 w-4" />
|
||
CSV
|
||
</a>
|
||
<a href={fullExportHref("xlsx")} className={LINK_BUTTON_CLASS}>
|
||
<FileSpreadsheet className="h-4 w-4" />
|
||
Excel
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Nur im Bestand: ein Zielsystem führt Personen, keine Ereignisse.
|
||
Dieselben Filter wie der vollständige Export darüber. */}
|
||
{mode === "snapshot" && (
|
||
<div className="rounded border border-border bg-white p-4">
|
||
<h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-ink-muted">Exporte für Zielsysteme</h3>
|
||
<p className="mb-1 text-xs text-ink-muted">
|
||
Load-Dateien für Fremdsysteme, jede in deren eigenem Format. Für alle gilt dieselbe Auswahl.
|
||
</p>
|
||
<AuswahlHinweis texte={auswahlTexte} anzahl={recordCount} />
|
||
<div className="flex flex-col divide-y divide-border-subtle">
|
||
{ZIELSYSTEME.map((z) => (
|
||
<div key={z.pfad} className="py-2 first:pt-0 last:pb-0">
|
||
<p className="mb-1.5 text-sm font-semibold text-ink">{z.name}</p>
|
||
<div className="flex gap-2">
|
||
<a href={exportHref(z.pfad, "csv")} className={LINK_BUTTON_CLASS}>
|
||
<FileText className="h-4 w-4" />
|
||
CSV
|
||
</a>
|
||
<a href={exportHref(z.pfad, "xlsx")} className={LINK_BUTTON_CLASS}>
|
||
<FileSpreadsheet className="h-4 w-4" />
|
||
Excel
|
||
</a>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</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
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => applySavedReport(r.config)}
|
||
className="!px-0 !justify-start text-left hover:!bg-transparent hover:text-brand-700 hover:underline"
|
||
>
|
||
{r.name}
|
||
</Button>
|
||
<Button
|
||
variant="icon"
|
||
onClick={() => handleDeleteReport(r.id)}
|
||
aria-label={`Bericht ${r.name} löschen`}
|
||
className="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">{heading}</h2>
|
||
<p className="text-xs text-ink-muted">{recordCount} {mode === "snapshot" ? "Datensätze" : "Ereignisse"}</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<a href={reportExportHref("csv")} className={LINK_BUTTON_CLASS}>
|
||
<FileText className="h-4 w-4" />
|
||
CSV
|
||
</a>
|
||
<a href={reportExportHref("xlsx")} className={LINK_BUTTON_CLASS}>
|
||
<FileSpreadsheet className="h-4 w-4" />
|
||
Excel
|
||
</a>
|
||
<Button variant="secondary" size="sm" onClick={() => setSaveModalOpen(true)}>
|
||
<Save className="h-4 w-4" />
|
||
Bericht speichern
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="mb-4 text-2xl font-extrabold text-ink">{totalDisplay}</p>
|
||
{showWeekdayMultiCountNote && (
|
||
<p className="mb-3 text-xs text-ink-muted">
|
||
Mitarbeitende mit mehreren Arbeitstagen zählen bei „Wochentag“ an jedem ihrer Arbeitstage mehrfach – Summe und Anteile ergeben daher mehr als den Gesamt-Headcount bzw. 100%.
|
||
</p>
|
||
)}
|
||
|
||
{((mode === "snapshot" && props.split) || (mode === "events" && props.eventSplit)) && (
|
||
<div className="mb-3 flex flex-wrap gap-3">
|
||
{splitKeys.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);
|
||
// Zuklappen setzt auch die volle Liste zurück: sonst
|
||
// stünde sie beim nächsten Aufklappen unerwartet offen.
|
||
setVolleListeKey(null);
|
||
}}
|
||
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">
|
||
{mode === "snapshot" ? formatValue(props.measure, row.value) : Math.round(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 &&
|
||
(() => {
|
||
const alle = volleListeKey === row.key;
|
||
const sichtbar = alle ? row.people : row.people.slice(0, VORSCHAU_NAMEN);
|
||
const rest = row.people.length - VORSCHAU_NAMEN;
|
||
return (
|
||
<div className="mt-2 rounded border border-border bg-surface p-3">
|
||
{/* Bei achthundert Namen scrollt die Liste in sich,
|
||
statt die Auswertung darüber aus dem Bild zu
|
||
schieben. */}
|
||
<ul className={`flex flex-col divide-y divide-border ${alle ? "max-h-[28rem] overflow-y-auto" : ""}`}>
|
||
{sichtbar.map((p, i) => (
|
||
<li key={`${p.id}-${i}`} className="flex items-center justify-between gap-3 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-right text-xs text-ink-muted">
|
||
{p.title} · {p.team} · {fmtDate(p.entry_date)}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
{rest > 0 && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setVolleListeKey(alle ? null : row.key)}
|
||
className="mt-2 rounded text-xs font-semibold text-brand-700 hover:underline
|
||
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
||
>
|
||
{alle ? `Nur die ersten ${VORSCHAU_NAMEN} zeigen` : `+${rest} weitere anzeigen`}
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
})()}
|
||
</div>
|
||
);
|
||
})}
|
||
{rows.length === 0 && <p className="text-sm text-ink-muted">Keine Daten für diese Auswahl.</p>}
|
||
</div>
|
||
</div>
|
||
|
||
<Modal
|
||
open={saveModalOpen}
|
||
onClose={() => setSaveModalOpen(false)}
|
||
title="Bericht speichern"
|
||
footer={
|
||
<>
|
||
<Button variant="ghost" onClick={() => setSaveModalOpen(false)}>
|
||
Abbrechen
|
||
</Button>
|
||
<Button onClick={handleConfirmSaveReport} pending={savingReport}>
|
||
Speichern
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<TextField
|
||
label="Name für diesen Bericht"
|
||
required
|
||
value={newReportName}
|
||
onChange={setNewReportName}
|
||
onKeyDown={(e) => e.key === "Enter" && handleConfirmSaveReport()}
|
||
autoFocus
|
||
/>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|