Ga naar inhoud

Statistieken (Frontend)

UI-Architectuur & Design

De module Statistieken in Remedice presenteert de geaggregeerde jaardata in een dashboard. Het hoofdscherm (StatistiekenScreen.tsx) bouwt het overzicht op uit kerncijfer-kaarten, een statusblok voor medicatiebeoordelingen, een cumulatieve trendgrafiek en uitsplitsingen per categorie. De layout schaalt mee met de schermbreedte (useBreakpoints): op desktop staan secties naast elkaar, op mobiel onder elkaar.

De visualisatie-componenten zijn:

  • StatCard.tsx: een enkel kerncijfer met icoon, geanimeerde waarde en toelichting (kleurvarianten blue, emerald, amber, slate, rose). Gebruikt voor de verwachte jaaroutput, Atlas-vragen en agendapunten.
  • BreakdownCard.tsx: een totaalcijfer met een horizontale balklijst per categorie, gebruikt voor gebruikers (per rol), nieuws en werkafspraken (per categorie).
  • TrendChartCard.tsx: een handgebouwde grafiek op basis van react-native-svg (geen externe charting-bibliotheek). Toont de werkelijke cumulatieve reviewlijn en een geprojecteerde lijn naar december, met tooltips per maand en drie kerncijfers (YTD, gemiddeld per maand, voorspelling einde jaar).
  • YearTabs.tsx: de jaar-selector, horizontaal scrollbaar op mobiel.
  • skeletons/StatistiekenSkeleton.tsx: de laadplaceholder die de vorm van het dashboard nabootst.

Het scherm rendert daarnaast inline een statusblok met drie tegels (in voorbereiding, voorbereid, uitgevoerd), een patient/afdeling-splitbalk en een nazendingen-kaart.

State & Data Flow

Het scherm houdt lokale state bij met useState: availableYears, selectedYear, data, en vlaggen voor laden, fouten en export. Twee useEffect-hooks reageren op het auth-token: de eerste laadt de beschikbare jaren, de tweede laadt de statistiek voor het geselecteerde jaar. Bij het wisselen van jaar via YearTabs wordt opnieuw opgehaald.

De API-laag (api/statistiekenApi.ts) bevat:

  • fetchAvailableYears(token): GET /api/statistieken/years/.
  • fetchYearStatistics(token, year): GET /api/statistieken/?year={year}.
  • getExportUrl(year): bouwt de export-URL op (geen request).

Tijdens het laden toont het scherm de skeleton zolang loadingYears || (loadingData && !data). Bij een fout zonder eerdere data verschijnt een foutmelding met een retry-knop. Voor een jaar zonder activiteit (alle tellingen nul) toont het scherm een EmptyState. De prognose voor de trendgrafiek wordt in het scherm berekend met een lineaire regressie (fitLinearRegression).

De Excel-export is uitsluitend beschikbaar op web (Platform.OS === "web"). De knop is niet aanwezig op native. Op web haalt handleExport het bestand op met fetch(getExportUrl(year)) inclusief Bearer-token, zet de respons om naar een Blob en start de download via een tijdelijk <a>-element. Zo wordt het token meegestuurd zonder de URL in de browser te openen.

sequenceDiagram
    participant Gebruiker
    participant Scherm
    participant API

    Gebruiker->>Scherm: Selecteert jaar in dashboard
    Scherm->>API: GET /api/statistieken/?year=...
    API-->>Scherm: Geaggregeerde JSON data
    Scherm->>Gebruiker: Toont kerncijfers, statusblok en trendgrafiek

    Gebruiker->>Scherm: Klikt op 'Exporteer Excel' (alleen web)
    Scherm->>API: fetch GET /api/statistieken/export/?year=... (Bearer-token)
    API-->>Scherm: xlsx als Blob
    Scherm->>Gebruiker: Start download via tijdelijk anker-element

De routing verloopt via Expo Router:

  • Route: /statistieken (frontend/app/statistieken.tsx), die StatistiekenScreen rendert.
  • Toegang: Het routebestand controleert hydratatie en sessie, en vereist de permissie statistieken.view. Ontbreekt die permissie, dan toont de route een ErrorState met variant forbidden in plaats van het dashboard.

Bestandsstructuur & Verantwoordelijkheden

  • src/features/statistieken/screens/StatistiekenScreen.tsx: De centrale schermcomponent die het dashboard opbouwt, de jaar-selectie beheert, de prognoseberekening uitvoert en de export aanstuurt.
  • src/features/statistieken/api/statistiekenApi.ts: Bevat fetchAvailableYears, fetchYearStatistics en getExportUrl.
  • src/features/statistieken/components/StatCard.tsx: Kaart voor een enkel kerncijfer met icoon en toelichting.
  • src/features/statistieken/components/BreakdownCard.tsx: Totaalcijfer met uitgesplitste lijst per categorie.
  • src/features/statistieken/components/TrendChartCard.tsx: Cumulatieve trendgrafiek (react-native-svg) met werkelijke en geprojecteerde lijn.
  • src/features/statistieken/components/YearTabs.tsx: Jaar-selector tussen de beschikbare jaren.
  • src/features/statistieken/components/skeletons/StatistiekenSkeleton.tsx: Laadplaceholder voor het dashboard.
  • src/features/statistieken/types.ts: TypeScript-definities (StatisticsYearData, ReviewStatusKey, MonthlyReviewsPoint, BreakdownItem).

Belangrijke bestanden

  • frontend/app/statistieken.tsx
  • frontend/src/features/statistieken/screens/StatistiekenScreen.tsx
  • frontend/src/features/statistieken/api/statistiekenApi.ts
  • frontend/src/features/statistieken/components/TrendChartCard.tsx
  • frontend/src/features/statistieken/types.ts