Visual
- `--radius: 8px` in @theme collapsed Tailwind v4's whole radius scale onto
a single value: `rounded` and `rounded-lg` both measured 8px, so a chip, an
input and a card could not be told apart. Named steps restore the
gradation (6 / 8 / 12px, measured in the browser).
- Cards were a 1px border and nothing else. Added warm, brand-tinted
elevation tokens — a neutral black shadow over the pink surface reads as
dirt — in three steps for cards, dropdowns and overlays, collected behind
components/ui/Card.tsx so the 26 hand-copied card class chains have one
definition.
- KPI tiles lead with the number and carry a tone accent; tables got denser
rows, subtle row rules (the full border strength made 800 rows read as a
grid), tabular figures in numeric columns and a brand-tinted hover.
KPI tiles now link to the view that shows what they count. Making those
links honest surfaced two reasons the numbers did not agree with their
destinations:
- The dashboard read `employees.status`, while every report derives status
from entry/exit/karenz dates. A hire whose start date had passed before
the cron ran was counted differently on the two pages. The dashboard now
uses the same derivation — and one query instead of five.
- Eintritte/Austritte counted `entry_date`/`exit_date` while the linked
report counts `employee_history`; rehire_employee sets entry_date but logs
the event as 'Wiedereintritt', so rehires were missing from the target.
Both now count history events.
- The employee list filtered on the status column, so it disagreed too. It
now filters on derived status in SQL (lib/employee-status-filter.ts). That
restates deriveStatusAsOf a second time, in a second language, so an
integration test runs both over the full roster and requires identical id
sets — drift here is otherwise invisible.
Status semantics, per the domain correction: "aktiv" means status Aktiv
alone. Karenz is employed but not active, and has its own tile. The active
headcount, FTE (Karenz contributes no capacity) and the division bars all
follow that; the bars are labelled "Aktive nach Bereich" rather than
"Headcount" to say so. The employee filter still offers the combination,
named after the two statuses it selects instead of calling the pair active.
DEFAULT_STATUSES in lib/reports.ts is deliberately left at Aktiv + Karenz:
it governs what the Berichte page shows without an explicit status filter,
and therefore what already-saved reports and exports mean.
Accessibility work on the UI layer, all of it rooted in one structural gap:
there were no form primitives, so every field was hand-assembled and every
field got the same details wrong.
Form primitives
- components/ui/Field.tsx (Field/TextField/SelectField/TextareaField) and
Button.tsx. Field generates the control id with useId and derives htmlFor
from it, which is what makes the association impossible to omit rather
than merely conventional.
- 92 labels existed, 4 used htmlFor, and no input carried an id at all: a
screen reader announced an unnamed edit box and clicking a label focused
nothing. Now every label resolves to its control (0 unassociated), and the
input class chain that appeared verbatim 85 times appears zero times.
- Field also takes a render prop, so Lookup, CountryPicker and Picklist get
the same wiring instead of a second, partial solution.
- SearchInput replaces three hand-rolled copies of the icon-in-a-box search
whose input had only a placeholder — not a label — and killed its own
focus ring with outline-none and nothing in its place.
- Toggle groups (workdays, reorg change type) became fieldsets with
aria-pressed; colour alone was carrying the selected state.
Comboboxes
- Lookup and CountryPicker were text inputs with a div of clickable buttons
underneath: typeable, but no keyboard path to a result and nothing telling
a screen reader a list had appeared. Both now carry role=combobox,
aria-expanded/controls/activedescendant and listbox semantics, with arrow
keys, Enter and Escape. Escape stops propagation, or it would close the
surrounding dialog along with the dropdown.
Dialogs
- useDialogFocus centralises what Modal and SlideOver each owed the
keyboard and neither provided beyond Escape: focus into the dialog on
open, Tab and Shift+Tab cycling within it, focus restored to the trigger
on close.
- SlideOver stays mounted for its transition, and aria-hidden does not
remove anything from the tab order — so every closed panel was leaving
invisible tab stops at the end of the page. `inert` fixes that.
Route states
- loading.tsx, error.tsx, not-found.tsx and global-error.tsx. Every page in
the (app) group is server-rendered per request, so without loading.tsx a
navigation showed nothing at all until the server answered, and a render
error dropped the user on Next's own screen with no way back.
Tests
- 22 component tests (vitest jsdom project). Two of them found limits of the
environment rather than of the code: jsdom implements neither `inert` nor
scrollIntoView, so the inert test asserts the attribute and the missing
scrollIntoView — which was taking the whole render down from inside an
effect — is stubbed in the setup file.
- supabase/functions.sql, functions_2.sql: Postgres RPCs for every
employee/position/reorg mutation (hire, terminate, transfer, promote,
start/adjust/return karenz, change data, rehire, create position, staff
internally, apply/undo reorg). Each resolves manager_id server-side,
writes history + audit atomically, and enforces hr_admin via
require_hr_admin() (backed by the existing RLS policy).
- actions/employees.ts, positions.ts, reorg.ts: Server Actions wrapping
the RPCs, returning success/error for client-side toast handling.
- Employees list (search/filter/pagination) and detail (4 tabs: Stammdaten,
Vertrag & Gehalt, Organisation, Historie) reading from employees_directory.
- 6 action slide-over panels: Transfer, Promote, Karenz (start/adjust/
return), Daten aendern (person+contract diffing), Terminate (with direct-
report reparenting warning + offboarding checklist), Rehire.
- lib/org.ts: shared division/department/team/location lookups.
Verified live: promote mutation updates salary, writes history/audit, and
the detail page reflects it after refresh, no console errors.
Note: the spec's Karenz-verwalten panel only covers employees already on
Karenz; added a start-Karenz mode (Karenzbeginn/geplante Rueckkehr) to
cover the Aktiv-employee case implied by the header button but not
specified in the panel list.
