Andrei Laas
af2ad53ef9
Das Einschraenken der Downstream-Exporte gab es schon: exportHref reicht die ganze Adresszeile weiter, und ladeExportMitarbeiter wendet dieselben Kriterien an wie der Bericht daneben -- Eintritt ab, Austritt bis, Wochenstunden, Beschaeftigungsart und die uebrigen. Nur sah man es den Karten nicht an. Dort stand ausschliesslich der Status; alles andere steckt eingeklappt in "Weitere Kriterien" weiter oben. Damit sah eine Datei mit 40 Personen genauso aus wie eine mit 785. Fuer einen Bericht ist das aergerlich, fuer ein Load-File in ein Zielsystem ist es ein Datenstand, den dort niemand mehr hinterfragt: es fehlen Personen, und es sieht nicht nach einem Filter aus. Die drei Karten im Bestandsmodus zeigen jetzt Stichtag, Status, Einheit, Standort, jedes gesetzte Kriterium und die Zeilenzahl. beschreibeKriterien steht neben anzahlKriterien in derselben Datei und liest dieselben Listen -- ein neues Kriterium erscheint damit von selbst auch auf den Karten. Ein Test haelt beide gegeneinander, damit die Zahl am Aufklapper und der Text auf der Karte nicht auseinanderlaufen.
890 lines
38 KiB
TypeScript
890 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, 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,
|
||
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;
|
||
|
||
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">
|
||
<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 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"
|
||
? `${MEASURE_LABELS[props.measure]} 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">
|
||
<TextField
|
||
label="Stichtag"
|
||
dense
|
||
className="flex-1"
|
||
type="date"
|
||
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>
|
||
<TextField
|
||
label="Von"
|
||
dense
|
||
type="date"
|
||
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>
|
||
<TextField
|
||
label="Bis"
|
||
dense
|
||
type="date"
|
||
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: eine Befragung richtet sich an Personen, nicht an
|
||
Ereignisse. Dieselben Filter wie der vollständige Export darüber
|
||
— was dort steht, steht auch hier. */}
|
||
{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">Honestly-Report</h3>
|
||
<AuswahlHinweis texte={auswahlTexte} anzahl={recordCount} />
|
||
<div className="flex gap-2">
|
||
<a href={exportHref("/api/export/honestly", "csv")} className={LINK_BUTTON_CLASS}>
|
||
<FileText className="h-4 w-4" />
|
||
CSV
|
||
</a>
|
||
<a href={exportHref("/api/export/honestly", "xlsx")} className={LINK_BUTTON_CLASS}>
|
||
<FileSpreadsheet className="h-4 w-4" />
|
||
Excel
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{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">Cornerstone Report</h3>
|
||
<p className="mb-1 text-xs text-ink-muted">
|
||
Load-File für Cornerstone: 57 Spalten in der Reihenfolge der Vorlage, kommagetrennt, Datum
|
||
TT.MM.JJJJ, Systemwerte statt Anzeigenamen (Active, Working, Employee). Ohne Location ID und
|
||
Position ID — dafür fehlen die Kennungen des Zielsystems.
|
||
</p>
|
||
<AuswahlHinweis texte={auswahlTexte} anzahl={recordCount} />
|
||
<div className="flex gap-2">
|
||
<a href={exportHref("/api/export/cornerstone", "csv")} className={LINK_BUTTON_CLASS}>
|
||
<FileText className="h-4 w-4" />
|
||
CSV
|
||
</a>
|
||
<a href={exportHref("/api/export/cornerstone", "xlsx")} className={LINK_BUTTON_CLASS}>
|
||
<FileSpreadsheet className="h-4 w-4" />
|
||
Excel
|
||
</a>
|
||
</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>
|
||
);
|
||
}
|