Visuele stijl-upgrade & implementatieplan

CONTEXT
Ik werk aan het Ares.sale platform (sales/contact-center CRM met vestigingen, planning, medewerkers, sales, uitbetalingen en financiële rapportage). Dit is de eerste van dertien stappen om het platform naar een consistente, verzorgde visuele stijl te tillen.

OPDRACHT
Vervang alle huidige kleurwaarden in de codebase door onderstaand vast kleursysteem, gedefinieerd als CSS-variabelen / design tokens:

--color-navy: #0B1D5C;         /* titels / koppen */
--color-ink: #0F172A;          /* broodtekst */
--color-muted: #64748B;        /* secundaire/metatekst */
--color-green: #059669;        /* positief - iconen, lijnen, tekst */
--color-green-bg: #ECFDF5;     /* positief - achtergrond badges */
--color-red: #DC2626;          /* negatief - iconen, lijnen, tekst */
--color-red-bg: #FEF2F2;       /* negatief - achtergrond badges */
--color-purple: #7C3AED;       /* aanduiding / secundair accent */
--color-purple-bg: #F5F3FF;
--color-blue: #0365ED;         /* primaire actieKleur, interactief, info — gelijk aan logo */
--color-blue-bg: #EFF6FF;
--color-border: #E2E8F0;
--color-bg-soft: #F8F9FC;

BETEKENISREGELS (leg deze ook vast in een commentaarblok bovenin het tokens-bestand):
1. Kop- en paginatitels (h1/h2/h3) altijd --color-navy. Nooit een andere kleur voor koppen.
2. Broodtekst en labels altijd --color-ink. Secundaire/metatekst (bijv. "vorig tijdvak", tijdstempels, helptekst) altijd --color-muted.
3. Groen/rood UITSLUITEND voor positieve/negatieve statusindicatie (omzetgroei, target behaald, afwijking, foutmeldingen, validatiefouten). Nooit decoratief of als merkkleur.
4. Paars uitsluitend voor "aanduiding": categorie-tags (bv. B2B/NC), secundaire reeks in grafieken, accentmarkering van een actief/geselecteerd item dat geen status is.
5. Lichtblauw is de enige primaire interactieve kleur: knoppen, links, actieve navigatie-items, hoofdreeks in grafieken, focus-states, geselecteerde datums.
6. Wit en de neutrale grijstinten (--color-border, --color-bg-soft) vormen de basis voor witruimte - vermijd dat vlakken direct tegen elkaar aan liggen zonder marge.

STAPPEN
1. Doorzoek de volledige codebase op losse hex-codes, rgb()/rgba()-waarden en Tailwind-kleurklassen die niet overeenkomen met bovenstaande tokens, en vervang elke gevonden waarde door de dichtstbijzijnde/semantisch juiste token.
2. Voeg een lint-regel of eenvoudige CI-check toe (grep-script of stylelint-regel) die toekomstige losse hex-codes buiten het tokens-bestand signaleert.
3. Controleer kleurcontrast: alle tekst-op-achtergrond combinaties moeten minimaal WCAG AA (4.5:1) halen.

EDGE CASES
- Componenten die nu geel/oranje gebruiken voor "waarschuwing" horen niet automatisch bij rood - beoordeel per geval of het een aanduiding (paars) of status (rood) betreft.
- Grafieken met meer dan twee reeksen: gebruik alleen lichtblauw en paars, herstructureer als een derde reeks nodig is.

LEVER OP: een centraal tokens-bestand, een lijst van aangepaste bestanden, de toegevoegde lint-regel/CI-check, en een samenvatting van eventuele contrastcorrecties.

CONTEXT
Bouwt voort op prompt 1 (kleurtokens). Het platform mengt op dit moment emoji, gekleurde vlakke pictogrammen en losse lettertekens door elkaar - dat oogt willekeurig en amateuristisch.

OPDRACHT
Vervang alle huidige iconen in het platform door één consistente iconenset.

Gebruik library: lucide-react (of Feather Icons als lucide niet beschikbaar is) - NIET mengen met emoji, oude Font Awesome-stijl iconen, custom PNG's of losse SVG's met een afwijkende stijl.

STIJL-REGELS
- Stroke-based (lijn-iconen), geen gevulde iconen, behalve kleine statusstippen/badges.
- Stroke-width consistent op 1.6-1.8 over de hele applicatie.
- Iconformaat: 16px in tabellen/labels, 18-20px in KPI-kaarten en statuskaarten, 22px in de hoofdnavigatie.
- Elk icoon in een KPI-kaart of statuskaart krijgt een vaste "badge"-achtergrond (tokens uit prompt 1): --color-blue-bg voor neutraal/informatief, --color-green-bg voor positief, --color-red-bg voor negatief, --color-purple-bg voor categorie/aanduiding.
- Vervang bestaande emoji (bv. feestje-icoon bij "target behaald") door een lijn-icoon (bv. check-circle) in --color-green.
- Klikbare iconen krijgen minimale touch-target van 32x32px.

DOORLOOP IN ELK GEVAL
- Hoofdnavigatie (elk item krijgt een icoon naast de tekst).
- KPI-kaarten op Dashboard, Financieel en Uitbetalingen.
- Statuslabels in tabellen (Sales, Medewerkers, Absentie).
- Het meldingen-paneel: elk meldingtype krijgt een vast icoon.
- Medewerkerskaarten en -detailpagina.
- Vestigingswisselaar en gebruikersmenu.

EDGE CASES
- Als een concept geen goede match heeft in lucide-react, kies het dichtstbijzijnde alternatief - documenteer die keuze.
- Iconen in donkere contexten gebruiken wit/lichte varianten, niet een andere iconenset.

LEVER OP
- Een overzicht van welk icoon bij welk label/concept hoort (referentie voor toekomstige features).
- Een korte lijst van plekken waar je een emoji hebt vervangen, met voor/na.

CONTEXT
Bouwt voort op prompt 1. Het platform heeft momenteel vijf verschillende implementaties van hetzelfde basisconcept "kies een periode": een dropdown met kalender-icoon op Dashboard, pijltjes met tekst op Sales, een dropdown met Engelse maandnamen op Financieel, pijltjes plus een losse "Huidige maand"-knop op Uitbetalingen, en een kaal datumveld op Afboekingen.

OPDRACHT
Bouw één herbruikbare periode-picker-component (<PeriodPicker />) en vervang daarmee alle vijf bestaande implementaties.

FUNCTIONELE EISEN
- Props: value (Date of {start, end}-range), mode ('month' | 'quarter' | 'day'), onChange, minDate/maxDate (optioneel).
- UI: links/rechts-pijltje + centraal klikbaar label dat dropdown-kalender opent.
- Geen los datumveld naast de picker, geen aparte "Huidige periode"-knop - integreer als snelkoppeling bovenin de dropdown.
- Taal: altijd Nederlandse maandnamen ("juli 2026"), nooit Engels.
- Toetsenbordondersteuning: pijltjestoetsen links/rechts navigeren, Enter opent dropdown, Escape sluit.
- URL-synchronisatie: gekozen periode in query-parameters (bv. ?period=2026-07).

STIJL
- Rand --color-border, tekst --color-ink, actieve/hover-status --color-blue-bg met tekst --color-blue.
- Consistente hoogte en padding ongeacht de pagina.

EDGE CASES
- Financieel gebruikt kwartalen (mode='quarter'), overige pagina's maanden (mode='month'), Afboekingen dagen (mode='day').
- Wanneer gekozen periode geen data oplevert, toont de component alleen de periode - lege-staat is verantwoordelijkheid van de pagina (zie prompt 6).

LEVER OP
- De <PeriodPicker />-component inclusief type-definities.
- De vijf aangepaste pagina's met de oude implementaties volledig verwijderd.
- Een korte demo met alle drie de modi (month/quarter/day).

CONTEXT
Uit de UX-analyse: bijna elke pagina toont een breadcrumb ("Almere >") onder de URL-structuur /establishment/... - behalve de Afboekingen-pagina, die geen breadcrumb toont en op een afwijkend URL-pad zit (/afboekingen in plaats van /establishment/afboekingen). Daarnaast tonen medewerker-detailpagina's een lang technisch UUID standaard zichtbaar, wat voor de meeste gebruikers ruis is.

OPDRACHT - DEEL 1: BREADCRUMBS EN URL-STRUCTUUR
- Breng de Afboekingen-pagina onder /establishment/afboekingen.
- Voeg de ontbrekende breadcrumb toe: "[Vestigingsnaam] > Afboekingen", exact hetzelfde patroon als andere pagina's.
- Controleer op meer afwijkende routes en trek ze gelijk.
- Documenteer de routing-conventie in een README of comment in de router-config.

OPDRACHT - DEEL 2: TECHNISCHE ID'S VERBERGEN
- Op de medewerker-detailpagina (tab Info): verplaats het UUID naar een ingeklapte "Toon technische details"-sectie (toggle, standaard dicht).
- Doorzoek de rest van het platform op vergelijkbare technische identifiers die standaard zichtbaar zijn voor eindgebruikers en pas hetzelfde patroon toe.
- Let op: functionele ID's die een gebruiker nodig heeft (bv. External ID in Sales-tabel) blijven zichtbaar.

EDGE CASES
- Zorg dat het wijzigen van de Afboekingen-URL geen bestaande bookmarks/links breekt: voeg een redirect toe.
- De "Toon technische details"-toggle onthoudt zijn state niet tussen paginabezoeken (altijd standaard dicht).

LEVER OP
- De gecorrigeerde route voor Afboekingen inclusief redirect.
- De toegevoegde breadcrumb.
- De ingeklapte technische-details-sectie op de medewerkerpagina.
- Een lijst van eventuele andere plekken waar je hetzelfde patroon hebt toegepast.

CONTEXT
Uit de UX-analyse: bij het openen van de Medewerkers-pagina en bij het klikken op een medewerkerkaart verschijnt kort een kale "Laden..."-tekst of een onzichtbare overgang, zonder skeleton-UI. Dat voelt trager aan dan het daadwerkelijk is en oogt onafgewerkt.

OPDRACHT
Bouw een set herbruikbare skeleton-componenten en pas ze toe op elke plek waar data asynchroon wordt geladen.

TE BOUWEN SKELETON-VARIANTEN
1. <SkeletonCard /> - voor KPI-kaarten en medewerkerkaarten: grijze puls-animatie (--color-bg-soft, subtiele shimmer) in exact dezelfde afmetingen als de uiteindelijke kaart.
2. <SkeletonTable /> - voor tabellen: toont 5-8 puls-rijen met kolombreedtes die overeenkomen met de uiteindelijke tabel.
3. <SkeletonDetail /> - voor detailpagina's: plekhouders voor avatar, naam, en de belangrijkste informatieblokken.

REGELS
- Skeletons moeten PIXEL-VOOR-PIXEL dezelfde afmetingen hebben als de uiteindelijke content - geen layout shift.
- Toon de skeleton alleen als het laden langer dan ~150ms duurt - bij razendsnelle responses is een flitsende skeleton storender.
- Kleur: puls-basis --color-bg-soft, geen andere kleuren.

DOORLOOP IN ELK GEVAL
- Medewerkers-lijst en medewerker-detailpagina.
- Sales-tabel, Uitbetalingen-tabel.
- Dashboard en Financieel bij het wisselen van periode.

EDGE CASES
- Bij een mislukte data-load: skeleton gaat over in foutmelding met "opnieuw proberen"-actie, niet oneindig pulseren.
- Op trage verbindingen ("Slow 3G") blijft de skeleton stabiel zonder te flikkeren.

LEVER OP: de drie skeleton-componenten, een lijst van waar ze zijn toegepast, en bewijs dat er geen layout shift optreedt.

CONTEXT
Uit de UX-analyse: "Geen opportunities gevonden voor juli 2026" met een klein icoontje nodigt niet uit tot actie. Daarnaast toont het Dashboard vroeg in een nieuwe maand rode -100%-badges bij nog lege metrics - zonder toelichting oogt dit als een storing i.p.v. een normale status.

OPDRACHT - DEEL 1: LEGE STATEN ACTIEGERICHT MAKEN
Bouw een herbruikbare <EmptyState />-component met: icoon (--color-blue-bg badge), duidelijke titel, korte uitleg, en primaire actieknop. Pas toe op:
- Sales Overzicht bij lege periode: "Nog geen sales deze periode" + knop "Vorige periode bekijken".
- Medewerkers-lijst bij leeg filterresultaat: "Geen medewerkers gevonden" + knop "Filters wissen".
- Afboekingen bij lege dag: "Geen afboekingen voor deze datum" + knop "Ga naar vandaag".
- Planning bij compleet lege week: onderscheid dit visueel van de normale sleepzones.

OPDRACHT - DEEL 2: CONTEXTUELE TOELICHTING BIJ NUL-WAARDEN
- Op Dashboard en Financieel: wanneer periode recent is gestart (eerste 3 dagen) EN vergelijking toont daling >90% puur door gebrek aan data, toon neutrale info-badge ("Periode net gestart", --color-blue-bg) IN PLAATS VAN de alarmerende rode -100%-badge.
- Conditie: minder dan 15% van de periode verstreken - niet puur op het percentage zelf.
- Voeg tooltip toe die uitlegt waarom de vergelijking nu niet betekenisvol is.

EDGE CASES
- Een lege periode aan het EINDE van een langere periode (laatste week loopt nog) is geen "net gestart".
- Een gebruiker die bewust een afgesloten lege periode bekijkt krijgt de neutrale lege staat, geen "periode net gestart"-melding.

LEVER OP: de <EmptyState />-component, de aangepaste nul-waarde-logica op Dashboard en Financieel, en een overzicht van alle plekken met een concrete vervolgactie.

CONTEXT
Uit de UX-analyse: de vestigingswisselaar is de belangrijkste contextschakelaar (8 vestigingen, franchise-hiërarchie: Groningen > Almere/Zwolle > Hoofddorp/Apeldoorn/Leeuwarden/Enschede) maar oogt als een standaard formulierveld, waardoor gebruikers licht over het hoofd kunnen zien dat ze de context wisselen.

OPDRACHT
Herontwerp de vestigingswisselaar tot een duidelijk herkenbare, prominente component.

SPECIFICATIE
- Toon een klein gebouw-icoon (uit prompt 2) links van de huidige vestigingsnaam.
- Geef de component achtergrondkleur --color-blue-bg zodat hij zich onderscheidt van gewone formuliervelden.
- Toon de franchise-hiërarchie in de dropdown: vestigingen gegroepeerd onder hun regio (bv. "Groningen" als sectiekop, met "Almere", "Zwolle" ingesprongen eronder).
- Voeg zoekveld toe bovenin de dropdown zodra er meer dan 8 vestigingen zijn.
- Bij het wisselen: toon korte visuele bevestiging (toast "Overgeschakeld naar [vestiging]").

TOEGANKELIJKHEID
- Volledig bruikbaar via toetsenbord (pijltjestoetsen navigeren, Enter selecteert, typen springt naar vestiging op naam).
- Duidelijke focus-state (--color-blue rand bij focus).

EDGE CASES
- Gebruikers met toegang tot slechts één vestiging zien geen dropdown-pijltje - toon alleen de naam met icoon, niet-klikbaar.
- Breadcrumb (zie prompt 4) beweegt direct mee met gekozen vestiging.

LEVER OP
- De herontworpen <LocationSwitcher />-component.
- Een korte demo met minstens 3 niveaus franchise-hiërarchie.
- Bevestiging dat toetsenbordnavigatie werkt.

CONTEXT
Bouwt voort op prompt 1 (kleuren) en 2 (iconen). Dit is de eerste van vijf prompts die de infopagina's visueel verrijken - het Dashboard is een lijst van tekstkaarten geworden waar eigenlijk een lijngrafiek, verdeling en trends thuishoren.

OPDRACHT
Herbouw de Dashboard-pagina (/establishment/dashboard) zodat de belangrijkste KPI's visueel worden getoond in aanvulling op - niet ter vervanging van - de bestaande cijfers. Gebruik recharts (of Chart.js als dat al in het project zit).

TOE TE VOEGEN
1. Omzettrend: lijngrafiek van de laatste 6 maanden omzet, hoofdkleur --color-blue, gevulde area onder de lijn op 8% opacity. Huidige (lopende) maand als apart gemarkeerd punt, tooltip met exacte bedrag en datum bij hover.
2. Lead type verdeling (ZP vs NC): donut chart, kleuren --color-blue en --color-purple, percentagelabel in het midden.
3. Sparklines: kleine sparkline (laatste 6 datapunten, geen assen/labels) onder de KPI-kaarten (Contract Value, Omzet/shift, Omzet/uur) met --color-blue op 40% opacity.
4. Behoud bestaande cijfers/labels - grafieken zijn AANVULLING. Layout: grafiekenrij bovenaan (2/3 lijngrafiek, 1/3 donut), KPI-kaarten met sparklines eronder.
5. Gebruik uitsluitend kleurtokens uit prompt 1.

RESPONSIVE GEDRAG
- Op smallere schermen stapelt de grafiekenrij verticaal: eerst lijngrafiek, dan donut, elk over volledige breedte.

LEGE EN FOUTSTATEN
- Gebruik skeleton-component uit prompt 5 tijdens laden.
- Bij nul-data: toon lege-staat-aanpak uit prompt 6 (neutrale toelichting).
- Bij API-fout: foutmelding in grafiekvak met "opnieuw proberen"-knop.

PRESTATIES
- Cache grafiekdata per gekozen periode zodat wisselen tussen eerder bekeken periodes niet opnieuw opgehaald hoeft te worden.

LEVER OP
- De herbouwde Dashboard-pagina.
- De losse grafiekcomponenten (LineChart, DonutChart, Sparkline) herbruikbaar voor latere prompts (9, 11, 12).
- Screenshots met echte en met lege data.

CONTEXT
Bouwt voort op prompt 1 en 2. De TCV-targets per kwartaal staan nu als vier bijna identieke tekstblokken met een dunne voortgangsbalk - het verschil tussen een behaald target (Q1, 100%) en een net gestart kwartaal (Q3, 0%) valt niet meteen op.

OPDRACHT
Vervang op de Financieel-pagina (/establishment/financieel) de TCV-target-tekstblokken door radiale voortgangsindicatoren (gauges).

SPECIFICATIE PER KWARTAAL-KAART
- Donut/gauge met stroke --color-blue voor 0-99% voortgang, --color-green zodra 100%+ behaald.
- Percentage groot in het midden van de gauge, in --color-navy. Subtiele animatie die de gauge van 0 naar werkelijke waarde vult bij laden (max. 600ms, geen herhaling bij re-renders).
- Onder de gauge: kwartaalnaam (bold) + "behaald / target" in --color-muted.
- Huidig kwartaal krijgt opvallende rand (2px --color-blue).
- Kwartalen zonder target: gestippelde, uitgegrijsde gauge met "geen target", niet hoverbaar.
- Tooltip bij hover met exacte bedragen (behaald, target, resterend, dagen resterend).
- Toegankelijkheid: aria-label met volledige informatie in tekstvorm (bv. "Q2: 90 procent behaald, 1,48 miljoen van 1,65 miljoen euro").

HERGEBRUIK
Gebruik hetzelfde gauge-component ook voor de "Target [vestiging]"-kaarten verderop. Bouw als herbruikbaar component:

<RadialTarget value={{...}} target={{...}} label={{...}} current={{boolean}} />

EDGE CASES
- Een target dat ver overschreden is (bv. 150%) mag de gauge niet laten "overlopen" - cap op 100% visueel, toon werkelijke percentage (150%) als tekst.
- Negatieve of corrupte data toont een duidelijke foutstaat i.p.v. een kapotte gauge.

LEVER OP
- Het herbruikbare <RadialTarget />-component met type-definities.
- De aangepaste Financieel-pagina.
- Bevestiging van de aria-labels/toegankelijkheid.

CONTEXT
Bouwt voort op prompt 1, 2 en 3. De Sales-tabel bevat waardevolle data maar oogt als een ruwe export: geen mogelijkheid om kolommen te tonen/verbergen, sorteericoontjes alleen bij de datumkolom, en statuslabels met geel/indigo/grijs door elkaar zonder systeem.

OPDRACHT
Verbeter de Sales-tabel (/establishment/sales/overview) zonder bestaande functionaliteit te verwijderen.

VISUELE VERBETERINGEN
1. Voeg per rij in de Omzet-kolom een horizontale voortgangsbalk toe (breedte relatief aan de hoogste omzetwaarde), kleur --color-blue. Numerieke waarde blijft rechts ernaast.
2. Verhoog de verticale padding per rij naar minimaal 12px boven/onder.
3. Rijen met status "Geannuleerd" krijgen gedimde tekstkleur (--color-muted) voor alle celwaarden - oog gaat automatisch naar actieve rijen.
4. Statuslabels uitsluitend volgens kleursysteem: --color-green-bg voor Netto Sale, --color-red-bg voor Geannuleerd, --color-blue-bg voor Open, --color-purple-bg voor Happy Call en leadtype-tags (B2B/B2C).
5. Sorteericoontjes aan ALLE sorteerbare kolomkoppen (Medewerker, Product, TCV, Omzet), niet alleen Datum.

FUNCTIONELE VERBETERINGEN
6. Kolomconfiguratie: "Kolommen"-knop die een dropdown opent waarmee de gebruiker kolommen kan tonen/verbergen. Onthoud de keuze per gebruiker (localStorage of gebruikersvoorkeur in de backend).
7. Tooltip bij statuslabels waarvan de betekenis niet vanzelf spreekt (bv. "Happy Call" - één zin uitleg).
8. Gebruik de periode-picker uit prompt 3.

EDGE CASES
- Bij zeer lange productnamen: knip af met ellipsis, toon volledige naam in tooltip bij hover.
- Als alle kolommen worden verborgen op één na: waarschuwing dat minimaal twee kolommen zichtbaar moeten blijven.

LEVER OP
- Een herbruikbaar <DataTable />-patroon (kolomconfiguratie, sortering, rijstyling) toepasbaar op tabellen in prompt 11 en 12.
- De aangepaste Sales-tabel.
- Documentatie van de kolomconfiguratie-opslag.

CONTEXT
Bouwt voort op prompt 1, 2 en 10 (DataTable-patroon). Conversie en risico van medewerkers zijn nu pas zichtbaar na het lezen van cijfers in een tabelrij. De Planning-pagina toont alleen sleepzones zonder overzicht van de bezetting, en het slepen heeft geen klikbaar alternatief.

OPDRACHT - DEEL 1: MEDEWERKERS (/establishment/employees)
1. Voeg op elke medewerkerkaart een dunne ring toe rond de avatar-initialen die de conversieratio toont (0-100%): --color-blue als basis, --color-green bij gezonde conversie, --color-red bij hoog afvalpercentage (gebruik bestaande "hoog risico"-drempelwaarde uit het platform).
2. Op de medewerker-detailpagina (tab Sales): lijngrafiek van sales per week, --color-blue, met hetzelfde LineChart-component als gebouwd in prompt 8 (hergebruik, niet opnieuw bouwen).
3. Pas <DataTable />-patroon uit prompt 10 toe op tabelweergaven binnen Medewerkers.
4. Gebruik skeleton-states uit prompt 5 bij laden.

OPDRACHT - DEEL 2: PLANNING (/establishment/planning/shifts)
5. Voeg bovenaan de weekweergave een compacte bezettingsgrafiek toe: mini-balk per dag die geplande shifts toont t.o.v. streefaantal (--color-blue voor gepland, --color-bg-soft voor restant). Streefaantal instelbaar per vestiging, niet hardcoded.
6. Voeg naast elke bestaande sleepzone een klein "+"-knopje toe (minimaal 32x32px klikgebied) dat hetzelfde toevoeg-dialoogvenster opent als het slepen. Dit is een VOLWAARDIG alternatief - beide paden leiden tot exact dezelfde actie.
7. Doe hetzelfde voor de "Sleep hier om afwezig te melden"-zones.
8. Gebruik <EmptyState />-component uit prompt 6 wanneer een volledige week leeg is.

EDGE CASES
- Medewerker zonder shifts/sales in de gekozen periode toont ring op 0% in neutrale kleur (--color-muted), niet automatisch rood.
- Bezettingsgrafiek moet correct omgaan met feestdagen/gesloten dagen (streefaantal 0).

LEVER OP
- De aangepaste Medewerkers-lijst, -detailpagina en Planning-pagina.
- Bevestiging dat het "+"-alternatief exact dezelfde flow triggert als slepen.
- Het instelbare streefaantal per vestiging (waar en hoe dit wordt beheerd).

CONTEXT
Bouwt voort op prompt 1, 2, 3, 4, 5, 6 & 10. Uitbetalingen toont uren en salaris uitsluitend als cijfers in een tabel. Afboekingen toont bij data alleen een kale lijst en bij geen data een lege pagina zonder enig historisch overzicht.

OPDRACHT - DEEL 1: UITBETALINGEN (/establishment/fees/overview en /freelancers)
1. Voeg per medewerkersrij een gestapelde horizontale balk toe die basissalaris vs. commissie toont (--color-blue voor basissalaris, --color-purple voor commissie). Numerieke kolommen (Basissalaris, Provisie, Totaal) blijven gewoon zichtbaar.
2. Voeg een legenda toe boven de tabel die de kleurbetekenis uitlegt.
3. Pas <DataTable />-patroon uit prompt 10 toe (sorteerbare kolommen, consistente rijstyling, skeleton-states uit prompt 5).
4. Gebruik de periode-picker uit prompt 3.

OPDRACHT - DEEL 2: AFBOEKINGEN (/establishment/afboekingen, zie ook prompt 4 voor URL-correctie)
5. Voeg bovenaan de pagina een trendgrafiek toe: staafdiagram van het aantal afboekingen per dag over de laatste 14 dagen. Kleur --color-blue voor dagen op of boven de norm, --color-red voor dagen daaronder (gebruik bestaande "lage afboekingen"-norm, bv. 37 afboekingen).
6. Voeg een horizontale referentielijn toe op het niveau van de norm.
7. Vervang de huidige lege pagina door de <EmptyState />-component uit prompt 6, met de trendgrafiek er nog steeds bovenaan zichtbaar.
8. Voeg per medewerker/agent een kleine indicator toe die aangeeft of deze boven of onder de individuele norm zit.

EDGE CASES
- Op de eerste dag dat een vestiging actief is: toon alleen de beschikbare dagen, geen lege placeholder-staven.
- Trendgrafiek en onderliggende lijst/dagweergave gebruiken dezelfde databron - nooit tegenstrijdige aantallen.

LEVER OP
- De aangepaste Uitbetalingen-pagina('s) met gestapelde balk en legenda.
- De aangepaste Afboekingen-pagina met trendgrafiek, referentielijn en lege-staat.
- Bevestiging dat beide pagina's het <DataTable />- en <EmptyState />-patroon hergebruiken.

CONTEXT
Bouwt voort op prompt 1 en 2. Dit is een toekomstgerichte, optionele prompt (Fase D) - pas oppakken nadat Fase A t/m C zijn afgerond. Het platform heeft nu losse zoekbalken per pagina die prima werken voor de huidige schaal, maar niet meeschalen naarmate het aantal medewerkers, sales en vestigingen groeit.

OPDRACHT
Bouw een platformbrede zoekfunctie, oproepbaar met Cmd+K (Mac) / Ctrl+K (Windows) vanaf elke pagina.

SPECIFICATIE
- Een modal/overlay met zoekveld bovenaan (autofocus bij openen) en gecategoriseerde resultaten eronder: Medewerkers, Sales/opportunities, Vestigingen, Instellingen-pagina's.
- Toon per resultaat een klein icoon (uit prompt 2) dat het type aangeeft, plus de belangrijkste context (bv. bij medewerker: naam + vestiging + functie).
- Zoek "fuzzy" (kleine typefouten getolereerd) en doorzoek ook relevante metadata (e-mailadres bij medewerkers, productnaam bij sales).
- Toetsenbordnavigatie: pijltjestoetsen bewegen door resultaten, Enter opent, Escape sluit.
- Toon bij lege zoekopdracht een korte lijst "recent bekeken" items als startpunt.
- Voeg een klein zoekicoon met "Cmd+K"-hint toe in de hoofdnavigatie.

PRESTATIES EN SCHAAL
- Debounce zoekopdracht (150-200ms).
- Limiteer resultaten per categorie (top 5) met "toon alle N resultaten"-link.

EDGE CASES
- Gebruikers met beperkte rechten zien alleen zoekresultaten binnen hun toegangsbereik.
- Bij geen enkel resultaat: toon <EmptyState /> uit prompt 6 met "niets gevonden voor [zoekterm]".

LEVER OP
- De <GlobalSearch />-component inclusief sneltoets-registratie.
- Backend-endpoint(s) om gecombineerd te zoeken over medewerkers, sales en vestigingen.
- Bevestiging van toetsenbordnavigatie en rechten-filtering.