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

Org assignment history, mobile support, and a correctness pass

Browse Source 
Data model
- employee_assignments records org placement over time (valid_from/valid_to),
  written by a trigger on `employees` rather than inside each RPC: ~70
  `update employees` statements spread over fifteen migrations mean per-call
  bookkeeping would miss paths today and again with every future RPC. A
  partial unique index enforces the one-open-interval invariant the trigger
  relies on when closing the current row.
- The Organigramm gains a Stichtag (default today). Membership comes from
  entry/exit/karenz, past placement from the new history, future placement
  projected from pending_org_changes. Placements predating the migration are
  backfilled with today's values and flagged as such in the UI, since
  employee_history only ever stored free text and cannot be reconstructed.

Correctness
- Reports and exports silently truncated at PostgREST's 1000-row cap
  (db.max_rows); employee_history is already past it at ~800 staff. Every
  whole-table read now pages explicitly.
- XLSX date cells were a day early: ExcelJS converts a Date to an Excel
  serial straight off getTime(), so a Date built at local midnight lands on
  the previous day's serial in any positive-offset zone.
- Date handling is pinned to Europe/Vienna throughout, and date-only strings
  are formatted without a Date round-trip. The dashboard's YTD window was
  built by round-tripping a local Date through toISOString(), which shifted
  it a day early and dropped 31 December entirely.
- Export routes parsed measure/group/split/eventType with unchecked `as`
  casts, so an unknown value reached column headers as `undefined` and the
  Content-Disposition filename. Parsed against the label maps now, with the
  filename slugged as a backstop.
- toXlsx keyed columns by header text, silently dropping the second of any
  two columns sharing a name — split columns take their header from data.
- The org chart tree walks had no cycle guard; nothing in the schema forbids
  a manager_id cycle, and one would hang the tab rather than misreport.
- The login page reflected ?error= verbatim, letting anyone put arbitrary
  text on the real sign-in screen; messages are looked up by code now.
- React Flow needs elementsSelectable on, or it sets pointer-events:none on
  the whole node and the expand control stops responding.

UI
- Mobile: the shell was unusable below lg — a fixed 236px margin pushed
  content off-screen with no mobile navigation at all. The sidebar is now a
  drawer, dvh replaces vh, safe-area insets are honoured, inputs are 16px so
  iOS stops zooming on focus, and form grids stack.
- Org chart nodes redesigned: per-kind accent stripes and icons, vacant
  roles called out, expand control moved to the bottom edge carrying the
  child count.
- Pagination is windowed; it previously rendered one link per page (54 for
  the employee list, unbounded for the audit log).
- Positions page reduced to open positions with a single "Besetzen" action.
- The employee Organisation tab links into the org chart focused on that
  person, reusing the chart's existing search-match highlighting.

Also included, uncommitted until now
- Dependants, HR notes, academic titles, split address fields, position
  validity and role/employment fields, with their migrations and UI.
- Docker/compose deployment setup, data-model and security-review docs.
This commit is contained in:
Maximilian Stubhan
2026-07-24 23:38:10 +02:00
parent f96773da0f
commit 79f0e19bf8
101 changed files with 6120 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/(app)/audit/page.tsx
View File

@@ -1,6 +1,7 @@
import Link from "next/link";
import { Suspense } from "react";
import { AuditFilters } from "@/components/audit/AuditFilters";
import { Pagination } from "@/components/ui/Pagination";
import { actionBadgeStyle } from "@/lib/colors";
import { sanitizeIlikeTerm } from "@/lib/supabase/query";
import { createClient } from "@/lib/supabase/server";
@@ -17,11 +18,18 @@ function pageHref(params: SearchParams, page: number): string {
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)
);
}
// Pinned to Vienna and built once: audit_log.occurred_at is a timestamptz, and
// an unpinned formatter renders it in the *server's* zone — UTC in Docker and
// on Vercel — so every entry would read an hour or two early for the people
// the log is for.
const dateTimeFormatter = new Intl.DateTimeFormat("de-AT", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
timeZone: "Europe/Vienna",
});
export default async function AuditPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
const params = await searchParams;
@@ -68,7 +76,7 @@ export default async function AuditPage({ searchParams }: { searchParams: Promis
{(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">{dateTimeFormatter.format(new Date(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>
@@ -97,19 +105,7 @@ export default async function AuditPage({ searchParams }: { searchParams: Promis
</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>
)}
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => pageHref(params, p)} label="Audit-Log" />
<p className="text-xs text-ink-muted">
Alle Änderungen an Personal-Stammdaten werden automatisch protokolliert und sind unveränderbar.

48
app/(app)/employees/[id]/page.tsx
View File

@@ -11,23 +11,35 @@ export default async function EmployeeDetailPage({ params }: PageProps) {
const { data: employee } = await supabase.from("employees").select("*").eq("id", id).single();
if (!employee) notFound();
const [{ data: manager }, { data: directReports }, { data: history }, { data: divisions }, { data: departments }, { data: teams }, { data: locations }, { data: openPositions }] =
await Promise.all([
employee.manager_id
? supabase.from("employees").select("id, first_name, last_name, job_title").eq("id", employee.manager_id).single()
: Promise.resolve({ data: null }),
supabase
.from("employees")
.select("id, first_name, last_name, job_title, status")
.eq("manager_id", id)
.order("last_name"),
supabase.from("employee_history").select("*").eq("employee_id", id).order("event_date", { ascending: false }).order("created_at", { ascending: false }),
supabase.from("divisions").select("*").order("name"),
supabase.from("departments").select("*"),
supabase.from("teams").select("*"),
supabase.from("locations").select("*").order("name"),
supabase.from("positions").select("id, position_number, title, team_id, is_lead").eq("status", "open"),
]);
const [
{ data: manager },
{ data: directReports },
{ data: history },
{ data: dependents },
{ data: notes },
{ data: divisions },
{ data: departments },
{ data: teams },
{ data: locations },
{ data: openPositions },
] = await Promise.all([
employee.manager_id
? supabase.from("employees").select("id, first_name, last_name, job_title").eq("id", employee.manager_id).single()
: Promise.resolve({ data: null }),
supabase
.from("employees")
.select("id, first_name, last_name, job_title, status")
.eq("manager_id", id)
.order("last_name"),
supabase.from("employee_history").select("*").eq("employee_id", id).order("event_date", { ascending: false }).order("created_at", { ascending: false }),
supabase.from("employee_dependents").select("*").eq("employee_id", id).order("created_at"),
supabase.from("employee_notes").select("*").eq("employee_id", id).order("created_at", { ascending: false }),
supabase.from("divisions").select("*").order("name"),
supabase.from("departments").select("*"),
supabase.from("teams").select("*"),
supabase.from("locations").select("*").order("name"),
supabase.from("positions").select("id, position_number, title, team_id, is_lead").eq("status", "open"),
]);
return (
<EmployeeDetail
@@ -35,6 +47,8 @@ export default async function EmployeeDetailPage({ params }: PageProps) {
manager={manager ?? null}
directReports={directReports ?? []}
history={history ?? []}
dependents={dependents ?? []}
notes={notes ?? []}
divisions={divisions ?? []}
departments={departments ?? []}
teams={teams ?? []}

15
app/(app)/employees/page.tsx
View File

@@ -2,6 +2,7 @@ import Link from "next/link";
import { Suspense } from "react";
import { EmployeeFilters } from "@/components/employees/EmployeeFilters";
import { Avatar } from "@/components/ui/Avatar";
import { Pagination } from "@/components/ui/Pagination";
import { StatusChip } from "@/components/ui/StatusChip";
import { fmtDate } from "@/lib/format";
import { breadcrumbFor, loadOrgMaps } from "@/lib/org";
@@ -126,19 +127,7 @@ export default async function EmployeesPage({ searchParams }: EmployeesPageProps
</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>
)}
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => pageHref(params, p)} label="Mitarbeiter:innen" />
</div>
);
}

19
app/(app)/layout.tsx
View File

@@ -1,8 +1,8 @@
import { redirect } from "next/navigation";
import type { ReactNode } from "react";
import { HireWizardProvider } from "@/components/hire/HireWizardContext";
import { Sidebar } from "@/components/shell/Sidebar";
import { Topbar } from "@/components/shell/Topbar";
import { AppShell } from "@/components/shell/AppShell";
import { loadOpenNotes } from "@/lib/notes";
import { loadOpenPositions } from "@/lib/positions";
import { createClient } from "@/lib/supabase/server";
@@ -22,23 +22,18 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
const userLabel = profile.full_name || profile.email || user.email || "";
const [openPositions, locationsRes, draftsRes] = await Promise.all([
const [openPositions, locationsRes, draftsRes, openNotes] = await Promise.all([
loadOpenPositions(supabase),
supabase.from("locations").select("id, name, country").order("name"),
supabase.from("hire_drafts").select("id, step, payload, updated_at").eq("created_by", user.id).order("updated_at", { ascending: false }),
loadOpenNotes(supabase),
]);
return (
<HireWizardProvider openPositions={openPositions} locations={locationsRes.data ?? []} drafts={draftsRes.data ?? []}>
<div className="flex min-h-screen">
<Sidebar />
<div className="ml-[236px] flex flex-1 flex-col">
<Topbar userLabel={userLabel} />
<main className="flex-1 px-6 py-6">
<div className="mx-auto w-full max-w-[1280px]">{children}</div>
</main>
</div>
</div>
<AppShell userLabel={userLabel} openNotes={openNotes}>
{children}
</AppShell>
</HireWizardProvider>
);
}

77
app/(app)/orgchart/page.tsx
View File

@@ -1,42 +1,55 @@
import { Suspense } from "react";
import { OrgChartClient } from "@/components/orgchart/OrgChartClient";
import { todayIso } from "@/lib/format";
import { loadOrgAsOf } from "@/lib/orgchart-data";
import { loadOpenPositions } from "@/lib/positions";
import { parseIsoDateParam } from "@/lib/reports";
import { createClient } from "@/lib/supabase/server";
export default async function OrgChartPage() {
type SearchParams = { asOf?: string; focus?: string };
const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
export default async function OrgChartPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
const params = await searchParams;
const today = todayIso();
const asOf = parseIsoDateParam(params.asOf) ?? today;
// Only ever used to match against ids already on the page, but validated
// so a junk value can't reach the client as an arbitrary string.
const focusId = params.focus && UUID.test(params.focus) ? params.focus : null;
const supabase = await createClient();
const [
{ data: employees },
{ data: divisions },
{ data: departments },
{ data: teams },
openPositions,
{ data: reorgScenarios },
] = await Promise.all([
supabase
.from("employees")
.select("id, personnel_number, first_name, last_name, job_title, manager_id, team_id, division_id, is_lead, org_level")
.in("status", ["Aktiv", "Karenz"]),
supabase.from("divisions").select("*").order("name"),
supabase.from("departments").select("*"),
supabase.from("teams").select("*"),
loadOpenPositions(supabase),
supabase
.from("reorg_scenarios")
.select("id, name, effective_date, applied, applied_at")
.eq("applied", true)
.order("applied_at", { ascending: false })
.limit(5),
]);
const [org, { data: divisions }, { data: departments }, { data: teams }, openPositions, { data: reorgScenarios }] =
await Promise.all([
loadOrgAsOf(supabase, asOf),
supabase.from("divisions").select("*").order("name"),
supabase.from("departments").select("*"),
supabase.from("teams").select("*"),
loadOpenPositions(supabase),
supabase
.from("reorg_scenarios")
.select("id, name, effective_date, applied, applied_at")
.eq("applied", true)
.order("applied_at", { ascending: false })
.limit(5),
]);
return (
<OrgChartClient
employees={employees ?? []}
divisions={divisions ?? []}
departments={departments ?? []}
teams={teams ?? []}
openPositions={openPositions}
reorgScenarios={reorgScenarios ?? []}
/>
<Suspense>
<OrgChartClient
employees={org.employees}
divisions={divisions ?? []}
departments={departments ?? []}
teams={teams ?? []}
openPositions={openPositions}
reorgScenarios={reorgScenarios ?? []}
asOf={asOf}
today={today}
projectedCount={org.projectedCount}
historyStartsAt={org.historyStartsAt}
focusId={focusId}
/>
</Suspense>
);
}

41
app/(app)/page.tsx
View File

@@ -1,12 +1,9 @@
import Link from "next/link";
import { DraftsCard } from "@/components/dashboard/DraftsCard";
import { actionBadgeStyle } from "@/lib/colors";
import { fmtDate } from "@/lib/format";
import { addDaysIso, fmtDate, todayIso } from "@/lib/format";
import { createClient } from "@/lib/supabase/server";
function isoDate(d: Date): string {
return d.toISOString().slice(0, 10);
}
import { fetchAllRows } from "@/lib/supabase/query";
const TONE_TEXT: Record<string, string> = {
default: "text-ink",
@@ -45,13 +42,15 @@ export default async function DashboardPage() {
.order("updated_at", { ascending: false })
: { data: [] };
const today = new Date();
const todayIso = isoDate(today);
const yearStart = isoDate(new Date(today.getFullYear(), 0, 1));
const yearEnd = isoDate(new Date(today.getFullYear(), 11, 31));
const in60 = new Date(today);
in60.setDate(in60.getDate() + 60);
const in60Iso = isoDate(in60);
// Built as strings, not by round-tripping a local Date through
// toISOString(): in any positive-offset zone new Date(year, 0, 1) is still
// the previous year in UTC, which shifted the whole YTD window a day early
// and dropped 31 December from it entirely.
const today = todayIso();
const year = today.slice(0, 4);
const yearStart = `${year}-01-01`;
const yearEnd = `${year}-12-31`;
const in60Iso = addDaysIso(today, 60);
const [
activeCountRes,
@@ -59,9 +58,9 @@ export default async function DashboardPage() {
hiresYtdRes,
exitsYtdRes,
openPositionsRes,
fteRowsRes,
fteRows,
divisionsRes,
headcountRowsRes,
headcountRows,
upcomingHiresRes,
upcomingExitsRes,
upcomingReturnsRes,
@@ -80,27 +79,27 @@ export default async function DashboardPage() {
.gte("exit_date", yearStart)
.lte("exit_date", yearEnd),
supabase.from("positions").select("id", { count: "exact", head: true }).eq("status", "open"),
supabase.from("employees").select("weekly_hours").in("status", ["Aktiv", "Karenz"]),
fetchAllRows(() => supabase.from("employees").select("weekly_hours").in("status", ["Aktiv", "Karenz"]).order("id")),
supabase.from("divisions").select("id, name"),
supabase.from("employees").select("division_id").in("status", ["Aktiv", "Karenz"]),
fetchAllRows(() => supabase.from("employees").select("division_id").in("status", ["Aktiv", "Karenz"]).order("id")),
supabase
.from("employees")
.select("id, first_name, last_name, entry_date")
.eq("status", "Geplant")
.gte("entry_date", todayIso)
.gte("entry_date", today)
.lte("entry_date", in60Iso),
supabase
.from("employees")
.select("id, first_name, last_name, exit_date")
.not("exit_date", "is", null)
.gte("exit_date", todayIso)
.gte("exit_date", today)
.lte("exit_date", in60Iso),
supabase
.from("employees")
.select("id, first_name, last_name, karenz_return_date")
.eq("status", "Karenz")
.not("karenz_return_date", "is", null)
.gte("karenz_return_date", todayIso)
.gte("karenz_return_date", today)
.lte("karenz_return_date", in60Iso),
supabase
.from("employee_history")
@@ -110,10 +109,10 @@ export default async function DashboardPage() {
.limit(10),
]);
const fte = (fteRowsRes.data ?? []).reduce((sum, row) => sum + Number(row.weekly_hours), 0) / 38.5;
const fte = fteRows.reduce((sum, row) => sum + Number(row.weekly_hours), 0) / 38.5;
const headcountByDivision = new Map<string, number>();
for (const row of headcountRowsRes.data ?? []) {
for (const row of headcountRows) {
if (!row.division_id) continue;
headcountByDivision.set(row.division_id, (headcountByDivision.get(row.division_id) ?? 0) + 1);
}

74
app/(app)/positions/page.tsx
View File

@@ -1,73 +1,21 @@
import { PositionsPageClient } from "@/components/positions/PositionsPageClient";
import { daysBetween } from "@/lib/format";
import { daysBetweenIso, toIsoDate } from "@/lib/format";
import { loadOpenPositions } from "@/lib/positions";
import { createClient } from "@/lib/supabase/server";
export default async function PositionsPage() {
const supabase = await createClient();
const [openPositions, { data: divisions }, { data: departments }, { data: teams }, { data: activeEmployees }, { data: leads }] =
await Promise.all([
loadOpenPositions(supabase),
supabase.from("divisions").select("*").order("name"),
supabase.from("departments").select("*"),
supabase.from("teams").select("*"),
supabase.from("employees").select("team_id, division_id, weekly_hours").in("status", ["Aktiv", "Karenz"]),
supabase
.from("employees")
.select("id, first_name, last_name, team_id, division_id, org_level, is_lead")
.eq("status", "Aktiv")
.or("is_lead.eq.true,org_level.eq.0"),
]);
// Teams are only needed for the "Position ausschreiben" dialog's team
// select. The division/department/team headcount overview this page used
// to render was dropped, and with it the two employee-wide aggregation
// queries that fed it.
const [openPositions, { data: teams }] = await Promise.all([
loadOpenPositions(supabase),
supabase.from("teams").select("*").order("name"),
]);
const teamStats = new Map<string, { headcount: number; fte: number }>();
const divisionHeadcount = new Map<string, number>();
for (const e of activeEmployees ?? []) {
if (e.team_id) {
const s = teamStats.get(e.team_id) ?? { headcount: 0, fte: 0 };
s.headcount += 1;
s.fte += Number(e.weekly_hours) / 38.5;
teamStats.set(e.team_id, s);
}
if (e.division_id) {
divisionHeadcount.set(e.division_id, (divisionHeadcount.get(e.division_id) ?? 0) + 1);
}
}
const openPositionsWithDays = openPositions.map((p) => ({ ...p, daysOpen: daysBetweenIso(toIsoDate(p.created_at)) }));
const divisionHeadByDivision = new Map<string, { id: string; name: string }>();
const teamLeadByTeam = new Map<string, { id: string; name: string }>();
for (const p of leads ?? []) {
const name = `${p.first_name} ${p.last_name}`;
if (p.org_level === 1 && p.division_id) divisionHeadByDivision.set(p.division_id, { id: p.id, name });
if (p.is_lead && p.team_id) teamLeadByTeam.set(p.team_id, { id: p.id, name });
}
const openPositionCountByTeam = new Map<string, number>();
for (const pos of openPositions) {
openPositionCountByTeam.set(pos.team_id, (openPositionCountByTeam.get(pos.team_id) ?? 0) + 1);
}
const divisionCards = (divisions ?? []).map((div) => ({
...div,
head: divisionHeadByDivision.get(div.id) ?? null,
headcount: divisionHeadcount.get(div.id) ?? 0,
departments: (departments ?? [])
.filter((d) => d.division_id === div.id)
.map((dept) => ({
...dept,
teams: (teams ?? [])
.filter((t) => t.department_id === dept.id)
.map((t) => ({
...t,
lead: teamLeadByTeam.get(t.id) ?? null,
headcount: teamStats.get(t.id)?.headcount ?? 0,
fte: teamStats.get(t.id)?.fte ?? 0,
openCount: openPositionCountByTeam.get(t.id) ?? 0,
})),
})),
}));
const openPositionsWithDays = openPositions.map((p) => ({ ...p, daysOpen: daysBetween(p.created_at) }));
return <PositionsPageClient openPositions={openPositionsWithDays} divisionCards={divisionCards} teams={teams ?? []} />;
return <PositionsPageClient openPositions={openPositionsWithDays} teams={teams ?? []} />;
}

49
app/(app)/reports/page.tsx
View File

@@ -1,9 +1,22 @@
import { Suspense } from "react";
import { ReportsPageClient } from "@/components/reports/ReportsPageClient";
import { aggregateEvents, aggregateReport, sumValues, totalForRows, type EventGroupDimension, type GroupDimension, type Measure } from "@/lib/reports";
import {
aggregateEvents,
aggregateReport,
parseEventDateParam,
parseEventGroupDimension,
parseEventSplitDimension,
parseEventType,
parseGroupDimension,
parseIsoDateParam,
parseMeasure,
parseMode,
parseSplitDimension,
sumValues,
totalForRows,
} from "@/lib/reports";
import { loadEventHistory, loadOrgLookups, loadSnapshotEmployees } from "@/lib/reports-data";
import { createClient } from "@/lib/supabase/server";
import type { HistoryEventType } from "@/lib/supabase/types";
type SearchParams = {
mode?: string;
@@ -23,7 +36,7 @@ type SearchParams = {
export default async function ReportsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
const params = await searchParams;
const supabase = await createClient();
const mode = params.mode === "events" ? "events" : "snapshot";
const mode = parseMode(params.mode);
const [{ lookups, divisions, locations }, { data: userRes }] = await Promise.all([loadOrgLookups(supabase), supabase.auth.getUser()]);
const user = userRes.user;
@@ -32,12 +45,20 @@ export default async function ReportsPage({ searchParams }: { searchParams: Prom
: { data: [] };
if (mode === "events") {
const group = (params.group as EventGroupDimension) || "event_type";
const split = (params.split as EventGroupDimension) || undefined;
const eventType = (params.eventType as HistoryEventType) || undefined;
const group = parseEventGroupDimension(params.group);
const split = parseEventSplitDimension(params.split);
const eventType = parseEventType(params.eventType);
const from = parseEventDateParam(params.from);
const to = parseEventDateParam(params.to);
const events = await loadEventHistory(supabase, { eventType, division: params.division, location: params.location, from: params.from, to: params.to });
const rows = aggregateEvents(events, group, split ?? null, lookups);
const events = await loadEventHistory(supabase, {
eventType: eventType ?? undefined,
division: params.division,
location: params.location,
from,
to,
});
const rows = aggregateEvents(events, group, split, lookups);
const total = sumValues(rows);
return (
@@ -47,7 +68,7 @@ export default async function ReportsPage({ searchParams }: { searchParams: Prom
eventGroup={group}
eventSplit={split ?? ""}
eventType={eventType ?? ""}
eventFilters={{ division: params.division ?? "", location: params.location ?? "", from: params.from ?? "", to: params.to ?? "" }}
eventFilters={{ division: params.division ?? "", location: params.location ?? "", from: from ?? "", to: to ?? "" }}
rows={rows}
total={total}
recordCount={events.length}
@@ -59,10 +80,10 @@ export default async function ReportsPage({ searchParams }: { searchParams: Prom
);
}
const measure = (params.measure as Measure) || "headcount";
const group = (params.group as GroupDimension) || "division";
const split = (params.split as GroupDimension) || undefined;
const asOf = params.asOf || undefined;
const measure = parseMeasure(params.measure);
const group = parseGroupDimension(params.group);
const split = parseSplitDimension(params.split);
const asOf = parseIsoDateParam(params.asOf);
const employees = await loadSnapshotEmployees(supabase, {
division: params.division,
@@ -71,7 +92,7 @@ export default async function ReportsPage({ searchParams }: { searchParams: Prom
employment: params.employment,
asOf,
});
const rows = aggregateReport(employees, measure, group, split ?? null, lookups, asOf);
const rows = aggregateReport(employees, measure, group, split, lookups, asOf);
const total = totalForRows(rows, measure);
return (

27
app/(auth)/login/page.tsx
View File

@@ -1,11 +1,24 @@
import { login, logout } from "@/actions/auth";
// The query string is attacker-controlled, so the login page renders a message
// looked up by code rather than whatever text ?error= carries. Reflecting the
// raw parameter let anyone put arbitrary wording ("Ihr Konto wurde gesperrt,
// rufen Sie …") on the real, correctly-branded sign-in screen.
const ERROR_MESSAGES = {
no_hr_access: "Kein HR-Zugriff. Bitte wenden Sie sich an eine:n bestehende:n HR-Benutzer:in.",
invalid_credentials: "E-Mail oder Passwort ist falsch.",
} as const;
type ErrorCode = keyof typeof ERROR_MESSAGES;
type LoginPageProps = {
searchParams: Promise<{ error?: string }>;
};
export default async function LoginPage({ searchParams }: LoginPageProps) {
const { error } = await searchParams;
const params = await searchParams;
const code = params.error && Object.hasOwn(ERROR_MESSAGES, params.error) ? (params.error as ErrorCode) : null;
const error = code ? ERROR_MESSAGES[code] : null;
return (
<div className="flex min-h-screen items-center justify-center bg-surface px-4">
@@ -16,11 +29,13 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
{error && (
<div role="alert" className="mt-4 rounded bg-danger-bg px-3 py-2 text-sm text-danger-text">
{error}
<form action={logout} className="mt-2">
<button type="submit" className="text-xs font-semibold underline hover:no-underline">
Abmelden und mit anderem Konto versuchen
</button>
</form>
{code === "no_hr_access" && (
<form action={logout} className="mt-2">
<button type="submit" className="text-xs font-semibold underline hover:no-underline">
Abmelden und mit anderem Konto versuchen
</button>
</form>
)}
</div>
)}

76
app/api/export/employees/route.ts
View File

@@ -1,9 +1,11 @@
import { NextResponse, type NextRequest } from "next/server";
import { exportFilename, exportResponseHeaders, toCsv, toXlsx, type ExportColumn } from "@/lib/export";
import { deriveStatusAsOf, parseStatuses, type OrgLookups } from "@/lib/reports";
import { loadOrgLookups, type ReportFilters } from "@/lib/reports-data";
import { deriveStatusAsOf, parseIsoDateParam, parseStatuses, type OrgLookups } from "@/lib/reports";
import { loadDependentsCounts, loadOrgLookups, type ReportFilters } from "@/lib/reports-data";
import { requireHrUser } from "@/lib/supabase/auth";
import { fetchAllRows } from "@/lib/supabase/query";
import { createClient } from "@/lib/supabase/server";
import type { Database, EmploymentType } from "@/lib/supabase/types";
import type { Database, EmploymentType, Weekday } from "@/lib/supabase/types";
type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
@@ -14,19 +16,12 @@ type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
// than the live `status` column — see deriveStatusAsOf.
export async function GET(request: NextRequest) {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) return NextResponse.json({ error: "Nicht angemeldet." }, { status: 401 });
const { data: profile } = await supabase.from("profiles").select("role, is_active").eq("id", user.id).maybeSingle();
if (profile?.role !== "hr" || profile?.is_active !== true) {
return NextResponse.json({ error: "Nicht berechtigt." }, { status: 403 });
}
const denied = await requireHrUser(supabase);
if (denied) return denied;
const params = request.nextUrl.searchParams;
const format = params.get("format") === "xlsx" ? "xlsx" : "csv";
const asOf = params.get("asOf") ?? undefined;
const asOf = parseIsoDateParam(params.get("asOf"));
const filters: ReportFilters = {
division: params.get("division") ?? undefined,
location: params.get("location") ?? undefined,
@@ -36,25 +31,25 @@ export async function GET(request: NextRequest) {
const statuses = parseStatuses(filters.status);
let query = supabase.from("employees").select("*").order("last_name");
if (filters.division) query = query.eq("division_id", filters.division);
if (filters.location) query = query.eq("location_id", filters.location);
if (filters.employment) query = query.eq("employment_type", filters.employment as EmploymentType);
if (!asOf) query = query.in("status", statuses);
const [{ data: employees, error }, { lookups }, { data: allEmployees }] = await Promise.all([
query,
loadOrgLookups(supabase),
supabase.from("employees").select("id, first_name, last_name"),
]);
if (error) {
console.error("employees export query failed:", error);
return NextResponse.json({ error: "Interner Fehler." }, { status: 500 });
function employeeQuery() {
let query = supabase.from("employees").select("*").order("last_name").order("id");
if (filters.division) query = query.eq("division_id", filters.division);
if (filters.location) query = query.eq("location_id", filters.location);
if (filters.employment) query = query.eq("employment_type", filters.employment as EmploymentType);
if (!asOf) query = query.in("status", statuses);
return query;
}
const managerName = new Map((allEmployees ?? []).map((e) => [e.id, `${e.first_name} ${e.last_name}`]));
const rows = asOf ? (employees ?? []).filter((e) => statuses.includes(deriveStatusAsOf(e, asOf))) : (employees ?? []);
const columns = employeeExportColumns(lookups, managerName, asOf);
const [employees, { lookups }, allEmployees, dependentsCounts] = await Promise.all([
fetchAllRows(employeeQuery),
loadOrgLookups(supabase),
fetchAllRows(() => supabase.from("employees").select("id, first_name, last_name").order("id")),
loadDependentsCounts(supabase),
]);
const managerName = new Map(allEmployees.map((e) => [e.id, `${e.first_name} ${e.last_name}`]));
const rows = asOf ? employees.filter((e) => statuses.includes(deriveStatusAsOf(e, asOf))) : employees;
const columns = employeeExportColumns(lookups, managerName, dependentsCounts, asOf);
const filename = exportFilename("mitarbeiter-export", format);
const body = format === "xlsx" ? await toXlsx(rows, columns, "Mitarbeiter") : toCsv(rows, columns);
@@ -63,7 +58,14 @@ export async function GET(request: NextRequest) {
return new NextResponse(new Blob([body as BlobPart]), { headers: exportResponseHeaders(filename, format) });
}
function employeeExportColumns(lookups: OrgLookups, managerName: Map<string, string>, asOf?: string): ExportColumn<EmployeeRow>[] {
const WEEKDAY_ORDER: Weekday[] = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
function employeeExportColumns(
lookups: OrgLookups,
managerName: Map<string, string>,
dependentsCounts: Map<string, number>,
asOf?: string
): ExportColumn<EmployeeRow>[] {
const columns: ExportColumn<EmployeeRow>[] = [
{ header: "Pers.-Nr.", get: (e) => e.personnel_number },
{ header: "Vorname", get: (e) => e.first_name },
@@ -73,6 +75,8 @@ function employeeExportColumns(lookups: OrgLookups, managerName: Map<string, str
{ header: "SV-Nummer", get: (e) => e.sv_nummer },
{ header: "Staatsbürgerschaft", get: (e) => e.nationality },
{ header: "Adresse", get: (e) => e.address },
{ header: "Postleitzahl", get: (e) => e.postal_code },
{ header: "Ort", get: (e) => e.city },
{ header: "Wohnsitzland", get: (e) => e.address_country },
{ header: "E-Mail", get: (e) => e.email },
{ header: "Telefon", get: (e) => e.phone },
@@ -86,8 +90,17 @@ function employeeExportColumns(lookups: OrgLookups, managerName: Map<string, str
{ header: "Org-Level", get: (e) => e.org_level },
{ header: "Beschäftigungsausmaß", get: (e) => e.employment_type },
{ header: "Wochenstunden", get: (e) => e.weekly_hours },
// work_days is stored in click order (see RoleEmploymentFields), not
// guaranteed chronological — re-sort Mo→So for the export.
{ header: "Arbeitstage", get: (e) => [...e.work_days].sort((a, b) => WEEKDAY_ORDER.indexOf(a as Weekday) - WEEKDAY_ORDER.indexOf(b as Weekday)).join(", ") },
{ header: "Vertragsart", get: (e) => e.contract_type },
{ header: "Befristet bis", get: (e) => e.contract_end_date, kind: "date" },
{ header: "Angestellte:r / Arbeiter:in", get: (e) => e.worker_type },
{ header: "Kollektivvertrag", get: (e) => e.collective_agreement },
{ header: "Betriebsrat", get: (e) => e.is_betriebsrat },
{ header: "Dienstwagen", get: (e) => e.has_dienstwagen },
{ header: "Laterale Führung", get: (e) => e.is_laterale_fuehrung },
{ header: "C-Level", get: (e) => e.is_c_level },
{ header: "Paygrade", get: (e) => e.paygrade },
{ header: "Herkunft", get: (e) => e.source },
{ header: "Status", get: (e) => e.status },
@@ -96,6 +109,7 @@ function employeeExportColumns(lookups: OrgLookups, managerName: Map<string, str
{ header: "Austrittsgrund", get: (e) => e.exit_reason },
{ header: "Karenzbeginn", get: (e) => e.karenz_start_date, kind: "date" },
{ header: "Karenz-Rückkehrdatum", get: (e) => e.karenz_return_date, kind: "date" },
{ header: "Anzahl Angehörige", get: (e) => dependentsCounts.get(e.id) ?? 0 },
];
if (asOf) {
const statusIndex = columns.findIndex((c) => c.header === "Status");

25
app/api/export/events/route.ts
View File

@@ -1,9 +1,9 @@
import { NextResponse, type NextRequest } from "next/server";
import { exportFilename, exportResponseHeaders, toCsv, toXlsx, type ExportColumn } from "@/lib/export";
import { EVENT_TYPE_LABELS, type OrgLookups, type ReportEvent } from "@/lib/reports";
import { EVENT_TYPE_LABELS, parseEventDateParam, parseEventType, type OrgLookups, type ReportEvent } from "@/lib/reports";
import { loadEventHistory, loadOrgLookups } from "@/lib/reports-data";
import { requireHrUser } from "@/lib/supabase/auth";
import { createClient } from "@/lib/supabase/server";
import type { HistoryEventType } from "@/lib/supabase/types";
// Full raw event-log dump — one row per employee_history entry in the
// selected period (default: current year), every event type unless one is
@@ -11,30 +11,21 @@ import type { HistoryEventType } from "@/lib/supabase/types";
// placement (see loadEventHistory).
export async function GET(request: NextRequest) {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) return NextResponse.json({ error: "Nicht angemeldet." }, { status: 401 });
const { data: profile } = await supabase.from("profiles").select("role, is_active").eq("id", user.id).maybeSingle();
if (profile?.role !== "hr" || profile?.is_active !== true) {
return NextResponse.json({ error: "Nicht berechtigt." }, { status: 403 });
}
const denied = await requireHrUser(supabase);
if (denied) return denied;
const params = request.nextUrl.searchParams;
const format = params.get("format") === "xlsx" ? "xlsx" : "csv";
const eventType = (params.get("eventType") as HistoryEventType) || undefined;
const from = params.get("from") ?? undefined;
const to = params.get("to") ?? undefined;
const eventType = parseEventType(params.get("eventType"));
const [{ lookups }, events] = await Promise.all([
loadOrgLookups(supabase),
loadEventHistory(supabase, {
eventType,
eventType: eventType ?? undefined,
division: params.get("division") ?? undefined,
location: params.get("location") ?? undefined,
from,
to,
from: parseEventDateParam(params.get("from")),
to: parseEventDateParam(params.get("to")),
}),
]);

47
app/api/export/report/route.ts
View File

@@ -6,6 +6,16 @@ import {
EVENT_GROUP_LABELS,
GROUP_LABELS,
MEASURE_LABELS,
parseEventDateParam,
parseEventGroupDimension,
parseEventSplitDimension,
parseEventType,
parseGroupDimension,
parseIsoDateParam,
parseMeasure,
parseMode,
parseSplitDimension,
sortKeysForDimension,
sumValues,
totalForRows,
type EventGroupDimension,
@@ -14,8 +24,8 @@ import {
type ReportRow,
} from "@/lib/reports";
import { loadEventHistory, loadOrgLookups, loadSnapshotEmployees } from "@/lib/reports-data";
import { requireHrUser } from "@/lib/supabase/auth";
import { createClient } from "@/lib/supabase/server";
import type { HistoryEventType } from "@/lib/supabase/types";
// Exports exactly the pivot table currently on screen (same mode/measure or
// event-type/group/split/filters, read from the query string the client
@@ -23,19 +33,12 @@ import type { HistoryEventType } from "@/lib/supabase/types";
// per split value if a split is active.
export async function GET(request: NextRequest) {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) return NextResponse.json({ error: "Nicht angemeldet." }, { status: 401 });
const { data: profile } = await supabase.from("profiles").select("role, is_active").eq("id", user.id).maybeSingle();
if (profile?.role !== "hr" || profile?.is_active !== true) {
return NextResponse.json({ error: "Nicht berechtigt." }, { status: 403 });
}
const denied = await requireHrUser(supabase);
if (denied) return denied;
const params = request.nextUrl.searchParams;
const format = params.get("format") === "xlsx" ? "xlsx" : "csv";
const mode = params.get("mode") === "events" ? "events" : "snapshot";
const mode = parseMode(params.get("mode"));
const { lookups } = await loadOrgLookups(supabase);
let rows: ReportRow[];
@@ -43,24 +46,24 @@ export async function GET(request: NextRequest) {
let filenameBase: string;
if (mode === "events") {
const group = (params.get("group") as EventGroupDimension) || "event_type";
const split = (params.get("split") as EventGroupDimension) || null;
const eventType = (params.get("eventType") as HistoryEventType) || undefined;
const group = parseEventGroupDimension(params.get("group"));
const split = parseEventSplitDimension(params.get("split"));
const eventType = parseEventType(params.get("eventType"));
const events = await loadEventHistory(supabase, {
eventType,
eventType: eventType ?? undefined,
division: params.get("division") ?? undefined,
location: params.get("location") ?? undefined,
from: params.get("from") ?? undefined,
to: params.get("to") ?? undefined,
from: parseEventDateParam(params.get("from")),
to: parseEventDateParam(params.get("to")),
});
rows = aggregateEvents(events, group, split, lookups);
columns = eventReportColumns(rows, group, split, sumValues(rows));
filenameBase = `ereignisse-${eventType ?? "alle"}-${group}`;
} else {
const measure = (params.get("measure") as Measure) || "headcount";
const group = (params.get("group") as GroupDimension) || "division";
const split = (params.get("split") as GroupDimension) || null;
const asOf = params.get("asOf") ?? undefined;
const measure = parseMeasure(params.get("measure"));
const group = parseGroupDimension(params.get("group"));
const split = parseSplitDimension(params.get("split"));
const asOf = parseIsoDateParam(params.get("asOf"));
const employees = await loadSnapshotEmployees(supabase, {
division: params.get("division") ?? undefined,
location: params.get("location") ?? undefined,
@@ -89,7 +92,7 @@ function snapshotReportColumns(
): ExportColumn<ReportRow>[] {
const columns: ExportColumn<ReportRow>[] = [{ header: GROUP_LABELS[group], get: (r) => r.key }];
if (split) {
const splitKeys = Array.from(new Set(rows.flatMap((r) => r.split?.map((s) => s.key) ?? [])));
const splitKeys = sortKeysForDimension(Array.from(new Set(rows.flatMap((r) => r.split?.map((s) => s.key) ?? []))), split);
for (const key of splitKeys) {
columns.push({ header: key, get: (r) => Math.round((r.split?.find((s) => s.key === key)?.value ?? 0) * 100) / 100 });
}

92
app/globals.css
View File

@@ -42,4 +42,96 @@
body {
background-color: var(--color-surface);
color: var(--color-ink);
/* iOS bounce-scrolls the whole document behind fixed overlays (drawer,
modal) and shows the white page edge; contain keeps the rubber band
inside the scroller that actually overflowed. */
overscroll-behavior-y: none;
}
/* Mobile browsers zoom the page when a focused input is under ~16px. Every
form control in this app is text-sm (14px), so without this, tapping any
field on iOS Safari jumps the layout. */
@media (max-width: 767px) {
input,
select,
textarea {
font-size: 16px;
}
}
/* Touch devices have no hover, so the grey flash Chrome/Safari paint on tap
is the only press feedback — but their default is a hard blue box. */
@media (hover: none) {
* {
-webkit-tap-highlight-color: color-mix(in srgb, var(--color-brand-500) 12%, transparent);
}
}
/* ── React Flow chrome ─────────────────────────────────────────────
The library ships a generic grey control panel; these bring it onto the
app's own palette and give the buttons a real touch target. */
.orgchart-canvas .react-flow__controls {
gap: 2px;
border-radius: var(--radius);
border: 1px solid var(--color-border);
background: #fff;
box-shadow: 0 2px 10px rgb(45 28 38 / 0.08);
overflow: hidden;
}
.orgchart-canvas .react-flow__controls-button {
width: 32px;
height: 32px;
border: none;
border-bottom: 1px solid var(--color-border-subtle);
background: #fff;
color: var(--color-ink-body);
}
.orgchart-canvas .react-flow__controls-button:last-child {
border-bottom: none;
}
.orgchart-canvas .react-flow__controls-button:hover {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
.orgchart-canvas .react-flow__controls-button svg {
fill: currentColor;
max-width: 14px;
max-height: 14px;
}
.orgchart-canvas .react-flow__minimap {
border-radius: var(--radius);
border: 1px solid var(--color-border);
background: #fff;
box-shadow: 0 2px 10px rgb(45 28 38 / 0.08);
}
/* Node selection has to stay enabled (it is what gives the card pointer
events at all — see GraphOrgChart), but the card carries its own hover and
match styling, so React Flow's default selected/focus outline is noise. */
.orgchart-canvas .react-flow__node.selected,
.orgchart-canvas .react-flow__node:focus,
.orgchart-canvas .react-flow__node:focus-visible {
outline: none;
box-shadow: none;
}
.orgchart-canvas .react-flow__attribution {
background: transparent;
font-size: 10px;
}
.orgchart-canvas .react-flow__attribution a {
color: var(--color-ink-muted);
}
/* The minimap costs more screen than it earns on a phone. */
@media (max-width: 1023px) {
.orgchart-canvas .react-flow__minimap {
display: none;
}
}

16
app/layout.tsx
View File

@@ -1,4 +1,4 @@
import type { Metadata } from "next";
import type { Metadata, Viewport } from "next";
import { Nunito } from "next/font/google";
import { ToastProvider } from "@/components/ui/Toast";
import "./globals.css";
@@ -12,6 +12,18 @@ const nunito = Nunito({
export const metadata: Metadata = {
title: "Alpenwerk HR",
description: "HR-Stammdaten- und Organisationsmanagement für Alpenwerk Industrie GmbH",
// Added to the home screen on iOS this opens without Safari's chrome and
// keeps the app's own name rather than the page title.
appleWebApp: { capable: true, title: "Alpenwerk HR", statusBarStyle: "default" },
};
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
// The layout extends under the notch and home indicator; every edge that
// matters pads itself back out with env(safe-area-inset-*).
viewportFit: "cover",
themeColor: "#ffffff",
};
export default function RootLayout({
@@ -21,7 +33,7 @@ export default function RootLayout({
}>) {
return (
<html lang="de-AT" className={`${nunito.variable} h-full antialiased`}>
<body className="min-h-full flex flex-col font-sans">
<body className="flex min-h-dvh flex-col font-sans">
<ToastProvider>{children}</ToastProvider>
</body>
</html>