Ga naar inhoud

Team (Frontend)

UI-Architectuur & Design

De module Team toont een overzicht van medewerkerkaarten. De focus ligt op het snel vinden van een collega en de gedeelde contactgegevens. Het scherm is responsief: op desktop een header met zijbalk, op mobiel een compacte koptekst met een uitklapbare zoekbalk en de onderste navigatie. Elke kaart (TeamMemberCard) toont een avatar of initialen, naam, functie, vaste werkdagen en contactchips, en respecteert daarbij de privacy-vlaggen uit de API.

State & Data Flow

TeamScreen haalt bij het laden de volledige teamlijst op via teamApi.listMembers. Dat roept het endpoint zonder pagineringsvlag aan, waardoor de backend de platte vorm { items: [...] } teruggeeft. Een apotheek heeft hooguit enkele tientallen teamleden, dus de lijst past in een keer. De data komt in lokale useState; zoeken gebeurt aan de clientzijde met matchesQuery op voornaam, achternaam en functie. De backend ondersteunt ook paginering en server-side zoeken (zie backend.md), maar de frontend gebruikt die voor Team nu niet.

TeamMemberCard bepaalt via getMemberVisibleFields (uit lib/teamPrivacy.ts) welke velden zichtbaar zijn. Is visible_to_team van een collega false, dan toont de kaart geen contactgegevens. Bellen en mailen lopen via tel:- en mailto:-links.

sequenceDiagram
    participant Gebruiker
    participant TeamScreen
    participant API as teamApi.ts
    participant BE as Backend

    Gebruiker->>TeamScreen: Navigeert naar /team
    TeamScreen->>API: listMembers(token)
    API->>BE: GET /api/team/members/
    BE-->>API: { "items": [...] }
    API-->>TeamScreen: medewerkers
    TeamScreen->>Gebruiker: Toont kaarten (client-side filterbaar)

De routing verloopt via Expo Router.

  • Route: /team (frontend/app/team.tsx).
  • Toegang: elke medewerker met een actieve sessie binnen de tenant. De route redirect naar /login zonder sessie. Er is geen aanvullende RBAC.

Bestandsstructuur & Verantwoordelijkheden

  • src/features/team/screens/TeamScreen.tsx: het scherm dat de lijst ophaalt en de client-side zoekfunctie beheert.
  • src/features/team/components/TeamMemberCard.tsx: de kaart per teamlid (avatar of initialen, functie, werkdagen, contactchips).
  • src/features/team/components/skeletons/TeamSkeleton.tsx: skeleton-rijen tijdens het laden.
  • src/features/team/api/teamApi.ts: client voor /api/team/members/.
  • src/features/team/types/teamMember.ts: typedefinities voor TeamMember, MemberPrivacySettings en VasteWerkdagEntry.
  • src/features/team/lib/teamPrivacy.ts: getMemberVisibleFields, dat de zichtbaarheid per veld bepaalt.

Belangrijke bestanden

  • frontend/app/team.tsx
  • frontend/src/features/team/screens/TeamScreen.tsx
  • frontend/src/features/team/components/TeamMemberCard.tsx
  • frontend/src/features/team/api/teamApi.ts