diff --git a/docs/specs/UI/inteface-design-plan.md b/docs/specs/UI/inteface-design-plan.md new file mode 100644 index 0000000..f92c5da --- /dev/null +++ b/docs/specs/UI/inteface-design-plan.md @@ -0,0 +1,507 @@ +# 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 + +--- + +## Layout Components (Consistent across all views) + +### 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) + - **Right**: Search input "Zoek cliënt..." with icon (rounded, light border) + +### 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) + +**Menu items:** +- Dashboard (icon + text) +- Intakes (icon + text) +- Probleemprofiel (icon + text) +- Behandelplan (icon + text) +- Agenda (icon + text) + +**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) + +--- + +## Screen 1: Cliënten (Search/List View) + +### 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) + +### Main Content +**Top bar:** +- Title: "Cliënten" (large, semi-bold, left) +- Button: "+ Nieuwe Cliënt" (primary style, right) +- Space-between layout + +**Search bar (below title):** +- Full-width input field +- Placeholder: "Zoek op naam, BSN, of cliënt ID..." +- Icon: magnifying glass left side +- 16px margin bottom + +**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 │ │ +│ │ Naam ID Geb Status │ +│ │ ────────────────────────────────── │ +│ │ Bas J. CL0002 20-11 Actief │ +│ │ Anna dV CL0001 15-03 Actief │ +│ │ Peter S. CL0003 22-07 Wachtlijst │ +└───────────┴─────────────────────────────────────┘ +``` + +--- + +## Screen 2: Dashboard (Client Dossier) + +### Header +- Same as default, but with "Bas Jansen ▼" visible in center + +### Sidebar +- "← Cliënten" button at top +- Horizontal divider +- **Dashboard** ← ACTIVE +- Intakes +- Probleemprofiel +- Behandelplan +- Agenda + +### Main Content +**Breadcrumb:** "Dashboard > Overzicht" (small, muted) + +**Page title:** "Dashboard 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 + - Verzekering: [naam verzekeraar] + - BSN: [nummer] +- Labels: muted, small +- Values: normal weight, darker + +Column 2 - Laatste Intake card: +- Card style: same as column 1 +- Title: "Laatste Intake Notitie" +- Date/time: "Intake - 12-10-2023" (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) + +Column 3 - Probleemprofiel card: +- Card style: same as above +- Title: "Probleemprofiel" +- 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) + +**Row 2: Full width (margin top: 24px)** + +Behandelplan card: +- Card style: same +- Title: "Behandelplan" +- Empty state: + - Light gray background section inside card + - Centered text: "Geen behandelplan gevonden." + - "+ Maak behandelplan" button (secondary style, centered below) + +**Row 3: Full width (margin top: 24px)** + +Afspraken card: +- Card style: same +- Title: "Afspraken" + +Section 1: +- Subtitle: "Laatste Afspraak" (small, muted, 8px margin bottom) +- Item: "14-11-2025, 16:26 - Intake" (with subtle icon left) + +Divider line (subtle, 16px margin vertical) + +Section 2: +- Subtitle: "Eerstvolgende 3 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) + +**Layout structure:** +``` +┌──────────────────────────────────────────────────┐ +│ Header: Logo | Bas Jansen ▼ | Search │ +├──────────┬───────────────────────────────────────┤ +│← Cliënten│ Dashboard Overzicht │ +│────── │ │ +│Dashboard │ ┌─────────┬─────────┬──────────┐ │ +│Intakes │ │ Info │ Intake │ Problem │ │ +│Probleem │ │ Card │ Card │ Card │ │ +│Behandel │ └─────────┴─────────┴──────────┘ │ +│Agenda │ ┌──────────────────────────────┐ │ +│ │ │ Behandelplan Card │ │ +│ │ └──────────────────────────────┘ │ +│ │ ┌──────────────────────────────┐ │ +│ │ │ Afspraken Card │ │ +│ │ └──────────────────────────────┘ │ +└──────────┴───────────────────────────────────────┘ +``` + +--- + +## Screen 3: Intakes (Client Dossier) + +### Header +- Same, "Bas Jansen ▼" in center + +### Sidebar +- "← Cliënten" button +- Divider +- Dashboard +- **Intakes** ← ACTIVE +- Probleemprofiel +- Behandelplan +- Agenda + +### 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 │ +├──────────┬───────────────────────────────────────┤ +│← Cliënten│ Intakes [+ Nieuwe Intake] │ +│────── │ │ +│Dashboard │ Datum Type Status Samenvat.. │ +│Intakes ← │ ───────────────────────────────── │ +│Probleem │ 12-10 Intake Afgr. Eerste... │ +│Behandel │ 05-10 Telef. Afgr. Korte... │ +│Agenda │ 28-09 Intake Afgr. Geen sh... │ +│ │ │ +└──────────┴───────────────────────────────────────┘ +``` + +--- + +## 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: 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 + +### 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): +``` +/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 +``` + +### Component structure: +``` +app/ +├── layout.tsx (header + sidebar logic) +├── clients/ +│ ├── page.tsx (list view) +│ └── [id]/ +│ ├── layout.tsx (client-specific sidebar) +│ ├── dashboard/page.tsx +│ ├── intakes/ +│ │ ├── page.tsx (list) +│ │ └── [intakeId]/page.tsx (detail modal) +│ └── ... +``` + +### 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. \ No newline at end of file diff --git a/docs/specs/UI/mocks-ui-flow.md b/docs/specs/UI/mocks-ui-flow.md new file mode 100644 index 0000000..ea2d114 --- /dev/null +++ b/docs/specs/UI/mocks-ui-flow.md @@ -0,0 +1,325 @@ +# Mini-ECD Interface Mocks & User Flow + +## User Flow Overview +``` +START + ↓ +[Cliënten Lijst] ←──────────────────┐ + ↓ (klik op cliënt) │ + ↓ │ +[Dashboard - Bas Jansen] ←─────┐ │ + ↓ │ │ + ├─→ [Intakes] │ │ + ├─→ [Probleemprofiel] │ │ + ├─→ [Behandelplan] │ │ + └─→ [Agenda] │ │ + ↓ │ │ + (sidebar menu switch)────────┘ │ + ↓ │ + (← Cliënten button)──────────────┘ + ↓ + (header search) → Quick switch to other client + ↓ + [Dashboard - Anna de Vries] +``` + +--- + +## Mock 1: Cliënten Lijst (Entry Point) +``` +┌────────────────────────────────────────────────────────────────┐ +│ Mini-ECD [Zoek cliënt...] │ +└────────────────────────────────────────────────────────────────┘ +┌─────────────┬──────────────────────────────────────────────────┐ +│ │ │ +│ Dashboard │ Cliënten [+ Nieuwe Cliënt] │ +│ Cliënten ◄ │ │ +│ Agenda │ [Zoek op naam, BSN, of cliënt ID...........] │ +│ Rapportage │ │ +│ │ Naam ID Geb Status │ +│ │ ──────────────────────────────────────── │ +│ │ Bas Jansen CL0002 20-11-1992 ● Actief │ +│ │ Anna de Vries CL0001 15-03-1988 ● Actief │ +│ │ Peter Smit CL0003 22-07-1995 ● Wachtlijst │ +│ │ Maria Jansen CL0004 11-09-1990 ● Actief │ +│ │ │ +│ │ │ +└─────────────┴──────────────────────────────────────────────────┘ + +User actions: +→ Type in zoekbalk: filters lijst real-time +→ Klik op rij (bijv. Bas Jansen): navigeer naar zijn Dashboard +→ Klik [+ Nieuwe Cliënt]: open modal/form om nieuwe cliënt toe te voegen +``` + +--- + +## Mock 2: Dashboard (Client Dossier - Bas Jansen) +``` +┌────────────────────────────────────────────────────────────────┐ +│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │ +│ ID: CL0002 | Geb: 20-11-1992 │ +└────────────────────────────────────────────────────────────────┘ +┌─────────────┬──────────────────────────────────────────────────┐ +│ │ │ +│ ← Cliënten │ Dashboard 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 → │ │ +│ │ └──────────────┴──────────────┴──────────────┘ │ +│ │ │ +│ │ ┌────────────────────────────────────────────┐ │ +│ │ │ Behandelplan │ │ +│ │ │ │ │ +│ │ │ Geen behandelplan gevonden. │ │ +│ │ │ │ │ +│ │ │ [+ Maak behandelplan] │ │ +│ │ └────────────────────────────────────────────┘ │ +│ │ │ +│ │ ┌────────────────────────────────────────────┐ │ +│ │ │ Afspraken │ │ +│ │ │ │ │ +│ │ │ Laatste Afspraak │ │ +│ │ │ │ 14-11-2025, 16:26 - Intake │ │ +│ │ │ │ │ +│ │ │ Eerstvolgende 3 Afspraken │ │ +│ │ │ │ 22-11-2025, 16:26 - Psycho-educatie │ │ +│ │ │ │ 29-11-2025, 16:26 - Exposure therapie │ │ +│ │ │ │ 06-12-2025, 16:26 - Evaluatie │ │ +│ │ └────────────────────────────────────────────┘ │ +│ │ │ +└─────────────┴──────────────────────────────────────────────────┘ + +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 +``` + +--- + +## Mock 3: Intakes (Client Dossier - Bas Jansen) +``` +┌────────────────────────────────────────────────────────────────┐ +│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │ +│ ID: CL0002 | Geb: 20-11-1992 │ +└────────────────────────────────────────────────────────────────┘ +┌─────────────┬──────────────────────────────────────────────────┐ +│ │ │ +│ ← Cliënten │ Intakes [+ Nieuwe Intake] │ +│ ───────── │ │ +│ Dashboard │ Datum Type Status Samenvatting │ +│ Intakes ◄ │ ───────────────────────────────────────────── │ +│ Probleem │ │ +│ Behandel │ 12-10-2023 Intake ●Afgerond │ +│ Agenda │ 14:30 gesprek │ +│ │ Eerste intake. Cliënt presenteert │ +│ │ zich met angst- en paniekkl... │ +│ │ [Bekijk] │ +│ │ ───────────────────────────────────────────────│ +│ │ │ +│ │ 05-10-2023 Telefonisch ●Afgerond │ +│ │ 10:15 intake │ +│ │ Korte telefonische screening. │ +│ │ Doorverwijzing naar intake... │ +│ │ [Bekijk] │ +│ │ ───────────────────────────────────────────────│ +│ │ │ +│ │ 28-09-2023 Intake ●Afgerond │ +│ │ 16:00 gesprek │ +│ │ Geen show. Cliënt niet verschenen, │ +│ │ geen afmelding... │ +│ │ [Bekijk] │ +│ │ │ +└─────────────┴──────────────────────────────────────────────────┘ + +User actions: +→ Klik [+ Nieuwe Intake]: open intake form/wizard +→ Klik [Bekijk]: open intake detail (zie Mock 4) +→ Hover over rij: highlight, [Bekijk] button wordt prominent +→ Sidebar/header navigation: zelfde als Dashboard +``` + +--- + +## Mock 4: Intake Detail (Slide-in Panel) +``` +┌────────────────────────────────────────────────────────────────┐ +│ Mini-ECD Bas Jansen ▼ [Zoek cliënt...] │ +│ ID: CL0002 | Geb: 20-11-1992 │ +└────────────────────────────────────────────────────────────────┘ +┌─────────────┬──────────────────────────┬───────────────────────┐ +│ │ │ │ +│ ← Cliënten │ Intakes [+ Nieuwe] │ Intake - 12-10-2023 ✕ │ +│ ───────── │ │ ─────────────────────│ +│ Dashboard │ Datum Type Status │ Algemene informatie │ +│ Intakes ◄ │ ─────────────────── │ │ +│ Probleem │ │ Datum & tijd: │ +│ Behandel │ 12-10 Intake ●Afgr. │ 12-10-2023, 14:30 │ +│ Agenda │ [row highlighted] │ │ +│ │ [Bekijk] │ Type: Intake gesprek │ +│ │ ───────────────── │ Behandelaar: [naam] │ +│ │ │ Duur: 60 minuten │ +│ │ 05-10 Telef. ●Afgr. │ │ +│ │ [Bekijk] │ ─────────────────── │ +│ │ ───────────────── │ │ +│ │ │ Gespreksnotities │ +│ │ 28-09 Intake ●Afgr. │ │ +│ │ [Bekijk] │ Bas komt op gesprek │ +│ │ │ vanwege spannings- │ +│ │ │ klachten en paniek- │ +│ │ │ aanvallen. Hij be- │ +│ │ │ schrijft situaties │ +│ │ │ in het openbaar... │ +│ │ │ │ +│ │ │ Anamnese: Klachten │ +│ │ │ bestaan sinds 1 jaar │ +│ │ │ Begonnen na stress- │ +│ │ │ volle periode... │ +│ │ │ │ +│ │ │ [scrollable content] │ +│ │ │ │ +│ │ │ ─────────────────── │ +│ │ │ │ +│ │ │ [Verwijderen] [Bewerken]│ +│ │ │ │ +└─────────────┴──────────────────────────┴───────────────────────┘ + +User actions: +→ Klik ✕: sluit panel, terug naar Intakes lijst +→ Klik [Bewerken]: open intake in edit mode +→ Klik [Verwijderen]: confirmatie dialog → verwijder intake +→ Scroll in panel: bekijk volledige notities +→ Klik buiten panel (op main content): sluit panel +``` + +--- + +## Mock 5: Client Switcher (Dropdown from Header) +``` +┌────────────────────────────────────────────────────────────────┐ +│ Mini-ECD ┌─────────────────────────┐ [Zoek cliënt...] │ +│ │ Bas Jansen ▼ │ │ +│ │ ID: CL0002 | 20-11-1992 │ │ +│ ├─────────────────────────┤ │ +│ │ Recente cliënten: │ │ +│ │ ───────────────────── │ │ +│ │ ● Anna de Vries │ │ +│ │ CL0001 | 15-03-1988 │ │ +│ │ │ │ +│ │ ● Peter Smit │ │ +│ │ CL0003 | 22-07-1995 │ │ +│ │ │ │ +│ │ ───────────────────── │ │ +│ │ [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 buiten dropdown: sluit dropdown +``` + +--- + +## Complete User Flow Scenarios + +### Scenario 1: Nieuwe intake toevoegen +``` +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 +``` + +### Scenario 2: Tussen cliënten switchen tijdens werk +``` +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) +``` + +### Scenario 3: Van detail terug naar overzicht +``` +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 +3. Dropdown opent met recente cliënten +4. Klik "Anna de Vries" +5. Navigeer naar [Behandelplan - Anna de Vries] +``` + +--- + +## Navigation Rules + +### Sidebar "← Cliënten" button: +- Altijd zichtbaar in client dossier views +- 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) + +### Header zoekbalk: +- Live autocomplete tijdens typen +- Zoekt op: naam, BSN, cliënt ID +- Enter of klik op resultaat: switch naar Dashboard van die cliënt +- 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 + +--- + +## 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] + +### Browser refresh: +- URL bepaalt welk scherm getoond wordt +- `/clients` → Cliënten lijst +- `/clients/CL0002/dashboard` → Dashboard van Bas +- `/clients/CL0002/intakes` → Intakes van Bas + +### Recent clients lijst: +- Wordt bijgewerkt bij elke client switch +- Max 5 items +- Gesorteerd op laatst bezocht (nieuwste bovenaan) \ No newline at end of file