34 KiB
🚀 Mission Control — Bouwplan Mini-EPD Prototype
Projectnaam: Mini-EPD Prototype Versie: v1.0 Datum: 10-11-2025 Auteur: Development Team PinkRoccade GGZ
1. Doel en context
🎯 Doel: Een werkend mini-EPD prototype bouwen dat tijdens de AI-inspiratiesessie bij PinkRoccade GGZ de kernprocessen uit de GGZ demonstreert: intake → probleemclassificatie → behandelplan.
📘 Toelichting: Dit project focust op het zichtbaar maken van AI-waarde (samenvatten, structureren, plan genereren) in een herkenbare GGZ-workflow. De demo duurt maximaal 10 minuten en toont hoe AI zorgmedewerkers kan ondersteunen bij administratieve taken. Het systeem wordt gebouwd met fictieve data voor demonstratiedoeleinden.
Belangrijkste doelen:
- Demonstreren van AI-toegevoegde waarde in ECD-processen
- Herkenbare workflow voor GGZ-professionals
- Inspiratie bieden voor AI-integratie in bestaande systemen
- Direct bruikbare output (samenvattingen, behandelplannen) genereren
2. Uitgangspunten
2.1 Technische Stack
🎯 Doel: Complete technologie stack voor het mini-EPD prototype.
Frontend:
- Framework: Next.js 14+ (App Router)
- Styling: Tailwind CSS v3.4 (fallback vanaf v4 bij problemen)
- UI Componenten: shadcn/ui of eigen headless componenten
- Rich Text Editor: TipTap (ProseMirror basis)
- Iconen: lucide-react
- State Management: Zustand + React Context API
Backend:
- API: Next.js Route Handlers (server-side)
- Database: Supabase (PostgreSQL)
- Auth: Supabase Auth
- Storage: Supabase Storage
- AI Integration: Claude API (Anthropic)
DevOps & Tooling:
- Hosting: Vercel (EU region)
- Version Control: Git/GitHub
- Type Safety: TypeScript
- Validation: Zod
- Testing: Vitest (unit) + Playwright (E2E)
- PDF Export (stretch): Chromium via Playwright/Puppeteer
2.2 Projectkaders
🎯 Doel: Vaste kaders waarbinnen het project wordt ontwikkeld.
- Tijd: 3 weken totale bouwtijd voor MVP
- Demo deadline: Augustus 2025 (AI-inspiratiesessie)
- Budget: Beperkt voor externe API calls (Claude AI)
- Team: 1-2 developers + 1 consultant/product owner
- Data: Uitsluitend fictieve demo-data (geen productiegegevens)
- Scope: MVP features voor 10-minuten demo
- Gebruikers: Demo-users met volledige toegang (simplified auth)
- Compliance: Geen medische certificering vereist (demo only)
2.3 Programmeer Uitgangspunten
🎯 Doel: Code-kwaliteit principes en development best practices.
Core Principles:
-
DRY (Don't Repeat Yourself)
- Herbruikbare React componenten in
/src/components/ui/ - Shared utility functions in
/src/lib/utils/ - Centrale API client voor Supabase queries
- Gedeelde prompt templates voor AI calls
- Herbruikbare React componenten in
-
SOC (Separation of Concerns)
- UI componenten gescheiden van business logic
- Database queries in dedicated service layers (
/src/lib/services/) - AI prompts in
/src/lib/ai/prompts/ - Styling via Tailwind classes, geen inline styles
- Route handlers voor server-side operaties
-
KISS (Keep It Simple, Stupid)
- Directe Supabase queries zonder ORM overhead
- Eenvoudige state management met Zustand
- Minimale abstractie voor MVP scope
- Clear component naming (e.g.,
ClientList,IntakeEditor)
-
YAGNI (You Aren't Gonna Need It)
- Geen multi-tenant setup voor demo
- Basis auth zonder rollenbeheer
- Skip complex caching voor MVP
- Geen realtime features voor eerste versie
-
Security
- API keys alleen server-side (
ANTHROPIC_API_KEY,SUPABASE_SERVICE_ROLE_KEY) - Input sanitization met Zod schemas
- Row Level Security (RLS) policies in Supabase
- CORS configuratie voor API endpoints
- XSS protection via React's default escaping
- API keys alleen server-side (
3. Epics & Stories Overzicht
🎯 Doel: Complete overzicht van alle development epics met technische details.
| Epic ID | Epic Naam | Totaal Stories | Story Points | Status | Priority | Dependencies |
|---|---|---|---|---|---|---|
| EP00 | Project Setup & Configuration | 5 | 13 | Not Started | Critical | - |
| EP01 | Database & Data Model | 4 | 21 | Not Started | Critical | EP00 |
| EP02 | Authentication & Authorization | 3 | 8 | Not Started | High | EP00, EP01 |
| EP03 | Client Management | 5 | 21 | Not Started | High | EP01, EP02 |
| EP04 | Intake Module | 6 | 34 | Not Started | Critical | EP03 |
| EP05 | Problem Profile (DSM-light) | 4 | 21 | Not Started | High | EP04 |
| EP06 | Treatment Plan Module | 5 | 34 | Not Started | High | EP05 |
| EP07 | AI Integration | 5 | 34 | Not Started | Critical | EP04 |
| EP08 | Dashboard & Navigation | 4 | 13 | Not Started | Medium | EP03 |
| EP09 | UI Components & Styling | 5 | 21 | Not Started | Medium | EP00 |
| EP10 | Testing & Quality Assurance | 4 | 13 | Not Started | High | All |
| EP11 | Deployment & Demo Prep | 4 | 13 | Not Started | Critical | All |
| EP12 | Stretch Features | 3 | 21 | Not Started | Low | EP06 |
Totaal: 57 stories | 257 story points
4. Epics & Stories (Uitwerking)
Epic EP00 — Project Setup & Configuration
Epic Doel: Complete development omgeving met alle tools en dependencies geconfigureerd.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP00-ST01 | Als developer wil ik een Next.js project opzetten zodat ik kan beginnen met development | ✅ Next.js 14+ met App Router ✅ TypeScript configuratie ✅ Folder structuur volgens conventions ✅ Development server draait op localhost:3000 |
3 | Not Started | - |
| EP00-ST02 | Als developer wil ik Tailwind CSS en UI libraries installeren zodat ik consistent kan stylen | ✅ Tailwind CSS v3.4 werkend ✅ tailwind.config.ts met custom theme ✅ lucide-react icons beschikbaar ✅ shadcn/ui setup (of besluit voor custom) |
3 | Not Started | EP00-ST01 |
| EP00-ST03 | Als developer wil ik Supabase project aanmaken zodat ik database en auth kan gebruiken | ✅ Supabase project in EU region ✅ Connection string in .env.local ✅ Supabase client configured ✅ TypeScript types generation script |
3 | Not Started | EP00-ST01 |
| EP00-ST04 | Als developer wil ik environment variables configureren zodat services veilig verbonden zijn | ✅ .env.local met alle keys ✅ .env.example voor team ✅ Vercel environment variables ✅ Validation bij startup |
2 | Not Started | EP00-ST03 |
| EP00-ST05 | Als developer wil ik Git repository opzetten zodat code versiebeheerd is | ✅ GitHub repository ✅ .gitignore configuratie ✅ Branch protection rules ✅ Initial commit met setup |
2 | Not Started | EP00-ST01 |
Technische implementatie details:
- Database: Gebruik Supabase EU-region (Frankfurt/London)
- Environment variables:
NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_ANON_KEY SUPABASE_SERVICE_ROLE_KEY ANTHROPIC_API_KEY - Folder structuur:
/src /app (routes) /components /lib (utilities, services) /types
Epic EP01 — Database & Data Model
Epic Doel: Complete database schema met alle tabellen en relaties volgens TO specificatie.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP01-ST01 | Als developer wil ik database tabellen creëren zodat data opgeslagen kan worden | ✅ Tables: clients, intake_notes, problem_profiles, treatment_plans, ai_events ✅ Correct data types (UUID, JSONB, etc.) ✅ Foreign key constraints ✅ Timestamps (created_at, updated_at) |
8 | Not Started | EP00-ST03 |
| EP01-ST02 | Als developer wil ik Row Level Security policies implementeren zodat data veilig is | ✅ RLS enabled op alle tables ✅ Policies voor authenticated users ✅ Test queries werken correct ✅ Service role bypass werkt |
5 | Not Started | EP01-ST01 |
| EP01-ST03 | Als developer wil ik database migrations opzetten zodat schema versiebeheerd is | ✅ Supabase migrations folder ✅ Initial migration script ✅ Rollback mogelijk ✅ Documentation |
3 | Not Started | EP01-ST01 |
| EP01-ST04 | Als developer wil ik demo data seeden zodat er test content beschikbaar is | ✅ 3+ test cliënten ✅ Intake notes per cliënt ✅ Minimaal 1 compleet dossier ✅ Seed script: npm run seed |
5 | Not Started | EP01-ST01 |
Technische implementatie details:
-
Database Schema (zie TO §2.3):
clients: id (UUID), first_name, last_name, birth_date, created_at, updated_atintake_notes: id, client_id (FK), title, tag (CHECK), content_json (JSONB), content_textproblem_profiles: id, client_id (FK), category (CHECK), severity (CHECK), remarkstreatment_plans: id, client_id (FK), version, status (CHECK), plan (JSONB)ai_events: id, kind, client_id, request, response, duration_ms
-
RLS Policies (zie TO §2.4):
CREATE POLICY "Allow all for authenticated users" ON [table] FOR ALL USING (auth.uid() IS NOT NULL);
Epic EP02 — Authentication & Authorization
Epic Doel: Werkende authenticatie met Supabase Auth voor demo gebruikers.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP02-ST01 | Als gebruiker wil ik kunnen inloggen zodat ik toegang krijg tot het systeem | ✅ Login pagina op /auth/login ✅ Email/password of magic link ✅ Session management ✅ Redirect naar dashboard |
3 | Not Started | EP00-ST03, EP01-ST02 |
| EP02-ST02 | Als developer wil ik protected routes implementeren zodat alleen ingelogde users toegang hebben | ✅ Middleware voor auth check ✅ Redirect naar login indien nodig ✅ Loading states tijdens auth ✅ Session refresh |
3 | Not Started | EP02-ST01 |
| EP02-ST03 | Als gebruiker wil ik kunnen uitloggen zodat mijn sessie beëindigd wordt | ✅ Logout button in header ✅ Session cleanup ✅ Redirect naar login ✅ Clear local state |
2 | Not Started | EP02-ST01 |
Technische implementatie details:
- Auth flow: Email/password voor demo (magic link als backup)
- Middleware: Check auth in
middleware.ts - Protected routes: Alles behalve
/auth/* - Session: Supabase JWT tokens
Epic EP03 — Client Management
Epic Doel: Complete CRUD functionaliteit voor cliëntbeheer.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP03-ST01 | Als behandelaar wil ik een cliëntenlijst zien zodat ik overzicht heb | ✅ Tabel met: ClientID, Naam, Geboortedatum, Laatste update ✅ Zoekbalk voor naam/ID ✅ Pagination bij >20 items ✅ Loading skeleton |
5 | Not Started | EP01-ST01, EP02-ST02 |
| EP03-ST02 | Als behandelaar wil ik een nieuwe cliënt aanmaken zodat ik kan starten met intake | ✅ Modal/drawer met formulier ✅ Velden: Voornaam, Achternaam, Geboortedatum ✅ Auto-generated UUID ✅ Validatie met Zod ✅ Success toast |
5 | Not Started | EP03-ST01 |
| EP03-ST03 | Als behandelaar wil ik cliëntgegevens bekijken zodat ik het dossier kan inzien | ✅ Route: /clients/[id] ✅ Breadcrumb navigatie ✅ Tabs: Overzicht, Intakes, Profiel, Plan ✅ 404 handling |
5 | Not Started | EP03-ST01 |
| EP03-ST04 | Als behandelaar wil ik cliëntgegevens bewerken zodat ik updates kan maken | ✅ Edit mode in detail view ✅ Form validation ✅ Optimistic updates ✅ Error handling |
3 | Not Started | EP03-ST03 |
| EP03-ST05 | Als developer wil ik Zustand store voor client state zodat data consistent blijft | ✅ clientStore.ts setup ✅ Actions: setSelectedClient, updateClient ✅ Persistent state waar nodig ✅ TypeScript types |
3 | Not Started | EP00-ST01 |
Technische implementatie details:
- API endpoints:
POST /api/clients- CreateGET /api/clients- List with searchGET /api/clients/[id]- Get singlePATCH /api/clients/[id]- Update
- Zustand store: Central state voor selected client
- Validatie: Zod schemas voor alle forms
Epic EP04 — Intake Module
Epic Doel: Rich text editor voor intake verslagen met TipTap integratie.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP04-ST01 | Als behandelaar wil ik TipTap editor gebruiken zodat ik rijk opgemaakte notities kan maken | ✅ TipTap met StarterKit ✅ Toolbar: Bold, Italic, Lists, etc. ✅ Placeholder text ✅ Content als ProseMirror JSON |
8 | Not Started | EP03-ST03 |
| EP04-ST02 | Als behandelaar wil ik intake verslagen opslaan zodat ze bewaard blijven | ✅ Save button + Ctrl/Cmd+S ✅ Store in intake_notes table ✅ Auto-save indicator ✅ Success/error toasts |
5 | Not Started | EP04-ST01 |
| EP04-ST03 | Als behandelaar wil ik tags toevoegen aan verslagen zodat ik ze kan categoriseren | ✅ Tag dropdown: Intake/Evaluatie/Plan ✅ Tag badge in lijst ✅ Filter op tag mogelijk ✅ Validation |
3 | Not Started | EP04-ST02 |
| EP04-ST04 | Als behandelaar wil ik oude intakes bekijken zodat ik historie kan inzien | ✅ Lijst van intakes per cliënt ✅ Sorteer op datum ✅ Click to view/edit ✅ Read-only mode optie |
5 | Not Started | EP04-ST02 |
| EP04-ST05 | Als developer wil ik tekst extractie implementeren voor search | ✅ Extract plain text van ProseMirror ✅ Store in content_text field ✅ Full-text search mogelijk ✅ Performance optimization |
5 | Not Started | EP04-ST02 |
| EP04-ST06 | Als behandelaar wil ik de AI-rail zien zodat AI-resultaten preview kan bekijken | ✅ Rechter paneel (40% breedte) ✅ Collapsible/expandable ✅ Preview area voor AI output ✅ Action buttons: Invoegen/Annuleren |
8 | Not Started | EP04-ST01 |
Technische implementatie details:
- TipTap setup:
import StarterKit from '@tiptap/starter-kit' const editor = useEditor({ extensions: [StarterKit], content: prosemirrorJSON }) - Storage: content_json (JSONB) + content_text (TEXT)
- API:
/api/intakesendpoints
Epic EP05 — Problem Profile (DSM-light)
Epic Doel: DSM-light categorisatie systeem met severity bepaling.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP05-ST01 | Als behandelaar wil ik een probleem categorie selecteren zodat ik kan classificeren | ✅ Dropdown met 6 categorieën (zie FO §4.4) ✅ Beschrijving per categorie ✅ Validation required field ✅ Store in problem_profiles |
5 | Not Started | EP04-ST02 |
| EP05-ST02 | Als behandelaar wil ik severity aangeven zodat ernst duidelijk is | ✅ Button group: Laag/Middel/Hoog ✅ Kleur-coded badges ✅ Hover tooltips met uitleg ✅ Required validation |
3 | Not Started | EP05-ST01 |
| EP05-ST03 | Als behandelaar wil ik opmerkingen toevoegen zodat ik context kan geven | ✅ Textarea voor vrije tekst ✅ Character limit (500) ✅ Optional field ✅ Markdown support |
3 | Not Started | EP05-ST01 |
| EP05-ST04 | Als behandelaar wil ik AI-suggestie paneel gebruiken zodat classificatie sneller gaat | ✅ Knop "AI > Analyseer intake" ✅ Suggestie paneel rechts ✅ Shows: categorie, severity, rationale ✅ Accepteer/Negeer buttons ✅ Source highlighting in intake (zie TO §5.4) |
10 | Not Started | EP04-ST02, EP07-ST03 |
Technische implementatie details:
- Categorieën (enum):
- stemming_depressie
- angst
- gedrag_impuls
- middelen_gebruik
- cognitief
- context_psychosociaal
- Severity badges: Tailwind classes volgens UX stylesheet
- AI highlighting: TipTap Decorations API
Epic EP06 — Treatment Plan Module
Epic Doel: Genereren en beheren van gestructureerde behandelplannen.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP06-ST01 | Als behandelaar wil ik een behandelplan genereren zodat ik snel een opzet heb | ✅ Knop "AI > Genereer behandelplan" ✅ Uses intake + profile als context ✅ Genereert 4 secties ✅ Loading state tijdens generatie |
10 | Not Started | EP05-ST01, EP07-ST04 |
| EP06-ST02 | Als behandelaar wil ik doelen bewerken zodat ze SMART geformuleerd zijn | ✅ Lijst van doelen (bullets) ✅ Inline editing mogelijk ✅ Add/remove doelen ✅ Regenerate per doel optie |
8 | Not Started | EP06-ST01 |
| EP06-ST03 | Als behandelaar wil ik interventies specificeren zodat behandeling duidelijk is | ✅ Interventie lijst ✅ Type + frequentie + duur ✅ Voorgestelde interventies ✅ Custom toevoegen |
5 | Not Started | EP06-ST01 |
| EP06-ST04 | Als behandelaar wil ik meetmomenten plannen zodat voortgang gemeten wordt | ✅ Timeline met meetmomenten ✅ Na X sessies format ✅ Evaluatie types ✅ Calendar integration (stretch) |
5 | Not Started | EP06-ST01 |
| EP06-ST05 | Als behandelaar wil ik plan publiceren zodat het definitief wordt | ✅ Concept vs Gepubliceerd status ✅ Versioning (v1, v2, etc.) ✅ Published timestamp ✅ Read-only na publicatie ✅ Nieuwe versie mogelijk |
6 | Not Started | EP06-ST02 |
Technische implementatie details:
- Plan structuur (JSONB):
{ doelen: string[], interventies: string[], frequentie: string, meetmomenten: string[] } - Status flow: concept → gepubliceerd → nieuwe versie
- API:
/api/treatment-planendpoints
Epic EP07 — AI Integration
Epic Doel: Claude AI integratie voor alle AI-powered features.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP07-ST01 | Als developer wil ik Claude API client configureren zodat AI calls mogelijk zijn | ✅ Anthropic SDK setup ✅ Server-side only implementation ✅ Error handling ✅ Rate limiting logic |
5 | Not Started | EP00-ST04 |
| EP07-ST02 | Als behandelaar wil ik intake samenvatten met AI zodat ik snel overzicht heb | ✅ Endpoint: /api/ai/summarize ✅ 5-8 bullet points output ✅ Nederlands, klinisch neutraal ✅ Max 5 sec response time |
8 | Not Started | EP07-ST01, EP04-ST06 |
| EP07-ST03 | Als behandelaar wil ik problemen extraheren met AI zodat classificatie sneller gaat | ✅ Endpoint: /api/ai/extract ✅ Returns: category, severity, rationale ✅ Source sentences identificatie ✅ Highlighting support |
8 | Not Started | EP07-ST01 |
| EP07-ST04 | Als behandelaar wil ik behandelplan genereren met AI zodat ik een goede basis heb | ✅ Endpoint: /api/ai/generate-plan ✅ SMART doelen formulering ✅ Evidence-based interventies ✅ Structured JSON output |
8 | Not Started | EP07-ST01 |
| EP07-ST05 | Als developer wil ik AI events loggen zodat gebruik gemonitord wordt | ✅ Store in ai_events table ✅ Track: prompt, response, duration ✅ Cost calculation ✅ Error logging |
5 | Not Started | EP07-ST01, EP01-ST01 |
Technische implementatie details:
- Claude model: claude-3-5-sonnet-20241022
- Prompt templates:
/src/lib/ai/prompts/ - Temperature: 0.3 (deterministic)
- Max tokens: Per endpoint verschillend
- Security: API key alleen server-side
Epic EP08 — Dashboard & Navigation
Epic Doel: Configureerbaar dashboard met tegels en navigatie.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP08-ST01 | Als behandelaar wil ik een dashboard zien zodat ik overzicht heb per cliënt | ✅ 5 tegels (zie FO §4.2) ✅ Responsive grid layout ✅ Data uit verschillende tables ✅ Click naar detail |
5 | Not Started | EP03-ST03 |
| EP08-ST02 | Als behandelaar wil ik tegels configureren zodat ik kan personaliseren | ✅ Settings icon → modal ✅ Checkboxes per tegel ✅ LocalStorage persistence ✅ Instant preview |
3 | Not Started | EP08-ST01 |
| EP08-ST03 | Als gebruiker wil ik breadcrumb navigatie zodat ik weet waar ik ben | ✅ Breadcrumb in header ✅ Clickable segments ✅ Current page highlight ✅ Responsive truncation |
2 | Not Started | EP03-ST03 |
| EP08-ST04 | Als gebruiker wil ik sidebar navigatie zodat ik tussen modules kan wisselen | ✅ Vertical navigation ✅ Active state indicator ✅ Icons + labels ✅ Collapsible op mobile |
3 | Not Started | EP03-ST03 |
Technische implementatie details:
- Tegels: Basisgegevens, Laatste Intake, Probleemprofiel, Behandelplan, Afspraken
- Grid: Tailwind Grid met responsive breakpoints
- State: Zustand voor tegel configuratie
Epic EP09 — UI Components & Styling
Epic Doel: Consistente UI componenten volgens UX stylesheet.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP09-ST01 | Als developer wil ik basis componenten bouwen zodat UI consistent is | ✅ Button, Card, Input, Select ✅ Consistent met UX stylesheet ✅ TypeScript props ✅ Storybook (optional) |
5 | Not Started | EP00-ST02 |
| EP09-ST02 | Als developer wil ik toast notificaties implementeren zodat feedback duidelijk is | ✅ Success/Error/Info/Warning ✅ Auto-dismiss na 5 sec ✅ Queue multiple toasts ✅ Accessible (aria-live) |
3 | Not Started | EP09-ST01 |
| EP09-ST03 | Als developer wil ik loading states implementeren zodat gebruiker weet dat er geladen wordt | ✅ Skeleton loaders ✅ Spinners voor buttons ✅ Progress bars voor AI ✅ Consistent animation |
3 | Not Started | EP09-ST01 |
| EP09-ST04 | Als developer wil ik formulier componenten maken zodat input consistent is | ✅ Form wrapper met validation ✅ Error messages styling ✅ Required field indicators ✅ Help text support |
5 | Not Started | EP09-ST01 |
| EP09-ST05 | Als developer wil ik dark mode ondersteunen (stretch) zodat gebruikers kunnen kiezen | ✅ Theme toggle button ✅ System preference detect ✅ Persist preference ✅ All components support |
5 | Not Started | EP09-ST01 |
Technische implementatie details:
- Kleuren: Zie UX stylesheet (§2-4)
- Component library: shadcn/ui of custom
- Icons: lucide-react consistent gebruik
Epic EP10 — Testing & Quality Assurance
Epic Doel: Comprehensive testing voor stabiele demo.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP10-ST01 | Als developer wil ik unit tests schrijven zodat business logic getest is | ✅ Vitest setup ✅ Utils & services tests ✅ 80% coverage /lib folder ✅ CI integration |
5 | Not Started | All features |
| EP10-ST02 | Als developer wil ik E2E tests schrijven zodat kritieke flows werken | ✅ Playwright setup ✅ Happy path: intake → profile → plan ✅ Error scenarios ✅ Cross-browser |
5 | Not Started | All features |
| EP10-ST03 | Als team wil ik smoke tests uitvoeren zodat demo stabiel is | ✅ Manual test checklist ✅ All features tested ✅ Performance acceptable ✅ No console errors |
2 | Not Started | All features |
| EP10-ST04 | Als developer wil ik accessibility testen zodat app toegankelijk is | ✅ Keyboard navigation ✅ Screen reader support ✅ WCAG AA contrast ✅ Focus management |
1 | Not Started | EP09 |
Technische implementatie details:
- Test scenarios: Zie FO §9 demo-scenario
- Performance: <3s initial load, <5s AI responses
- Browser support: Chrome, Firefox, Safari latest
Epic EP11 — Deployment & Demo Prep
Epic Doel: Production-ready deployment en demo voorbereiding.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP11-ST01 | Als developer wil ik Vercel deployment configureren zodat app live is | ✅ Vercel project setup ✅ EU region (Amsterdam) ✅ Environment variables ✅ Custom domain (optional) |
3 | Not Started | All features |
| EP11-ST02 | Als team wil ik demo data prepareren zodat presentatie smooth verloopt | ✅ 3 complete test cliënten ✅ Realistic intake texts ✅ Pre-generated AI responses ✅ Backup data ready |
5 | Not Started | EP01-ST04 |
| EP11-ST03 | Als presenter wil ik demo script hebben zodat presentatie gestructureerd is | ✅ 10-minute script ✅ Key talking points ✅ Backup scenarios ✅ Q&A anticipatie |
3 | Not Started | All features |
| EP11-ST04 | Als team wil ik dry-run doen zodat demo succesvol verloopt | ✅ Complete run-through ✅ Timing verified (< 10 min) ✅ Technical issues fixed ✅ Feedback processed |
2 | Not Started | EP11-ST01 |
Technische implementatie details:
- Deployment checklist:
- Environment variables set
- Database migrations run
- Seed data loaded
- SSL certificate active
- Monitoring enabled
Epic EP12 — Stretch Features (Optional)
Epic Doel: Extra features indien tijd beschikbaar.
| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies |
|---|---|---|---|---|---|
| EP12-ST01 | Als behandelaar wil ik afspraken kunnen plannen zodat agenda gekoppeld is | ✅ Calendar view ✅ Create/edit appointments ✅ Link to client ✅ Dashboard widget |
8 | Not Started | EP08-ST01 |
| EP12-ST02 | Als behandelaar wil ik PDF export zodat ik rapporten kan delen | ✅ Export button ✅ Professional layout ✅ All sections included ✅ Download trigger |
8 | Not Started | EP06-ST05 |
| EP12-ST03 | Als behandelaar wil ik leesbaarheid verbeteren met AI zodat tekst B1-niveau wordt | ✅ Endpoint: /api/ai/readability ✅ B1 niveau output ✅ Preserve medical accuracy ✅ Preview before apply |
5 | Not Started | EP07-ST01 |
5. Kwaliteit & Testplan
🎯 Doel: Borging van kwaliteit voor stabiele demo.
Test Types
| Test Type | Scope | Tools | Coverage Target |
|---|---|---|---|
| Unit Tests | Services, utilities, validators | Vitest | 80% /lib folder |
| Integration Tests | API endpoints, database queries | Vitest + MSW | All critical endpoints |
| E2E Tests | Complete user flows | Playwright | 3 happy paths, 2 error paths |
| Performance Tests | Load time, API response | Lighthouse | LCP <2.5s, FID <100ms |
| Accessibility Tests | WCAG compliance | axe-core | AA compliance |
| Security Tests | Auth, XSS, SQL injection | Manual + automated | OWASP top 10 |
Critical Test Scenarios
-
New Client Flow
- Create client → Add intake → Generate summary → Extract problems → Create plan
- Expected time: <2 minutes
- All data persisted correctly
-
AI Integration Flow
- Large intake text (2000+ words) → All AI features work
- Response time <5 seconds per call
- Graceful degradation if AI fails
-
Error Handling
- Network failure → Appropriate error messages
- Invalid input → Clear validation feedback
- AI timeout → Fallback behavior
Demo Checklist
- Login with demo account works
- Create new client (auto-generated ID)
- Write intake with TipTap editor
- AI summarize returns Dutch bullets
- Problem extraction with highlighting
- Treatment plan generation (SMART goals)
- Publish plan (version 1)
- Dashboard shows all data correctly
- Navigation breadcrumbs work
- No console errors
- Performance acceptable (<3s loads)
- Mobile view responsive
6. Demo & Presentatieplan
🎯 Doel: Succesvolle 10-minuten demo tijdens AI-inspiratiesessie.
Demo Timeline
| Time | Activity | Key Points | Backup Plan |
|---|---|---|---|
| 0:00-1:00 | Intro | Context mini-EPD, AI-toegevoegde waarde | Slides ready |
| 1:00-2:30 | Nieuwe cliënt | Quick entry, auto ClientID, immediate start | Pre-created client |
| 2:30-5:00 | Intake + AI | TipTap editor, AI summarize, source highlighting | Cached AI response |
| 5:00-7:00 | Profile + Plan | DSM categorization, AI-generated plan, SMART goals | Manual input ready |
| 7:00-8:30 | Publiceren | Version control, status change, dashboard update | Screenshots |
| 8:30-10:00 | Q&A | Interactive discussion, next steps | FAQ prepared |
Technical Setup
- Primary: Live on Vercel (stable internet required)
- Backup 1: Local development server
- Backup 2: Recorded video demo
- Backup 3: Static screenshots
Key Messages
- AI vermindert administratieve last met 50%
- Consistente kwaliteit van documentatie
- Meer tijd voor cliëntcontact
- Evidence-based suggesties
- Privacy-first design (geen echte data)
7. Risico's & Mitigatie
🎯 Doel: Proactieve risico management voor succesvolle oplevering.
| Risico | Kans | Impact | Mitigatie | Owner |
|---|---|---|---|---|
| Claude API rate limits | Hoog | Hoog | Response caching, queue implementation, fallback to OpenAI | Developer |
| TipTap complexiteit | Medium | Hoog | Start simple, incremental features, fallback to textarea | Developer |
| Supabase RLS policies fout | Medium | Hoog | Extensive testing, service role fallback, monitoring | Developer |
| AI output inconsistent | Hoog | Medium | Prompt versioning, temperature tuning, validation layer | Developer |
| Demo internet uitval | Laag | Hoog | Local setup ready, mobile hotspot backup, video recording | Presenter |
| Tijd tekort voor features | Medium | Medium | MoSCoW prioritization, MVP focus, stretch clearly marked | PM |
| Browser compatibility | Laag | Medium | Test on Chrome/Safari/Firefox, polyfills where needed | QA |
| Performance issues | Medium | Medium | Lazy loading, code splitting, CDN for assets | Developer |
| Security vulnerability | Laag | Hoog | Pen test, OWASP checklist, security headers | Developer |
8. Referenties
🎯 Doel: Koppeling naar alle relevante projectdocumentatie.
Mission Control Documents
- PRD — Product Requirements Document - Business requirements en scope
- FO — Functioneel Ontwerp - User flows en functionele specificaties
- TO — Technisch Ontwerp - Architectuur en database design
- UX/UI — Stylesheet - Kleuren en design system
- API — API Access Document - Endpoints en authenticatie
External Resources
- Repository:
https://github.com/pinkroccade/mini-epd-prototype - Deployment:
https://mini-epd.vercel.app - Supabase:
https://app.supabase.com/project/[project-id] - Claude AI:
https://docs.anthropic.com/claude/reference - TipTap Docs:
https://tiptap.dev - Next.js Docs:
https://nextjs.org/docs
Development Resources
- Component Library:
https://ui.shadcn.com - Icons:
https://lucide.dev - Tailwind:
https://tailwindcss.com
9. Technische Notities
Database Queries Examples
// Get client with full dossier
const { data: client } = await supabase
.from('clients')
.select(`
*,
intake_notes (*),
problem_profiles (*),
treatment_plans (*)
`)
.eq('id', clientId)
.single()
// Search clients
const { data: clients } = await supabase
.from('clients')
.select('*')
.ilike('last_name', `%${searchQuery}%`)
.order('updated_at', { ascending: false })
AI Prompt Templates
// Summarize prompt
const SUMMARIZE_PROMPT = `
Vat het onderstaande intake-verslag samen in 5-8 bullets.
Schrijf in Nederlands, klinisch neutraal, zonder persoonlijke informatie.
Intake verslag:
{intakeText}
`
// Extract problems prompt
const EXTRACT_PROMPT = `
Analyseer de intake en bepaal:
1. DSM-light categorie (kies uit: stemming_depressie, angst, gedrag_impuls, middelen_gebruik, cognitief, context_psychosociaal)
2. Severity (laag, middel, hoog)
3. Rationale (2-3 zinnen)
4. Bronzinnen uit de tekst
Intake:
{intakeText}
`
Component Structure
// Example component with proper typing
interface ClientCardProps {
client: Client
onClick?: (id: string) => void
isSelected?: boolean
}
export function ClientCard({ client, onClick, isSelected }: ClientCardProps) {
return (
<Card
className={cn(
"cursor-pointer transition-shadow",
isSelected && "ring-2 ring-primary"
)}
onClick={() => onClick?.(client.id)}
>
<CardHeader>
<CardTitle>{client.first_name} {client.last_name}</CardTitle>
<CardDescription>
{format(new Date(client.birth_date), 'dd-MM-yyyy')}
</CardDescription>
</CardHeader>
</Card>
)
}
Versiehistorie:
| Versie | Datum | Auteur | Wijziging |
|---|---|---|---|
| v1.0 | 10-11-2025 | Development Team | Initiële versie met complete epic breakdown |