diff --git a/app/(marketing)/releases/components/mdx-components.tsx b/app/(marketing)/releases/components/mdx-components.tsx index a8ea07e..ef6e02b 100644 --- a/app/(marketing)/releases/components/mdx-components.tsx +++ b/app/(marketing)/releases/components/mdx-components.tsx @@ -6,10 +6,7 @@ import Image from 'next/image' import Link from 'next/link' - -type MDXComponents = { - [key: string]: React.ComponentType -} +import type { MDXComponents } from 'mdx/types' export const mdxComponents: MDXComponents = { // Headings with anchor links diff --git a/docs/specs/UI/inteface-design-plan.md b/docs/specs/UI/inteface-design-plan.md index f92c5da..47ce782 100644 --- a/docs/specs/UI/inteface-design-plan.md +++ b/docs/specs/UI/inteface-design-plan.md @@ -8,31 +8,61 @@ --- -## Layout Components (Consistent across all views) +## Navigation Architecture + +### Two-Level Context System + +**LEVEL 1: Behandelaar Context** (No client selected) +- Sidebar shows: Dashboard | Cliënten | Agenda | Rapportage +- Header: No client dropdown (or disabled/empty) +- Focus: Behandelaar's caseload, tasks, and global views + +**LEVEL 2: Client Dossier Context** (Client selected) +- Sidebar shows: ← Cliënten | Dashboard | Intake | Diagnose | Behandelplan | Rapportage +- Header: Shows selected client with dropdown "Bas Jansen ▼" +- Focus: Individual client data and treatment information + +**Context Switch Trigger:** +- Clicking a client row in the cliënten lijst switches from Level 1 → Level 2 +- Clicking "← Cliënten" in sidebar switches from Level 2 → Level 1 + +--- + +## Layout Components ### Header Bar (Fixed, 60px height) - Background: White with subtle bottom border - Padding: 16px vertical, 24px horizontal - Layout (flex, space-between): - **Left**: "Mini-ECD" text/logo (medium weight) - - **Center**: Client dropdown "Bas Jansen ▼" (clickable) - - Sub-text below: "ID: CL0002 | Geb: 20-11-1992" (small, muted) + - **Center**: Context-aware client selector + - **In Behandelaar Context**: Empty or behandelaar name (optional) + - **In Client Dossier Context**: Client dropdown "Bas Jansen ▼" (clickable) + - Sub-text below: "ID: CL0002 | Geb: 20-11-1992" (small, muted) + - Dropdown shows recent clients for quick switching - **Right**: Search input "Zoek cliënt..." with icon (rounded, light border) + - Always available for quick client lookup ### Sidebar (Fixed left, 240px width) - Background: Very light gray - Padding: 16px -**Top section (when in client dossier):** -- "← Cliënten" button (full width, left-aligned, subtle hover) -- Subtle horizontal divider (8px margin bottom) +**Context-Aware Navigation:** -**Menu items:** -- Dashboard (icon + text) -- Intakes (icon + text) -- Probleemprofiel (icon + text) -- Behandelplan (icon + text) -- Agenda (icon + text) +**BEHANDELAAR CONTEXT (Level 1) - No client selected:** +- Dashboard (icon + text) → Behandelaar dashboard (caseload, taken, aandachtspunten) +- Cliënten (icon + text) → Caseload overzicht met zoek/filter +- Agenda (icon + text) → Behandelaar agenda (alle afspraken) +- Rapportage (icon + text) → BI dashboards en statistieken + +**CLIENT DOSSIER CONTEXT (Level 2) - Client selected:** +- "← Cliënten" button (full width, left-aligned, subtle hover) → Terug naar behandelaar context +- Subtle horizontal divider (8px margin bottom) +- Dashboard (icon + text) → Client dossier overzicht (afgelopen/komende afspraken) +- Intake (icon + text) → Intake gesprekken en notities +- Diagnose (icon + text) → DSM-classificatie, probleemprofiel +- Behandelplan (icon + text) → Doelen, interventies, planning +- Rapportage (icon + text) → Client-specifieke voortgang en metrics **Styling:** - Each item: 12px padding vertical, 12px padding horizontal @@ -49,15 +79,45 @@ --- -## Screen 1: Cliënten (Search/List View) +## LEVEL 1 SCREENS: Behandelaar Context -### Sidebar (different in this view) -- No "← Cliënten" button (we're already here) -- Menu items: - - Dashboard (global, for practitioner) - - **Cliënten** ← ACTIVE - - Agenda (global, all appointments) - - Rapportage (global, statistics) +--- + +## Screen 1A: Behandelaar Dashboard + +### Sidebar +- **Dashboard** ← ACTIVE +- Cliënten +- Agenda +- Rapportage + +### Main Content +**Page title:** "Dashboard" (large, semi-bold) +**Subtitle:** "Welkom terug, [Behandelaar naam]" (optional) + +**Content (to be further defined):** +- Caseload overzicht (aantal actieve cliënten, wachtlijst, etc.) +- Aandachtspunten (urgente taken, follow-ups) +- Behandelplannen die nog niet definitief zijn +- Berichten en notificaties +- Recente activiteit +- Aankomende afspraken (vandaag/deze week) + +**Note:** Detailed content and layout to be specified in later iteration. + +--- + +## Screen 1B: Cliënten (Search/List View) + +### Sidebar +- Dashboard +- **Cliënten** ← ACTIVE +- Agenda +- Rapportage + +### Header +- No client dropdown in center (behandelaar context) +- Search bar available in top right ### Main Content **Top bar:** @@ -65,12 +125,21 @@ - Button: "+ Nieuwe Cliënt" (primary style, right) - Space-between layout -**Search bar (below title):** +**Search & Filter bar (below title):** - Full-width input field - Placeholder: "Zoek op naam, BSN, of cliënt ID..." - Icon: magnifying glass left side +- Filter options (to be specified): + - Afdeling filter + - Team filter + - Status filter (Actief, Wachtlijst, Afgesloten) - 16px margin bottom +**Recent clients section (optional):** +- "Recent bekeken" subtitle (small, muted) +- 3-5 most recent client cards (compact) +- Horizontal scroll or grid + **Client list (table/card hybrid):** Header row: @@ -116,7 +185,8 @@ Row 3: │Dashboard │ Cliënten [+ Nieuwe Cliënt] │ │Cliënten ← │ │ │Agenda │ [Zoek op naam, BSN, of cliënt ID] │ -│Rapportage │ │ +│Rapportage │ [Filters: Afdeling, Team, Status] │ +│ │ │ │ │ Naam ID Geb Status │ │ │ ────────────────────────────────── │ │ │ Bas J. CL0002 20-11 Actief │ @@ -125,26 +195,78 @@ Row 3: └───────────┴─────────────────────────────────────┘ ``` +**User action to switch context:** +- Click on a client row (e.g., "Bas Jansen") → Switches to Level 2 (Client Dossier Context) + --- -## Screen 2: Dashboard (Client Dossier) - -### Header -- Same as default, but with "Bas Jansen ▼" visible in center +## Screen 1C: Behandelaar Agenda ### Sidebar -- "← Cliënten" button at top -- Horizontal divider -- **Dashboard** ← ACTIVE -- Intakes -- Probleemprofiel -- Behandelplan -- Agenda +- Dashboard +- Cliënten +- **Agenda** ← ACTIVE +- Rapportage ### Main Content -**Breadcrumb:** "Dashboard > Overzicht" (small, muted) +**Page title:** "Agenda" (large, semi-bold) -**Page title:** "Dashboard Overzicht" (large, semi-bold, 16px margin bottom) +**Content (to be further defined):** +- Calendar view (week/month) +- Behandelaar's appointments (all clients) +- Appointment details: time, client, type +- Create new appointment button + +**Note:** Detailed content and layout to be specified in later iteration. + +--- + +## Screen 1D: Behandelaar Rapportage + +### Sidebar +- Dashboard +- Cliënten +- Agenda +- **Rapportage** ← ACTIVE + +### Main Content +**Page title:** "Rapportage" (large, semi-bold) + +**Content (to be further defined):** +- BI-style dashboards +- KPI's (aantal cliënten, gemiddelde behandelduur, etc.) +- Trends en statistieken +- Export functionaliteit + +**Note:** Detailed content and layout to be specified in later iteration. + +--- + +## LEVEL 2 SCREENS: Client Dossier Context + +**Context Switch:** User clicked on a client in the cliënten lijst + +--- + +## Screen 2A: Client Dashboard (Dossier Overzicht) + +### Header +- **Center**: "Bas Jansen ▼" dropdown visible + - Sub-text: "ID: CL0002 | Geb: 20-11-1992" + - Dropdown shows recent clients for quick switching +- **Right**: Search bar still available + +### Sidebar +- "← Cliënten" button at top (returns to behandelaar context) +- Horizontal divider +- **Dashboard** ← ACTIVE +- Intake +- Diagnose +- Behandelplan +- Rapportage + +### Main Content +**Page title:** "Dossier Overzicht" (large, semi-bold, 16px margin bottom) **Grid layout:** @@ -158,37 +280,41 @@ Column 1 - Cliëntinformatie card: - Cliënt ID: CL0002 - Naam: Bas Jansen - Geboortedatum: 20-11-1992 + - Leeftijd: 31 jaar (computed) - Verzekering: [naam verzekeraar] - BSN: [nummer] - Labels: muted, small - Values: normal weight, darker +- Action: "Bewerken →" link (small, at bottom) Column 2 - Laatste Intake card: - Card style: same as column 1 -- Title: "Laatste Intake Notitie" -- Date/time: "Intake - 12-10-2023" (small, muted) +- Title: "Laatste Intake" +- Date/time: "12-10-2023, 14:30" (small, muted) - Preview text (3 lines max): - "Bas komt op gesprek vanwege spanningsklachten en paniekeaanvallen. Hij beschrijft situaties in het openbaar vervoer en drukke winkels als triggerend. De aanvallen kenmerken zich door..." -- "Lees meer →" link (small, at bottom) + "Bas komt op gesprek vanwege spanningsklachten en paniekeaanvallen. Hij beschrijft situaties in het openbaar vervoer en drukke winkels als triggerend..." +- "Bekijk intake →" link (small, at bottom) → navigates to Intake section -Column 3 - Probleemprofiel card: +Column 3 - Diagnose card: - Card style: same as above -- Title: "Probleemprofiel" +- Title: "Diagnose" - Status badge: "Hoog" (red/warning bg, red text, rounded pill, inline with title) - Subtitle: "Angststoornissen" (medium weight) - Description text: - "Opmerkingen: Panietstoornis met agorafobie. De frequentie van paniekeaanvallen en het vermijdingsgedrag zijn..." -- "Bekijk profiel →" link (small, at bottom) + "Panietstoornis met agorafobie. De frequentie van paniekeaanvallen en het vermijdingsgedrag zijn..." +- "Bekijk diagnose →" link (small, at bottom) → navigates to Diagnose section **Row 2: Full width (margin top: 24px)** Behandelplan card: - Card style: same - Title: "Behandelplan" -- Empty state: +- If exists: Show summary with status badge (Concept, Actief, Afgerond) +- If not exists (empty state): - Light gray background section inside card - Centered text: "Geen behandelplan gevonden." - "+ Maak behandelplan" button (secondary style, centered below) +- "Bekijk behandelplan →" link → navigates to Behandelplan section **Row 3: Full width (margin top: 24px)** @@ -197,30 +323,34 @@ Afspraken card: - Title: "Afspraken" Section 1: -- Subtitle: "Laatste Afspraak" (small, muted, 8px margin bottom) -- Item: "14-11-2025, 16:26 - Intake" (with subtle icon left) +- Subtitle: "Afgelopen Afspraak" (small, muted, 8px margin bottom) +- Item: "14-11-2025, 16:26 - Intake gesprek" (with subtle icon left) +- Shows: type, duration, practitioner (if available) Divider line (subtle, 16px margin vertical) Section 2: -- Subtitle: "Eerstvolgende 3 Afspraken" (small, muted) +- Subtitle: "Komende Afspraken" (small, muted) - Item 1: "22-11-2025, 16:26 - Psycho-educatie" - Item 2: "29-11-2025, 16:26 - Exposure therapie sessie" - Item 3: "06-12-2025, 16:26 - Evaluatie gesprek" - Each with subtle left border accent (blue) +- Shows: date, time, type +- If no appointments: "Geen geplande afspraken" (muted text) **Layout structure:** ``` ┌──────────────────────────────────────────────────┐ │ Header: Logo | Bas Jansen ▼ | Search │ +│ | ID: CL0002 | Geb: 20-11-1992 │ ├──────────┬───────────────────────────────────────┤ -│← Cliënten│ Dashboard Overzicht │ +│← Cliënten│ Dossier Overzicht │ │────── │ │ │Dashboard │ ┌─────────┬─────────┬──────────┐ │ -│Intakes │ │ Info │ Intake │ Problem │ │ -│Probleem │ │ Card │ Card │ Card │ │ +│Intake │ │ Info │ Intake │ Diagnose │ │ +│Diagnose │ │ Card │ Card │ Card │ │ │Behandel │ └─────────┴─────────┴──────────┘ │ -│Agenda │ ┌──────────────────────────────┐ │ +│Rapport │ ┌──────────────────────────────┐ │ │ │ │ Behandelplan Card │ │ │ │ └──────────────────────────────┘ │ │ │ ┌──────────────────────────────┐ │ @@ -231,19 +361,20 @@ Section 2: --- -## Screen 3: Intakes (Client Dossier) +## Screen 2B: Intake (Client Dossier) ### Header -- Same, "Bas Jansen ▼" in center +- **Center**: "Bas Jansen ▼" with ID and birthdate +- **Right**: Search bar available ### Sidebar -- "← Cliënten" button +- "← Cliënten" button (returns to behandelaar context) - Divider - Dashboard -- **Intakes** ← ACTIVE -- Probleemprofiel +- **Intake** ← ACTIVE +- Diagnose - Behandelplan -- Agenda +- Rapportage ### Main Content **Breadcrumb:** "Intakes > Overzicht" @@ -296,20 +427,206 @@ Intake item 3: ``` ┌──────────────────────────────────────────────────┐ │ Header: Logo | Bas Jansen ▼ | Search │ +│ | ID: CL0002 | Geb: 20-11-1992 │ ├──────────┬───────────────────────────────────────┤ -│← Cliënten│ Intakes [+ Nieuwe Intake] │ +│← Cliënten│ Intake [+ Nieuwe Intake] │ │────── │ │ │Dashboard │ Datum Type Status Samenvat.. │ -│Intakes ← │ ───────────────────────────────── │ -│Probleem │ 12-10 Intake Afgr. Eerste... │ +│Intake ← │ ───────────────────────────────── │ +│Diagnose │ 12-10 Intake Afgr. Eerste... │ │Behandel │ 05-10 Telef. Afgr. Korte... │ -│Agenda │ 28-09 Intake Afgr. Geen sh... │ +│Rapport │ 28-09 Intake Afgr. Geen sh... │ │ │ │ └──────────┴───────────────────────────────────────┘ ``` --- +## Screen 2C: Diagnose (Client Dossier) + +### Header +- **Center**: "Bas Jansen ▼" with ID and birthdate +- **Right**: Search bar available + +### Sidebar +- "← Cliënten" button (returns to behandelaar context) +- Divider +- Dashboard +- Intake +- **Diagnose** ← ACTIVE +- Behandelplan +- Rapportage + +### Main Content +**Top bar:** +- Title: "Diagnose & Probleemprofiel" (large, semi-bold, left) +- Button: "AI Analyse" (primary style with sparkles icon, right) + +**DSM-light Categorieën:** +- Visual grid/dashboard showing classified problem areas +- Categories: + - Stemming & Depressie (blauw) + - Angst (paars) + - Gedrag & Impuls (rood) + - Middelengebruik (oranje) + - Cognitief (groen) + - Context & Psychosociaal (teal) + +**Ernst Indicatie:** +- Visual indicator: Laag (green) | Middel (yellow) | Hoog (red) +- Linked to intake sources (bronverwijzing) + +**Content (to be further defined in Week 3):** +- AI-generated classification based on intake notes +- Manual override/editing capability +- Timeline/history of diagnoses +- Notes and observations section + +**Layout structure:** +``` +┌──────────────────────────────────────────────────┐ +│ Header: Logo | Bas Jansen ▼ | Search │ +├──────────┬───────────────────────────────────────┤ +│← Cliënten│ Diagnose & Probleemprofiel [AI Analyse]│ +│────── │ │ +│Dashboard │ DSM-light Categorieën: │ +│Intake │ ┌────────┬────────┬────────┐ │ +│Diagnose← │ │Stemming│ Angst │ Gedrag │ │ +│Behandel │ │ Hoog │Middel │ Laag │ │ +│Rapport │ └────────┴────────┴────────┘ │ +│ │ ┌──────────────────────────┐ │ +│ │ │ Ernst: ●●●○○ (Hoog) │ │ +│ │ │ Bronnen: Intake 12-10 │ │ +│ │ └──────────────────────────┘ │ +└──────────┴───────────────────────────────────────┘ +``` + +--- + +## Screen 2D: Behandelplan (Client Dossier) + +### Header +- **Center**: "Bas Jansen ▼" with ID and birthdate +- **Right**: Search bar available + +### Sidebar +- "← Cliënten" button (returns to behandelaar context) +- Divider +- Dashboard +- Intake +- Diagnose +- **Behandelplan** ← ACTIVE +- Rapportage + +### Main Content +**Top bar:** +- Title: "Behandelplan" (large, semi-bold, left) +- Buttons: + - "Genereer Plan" (primary style with AI icon, right) + - "Nieuwe Versie" (secondary style, if plan exists) + +**Plan Structuur:** +1. **SMART Doelen** section + - Specifieke, Meetbare, Acceptabele, Realistische, Tijdgebonden doelen + - Multiple goals per plan + - Status tracking per goal + +2. **Interventies** section + - Evidence-based behandelmethoden (CGT, ACT, EMDR, etc.) + - Linked to specific goals + - Description and rationale + +3. **Frequentie & Planning** section + - Sessie planning + - Behandelintensiteit + - Duration estimate + +4. **Meetmomenten** section + - Evaluation schedule + - Progress measurements + - Review dates + +**Versioning:** +- Multiple versions per client (v1, v2, etc.) +- Status: Concept | Actief | Afgerond +- Timestamp and practitioner info + +**Content (to be further defined in Week 3):** +- AI plan generator based on intake + diagnose +- JSONB data structure for flexibility +- PDF export functionality + +**Layout structure:** +``` +┌──────────────────────────────────────────────────┐ +│ Header: Logo | Bas Jansen ▼ | Search │ +├──────────┬───────────────────────────────────────┤ +│← Cliënten│ Behandelplan [Genereer Plan] │ +│────── │ │ +│Dashboard │ Versie 1 - Actief | 12-10-2023 │ +│Intake │ │ +│Diagnose │ 1. SMART Doelen │ +│Behandel← │ ┌──────────────────────────────┐ │ +│Rapport │ │ • Verminderen paniekeaanv.. │ │ +│ │ │ • Uitbreiden sociale activ.. │ │ +│ │ └──────────────────────────────┘ │ +│ │ 2. Interventies │ +│ │ ┌──────────────────────────────┐ │ +│ │ │ • CGT - Cognitieve herstr... │ │ +│ │ │ • Exposure therapie │ │ +│ │ └──────────────────────────────┘ │ +└──────────┴───────────────────────────────────────┘ +``` + +--- + +## Screen 2E: Rapportage (Client Dossier) + +### Header +- **Center**: "Bas Jansen ▼" with ID and birthdate +- **Right**: Search bar available + +### Sidebar +- "← Cliënten" button (returns to behandelaar context) +- Divider +- Dashboard +- Intake +- Diagnose +- Behandelplan +- **Rapportage** ← ACTIVE + +### Main Content +**Page title:** "Rapportage & Voortgang" (large, semi-bold) + +**Content (to be further defined):** +- Client-specific progress metrics +- Treatment timeline +- Session attendance +- Goal achievement tracking +- Measurement instruments (ROM, questionnaires) +- Graphs and visualizations +- Export functionality (PDF, CSV) + +**Layout structure:** +``` +┌──────────────────────────────────────────────────┐ +│ Header: Logo | Bas Jansen ▼ | Search │ +├──────────┬───────────────────────────────────────┤ +│← Cliënten│ Rapportage & Voortgang │ +│────── │ │ +│Dashboard │ ┌──────────────────────────────┐ │ +│Intake │ │ Behandelduur: 8 weken │ │ +│Diagnose │ │ Sessies: 6 van 12 │ │ +│Behandel │ │ Voortgang: ████████░░░░ 67% │ │ +│Rapport ← │ └──────────────────────────────┘ │ +│ │ │ +│ │ Doelvoortgang: │ +│ │ [Graph/Chart placeholder] │ +└──────────┴───────────────────────────────────────┘ +``` + +--- + ## Intake Detail View (Modal/Slide-in) **Trigger:** Click "Bekijk" button on any intake item @@ -433,11 +750,16 @@ Divider ## Interaction Notes ### Navigation flow: -1. Start: Cliënten list view -2. Click client row → Navigate to Dashboard (with client in header + sidebar) -3. Sidebar shows "← Cliënten" to go back -4. Header search always available for quick switch -5. Header client dropdown shows recent/favorite clients +1. Start: Behandelaar Dashboard (Level 1) +2. Sidebar navigation: Dashboard | Cliënten | Agenda | Rapportage +3. Click "Cliënten" → Cliënten list view +4. Click client row → Context switch to Level 2 (Client Dossier) +5. Sidebar changes to: ← Cliënten | Dashboard | Intake | Diagnose | Behandelplan | Rapportage +6. Header shows selected client: "Bas Jansen ▼" with dropdown +7. Navigate within client dossier using sidebar menu +8. Click "← Cliënten" → Context switch back to Level 1 +9. Header client dropdown always available (in Level 2) for quick client switching +10. Header search always available for quick client lookup ### State management: - Active menu item: always visible (highlighted) @@ -457,28 +779,99 @@ Divider ### Routing structure (Next.js): ``` -/clients → Cliënten list -/clients/[id]/dashboard → Dashboard view -/clients/[id]/intakes → Intakes view -/clients/[id]/intakes/[intakeId] → Intake detail (modal) -/clients/[id]/probleemprofiel -/clients/[id]/behandelplan -/clients/[id]/agenda +LEVEL 1: Behandelaar Context +/epd/dashboard → Behandelaar dashboard (caseload, taken, aandachtspunten) +/epd/clients → Cliënten list (zoek, filter, recent) +/epd/agenda → Behandelaar agenda (alle afspraken) +/epd/reports → BI rapportage (statistieken, KPI's) + +LEVEL 2: Client Dossier Context +/epd/clients/[id] → Client dashboard (dossier overzicht) +/epd/clients/[id]/intake → Intake lijst en notities +/epd/clients/[id]/intake/[intakeId] → Intake detail (modal/slide-in) +/epd/clients/[id]/diagnose → Diagnose en probleemprofiel +/epd/clients/[id]/plan → Behandelplan (SMART doelen, interventies) +/epd/clients/[id]/reports → Client rapportage (voortgang, metrics) + +Utility routes: +/epd/clients/new → Nieuwe cliënt formulier +/epd/clients/[id]/edit → Cliënt gegevens bewerken ``` ### Component structure: ``` -app/ -├── layout.tsx (header + sidebar logic) +app/epd/ +├── layout.tsx // Root EPD layout (detects context) +├── components/ +│ ├── epd-header.tsx // Context-aware header +│ └── epd-sidebar.tsx // Context-aware sidebar +│ +├── dashboard/ +│ └── page.tsx // Behandelaar dashboard +│ ├── clients/ -│ ├── page.tsx (list view) +│ ├── page.tsx // Cliënten lijst (Level 1) +│ ├── components/ +│ │ ├── client-list.tsx +│ │ ├── client-search.tsx +│ │ └── client-filters.tsx +│ ├── new/ +│ │ └── page.tsx // Nieuwe cliënt form │ └── [id]/ -│ ├── layout.tsx (client-specific sidebar) -│ ├── dashboard/page.tsx -│ ├── intakes/ -│ │ ├── page.tsx (list) -│ │ └── [intakeId]/page.tsx (detail modal) -│ └── ... +│ ├── layout.tsx // Client dossier layout (Level 2 context) +│ ├── page.tsx // Client dashboard (dossier overzicht) +│ ├── edit/ +│ │ └── page.tsx // Edit client +│ ├── intake/ +│ │ ├── page.tsx // Intake lijst +│ │ ├── components/ +│ │ │ ├── intake-list.tsx +│ │ │ └── intake-editor.tsx +│ │ └── [intakeId]/ +│ │ └── page.tsx // Intake detail (modal/slide-in) +│ ├── diagnose/ +│ │ ├── page.tsx // Diagnose & probleemprofiel +│ │ └── components/ +│ │ ├── dsm-categories.tsx +│ │ └── severity-indicator.tsx +│ ├── plan/ +│ │ ├── page.tsx // Behandelplan +│ │ └── components/ +│ │ ├── smart-goals.tsx +│ │ ├── interventions.tsx +│ │ └── plan-generator.tsx +│ └── reports/ +│ ├── page.tsx // Client rapportage +│ └── components/ +│ ├── progress-chart.tsx +│ └── metrics-dashboard.tsx +│ +├── agenda/ +│ └── page.tsx // Behandelaar agenda +│ +└── reports/ + └── page.tsx // BI rapportage (behandelaar) +``` + +### Key Implementation Details: + +**app/epd/layout.tsx:** +- Detects current context (Level 1 vs Level 2) based on URL +- Passes context to EPDSidebar and EPDHeader +- Manages global state for selected client + +**app/epd/clients/[id]/layout.tsx:** +- Wraps all client dossier pages +- Fetches client data and provides to children +- Ensures sidebar shows Level 2 navigation +- Ensures header shows client dropdown + +**Context Detection Logic:** +```typescript +// In app/epd/layout.tsx +const isClientDossier = pathname.includes('/clients/') && + pathname.match(/\/clients\/[^\/]+\/?[^\/]*$/); +const clientId = isClientDossier ? pathname.split('/')[3] : null; ``` ### Data requirements: diff --git a/docs/specs/UI/mocks-ui-flow.md b/docs/specs/UI/mocks-ui-flow.md index ea2d114..d7ddfac 100644 --- a/docs/specs/UI/mocks-ui-flow.md +++ b/docs/specs/UI/mocks-ui-flow.md @@ -1,31 +1,102 @@ # 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 +START: Behandelaar Dashboard (Level 1) ↓ -[Cliënten Lijst] ←──────────────────┐ - ↓ (klik op cliënt) │ - ↓ │ -[Dashboard - Bas Jansen] ←─────┐ │ - ↓ │ │ - ├─→ [Intakes] │ │ - ├─→ [Probleemprofiel] │ │ - ├─→ [Behandelplan] │ │ - └─→ [Agenda] │ │ - ↓ │ │ - (sidebar menu switch)────────┘ │ - ↓ │ - (← Cliënten button)──────────────┘ +[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)────────────────┘ ↓ - (header search) → Quick switch to other client +⚡ CONTEXT SWITCH terug naar Level 1 ⚡ ↓ - [Dashboard - Anna de Vries] + [Terug naar Cliënten Lijst] + ↓ + (header dropdown "Bas Jansen ▼") → Quick switch naar andere client + ↓ + [Client Dashboard - Anna de Vries] ``` --- -## Mock 1: Cliënten Lijst (Entry Point) +## 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...] │ @@ -35,7 +106,11 @@ START │ Dashboard │ Cliënten [+ Nieuwe Cliënt] │ │ Cliënten ◄ │ │ │ Agenda │ [Zoek op naam, BSN, of cliënt ID...........] │ -│ Rapportage │ │ +│ Rapportage │ [Filters: Afdeling ▼ | Team ▼ | Status ▼] │ +│ │ │ +│ │ Recent bekeken: │ +│ │ [Bas J.] [Anna dV.] [Peter S.] │ +│ │ │ │ │ Naam ID Geb Status │ │ │ ──────────────────────────────────────── │ │ │ Bas Jansen CL0002 20-11-1992 ● Actief │ @@ -47,14 +122,91 @@ START └─────────────┴──────────────────────────────────────────────────┘ User actions: -→ Type in zoekbalk: filters lijst real-time -→ Klik op rij (bijv. Bas Jansen): navigeer naar zijn Dashboard +→ 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 2: Dashboard (Client Dossier - Bas Jansen) +## 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...] │ @@ -62,53 +214,58 @@ User actions: └────────────────────────────────────────────────────────────────┘ ┌─────────────┬──────────────────────────────────────────────────┐ │ │ │ -│ ← Cliënten │ Dashboard Overzicht │ +│ ← Cliënten │ Dossier Overzicht │ │ ───────── │ │ │ Dashboard ◄ │ ┌──────────────┬──────────────┬──────────────┐ │ -│ Intakes │ │Cliëntinfo │Laatste Intake│Probleemprofiel│ │ -│ Probleem │ │ │ │ │ │ -│ Behandel │ │ID: CL0002 │12-10-2023 │Hoog ● │ │ -│ Agenda │ │Naam: Bas J. │ │Angststoornis │ │ -│ │ │Geb: 20-11-92 │"Bas komt op │Panietstoornis│ │ -│ │ │Verz: [naam] │gesprek..." │met agorafobie│ │ -│ │ │ │ │ │ │ -│ │ │ │Lees meer → │Bekijk → │ │ +│ 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 │ │ +│ │ │ Behandelplan Status: Concept │ │ │ │ │ │ │ -│ │ │ Geen behandelplan gevonden. │ │ +│ │ │ SMART Doelen (3): │ │ +│ │ │ • Verminderen paniekeaanvallen │ │ +│ │ │ • Uitbreiden sociale activiteiten │ │ +│ │ │ • Verbeteren coping strategieën │ │ │ │ │ │ │ -│ │ │ [+ Maak behandelplan] │ │ +│ │ │ Interventies: CGT, Exposure therapie │ │ +│ │ │ Bekijk plan → │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ Afspraken │ │ │ │ │ │ │ -│ │ │ Laatste Afspraak │ │ -│ │ │ │ 14-11-2025, 16:26 - Intake │ │ +│ │ │ Afgelopen Afspraak │ │ +│ │ │ │ 14-11-2025, 16:26 - Intake (60 min) │ │ │ │ │ │ │ -│ │ │ Eerstvolgende 3 Afspraken │ │ +│ │ │ Komende Afspraken │ │ │ │ │ │ 22-11-2025, 16:26 - Psycho-educatie │ │ │ │ │ │ 29-11-2025, 16:26 - Exposure therapie │ │ -│ │ │ │ 06-12-2025, 16:26 - Evaluatie │ │ +│ │ │ │ 06-12-2025, 16:26 - Evaluatie gesprek │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ └─────────────┴──────────────────────────────────────────────────┘ User actions: -→ Klik "← Cliënten": terug naar cliëntenlijst -→ Klik "Bas Jansen ▼": dropdown met recente/favoriete cliënten -→ Type in [Zoek cliënt]: autocomplete zoeken, direct switchen -→ Klik sidebar item (bijv. Intakes): navigeer naar dat scherm -→ Klik "Lees meer" of "Bekijk": navigeer naar detail scherm -→ Klik [+ Maak behandelplan]: open behandelplan wizard +→ 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 3: Intakes (Client Dossier - Bas Jansen) +## Mock 2B: Intake (Client Dossier - Bas Jansen) ``` ┌────────────────────────────────────────────────────────────────┐ │ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │ @@ -116,13 +273,13 @@ User actions: └────────────────────────────────────────────────────────────────┘ ┌─────────────┬──────────────────────────────────────────────────┐ │ │ │ -│ ← Cliënten │ Intakes [+ Nieuwe Intake] │ +│ ← Cliënten │ Intake [+ Nieuwe Intake] │ │ ───────── │ │ │ Dashboard │ Datum Type Status Samenvatting │ -│ Intakes ◄ │ ───────────────────────────────────────────── │ -│ Probleem │ │ +│ Intake ◄ │ ───────────────────────────────────────────── │ +│ Diagnose │ │ │ Behandel │ 12-10-2023 Intake ●Afgerond │ -│ Agenda │ 14:30 gesprek │ +│ Rapportage │ 14:30 gesprek │ │ │ Eerste intake. Cliënt presenteert │ │ │ zich met angst- en paniekkl... │ │ │ [Bekijk] │ @@ -144,15 +301,150 @@ User actions: └─────────────┴──────────────────────────────────────────────────┘ User actions: -→ Klik [+ Nieuwe Intake]: open intake form/wizard -→ Klik [Bekijk]: open intake detail (zie Mock 4) +→ 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/header navigation: zelfde als Dashboard +→ Sidebar navigatie: blijf binnen client dossier context +→ Klik "← Cliënten": terug naar Level 1 ``` --- -## Mock 4: Intake Detail (Slide-in Panel) +## 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...] │ @@ -160,13 +452,13 @@ User actions: └────────────────────────────────────────────────────────────────┘ ┌─────────────┬──────────────────────────┬───────────────────────┐ │ │ │ │ -│ ← Cliënten │ Intakes [+ Nieuwe] │ Intake - 12-10-2023 ✕ │ +│ ← Cliënten │ Intake [+ Nieuwe] │ Intake - 12-10-2023 ✕ │ │ ───────── │ │ ─────────────────────│ │ Dashboard │ Datum Type Status │ Algemene informatie │ -│ Intakes ◄ │ ─────────────────── │ │ -│ Probleem │ │ Datum & tijd: │ +│ Intake ◄ │ ─────────────────── │ │ +│ Diagnose │ │ Datum & tijd: │ │ Behandel │ 12-10 Intake ●Afgr. │ 12-10-2023, 14:30 │ -│ Agenda │ [row highlighted] │ │ +│ Rapportage │ [row highlighted] │ │ │ │ [Bekijk] │ Type: Intake gesprek │ │ │ ───────────────── │ Behandelaar: [naam] │ │ │ │ Duur: 60 minuten │ @@ -205,7 +497,10 @@ User actions: --- -## Mock 5: Client Switcher (Dropdown from Header) +## Mock 2G: Client Switcher (Dropdown from Header) + +**Context:** Alleen beschikbaar in Level 2 (Client Dossier Context) + ``` ┌────────────────────────────────────────────────────────────────┐ │ Mini-ECD ┌─────────────────────────┐ [Zoek cliënt...] │ @@ -220,106 +515,288 @@ User actions: │ │ ● 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 scherm type) -→ Klik [Alle cliënten →]: ga naar cliëntenlijst +→ 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: Nieuwe intake toevoegen +### Scenario 1: Start applicatie → Client dossier bekijken ``` -1. User zit in [Cliënten Lijst] -2. Klik op "Bas Jansen" rij -3. Navigeer naar [Dashboard - Bas Jansen] -4. Klik sidebar "Intakes" -5. Navigeer naar [Intakes - Bas Jansen] -6. Klik [+ Nieuwe Intake] -7. Open intake form modal -8. Vul gegevens in, klik [Opslaan] -9. Modal sluit, nieuwe intake verschijnt bovenaan lijst +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: Tussen cliënten switchen tijdens werk +### Scenario 2: Nieuwe intake toevoegen ``` -1. User zit in [Intakes - Bas Jansen] -2. Type "Anna" in header zoekbalk -3. Zie autocomplete resultaat "Anna de Vries" -4. Klik op resultaat -5. Navigeer naar [Intakes - Anna de Vries] (zelfde scherm type) +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: Van detail terug naar overzicht +### Scenario 3: Tussen cliënten switchen tijdens werk ``` -1. User zit in [Dashboard - Bas Jansen] -2. Klik "Lees meer" op Intake card -3. Navigeer naar [Intakes - Bas Jansen] -4. Klik [Bekijk] op specifieke intake -5. Intake detail panel opent -6. Lees notities, klik ✕ -7. Panel sluit, terug op [Intakes - Bas Jansen] -8. Klik "← Cliënten" in sidebar -9. Navigeer naar [Cliënten Lijst] -``` - -### Scenario 4: Quick client switch via dropdown -``` -1. User zit in [Behandelplan - Bas Jansen] -2. Klik "Bas Jansen ▼" in header +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. Navigeer naar [Behandelplan - 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 -### Sidebar "← Cliënten" button: -- Altijd zichtbaar in client dossier views -- Navigeert naar [Cliënten Lijst] +### 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) -### Header client dropdown: -- Toont laatste 3-5 bezochte cliënten -- Link naar volledige cliëntenlijst onderaan -- Switchen behoudt huidige scherm type (Dashboard→Dashboard, Intakes→Intakes) +### Sidebar Behavior: -### Header zoekbalk: +**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 -- Enter of klik op resultaat: switch naar Dashboard van die cliënt +- Zoekt op: naam, BSN, cliënt ID, geboortedatum +- Toont: Naam - ID | Geboortedatum in resultaten - Keyboard shortcut: Cmd/Ctrl+K -### Sidebar menu items: -- Tonen alleen client-specifieke items als client geselecteerd -- Active state altijd duidelijk gemarkeerd -- Klikken navigeert binnen hetzelfde client dossier +**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 -- Als dat een client dossier was: toon die client -- Als sessie verlopen: start bij [Cliënten Lijst] +- 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 getoond wordt -- `/clients` → Cliënten lijst -- `/clients/CL0002/dashboard` → Dashboard van Bas -- `/clients/CL0002/intakes` → Intakes van Bas +- 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: -- Wordt bijgewerkt bij elke client switch +- Opgeslagen in localStorage: `recent_clients: string[]` +- Wordt bijgewerkt bij elke client view (Level 2 entry) - Max 5 items -- Gesorteerd op laatst bezocht (nieuwste bovenaan) \ No newline at end of file +- 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` \ No newline at end of file diff --git a/docs/specs/api-acces-mini-ecd.md b/docs/specs/archive/api-acces-mini-ecd.md similarity index 100% rename from docs/specs/api-acces-mini-ecd.md rename to docs/specs/archive/api-acces-mini-ecd.md diff --git a/docs/specs/bouwplan-ai-speedrun-marketing-first-v2.1.md b/docs/specs/archive/bouwplan-ai-speedrun-marketing-first-v2.1.md similarity index 100% rename from docs/specs/bouwplan-ai-speedrun-marketing-first-v2.1.md rename to docs/specs/archive/bouwplan-ai-speedrun-marketing-first-v2.1.md diff --git a/docs/specs/bouwplan-auth-hook-duplicate-email-v1.0.md b/docs/specs/archive/bouwplan-auth-hook-duplicate-email-v1.0.md similarity index 100% rename from docs/specs/bouwplan-auth-hook-duplicate-email-v1.0.md rename to docs/specs/archive/bouwplan-auth-hook-duplicate-email-v1.0.md diff --git a/docs/specs/bouwplan-login-refactor-v1.0.md b/docs/specs/archive/bouwplan-login-refactor-v1.0.md similarity index 100% rename from docs/specs/bouwplan-login-refactor-v1.0.md rename to docs/specs/archive/bouwplan-login-refactor-v1.0.md diff --git a/docs/specs/design-specs-manifesto-website.md b/docs/specs/archive/design-specs-manifesto-website.md similarity index 100% rename from docs/specs/design-specs-manifesto-website.md rename to docs/specs/archive/design-specs-manifesto-website.md diff --git a/docs/specs/fo-live-transcriptie-v1.md b/docs/specs/archive/fo-live-transcriptie-v1.md similarity index 100% rename from docs/specs/fo-live-transcriptie-v1.md rename to docs/specs/archive/fo-live-transcriptie-v1.md diff --git a/docs/specs/fo-marketing-app-flow-v2.md b/docs/specs/archive/fo-marketing-app-flow-v2.md similarity index 100% rename from docs/specs/fo-marketing-app-flow-v2.md rename to docs/specs/archive/fo-marketing-app-flow-v2.md diff --git a/docs/specs/fo-mini-ecd-v2.md b/docs/specs/archive/fo-mini-ecd-v2.md similarity index 100% rename from docs/specs/fo-mini-ecd-v2.md rename to docs/specs/archive/fo-mini-ecd-v2.md diff --git a/docs/specs/prd-mini-ecd-v1.2.md b/docs/specs/archive/prd-mini-ecd-v1.2.md similarity index 100% rename from docs/specs/prd-mini-ecd-v1.2.md rename to docs/specs/archive/prd-mini-ecd-v1.2.md diff --git a/lib/mdx/releases.ts b/lib/mdx/releases.ts index 6a03ff5..26fe422 100644 --- a/lib/mdx/releases.ts +++ b/lib/mdx/releases.ts @@ -7,7 +7,6 @@ import fs from 'fs' import path from 'path' import matter from 'gray-matter' -import { MDXRemote } from 'next-mdx-remote/rsc' const RELEASES_DIR = path.join(process.cwd(), 'content/nl/releases') diff --git a/package.json b/package.json index 52b499d..5caa450 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ }, "devDependencies": { "@tailwindcss/postcss": "^4", + "@types/mdx": "^2.0.13", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6968d4d..fd61507 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -75,6 +75,9 @@ importers: '@tailwindcss/postcss': specifier: ^4 version: 4.1.17 + '@types/mdx': + specifier: ^2.0.13 + version: 2.0.13 '@types/node': specifier: ^20 version: 20.19.24