# 🧩 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:

1. **Cliëntenlijst** — overzicht van alle cliënten met zoek- en filterfunctionaliteit
2. **Cliëntdossier / Dashboard** — configureerbare tegels met overzicht per cliënt
3. **Intakeverslag** — rich text editor met AI-ondersteuning
4. **Probleemprofiel (DSM-light)** — categorisatie en severity-bepaling
5. **Behandelplan** — gestructureerd plan met doelen, interventies en meetmomenten
6. *(Stretch)* **Mini-agenda** — afspraken koppelen aan cliënt
7. *(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)
1. **Start:** Cliëntenlijst (0:00)
2. Klik **+ Nieuwe cliënt** → vul in: "Test Demo", "Testpersoon", "01-01-1990" → Opslaan (0:30)
3. Navigeer naar nieuwe cliënt → klik **Intakes** tab (0:45)
4. Klik **+ Nieuw verslag** → typ demo-intake (vooraf geprepareerde tekst plakken) (1:30)
5. Klik **AI › Samenvatten** → toon preview in AI-rail (2:00)
6. Klik **Invoegen** → samenvatting verschijnt in editor (2:30)
7. Klik **Opslaan** → toast "Verslag opgeslagen" (3:00)

### Flow B: Probleemprofiel genereren → AI suggestie (3 min)
8. Klik **Probleemprofiel** tab (3:15)
9. Klik **AI › Analyseer intake** → toon suggestie (categorie, severity, rationale) (4:00)
10. Highlights verschijnen in editor (source highlighting demo) (4:30)
11. Klik **Accepteer suggestie** → vult formulier (4:45)
12. Klik **Opslaan** → groene toast + Behandelplan tab wordt actief (5:00)

### Flow C: Behandelplan genereren → Bewerken → Publiceren (3 min)
13. Klik **Behandelplan** tab (5:15)
14. Klik **AI › Genereer behandelplan** → toon alle vier secties (6:00)
15. Bewerk één doel handmatig → auto-save indicator (6:45)
16. Klik **Publiceer v1** → status wijzigt naar "Gepubliceerd" (7:30)
17. Navigeer terug naar **Overzicht** → toon dashboard met tegels (8:00)
18. **(Optioneel)** Demo PDF export (8:30)

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

---

## 10. Bijlagen & Referenties

**Gerelateerde documenten:**
- [PRD (Product Requirements Document)](./prd-mini-ecd.md)
- [TO (Technisch Ontwerp)](./to-mini-ecd.md)
- [UX/UI Stylesheet](./ux-stylesheet.md)
- [API Access Document](./api-acces-mini-ecd.md)

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