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

Reports/Export builder (CSV/XLSX), plus a security fix pass

Browse Source 
Adds the Berichte export pipeline (/api/export/{report,events,employees})
with shared CSV/XLSX writers in lib/export.ts and lib/reports-data.ts.

Security pass alongside it: sanitize .or() search terms against PostgREST
filter injection, sanitize spreadsheet cells against CSV/Excel formula
injection, stop leaking raw DB error messages to clients, harden the
service-role client with server-only, add baseline security headers, and
bump the vulnerable nested postcss via an override.
This commit is contained in:
Maximilian Stubhan
2026-07-15 20:34:27 +02:00
parent 901c5c426e
commit f96773da0f
21 changed files with 2323 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
components/reports/ReportsPageClient.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Download, Save, Trash2 } from "lucide-react";
import { FileSpreadsheet, FileText, Save, Trash2 } from "lucide-react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
@@ -10,34 +10,59 @@ import { useToast } from "@/components/ui/Toast";
import { fmtDate } from "@/lib/format";
import {
AVERAGE_MEASURES,
DATE_SCOPED_MEASURES,
EVENT_DATE_OPEN,
EVENT_GROUP_LABELS,
EVENT_REPORT_PRESETS,
EVENT_TYPE_LABELS,
GROUP_LABELS,
MEASURE_LABELS,
parseStatuses,
REPORT_PRESETS,
STATUS_OPTIONS,
todayIso,
type EventGroupDimension,
type GroupDimension,
type Measure,
type ReportRow,
} from "@/lib/reports";
import type { HistoryEventType } from "@/lib/supabase/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 = Object.keys(EVENT_TYPE_LABELS) as HistoryEventType[];
type SavedReport = { id: string; name: string; config: Record<string, unknown> };
type OrgOption = { id: string; name: string };
type ReportsPageClientProps = {
measure: Measure;
group: GroupDimension;
split: GroupDimension | "";
filters: { division: string; location: string; status: string; employment: string; from: string; to: string };
type CommonProps = {
rows: ReportRow[];
total: number;
recordCount: number;
divisions: { id: string; name: string }[];
locations: { id: string; name: string }[];
divisions: OrgOption[];
locations: OrgOption[];
savedReports: SavedReport[];
};
type SnapshotProps = CommonProps & {
mode: "snapshot";
measure: Measure;
group: GroupDimension;
split: GroupDimension | "";
asOf: string;
filters: { division: string; location: string; status: string; employment: string };
};
type EventsProps = CommonProps & {
mode: "events";
eventGroup: EventGroupDimension;
eventSplit: EventGroupDimension | "";
eventType: string;
eventFilters: { division: string; location: string; from: string; to: string };
};
type ReportsPageClientProps = SnapshotProps | EventsProps;
function formatValue(measure: Measure, value: number): string {
if (["headcount", "hires", "exits"].includes(measure)) return String(Math.round(value));
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`;
@@ -45,7 +70,7 @@ function formatValue(measure: Measure, value: number): string {
}
export function ReportsPageClient(props: ReportsPageClientProps) {
const { measure, group, split, filters, rows, total, recordCount, divisions, locations, savedReports } = props;
const { mode, rows, total, recordCount, divisions, locations, savedReports } = props;
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
@@ -64,8 +89,24 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
router.push(`${pathname}?${sp.toString()}`);
}
function applyPreset(preset: (typeof REPORT_PRESETS)[number]) {
router.push(`${pathname}?measure=${preset.measure}&group=${preset.group}${preset.split ? `&split=${preset.split}` : ""}`);
function switchMode(next: "snapshot" | "events") {
router.push(`${pathname}?mode=${next}`);
}
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 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()}`);
}
function applySavedReport(config: Record<string, unknown>) {
@@ -73,6 +114,7 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
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()}`);
}
@@ -81,8 +123,12 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
showToast("Bitte einen Namen angeben.", "error");
return;
}
const config =
mode === "snapshot"
? { mode, measure: props.measure, group: props.group, split: props.split, asOf: props.asOf, ...props.filters }
: { mode, group: props.eventGroup, split: props.eventSplit, eventType: props.eventType, ...props.eventFilters };
setSavingReport(true);
const result = await saveReport({ name: newReportName.trim(), config: { measure, group, split, ...filters } });
const result = await saveReport({ name: newReportName.trim(), config });
setSavingReport(false);
if (result.success) {
showToast("Bericht gespeichert.");
@@ -104,80 +150,229 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
}
}
function handleExportCsv() {
const header = [GROUP_LABELS[group], MEASURE_LABELS[measure], "Anzahl", "Anteil (%)"];
const lines = [header.join(";")];
for (const row of rows) {
const share = total > 0 ? ((row.value / total) * 100).toFixed(1) : "0";
lines.push([row.key, formatValue(measure, row.value), String(row.count), share].join(";"));
function reportExportHref(format: "csv" | "xlsx"): string {
const sp = new URLSearchParams();
sp.set("format", format);
sp.set("mode", mode);
if (mode === "snapshot") {
sp.set("measure", props.measure);
sp.set("group", props.group);
if (props.split) sp.set("split", props.split);
if (props.asOf) sp.set("asOf", props.asOf);
for (const [k, v] of Object.entries(props.filters)) if (v) sp.set(k, v);
} else {
sp.set("group", props.eventGroup);
if (props.eventSplit) sp.set("split", props.eventSplit);
if (props.eventType) sp.set("eventType", props.eventType);
for (const [k, v] of Object.entries(props.eventFilters)) if (v) sp.set(k, v);
}
const blob = new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `bericht-${measure}-${group}.csv`;
a.click();
URL.revokeObjectURL(url);
return `/api/export/report?${sp.toString()}`;
}
const isAverage = AVERAGE_MEASURES.includes(measure);
const isDateScoped = DATE_SCOPED_MEASURES.includes(measure);
function fullExportHref(format: "csv" | "xlsx"): string {
if (mode === "snapshot") {
const sp = new URLSearchParams();
sp.set("format", format);
if (props.asOf) sp.set("asOf", props.asOf);
if (props.filters.division) sp.set("division", props.filters.division);
if (props.filters.location) sp.set("location", props.filters.location);
if (props.filters.status) sp.set("status", props.filters.status);
if (props.filters.employment) sp.set("employment", props.filters.employment);
return `/api/export/employees?${sp.toString()}`;
}
const sp = new URLSearchParams();
sp.set("format", format);
if (props.eventType) sp.set("eventType", props.eventType);
for (const [k, v] of Object.entries(props.eventFilters)) if (v) sp.set(k, v);
return `/api/export/events?${sp.toString()}`;
}
const isAverage = mode === "snapshot" && AVERAGE_MEASURES.includes(props.measure);
const maxValue = Math.max(1, ...rows.map((r) => r.value));
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 className="rounded border border-border bg-white p-4">
<div className="flex flex-col gap-3">
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Kennzahl</label>
<select
value={measure}
onChange={(e) => updateParams({ measure: e.target.value, split: AVERAGE_MEASURES.includes(e.target.value as Measure) ? undefined : split })}
className="w-full rounded border border-border px-3 py-2 text-sm"
>
{(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => (
<option key={m} value={m}>
{MEASURE_LABELS[m]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
<select value={group} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
{(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => (
<option key={g} value={g}>
{GROUP_LABELS[g]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
<select
value={split}
disabled={isAverage}
onChange={(e) => updateParams({ split: e.target.value || undefined })}
className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
>
<option value="">Keine Aufteilung</option>
{(Object.keys(GROUP_LABELS) as GroupDimension[])
.filter((g) => g !== group)
.map((g) => (
<div className="flex rounded border border-border bg-white p-1 text-sm font-semibold">
<button
type="button"
onClick={() => switchMode("snapshot")}
className={`flex-1 rounded px-3 py-1.5 ${mode === "snapshot" ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
>
Bestand
</button>
<button
type="button"
onClick={() => switchMode("events")}
className={`flex-1 rounded px-3 py-1.5 ${mode === "events" ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
>
Ereignisse
</button>
</div>
{mode === "snapshot" ? (
<div className="rounded border border-border bg-white p-4">
<div className="flex flex-col gap-3">
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Kennzahl</label>
<select
value={props.measure}
onChange={(e) => updateParams({ measure: e.target.value, split: AVERAGE_MEASURES.includes(e.target.value as Measure) ? undefined : props.split })}
className="w-full rounded border border-border px-3 py-2 text-sm"
>
{(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => (
<option key={m} value={m}>
{MEASURE_LABELS[m]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
<select value={props.group} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
{(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => (
<option key={g} value={g}>
{GROUP_LABELS[g]}
</option>
))}
</select>
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
<select
value={props.split}
disabled={isAverage}
onChange={(e) => updateParams({ split: e.target.value || undefined })}
className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
>
<option value="">Keine Aufteilung</option>
{(Object.keys(GROUP_LABELS) as GroupDimension[])
.filter((g) => g !== props.group)
.map((g) => (
<option key={g} value={g}>
{GROUP_LABELS[g]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Stichtag</label>
<div className="flex items-center gap-2">
<input
type="date"
value={props.asOf || todayIso()}
onChange={(e) => updateParams({ asOf: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
/>
{props.asOf && (
<button type="button" onClick={() => updateParams({ asOf: undefined })} className="whitespace-nowrap text-xs font-semibold text-brand-700 hover:underline">
Heute
</button>
)}
</div>
<p className="mt-1 text-xs text-ink-muted">
Bestand wird rückgerechnet (Eintritt/Austritt/Karenz); Bereich/Team zeigen die aktuelle Zuordnung.
</p>
</div>
</div>
</div>
</div>
) : (
<div className="rounded border border-border bg-white p-4">
<div className="flex flex-col gap-3">
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Ereignistyp</label>
<select value={props.eventType} onChange={(e) => updateParams({ eventType: e.target.value || undefined })} className="w-full rounded border border-border px-3 py-2 text-sm">
<option value="">Alle Ereignistypen</option>
{EVENT_TYPES.map((t) => (
<option key={t} value={t}>
{EVENT_TYPE_LABELS[t]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
<select value={props.eventGroup} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
{(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[]).map((g) => (
<option key={g} value={g}>
{EVENT_GROUP_LABELS[g]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
<select value={props.eventSplit} onChange={(e) => updateParams({ split: e.target.value || undefined })} className="w-full rounded border border-border px-3 py-2 text-sm">
<option value="">Keine Aufteilung</option>
{(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[])
.filter((g) => g !== props.eventGroup)
.map((g) => (
<option key={g} value={g}>
{EVENT_GROUP_LABELS[g]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Zeitraum</label>
<div className="grid grid-cols-2 gap-2">
<div>
<input
type="date"
value={props.eventFilters.from === EVENT_DATE_OPEN ? "" : props.eventFilters.from || defaultEventFrom}
disabled={props.eventFilters.from === EVENT_DATE_OPEN}
onChange={(e) => updateParams({ from: e.target.value })}
className="w-full rounded border border-border px-2 py-2 text-xs disabled:bg-surface"
/>
<button
type="button"
onClick={() => updateParams({ from: props.eventFilters.from === EVENT_DATE_OPEN ? defaultEventFrom : EVENT_DATE_OPEN })}
className="mt-1 text-xs font-semibold text-brand-700 hover:underline"
>
{props.eventFilters.from === EVENT_DATE_OPEN ? "Startdatum setzen" : "Ab Anfang (offen)"}
</button>
</div>
<div>
<input
type="date"
value={props.eventFilters.to === EVENT_DATE_OPEN ? "" : props.eventFilters.to || defaultEventTo}
disabled={props.eventFilters.to === EVENT_DATE_OPEN}
onChange={(e) => updateParams({ to: e.target.value })}
className="w-full rounded border border-border px-2 py-2 text-xs disabled:bg-surface"
/>
<button
type="button"
onClick={() => updateParams({ to: props.eventFilters.to === EVENT_DATE_OPEN ? defaultEventTo : EVENT_DATE_OPEN })}
className="mt-1 text-xs font-semibold text-brand-700 hover:underline"
>
{props.eventFilters.to === EVENT_DATE_OPEN ? "Enddatum setzen" : "Bis heute (offen)"}
</button>
</div>
</div>
</div>
</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 value={filters.division} onChange={(e) => updateParams({ division: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
<select
value={mode === "snapshot" ? props.filters.division : props.eventFilters.division}
onChange={(e) => updateParams({ division: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
>
<option value="">Alle Bereiche</option>
{divisions.map((d) => (
<option key={d.id} value={d.id}>
@@ -185,7 +380,11 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
</option>
))}
</select>
<select value={filters.location} onChange={(e) => updateParams({ location: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
<select
value={mode === "snapshot" ? props.filters.location : props.eventFilters.location}
onChange={(e) => updateParams({ location: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
>
<option value="">Alle Standorte</option>
{locations.map((l) => (
<option key={l.id} value={l.id}>
@@ -193,37 +392,34 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
</option>
))}
</select>
<select value={filters.status} onChange={(e) => updateParams({ status: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
<option value="">Alle Status</option>
<option value="Aktiv">Aktiv</option>
<option value="Karenz">Karenz</option>
<option value="Geplant">Geplant</option>
<option value="Ausgetreten">Ausgetreten</option>
</select>
<select
value={filters.employment}
onChange={(e) => updateParams({ employment: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
>
<option value="">Alle Beschäftigungsarten</option>
<option value="Vollzeit">Vollzeit</option>
<option value="Teilzeit">Teilzeit</option>
</select>
{isDateScoped && (
<div className="grid grid-cols-2 gap-2">
<input
type="date"
value={filters.from}
onChange={(e) => updateParams({ from: e.target.value })}
className="w-full rounded border border-border px-2 py-2 text-xs"
/>
<input
type="date"
value={filters.to}
onChange={(e) => updateParams({ to: e.target.value })}
className="w-full rounded border border-border px-2 py-2 text-xs"
/>
</div>
{mode === "snapshot" && (
<>
<div className="rounded border border-border px-3 py-2">
<p className="mb-1.5 text-xs font-semibold text-ink-muted">Status (zum Stichtag)</p>
<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>
</div>
<select
value={props.filters.employment}
onChange={(e) => updateParams({ employment: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
>
<option value="">Alle Beschäftigungsarten</option>
<option value="Vollzeit">Vollzeit</option>
<option value="Teilzeit">Teilzeit</option>
</select>
</>
)}
</div>
</div>
@@ -231,7 +427,7 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<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">
{REPORT_PRESETS.map((preset) => (
{(mode === "snapshot" ? REPORT_PRESETS : EVENT_REPORT_PRESETS).map((preset) => (
<button
key={preset.name}
type="button"
@@ -244,6 +440,28 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
</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="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<FileText className="h-4 w-4" />
CSV
</a>
<a href={fullExportHref("xlsx")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<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>
@@ -266,20 +484,18 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<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">
{MEASURE_LABELS[measure]} nach {GROUP_LABELS[group]}
</h2>
<p className="text-xs text-ink-muted">{recordCount} Datensätze</p>
<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">
<button
type="button"
onClick={handleExportCsv}
className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
>
<Download className="h-4 w-4" />
CSV exportieren
</button>
<a href={reportExportHref("csv")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<FileText className="h-4 w-4" />
CSV
</a>
<a href={reportExportHref("xlsx")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<FileSpreadsheet className="h-4 w-4" />
Excel
</a>
<button
type="button"
onClick={() => setSaveModalOpen(true)}
@@ -291,9 +507,9 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
</div>
</div>
<p className="mb-4 text-2xl font-extrabold text-ink">{formatValue(measure, total)}</p>
<p className="mb-4 text-2xl font-extrabold text-ink">{totalDisplay}</p>
{split && (
{((mode === "snapshot" && props.split) || (mode === "events" && props.eventSplit)) && (
<div className="mb-3 flex flex-wrap gap-3">
{Array.from(new Set(rows.flatMap((r) => r.split?.map((s) => s.key) ?? []))).map((key, i) => (
<span key={key} className="flex items-center gap-1.5 text-xs text-ink-body">
@@ -310,25 +526,18 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
const isExpanded = expandedKey === row.key;
return (
<div key={row.key}>
<button
type="button"
onClick={() => setExpandedKey(isExpanded ? null : row.key)}
className="w-full text-left"
>
<button type="button" onClick={() => setExpandedKey(isExpanded ? null : row.key)} 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">
{formatValue(measure, row.value)} <span className="text-xs text-ink-muted">({share.toFixed(1)}%)</span>
{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 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}%` }} />
@@ -338,8 +547,8 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
{isExpanded && (
<div className="mt-2 rounded border border-border bg-surface p-3">
<ul className="flex flex-col divide-y divide-border">
{row.people.slice(0, 12).map((p) => (
<li key={p.id} className="flex items-center justify-between py-1.5 text-sm">
{row.people.slice(0, 12).map((p, i) => (
<li key={`${p.id}-${i}`} className="flex items-center justify-between py-1.5 text-sm">
<Link href={`/employees/${p.id}`} className="font-semibold text-ink hover:text-brand-700 hover:underline">
{p.name}
</Link>