Files

colinislit dbde412465 bouwplan templates

2025-11-11 09:28:46 +01:00

23 KiB

Raw Blame History

🧩 Functioneel Ontwerp (FO) – Mini-ECD Prototype

Projectnaam: Mini-ECD Prototype Versie: v1.0 (MVP) Datum: 09-11-2025 Auteur: Ontwikkelteam PinkRoccade GGZ

1. Doel en relatie met het PRD

🎯 Doel van dit document: Het Functioneel Ontwerp (FO) beschrijft hoe de Mini-ECD applicatie functioneel werkt — wat de gebruiker ziet, doet en ervaart tijdens de AI-inspiratiesessie. Waar het PRD uitlegt wat en waarom, laat het FO zien hoe dit in de praktijk werkt.

📘 Context: Dit FO ondersteunt de demo van max. 10 minuten waarbij we de kernflow intake → probleemclassificatie → behandelplan demonstreren met AI-ondersteuning. Het richt zich op de herkenbare ECD-workflow voor GGZ-professionals, met fictieve data en vereenvoudigde autorisatie.

Relatie met andere documenten:

PRD: definieert de vereisten en scope
TO (Technisch Ontwerp): beschrijft de technische implementatie (Next.js, Supabase, Claude AI)
UX Stylesheet: specificeert kleuren en styling
API Access: documenteert de AI endpoints

2. Overzicht van de belangrijkste onderdelen

De applicatie bestaat uit de volgende hoofdonderdelen:

Cliëntenlijst — overzicht van alle cliënten met zoek- en filterfunctionaliteit
Cliëntdossier / Dashboard — configureerbare tegels met overzicht per cliënt
Intakeverslag — rich text editor met AI-ondersteuning
Probleemprofiel (DSM-light) — categorisatie en severity-bepaling
Behandelplan — gestructureerd plan met doelen, interventies en meetmomenten
(Stretch) Mini-agenda — afspraken koppelen aan cliënt
(Stretch) Rapportage — PDF export van dossier

3. User Stories

Primaire User Stories (MVP)

ID	Rol	Doel / Actie	Verwachte waarde	Prioriteit
US-01	Behandelaar	Nieuwe cliënt aanmaken met basisgegevens	Kan direct starten met intake	Hoog
US-02	Behandelaar	Intakeverslag schrijven in rich text editor	Flexibel notuleren met opmaak	Hoog
US-03	Behandelaar	Intakeverslag samenvatten met AI	Tijdbesparing, sneller overzicht	Hoog
US-04	Behandelaar	Leesbaarheid verbeteren naar B1-niveau met AI	Cliëntvriendelijke communicatie	Middel
US-05	Behandelaar	AI-suggestie krijgen voor DSM-light categorie en severity	Snellere en consistentere classificatie	Hoog
US-06	Behandelaar	Behandelplan genereren op basis van intake/profiel	Efficiënter plannen, SMART-doelen	Hoog
US-07	Behandelaar	Gegenereerd plan bewerken en publiceren	Controle over eindresultaat	Hoog
US-08	Behandelaar	Configureren welke dashboard-tegels zichtbaar zijn	Personalisatie werkruimte	Laag

Secundaire User Stories (Stakeholders)

ID	Rol	Doel / Actie	Verwachte waarde	Prioriteit
US-09	Product Owner	Demo-flow doorlopen tijdens workshop	Begrijpt AI-toegevoegde waarde	Hoog
US-10	Developer	Zien hoe AI in ECD-proces geïntegreerd is	Inspiratie voor eigen implementaties	Middel
US-11	Manager	Overzicht van cliëntdossiers bekijken	Inzicht in werkprocessen	Laag

4. Functionele werking per onderdeel

4.1 Cliëntenlijst

Doel: Overzicht van alle geregistreerde cliënten met mogelijkheid om nieuwe cliënten toe te voegen.

Functionaliteit:

Weergave:
- Tabel met kolommen: ClientID, Naam (Voornaam + Achternaam), Geboortedatum, Laatste update
- Zoekbalk bovenaan voor filteren op naam of ClientID
- Knop + Nieuwe cliënt rechtsboven
Acties:
- Klik op rij → navigeert naar Cliëntdossier (Dashboard)
- Klik + Nieuwe cliënt → opent modal/drawer met formulier:
  - Velden: Voornaam (verplicht), Achternaam (verplicht), Geboortedatum (datum picker)
  - Knop Annuleren | Opslaan
  - Bij opslaan: ClientID wordt automatisch gegenereerd (UUID)
States:
- Leeg-staat: "Nog geen cliënten. Klik op '+ Nieuwe cliënt' om te starten."
- Laden: Skeleton loaders voor tabelrijen
- Fout: Toast-melding "Kon cliënten niet laden. Probeer opnieuw."

4.2 Cliëntdossier / Dashboard

Doel: Overzichtspagina per cliënt met configureerbare informatie-tegels.

Structuur:

Topbalk:
- Breadcrumb: Cliënten > [Naam cliënt]
- Rechtsboven: Knop Instellingen (tandwiel-icoon) → opent tegel-configuratie modal
Linkernavigatie (verticaal):
- Menu-items: Overzicht (actief) | Intakes | Probleemprofiel | Behandelplan | (Afspraken)
- Actieve item heeft blauwe accent-bar en lichte achtergrond
Middenpaneel (tegels):
- Configureerbare tegels (via instellingen aan/uit te zetten):
  1. Basisgegevens — ClientID, Naam, Geboortedatum
  2. Laatste Intake — titel, datum, eerste 3 regels + "Lees meer..."
  3. Probleemprofiel — DSM-light categorie badge + severity badge (Laag/Middel/Hoog)
  4. Behandelplan — status (Concept/Gepubliceerd), aantal doelen, laatst bijgewerkt
  5. Afspraken — laatste afspraak + eerstvolgende 3 afspraken (optioneel, stretch)

Interacties:

Klik op tegel → navigeert naar desbetreffende sectie (bv. Intake-tegel → Intakes tab)
Instellingen modal:
- Checkboxes per tegel om zichtbaarheid in/uit te schakelen
- Knop Opslaan → slaat voorkeur op (per gebruiker, lokaal)

4.3 Intakeverslag

Doel: Creëren en bewerken van intake-notities met rich text en AI-ondersteuning.

Layout:

┌─────────────────────────────────────────────────────────┐
│ Topbalk: Cliëntnaam | [Opslaan] [AI-acties ▼]           │
├───────────────┬─────────────────────────────────────────┤
│ Linkernav     │  Editor (hoofdpaneel)   │ AI-rail       │
│ (tabs)        │  TipTap rich text       │ (rechts)      │
│               │                         │               │
├───────────────┴─────────────────────────┴───────────────┤
│ Toast area (meldingen)                                  │
└─────────────────────────────────────────────────────────┘

Hoofdpaneel (Editor):

Formulier boven editor:
- Titel (optioneel): "Intake [datum]"
- Tag dropdown: Intake | Evaluatie | Plan
TipTap rich text editor:
- Toolbar: Bold, Italic, Underline, Bullet list, Numbered list, Blockquote
- Placeholder: "Noteer hier de intake-informatie..."
- Auto-save indicator: "Opgeslagen om [tijd]" onder editor
Knoppen onder editor:
- Opslaan (primair, blauw) — slaat verslag op
- AI-acties dropdown (secundair, grijs):
  - Samenvatten
  - Verbeter leesbaarheid (B1)
  - Extract problemen

AI-rail (rechterpaneel):

Initieel: Leeg met prompt "Selecteer een AI-actie om te beginnen"
Na AI-actie:
- Header: "AI-resultaat: [actienaam]" + loading spinner tijdens verwerking
- Content area:
  - Voor Samenvatten: Bulletpoints van samenvatting
  - Voor Leesbaarheid: Herschreven tekst (diff-weergave optioneel)
  - Voor Extract: Voorgestelde categorie + severity + bronzinnen (highlighted in editor)
- Acties:
  - Invoegen (primair) — voegt resultaat in editor toe
  - Kopiëren (secundair) — kopieert naar clipboard
  - Annuleren (ghost) — verwerpt resultaat

States & feedback:

AI bezig: Non-blocking spinner in AI-rail + "Genereren..." melding
AI fout: Foutmelding in rail: "Kon niet verwerken. Probeer opnieuw." + retry-knop
Opslaan gelukt: Groene toast "Verslag opgeslagen"
Opslaan mislukt: Rode toast "Kon niet opslaan. Controleer verbinding."

AI Source Highlighting (voor Extract):

Bronzinnen die AI gebruikt heeft worden gehighlight in de editor (lichtgele achtergrond)
Highlights verdwijnen bij Invoegen, Annuleren of nieuwe AI-actie

Keyboard shortcuts:

Ctrl/Cmd+S: Opslaan
Ctrl/Cmd+K: Zoeken in tekst
Ctrl/Cmd+N: Nieuw verslag

4.4 Probleemprofiel (DSM-light)

Doel: Categoriseren van problematiek volgens vereenvoudigde DSM-classificatie met severity-bepaling.

Layout:

Formulier (links, 60%):
- Categorie (dropdown, verplicht):
  - Stemming / Depressieve klachten
  - Angststoornissen
  - Gedrags- en impulsstoornissen
  - Middelengebruik / Verslaving
  - Cognitieve stoornissen
  - Context / Psychosociaal
- Severity (button group of slider):
  - Laag (grijs badge)
  - Middel (geel badge)
  - Hoog (rood badge)
- Opmerkingen (textarea, optioneel): vrij tekstveld voor notities
- Bronverslag (readonly): "Gebaseerd op intake [titel] van [datum]"
AI-suggestie paneel (rechts, 40%):
- Trigger: Knop AI › Analyseer intake
- Output:
  - Voorgestelde categorie (highlight)
  - Voorgestelde severity (highlight)
  - Rationale (korte uitleg, 2-3 zinnen)
  - Bronzinnen (quotes uit intake)
- Acties:
  - Accepteer suggestie — vult formulier automatisch in
  - Negeer — sluit suggestie paneel

States:

Geen profiel: "Nog geen probleemprofiel. Start met AI-analyse of vul handmatig in."
AI bezig: Skeleton loader in suggestie-paneel
Opgeslagen: Groene melding "Probleemprofiel opgeslagen" → activeert Behandelplan tab

4.5 Behandelplan

Doel: Genereren en bewerken van een gestructureerd behandelplan met SMART-doelen.

Structuur:

Header:
- Versie-indicator: "Concept" (oranje badge) of "Versie X – Gepubliceerd" (groene badge)
- Publicatiedatum (indien gepubliceerd)
Vier secties (cards/accordions):
1. Doelen
  - Lijst van doelen (bullets, bewerkbaar)
  - Voorbeeld: "Cliënt ervaart minder angstklachten in sociale situaties binnen 3 maanden"
  - Micro-AI-actie: Knop ↻ Regenereer per doel
2. Interventies
  - Lijst van interventies
  - Voorbeeld: "Cognitieve gedragstherapie (CGT), 12 sessies"
  - Micro-AI-actie: Knop ↻ Regenereer per interventie
3. Frequentie/Duur
  - Tekstveld met suggestie
  - Voorbeeld: "Wekelijks, 12 weken, 50 minuten per sessie"
4. Meetmomenten
  - Lijst van evaluatiemomenten
  - Voorbeeld: "Na 4 sessies, na 8 sessies, afsluiting na 12 sessies"

Initiële generatie:

Trigger: Knop AI › Genereer behandelplan (alleen zichtbaar als probleemprofiel bestaat)
Input: Gebruikt intake-notities + probleemprofiel als context
Output: Vult alle vier secties met voorstellen
Feedback: "Plan gegenereerd. Bekijk en bewerk indien nodig." (blauwe info-toast)

Bewerken:

Alle velden/bullets zijn inline bewerkbaar (contentEditable of input fields)
Auto-save: Elke wijziging wordt automatisch opgeslagen als concept

Publiceren:

Knop: Publiceer v[N] (rechtsboven)
Validatie: Controleer of alle secties gevuld zijn
Actie:
- Wijzigt status van "Concept" naar "Gepubliceerd"
- Verhoogt versienummer
- Timestamp van publicatie
- Concept wordt read-only; nieuwe wijzigingen maken nieuwe versie aan
Feedback: "Behandelplan v1 gepubliceerd" (groene toast)

States:

Geen plan: "Nog geen behandelplan. Genereer met AI of start handmatig."
Concept: Oranje badge, bewerkbaar
Gepubliceerd: Groene badge, read-only met knop Nieuwe versie

4.6 Mini-agenda (stretch, optioneel)

Doel: Afspraken koppelen aan cliënt voor planning en follow-up.

Functionaliteit:

Kalenderweergave (week of maand)
Nieuwe afspraak:
- Datum/tijd picker
- Type afspraak (dropdown): Intake | Evaluatie | Behandeling
- Locatie (optioneel)
- Notities (optioneel)
Weergave in dashboard: laatste + eerstvolgende 3 afspraken

4.7 Rapportage (stretch, optioneel)

Doel: PDF export van volledige cliëntdossier voor archivering of delen.

Functionaliteit:

Knop: Exporteer als PDF in cliënt-menu
Inhoud:
- Basisgegevens
- Alle intakes (chronologisch)
- Probleemprofiel
- Behandelplan (gepubliceerde versie)
- (Optioneel) Afspraken
Output: Downloads PDF met professionele opmaak (logo, headers, footers)

5. UI-overzicht (visuele structuur)

Globale layout (alle schermen)

┌──────────────────────────────────────────────────────────────┐
│ Topbalk: Logo | Breadcrumb | Zoeken | User menu             │
├───────────────┬──────────────────────────────────────────────┤
│ Linkernav     │  Middenpaneel (content area)                 │
│ (indien actief│  → Dashboard: tegels                         │
│  in dossier)  │  → Intake: editor + AI-rail                  │
│               │  → Profiel: formulier + suggestie            │
│ Overzicht     │  → Plan: secties met doelen/interventies     │
│ Intakes       │                                              │
│ Profiel       │                                              │
│ Plan          │                                              │
│ (Afspraken)   │                                              │
├───────────────┴──────────────────────────────────────────────┤
│ Toast area (rechtsonder): meldingen (success/error/info)    │
└──────────────────────────────────────────────────────────────┘

Cliëntenlijst (geen linkernav)

┌──────────────────────────────────────────────────────────────┐
│ Topbalk: Logo | Zoeken | [+ Nieuwe cliënt]                  │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  Cliëntenlijst                                               │
│  ┌────────────────────────────────────────────────────┐     │
│  │ ID    │ Naam             │ Geboortedatum │ Update │     │
│  ├───────┼──────────────────┼───────────────┼────────┤     │
│  │ C-001 │ Jan de Vries     │ 15-03-1985    │ 2u     │     │
│  │ C-002 │ Maria Jansen     │ 22-07-1990    │ 1d     │     │
│  └────────────────────────────────────────────────────┘     │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Intake-editor met AI-rail

┌──────────────────────────────────────────────────────────────┐
│ Jan de Vries | [Opslaan] [AI-acties ▼]                      │
├───────────────┬─────────────────────┬────────────────────────┤
│ Overzicht     │ Editor              │ AI-rail               │
│ Intakes ●     │ ┌─────────────────┐ │ ┌──────────────────┐ │
│ Profiel       │ │ Titel: [.......]│ │ │ AI-resultaat:    │ │
│ Plan          │ │ Tag: [Intake ▼] │ │ │ Samenvatting     │ │
│               │ └─────────────────┘ │ │                  │ │
│               │                     │ │ • Punt 1         │ │
│               │ Rich text area...   │ │ • Punt 2         │ │
│               │                     │ │                  │ │
│               │                     │ │ [Invoegen]       │ │
│               │                     │ │ [Annuleren]      │ │
│               │                     │ └──────────────────┘ │
│               │ [Opslaan]           │                      │
├───────────────┴─────────────────────┴────────────────────────┤
│ Toast: "Verslag opgeslagen" (groen)                         │
└──────────────────────────────────────────────────────────────┘

6. Interacties met AI (functionele beschrijving)

Locatie	AI-actie	Trigger	Input	Output	Feedback
Intake-editor	Samenvatten	Klik op AI › Samenvatten	TipTap JSON (intake-tekst)	5-8 bullets in NL	Preview in AI-rail → Invoegen/Annuleren
Intake-editor	Leesbaarheid (B1)	Klik op AI › Verbeter leesbaarheid	TipTap JSON	Herschreven tekst (B1-niveau)	Preview in AI-rail → Invoegen/Annuleren
Intake-editor	Extract problemen	Klik op AI › Extract problemen	TipTap JSON	Categorie + severity + rationale + bronzinnen	Suggestie in AI-rail + highlights in editor
Probleemprofiel	Analyseer intake	Klik op AI › Analyseer intake	Intake-tekst (laatste verslag)	Voorgestelde categorie + severity + rationale	Suggestie-paneel rechts → Accepteren/Negeren
Behandelplan	Genereer plan	Klik op AI › Genereer behandelplan	Intake + probleemprofiel	4 secties (doelen, interventies, frequentie, meetmomenten)	Vult alle secties → bewerkbaar
Behandelplan	Regenereer doel	Klik op ↻ bij specifiek doel	Context (huidige doelen + intake)	Nieuw geformuleerd doel (SMART)	Vervangt huidige doel → bewerkbaar

AI-processing states:

Bezig: Non-blocking spinner + "Genereren..." tekst
Succes: Output verschijnt in preview/suggestie-area
Fout: Rode melding "Kon niet verwerken" + retry-knop
Timeout: "AI-actie duurde te lang. Probeer opnieuw."

AI-highlights (Extract problemen):

Bronzinnen krijgen lichtgele achtergrond in editor
Highlights verdwijnen bij: Invoegen, Annuleren, of nieuwe AI-actie
Implementatie: TipTap Decorations API

7. Gebruikersrollen en rechten

MVP: Vereenvoudigde autorisatie — alle authenticated users hebben volledige toegang (demo-omgeving).

Rol	Toegang tot	Beperkingen	Implementatie
Demo-user (MVP)	Alle cliëntdossiers, alle functies	Alleen fictieve data	Supabase Auth, RLS policy: `auth.uid() IS NOT NULL`

Post-MVP (Roadmap):

Rol	Toegang tot	Beperkingen
Behandelaar	Eigen cliëntdossiers + gedeelde dossiers	Kan alleen eigen dossiers bewerken
Manager	Alle dossiers (read-only)	Geen bewerkingen, alleen rapportages
Admin	Alles	Volledige CRUD + gebruikersbeheer

Toekomstige implementatie:

Multi-tenant: org_id kolom in alle tables
RLS policies: auth.jwt() ->> 'org_id' = org_id
Role-based access: auth.jwt() ->> 'role' checks

8. UX-specificaties (koppeling met stylesheet)

Kleurgebruik (zie /docs/ux-stylesheet.md):

Primary actions: #3B82F6 (blauw) — Opslaan, Publiceren, Invoegen
Secondary actions: #334155 (grijs) — Annuleren, Terug
Success feedback: #16A34A (groen) — toasts, badges
Warning/Concept: #EAB308 (geel) — concept-status
Error: #DC2626 (rood) — foutmeldingen

Module-accenten:

Afspraken: groen (#E8F8EF bg, #16A34A accent)
Medicatie/Herinneringen: geel (#FEF6DC bg, #F59E0B accent)
Lab/Resultaten: oranje (#FFEBDC bg, #F97316 accent)

Toegankelijkheid:

Alle tekst voldoet aan WCAG AA contrast (min. 4.5:1)
Focus rings altijd zichtbaar (2px #3B82F6)
Keyboard navigation volledig ondersteund
Status niet alleen met kleur: iconen + labels combineren

9. Demo-scenario (10 minuten)

Voorbereiding: Database seeden met 2-3 fictieve cliënten (1 met partial data, 1 leeg).

Flow A: Nieuwe cliënt → Intake → AI Samenvatten (4 min)

Start: Cliëntenlijst (0:00)
Klik + Nieuwe cliënt → vul in: "Test Demo", "Testpersoon", "01-01-1990" → Opslaan (0:30)
Navigeer naar nieuwe cliënt → klik Intakes tab (0:45)
Klik + Nieuw verslag → typ demo-intake (vooraf geprepareerde tekst plakken) (1:30)
Klik AI › Samenvatten → toon preview in AI-rail (2:00)
Klik Invoegen → samenvatting verschijnt in editor (2:30)
Klik Opslaan → toast "Verslag opgeslagen" (3:00)

Flow B: Probleemprofiel genereren → AI suggestie (3 min)

Klik Probleemprofiel tab (3:15)
Klik AI › Analyseer intake → toon suggestie (categorie, severity, rationale) (4:00)
Highlights verschijnen in editor (source highlighting demo) (4:30)
Klik Accepteer suggestie → vult formulier (4:45)
Klik Opslaan → groene toast + Behandelplan tab wordt actief (5:00)

Flow C: Behandelplan genereren → Bewerken → Publiceren (3 min)

Klik Behandelplan tab (5:15)
Klik AI › Genereer behandelplan → toon alle vier secties (6:00)
Bewerk één doel handmatig → auto-save indicator (6:45)
Klik Publiceer v1 → status wijzigt naar "Gepubliceerd" (7:30)
Navigeer terug naar Overzicht → toon dashboard met tegels (8:00)
(Optioneel) Demo PDF export (8:30)

Afsluiting: Q&A + discussie AI-toegevoegde waarde (8:30-10:00)

10. Bijlagen & Referenties

Gerelateerde documenten:

Externe referenties:

TipTap editor: https://tiptap.dev
Supabase documentatie: https://supabase.com/docs
Next.js App Router: https://nextjs.org/docs/app
Claude AI API: https://docs.anthropic.com/claude/reference

Wijzigingslog:

v1.0 (09-11-2025): Initiële versie voor MVP demo

23 KiB Raw Blame History Unescape Escape

🧩 Functioneel Ontwerp (FO) – Mini-ECD Prototype

1. Doel en relatie met het PRD

2. Overzicht van de belangrijkste onderdelen

3. User Stories

Primaire User Stories (MVP)

Secundaire User Stories (Stakeholders)

4. Functionele werking per onderdeel

4.1 Cliëntenlijst

4.2 Cliëntdossier / Dashboard

4.3 Intakeverslag

4.4 Probleemprofiel (DSM-light)

4.5 Behandelplan

4.6 Mini-agenda (stretch, optioneel)

4.7 Rapportage (stretch, optioneel)

5. UI-overzicht (visuele structuur)

Globale layout (alle schermen)

Cliëntenlijst (geen linkernav)

Intake-editor met AI-rail

6. Interacties met AI (functionele beschrijving)

7. Gebruikersrollen en rechten

8. UX-specificaties (koppeling met stylesheet)

9. Demo-scenario (10 minuten)

Flow A: Nieuwe cliënt → Intake → AI Samenvatten (4 min)

Flow B: Probleemprofiel genereren → AI suggestie (3 min)

Flow C: Behandelplan genereren → Bewerken → Publiceren (3 min)

10. Bijlagen & Referenties

23 KiB

Raw Blame History