Ga naar inhoud

Beschikbaarheid (Frontend)

De frontend van de module Beschikbaarheid is gebouwd met React Native (Expo) en biedt een intuïtieve interface voor het beheren van de wekelijkse inzetbaarheid.

UI-Architectuur & Design

De interface is ontworpen volgens een "mobile-first" benadering, maar schaalt naadloos naar desktop. Het hoofdscherm (BeschikbaarheidScreen) combineert navigatie, informatievoorziening en een interactief raster.

Componentenhiërarchie

graph TD
    A[BeschikbaarheidScreen] --> B[HeaderMobile / HeaderDesktop]
    A --> C[WeekNavigator]
    A --> D[AvailabilitySummaryBar]
    A --> E[AvailabilityCards]
    E --> F[DayCard]
    F --> G[AppCheckbox]
    A --> H[AppModal - Exit Guard]
    A --> I[BeschikbaarheidSkeleton]
  • WeekNavigator: Maakt het mogelijk om tussen verschillende weken te schakelen.
  • AvailabilitySummaryBar: Toont een visuele samenvatting van de geselecteerde beschikbaarheid.
  • AvailabilityCards: De kern-component die per dag een kaart toont met daarin de specifieke dagdelen (shifts).
  • Navigation Guard: Een essentieel onderdeel dat voorkomt dat gebruikers onbedoeld wijzigingen verliezen door middel van de usePreventRemove hook en een custom AppModal.

State & Data Flow

De state wordt lokaal beheerd binnen BeschikbaarheidScreen.tsx met behulp van React hooks.

sequenceDiagram
    participant U as Gebruiker
    participant S as BeschikbaarheidScreen
    participant A as beschikbaarheidApi
    participant B as Backend

    U->>S: Opent scherm / Wijzigt week
    S->>A: getWeek(weekStart)
    A->>B: GET /api/beschikbaarheid/
    B-->>A: Availability JSON
    A-->>S: Update grid state
    U->>S: Wijzigt selectie (checkbox)
    S->>S: Update lokale grid state
    U->>S: Klikt op Opslaan
    S->>A: saveWeek(weekStart, grid)
    A->>B: PUT /api/beschikbaarheid/
    B-->>S: Success / Update savedGrid
  • Grid State: De grid state houdt de huidige (mogelijk onopgeslagen) selectie bij: Record<number, Record<string, boolean>>.
  • Saved Grid: De savedGrid houdt de laatst opgeslagen staat bij om te kunnen vergelijken of er wijzigingen zijn (unsavedChangesCount).
  • Synchronisatie: Bij het wisselen van week wordt de data opnieuw opgehaald en de state gereset.
  • Route: /beschikbaarheid (Expo Router). Het routebestand redirect naar /login zolang de gebruiker niet is ingelogd.
  • Beveiliging: Beschikbaarheid is een basis-teammodule. Elke ingelogde medewerker kan de eigen beschikbaarheid bewerken; er is geen permissiecode die het scherm read-only maakt (het scherm zet bewerken altijd aan). De backend schrijft uitsluitend records voor de ingelogde gebruiker.
  • Modals: De AppModal wordt gebruikt voor de "Exit Guard" wanneer een gebruiker het scherm verlaat met onopgeslagen wijzigingen.

Bestandsstructuur & Verantwoordelijkheden

  • api/beschikbaarheidApi.ts: Bevat de functies voor communicatie met de backend API (GET en PUT).
  • components/AvailabilityCards.tsx: Rendert de lijst met dagkaarten.
  • components/AvailabilitySummaryBar.tsx: Toont de statistieken boven het raster.
  • components/skeletons/BeschikbaarheidSkeleton.tsx: Verzorgt de visuele placeholder tijdens het laden.
  • lib/availability.ts: Bevat pure utility functies voor grid-manipulatie (toggling, tellen, initialisatie).
  • screens/BeschikbaarheidScreen.tsx: De "Smart Component" die data ophaalt, state beheert en de UI-onderdelen componeert.
  • types/types.ts: TypeScript definities voor Shiften, Dagen en het Grid.

Belangrijke bestanden

  • src/features/beschikbaarheid/screens/BeschikbaarheidScreen.tsx
  • src/features/beschikbaarheid/lib/availability.ts
  • src/features/beschikbaarheid/api/beschikbaarheidApi.ts