eerste commit

2025-11-09 15:43:41 +01:00
parent 223161463f
commit 530b8f1bdb
9 changed files with 1371 additions and 21 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,134 @@
@import "tailwindcss";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+/* =============================================================================
+   Mini-ECD Design System
+   Gebaseerd op ux-stylesheet.md (v2, UX-geoptimaliseerd)
+   ============================================================================= */

-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+:root {
+  /* Basiskleuren */
+  --color-bg: #F8FAFC;
+  --color-surface: #FFFFFF;
+  --color-surface-secondary: #F1F5F9;
+  --color-text: #0F172A;
+  --color-text-secondary: #475569;
+  --color-border: #E2E8F0;
+
+  /* Brand & Primary */
+  --color-brand: #3B82F6;
+  --color-brand-hover: #2563EB;
+  --color-brand-active: #1D4ED8;
+  --color-brand-subtle: #EFF6FF;
+
+  /* Neutral CTA */
+  --color-neutral: #334155;
+  --color-neutral-hover: #1F2937;
+
+  /* Module-accenten */
+  --color-module-appointments: #16A34A;
+  --color-module-appointments-bg: #E8F8EF;
+  --color-module-appointments-border: #CDECDC;
+
+  --color-module-meds: #F59E0B;
+  --color-module-meds-bg: #FEF6DC;
+  --color-module-meds-border: #F6E7B6;
+
+  --color-module-labs: #F97316;
+  --color-module-labs-bg: #FFEBDC;
+  --color-module-labs-border: #FFD2B8;
+
+  /* Status & Feedback */
+  --color-success: #16A34A;
+  --color-success-subtle: #ECFDF5;
+  --color-warning: #EAB308;
+  --color-warning-subtle: #FEFCE8;
+  --color-error: #DC2626;
+  --color-error-subtle: #FEF2F2;
+  --color-info: #3B82F6;
+  --color-info-subtle: #EFF6FF;
+
+  /* Badges (Severity DSM-light) */
+  --color-badge-low-bg: #E5E7EB;
+  --color-badge-low-text: #374151;
+  --color-badge-medium-bg: #FEF3C7;
+  --color-badge-medium-text: #92400E;
+  --color-badge-high-bg: #FEE2E2;
+  --color-badge-high-text: #991B1B;
+
+  /* Formulieren */
+  --color-input-bg: #FFFFFF;
+  --color-input-text: #0F172A;
+  --color-input-placeholder: #94A3B8;
+  --color-input-border: #CBD5E1;
+  --color-input-border-hover: #94A3B8;
+  --color-input-focus: #3B82F6;
+  --color-input-focus-border: #2563EB;
+  --color-input-disabled-bg: #F1F5F9;
+  --color-input-disabled-text: #94A3B8;
+  --color-input-invalid-border: #DC2626;
+  --color-input-invalid-text: #B91C1C;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
+  --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10);
+
+  /* Fonts */
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
 }

+@theme inline {
+  /* Basiskleuren */
+  --color-bg: var(--color-bg);
+  --color-surface: var(--color-surface);
+  --color-text: var(--color-text);
+  --color-border: var(--color-border);
+
+  /* Brand */
+  --color-brand: var(--color-brand);
+  --color-success: var(--color-success);
+  --color-warning: var(--color-warning);
+  --color-error: var(--color-error);
+  --color-info: var(--color-info);
+
+  /* Shadows */
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+
+  /* Fonts */
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
+/* Dark mode (optioneel, MVP gebruikt licht thema) */
@media (prefers-color-scheme: dark) {
  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --color-bg: #0a0a0a;
+    --color-surface: #1a1a1a;
+    --color-text: #ededed;
+    --color-text-secondary: #a1a1a1;
+    --color-border: #333333;
  }
 }

+/* Global styles */
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
+}
+
+/* Focus styles (toegankelijkheid) */
+*:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
+}
+
+/* AI source highlighting (gebruikt in Intake editor) */
+.ai-source-highlight {
+  background-color: #fef08a; /* lichtgeel */
+  border-radius: 2px;
+  padding: 1px 0;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Mini-ECD | PinkRoccade GGZ",
+  description: "Mini-ECD prototype voor AI-inspiratiesessie - Intake, Probleemprofiel en Behandelplan met AI-ondersteuning",
 };

 export default function RootLayout({
@@ -23,7 +23,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="nl">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
--- a/docs/bouwplan_template.txt
+++ b/docs/bouwplan_template.txt
@@ -0,0 +1,191 @@
+# 🚀 Mission Control – Bouwplan Template
+
+💡 **Tip:** Dit document kun je samenstellen met hulp van AI-tools zoals **ChatGPT, Claude, Cursor** of **Gemini**.  
+Gebruik ze als **sparringpartner** om de bouw van je software te plannen, te documenteren en te verbeteren – zelfs als je geen ontwikkelaar bent.  
+Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetailleerd je elk onderdeel uitwerkt. Voor kleine prototypes volstaat een beknopt overzicht; voor grotere projecten kun je per fase en subfase inzoomen.
+
+---
+
+**Projectnaam:** _[vul in]_  
+**Versie:** _v1.0_  
+**Datum:** _[dd-mm-jjjj]_  
+**Auteur:** _[naam]_  
+
+---
+
+## 1. Doel en context
+🎯 **Doel:** Leg uit wat je gaat bouwen en waarom.  
+📘 **Toelichting:** Beschrijf kort de aanleiding voor het project en hoe het past binnen je organisatie of productstrategie. Verwijs hier naar het PRD of FO voor achtergrond.
+
+**Voorbeeld:**  
+> Het doel is een werkend MVP te bouwen van de AI-assistent voor zorgdossiers. We tonen de meerwaarde van AI binnen de intake → profiel → plan workflow.
+
+---
+
+## 2. Uitgangspunten
+🎯 **Doel:** Benoem de vaste kaders waarbinnen het project wordt ontwikkeld.  
+📘 **Toelichting:** Denk aan gebruikte stack, beperkingen (tijd, budget, resources) en aannames.
+
+**Voorbeeld:**  
+- Stack: SvelteKit + Firebase + Vertex AI  
+- Tijd: 3 weken bouwtijd voor MVP  
+- Geen productiegegevens (alle data fictief)  
+- Doel: demo op AI-inspiratiesessie
+
+---
+
+## 3. Fase- en subfase-overzicht
+🎯 **Doel:** De bouw opdelen in logische fases met een duidelijke volgorde.  
+📘 **Toelichting:** Elke fase bevat het doel, afhankelijkheden en status. Je kunt de status handmatig of via AI bijhouden.
+
+**Voorbeeld:**
+| Fase | Titel | Doel | Status | Opmerkingen |
+|------|--------|------|---------|--------------|
+| 0 | Setup | Repo, omgeving, dependencies | ✅ Gereed | Config getest |
+| 1 | Data & Firebase | Datamodel en demo-data | 🔄 In Progress | Rules nog aanvullen |
+| 2 | UI & Layout | SvelteKit layout, navigatie | ⏳ To Do | Wireframes gereed |
+| 3 | AI-integratie | Vertex AI endpoints | ⏳ To Do | Test met Gemini model |
+| 4 | Testing & Deploy | Demo testen & live zetten | ⏳ To Do | | 
+
+---
+
+## 4. Subfases (uitwerking per fase)
+🎯 **Doel:** Verdeel complexe fases in beheersbare subfases voor meer overzicht.  
+📘 **Toelichting:** Je bepaalt zelf het detailniveau. Kleine projecten kunnen volstaan met 2-3 subfases; grotere implementaties kunnen tot 10 subfases bevatten. Gebruik dit format om focus en voortgang te behouden.
+
+**Voorbeeldstructuur:**
+
+### Fase 0 — Setup
+| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
+|----------|------|--------|------------------|--------------|
+| 0.1 | Repo aanmaken | ✅ | — | GitHub en Vercel gereed |
+| 0.2 | Dependencies installeren | ✅ | 0.1 | Tailwind, Lucide, Firebase |
+| 0.3 | Omgevingsvariabelen configureren | 🔄 | 0.2 | `.env.local` + Vercel vars |
+| 0.4 | Template cleanup | ⏳ | 0.2 | Verwijder standaard demo-content |
+
+### Fase 1 — Data & Firebase
+| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
+|----------|------|--------|------------------|--------------|
+| 1.1 | Datamodel ontwerpen | 🔄 | 0.4 | Definieer `clients`, `intakes`, `plans` |
+| 1.2 | Security Rules schrijven | ⏳ | 1.1 | Demo-user all access |
+| 1.3 | Demo-data seeden | ⏳ | 1.1 | 3 testcliënten + intake |
+
+### Fase 2 — UI & Layout
+| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
+|----------|------|--------|------------------|--------------|
+| 2.1 | Layout skelet bouwen | ⏳ | 1.3 | Topbalk + navigatie |
+| 2.2 | Componentenbibliotheek koppelen | ⏳ | 2.1 | shadcn/ui of eigen variant |
+| 2.3 | Navigatie en routes | ⏳ | 2.1 | `/clients/[id]` structuur |
+
+### Fase 3 — AI-integratie
+| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
+|----------|------|--------|------------------|--------------|
+| 3.1 | Vertex AI configureren | ⏳ | 0.3 | GCP SA key in `.env` |
+| 3.2 | Endpoints aanmaken | ⏳ | 3.1 | summarize, extract, plan |
+| 3.3 | Logging & telemetrie | ⏳ | 3.2 | Log requests in `ai_events` |
+
+### Fase 4 — Testing & Deploy
+| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
+|----------|------|--------|------------------|--------------|
+| 4.1 | Smoke tests uitvoeren | ⏳ | 3.3 | Prompt snapshots testen |
+| 4.2 | Demo dry-run | ⏳ | 4.1 | Met tijdmeting (≤10 min) |
+| 4.3 | Publicatie Vercel | ⏳ | 4.2 | EU-regio deployment |
+
+---
+
+## 5. Fasebeschrijving (detail)
+🎯 **Doel:** Per fase beschrijven wat er moet gebeuren, zonder in code te duiken.  
+📘 **Toelichting:** Gebruik korte opsommingen en eventueel snippets om een AI-tool te laten helpen bij specifieke taken.
+
+**Voorbeeldstructuur:**
+
+### Fase 1 – Setup
+* Doel: basisomgeving inrichten.  
+* Taken:
+  - Init SvelteKit project met Tailwind.
+  - Voeg ESLint, Prettier en TypeScript toe.
+  - Controleer lokale run in dev-modus.  
+* Snippet (voorbeeld prompt voor Cursor):
+  ```
+  Maak een SvelteKit boilerplate met Tailwind en lucide-icons. Voeg een voorbeeldcomponent toe.
+  ```
+
+### Fase 2 – Data & Firebase
+* Doel: datamodel definiëren en seed-data aanmaken.  
+* Taken:
+  - Collections opzetten (`clients`, `intakes`, `plans`).  
+  - Security Rules schrijven.  
+  - Demo-gebruiker configureren.
+
+### Fase 3 – UI & Interactie
+* Doel: interface opzetten volgens UX/FO.  
+* Taken:
+  - Layout bouwen met Topbalk + Linkernav.  
+  - Dummy-content tonen per tab.  
+  - Toetscombinaties testen (Ctrl+S, Cmd+K).  
+* Snippet (prompt):
+  ```
+  Bouw een Svelte-component voor de linkernavigatie met active state en hover animatie.
+  ```
+
+### Fase 4 – AI-integratie
+* Doel: AI-functionaliteit koppelen (server-side).  
+* Taken:
+  - Vertex AI instellen (Gemini model).  
+  - Endpoints maken: summarize, extract, plan.  
+  - Output testen met fictieve data.
+
+---
+
+## 6. Kwaliteit & Testplan
+🎯 **Doel:** vastleggen hoe de kwaliteit van het project wordt geborgd.  
+📘 **Toelichting:** Licht toe welke tests je uitvoert en hoe je weet dat de build stabiel is.
+
+**Voorbeeld:**
+- Smoke tests per flow (A/B/C)
+- Snapshot tests op AI-output structuur
+- Handmatige demo-run vóór oplevering
+
+---
+
+## 7. Demo & Presentatieplan
+🎯 **Doel:** beschrijven hoe de demo wordt gepresenteerd of getest.  
+📘 **Toelichting:** Vermeld wat je laat zien, wie betrokken is en welk scenario wordt gevolgd.
+
+**Voorbeeld:**
+> We tonen in 10 minuten de flow: nieuwe cliënt → intake → AI-samenvatting → behandelplan. 
+> De demo draait lokaal in Vercel met mockdata.
+
+---
+
+## 8. Risico’s & Mitigatie
+🎯 **Doel:** risico’s vroeg signaleren en voorzien van oplossingen.
+📘 **Toelichting:** Gebruik dit als dynamische checklist.
+
+**Voorbeeld:**
+| Risico | Impact | Mitigatie |
+|--------|---------|------------|
+| AI-output inconsistent | Hoog | Test prompts, gebruik snapshot tests |
+| Firebase regels te open | Middel | Sluiten voor productie |
+| Tijdsdruk | Hoog | Schalen op taken via AI of no-code tooling |
+
+---
+
+## 9. Evaluatie & Lessons Learned
+🎯 **Doel:** reflecteren op het proces en verbeteringen vastleggen.
+📘 **Toelichting:** noteer inzichten na elke sprint of oplevering.
+
+**Voorbeeld:**
+> De AI-rail werkte goed, maar het kostte extra tijd om prompts te fine-tunen. Voor de volgende iteratie gebruiken we vooraf geteste promptblokken.
+
+---
+
+## 10. Referenties
+🎯 **Doel:** koppelen aan de overige Mission Control-documenten.
+
+**Verwijzingen:**
+- PRD – Product Requirements Document  
+- FO – Functioneel Ontwerp  
+- TO – Technisch Ontwerp  
+- UX/UI-specificatie  
+- API Access Document
--- a/docs/fo-mini-ecd.md
+++ b/docs/fo-mini-ecd.md
@@ -0,0 +1,493 @@
+# 🧩 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
--- a/docs/fo_template.txt
+++ b/docs/fo_template.txt
@@ -0,0 +1,140 @@
+# 🧩 Functioneel Ontwerp (FO) – Template
+
+**Projectnaam:** _[vul in]_  
+**Versie:** _v1.0_  
+**Datum:** _[dd-mm-jjjj]_  
+**Auteur:** _[naam]_  
+
+---
+
+## 1. Doel en relatie met het PRD
+🎯 **Doel van dit document:**
+Het Functioneel Ontwerp (FO) beschrijft **hoe** het product uit het PRD functioneel zal werken — dus wat de gebruiker ziet, doet en ervaart. Waar het PRD uitlegt *wat en waarom*, laat het FO zien *hoe dit in de praktijk werkt*.
+
+📘 **Toelichting aan de lezer:**
+Gebruik dit document om een gedeeld beeld te creëren tussen ontwerp, ontwikkeling en stakeholders. Het FO hoort compact te blijven: één niveau dieper dan het PRD, niet technisch maar functioneel-concreet.
+
+---
+
+## 2. Overzicht van de belangrijkste onderdelen
+🎯 **Doel:** kort overzicht van de modules, schermen of onderdelen binnen de app of tool.  
+📘 **Toelichting:** som de kernschermen of modules op (zoals ‘Dashboard’, ‘Cliëntenlijst’, ‘Editor’, ‘AI-rail’). Dit helpt de lezer snel te begrijpen waar het FO over gaat.
+
+**Voorbeeld:**
+1. Dashboard / Overzicht  
+2. Cliëntdossier  
+3. Intakeverslag  
+4. Probleemprofiel  
+5. Behandelplan  
+6. *(Optioneel)* Rapportage / Agenda
+
+---
+
+## 3. Userstories (sjabloon + voorbeelden)
+🎯 **Doel:** beschrijven wat gebruikers moeten kunnen doen, vanuit hun perspectief.
+
+📘 **Toelichting:** gebruik dit vaste sjabloon:
+
+**User Story Template:**
+> Als [rol/gebruiker] wil ik [doel of actie] zodat [reden/waarde].
+
+**Voorbeeld:**
+> Als behandelaar wil ik snel een intakeverslag kunnen samenvatten zodat ik sneller tot een behandelplan kom.
+
+**Aanvullende kolommen (optioneel):**
+| ID | Rol | Doel / Actie | Verwachte waarde | Prioriteit |
+|----|------|---------------|------------------|-------------|
+| US-01 | Behandelaar | Nieuwe cliënt aanmaken | Kan direct starten met intake | Hoog |
+| US-02 | Behandelaar | Intake samenvatten met AI | Tijdbesparing, inzicht | Hoog |
+| US-03 | PO | Inzage demo-flow | Begrijpt AI toegevoegde waarde | Middel |
+
+---
+
+## 4. Functionele werking per onderdeel
+🎯 **Doel:** per hoofdonderdeel beschrijven wat de gebruiker kan doen en wat het systeem doet.
+
+📘 **Toelichting:** dit is de kern van het FO. Gebruik korte, actiematige beschrijvingen. Focus op gedrag, states en interacties.
+
+**Voorbeeldstructuur:**
+
+### 4.1 Dashboard / Overzicht
+* Toont kaarten met samenvattingen van cliëntinformatie (intake, profiel, plan).  
+* Knoppen: *Nieuw verslag*, *Ga naar behandelplan*.  
+* Leeg-staat: melding “Nog geen dossiers”.
+
+### 4.2 Intakeverslag
+* Rich text editor met knoppen voor *Opslaan*, *AI-samenvatten*, *Leesbaarheid*.  
+* AI-resultaat verschijnt in rechterzijpaneel (AI-rail).  
+* Gebruiker kan *Preview → Invoegen* of *Annuleren*.
+
+### 4.3 Probleemprofiel
+* Formulier met dropdown (categorie) en slider (severity).  
+* AI-suggestie met bronverwijzing uit intake.  
+* Bevestigen activeert *Behandelplan* tab.
+
+### 4.4 Behandelplan
+* Vier secties: Doelen, Interventies, Frequentie/Duur, Meetmomenten.  
+* Gebruiker kan elke sectie aanpassen of regenereren via micro-AI-acties.  
+* Knoppen: *Opslaan* (concept), *Publiceer v1*.
+
+---
+
+## 5. UI-overzicht (visuele structuur)
+🎯 **Doel:** eenvoudig inzicht geven in de globale schermopbouw.
+
+📘 **Toelichting:** gebruik dit als communicatiemiddel met ontwerpers of developers. Het is geen pixel-perfect ontwerp, maar een functionele schets.
+
+**Voorbeeld (ASCII-layout):**
+```
+┌───────────────────────────────────────────────┐
+│ Topbalk: cliëntnaam, acties, zoeken           │
+├───────────────┬───────────────────────────────┤
+│ Linkernav     │  Middenpaneel (inhoud)        │
+│ (Overzicht,   │  Detail, formulieren, editor) │
+│ Intake, Prof.)│                               │
+├───────────────┴───────────────────────────────┤
+│ Footer: status / toasts                      │
+└───────────────────────────────────────────────┘
+```
+
+**Tip:** Combineer dit later met wireframes of UX-schetsen uit Figma of Gamma.app.
+
+---
+
+## 6. Interacties met AI (functionele beschrijving)
+🎯 **Doel:** uitleggen waar AI in de flow voorkomt en wat de gebruiker ziet of verwacht.
+
+📘 **Toelichting:** beschrijf per AI-actie kort de trigger, verwerking en output.
+
+**Voorbeeld:**
+| Locatie | AI-actie | Trigger | Output |
+|----------|-----------|----------|---------|
+| Intake-editor | Samenvatten | Klik op knop *AI › Samenvatten* | Bullets in rechterzijpaneel |
+| Intake-editor | Leesbaarheid (B1) | Klik op knop *AI › Leesbaarheid* | Herschreven tekstversie |
+| Profiel | Extract problemen | Klik op *AI › Extract* | Categorie + severity + bronzinnen |
+| Plan | Genereer behandelplan | Klik op *AI › Plan genereren* | Secties met bewerkbare doelen |
+
+---
+
+## 7. Gebruikersrollen en rechten (optioneel)
+🎯 **Doel:** beschrijven welke rollen toegang hebben tot welke onderdelen.  
+📘 **Toelichting:** alleen opnemen als het project meerdere gebruikersgroepen kent.
+
+**Voorbeeld:**
+| Rol | Toegang tot | Beperkingen |
+|------|--------------|-------------|
+| Behandelaar | Alle cliëntdossiers | Alleen eigen dossiers bewerken |
+| Manager | Rapportages | Geen bewerkingen |
+| Demo-user | Alles (fictieve data) | Alleen lezen |
+
+---
+
+## 8. Bijlagen & Referenties
+🎯 **Doel:** linken naar de overige documenten binnen Mission Control.
+
+**Verwijzingen:**
+- PRD (Product Requirements Document)  
+- TO (Technisch Ontwerp)  
+- UX/UI-specificatie  
+- Mission Control / Build Plan  
+- API Access Document
--- a/docs/prd_template.txt
+++ b/docs/prd_template.txt
@@ -0,0 +1,109 @@
+# 📄 Product Requirements Document (PRD) – Template
+
+**Projectnaam:** _[vul in]_  
+**Versie:** _v1.0_  
+**Datum:** _[dd-mm-jjjj]_  
+**Auteur:** _[naam]_  
+
+---
+
+## 1. Doelstelling
+🎯 **Doel van deze sectie:** Beschrijf waarom dit product of prototype wordt gebouwd en wat het beoogde resultaat is.  
+📘 **Toelichting:** Geef een korte samenvatting van het *waarom* van dit project. Wat wil je aantonen, oplossen of verbeteren? Benoem ook of het om een demo, MVP of productieversie gaat.
+
+**Voorbeeld:**  
+> Een werkend prototype dat de waarde van AI toont binnen het zorgdossierproces: intake → analyse → behandelplan. De focus ligt op snelheid, eenvoud en AI-toepasbaarheid.
+
+---
+
+## 2. Doelgroep
+🎯 **Doel:** Schets wie de eindgebruikers, stakeholders en testers zijn.  
+📘 **Toelichting:** Omschrijf de primaire doelgroepen (bijv. zorgprofessionals, developers, managers) en hun belangrijkste behoeften of problemen. Vermeld eventueel persona’s of gebruikersscenario’s.
+
+**Voorbeeld:**  
+> - **Product Owners & Managers:** inzicht in AI als hulpmiddel.  
+> - **Developers:** inspiratie voor AI-integratie.  
+> - **Zorgprofessionals:** herkenbare workflows met directe meerwaarde.
+
+---
+
+## 3. Kernfunctionaliteiten (MVP-scope)
+🎯 **Doel:** Afbakenen van de minimale werkende functies.  
+📘 **Toelichting:** Maak een genummerde lijst van functies die in deze versie moeten werken. Beschrijf elke functie kort (input, output, interactie) en markeer *stretch-features* of optionele uitbreidingen.
+
+**Voorbeeld:**  
+1. **Cliëntbeheer:** aanmaken, bekijken en selecteren.  
+2. **Intakeverslag:** rich text editor met AI-samenvatting.  
+3. **Probleemprofiel:** AI-extractie van categorie/severity.  
+4. **Behandelplan:** AI-genereerbare doelen/interventies.  
+5. *(Stretch)* PDF-export en mini-agenda.
+
+---
+
+## 4. Gebruikersflows (Demo- of MVP-flows)
+🎯 **Doel:** Laten zien hoe de gebruiker stap-voor-stap door het systeem gaat.  
+📘 **Toelichting:** Beschrijf 2–4 concrete "flows" in stappen (input → actie → resultaat).
+
+**Voorbeeld:**  
+1. Nieuwe cliënt aanmaken → Intake invullen → AI-samenvatten.  
+2. Intake analyseren → AI-suggestie → Probleemprofiel genereren.  
+3. Profiel bevestigen → AI-behandelplan genereren → Publiceer v1.
+
+---
+
+## 5. Niet in Scope
+🎯 **Doel:** Duidelijk maken wat (nog) niet wordt gebouwd.  
+📘 **Toelichting:** Noem features of modules die bewust buiten deze versie vallen. Dit voorkomt ruis en scope creep.
+
+**Voorbeeld:**  
+> Rollenbeheer, koppelingen met externe systemen (Teams, ECD), productie-grade beveiliging.
+
+---
+
+## 6. Succescriteria
+🎯 **Doel:** Objectieve meetlat voor een geslaagde oplevering.  
+📘 **Toelichting:** Formuleer concrete, toetsbare criteria.
+
+**Voorbeeld:**  
+- Demo duurt ≤ 10 minuten.  
+- AI-output zichtbaar en bewerkbaar.  
+- Geen fouten bij standaardflows.  
+- Minimaal 1 live testgebruiker.
+
+---
+
+## 7. Risico’s & Mitigatie
+🎯 **Doel:** Risico’s vroeg signaleren en plannen hoe ermee om te gaan.  
+📘 **Toelichting:** Beschrijf de belangrijkste risico’s en hoe je ze voorkomt of opvangt.
+
+**Voorbeeld:**  
+| Risico | Impact | Mitigatie |
+|--------|---------|------------|
+| AI-output inconsistent | Hoog | Prompts testen, fallback responses voorbereiden |
+| Scope creep | Middel | Scope afbakenen in PRD en Mission Control |
+| Privacy | Laag | Alleen demo-data gebruiken |
+
+---
+
+## 8. Roadmap / Vervolg (Post-MVP)
+🎯 **Doel:** Richting geven aan toekomstige uitbreidingen.  
+📘 **Toelichting:** Beschrijf logische vervolgstappen na de MVP.
+
+**Voorbeeld:**  
+- Rollen & rechtenbeheer  
+- Auditlog + versiebeheer  
+- Trendanalyse  
+- Integratie met bestaande zorgsystemen (PinkRoccade, Nedap, etc.)
+
+---
+
+## 9. Bijlagen & Referenties
+🎯 **Doel:** Bronnen koppelen voor context en consistentie.  
+📘 **Toelichting:** Verwijs naar ondersteunende documenten of interne kennisbestanden.
+
+**Voorbeeld:**  
+- FO (Functioneel Ontwerp)  
+- TO (Technisch Ontwerp)  
+- UX/UI-specificatie  
+- Mission Control / Build Plan  
+- API Access Document
--- a/docs/to_template.txt
+++ b/docs/to_template.txt
@@ -0,0 +1,268 @@
+# ⚙️ Technisch Ontwerp (TO) – Template
+
+**Projectnaam:** _[vul in]_
+**Versie:** _v1.0_
+**Datum:** _[dd-mm-jjjj]_
+**Auteur:** _[naam]_
+
+---
+
+## 1. Doel en relatie met PRD en FO
+🎯 **Doel van dit document:**
+Het Technisch Ontwerp (TO) beschrijft **hoe** het systeem technisch wordt gebouwd. Waar het PRD het *wat* beschrijft en het FO het *hoe functioneel*, gaat het TO over architectuur, techstack, data en infrastructuur.
+
+📘 **Toelichting:**
+Gebruik dit document om technische keuzes te onderbouwen en developers een duidelijk beeld te geven van de technische implementatie.
+
+---
+
+## 2. Technische Architectuur Overzicht
+🎯 **Doel:** Globaal beeld van de systeemarchitectuur.
+📘 **Toelichting:** Schets de hoofdcomponenten en hun relaties.
+
+**Voorbeeld (high-level):**
+```
+┌─────────────┐     ┌──────────────┐     ┌─────────────┐
+│   Frontend  │────▶│   Backend    │────▶│  Database   │
+│  (Next.js)  │     │  (API Routes)│     │ (Supabase)  │
+└─────────────┘     └──────────────┘     └─────────────┘
+        │                   │
+        │                   ▼
+        │           ┌──────────────┐
+        └──────────▶│  AI Services │
+                    │ (OpenAI/etc) │
+                    └──────────────┘
+```
+
+---
+
+## 3. Techstack Selectie
+🎯 **Doel:** Onderbouwde keuze van technologieën.
+📘 **Toelichting:** Beschrijf per component welke technologie je kiest en waarom.
+
+**Voorbeeld:**
+| Component | Technologie | Argumentatie | Alternatieven |
+|-----------|-------------|--------------|---------------|
+| Frontend | Next.js 15 | React framework, SSR, goede DX | SvelteKit, Remix |
+| Backend | Next.js API Routes | Co-located met frontend, TypeScript | Express, FastAPI |
+| Database | Supabase (PostgreSQL) | Realtime, auth included, gratis tier | Firebase, PlanetScale |
+| AI | OpenAI GPT-4 | Betrouwbaar, goede docs, Nederlands | Claude, Gemini |
+| Styling | TailwindCSS | Utility-first, snel prototypen | styled-components |
+| Hosting | Vercel | Zero-config Next.js, preview deploys | Netlify, Railway |
+
+---
+
+## 4. Datamodel
+🎯 **Doel:** Structuur van de data in de database.
+📘 **Toelichting:** Beschrijf de belangrijkste tabellen/collections en hun relaties.
+
+**Voorbeeld (PostgreSQL):**
+```sql
+-- Users
+users (
+  id UUID PRIMARY KEY,
+  email TEXT UNIQUE,
+  name TEXT,
+  role TEXT,
+  created_at TIMESTAMP
+)
+
+-- Clients
+clients (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  user_id UUID REFERENCES users(id),
+  created_at TIMESTAMP
+)
+
+-- Intakes
+intakes (
+  id UUID PRIMARY KEY,
+  client_id UUID REFERENCES clients(id),
+  content TEXT,
+  ai_summary TEXT,
+  created_at TIMESTAMP
+)
+```
+
+**ERD (optioneel):**
+```
+users ─1:N─ clients ─1:N─ intakes
+```
+
+---
+
+## 5. API Ontwerp
+🎯 **Doel:** Overzicht van belangrijkste endpoints.
+📘 **Toelichting:** Beschrijf REST/GraphQL endpoints, input/output en authenticatie.
+
+**Voorbeeld (REST):**
+| Endpoint | Method | Input | Output | Auth |
+|----------|--------|-------|--------|------|
+| `/api/clients` | GET | - | `Array<Client>` | Required |
+| `/api/clients` | POST | `{ name }` | `Client` | Required |
+| `/api/clients/:id` | GET | - | `Client` | Required |
+| `/api/ai/summarize` | POST | `{ text }` | `{ summary }` | Required |
+| `/api/ai/extract` | POST | `{ text }` | `{ categories, severity }` | Required |
+
+**Authenticatie:**
+- Session-based via Supabase Auth
+- JWT tokens in HTTP-only cookies
+- CSRF protection via SameSite cookies
+
+---
+
+## 6. Security & Compliance
+🎯 **Doel:** Beschrijf security maatregelen en compliance vereisten.
+📘 **Toelichting:** Vooral relevant voor zorg, finance, overheid.
+
+**Security Checklist:**
+- [ ] **Authentication:** Supabase Auth (OAuth, MFA support)
+- [ ] **Authorization:** Row Level Security (RLS) policies
+- [ ] **Data Encryption:** At rest (PostgreSQL), in transit (HTTPS)
+- [ ] **Input Validation:** Zod schemas op alle endpoints
+- [ ] **Rate Limiting:** Vercel Edge Functions (100 req/min)
+- [ ] **CORS:** Restrictive origins (alleen eigen domein)
+- [ ] **Secrets Management:** Environment variables, niet in code
+
+**Compliance (AVG/GDPR):**
+- Data minimalisatie: Alleen noodzakelijke velden opslaan
+- Consent: Expliciete toestemming voor AI-verwerking
+- Right to deletion: `/api/users/:id/delete` endpoint
+- Data export: `/api/users/:id/export` endpoint (JSON)
+- Logging: Audit trail voor data access (wie, wanneer, wat)
+
+**NEN7510 (voor zorginstellingen):**
+- Toegangscontrole per rol (behandelaar, manager, admin)
+- Logging van medische dossier toegang
+- Encryptie van gevoelige velden (BSN, medische data)
+
+---
+
+## 7. AI/LLM Integratie
+🎯 **Doel:** Technische details van AI-gebruik.
+📘 **Toelichting:** Beschrijf hoe AI wordt geïntegreerd, welke modellen, prompts, fallbacks.
+
+**AI Stack:**
+- **Provider:** OpenAI (gpt-4-turbo)
+- **Library:** OpenAI SDK (JavaScript/Python)
+- **Prompting:** System prompts + few-shot examples
+- **Caching:** Redis voor repeated prompts (kosten besparing)
+- **Fallback:** Error handling → default response + user notification
+
+**Voorbeeld Prompt Template:**
+```typescript
+const SUMMARIZE_PROMPT = `
+Je bent een medisch assistent. Vat de volgende intake samen in maximaal 3 bullets.
+
+Format:
+- [hoofdprobleem]
+- [relevante context]
+- [actie suggestie]
+
+Intake:
+${intakeText}
+`;
+```
+
+**Cost Management:**
+- Token limits: Max 4000 tokens per request
+- Caching: Identical prompts cached 1 hour
+- Monitoring: Track costs per endpoint via OpenAI dashboard
+
+---
+
+## 8. Performance & Scalability
+🎯 **Doel:** Hoe schaalt het systeem bij groei?
+📘 **Toelichting:** Beschrijf performance targets en schaalbaarheid.
+
+**Performance Targets:**
+- Page load: < 2 seconden (First Contentful Paint)
+- API response: < 500ms (excl. AI calls)
+- AI response: < 5 seconden (GPT-4)
+
+**Scalability Strategie:**
+- **Frontend:** Vercel Edge Network (CDN, global caching)
+- **Backend:** Serverless functions (auto-scaling)
+- **Database:** Supabase (vertical scaling, read replicas)
+- **AI:** Queue systeem (Bull/BullMQ) voor batch processing
+
+**Caching:**
+- Static assets: CDN cache (immutable)
+- API responses: Redis (5 min TTL)
+- AI results: Database cache (1 uur, per prompt hash)
+
+---
+
+## 9. Deployment & CI/CD
+🎯 **Doel:** Hoe wordt het systeem gedeployed en getest?
+📘 **Toelichting:** Beschrijf deployment pipeline en omgevingen.
+
+**Omgevingen:**
+- **Development:** Lokaal (localhost:3000)
+- **Staging:** Vercel preview (PR builds)
+- **Production:** Vercel production (main branch)
+
+**CI/CD Pipeline:**
+```
+Git Push → GitHub Actions → [Lint, Test, Build] → Vercel Deploy
+```
+
+**Deployment Checklist:**
+- [ ] Environment variables set (Vercel dashboard)
+- [ ] Database migrations run (Supabase migrations)
+- [ ] Smoke tests passed (Playwright E2E)
+- [ ] Monitoring configured (Sentry, LogRocket)
+
+---
+
+## 10. Monitoring & Logging
+🎯 **Doel:** Hoe monitoren we het systeem in productie?
+📘 **Toelichting:** Beschrijf logging, error tracking, analytics.
+
+**Tools:**
+- **Error Tracking:** Sentry (crashes, exceptions)
+- **Logging:** Vercel Logs (server-side), Console (client-side)
+- **Analytics:** Vercel Analytics (traffic, performance)
+- **Uptime:** UptimeRobot (ping endpoints elke 5 min)
+
+**Key Metrics:**
+- Uptime: Target 99.5%
+- Error rate: < 1% of requests
+- AI success rate: > 95% (non-error responses)
+- Response time p95: < 1 seconde
+
+---
+
+## 11. Risico's & Technische Mitigatie
+🎯 **Doel:** Technische risico's vroegtijdig identificeren.
+📘 **Toelichting:** Beschrijf risico's en hoe je ze technisch aanpakt.
+
+**Voorbeeld:**
+| Risico | Impact | Waarschijnlijkheid | Mitigatie |
+|--------|--------|-------------------|-----------|
+| OpenAI API down | Hoog | Laag | Fallback naar Claude, error messages |
+| Database overload | Hoog | Middel | Connection pooling, query optimization |
+| Security breach | Kritiek | Laag | RLS policies, input validation, audit logs |
+| Vendor lock-in (Supabase) | Middel | Laag | Abstract DB layer, export scripts ready |
+| Cost overrun (AI) | Middel | Middel | Token limits, caching, usage monitoring |
+
+---
+
+## 12. Bijlagen & Referenties
+🎯 **Doel:** Linken naar tech docs en tooling.
+
+**Projectdocumenten:**
+- PRD (Product Requirements Document)
+- FO (Functioneel Ontwerp)
+- Mission Control / Build Plan
+
+**Tech Documentatie:**
+- Next.js: https://nextjs.org/docs
+- Supabase: https://supabase.com/docs
+- OpenAI: https://platform.openai.com/docs
+- Vercel: https://vercel.com/docs
+
+**Code Repositories:**
+- GitHub: [link]
+- Figma designs: [link]
--- a/package.json
+++ b/package.json
@@ -9,18 +9,20 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "next": "16.0.1",
    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "next": "16.0.1"
+    "react-dom": "19.2.0"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
+    "autoprefixer": "^10.4.21",
    "eslint": "^9",
-    "eslint-config-next": "16.0.1"
+    "eslint-config-next": "16.0.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,12 +30,18 @@ importers:
      '@types/react-dom':
        specifier: ^19
        version: 19.2.2(@types/react@19.2.2)
+      autoprefixer:
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.6)
      eslint:
        specifier: ^9
        version: 9.39.1(jiti@2.6.1)
      eslint-config-next:
        specifier: 16.0.1
        version: 16.0.1(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      postcss:
+        specifier: ^8.5.6
+        version: 8.5.6
      tailwindcss:
        specifier: ^4
        version: 4.1.17
@@ -739,6 +745,13 @@ packages:
    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
    engines: {node: '>= 0.4'}

+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
  available-typed-arrays@1.0.7:
    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
    engines: {node: '>= 0.4'}
@@ -1092,6 +1105,9 @@ packages:
    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
    engines: {node: '>= 0.4'}

+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}

@@ -1522,6 +1538,10 @@ packages:
  node-releases@2.0.27:
    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}

+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
  object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
@@ -1600,6 +1620,9 @@ packages:
    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
    engines: {node: '>= 0.4'}

+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
  postcss@8.4.31:
    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
    engines: {node: ^10 || ^12 || >=14}
@@ -2597,6 +2620,16 @@ snapshots:

  async-function@1.0.0: {}

+  autoprefixer@10.4.21(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001754
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
  available-typed-arrays@1.0.7:
    dependencies:
      possible-typed-array-names: 1.1.0
@@ -3101,6 +3134,8 @@ snapshots:
    dependencies:
      is-callable: 1.2.7

+  fraction.js@4.3.7: {}
+
  function-bind@1.1.2: {}

  function.prototype.name@1.1.8:
@@ -3502,6 +3537,8 @@ snapshots:

  node-releases@2.0.27: {}

+  normalize-range@0.1.2: {}
+
  object-assign@4.1.1: {}

  object-inspect@1.13.4: {}
@@ -3585,6 +3622,8 @@ snapshots:

  possible-typed-array-names@1.1.0: {}

+  postcss-value-parser@4.2.0: {}
+
  postcss@8.4.31:
    dependencies:
      nanoid: 3.3.11