f8904db3e9
Fixed runtime error in release notes pages: - Removed unused MDXRemote import from lib/mdx/releases.ts - Fixed MDXComponents type import in mdx-components.tsx - Added @types/mdx as dev dependency Pages now load correctly: - /releases (overview) - /releases/authentication - /releases/release-notes-system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
47 KiB
47 KiB
Mini-ECD Interface Mocks & User Flow
Navigation Architecture: Two-Level System
LEVEL 1: Behandelaar Context - Praktijkbeheerder overstijgend
- Dashboard → Behandelaar overzicht (caseload, taken, berichten)
- Cliënten → Zoeken, filteren, recent bekeken
- Agenda → Behandelaar agenda (alle afspraken)
- Rapportage → BI dashboards (KPI's, statistieken)
LEVEL 2: Client Dossier Context - Individuele cliënt focus
- Dashboard → Dossier overzicht (laatste info, afspraken)
- Intake → Gesprekken en notities
- Diagnose → DSM-classificatie, probleemprofiel
- Behandelplan → SMART doelen, interventies
- Rapportage → Client voortgang en metrics
User Flow Overview
START: Behandelaar Dashboard (Level 1)
↓
[Sidebar: Dashboard | Cliënten | Agenda | Rapportage]
↓
Klik "Cliënten"
↓
[Cliënten Lijst met zoek/filter] ←────────────────┐
↓ (klik op cliënt rij) │
↓ │
⚡ CONTEXT SWITCH naar Level 2 ⚡ │
↓ │
[Sidebar verandert] │
[Header toont: "Bas Jansen ▼"] │
↓ │
[Client Dashboard - Bas Jansen] ←──────┐ │
↓ │ │
[Sidebar: ← Cliënten | Dashboard | Intake | ... ]│
↓ │ │
├─→ [Intake] │ │
├─→ [Diagnose] │ │
├─→ [Behandelplan] │ │
└─→ [Rapportage] │ │
↓ │ │
(sidebar menu switch binnen dossier)─┘ │
↓ │
(klik "← Cliënten" in sidebar)────────────────┘
↓
⚡ CONTEXT SWITCH terug naar Level 1 ⚡
↓
[Terug naar Cliënten Lijst]
↓
(header dropdown "Bas Jansen ▼") → Quick switch naar andere client
↓
[Client Dashboard - Anna de Vries]
LEVEL 1 MOCKS: Behandelaar Context
Mock 1A: Behandelaar Dashboard (Entry Point)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD [Zoek cliënt...] │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ Dashboard ◄ │ Dashboard │
│ Cliënten │ Welkom terug, Dr. van den Berg │
│ Agenda │ │
│ Rapportage │ ┌──────────────┬──────────────┬──────────────┐ │
│ │ │ Caseload │ Aandachts- │ Berichten │ │
│ │ │ 24 actief │ punten: 3 │ 2 nieuw │ │
│ │ │ 2 wachtlijst │ │ │ │
│ │ └──────────────┴──────────────┴──────────────┘ │
│ │ │
│ │ Behandelplannen concept: │
│ │ • Bas Jansen - Review nodig │
│ │ • Anna de Vries - Nog opstellen │
│ │ │
│ │ Aankomende afspraken (vandaag): │
│ │ • 14:00 - Peter Smit (Intake) │
│ │ • 16:30 - Bas Jansen (Sessie 3) │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Bekijk caseload overzicht en statistieken
→ Klik op aandachtspunt: navigeer naar relevante pagina
→ Klik op client naam: navigeer naar client dossier (Level 2 switch)
→ Sidebar navigatie naar andere Level 1 schermen
Note: Detailed content to be further defined.
Mock 1B: Cliënten Lijst
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD [Zoek cliënt...] │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ Dashboard │ Cliënten [+ Nieuwe Cliënt] │
│ Cliënten ◄ │ │
│ Agenda │ [Zoek op naam, BSN, of cliënt ID...........] │
│ Rapportage │ [Filters: Afdeling ▼ | Team ▼ | Status ▼] │
│ │ │
│ │ Recent bekeken: │
│ │ [Bas J.] [Anna dV.] [Peter S.] │
│ │ │
│ │ Naam ID Geb Status │
│ │ ──────────────────────────────────────── │
│ │ Bas Jansen CL0002 20-11-1992 ● Actief │
│ │ Anna de Vries CL0001 15-03-1988 ● Actief │
│ │ Peter Smit CL0003 22-07-1995 ● Wachtlijst │
│ │ Maria Jansen CL0004 11-09-1990 ● Actief │
│ │ │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Type in zoekbalk: filters lijst real-time (naam, BSN, ID, geboortedatum)
→ Selecteer filters: Afdeling, Team, Status
→ Klik recent bekeken: snel naar die client
→ Klik op rij (bijv. Bas Jansen): ⚡ CONTEXT SWITCH → Client Dossier (Level 2)
→ Klik [+ Nieuwe Cliënt]: open modal/form om nieuwe cliënt toe te voegen
Mock 1C: Behandelaar Agenda
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD [Zoek cliënt...] │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ Dashboard │ Agenda [+ Nieuwe Afspraak] │
│ Cliënten │ Week 46 | 13-19 Nov 2025 [< Vorige >]│
│ Agenda ◄ │ │
│ Rapportage │ [Kalender weergave placeholder] │
│ │ │
│ │ Vandaag - 19 november 2025: │
│ │ ┌────────────────────────────────────────────┐ │
│ │ │ 14:00-15:00 Peter Smit - Intake │ │
│ │ │ 16:30-17:30 Bas Jansen - Sessie 3 │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
│ │ Morgen - 20 november: │
│ │ ┌────────────────────────────────────────────┐ │
│ │ │ 10:00-11:00 Anna de Vries - Evaluatie │ │
│ │ └────────────────────────────────────────────┘ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Bekijk agenda (week/maand weergave)
→ Klik op afspraak: bekijk details of navigeer naar client dossier
→ Klik [+ Nieuwe Afspraak]: open afspraak formulier
→ Navigeer tussen weken met [< >] knoppen
Note: Detailed calendar component to be specified.
Mock 1D: Behandelaar Rapportage
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD [Zoek cliënt...] │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ Dashboard │ Rapportage [Exporteer PDF] │
│ Cliënten │ Overzicht praktijk statistieken │
│ Agenda │ │
│ Rapportage◄ │ ┌──────────────┬──────────────┬──────────────┐ │
│ │ │ Totaal │ Gemiddelde │ Wachtlijst │ │
│ │ │ Cliënten │ Behandel- │ Wachttijd │ │
│ │ │ 26 │ duur: 12 wk │ 2 weken │ │
│ │ └──────────────┴──────────────┴──────────────┘ │
│ │ │
│ │ [Graph: Cliënten over tijd] │
│ │ [Graph: Behandelduur distributie] │
│ │ [Graph: Diagnose categorieën] │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Bekijk BI dashboards en KPI's
→ Interactie met grafieken (zoom, filter)
→ Klik [Exporteer PDF]: download rapport
→ Filter op periode, afdeling, team
Note: Detailed BI components and metrics to be defined.
LEVEL 2 MOCKS: Client Dossier Context
Context: User heeft op een cliënt geklikt in de cliëntenlijst State: Sidebar en Header zijn veranderd naar client-specifieke weergave
Mock 2A: Client Dashboard (Dossier Overzicht - Bas Jansen)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │
│ ID: CL0002 | Geb: 20-11-1992 │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ ← Cliënten │ Dossier Overzicht │
│ ───────── │ │
│ Dashboard ◄ │ ┌──────────────┬──────────────┬──────────────┐ │
│ Intake │ │Cliëntinfo │Laatste Intake│Diagnose │ │
│ Diagnose │ │ │ │ │ │
│ Behandel │ │ID: CL0002 │12-10-2023 │Ernst: Hoog ● │ │
│ Rapportage │ │Naam: Bas J. │14:30 │Angststoornis │ │
│ │ │Geb: 20-11-92 │ │Panietstoornis│ │
│ │ │Leeftijd: 31 │"Bas komt op │met agorafobie│ │
│ │ │Verz: [naam] │gesprek..." │ │ │
│ │ │BSN: [nummer] │ │ │ │
│ │ │ │Bekijk → │Bekijk → │ │
│ │ └──────────────┴──────────────┴──────────────┘ │
│ │ │
│ │ ┌────────────────────────────────────────────┐ │
│ │ │ Behandelplan Status: Concept │ │
│ │ │ │ │
│ │ │ SMART Doelen (3): │ │
│ │ │ • Verminderen paniekeaanvallen │ │
│ │ │ • Uitbreiden sociale activiteiten │ │
│ │ │ • Verbeteren coping strategieën │ │
│ │ │ │ │
│ │ │ Interventies: CGT, Exposure therapie │ │
│ │ │ Bekijk plan → │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
│ │ ┌────────────────────────────────────────────┐ │
│ │ │ Afspraken │ │
│ │ │ │ │
│ │ │ Afgelopen Afspraak │ │
│ │ │ │ 14-11-2025, 16:26 - Intake (60 min) │ │
│ │ │ │ │
│ │ │ Komende Afspraken │ │
│ │ │ │ 22-11-2025, 16:26 - Psycho-educatie │ │
│ │ │ │ 29-11-2025, 16:26 - Exposure therapie │ │
│ │ │ │ 06-12-2025, 16:26 - Evaluatie gesprek │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Klik "← Cliënten": ⚡ CONTEXT SWITCH terug naar Level 1 (cliëntenlijst)
→ Klik "Bas Jansen ▼": dropdown met recente cliënten voor quick switch
→ Type in [Zoek cliënt]: autocomplete zoeken, direct switchen naar andere client
→ Klik sidebar item (bijv. Intake): navigeer binnen client dossier
→ Klik "Bekijk →" links: navigeer naar detail sectie
→ Klik [+ Maak behandelplan]: open behandelplan wizard (als leeg)
Mock 2B: Intake (Client Dossier - Bas Jansen)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │
│ ID: CL0002 | Geb: 20-11-1992 │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ ← Cliënten │ Intake [+ Nieuwe Intake] │
│ ───────── │ │
│ Dashboard │ Datum Type Status Samenvatting │
│ Intake ◄ │ ───────────────────────────────────────────── │
│ Diagnose │ │
│ Behandel │ 12-10-2023 Intake ●Afgerond │
│ Rapportage │ 14:30 gesprek │
│ │ Eerste intake. Cliënt presenteert │
│ │ zich met angst- en paniekkl... │
│ │ [Bekijk] │
│ │ ───────────────────────────────────────────────│
│ │ │
│ │ 05-10-2023 Telefonisch ●Afgerond │
│ │ 10:15 intake │
│ │ Korte telefonische screening. │
│ │ Doorverwijzing naar intake... │
│ │ [Bekijk] │
│ │ ───────────────────────────────────────────────│
│ │ │
│ │ 28-09-2023 Intake ●Afgerond │
│ │ 16:00 gesprek │
│ │ Geen show. Cliënt niet verschenen, │
│ │ geen afmelding... │
│ │ [Bekijk] │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Klik [+ Nieuwe Intake]: open TipTap editor voor nieuwe intake notitie
→ Klik [Bekijk]: open intake detail slide-in panel (zie Mock 2F)
→ Hover over rij: highlight, [Bekijk] button wordt prominent
→ Sidebar navigatie: blijf binnen client dossier context
→ Klik "← Cliënten": terug naar Level 1
Mock 2C: Diagnose (Client Dossier - Bas Jansen)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │
│ ID: CL0002 | Geb: 20-11-1992 │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ ← Cliënten │ Diagnose & Probleemprofiel [AI Analyse] │
│ ───────── │ │
│ Dashboard │ DSM-light Categorieën: │
│ Intake │ │
│ Diagnose ◄ │ ┌──────────┬──────────┬──────────┐ │
│ Behandel │ │ Stemming │ Angst │ Gedrag │ │
│ Rapportage │ │ ○○○○○ │ ●●●●○ │ ○○○○○ │ │
│ │ │ Geen │ Hoog │ Geen │ │
│ │ └──────────┴──────────┴──────────┘ │
│ │ ┌──────────┬──────────┬──────────┐ │
│ │ │ Middelen │ Cognitief│ Context │ │
│ │ │ ○○○○○ │ ○○○○○ │ ●●○○○ │ │
│ │ │ Geen │ Geen │ Middel │ │
│ │ └──────────┴──────────┴──────────┘ │
│ │ │
│ │ Hoofddiagnose: │
│ │ ┌────────────────────────────────────────────┐ │
│ │ │ Panietstoornis met agorafobie │ │
│ │ │ Ernst: Hoog ●●●●○ │ │
│ │ │ │ │
│ │ │ Bron: Intake 12-10-2023 │ │
│ │ │ Observaties: Frequente aanvallen, sterke │ │
│ │ │ vermijding openbare ruimtes │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Klik [AI Analyse]: genereer/update diagnose classificatie
→ Bekijk DSM-categorieën met ernst indicatie
→ Klik op categorie: bekijk details en bronnen
→ Bewerk diagnose handmatig indien nodig
Note: Week 3 feature - AI-powered classification
Mock 2D: Behandelplan (Client Dossier - Bas Jansen)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │
│ ID: CL0002 | Geb: 20-11-1992 │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ ← Cliënten │ Behandelplan [Genereer Plan] [v1▼] │
│ ───────── │ Status: Actief | Laatste update: 15-10-2023 │
│ Dashboard │ │
│ Intake │ 1. SMART Doelen │
│ Diagnose │ ┌────────────────────────────────────────────┐ │
│ Behandel ◄ │ │ Doel 1: Verminderen paniekeaanvallen │ │
│ Rapportage │ │ Van 3x/week naar max 1x/week binnen 8 wk │ │
│ │ │ Voortgang: ████████░░░░ 67% │ │
│ │ │ │ │
│ │ │ Doel 2: Uitbreiden sociale activiteiten │ │
│ │ │ Zelfstandig boodschappen binnen 6 weken │ │
│ │ │ Voortgang: ████░░░░░░░░ 33% │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
│ │ 2. Interventies │
│ │ ┌────────────────────────────────────────────┐ │
│ │ │ • CGT - Cognitieve herstructurering │ │
│ │ │ • Exposure therapie (gradueel) │ │
│ │ │ • Ontspanningstechnieken │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
│ │ 3. Frequentie: Wekelijks, 12 sessies │
│ │ 4. Meetmomenten: Week 4, 8, 12 │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Klik [Genereer Plan]: AI genereert behandelplan op basis van intake+diagnose
→ Klik [v1▼]: bekijk of wissel tussen plan versies
→ Bewerk doelen, interventies, frequentie
→ Track voortgang per doel
→ Exporteer plan naar PDF
Note: Week 3 feature - AI plan generator
Mock 2E: Rapportage (Client Dossier - Bas Jansen)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │
│ ID: CL0002 | Geb: 20-11-1992 │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────────────────────────────┐
│ │ │
│ ← Cliënten │ Rapportage & Voortgang [Exporteer PDF] │
│ ───────── │ │
│ Dashboard │ ┌──────────────┬──────────────┬──────────────┐ │
│ Intake │ │ Behandel- │ Sessies │ Algehele │ │
│ Diagnose │ │ duur │ Voltooid │ Voortgang │ │
│ Behandel │ │ 8 weken │ 6 van 12 │ 67% │ │
│ Rapportage◄ │ └──────────────┴──────────────┴──────────────┘ │
│ │ │
│ │ Doelvoortgang over tijd: │
│ │ [Line graph showing progress on goals] │
│ │ │
│ │ Sessie overzicht: │
│ │ ┌────────────────────────────────────────────┐ │
│ │ │ 12-10 Intake ✓ Aanwezig │ │
│ │ │ 19-10 Sessie 1 ✓ Aanwezig │ │
│ │ │ 26-10 Sessie 2 ✓ Aanwezig │ │
│ │ │ 02-11 Sessie 3 ✓ Aanwezig │ │
│ │ │ 09-11 Sessie 4 ✗ No-show │ │
│ │ │ 16-11 Sessie 5 ✓ Aanwezig │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
└─────────────┴──────────────────────────────────────────────────┘
User actions:
→ Bekijk voortgang visualisaties
→ Filter op periode, doel, interventie
→ Klik [Exporteer PDF]: download rapport voor dossier
→ Bekijk attendance en sessie details
Note: Content and metrics to be further defined.
Mock 2F: Intake Detail (Slide-in Panel)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │
│ ID: CL0002 | Geb: 20-11-1992 │
└────────────────────────────────────────────────────────────────┘
┌─────────────┬──────────────────────────┬───────────────────────┐
│ │ │ │
│ ← Cliënten │ Intake [+ Nieuwe] │ Intake - 12-10-2023 ✕ │
│ ───────── │ │ ─────────────────────│
│ Dashboard │ Datum Type Status │ Algemene informatie │
│ Intake ◄ │ ─────────────────── │ │
│ Diagnose │ │ Datum & tijd: │
│ Behandel │ 12-10 Intake ●Afgr. │ 12-10-2023, 14:30 │
│ Rapportage │ [row highlighted] │ │
│ │ [Bekijk] │ Type: Intake gesprek │
│ │ ───────────────── │ Behandelaar: [naam] │
│ │ │ Duur: 60 minuten │
│ │ 05-10 Telef. ●Afgr. │ │
│ │ [Bekijk] │ ─────────────────── │
│ │ ───────────────── │ │
│ │ │ Gespreksnotities │
│ │ 28-09 Intake ●Afgr. │ │
│ │ [Bekijk] │ Bas komt op gesprek │
│ │ │ vanwege spannings- │
│ │ │ klachten en paniek- │
│ │ │ aanvallen. Hij be- │
│ │ │ schrijft situaties │
│ │ │ in het openbaar... │
│ │ │ │
│ │ │ Anamnese: Klachten │
│ │ │ bestaan sinds 1 jaar │
│ │ │ Begonnen na stress- │
│ │ │ volle periode... │
│ │ │ │
│ │ │ [scrollable content] │
│ │ │ │
│ │ │ ─────────────────── │
│ │ │ │
│ │ │ [Verwijderen] [Bewerken]│
│ │ │ │
└─────────────┴──────────────────────────┴───────────────────────┘
User actions:
→ Klik ✕: sluit panel, terug naar Intakes lijst
→ Klik [Bewerken]: open intake in edit mode
→ Klik [Verwijderen]: confirmatie dialog → verwijder intake
→ Scroll in panel: bekijk volledige notities
→ Klik buiten panel (op main content): sluit panel
Mock 2G: Client Switcher (Dropdown from Header)
Context: Alleen beschikbaar in Level 2 (Client Dossier Context)
┌────────────────────────────────────────────────────────────────┐
│ Mini-ECD ┌─────────────────────────┐ [Zoek cliënt...] │
│ │ Bas Jansen ▼ │ │
│ │ ID: CL0002 | 20-11-1992 │ │
│ ├─────────────────────────┤ │
│ │ Recente cliënten: │ │
│ │ ───────────────────── │ │
│ │ ● Anna de Vries │ │
│ │ CL0001 | 15-03-1988 │ │
│ │ │ │
│ │ ● Peter Smit │ │
│ │ CL0003 | 22-07-1995 │ │
│ │ │ │
│ │ ● Maria Jansen │ │
│ │ CL0004 | 11-09-1990 │ │
│ │ │ │
│ │ ───────────────────── │ │
│ │ [Alle cliënten →] │ │
│ └─────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
User actions:
→ Klik op naam in dropdown: switch naar die cliënt (blijf op zelfde sectie)
Bijv: Op Intake pagina van Bas → klik Anna → ga naar Intake pagina van Anna
→ Klik [Alle cliënten →]: ⚡ CONTEXT SWITCH naar Level 1 (cliëntenlijst)
→ Klik buiten dropdown: sluit dropdown
→ Type in zoekbalk: autocomplete met alle cliënten
Note: Recent cliënten worden automatisch bijgewerkt bij navigatie
Complete User Flow Scenarios
Scenario 1: Start applicatie → Client dossier bekijken
1. User logt in en start op [Behandelaar Dashboard] (Level 1)
2. Bekijk caseload overzicht en aandachtspunten
3. Klik sidebar "Cliënten"
4. Navigeer naar [Cliënten Lijst]
5. Type "Bas" in zoekbalk, zie gefilterde resultaten
6. Klik op "Bas Jansen" rij
7. ⚡ CONTEXT SWITCH naar Level 2
8. Sidebar verandert: "← Cliënten | Dashboard | Intake | ..."
9. Header toont: "Bas Jansen ▼ | ID: CL0002 | Geb: 20-11-1992"
10. Bekijk [Client Dashboard - Bas Jansen] met overzicht
Scenario 2: Nieuwe intake toevoegen
1. User zit in [Client Dashboard - Bas Jansen] (Level 2)
2. Klik sidebar "Intake"
3. Navigeer naar [Intake - Bas Jansen]
4. Klik [+ Nieuwe Intake]
5. TipTap editor opent voor nieuwe notitie
6. Type gespreknotities met rich text formatting
7. Klik [AI Samenvatting] (optioneel, Week 3 feature)
8. AI genereert samenvatting in 5 seconden
9. Klik [Opslaan]
10. Nieuwe intake verschijnt bovenaan lijst met status badge
Scenario 3: Tussen cliënten switchen tijdens werk
1. User zit in [Intake - Bas Jansen] (Level 2)
2. Klik "Bas Jansen ▼" in header center
3. Dropdown opent met recente cliënten
4. Klik "Anna de Vries"
5. Blijf in Level 2, navigeer naar [Intake - Anna de Vries]
6. Sidebar blijft client-specifiek, header update naar Anna's gegevens
Scenario 4: Van client dossier terug naar behandelaar overzicht
1. User zit in [Behandelplan - Bas Jansen] (Level 2)
2. Klaar met werk aan behandelplan
3. Klik "← Cliënten" in sidebar
4. ⚡ CONTEXT SWITCH terug naar Level 1
5. Sidebar verandert: "Dashboard | Cliënten | Agenda | Rapportage"
6. Header center wordt leeg (geen client dropdown)
7. Navigeer naar [Cliënten Lijst]
8. User kan nieuwe client selecteren of naar ander Level 1 scherm
Scenario 5: Behandelplan genereren met AI
1. User zit in [Client Dashboard - Bas Jansen] (Level 2)
2. Bekijk diagnose card: "Ernst: Hoog - Panietstoornis"
3. Bekijk behandelplan card: "Geen behandelplan gevonden"
4. Klik [+ Maak behandelplan]
5. Navigeer naar [Behandelplan - Bas Jansen]
6. Klik [Genereer Plan] button
7. AI analyseert intake notities + diagnose
8. Plan wordt gegenereerd met SMART doelen en interventies
9. User beoordeelt en past aan indien nodig
10. Klik [Opslaan als Concept] of [Publiceren]
11. Plan verschijnt op Client Dashboard met status badge
Scenario 6: Intake detail bekijken en bewerken
1. User zit in [Intake - Bas Jansen] (Level 2)
2. Klik [Bekijk] bij intake van 12-10-2023
3. Slide-in panel opent aan rechterkant (400px breed)
4. Bekijk algemene informatie en volledige gespreksnotities
5. Scroll door notities, lees AI samenvatting (indien aanwezig)
6. Klik [Bewerken] in panel footer
7. TipTap editor opent in bewerkmodus
8. Wijzig notities, voeg toe, pas formatting aan
9. Klik [Opslaan]
10. Panel sluit, terug naar [Intake - Bas Jansen] lijst
11. Gewijzigde intake toont "Bewerkt" timestamp
Scenario 7: Quick search tussen contexten
1. User zit in [Behandelaar Dashboard] (Level 1)
2. Type "CL0002" in header zoekbalk
3. Autocomplete toont "Bas Jansen - CL0002 | 20-11-1992"
4. Klik op resultaat
5. ⚡ CONTEXT SWITCH naar Level 2
6. Navigeer direct naar [Client Dashboard - Bas Jansen]
7. Header en sidebar passen zich aan
Alternative vanaf Level 2:
1. User zit in [Diagnose - Anna de Vries] (Level 2)
2. Type "Peter" in header zoekbalk
3. Autocomplete toont "Peter Smit - CL0003"
4. Klik op resultaat
5. Blijf in Level 2, navigeer naar [Diagnose - Peter Smit]
Navigation Rules
Context Switching (Level 1 ↔ Level 2):
Van Level 1 naar Level 2:
- Trigger: Klik op een client rij in cliëntenlijst
- Effect: Sidebar verandert naar client-specifiek menu
- Effect: Header center toont client dropdown "Bas Jansen ▼"
- Navigeert naar: Client Dashboard (dossier overzicht)
Van Level 2 naar Level 1:
- Trigger: Klik "← Cliënten" button in sidebar
- Effect: Sidebar verandert terug naar behandelaar menu
- Effect: Header center wordt leeg/disabled
- Navigeert naar: Cliënten Lijst
- Keyboard shortcut: Esc (of Alt+C)
Sidebar Behavior:
In Level 1 (Behandelaar Context):
- Menu items: Dashboard | Cliënten | Agenda | Rapportage
- Geen "← Cliënten" button
- Active state op huidige pagina
- Navigatie blijft binnen Level 1
In Level 2 (Client Dossier Context):
- "← Cliënten" button bovenaan (back to Level 1)
- Divider
- Menu items: Dashboard | Intake | Diagnose | Behandelplan | Rapportage
- Active state op huidige sectie
- Navigatie blijft binnen hetzelfde client dossier
- Switchen tussen clients via header dropdown blijft in Level 2
Header Client Dropdown:
Alleen beschikbaar in Level 2:
- Toont geselecteerde client: "Bas Jansen ▼"
- Sub-text: "ID: CL0002 | Geb: 20-11-1992"
- Dropdown inhoud:
- Recente cliënten (laatste 3-5 bezocht)
- Divider
- "Alle cliënten →" link (navigeert naar Level 1)
- Switchen behoudt huidige sectie type
- Bijv: Intake van Bas → klik Anna → Intake van Anna
- Keyboard shortcut: Alt+K
In Level 1:
- Geen client dropdown (of disabled/grayed out)
- Optioneel: Behandelaar naam/info
Header Zoekbalk:
Beschikbaar in beide levels:
- Live autocomplete tijdens typen
- Zoekt op: naam, BSN, cliënt ID, geboortedatum
- Toont: Naam - ID | Geboortedatum in resultaten
- Keyboard shortcut: Cmd/Ctrl+K
Gedrag in Level 1:
- Enter of klik op resultaat: Switch naar Level 2, navigeer naar Client Dashboard
Gedrag in Level 2:
- Enter of klik op resultaat: Blijf in Level 2, switch naar gekozen client
- Behoudt huidige sectie (blijf op Intake als je op Intake zat)
Active State Indicators:
Sidebar:
- Highlighted background (licht blauw/grijs)
- Bold text
- Left border accent (3px teal/blauw)
- Icon kleurt mee
Tab/Section:
- Visual feedback dat huidige sectie actief is
- Breadcrumb (optioneel) toont pad
URL Structure & Browser Back:
URL patterns:
Level 1:
/epd/dashboard → Behandelaar dashboard
/epd/clients → Cliënten lijst
/epd/agenda → Behandelaar agenda
/epd/reports → Rapportage/BI
Level 2:
/epd/clients/CL0002 → Client dashboard
/epd/clients/CL0002/intake → Intake sectie
/epd/clients/CL0002/diagnose → Diagnose sectie
/epd/clients/CL0002/plan → Behandelplan
/epd/clients/CL0002/reports → Client rapportage
Browser back button:
- Werkt zoals verwacht door URL geschiedenis
- Van Level 2 terug naar vorige Level 2 pagina
- Van Client Dashboard terug naar Cliënten Lijst (Level 1)
- Sidebar en header passen zich automatisch aan op basis van URL
State Persistence
User komt terug in app:
- Heropent laatste bezochte scherm (via localStorage of session)
- Als dat Level 2 was: herstel client context (sidebar + header)
- Als dat Level 1 was: toon behandelaar context
- Als sessie verlopen: start bij [Behandelaar Dashboard] (Level 1)
Browser refresh:
- URL bepaalt welk scherm en context
- URL parsing detecteert automatisch Level 1 vs Level 2
- Sidebar en header worden automatisch geconfigureerd
Level 1 URL's:
/epd/dashboard → Behandelaar dashboard
/epd/clients → Cliënten lijst
/epd/agenda → Behandelaar agenda
/epd/reports → BI rapportage
Level 2 URL's:
/epd/clients/CL0002 → Client dashboard (Bas)
/epd/clients/CL0002/intake → Intake van Bas
/epd/clients/CL0002/diagnose → Diagnose van Bas
/epd/clients/CL0002/plan → Behandelplan van Bas
Recent clients lijst:
- Opgeslagen in localStorage:
recent_clients: string[] - Wordt bijgewerkt bij elke client view (Level 2 entry)
- Max 5 items
- Gesorteerd op laatst bezocht (nieuwste bovenaan)
- Format per item:
{
id: string; // "CL0002"
name: string; // "Bas Jansen"
birthDate: string; // "20-11-1992"
lastVisited: Date; // timestamp
}
Context State Management:
- Global state tracks:
currentContext: 'behandelaar' | 'client' - If context === 'client', also track:
selectedClientId: string - Sidebar component subscribes to context changes
- Header component subscribes to context + selectedClient changes
- Context changes trigger sidebar/header re-render
Scroll Position & Form State:
- Scroll position bewaard per pagina (Level 1 en Level 2 apart)
- Formulieren met unsaved changes: waarschuwing bij navigatie
- TipTap editor: auto-save draft elke 30 seconden (localStorage)
URL Query Parameters (optioneel):
- Tab states:
/epd/clients/CL0002?tab=intake - Filter states:
/epd/clients?status=actief&team=team-a - Sorting:
/epd/clients?sortBy=name&order=asc