Ga naar inhoud

Rooster (Frontend)

UI-Architectuur & Design

De roostermodule bestaat uit twee afzonderlijke mappen onder src/features/:

  • src/features/rooster/ - Het leesgerichte overzichtsscherm voor medewerkers (RoosterScreen).
  • src/features/rooster-planning/ - De volledige plannerinterface voor beheerders, inclusief instellingen.

De planner ondersteunt twee weergavemodi (ViewMode): taak (kolom = dag/dagdeel, rij = taak) en medewerker (kolom = dag/dagdeel, rij = medewerker). Een SegmentedControl schakelt tussen beide modi zonder route-overgang.

De BezettingHeader bovenaan de planner toont per dag een DonutChart (via react-native-svg) en een weektotaal met klikbare bezettingsoverlays. Op web worden deze overlays via een React DOM-portal buiten alle stapelcontexten gerenderd; op native via een transparante Modal.

Toewijzingen worden bewerkt via de CelModal, die twee modi heeft: - taak-mode: meervoudige selectie van beschikbare medewerkers voor een taak+dagdeel. - medewerker-mode: enkelvoudige taakkeuze per medewerker in een dagdeel, met een verwijderoptie.

De instellingenpagina (RoosterInstellingenScreen) is bereikbaar via een aparte route (/rooster-instellingen) en via een inlineknop in de BezettingHeader.

State & Data Flow

Bij het laden van de planner worden vier API-aanroepen parallel uitgevoerd. Alle wijzigingen in het planningsgrid worden lokaal bijgehouden in de PlanningGrid-state en na 1500ms automatisch opgeslagen via een debounced autosave. De BezettingHeader berekent bezettingsstatistieken rechtstreeks uit de lokale gridstate via roosterLib-hulpfuncties.

sequenceDiagram
    participant Planner
    participant roosterLib
    participant roosterApi
    participant Backend

    Planner->>Backend: parallel: getInstellingen / getEmployees / getAvailability / getWeek
    Backend-->>Planner: instellingen, medewerkers, beschikbaarheid, weekrooster

    Planner->>roosterLib: mapInstellingenResponse / normalizePlanningGrid
    Planner->>Planner: initialiseer lokale grid-state

    note over Planner: Gebruiker bewerkt cel via CelModal

    Planner->>roosterLib: setTaskAssignees / assignTask / removeAssignment
    Planner->>Planner: update grid-state (debounce 1500ms)
    Planner->>roosterApi: PUT /api/rooster/week/?week_start=...
    roosterApi-->>Planner: bijgewerkt WeekRoosterResponse (status, updated_at)

    note over Planner: Planner klikt Publiceren

    Planner->>roosterApi: PUT /api/rooster/week/ (final save)
    Planner->>roosterApi: POST /api/rooster/week/publish/?week_start=...
    roosterApi-->>Planner: published_at, status=published

Dirty-guard

De planner bewaakt onopgeslagen wijzigingen op twee lagen: 1. usePreventRemove (React Navigation) - onderschept stack-navigatie zoals de terugknop. 2. setNavigationGuard - onderschept URL-gebaseerde navigatie via breadcrumbs of de zijbalk.

Bij een dirty state toont een AppModal de keuze om op te slaan of te verwerpen.

Routes worden beheerd door Expo Router in app/:

  • /rooster - Roosteroverzicht voor medewerkers. Toegankelijk voor alle ingelogde gebruikers.
  • /planner - Interactieve planner. Vereist roster.edit; wordt anders teruggeleid naar /.
  • /rooster-instellingen - Configuratiescherm voor werkdagen, dagdelen, taken en vaste werkdagen. Vereist roster.manage_settings.

Bestandsstructuur & Verantwoordelijkheden

  • src/features/rooster/screens/RoosterScreen.tsx - Roosteroverzicht voor medewerkers.
  • src/features/rooster-planning/screens/RoosterPlannerScreen.tsx - Hoofdscherm van de interactieve planner; beheert alle state en orkestreert laad- en opslaglogica.
  • src/features/rooster-planning/screens/RoosterInstellingenScreen.tsx - Configuratiescherm voor roosterstructuur en vaste werkdagen.
  • src/features/rooster-planning/api/roosterApi.ts - API-client voor alle roostereindpunten.
  • src/features/rooster-planning/lib/roosterLib.ts - Pure hulpfuncties voor gridmutaties, beschikbaarheid, bezettingsstatistieken en weergavenamen.
  • src/features/rooster-planning/lib/roosterApiMappers.ts - Conversie tussen API-responses en frontend-typen; normaliseert de planninggrid.
  • src/features/rooster-planning/types/types.ts - Centrale typedefinitiess: Dagdeel, Task, Employee, WorkDay, PlanningGrid, MinBezettingConfig, EmployeeAvailabilityMap, ViewMode, ConceptState.
  • src/features/rooster-planning/components/BezettingHeader.tsx - Bezettingsbalk met donut-grafieken per dag, weektotaal, settings- en publiceerknop, en klikbare bezettingsoverlays.
  • src/features/rooster-planning/components/DonutChart.tsx - SVG-donutgrafiek (react-native-svg) voor bezettingsvisualisatie.
  • src/features/rooster-planning/components/RoosterMatrix.tsx - Exporteert TaakMatrix en MedewerkerMatrix: de scrollbare matrixtabellen voor beide weergavemodi.
  • src/features/rooster-planning/components/CelModal.tsx - Cel-interactiemodal in twee modi (taak en medewerker) via AppModal.
  • src/features/rooster-planning/components/InstellingenModal.tsx - Inlinemodal voor instellingen die wordt aangeroepen vanuit de planner.

Belangrijke bestanden

  • frontend/app/rooster.tsx
  • frontend/app/planner.tsx
  • frontend/app/rooster-instellingen.tsx
  • frontend/src/features/rooster/screens/RoosterScreen.tsx
  • frontend/src/features/rooster-planning/screens/RoosterPlannerScreen.tsx
  • frontend/src/features/rooster-planning/screens/RoosterInstellingenScreen.tsx
  • frontend/src/features/rooster-planning/api/roosterApi.ts
  • frontend/src/features/rooster-planning/lib/roosterLib.ts
  • frontend/src/features/rooster-planning/lib/roosterApiMappers.ts
  • frontend/src/features/rooster-planning/types/types.ts
  • frontend/src/features/rooster-planning/components/BezettingHeader.tsx
  • frontend/src/features/rooster-planning/components/CelModal.tsx
  • frontend/src/features/rooster-planning/components/RoosterMatrix.tsx
  • frontend/src/features/rooster-planning/components/DonutChart.tsx