Maximilian Stubhan
410acfe01f
Reworked against the load spec and the 27.09. test file. The values I had guessed were the German display names, which is the first entry on the list of errors from earlier loads: Cornerstone answers "ungültiger Wert" and rejects the whole row, followed by "Alle abhängigen Felder müssen gültig sein" as a follow-on. Status Aktiv/Inaktiv -> Active/Inactive Employment Status Arbeitend/... -> Working/On Leave/Terminated User Type Mitarbeiter -> Employee Time Zone CET -> empty The time zone is the second entry on that list: only a portal time zone id is valid, an abbreviation gives "Zeitzonencode nicht eindeutig". Empty means the portal or the OU decides. Division ID is the GUID from the test file, not a name. Termination fields and Leave Reason are filled only when the employment status carries them -- a reason without a termination is an invalid state for the load, not extra information. Four fields now stay empty on purpose, because filling them would mean inventing an identifier that belongs to the target system: Location ID (locations has id/name/country and no Cornerstone id), Position ID (our S-0001 is not a Cornerstone position), Months of Service (Cornerstone derives it) and Rehired Employee (the value for "yes" is unconfirmed, and an unconfirmed value costs the whole row). Retention Rules and Organisationsstufe stay empty because the load ignores them. Header and row now match the test file byte for byte, except User ID (no TEST- prefix outside a test load), Required Training Approvals and Location ID. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
853 lines
36 KiB
TypeScript
853 lines
36 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,
|
||
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 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);
|
||
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(", ");
|
||
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){props.asOf ? ` zum Stichtag ${fmtDate(props.asOf)}` : ""}.</p>
|
||
<p className="mb-2 rounded bg-surface px-2 py-1.5 text-xs font-semibold text-ink-body">Status im Export: {statusExportLabel}</p>
|
||
</>
|
||
) : (
|
||
<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>
|
||
<p className="mb-2 rounded bg-surface px-2 py-1.5 text-xs font-semibold text-ink-body">Status im Export: {statusExportLabel}</p>
|
||
<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>
|
||
<p className="mb-2 rounded bg-surface px-2 py-1.5 text-xs font-semibold text-ink-body">Status im Export: {statusExportLabel}</p>
|
||
<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>
|
||
);
|
||
}
|