Frontend (Next.js)

Frontend Architecture

The web app (apps/web) is a Next.js 14 application using the App Router, written in strict TypeScript.

Structure

• App Router with route groups per functional area (dashboard, tools, rentals, damages, admin, …).
• Internationalization: next-intl with German as the default locale; routes are locale-prefixed (e.g. /de/tools, /en/tools).
• API access: all backend calls go to the API origin (NEXT_PUBLIC_API_URL, baked in at image build time).

Permission-aware UI

The backend’s role/permission model is mirrored in the frontend:

• The user’s role and permissions come from the authenticated session.
• Navigation items, buttons, and routes are shown/hidden accordingly.
• Frontend checks are UX only — every endpoint is independently enforced by the API guard pipeline (see Backend).

Roles (mirrored from the seed)

Role	Scope
Super-Admin	Cross-tenant platform administration
Administrator	Tenant administration
AS-Koordination	Coordination across branches
Werkstattleiter	Workshop management (own branch)
Teilevertrieb	Parts sales (own branch)
Monteur	Mechanic (own branch)

PWA & offline aspects

• Installable PWA: manifest.json, maskable icons, service worker.
• QR-code scanning (@zxing) for tool booking workflows.
• Local caching where needed for workshop connectivity gaps.

Conventions

• Components follow the existing route-group structure — check neighboring components before creating new ones.
• Styling via Tailwind CSS utility classes.
• User-facing strings go through next-intl message files — never hardcode German or English literals in components.
• Tests: Vitest (pnpm test) for units, Playwright (pnpm e2e) for flows.