Maximilian Stubhan
478364e2d0
The 57 columns of the Cornerstone user import, in the given order and spelling, offered as CSV and Excel under the Honestly report. Same people and same filters as the full export. Two things about the file itself, both of which would have failed quietly. Cornerstone reads comma-separated, while toCsv writes the semicolons and the BOM that German Excel wants -- the BOM would have hidden inside the name of the first column, so "User ID" would have matched nothing in the mapping. toCsv now takes the form as an argument and keeps its old defaults; the Cornerstone form lives next to the columns so a test can hold both. Quoting follows the delimiter now, otherwise a comma in an address would split the row. Dates go out day-first, matching the import setting. An ISO date is read as a different, equally valid date and nobody notices. Gender maps to Cornerstone's own values; anything unexpected becomes "not specified" rather than empty, because an invalid value makes Cornerstone reject the whole row, not just the field. Status and Employment Status come from separate rules: somebody on Karenz has a working account and is not working, and filling both from one value gets one of the two wrong. Four fields carry visible placeholders because the leading systems do not supply their identifiers yet: Division ID, Doxis, Interflex, LGVplus. Home Phone and Personal Email stay empty on purpose -- what leaves the house is the business data. Not verified against a running Cornerstone import, and not seen in a browser; there is no database reachable here. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
852 lines
36 KiB
TypeScript
852 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">
|
||
Die 57 Spalten des Cornerstone-Einlesens, Datum tagzuerst. Vier Felder tragen noch Platzhalter
|
||
(Division ID, Doxis, Interflex, LGVplus) und sind vor einem echten Lauf zu ersetzen.
|
||
</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>
|
||
);
|
||
}
|