f8904db3e9
Fixed runtime error in release notes pages: - Removed unused MDXRemote import from lib/mdx/releases.ts - Fixed MDXComponents type import in mdx-components.tsx - Added @types/mdx as dev dependency Pages now load correctly: - /releases (overview) - /releases/authentication - /releases/release-notes-system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
900 lines
32 KiB
Markdown
900 lines
32 KiB
Markdown
# Mini-ECD Interface Design - Complete MVP Specification
|
||
|
||
## Technical Specs
|
||
- Target: Desktop only, min-width 1280px
|
||
- Optimized for: 1440px - 1920px screens
|
||
- Framework: Next.js 15, TailwindCSS, shadcn/ui
|
||
- No mobile optimization in MVP
|
||
|
||
---
|
||
|
||
## 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**: 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
|
||
|
||
**Context-Aware Navigation:**
|
||
|
||
**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
|
||
- Icons: 20px, 12px gap to text
|
||
- Item spacing: 4px between items
|
||
- Active state: highlighted background, emphasized text, left border accent
|
||
- Hover state: subtle background change
|
||
- Text: medium weight, 15px
|
||
|
||
### Main Content Area (Scrollable)
|
||
- Background: White
|
||
- Padding: 32px all sides
|
||
- Min-height: calc(100vh - 60px)
|
||
|
||
---
|
||
|
||
## LEVEL 1 SCREENS: Behandelaar Context
|
||
|
||
---
|
||
|
||
## 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:**
|
||
- Title: "Cliënten" (large, semi-bold, left)
|
||
- Button: "+ Nieuwe Cliënt" (primary style, right)
|
||
- Space-between layout
|
||
|
||
**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:
|
||
- Columns: Naam | ID | Geboortedatum | Status | Laatste Contact
|
||
- Subtle bottom border, muted text, small size
|
||
|
||
Client rows (3-4 visible):
|
||
|
||
Row 1:
|
||
- Naam: "Bas Jansen"
|
||
- ID: "CL0002"
|
||
- Geboortedatum: "20-11-1992"
|
||
- Status: "Actief" (green badge)
|
||
- Laatste contact: "12-10-2023"
|
||
- Hover state: subtle background, pointer cursor
|
||
- Click: navigates to client dashboard
|
||
|
||
Row 2:
|
||
- Naam: "Anna de Vries"
|
||
- ID: "CL0001"
|
||
- Geboortedatum: "15-03-1988"
|
||
- Status: "Actief" (green badge)
|
||
- Laatste contact: "08-10-2023"
|
||
|
||
Row 3:
|
||
- Naam: "Peter Smit"
|
||
- ID: "CL0003"
|
||
- Geboortedatum: "22-07-1995"
|
||
- Status: "Wachtlijst" (yellow badge)
|
||
- Laatste contact: "01-10-2023"
|
||
|
||
**Empty state (if no clients):**
|
||
- Centered icon (users/people illustration)
|
||
- Text: "Nog geen cliënten"
|
||
- Subtext: "Voeg je eerste cliënt toe om te beginnen"
|
||
- "+ Nieuwe Cliënt" button (primary, centered)
|
||
|
||
**Layout structure:**
|
||
```
|
||
┌─────────────────────────────────────────────────┐
|
||
│ Header: Logo | (no client) | Search │
|
||
├───────────┬─────────────────────────────────────┤
|
||
│Dashboard │ Cliënten [+ Nieuwe Cliënt] │
|
||
│Cliënten ← │ │
|
||
│Agenda │ [Zoek op naam, BSN, of cliënt ID] │
|
||
│Rapportage │ [Filters: Afdeling, Team, Status] │
|
||
│ │ │
|
||
│ │ Naam ID Geb Status │
|
||
│ │ ────────────────────────────────── │
|
||
│ │ Bas J. CL0002 20-11 Actief │
|
||
│ │ Anna dV CL0001 15-03 Actief │
|
||
│ │ Peter S. CL0003 22-07 Wachtlijst │
|
||
└───────────┴─────────────────────────────────────┘
|
||
```
|
||
|
||
**User action to switch context:**
|
||
- Click on a client row (e.g., "Bas Jansen") → Switches to Level 2 (Client Dossier Context)
|
||
|
||
---
|
||
|
||
## Screen 1C: Behandelaar Agenda
|
||
|
||
### Sidebar
|
||
- Dashboard
|
||
- Cliënten
|
||
- **Agenda** ← ACTIVE
|
||
- Rapportage
|
||
|
||
### Main Content
|
||
**Page title:** "Agenda" (large, semi-bold)
|
||
|
||
**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:**
|
||
|
||
**Row 1: 3 equal columns (gap: 24px)**
|
||
|
||
Column 1 - Cliëntinformatie card:
|
||
- Card style: white bg, subtle border, 8px radius, 16px padding
|
||
- Title: "Cliëntinformatie" (medium, semi-bold)
|
||
- List layout:
|
||
- Label: Value pairs, stacked vertically
|
||
- 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"
|
||
- 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..."
|
||
- "Bekijk intake →" link (small, at bottom) → navigates to Intake section
|
||
|
||
Column 3 - Diagnose card:
|
||
- Card style: same as above
|
||
- Title: "Diagnose"
|
||
- Status badge: "Hoog" (red/warning bg, red text, rounded pill, inline with title)
|
||
- Subtitle: "Angststoornissen" (medium weight)
|
||
- Description text:
|
||
"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"
|
||
- 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)**
|
||
|
||
Afspraken card:
|
||
- Card style: same
|
||
- Title: "Afspraken"
|
||
|
||
Section 1:
|
||
- 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: "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│ Dossier Overzicht │
|
||
│────── │ │
|
||
│Dashboard │ ┌─────────┬─────────┬──────────┐ │
|
||
│Intake │ │ Info │ Intake │ Diagnose │ │
|
||
│Diagnose │ │ Card │ Card │ Card │ │
|
||
│Behandel │ └─────────┴─────────┴──────────┘ │
|
||
│Rapport │ ┌──────────────────────────────┐ │
|
||
│ │ │ Behandelplan Card │ │
|
||
│ │ └──────────────────────────────┘ │
|
||
│ │ ┌──────────────────────────────┐ │
|
||
│ │ │ Afspraken Card │ │
|
||
│ │ └──────────────────────────────┘ │
|
||
└──────────┴───────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## Screen 2B: Intake (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** ← ACTIVE
|
||
- Diagnose
|
||
- Behandelplan
|
||
- Rapportage
|
||
|
||
### Main Content
|
||
**Breadcrumb:** "Intakes > Overzicht"
|
||
|
||
**Top bar (flex, space-between):**
|
||
- Title: "Intakes" (large, semi-bold, left)
|
||
- Button: "+ Nieuwe Intake" (primary style, right)
|
||
|
||
**Intakes list (16px margin top):**
|
||
|
||
Header row:
|
||
- Columns: Datum | Type | Status | Samenvatting | Acties
|
||
- Subtle bottom border, muted text, small font
|
||
- 8px padding bottom
|
||
|
||
Intake item 1 (card-like row):
|
||
- Padding: 16px vertical
|
||
- Bottom border (subtle)
|
||
- Hover state: light background
|
||
|
||
Content:
|
||
- Date: "12-10-2023, 14:30" (medium weight)
|
||
- Type: "Intake gesprek" (small badge/pill, light blue bg)
|
||
- Status: "Afgerond" (small badge/pill, green bg)
|
||
- Summary: "Eerste intake. Cliënt presenteert zich met angst- en paniekkl..." (truncated ~60 chars, lighter weight)
|
||
- Actions: "Bekijk" button (small, secondary style, becomes prominent on row hover)
|
||
|
||
Intake item 2:
|
||
- Date: "05-10-2023, 10:15"
|
||
- Type: "Telefonische intake" (badge)
|
||
- Status: "Afgerond" (green badge)
|
||
- Summary: "Korte telefonische screening. Doorverwijzing naar intake..."
|
||
- Actions: "Bekijk" button
|
||
|
||
Intake item 3:
|
||
- Date: "28-09-2023, 16:00"
|
||
- Type: "Intake gesprek" (badge)
|
||
- Status: "Afgerond" (green badge)
|
||
- Summary: "Geen show. Cliënt niet verschenen, geen afmelding..."
|
||
- Actions: "Bekijk" button
|
||
|
||
**Empty state (alternative if no intakes):**
|
||
- Centered layout
|
||
- Icon: document/clipboard illustration (gray, 64px)
|
||
- Text: "Nog geen intakes" (medium, semi-bold)
|
||
- Subtext: "Klik op 'Nieuwe Intake' om te beginnen" (small, muted)
|
||
- "+ Nieuwe Intake" button (primary, centered, 16px margin top)
|
||
|
||
**Layout structure:**
|
||
```
|
||
┌──────────────────────────────────────────────────┐
|
||
│ Header: Logo | Bas Jansen ▼ | Search │
|
||
│ | ID: CL0002 | Geb: 20-11-1992 │
|
||
├──────────┬───────────────────────────────────────┤
|
||
│← Cliënten│ Intake [+ Nieuwe Intake] │
|
||
│────── │ │
|
||
│Dashboard │ Datum Type Status Samenvat.. │
|
||
│Intake ← │ ───────────────────────────────── │
|
||
│Diagnose │ 12-10 Intake Afgr. Eerste... │
|
||
│Behandel │ 05-10 Telef. Afgr. Korte... │
|
||
│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
|
||
|
||
**Display options:**
|
||
1. Slide-in panel from right (400px width, overlays content)
|
||
2. Modal overlay (centered, 600px width, backdrop blur)
|
||
|
||
**Recommended: Slide-in panel** (keeps context visible)
|
||
|
||
### Slide-in Panel Structure
|
||
|
||
**Header (sticky):**
|
||
- Background: light gray
|
||
- Padding: 16px
|
||
- Title: "Intake - 12-10-2023" (medium, semi-bold)
|
||
- Close button: "×" (top right, large, clickable)
|
||
|
||
**Content (scrollable):**
|
||
|
||
Section 1 - Algemene informatie:
|
||
- Background: white
|
||
- Padding: 16px
|
||
- Title: "Algemene informatie" (small, semi-bold, 8px margin bottom)
|
||
- Items (label: value):
|
||
- Datum & tijd: 12-10-2023, 14:30
|
||
- Type: Intake gesprek
|
||
- Behandelaar: [naam]
|
||
- Duur: 60 minuten
|
||
|
||
Divider (subtle, 16px margin vertical)
|
||
|
||
Section 2 - Gespreksnotities:
|
||
- Title: "Gespreksnotities" (small, semi-bold)
|
||
- Text area (full content, scrollable if long):
|
||
"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 hartkloppingen, duizeligheid en benauwdheid.
|
||
|
||
Anamnese: Klachten bestaan sinds ongeveer 1 jaar. Begonnen na stressvolle periode op werk. Eerste aanval in supermarkt, sindsdien toenemend vermijdingsgedrag.
|
||
|
||
Observatie: Cliënt presenteert zich alert en coöperatief. Spreekt openlijk over klachten. Lichte spanning zichtbaar bij bespreken van aanvallen..."
|
||
|
||
Divider
|
||
|
||
Section 3 - AI Samenvatting (optional for MVP):
|
||
- Background: very light blue (distinguish from manual notes)
|
||
- Padding: 12px
|
||
- Icon: sparkles/AI icon (small, top left)
|
||
- Title: "AI Samenvatting" (small, semi-bold)
|
||
- Generated text: bullet points with key findings
|
||
- Font: slightly smaller than main text
|
||
|
||
Divider
|
||
|
||
**Footer (sticky bottom):**
|
||
- Background: light gray
|
||
- Padding: 16px
|
||
- Buttons layout (flex, space-between):
|
||
- Left: "Verwijderen" button (destructive/red style, subtle)
|
||
- Right: "Bewerken" button (secondary style)
|
||
|
||
---
|
||
|
||
## Design Tokens Reference
|
||
|
||
### Spacing Scale
|
||
- xs: 4px
|
||
- sm: 8px
|
||
- md: 16px
|
||
- lg: 24px
|
||
- xl: 32px
|
||
|
||
### Border Radius
|
||
- Small (badges): 12px
|
||
- Medium (buttons): 6px
|
||
- Large (cards): 8px
|
||
|
||
### Typography Scale
|
||
- Page title: 28px, semi-bold
|
||
- Card title: 18px, semi-bold
|
||
- Section title: 14px, semi-bold
|
||
- Body text: 15px, normal
|
||
- Small text: 13px, normal
|
||
- Tiny text: 12px, normal
|
||
|
||
### Shadows
|
||
- Card: 0 1px 3px rgba(0,0,0,0.1)
|
||
- Card hover: 0 4px 6px rgba(0,0,0,0.1)
|
||
- Modal: 0 20px 25px rgba(0,0,0,0.15)
|
||
|
||
### Common Patterns
|
||
|
||
**Card component:**
|
||
- White background
|
||
- Border: 1px solid (light gray)
|
||
- Border radius: 8px
|
||
- Padding: 16px
|
||
- Shadow: subtle (see above)
|
||
|
||
**Badge/pill component:**
|
||
- Small font size (13px)
|
||
- Padding: 4px 12px
|
||
- Border radius: 12px (full rounded)
|
||
- Background: contextual (green for success, yellow for warning, etc.)
|
||
- Font weight: medium
|
||
|
||
**Button styles:**
|
||
- Primary: solid background, white text, medium weight
|
||
- Secondary: border outline, normal text
|
||
- Destructive: red color scheme
|
||
- Padding: 8px 16px
|
||
- Border radius: 6px
|
||
|
||
**List/table row:**
|
||
- Padding: 16px vertical
|
||
- Border bottom: 1px solid (light gray)
|
||
- Hover: light background change
|
||
- Cursor: pointer (if clickable)
|
||
|
||
---
|
||
|
||
## Interaction Notes
|
||
|
||
### Navigation flow:
|
||
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)
|
||
- Breadcrumbs: show current location
|
||
- Empty states: guide users to next action
|
||
- Loading states: skeleton screens for cards (not specified, but recommended)
|
||
|
||
### Accessibility considerations:
|
||
- All interactive elements: keyboard accessible
|
||
- Focus states: visible outlines
|
||
- Color contrast: WCAG AA minimum
|
||
- Alt text for icons (not visible, but in code)
|
||
|
||
---
|
||
|
||
## Technical Implementation Notes
|
||
|
||
### Routing structure (Next.js):
|
||
```
|
||
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/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 // 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 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:
|
||
- Client list: id, name, bsn, birthdate, status, last_contact
|
||
- Dashboard: aggregate data from intakes, problem profile, treatment plan
|
||
- Intakes: date, type, status, summary, full_notes, practitioner
|
||
- Problem profile: severity, diagnoses, notes
|
||
- Treatment plan: goals, interventions, status
|
||
- Appointments: date, type, notes
|
||
|
||
---
|
||
|
||
## Out of Scope for MVP
|
||
- Mobile responsive design
|
||
- Dark mode
|
||
- Multi-user roles/permissions
|
||
- Advanced filtering (beyond search)
|
||
- Bulk actions
|
||
- Export functionality
|
||
- Calendar integration
|
||
- Notifications system
|
||
- Audit logs
|
||
- Custom fields
|
||
- Templates for intakes/plans
|
||
|
||
These can be added post-MVP based on user feedback. |