Ga naar inhoud

Medicatiebeoordeling (Frontend)

UI-Architectuur & Design

De frontend van de module Medicatiebeoordeling is gebouwd in React Native met Expo Router. De module bestaat uit acht teamschermen plus een publieke patiëntpagina. Het patiëntdossier is het zwaartepunt en presenteert alle klinische data, analyses, het patiëntgesprek en de Atlas-zijbalk voor één patiënt.

  • Schermen staan in src/features/medicatiebeoordeling/screens/ en worden vanuit de Expo Router-routes in app/medicatiebeoordeling/ aangeroepen.
  • Het dossier groepeert medicatie per Jansen-categorie, met terugval op atc3_omschrijving en uiteindelijk de groep "Overig".
  • Aandachtspunten uit de analyses komen via dedicated kaart- en heatmapcomponenten. Indicatie- en labwaarde-hints uit extra_criteria zijn toelichting, geen blokkade.
  • Gedeelde patronen: AppModal voor modals, ConfirmDialog voor bevestigingen, useToast() voor flash-feedback, skeletons in components/skeletons/ voor pre-render fetches, en SegmentedControl voor de scope-keuze. Lijsten gebruiken PaginatedTable (historie, patiëntrechten) of cursor-gebaseerd laden (uitnodigingen).
  • Permissiegating: edit-acties vereisen review.edit, standaardvragen review.manage_settings, uitnodigingen review.manage_invites, patiëntrechten review.dsar_export/review.erase_patient.
graph TD
    R1[app/medicatiebeoordeling/index] --> S1[Overzicht]
    R2[app/medicatiebeoordeling/nieuw] --> S2[Nieuwe beoordeling]
    R3["app/.../[id]/[patientId]"] --> S3[Patientdossier]
    R4["app/.../afdeling/[naam]"] --> S4[Afdeling]
    R5[app/.../historie] --> S5[Historie]
    R6[app/.../uitnodigingen] --> S6[Uitnodigingen]
    R7[app/.../instellingen] --> S7[Instellingen]
    R8[app/.../patientrechten] --> S8[Patientrechten]
    S3 --> A[AnalysesSection + BijwerkingenHeatmap + MaagbeschermingCard]
    S3 --> G[GesprekSection + OpnameModal]
    S3 --> C[usePatientCollab + CollaborativeTextInput]
    S3 --> X[atlas/PatientAtlasSidebar]

Schermen

Overzicht

Route /medicatiebeoordeling (MedicatiebeoordelingDashboardScreen). Instapscherm met tegels, snelacties (QuickActionGrid, PrimaryActionCard) en de recente reviews (RecentReviewsList). GlobalReviewSearch opent een zoek-popover over alle reviews. Data via listReviews uit reviewsApi; RecentReviewsListSkeleton tijdens het laden.

Nieuwe beoordeling

Route /medicatiebeoordeling/nieuw (NieuweMedicatiebeoordelingScreen, slide-from-bottom). Verzamelt AIS, optioneel HIS, scope (SegmentedControl Afdeling/Patient, alleen bij Medimo), patiëntnaam, geboortedatum (DutchDateInput) en tekst of een PDF (Dropzone, magic-byte-check). Koppelt aan een bestaand profiel of afdeling via zoekvelden (searchPatientProfielen, listAfdelingen); NameMismatchModal en HistorieWarningModal vangen conflicten. Billing-checks tonen ReadOnlyBanner/FirstOverageModal. Verzenden roept createReview of createReviewFromFile aan en pollt daarna processing_status (zie State & Data Flow).

Patiëntdossier

Route /medicatiebeoordeling/[id]/[patientId] (PatientDetailScreen). Het hoofdscherm leest id en patientId uit de route en haalt het dossier via reviewsApi. Onderdelen:

  • Medicatie en analyses: MedicatieGroepCard per Jansen-groep; AnalysesSection rendert STOPP-NL V2, ACB, dubbelmedicatie en standaardvragen, met BijwerkingenHeatmap en MaagbeschermingCard als aparte visualisaties.
  • Klinische hints: contra-indicaties, allergieën en labwaarden worden in AppModal-dialogen toegevoegd met atcLookup/icpcLookup/labwaardenLookup.
  • Patiëntgesprek: GesprekSection met OpnameModal (consent, MicrofoonTest, WaveVisualizer, LiveTranscriptView), aangestuurd door useGesprek, useGesprekOpname en useOpnameWarnings.
  • Realtime samenwerking: usePatientCollab houdt presence en veld-sync bij; CollaborativeTextInput, CollabPill en CollabAvatarStack tonen mede-bewerkers.
  • Atlas-zijbalk: atlas/PatientAtlasSidebar met AtlasTab (RAG-chat) en HistorieTab.
  • Notities, audit en export: AlgemeenSection, AuditTimeline en de export-actie in ReviewActionFooter. Statuswijziging (In voorbereiding/Voorbereid/Uitgevoerd) gebeurt inline.

Afdeling

Route /medicatiebeoordeling/afdeling/[naam] (AfdelingDetailScreen). Toont alle patiënten van een afdelingsreview in ReviewPatientsTable, met statuswijziging, export en verwijderen via ReviewActionFooter en ConfirmDialog. Data via listReviews({ afdeling }), updateReview, deleteReview en downloadAfdelingExport.

Historie

Route /medicatiebeoordeling/historie (HistorieScreen, zichtbaar label Patiëntdossiers). Twee PaginatedTable-overzichten (afdelingen en patiëntreviews) via usePagedTable, met server-side paginatie en delete per rij. Bevat de subtiele doorgang naar Patiëntrechten (alleen bij review.dsar_export/review.erase_patient).

Uitnodigingen

Route /medicatiebeoordeling/uitnodigingen (UitnodigingenDashboardScreen). Cursor-gebaseerd geladen lijst met statusfilters. CreateInvitationModal zoekt een patiëntprofiel, kiest kanalen (e-mail/SMS/brief), vult adres of telefoonnummer aan en toont een preview (InvitationPreviewModal) plus verbruik (InvitationUsageStrip); precheck valideert opt-out en bundel vóór verzending. InvitationRow biedt intrekken (RevokeInvitationConfirmModal) en communicatievoorkeuren (CommunicatievoorkeurenModal). Data via invitationsApi.

Publieke patiëntpagina: PatientInvitationPublicScreen (token-link, geen login) gebruikt publicInvitationsApi om de uitnodiging te tonen en de patiënt te laten accepteren, weigeren of zich per kanaal af te melden. De pagina is noindex en toont alleen de kanalen die de tenant heeft ingeschakeld (getClientConfig).

Instellingen

Route /medicatiebeoordeling/instellingen (StandaardvragenInstellingenScreen, vereist review.manage_settings). CRUD op standaardvragen: titel, omschrijving, categorie, primaire ATC-triggers en logische regels (AND/AND_NOT) plus indicatie- en labwaardehints. ATC/ICPC/lab-lookups via de bijbehorende endpoints, herordenen via drag-handle, en een unsaved-changes-guard die navigatie blokkeert bij openstaande wijzigingen.

Patiëntrechten

Route /medicatiebeoordeling/patientrechten (PatientRechtenScreen, vereist review.dsar_export of review.erase_patient). Doorzoekbare PaginatedTable van patiëntprofielen (inclusief dossiers zonder reviews via include_orphaned). Per dossier een DSAR-export (AVG art. 15) en de tweestaps wis-flow in PatientErasureModal: eerst een verzoek met motivering, daarna een definitieve bevestiging met BEVESTIG plus een verse authenticatorcode (Tier-3 step-up).

State & Data Flow

State is per scherm; elk scherm haalt zijn eigen data via reviewsApi/invitationsApi. De terugkerende patronen:

  • Aanmaak-poll: na createReview zet de backend processing_status="processing"; het scherm pollt getReviewDetail tot done en navigeert dan naar afdelingsoverzicht (meerdere patiënten) of patiëntdossier (één patiënt).
  • Realtime samenwerking: usePatientCollab opent een WebSocket via CollabWsTicketView en herlaadt secties op patient_data_changed. Bewerkbare tekstvelden dragen een versie zodat de backend conflicten opvangt.
  • Gespreks-pipeline: de opname wordt per chunk geüpload; na finalisatie pollt het scherm gesprek/status/ tot samenvatting_status DONE of FAILED is.
  • Export-poll: export-acties maken een job aan en pollen exports/<id>/ tot een presigned download-URL beschikbaar is.
sequenceDiagram
    participant UI as PatientDetailScreen
    participant API as reviewsApi
    participant BE as Backend (run_review_task)
    participant WS as PatientCollabConsumer

    UI->>API: createReview(scope, patient_naam?, ais, his)
    API->>BE: POST /reviews/
    BE-->>API: 201 review (processing_status=processing)
    UI->>API: getReviewDetail(id) [poll]
    BE-->>API: processing_status=done + warnings
    UI->>API: GET /reviews/{id}/patients/{patientId}/
    BE-->>UI: dossier
    UI->>WS: connect via CollabWsTicketView
    WS-->>UI: patient_data_changed (editor_name, reason)

De routebestanden in app/medicatiebeoordeling/ zijn dunne wrappers die de schermen importeren; de stack staat in _layout.tsx (fade, geen header). Alle routes vereisen review.view plus de eventuele StepUpGate-elevatie.

  • /medicatiebeoordeling/ - Overzicht.
  • /medicatiebeoordeling/nieuw - Nieuwe beoordeling (slide-from-bottom).
  • /medicatiebeoordeling/[id]/[patientId] - Patiëntdossier.
  • /medicatiebeoordeling/afdeling/[naam] - Afdeling.
  • /medicatiebeoordeling/historie - Historie (label Patiëntdossiers).
  • /medicatiebeoordeling/uitnodigingen - Uitnodigingen.
  • /medicatiebeoordeling/instellingen - Instellingen (review.manage_settings).
  • /medicatiebeoordeling/patientrechten - Patiëntrechten (review.dsar_export/review.erase_patient).

Na een nieuwe review navigeert de aanmaakflow naar /afdeling/[naam] bij meerdere patiënten of naar /[id]/[patientId] bij één patiënt.

Bestandsstructuur & Verantwoordelijkheden

  • screens/ - de acht teamschermen plus PatientInvitationPublicScreen.tsx.
  • components/ - kaart-, analyse-, gespreks-, collab- en uitnodigingscomponenten (waaronder AnalysesSection, MedicatieGroepCard, BijwerkingenHeatmap, MaagbeschermingCard, GesprekSection, OpnameModal, CollaborativeTextInput, CreateInvitationModal, PatientErasureModal, AuditTimeline).
  • components/atlas/ - de in-context Atlas-zijbalk (PatientAtlasSidebar, AtlasTab, HistorieTab).
  • components/skeletons/ - skeleton-componenten per scherm en sectie.
  • api/ - reviewsApi.ts (reviews, patiënten, analyses, mutaties, lookups, profielen, DSAR/erasure), gesprekApi.ts (opname/transcriptie), invitationsApi.ts en publicInvitationsApi.ts (uitnodigingen).
  • hooks/ - usePatientCollab.ts, useGesprek.ts, useGesprekOpname.ts, useOpnameWarnings.ts.
  • lib/ - jansenGroups.ts/atcToJansen.json (preview-mapping), attentionItems.ts (aggregatie aandachtspunten), exportDownload.ts (download met polling).
  • types/ - review.ts, invitation.ts.

Belangrijke bestanden

  • frontend/app/medicatiebeoordeling/_layout.tsx
  • frontend/app/medicatiebeoordeling/[id]/[patientId].tsx
  • frontend/src/features/medicatiebeoordeling/screens/PatientDetailScreen.tsx
  • frontend/src/features/medicatiebeoordeling/screens/NieuweMedicatiebeoordelingScreen.tsx
  • frontend/src/features/medicatiebeoordeling/api/reviewsApi.ts
  • frontend/src/features/medicatiebeoordeling/hooks/usePatientCollab.ts
  • frontend/src/features/medicatiebeoordeling/components/skeletons/PatientDetailSkeleton.tsx