# 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: ```typescript { 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`