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

26
components/shell/AppShell.tsx Normal file
View File

@@ -0,0 +1,26 @@
"use client";
import { useCallback, useState, type ReactNode } from "react";
import type { OpenNote } from "@/lib/notes";
import { Sidebar } from "./Sidebar";
import { Topbar } from "./Topbar";
// Owns the one piece of state the shell needs (is the mobile drawer open),
// so app/(app)/layout.tsx can stay a Server Component and keep doing its
// auth check and data loading on the server.
export function AppShell({ userLabel, openNotes, children }: { userLabel: string; openNotes: OpenNote[]; children: ReactNode }) {
const [navOpen, setNavOpen] = useState(false);
const closeNav = useCallback(() => setNavOpen(false), []);
return (
<div className="min-h-dvh">
<Sidebar open={navOpen} onClose={closeNav} />
<div className="flex min-h-dvh flex-col lg:ml-[236px]">
<Topbar userLabel={userLabel} openNotes={openNotes} onOpenNav={() => setNavOpen(true)} />
<main className="flex-1 px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6 sm:py-6">
<div className="mx-auto w-full max-w-[1280px]">{children}</div>
</main>
</div>
</div>
);
}

89
components/shell/NotesBell.tsx Normal file
View File

@@ -0,0 +1,89 @@
"use client";
import { Bell } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { completeEmployeeNote } from "@/actions/employees";
import { useToast } from "@/components/ui/Toast";
import { NOTE_CATEGORY_STYLES } from "@/lib/colors";
import { fmtDate } from "@/lib/format";
import type { OpenNote } from "@/lib/notes";
// Click-outside mechanics borrowed from CountryPicker (useRef + mousedown
// listener) — without its draft-text reset, which has no equivalent here.
export function NotesBell({ notes }: { notes: OpenNote[] }) {
const { showToast } = useToast();
const router = useRouter();
const [open, setOpen] = useState(false);
const [completingId, setCompletingId] = useState<string | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
function onClickOutside(e: MouseEvent) {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setOpen(false);
}
}
document.addEventListener("mousedown", onClickOutside);
return () => document.removeEventListener("mousedown", onClickOutside);
}, []);
async function handleComplete(note: OpenNote) {
setCompletingId(note.id);
const result = await completeEmployeeNote({ note_id: note.id, employee_id: note.employee_id });
setCompletingId(null);
if (result.success) {
showToast("Notiz erledigt.");
router.refresh();
} else {
showToast(result.error ?? "Fehler beim Speichern.", "error");
}
}
return (
<div ref={containerRef} className="relative">
<button type="button" onClick={() => setOpen((o) => !o)} aria-label="Meine Notizen" className="relative rounded p-1.5 text-ink-muted hover:bg-surface">
<Bell className="h-4 w-4" />
{notes.length > 0 && (
<span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger-solid px-1 text-[10px] font-bold text-white">
{notes.length}
</span>
)}
</button>
{open && (
<div className="absolute right-0 z-20 mt-2 max-h-[28rem] w-96 overflow-y-auto rounded border border-border bg-white shadow-lg">
<div className="border-b border-border px-4 py-2.5 text-xs font-bold uppercase tracking-wide text-ink-muted">Meine Notizen ({notes.length})</div>
{notes.length === 0 ? (
<p className="px-4 py-6 text-center text-sm text-ink-muted">Keine offenen Notizen.</p>
) : (
<ul className="divide-y divide-border">
{notes.map((n) => (
<li key={n.id} className="px-4 py-3">
<div className="flex flex-wrap items-center gap-2">
<span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${NOTE_CATEGORY_STYLES[n.category]}`}>{n.category}</span>
<Link href={`/employees/${n.employee_id}`} className="text-sm font-semibold text-ink hover:text-brand-700 hover:underline">
{n.employeeName}
</Link>
<span className="text-xs text-ink-muted">{fmtDate(n.created_at)}</span>
</div>
<p className="mt-1 text-sm text-ink-body">{n.note_text}</p>
{n.due_date && <p className="mt-1 text-xs text-warning-text">🔔 fällig {fmtDate(n.due_date)}</p>}
<button
type="button"
onClick={() => handleComplete(n)}
disabled={completingId === n.id}
className="mt-2 text-xs font-semibold text-success-text hover:underline disabled:opacity-50"
>
✓ Erledigt
</button>
</li>
))}
</ul>
)}
</div>
)}
</div>
);
}

99
components/shell/Sidebar.tsx
View File

@@ -1,44 +1,91 @@
"use client";
import { BarChart3, Building2, History, LayoutGrid, Network, Users } from "lucide-react";
import { BarChart3, Building2, History, LayoutGrid, Network, Users, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
const NAV_ITEMS = [
{ href: "/", label: "Übersicht", icon: LayoutGrid },
{ href: "/employees", label: "Mitarbeiter:innen", icon: Users },
{ href: "/orgchart", label: "Organigramm", icon: Network },
{ href: "/positions", label: "Positionen & Bereiche", icon: Building2 },
{ href: "/positions", label: "Positionen", icon: Building2 },
{ href: "/reports", label: "Berichte", icon: BarChart3 },
{ href: "/audit", label: "Audit-Log", icon: History },
] as const;
export function Sidebar() {
export function isActiveRoute(pathname: string, href: string): boolean {
return href === "/" ? pathname === "/" : pathname.startsWith(href);
}
// Permanent rail from lg up, slide-in drawer below it. Same markup either
// way — the breakpoint only changes how the <nav> is positioned — so the
// nav list has exactly one definition.
export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void }) {
const pathname = usePathname();
// A route change means the user tapped a nav item; the drawer has to get
// out of the way on its own, since it covers the page it just navigated to.
useEffect(() => {
onClose();
}, [pathname, onClose]);
useEffect(() => {
if (!open) return;
const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onClose]);
return (
<nav className="fixed left-0 top-0 flex h-full w-[236px] flex-col border-r border-border bg-white">
<div className="flex h-14 items-center border-b border-border px-5">
<span className="text-base font-extrabold text-brand-700">Alpenwerk HR</span>
</div>
<ul className="flex-1 space-y-1 px-3 py-4">
{NAV_ITEMS.map(({ href, label, icon: Icon }) => {
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
return (
<li key={href}>
<Link
href={href}
className={`flex items-center gap-3 rounded px-3 py-2 text-sm font-semibold transition-colors ${
active ? "bg-brand-100 text-brand-700" : "text-ink-body hover:bg-surface"
}`}
>
<Icon className="h-4 w-4 shrink-0" />
{label}
</Link>
</li>
);
})}
</ul>
</nav>
<>
<div
onClick={onClose}
aria-hidden
className={`fixed inset-0 z-40 bg-black/40 transition-opacity lg:hidden ${
open ? "opacity-100" : "pointer-events-none opacity-0"
}`}
/>
<nav
aria-label="Hauptnavigation"
className={`fixed left-0 top-0 z-50 flex h-dvh w-[264px] flex-col border-r border-border bg-white transition-transform duration-200 lg:z-30 lg:w-[236px] lg:translate-x-0 ${
open ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex h-14 shrink-0 items-center justify-between border-b border-border pl-5 pr-3">
<span className="text-base font-extrabold text-brand-700">Alpenwerk HR</span>
<button
type="button"
onClick={onClose}
aria-label="Navigation schließen"
className="-mr-1 rounded p-2 text-ink-muted hover:bg-surface lg:hidden"
>
<X className="h-5 w-5" />
</button>
</div>
{/* pb keeps the last item clear of the iOS home indicator. */}
<ul className="flex-1 space-y-1 overflow-y-auto px-3 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
{NAV_ITEMS.map(({ href, label, icon: Icon }) => {
const active = isActiveRoute(pathname, href);
return (
<li key={href}>
<Link
href={href}
aria-current={active ? "page" : undefined}
className={`flex items-center gap-3 rounded px-3 py-2.5 text-sm font-semibold transition-colors ${
active ? "bg-brand-100 text-brand-700" : "text-ink-body hover:bg-surface"
}`}
>
<Icon className="h-4 w-4 shrink-0" />
{label}
</Link>
</li>
);
})}
</ul>
</nav>
</>
);
}

37
components/shell/Topbar.tsx
View File

@@ -1,15 +1,17 @@
"use client";
import { LogOut } from "lucide-react";
import { LogOut, Menu } from "lucide-react";
import { usePathname } from "next/navigation";
import { logout } from "@/actions/auth";
import type { OpenNote } from "@/lib/notes";
import { NewHireButton } from "./NewHireButton";
import { NotesBell } from "./NotesBell";
const TITLES: Record<string, string> = {
"/": "Übersicht",
"/employees": "Mitarbeiter:innen",
"/orgchart": "Organigramm",
"/positions": "Positionen & Bereiche",
"/positions": "Positionen",
"/reports": "Berichte",
"/audit": "Audit-Log",
};
@@ -22,20 +24,37 @@ function titleFor(pathname: string): string {
type TopbarProps = {
userLabel: string;
openNotes: OpenNote[];
onOpenNav: () => void;
};
export function Topbar({ userLabel }: TopbarProps) {
export function Topbar({ userLabel, openNotes, onOpenNav }: TopbarProps) {
const pathname = usePathname();
return (
<header className="flex h-14 items-center justify-between border-b border-border bg-white px-6">
<h1 className="text-base font-bold text-ink">{titleFor(pathname)}</h1>
<div className="flex items-center gap-4">
// Sticky, with the notch inset added to its top padding: on an iPhone in
// landscape the bar would otherwise sit under the rounded corner.
<header className="sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between border-b border-border bg-white px-3 pt-[env(safe-area-inset-top)] sm:px-6">
<div className="flex min-w-0 items-center gap-2">
<button
type="button"
onClick={onOpenNav}
aria-label="Navigation öffnen"
className="-ml-1 rounded p-2 text-ink-body hover:bg-surface lg:hidden"
>
<Menu className="h-5 w-5" />
</button>
<h1 className="truncate text-base font-bold text-ink">{titleFor(pathname)}</h1>
</div>
<div className="flex shrink-0 items-center gap-1 sm:gap-4">
<NotesBell notes={openNotes} />
<NewHireButton />
<div className="flex items-center gap-2 border-l border-border pl-4 text-sm">
<span className="font-semibold text-ink">{userLabel}</span>
<div className="flex items-center gap-2 text-sm sm:border-l sm:border-border sm:pl-4">
{/* The name is the first thing worth dropping on a narrow screen —
the account is still reachable via the sign-out control. */}
<span className="hidden font-semibold text-ink md:inline">{userLabel}</span>
<form action={logout}>
<button type="submit" aria-label="Abmelden" className="ml-2 rounded p-1.5 text-ink-muted hover:bg-surface">
<button type="submit" aria-label="Abmelden" className="rounded p-2 text-ink-muted hover:bg-surface">
<LogOut className="h-4 w-4" />
</button>
</form>