Phase 6/7: Reports builder and Audit log - all 7 routes now complete
Reports (§4.8): - lib/reports.ts: generic server-side aggregation engine over 9 measures (Headcount, FTE, Eintritte, Austritte, Ø Bruttogehalt, Teilzeitquote, Ø Alter, Ø Zugehoerigkeit, Frauenanteil) x 10 group-by dimensions, with an optional second-dimension split (disabled for average-type measures) and per-row drill-down data. - app/(app)/reports/page.tsx: reads filters from the URL, fetches the matching employees_directory rows server-side, aggregates in Node (not shipped raw to the client), computes the total. - ReportsPageClient: measure/group/split/filter controls, 6 preset chips, saved-reports list (actions/reports.ts), CSV export (client-side blob download), stacked bars with a color-keyed legend when split is active, and click-to-drill-down into the underlying people (capped at 12, "+N weitere", linking to /employees/[id]). Audit log (§4.9): - app/(app)/audit/page.tsx + AuditFilters: search (target/details/actor) + action-type filter, paginated table with colored action badges, row links to the affected employee when target_employee_id is set, and the required "unveraenderbar" footer note. This completes every route from the spec's information architecture: Dashboard, Mitarbeiter:innen (list+detail), Organigramm (3 views), Positionen & Bereiche, Berichte, Audit-Log, plus the Hire wizard and all 6 action panels reachable from them. Final verification: clean npm run build + tsc --noEmit, then a full browser walkthrough of all 6 authenticated routes as hr_admin (zero console errors, zero 5xx responses) and a role-check pass as the manager test account confirming action buttons and the "+ Neueinstellung" button are hidden, and salary is masked as "... (ausgeblendet)" on the Vertrag & Gehalt tab. Swept the database for leftover test data from the debugging sessions above - none found, seed data is clean.
This commit is contained in:
119
app/(app)/audit/page.tsx
Normal file
119
app/(app)/audit/page.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import Link from "next/link";
|
||||
import { Suspense } from "react";
|
||||
import { AuditFilters } from "@/components/audit/AuditFilters";
|
||||
import { actionBadgeStyle } from "@/lib/colors";
|
||||
import { fmtDate } from "@/lib/format";
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
|
||||
type SearchParams = { q?: string; action?: string; page?: string };
|
||||
|
||||
function pageHref(params: SearchParams, page: number): string {
|
||||
const sp = new URLSearchParams();
|
||||
if (params.q) sp.set("q", params.q);
|
||||
if (params.action) sp.set("action", params.action);
|
||||
sp.set("page", String(page));
|
||||
return `/audit?${sp.toString()}`;
|
||||
}
|
||||
|
||||
function fmtDateTime(iso: string): string {
|
||||
return new Intl.DateTimeFormat("de-AT", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" }).format(
|
||||
new Date(iso)
|
||||
);
|
||||
}
|
||||
|
||||
export default async function AuditPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams;
|
||||
const supabase = await createClient();
|
||||
|
||||
const page = Math.max(1, Number(params.page ?? "1") || 1);
|
||||
const from = (page - 1) * PAGE_SIZE;
|
||||
const to = from + PAGE_SIZE - 1;
|
||||
|
||||
let query = supabase
|
||||
.from("audit_log")
|
||||
.select("id, occurred_at, actor_name, action, target_label, target_employee_id, details", { count: "exact" })
|
||||
.order("occurred_at", { ascending: false })
|
||||
.range(from, to);
|
||||
|
||||
if (params.action) query = query.eq("action", params.action);
|
||||
if (params.q) {
|
||||
const q = params.q.trim();
|
||||
query = query.or(`target_label.ilike.%${q}%,details.ilike.%${q}%,actor_name.ilike.%${q}%`);
|
||||
}
|
||||
|
||||
const { data: entries, count } = await query;
|
||||
const totalPages = Math.max(1, Math.ceil((count ?? 0) / PAGE_SIZE));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Suspense>
|
||||
<AuditFilters />
|
||||
</Suspense>
|
||||
<p className="text-sm text-ink-muted">{count ?? 0} Einträge</p>
|
||||
|
||||
<div className="overflow-x-auto rounded border border-border bg-white">
|
||||
<table className="w-full min-w-[800px] text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-surface text-left text-xs font-semibold uppercase tracking-wide text-ink-muted">
|
||||
<th className="px-4 py-3">Zeitpunkt</th>
|
||||
<th className="px-4 py-3">Benutzer:in</th>
|
||||
<th className="px-4 py-3">Aktion</th>
|
||||
<th className="px-4 py-3">Objekt</th>
|
||||
<th className="px-4 py-3">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(entries ?? []).map((entry) => {
|
||||
return (
|
||||
<tr key={entry.id} className="border-b border-border last:border-0 hover:bg-surface">
|
||||
<td className="px-4 py-3 text-ink-body">{fmtDateTime(entry.occurred_at)}</td>
|
||||
<td className="px-4 py-3 text-ink-body">{entry.actor_name}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${actionBadgeStyle(entry.action)}`}>{entry.action}</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-ink">
|
||||
{entry.target_employee_id ? (
|
||||
<Link href={`/employees/${entry.target_employee_id}`} className="hover:text-brand-700 hover:underline">
|
||||
{entry.target_label}
|
||||
</Link>
|
||||
) : (
|
||||
entry.target_label
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-ink-muted">{entry.details ?? "–"}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{(entries ?? []).length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-8 text-center text-sm text-ink-muted">
|
||||
Keine Einträge gefunden.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2 text-sm">
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
|
||||
<Link
|
||||
key={p}
|
||||
href={pageHref(params, p)}
|
||||
className={`rounded px-3 py-1 ${p === page ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
|
||||
>
|
||||
{p}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-ink-muted">
|
||||
Alle Änderungen an Personal-Stammdaten werden automatisch protokolliert und sind unveränderbar.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
117
app/(app)/reports/page.tsx
Normal file
117
app/(app)/reports/page.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import { Suspense } from "react";
|
||||
import { ReportsPageClient } from "@/components/reports/ReportsPageClient";
|
||||
import {
|
||||
aggregateReport,
|
||||
DATE_SCOPED_MEASURES,
|
||||
type GroupDimension,
|
||||
type Measure,
|
||||
type OrgLookups,
|
||||
type ReportEmployee,
|
||||
} from "@/lib/reports";
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import type { EmploymentStatus, EmploymentType } from "@/lib/supabase/types";
|
||||
|
||||
type SearchParams = {
|
||||
measure?: string;
|
||||
group?: string;
|
||||
split?: string;
|
||||
division?: string;
|
||||
location?: string;
|
||||
status?: string;
|
||||
employment?: string;
|
||||
from?: string;
|
||||
to?: string;
|
||||
};
|
||||
|
||||
export default async function ReportsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams;
|
||||
const supabase = await createClient();
|
||||
|
||||
const measure = (params.measure as Measure) || "headcount";
|
||||
const group = (params.group as GroupDimension) || "division";
|
||||
const split = (params.split as GroupDimension) || undefined;
|
||||
|
||||
const [{ data: divisions }, { data: departments }, { data: teams }, { data: locations }] = await Promise.all([
|
||||
supabase.from("divisions").select("id, name").order("name"),
|
||||
supabase.from("departments").select("id, name"),
|
||||
supabase.from("teams").select("id, name, department_id"),
|
||||
supabase.from("locations").select("id, name").order("name"),
|
||||
]);
|
||||
|
||||
const departmentNameById = new Map((departments ?? []).map((d) => [d.id, d.name]));
|
||||
const lookups: OrgLookups = {
|
||||
divisionName: new Map((divisions ?? []).map((d) => [d.id, d.name])),
|
||||
departmentNameByTeam: new Map((teams ?? []).map((t) => [t.id, departmentNameById.get(t.department_id) ?? "Unbekannt"])),
|
||||
teamName: new Map((teams ?? []).map((t) => [t.id, t.name])),
|
||||
locationName: new Map((locations ?? []).map((l) => [l.id, l.name])),
|
||||
};
|
||||
|
||||
let query = supabase
|
||||
.from("employees_directory")
|
||||
.select(
|
||||
"id, first_name, last_name, job_title, division_id, team_id, location_id, status, employment_type, contract_type, entry_date, exit_date, weekly_hours, monthly_salary_gross, source, paygrade, birth_date, gender"
|
||||
);
|
||||
|
||||
if (params.division) query = query.eq("division_id", params.division);
|
||||
if (params.location) query = query.eq("location_id", params.location);
|
||||
if (params.status) query = query.eq("status", params.status as EmploymentStatus);
|
||||
if (params.employment) query = query.eq("employment_type", params.employment as EmploymentType);
|
||||
|
||||
const isDateScoped = DATE_SCOPED_MEASURES.includes(measure);
|
||||
const currentYear = new Date().getFullYear();
|
||||
const from = params.from || `${currentYear}-01-01`;
|
||||
const to = params.to || `${currentYear}-12-31`;
|
||||
if (isDateScoped) {
|
||||
if (measure === "hires") query = query.gte("entry_date", from).lte("entry_date", to);
|
||||
else query = query.gte("exit_date", from).lte("exit_date", to).not("exit_date", "is", null);
|
||||
} else if (!params.status) {
|
||||
query = query.in("status", ["Aktiv", "Karenz"]);
|
||||
}
|
||||
|
||||
const { data: employeesData } = await query;
|
||||
const employees = (employeesData ?? []) as ReportEmployee[];
|
||||
|
||||
const rows = aggregateReport(employees, measure, group, split ?? null, lookups);
|
||||
const total = measureValueForTotal(rows, measure);
|
||||
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
const { data: savedReports } = user
|
||||
? await supabase.from("saved_reports").select("id, name, config").eq("created_by", user.id).order("created_at", { ascending: false })
|
||||
: { data: [] };
|
||||
|
||||
return (
|
||||
<Suspense>
|
||||
<ReportsPageClient
|
||||
measure={measure}
|
||||
group={group}
|
||||
split={split ?? ""}
|
||||
filters={{
|
||||
division: params.division ?? "",
|
||||
location: params.location ?? "",
|
||||
status: params.status ?? "",
|
||||
employment: params.employment ?? "",
|
||||
from: params.from ?? "",
|
||||
to: params.to ?? "",
|
||||
}}
|
||||
rows={rows}
|
||||
total={total}
|
||||
recordCount={employees.length}
|
||||
divisions={divisions ?? []}
|
||||
locations={locations ?? []}
|
||||
savedReports={savedReports ?? []}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function measureValueForTotal(rows: { value: number; count: number }[], measure: Measure): number {
|
||||
if (["headcount", "fte", "hires", "exits"].includes(measure)) {
|
||||
return rows.reduce((s, r) => s + r.value, 0);
|
||||
}
|
||||
// averages/ratios: weight by underlying count for a sensible overall figure
|
||||
const totalCount = rows.reduce((s, r) => s + r.count, 0);
|
||||
if (totalCount === 0) return 0;
|
||||
return rows.reduce((s, r) => s + r.value * r.count, 0) / totalCount;
|
||||
}
|
||||
Reference in New Issue
Block a user