colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve MDX type imports for release notes

Browse Source 
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>
This commit is contained in:
colinislit
2025-11-19 21:16:45 +01:00
parent bae2737bd5
commit f8904db3e9
15 changed files with 1072 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/(marketing)/releases/components/mdx-components.tsx
View File

@@ -6,10 +6,7 @@
import Image from 'next/image'
import Link from 'next/link'
type MDXComponents = {
[key: string]: React.ComponentType<any>
}
import type { MDXComponents } from 'mdx/types'
export const mdxComponents: MDXComponents = {
// Headings with anchor links

557
docs/specs/UI/inteface-design-plan.md
View File

@@ -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:

705
docs/specs/UI/mocks-ui-flow.md
View File

@@ -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)
- 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`

0
docs/specs/api-acces-mini-ecd.md → docs/specs/archive/api-acces-mini-ecd.md
View File

0
docs/specs/bouwplan-ai-speedrun-marketing-first-v2.1.md → docs/specs/archive/bouwplan-ai-speedrun-marketing-first-v2.1.md
View File

0
docs/specs/bouwplan-auth-hook-duplicate-email-v1.0.md → docs/specs/archive/bouwplan-auth-hook-duplicate-email-v1.0.md
View File

0
docs/specs/bouwplan-login-refactor-v1.0.md → docs/specs/archive/bouwplan-login-refactor-v1.0.md
View File

0
docs/specs/design-specs-manifesto-website.md → docs/specs/archive/design-specs-manifesto-website.md
View File

0
docs/specs/fo-live-transcriptie-v1.md → docs/specs/archive/fo-live-transcriptie-v1.md
View File

0
docs/specs/fo-marketing-app-flow-v2.md → docs/specs/archive/fo-marketing-app-flow-v2.md
View File

0
docs/specs/fo-mini-ecd-v2.md → docs/specs/archive/fo-mini-ecd-v2.md
View File

0
docs/specs/prd-mini-ecd-v1.2.md → docs/specs/archive/prd-mini-ecd-v1.2.md
View File

1
lib/mdx/releases.ts
View File

@@ -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')

1
package.json
View File

@@ -35,6 +35,7 @@
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/mdx": "^2.0.13",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",

3
pnpm-lock.yaml generated
View File

@@ -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