Action colors
From designTokens.color.action — clock-in / clock-out / break / approve are semantic and never color-only (always paired with icon + text).
Status colors
From designTokens.color.status.
Primary actions
80px min height (one-handed glove use). PrimaryButton in each action color.
Secondary actions
Banners & sync badges
Form fields
Bottom tab bar
List rows & empty state
Worker — Time clock
Composed from worker-time-flow.ts primitives. GPS is fallback-only (hard rule: no background tracking).
Manager — Daily report & approvals
Composed from daily-report.ts / hr-admin-flows.ts. Corrections create audit trails — originals are immutable.
Admin — GDPR company details
From admin-legal-profile.ts (BAU-179). Bundesland drives read-only Landesbeauftragter fields. Use the Admin · GDPR tab for live GET/PATCH against /api/admin/company-legal-profile (admin or owner role).
Diary — Audio & legal
From audio-diary-flow.ts. AI output is always human-reviewed before it is final (hard rule).
Note: These previews are hand-composed from the design-system primitives to visualize the implemented flows. A follow-up ticket wires the src/frontend UiComponent builders into a generated renderer (same pattern as preview-legal-profile.mjs) so the previews stay in lockstep with code.
Connection
This page is served by the API itself (npm run build && npm start, or npm run start:dev), so calls are same-origin — no CORS needed. Leave the base URL blank to use the serving origin.
Time tracking — ingest event
POST /time-tracking/events. Event types: clock_in · break_start · break_end · site_switch · clock_out. Check-in methods: qr · gps_fallback · manual_exception.
Response
No request sent yet
Use the buttons above to call the API. Responses (and errors) appear here.
Worker time clock (live API)
Wired to POST /time-tracking/events, GET /time-tracking/employees/:id/work-days/:date, and GET /api/sites. Mint a dev token with role worker first. Manual site selection is the fallback — QR scan remains primary in the mobile app.
Not loaded
Worker flows (live API)
Absence, diary, correction, and hours — wired to /api/absences, /diary-entries, /time-tracking/correction-requests, and work-day history. Vacation is blocked offline; sick leave queues offline. AI diary body requires human review before submit. Corrections require connectivity.
Not loaded
GDPR company details
Live panel wired to GET/PATCH /api/admin/company-legal-profile. Mint a dev token with role admin or owner first. Saving is blocked offline in the mobile app; this dev GUI requires network.
Not loaded
Art. 14 placeholder preview
Maps to art14-site-notice-placeholders.ts keys used when rendering the site notice template.
Load or save to preview placeholders.
Office dashboard (live API)
Wired to core-services (/api/sites, /api/site-assignments, /api/tasks with deadlines), /ai/review-items (human approve before task creation), time-tracking, diary, and POST /exports + POST /exports/:id/download-url (signed URLs only). Mint admin, site_manager, or hr_billing token as needed.
Not loaded
Export not started — downloads use time-limited signed URLs only.
Aktive Mitarbeiter
Status uses icon + text + color (never color alone).
Projektstunden
Gesamt heute: —
Offene Korrekturen
Offene Bautagebücher
Kritische Aufgaben
Baustellen-Geofence
Admin/site_manager — PATCH /api/sites/:id for geofence updates.
Mitarbeiter-Zuweisungen
POST /api/site-assignments — worker ↔ site mapping.
Aufgaben mit Frist
KI-Aufgabenvorschläge
Approve via POST /ai/review-items/:id/approve — tasks are created only after explicit human approval.
Compliance templates
Lists GET /api/admin/compliance-documents and issues signed URLs via POST …/:kind/download-url. Mint an admin or owner dev token first.
Not loaded