Prompt
Build an internal permit-tracking application (vergunningen tracker) for
Gemeente Amsterdam employees. Use Vite + React + TypeScript with React
Router for navigation. Use the Amsterdam Design System
(@amsterdam/design-system-react) in Compact mode.
The app has two main views:
1. **Dashboard** (route: /)
A table of all submitted permits with columns: Zaaknummer, Type,
Aanvrager, Datum ingediend, Status. The table should be sortable by
any column and filterable by Status (dropdown above the table).
Clicking a row navigates to the detail view.
Seed the table with 8-10 realistic example rows. Use these permit
types: Bouwvergunning, Evenementenvergunning, Terrasvergunning,
Kapvergunning. Statuses: Ingediend, In behandeling, Goedgekeurd,
Afgewezen.
2. **New permit form** (route: /nieuw)
A multi-step wizard with 4 steps:
- Stap 1 — Aanvrager: naam, e-mail, telefoon, organisatie (all text fields)
- Stap 2 — Locatie: adres, postcode, stadsdeel (dropdown with Amsterdam
stadsdelen: Centrum, West, Nieuw-West, Zuid, Oost, Noord, Zuidoost)
- Stap 3 — Vergunning: type (radio group with the 4 permit types),
gewenste startdatum (date input), beschrijving (textarea), akkoord
voorwaarden (checkbox)
- Stap 4 — Controleren: read-only summary of all entered data, submit
button
Each step must validate its fields before allowing navigation to the
next step. Show inline error messages per field and a summary alert
at the top when submitting a step with errors.
3. **Detail view** (route: /zaak/:id)
Shows the full permit data in a structured read-only layout. Include
the current status as a colored badge.
Requirements:
- All UI labels, error messages, and status text in Dutch following
Amsterdam's Heldere Taal guidelines (clear, B1-level, active voice)
- Header with the Amsterdam logo and navigation (Dashboard, Nieuwe aanvraag)
- Footer with standard municipality links
- Use TypeScript strict mode
- No external UI libraries besides the Amsterdam Design System