Staff Support Nav Prototype

Klikbare mockup van de navigatie van Staff Support HR webapp. Focus op navigatie, context en kaartpagina’s zoals beschreven in het PRD “Navigatie & Context Prototype”.

Features

• App shell met groene zijbalk, topbar met context selector, en content cards.
• Multi-context geheugen (laatst gekozen context per type).
• Context strip boven de search met uitklapbare lijst.
• UI active context die meeschakelt met pagina’s.
• Context-aware sidebar voor “Uren” en “Verlof”.
• Acties dropdown met context-afhankelijke snelle acties.
• Consistente “Terug naar kaart” CTA op actie- en mockpagina’s.
• Mock data voor organisaties, afdelingen en medewerkers (incl. Koen Bakker).

Techstack

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• React Context (state + localStorage)

Belangrijkste pagina’s

Kaarten:

• /medewerkers/[id]
• /afdelingen/[id]
• /organisaties/[id]

Acties (context-aware):

• /uren/medewerker
• /uren/afdeling
• /verlof/medewerker
• /verlof/goedkeuren

Overzichten:

• /medewerkers/overzicht
• /afdelingen/overzicht
• /organisaties/overzicht

Extra mock pagina’s (medium detail):

• /planning/overzicht
• /beschikbaarheid/overzicht
• /evenementen/overzicht
• /klokken/overzicht
• /verlof/overzicht
• /financieel/overzicht
• /financieel/kosten
• /relaties/overzicht
• /prestatie/overzicht
• /beheer/overzicht
• /nieuws/overzicht

Context model

• Multi-context store met selections per type + uiActiveType.
• Context types: medewerker, afdeling, organisatie, contractant, regio, administratie, contactpersoon, artikel, bestand, proces, project, relatie, taak.
• uiActiveType volgt de pagina (via usePageContextSync) en stuurt chip + acties.
• Selections worden opgeslagen in localStorage (staffsupport.context.v1).

Demo flows

• Medewerker → medewerkerkaart → uren → terug
• Afdeling → afdelingskaart → uren → terug
• Organisatie → organisatiekaart → acties → terug

Demo checklist

• Dashboard quick links werken (Koen, Management, Hotel Onder de Plantaan).
• Context strip open/close werkt en row click navigeert correct.
• Topbar selector zet context en navigeert naar kaart.
• Acties dropdown toont juiste acties per uiActiveType.
• Sidebar “Uren” en “Verlof” reageren op context.
• “Terug naar kaart” CTA klopt op alle actie/mock pagina’s.
• Banner “Kies context” opent modal en blijft op pagina.

Installatie

Vereisten:

• Node.js 18+ aanbevolen

Install:

npm install

Run lokaal:

npm run dev

Open:

http://localhost:3000

Clean build test

rm -rf node_modules .next
npm install
npm run build
npm run start

Wat kun je doen in de demo?

• Context kiezen via context strip of topbar selector.
• Vanuit overzichtspagina’s naar kaartpagina’s navigeren.
• Via de Acties dropdown snel naar context-acties gaan.
• Sidebar-items gebruiken voor context-afhankelijke routes.
• Context wisselen per type zonder eerdere selections kwijt te raken.

Troubleshooting

• Tailwind error? Check dat tailwindcss@3.x is geïnstalleerd en de dev server is herstart.
• Context reset? LocalStorage bevat staffsupport.context.v1 en kan handmatig worden gewist.