colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Content loader utility, Content directory structuur

Browse Source
This commit is contained in:
colinislit
2025-11-15 22:06:48 +01:00
parent dbde412465
commit 690e7b7c43
37 changed files with 9447 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
docs/design/dot-shader-design-review.md Normal file
View File

@@ -0,0 +1,214 @@
# 🎨 Design Review: Dot Shader Background Component
**Datum:** 15-11-2024
**Review Team:** Design & UX
**Vraag:** Kan het dot-shader-background component gebruikt worden voor marketingpagina en/of EPD app?
---
## 📋 Context Analyse
### Manifesto Kernwaarden
- **Innovatie & Disruptie:** "AI gaat software eten" - technologische vooruitgang centraal
- **Snelheid:** "4 weken vs 12 maanden" - efficiency en moderniteit
- **Bewijs door doen:** "Beste manier om toekomst te voorspellen is hem bouwen"
- **Digitale transformatie:** Software on Demand als nieuwe realiteit
### UX Stylesheet Principes
- **Lage cognitieve belasting:** Focus op content, niet op decoratie
- **Toegankelijkheid:** WCAG AA contrast, geen afleidende elementen
- **"Less is more":** Accentpalet bewust klein gehouden → minder visuele ruis
- **Functioneel design:** Elke visuele keuze moet doel dienen
### Shader Component Eigenschappen
- **Technisch:** Three.js shader met WebGL rendering
- **Visueel:** Geanimeerde dots met mouse trail interactie
- **Performance:** High-performance mode, GPU-accelerated
- **Theme support:** Dark/light mode compatible
- **Subtiel:** Lage opacity (0.025-0.15), niet dominant
---
## 🎯 Design Team Advies
### ✅ **AANBEVELING: Strategische Inzet**
Het design team adviseert **gecontroleerd gebruik** van het shader component, met duidelijke context-specifieke richtlijnen:
---
## 📍 Marketing Website: **JA, met voorwaarden**
### Waarom het werkt:
1. **Manifesto alignment:** Het component straalt technologische innovatie uit - perfect voor "Software on Demand" messaging
2. **Differentiatie:** Visueel onderscheidend van traditionele SaaS-landing pages
3. **Engagement:** Mouse trail interactie verhoogt tijd op pagina
4. **Credibility:** Toont technische vaardigheid zonder te overdrijven
### Implementatie Richtlijnen:
**Hero Section (Primaire Inzet)**
- ✅ Shader als full-screen achtergrond achter hero content
- ✅ Zeer lage opacity (0.02-0.05) - subtiel, niet dominant
- ✅ Content overlay met sterke contrast (wit op donker, of donker op licht)
- ✅ Performance: Lazy load alleen wanneer hero in viewport
**Secties (Secundaire Inzet)**
- ⚠️ Optioneel in "How it Works" of "Technology" secties
- ❌ NIET in comparison tables, ROI calculator, of formulier secties
- ❌ NIET op mobile (performance + UX overwegingen)
**Technische Aanpassingen Nodig:**
```typescript
// Marketing-specifieke configuratie
const marketingConfig = {
dotOpacity: 0.03, // Zeer subtiel
gridSize: 80, // Fijner grid voor eleganter effect
disableMouseTrail: false, // Interactiviteit behouden
performanceMode: 'high', // GPU optimization
mobileFallback: 'gradient' // Fallback voor mobile
}
```
**Contrast Check:**
- Tekst op shader achtergrond moet voldoen aan WCAG AA (4.5:1)
- Gebruik semi-transparante overlay indien nodig
- Test met verschillende tekstgroottes
---
## 🏥 EPD App: **NEE, tenzij zeer subtiel**
### Waarom het risicovol is:
1. **Cognitieve belasting:** Medische professionals hebben focus nodig - animaties zijn afleidend
2. **UX Stylesheet conflict:** Direct tegenstrijdig met "lage cognitieve belasting" principe
3. **Toegankelijkheid:** Kan problemen veroorzaken voor gebruikers met motion sensitivity
4. **Performance:** Elke milliseconde telt in productie-omgevingen
### Uitzondering: Onboarding/Welcome Screen
- ✅ **Alleen** op eerste login/welcome screen
- ✅ Zeer korte duur (3-5 seconden), dan fade-out
- ✅ Optioneel: "Skip animation" knop voor toegankelijkheid
- ❌ **NOOIT** tijdens actieve workflows (intake, profiel, behandelplan)
**Implementatie Als Uitzondering:**
```typescript
// EPD-specifieke configuratie (alleen welcome)
const epdWelcomeConfig = {
dotOpacity: 0.01, // Extreem subtiel
gridSize: 120, // Zeer fijn grid
disableMouseTrail: true, // Geen interactiviteit
autoFadeOut: true, // Fade na 3 seconden
skipButton: true, // Toegankelijkheid
reducedMotion: true // Respecteer prefers-reduced-motion
}
```
---
## 🎨 Stylesheet Matching Analyse
### Kleuren Compatibiliteit
**Light Theme Match:**
- ✅ Shader bg: `#F4F5F5` matcht stylesheet `#F8FAFC` (zeer dichtbij)
- ✅ Shader dots: `#e1e1e1` matcht border kleur `#E2E8F0` (harmonisch)
- ⚠️ Aanpassing nodig: Shader moet exact `#F8FAFC` gebruiken voor consistency
**Dark Theme Match:**
- ✅ Shader bg: `#121212` is acceptabel voor dark mode
- ✅ Shader dots: `#FFFFFF` met lage opacity werkt goed
- ⚠️ Stylesheet heeft geen dark mode spec gedefinieerd - dit moet eerst worden uitgewerkt
**Aanbevolen Aanpassingen:**
```typescript
// Update shader theme colors om exact te matchen
const getThemeColors = () => {
switch (theme) {
case 'light':
return {
dotColor: '#E2E8F0', // Match border color
bgColor: '#F8FAFC', // Match app background
dotOpacity: 0.03 // Zeer subtiel voor marketing
}
case 'dark':
return {
dotColor: '#475569', // Match secondary text
bgColor: '#0F172A', // Match primary text (inverted)
dotOpacity: 0.02 // Nog subtieler voor dark
}
}
}
```
---
## ⚖️ "Less is More" vs "Digital Innovation"
### Design Team Consensus:
**Marketing Website:**
- **"Less is more"** geldt voor **content en copy** - niet voor visuele impact
- Shader component kan **strategisch** gebruikt worden om innovatie te communiceren
- **Voorwaarde:** Het moet de boodschap versterken, niet afleiden
- **Test:** A/B test met en zonder shader - meet engagement metrics
**EPD App:**
- **"Less is more"** is hier **absoluut** - elke pixel moet functioneel zijn
- Shader component is **decoratief** en voegt geen functionele waarde toe
- **Uitzondering:** Welcome screen kan één keer indruk maken, daarna weg
---
## 📊 Risico Analyse
| Risico | Kans | Impact | Mitigatie |
|--------|------|--------|-----------|
| **Performance impact** | Medium | Hoog | Lazy loading, mobile fallback, performance monitoring |
| **Toegankelijkheid issues** | Medium | Hoog | `prefers-reduced-motion` respecteren, skip optie |
| **Cognitieve overload** | Hoog | Medium | Zeer lage opacity, alleen hero section |
| **Stylesheet mismatch** | Laag | Laag | Kleuren aanpassen naar exacte stylesheet waarden |
| **Mobile performance** | Hoog | Medium | Automatische fallback naar gradient |
---
## ✅ Finale Aanbeveling
### Marketing Website: **GO** ✅
- Implementeer in hero section met zeer lage opacity
- Pas kleuren aan naar exacte stylesheet waarden
- Voeg mobile fallback toe
- Monitor performance metrics
- Test toegankelijkheid met screen readers
### EPD App: **NO GO** ❌
- **Behalve:** Welcome screen (één keer, met skip optie)
- Focus op functioneel design volgens UX stylesheet
- Gebruik subtiele gradients of solid colors voor achtergronden
### Implementatie Prioriteit:
1. **Week 1:** Marketing hero section met shader (als MVP)
2. **Week 2:** Performance optimalisatie + mobile fallback
3. **Week 4:** A/B test resultaten evalueren
4. **Post-launch:** Beslissing over permanente implementatie
---
## 🎯 Design Principes Samenvatting
**Voor Marketing:**
> "Innovatie moet zichtbaar zijn, maar niet opdringerig"
**Voor EPD:**
> "Elke visuele keuze moet de gebruiker helpen, niet afleiden"
**Algemeen:**
> "Technologie moet de boodschap dienen, niet domineren"
---
**Design Team Sign-off:**
✅ Marketing website: Goedkeuring met voorwaarden
❌ EPD app: Afwijzing (behalve welcome screen)
📝 Stylesheet aanpassingen: Vereist voor consistency

403
docs/design/marketing-shader-implementation.md Normal file
View File

@@ -0,0 +1,403 @@
# 🚀 Marketing Shader Implementation Guide
**Doel:** Praktische implementatie van dot-shader component voor marketing website hero section.
---
## 📐 Design Specificaties
### Hero Section Layout
```
┌─────────────────────────────────────┐
│ [Shader Background - zeer subtiel] │
│ │
│ ┌─────────────────────────────┐ │
│ │ Hero Content Overlay │ │
│ │ - Headline (wit/donker) │ │
│ │ - Subheadline │ │
│ │ - CTA Buttons │ │
│ │ - Live Metrics Counter │ │
│ └─────────────────────────────┘ │
│ │
└─────────────────────────────────────┘
```
### Visuele Hiërarchie
1. **Shader:** Opacity 0.02-0.03 (bijna onzichtbaar, maar aanwezig)
2. **Content Overlay:** Semi-transparant of solid (afhankelijk van contrast)
3. **Tekst:** Hoog contrast (wit op donker, of donker op licht)
---
## 🔧 Technische Implementatie
### Stap 1: Aangepaste Marketing Variant
```typescript
// components/ui/marketing-shader-background.tsx
'use client'
import { DotScreenShader } from './dot-shader-background'
import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
interface MarketingShaderProps {
variant?: 'hero' | 'section'
className?: string
}
export function MarketingShader({ variant = 'hero', className }: MarketingShaderProps) {
const { theme } = useTheme()
const [mounted, setMounted] = useState(false)
const [reducedMotion, setReducedMotion] = useState(false)
useEffect(() => {
setMounted(true)
// Check for reduced motion preference
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
setReducedMotion(mediaQuery.matches)
const handleChange = (e: MediaQueryListEvent) => setReducedMotion(e.matches)
mediaQuery.addEventListener('change', handleChange)
return () => mediaQuery.removeEventListener('change', handleChange)
}, [])
// Fallback voor mobile of reduced motion
if (!mounted || reducedMotion) {
return (
<div
className={`absolute inset-0 bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-100 ${className}`}
aria-hidden="true"
/>
)
}
// Desktop: shader component
return (
<div className={`absolute inset-0 overflow-hidden ${className}`} aria-hidden="true">
<DotScreenShader />
{/* Subtle overlay voor betere tekst leesbaarheid */}
<div className="absolute inset-0 bg-white/40 dark:bg-slate-900/40 pointer-events-none" />
</div>
)
}
```
### Stap 2: Hero Section Component
```typescript
// app/(marketing)/components/hero-section.tsx
import { MarketingShader } from '@/components/ui/marketing-shader-background'
import { LiveMetricsCounter } from './live-metrics-counter'
export function HeroSection() {
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
{/* Shader Background */}
<MarketingShader variant="hero" className="z-0" />
{/* Content Overlay */}
<div className="relative z-10 container mx-auto px-4 py-20">
<div className="max-w-4xl mx-auto text-center">
{/* Headline */}
<h1 className="text-5xl md:text-7xl font-bold text-slate-900 dark:text-white mb-6">
Software on Demand
</h1>
{/* Subheadline */}
<p className="text-xl md:text-2xl text-slate-700 dark:text-slate-300 mb-8">
Van €100.000 en 12 maanden naar €200 en 4 weken
</p>
{/* Live Metrics */}
<LiveMetricsCounter />
{/* CTAs */}
<div className="flex flex-col sm:flex-row gap-4 justify-center mt-12">
<button className="px-8 py-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
Bekijk Demo
</button>
<button className="px-8 py-4 bg-slate-200 text-slate-900 rounded-lg hover:bg-slate-300 transition">
Lees Manifesto
</button>
</div>
</div>
</div>
</section>
)
}
```
### Stap 3: Shader Component Aanpassingen
```typescript
// Aanpassingen in dot-shader-background.tsx voor marketing gebruik
// In Scene component, update getThemeColors:
const getThemeColors = () => {
switch (theme) {
case 'light':
return {
dotColor: '#E2E8F0', // Match UX stylesheet border color
bgColor: '#F8FAFC', // Match UX stylesheet app background
dotOpacity: 0.03 // Zeer subtiel voor marketing
}
case 'dark':
return {
dotColor: '#475569', // Match secondary text
bgColor: '#0F172A', // Match primary text (inverted)
dotOpacity: 0.02 // Nog subtieler
}
default:
return {
dotColor: '#E2E8F0',
bgColor: '#F8FAFC',
dotOpacity: 0.03
}
}
}
// Update gridSize voor eleganter effect
const gridSize = 80 // Fijner dan standaard 100
```
---
## 🎨 Styling Integratie
### Tailwind Classes voor Content Overlay
```css
/* Zorg voor goede contrast over shader */
.hero-content {
/* Optioneel: semi-transparante achtergrond voor tekst */
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
/* Of: solid achtergrond met padding */
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
```
### Contrast Check
**Test Scenario's:**
1. Wit tekst op shader achtergrond → Minimaal 4.5:1 contrast
2. Donker tekst op shader achtergrond → Minimaal 4.5:1 contrast
3. Met overlay → Contrast moet verbeteren
**Tools:**
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
- Browser DevTools → Accessibility panel
---
## 📱 Mobile Responsive
### Breakpoint Strategie
```typescript
// components/ui/marketing-shader-background.tsx
export function MarketingShader({ variant, className }: MarketingShaderProps) {
const [isMobile, setIsMobile] = useState(false)
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768) // Tailwind md breakpoint
}
checkMobile()
window.addEventListener('resize', checkMobile)
return () => window.removeEventListener('resize', checkMobile)
}, [])
// Mobile: gradient fallback (performance)
if (isMobile) {
return (
<div
className={`absolute inset-0 bg-gradient-to-br from-slate-50 via-blue-50/20 to-slate-100 ${className}`}
aria-hidden="true"
/>
)
}
// Desktop: shader
return <DotScreenShader />
}
```
**Reden:**
- Mobile GPU performance beperkt
- Batterij impact
- UX: Gebruikers verwachten snelle laadtijden op mobile
---
## ⚡ Performance Optimalisatie
### Lazy Loading
```typescript
import dynamic from 'next/dynamic'
// Lazy load shader alleen wanneer hero in viewport
const MarketingShader = dynamic(
() => import('@/components/ui/marketing-shader-background').then(mod => mod.MarketingShader),
{
ssr: false, // Client-side only
loading: () => <div className="absolute inset-0 bg-slate-50" />
}
)
```
### Intersection Observer
```typescript
// components/ui/marketing-shader-background.tsx
export function MarketingShader({ variant, className }: MarketingShaderProps) {
const [shouldRender, setShouldRender] = useState(false)
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!ref.current) return
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setShouldRender(true)
observer.disconnect()
}
},
{ threshold: 0.1 }
)
observer.observe(ref.current)
return () => observer.disconnect()
}, [])
if (!shouldRender) {
return <div ref={ref} className={`absolute inset-0 bg-slate-50 ${className}`} />
}
return <DotScreenShader />
}
```
---
## ♿ Toegankelijkheid
### Reduced Motion Support
```typescript
// Automatisch detecteren en respecteren
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (prefersReducedMotion) {
// Geen animaties, statische gradient
return <StaticGradientBackground />
}
```
### Skip Animation Knop
```typescript
// Optioneel: knop om animatie uit te zetten
<button
onClick={() => setAnimationEnabled(false)}
className="sr-only focus:not-sr-only"
>
Skip animatie
</button>
```
### ARIA Labels
```typescript
<div
className="absolute inset-0"
aria-hidden="true" // Decoratief element, niet voor screen readers
role="presentation"
>
<DotScreenShader />
</div>
```
---
## 📊 Monitoring & Metrics
### Performance Tracking
```typescript
// Track shader performance
useEffect(() => {
const startTime = performance.now()
// Na render
requestAnimationFrame(() => {
const renderTime = performance.now() - startTime
if (renderTime > 100) {
console.warn('Shader render tijd hoog:', renderTime)
// Mogelijk fallback activeren
}
})
}, [])
```
### A/B Test Setup
```typescript
// Variant A: Met shader
// Variant B: Zonder shader (gradient)
const useShader = () => {
// Cookie/localStorage based variant assignment
const variant = localStorage.getItem('hero-variant') || 'A'
return variant === 'A'
}
```
**Metrics te meten:**
- Time to Interactive (TTI)
- First Contentful Paint (FCP)
- Bounce rate
- Engagement tijd
- Conversion rate
---
## ✅ Checklist
### Pre-Launch
- [ ] Shader opacity op 0.02-0.03 (zeer subtiel)
- [ ] Kleuren matchen exact UX stylesheet
- [ ] Mobile fallback geïmplementeerd
- [ ] Reduced motion support
- [ ] Contrast check gedaan (WCAG AA)
- [ ] Performance test (< 100ms render tijd)
- [ ] Lazy loading geïmplementeerd
### Post-Launch
- [ ] Performance monitoring actief
- [ ] A/B test resultaten analyseren
- [ ] Gebruikersfeedback verzamelen
- [ ] Accessibility audit uitgevoerd
---
## 🎯 Conclusie
Het shader component kan **strategisch** gebruikt worden op de marketing website, mits:
1. Zeer lage opacity (0.02-0.03)
2. Alleen in hero section
3. Mobile fallback aanwezig
4. Toegankelijkheid gewaarborgd
5. Performance geoptimaliseerd
**Resultaat:** Innovatieve uitstraling zonder UX compromissen.

0
docs/manifesto.md Normal file
View File

979
docs/specs/archive/bouwplan.md Normal file
View File

@@ -0,0 +1,979 @@
# 🚀 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
- **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
---
## 3. Epics & Stories Overzicht
🎯 **Doel:** Complete overzicht van alle development epics met technische details.
| Epic ID | Epic Naam | Stories | Points | Status | Priority | Dependencies |
|---------|-----------|---------|--------|--------|----------|--------------|
| EP00 | Project Setup & Configuration | 5 | 13 | Done | 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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP00-ST01 | Next.js project opzetten | 3 | Done | - |
| EP00-ST02 | Tailwind CSS en UI libraries installeren | 3 | Done | EP00-ST01 |
| EP00-ST03 | Supabase project aanmaken | 3 | Done | EP00-ST01 |
| EP00-ST04 | Environment variables configureren | 2 | Done | EP00-ST03 |
| EP00-ST05 | Git repository opzetten | 2 | Done | EP00-ST01 |
**Story Details:**
**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
**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 (components.json, utils.ts)
**EP00-ST03:** Als developer wil ik Supabase project aanmaken zodat ik database en auth kan gebruiken
- ✅ Supabase project in EU region (dqugbrpwtisgyxscpefg)
- ✅ Connection string in .env.local
- ✅ Supabase client configured (lib/supabase/client.ts + server.ts)
- ✅ TypeScript types generation script (pnpm run types:generate)
**EP00-ST04:** Als developer wil ik environment variables configureren zodat services veilig verbonden zijn
- ✅ .env.local met alle keys (SUPABASE_URL, ANON_KEY, SERVICE_ROLE_KEY)
- ✅ .env.example voor team
- ⏳ Vercel environment variables (bij deployment EP11)
- ✅ Validation bij startup (throws error if missing)
**EP00-ST05:** Als developer wil ik Git repository opzetten zodat code versiebeheerd is
- ✅ GitHub repository
- ✅ .gitignore configuratie
- ⏳ Branch protection rules
- ✅ Initial commit met setup
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP01-ST01 | Database tabellen creëren | 8 | Not Started | EP00-ST03 |
| EP01-ST02 | Row Level Security policies implementeren | 5 | Not Started | EP01-ST01 |
| EP01-ST03 | Database migrations opzetten | 3 | Not Started | EP01-ST01 |
| EP01-ST04 | Demo data seeden | 5 | Not Started | EP01-ST01 |
**Story Details:**
**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)
**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
**EP01-ST03:** Als developer wil ik database migrations opzetten zodat schema versiebeheerd is
- ⏳ Supabase migrations folder
- ⏳ Initial migration script
- ⏳ Rollback mogelijk
- ⏳ Documentation
**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`
**Technische implementatie details:**
- **Database Schema (zie TO §2.3):**
- `clients`: id (UUID), first_name, last_name, birth_date, created_at, updated_at
- `intake_notes`: id, client_id (FK), title, tag (CHECK), content_json (JSONB), content_text
- `problem_profiles`: id, client_id (FK), category (CHECK), severity (CHECK), remarks
- `treatment_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):**
```sql
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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP02-ST01 | Login implementeren | 3 | Not Started | EP00-ST03, EP01-ST02 |
| EP02-ST02 | Protected routes implementeren | 3 | Not Started | EP02-ST01 |
| EP02-ST03 | Logout functionaliteit | 2 | Not Started | EP02-ST01 |
**Story Details:**
**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
**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
**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
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP03-ST01 | Cliëntenlijst tonen | 5 | Not Started | EP01-ST01, EP02-ST02 |
| EP03-ST02 | Nieuwe cliënt aanmaken | 5 | Not Started | EP03-ST01 |
| EP03-ST03 | Cliëntgegevens bekijken | 5 | Not Started | EP03-ST01 |
| EP03-ST04 | Cliëntgegevens bewerken | 3 | Not Started | EP03-ST03 |
| EP03-ST05 | Zustand store voor client state | 3 | Not Started | EP00-ST01 |
**Story Details:**
**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
**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
**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
**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
**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
**Technische implementatie details:**
- **API endpoints:**
- `POST /api/clients` - Create
- `GET /api/clients` - List with search
- `GET /api/clients/[id]` - Get single
- `PATCH /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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP04-ST01 | TipTap editor implementeren | 8 | Not Started | EP03-ST03 |
| EP04-ST02 | Intake verslagen opslaan | 5 | Not Started | EP04-ST01 |
| EP04-ST03 | Tags toevoegen aan verslagen | 3 | Not Started | EP04-ST02 |
| EP04-ST04 | Oude intakes bekijken | 5 | Not Started | EP04-ST02 |
| EP04-ST05 | Tekst extractie voor search | 5 | Not Started | EP04-ST02 |
| EP04-ST06 | AI-rail implementeren | 8 | Not Started | EP04-ST01 |
**Story Details:**
**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
**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
**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
**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
**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
**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
**Technische implementatie details:**
- **TipTap setup:**
```typescript
import StarterKit from '@tiptap/starter-kit'
const editor = useEditor({
extensions: [StarterKit],
content: prosemirrorJSON
})
```
- **Storage:** content_json (JSONB) + content_text (TEXT)
- **API:** `/api/intakes` endpoints
---
### Epic EP05 — Problem Profile (DSM-light)
**Epic Doel:** DSM-light categorisatie systeem met severity bepaling.
| Story ID | Story Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP05-ST01 | Probleem categorie selecteren | 5 | Not Started | EP04-ST02 |
| EP05-ST02 | Severity aangeven | 3 | Not Started | EP05-ST01 |
| EP05-ST03 | Opmerkingen toevoegen | 3 | Not Started | EP05-ST01 |
| EP05-ST04 | AI-suggestie paneel | 10 | Not Started | EP04-ST02, EP07-ST03 |
**Story Details:**
**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
**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
**EP05-ST03:** Als behandelaar wil ik opmerkingen toevoegen zodat ik context kan geven
- ⏳ Textarea voor vrije tekst
- ⏳ Character limit (500)
- ⏳ Optional field
- ⏳ Markdown support
**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)
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP06-ST01 | Behandelplan genereren | 10 | Not Started | EP05-ST01, EP07-ST04 |
| EP06-ST02 | Doelen bewerken | 8 | Not Started | EP06-ST01 |
| EP06-ST03 | Interventies specificeren | 5 | Not Started | EP06-ST01 |
| EP06-ST04 | Meetmomenten plannen | 5 | Not Started | EP06-ST01 |
| EP06-ST05 | Plan publiceren | 6 | Not Started | EP06-ST02 |
**Story Details:**
**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
**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
**EP06-ST03:** Als behandelaar wil ik interventies specificeren zodat behandeling duidelijk is
- ⏳ Interventie lijst
- ⏳ Type + frequentie + duur
- ⏳ Voorgestelde interventies
- ⏳ Custom toevoegen
**EP06-ST04:** Als behandelaar wil ik meetmomenten plannen zodat voortgang gemeten wordt
- ⏳ Timeline met meetmomenten
- ⏳ Na X sessies format
- ⏳ Evaluatie types
- ⏳ Calendar integration (stretch)
**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
**Technische implementatie details:**
- **Plan structuur (JSONB):**
```typescript
{
doelen: string[],
interventies: string[],
frequentie: string,
meetmomenten: string[]
}
```
- **Status flow:** concept → gepubliceerd → nieuwe versie
- **API:** `/api/treatment-plan` endpoints
---
### Epic EP07 — AI Integration
**Epic Doel:** Claude AI integratie voor alle AI-powered features.
| Story ID | Story Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP07-ST01 | Claude API client configureren | 5 | Not Started | EP00-ST04 |
| EP07-ST02 | Intake samenvatten met AI | 8 | Not Started | EP07-ST01, EP04-ST06 |
| EP07-ST03 | Problemen extraheren met AI | 8 | Not Started | EP07-ST01 |
| EP07-ST04 | Behandelplan genereren met AI | 8 | Not Started | EP07-ST01 |
| EP07-ST05 | AI events loggen | 5 | Not Started | EP07-ST01, EP01-ST01 |
**Story Details:**
**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
**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
**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
**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
**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
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP08-ST01 | Dashboard met tegels | 5 | Not Started | EP03-ST03 |
| EP08-ST02 | Tegels configureren | 3 | Not Started | EP08-ST01 |
| EP08-ST03 | Breadcrumb navigatie | 2 | Not Started | EP03-ST03 |
| EP08-ST04 | Sidebar navigatie | 3 | Not Started | EP03-ST03 |
**Story Details:**
**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
**EP08-ST02:** Als behandelaar wil ik tegels configureren zodat ik kan personaliseren
- ⏳ Settings icon → modal
- ⏳ Checkboxes per tegel
- ⏳ LocalStorage persistence
- ⏳ Instant preview
**EP08-ST03:** Als gebruiker wil ik breadcrumb navigatie zodat ik weet waar ik ben
- ⏳ Breadcrumb in header
- ⏳ Clickable segments
- ⏳ Current page highlight
- ⏳ Responsive truncation
**EP08-ST04:** Als gebruiker wil ik sidebar navigatie zodat ik tussen modules kan wisselen
- ⏳ Vertical navigation
- ⏳ Active state indicator
- ⏳ Icons + labels
- ⏳ Collapsible op mobile
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP09-ST01 | Basis componenten bouwen | 5 | Not Started | EP00-ST02 |
| EP09-ST02 | Toast notificaties | 3 | Not Started | EP09-ST01 |
| EP09-ST03 | Loading states | 3 | Not Started | EP09-ST01 |
| EP09-ST04 | Formulier componenten | 5 | Not Started | EP09-ST01 |
| EP09-ST05 | Dark mode (stretch) | 5 | Not Started | EP09-ST01 |
**Story Details:**
**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)
**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)
**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
**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
**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
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP10-ST01 | Unit tests schrijven | 5 | Not Started | All features |
| EP10-ST02 | E2E tests schrijven | 5 | Not Started | All features |
| EP10-ST03 | Smoke tests uitvoeren | 2 | Not Started | All features |
| EP10-ST04 | Accessibility testen | 1 | Not Started | EP09 |
**Story Details:**
**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
**EP10-ST02:** Als developer wil ik E2E tests schrijven zodat kritieke flows werken
- ⏳ Playwright setup
- ⏳ Happy path: intake → profile → plan
- ⏳ Error scenarios
- ⏳ Cross-browser
**EP10-ST03:** Als team wil ik smoke tests uitvoeren zodat demo stabiel is
- ⏳ Manual test checklist
- ⏳ All features tested
- ⏳ Performance acceptable
- ⏳ No console errors
**EP10-ST04:** Als developer wil ik accessibility testen zodat app toegankelijk is
- ⏳ Keyboard navigation
- ⏳ Screen reader support
- ⏳ WCAG AA contrast
- ⏳ Focus management
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP11-ST01 | Vercel deployment configureren | 3 | Not Started | All features |
| EP11-ST02 | Demo data prepareren | 5 | Not Started | EP01-ST04 |
| EP11-ST03 | Demo script schrijven | 3 | Not Started | All features |
| EP11-ST04 | Dry-run uitvoeren | 2 | Not Started | EP11-ST01 |
**Story Details:**
**EP11-ST01:** Als developer wil ik Vercel deployment configureren zodat app live is
- ⏳ Vercel project setup
- ⏳ EU region (Amsterdam)
- ⏳ Environment variables
- ⏳ Custom domain (optional)
**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
**EP11-ST03:** Als presenter wil ik demo script hebben zodat presentatie gestructureerd is
- ⏳ 10-minute script
- ⏳ Key talking points
- ⏳ Backup scenarios
- ⏳ Q&A anticipatie
**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
**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 Title | Points | Status | Dependencies |
|----------|-------------|--------|--------|--------------|
| EP12-ST01 | Afspraken plannen | 8 | Not Started | EP08-ST01 |
| EP12-ST02 | PDF export | 8 | Not Started | EP06-ST05 |
| EP12-ST03 | Leesbaarheid verbeteren met AI | 5 | Not Started | EP07-ST01 |
**Story Details:**
**EP12-ST01:** Als behandelaar wil ik afspraken kunnen plannen zodat agenda gekoppeld is
- ⏳ Calendar view
- ⏳ Create/edit appointments
- ⏳ Link to client
- ⏳ Dashboard widget
**EP12-ST02:** Als behandelaar wil ik PDF export zodat ik rapporten kan delen
- ⏳ Export button
- ⏳ Professional layout
- ⏳ All sections included
- ⏳ Download trigger
**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. 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
1. **New Client Flow**
- Create client → Add intake → Generate summary → Extract problems → Create plan
- Expected time: <2 minutes
- All data persisted correctly
2. **AI Integration Flow**
- Large intake text (2000+ words) → All AI features work
- Response time <5 seconds per call
- Graceful degradation if AI fails
3. **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
1. AI vermindert administratieve last met 50%
2. Consistente kwaliteit van documentatie
3. Meer tijd voor cliëntcontact
4. Evidence-based suggesties
5. 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](./prd-mini-ecd.md) - Business requirements en scope
- **FO** — [Functioneel Ontwerp](./fo-mini-ecd.md) - User flows en functionele specificaties
- **TO** — [Technisch Ontwerp](./to-mini-ecd.md) - Architectuur en database design
- **UX/UI** — [Stylesheet](./ux-stylesheet.md) - Kleuren en design system
- **API** — [API Access Document](./api-acces-mini-ecd.md) - 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
```typescript
// 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
```typescript
// 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
```typescript
// 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 |

0
docs/specs/fo-mini-ecd.md → docs/specs/archive/fo-mini-ecd.md
View File

0
docs/specs/prd-mini-ecd.md → docs/specs/archive/prd-mini-ecd.md
View File

0
docs/specs/to-mini-ecd.md → docs/specs/archive/to-mini-ecd.md
View File

618
docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md Normal file
View File

@@ -0,0 +1,618 @@
# 🚀 Mission Control – Bouwplan AI Speedrun / Mini-ECD
🎯 **Projectnaam:** AI Speedrun - Mini-ECD Prototype
**Versie:** v1.1 (Actueel)
**Datum:** 15-11-2024
**Auteur:** Colin van der Heijden (AI Speedrun / ikbenlit.nl)
**Laatste Update:** 15-11-2024
---
## 1. Doel en context
🎯 **Doel:** Een werkend EPD-prototype bouwen in 4 weken dat demonstreert hoe "Software on Demand" traditionele ontwikkeling disrupts: van €100.000+ en 12-24 maanden naar €200 build cost en 4 weken doorlooptijd.
📘 **Toelichting:** Dit project dient een drievoudig doel:
1. **Demo voor GGZ-sector:** Tonen van AI-waarde in EPD-workflows (intake → profiel → plan) tijdens inspiratiesessies
2. **LinkedIn Build in Public:** Wekelijkse transparante updates die viral marketing genereren voor AI consultancy
3. **Software on Demand Proof:** Bewijs dat enterprise-kwaliteit software nu in weken ipv jaren gebouwd kan worden
Het systeem toont praktische AI-integratie: intake samenvattingen in seconden ipv uren, automatische DSM-classificatie, en behandelplannen die direct bruikbaar zijn. Alles met fictieve demo-data, privacy-first design.
---
## 2. Uitgangspunten
### 2.1 Technische Stack
🎯 **Doel:** Modern, bewezen technologie stack voor snelle development en lage run costs.
**Frontend:**
- **Framework:** Next.js 15 (App Router) - Single repo voor marketing + EPD
- **Styling:** Tailwind CSS v3.4 (fallback van v4 bij problemen)
- **UI Components:** shadcn/ui voor snelheid + consistentie
- **Rich Text:** TipTap editor (ProseMirror basis)
- **Icons:** Lucide React
- **State:** Zustand + React Context (simpel maar effectief)
**Backend:**
- **API:** Next.js Route Handlers (server-side)
- **Database:** Supabase (PostgreSQL + Auth + Storage) - EU region
- **AI:** Claude 3.5 Sonnet (Anthropic) - Superieur voor Nederlands
- **Hosting:** Vercel (EU region Amsterdam)
**Development & Tools:**
- **Version Control:** GitHub (public repo voor transparantie)
- **Type Safety:** TypeScript overal
- **Package Manager:** pnpm (sneller dan npm)
- **AI Pair Programming:** Cursor IDE
- **Testing:** Vitest + Playwright (basis coverage)
### 2.2 Projectkaders
🎯 **Doel:** Realistische constraints voor 4-weken sprint.
- **Tijd:** 4 weken part-time (80-120 uur totaal)
- **Budget:** €200 totaal (€50/maand runtime target)
- **Team:** 1 developer (Colin) + AI tools als co-pilot
- **Data:** 100% fictieve demo data
- **Scope:** MVP voor 10-min demo + marketing site
- **Launch:** LinkedIn viral series + demo sessies
### 2.3 Programmeer Uitgangspunten
🎯 **Doel:** Code quality zonder over-engineering voor MVP.
**Core Principles:**
- **DRY:** Herbruikbare componenten, centrale configs
- **KISS:** Simpele oplossingen boven complexiteit
- **SOC:** UI/logic/data layers gescheiden
- **YAGNI:** Alleen bouwen wat nu nodig is
**Development Practices:**
- **Iteratief:** Ship daily, perfect later
- **AI-First:** Laat Claude/Cursor heavy lifting doen
- **Copy-Paste OK:** Voor MVP snelheid > perfectie
- **Error Handling:** User-friendly messages overal
- **Security:** API keys server-side, RLS in Supabase
---
## 3. Epics & Stories Overzicht
🎯 **Doel:** 8 duidelijke epics voor 4-weken development sprint - **Marketing First Strategy**.
| Epic ID | Titel | Doel | Status | Story Count | Week |
|---------|-------|------|--------|-------------|------|
| **WEEK 1 - FOUNDATION & MARKETING** |||||
| E0 | Project Setup | Next.js + Supabase + Vercel running | 🔄 In Progress (60%) | 5 | 1 |
| E1 | Marketing Website | Landing + build log + lead capture | ⏳ To Do | 6 | 1 |
| **WEEK 2 - EPD CORE** |||||
| E2 | Database & Auth | Schema + RLS + demo users | ⏳ To Do | 4 | 2 |
| E3 | Core UI & Client Module | Layout + Client CRUD + Navigation | ⏳ To Do | 5 | 2 |
| **WEEK 3 - AI MAGIC** |||||
| E4 | Intake & AI Integration | TipTap + Claude API + Prompts | ⏳ To Do | 6 | 3 |
| E5 | Profile & Plan | DSM + behandelplan flows | ⏳ To Do | 4 | 3 |
| **WEEK 4 - POLISH & LAUNCH** |||||
| E6 | Onboarding System | Walkthrough + tooltips + help | ⏳ To Do | 4 | 4 |
| E7 | Performance & Launch | Optimization + demo prep | ⏳ To Do | 4 | 4 |
---
## 4. Epics & Stories (Uitwerking)
### Epic 0 – Project Setup 🔄
**Epic Doel:** Development environment volledig operationeel.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E0.S1 | Next.js 15 project init | App Router, TypeScript, dev server draait | ✅ Af | 2 |
| E0.S2 | Tailwind + shadcn setup | Custom theme, componenten installeren | 🔄 Gedeeltelijk | 3 |
| E0.S3 | Supabase project aanmaken | EU region, connection string werkend | ✅ Af | 2 |
| E0.S4 | GitHub repo + Vercel deploy | Auto-deploy on push, preview URLs | ✅ Af | 2 |
| E0.S5 | Environment variables | .env.local + Vercel secrets configured | ✅ Af | 1 |
**Technical Notes:**
- Supabase project ID: `dqugbrpwtisgyxscpefg`
- Deploy URL: `https://aispeedrun.vercel.app`
- Package manager: `pnpm` voor snelheid
**Implementation Status:**
- ✅ Next.js 15 + TypeScript initialized
- ✅ Tailwind CSS v3.4 + PostCSS configured
- ⏳ shadcn/ui: basis setup gedaan, componenten nog niet geinstaleerd
- ✅ Supabase clients (server + client) aangemaakt
- ⏳ Migrations folder aangemaakt, nog geen database schema
- ✅ Environment variables geconfigureerd
---
### Epic 1 – Marketing Website ⏳
**Epic Doel:** Public facing website voor Software on Demand story - WEEK 1 PRIORITY.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E1.S1 | Landing page hero | Comparison table, live counter, CTAs | ⏳ To Do | 5 |
| E1.S2 | Build metrics backend | Supabase table, API endpoint, tracking | ⏳ To Do | 3 |
| E1.S3 | Build log timeline | Week entries, expandable sections | ⏳ To Do | 3 |
| E1.S4 | ROI calculator | Interactive inputs, real-time calculation | ⏳ To Do | 3 |
| E1.S5 | Contact form + leads | Form validation, Supabase storage | ⏳ To Do | 2 |
| E1.S6 | Demo info page | Credentials, video embed, feature comparison | ⏳ To Do | 2 |
**Content Strategy Week 1:**
- **Day 1-2:** Landing page live → LinkedIn post "Building in public starts NOW"
- **Day 3-4:** Build log structure → LinkedIn post "Transparantie: alle uren en kosten"
- **Day 5-6:** ROI calculator → LinkedIn post "Bereken zelf: €100k vs €200"
- **Day 7:** Week 1 retrospective → LinkedIn post "Week 1: Marketing site in 30 uur"
**Implementation Details:**
```typescript
// Route structure (nog aanmaken)
/app
/(marketing)
/page.tsx // Landing page
/build-log/page.tsx // Timeline
/demo/page.tsx // Demo info
/how-it-works/page.tsx // Explainer + ROI
/contact/page.tsx // Lead capture
```
**Current Status:**
- ⏳ Standaard Next.js homepage nog in plaats
- ⏳ Geen marketing routes aangemaakt
- ⏳ Geen database tables voor build_metrics en leads
**Next Steps:**
1. Standaard homepage vervangen met Landing page
2. Marketing routes structure opzetten
3. Hero section component bouwen
4. Database schema aanmaken voor build_metrics
---
### Epic 2 – Database & Auth
**Epic Doel:** Complete database schema met auth en demo data - WEEK 2 START.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E2.S1 | Database schema creëren | 5 tables volgens TO, migrations | ⏳ To Do | 5 |
| E2.S2 | RLS policies implementeren | Secure by default, auth.uid() checks | ⏳ To Do | 3 |
| E2.S3 | Demo auth flow | Magic link login, demo users | ⏳ To Do | 3 |
| E2.S4 | Seed data script | 3+ clients met complete dossiers | ⏳ To Do | 2 |
**Database Tables:**
```sql
- clients (id, first_name, last_name, birth_date, client_id)
- intake_notes (id, client_id, content_json, content_text, ai_summary)
- problem_profiles (id, client_id, category, severity, rationale)
- treatment_plans (id, client_id, version, status, plan_json)
- ai_events (id, kind, request, response, duration_ms, cost_cents)
```
**Current Status:**
- ⏳ Supabase migrations folder leeg
- ⏳ Geen SQL schema aangemaakt
- ⏳ Geen RLS policies
---
### Epic 3 – Core UI & Client Module
**Epic Doel:** Responsive layout met client management - WEEK 2 PARALLEL.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E3.S1 | Layout skeleton | Topbar + sidebar + main content area | ⏳ To Do | 3 |
| E3.S2 | Navigation routing | /clients, /clients/[id] werkend | ⏳ To Do | 2 |
| E3.S3 | Client list view | Search, filter, pagination | ⏳ To Do | 3 |
| E3.S4 | Create client flow | Form validation, auto client-ID | ⏳ To Do | 2 |
| E3.S5 | Responsive design | Mobile + tablet + desktop perfect | ⏳ To Do | 3 |
**UX Principles:**
- Primary color: `#22C55E` (green-500)
- Mobile-first approach
- Keyboard shortcuts support
---
### Epic 4 – Intake & AI Integration 🎯
**Epic Doel:** TipTap editor met Claude AI volledig werkend - WEEK 3 FOCUS.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E4.S1 | TipTap editor setup | Rich text, auto-save, formatting | ⏳ To Do | 5 |
| E4.S2 | Claude API setup | Server-side calls, error handling | ⏳ To Do | 3 |
| E4.S3 | Intake summarization | 5-8 bullets, source highlighting | ⏳ To Do | 5 |
| E4.S4 | Problem extraction | DSM categories, severity scoring | ⏳ To Do | 5 |
| E4.S5 | B1 readability rewrite | Simplify language on demand | ⏳ To Do | 3 |
| E4.S6 | Cost tracking | Log tokens, estimate costs | ⏳ To Do | 2 |
**Prompt Engineering Week 3:**
```typescript
const SUMMARIZE_PROMPT = `
Vat het intakeverslag samen in 5-8 bullets.
Focus op: hoofdklacht, triggers, impact, context.
Schrijf neutraal, professioneel, Nederlands B1.
`;
const EXTRACT_PROMPT = `
Analyseer de intake en bepaal:
1. DSM-light categorie
2. Severity (laag, middel, hoog)
3. Rationale (2-3 zinnen)
`;
```
---
### Epic 5 – Profile & Treatment Plan
**Epic Doel:** Complete workflow van intake naar behandelplan - WEEK 3 COMPLETION.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E5.S1 | Problem profile UI | DSM cards, severity badges | ⏳ To Do | 3 |
| E5.S2 | Manual profile editing | Override AI suggestions | ⏳ To Do | 2 |
| E5.S3 | Treatment plan UI | Goals, interventions, timeline | ⏳ To Do | 3 |
| E5.S4 | Publish workflow | Concept → Published states | ⏳ To Do | 2 |
**DSM-Light Categories:**
- Stemming/Depressie
- Angst
- Gedrag/Impuls
- Middelen
- Cognitief
- Context/Psychosociaal
---
### Epic 6 – Onboarding System
**Epic Doel:** Modern onboarding experience - WEEK 4 UX FOCUS.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E6.S1 | Onboarding walkthrough | 5 steps, 3 minutes, react-joyride | ⏳ To Do | 5 |
| E6.S2 | Context tooltips | First-use hints, dismissable | ⏳ To Do | 3 |
| E6.S3 | Help icons system | On-demand help panels | ⏳ To Do | 2 |
| E6.S4 | Progress tracking | LocalStorage + Supabase sync | ⏳ To Do | 2 |
**Onboarding Features:**
- Welcome modal met skip optie
- Contextual tooltips bij eerste gebruik
- Help iconen op complexe features
- Progress tracking in localStorage
---
### Epic 7 – Performance & Launch
**Epic Doel:** Production ready met perfecte demo - WEEK 4 FINALE.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Story Points |
|----------|--------------|---------------------|--------|--------------|
| E7.S1 | Performance optimization | <3s loads, code splitting, lazy loading | ⏳ To Do | 3 |
| E7.S2 | Mobile responsive check | All screens perfect on mobile | ⏳ To Do | 2 |
| E7.S3 | Demo dry-run | Full 10-min demo zonder issues | ⏳ To Do | 2 |
| E7.S4 | Production deployment | Environment vars, monitoring setup | ⏳ To Do | 2 |
**Launch Checklist Week 4:**
- [ ] Performance audit (Lighthouse > 90)
- [ ] Mobile responsive check
- [ ] Demo script finalized
- [ ] LinkedIn announcement post ready
---
## 5. Kwaliteit & Testplan
🎯 **Doel:** MVP kwaliteit met focus op demo-stabiliteit.
### Test Strategy
| Type | Coverage | Priority | Tools |
|------|----------|----------|-------|
| Unit Tests | Business logic (80%) | Medium | Vitest |
| Integration | API endpoints | High | Supertest |
| E2E Tests | Happy paths | Critical | Playwright |
| Manual | Complete demo flow | Critical | Checklist |
### Demo Checklist
- [ ] Login werkt foutloos
- [ ] Client aanmaken < 10 seconden
- [ ] AI samenvatting < 5 seconden
- [ ] Behandelplan generatie < 10 seconden
- [ ] Alle UI elementen responsive
- [ ] Geen console errors
- [ ] Performance > 90 Lighthouse
---
## 6. Demo & Presentatieplan
🎯 **Doel:** Perfecte 10-minuten demo voor meerdere doelgroepen.
### Demo Scenario's
**A. GGZ Professional Demo (10 min)**
1. **Intro** (1 min): "Van 30 min documentatie naar 3 minuten"
2. **Live intake** (2 min): TipTap editor, real-time typing
3. **AI magic** (4 min): Samenvatting → Profiel → Plan
4. **ROI pitch** (2 min): Tijdsbesparing calculator
5. **Q&A** (1 min): "Hoe past dit in jullie workflow?"
**B. LinkedIn Audience Demo (5 min)**
1. **Problem** (30s): "Enterprise software is broken"
2. **Solution** (30s): "Software on Demand"
3. **Speed run** (2 min): Week 1-4 highlights
4. **Live product** (1 min): Quick tour
5. **CTA** (1 min): "Build YOUR software in 4 weeks"
**C. Tech Consultancy Pitch (15 min)**
1. **Market opportunity** (3 min): SaaS disruption
2. **Technical deep-dive** (5 min): Architecture choices
3. **Cost breakdown** (3 min): TCO analysis
4. **Case study** (3 min): EPD build metrics
5. **Partnership model** (1 min): White-label options
### Backup Plans
- **Plan A:** Live on aispeedrun.nl
- **Plan B:** Local development server
- **Plan C:** Recorded video (Loom)
- **Plan D:** Screenshots deck
---
## 6.5 Week 1: Marketing Website Implementation Guide
🎯 **Doel:** Marketing site live in 30 uur met directe LinkedIn content generatie.
### Day 1-2: Landing Page Foundation
**Focus:** Hero section + comparison table werkend
```typescript
// app/(marketing)/page.tsx
export default function LandingPage() {
return (
<main>
<HeroSection /> // "Software on Demand" pitch
<ComparisonTable /> // Traditional vs AI Speedrun
<ProblemSection /> // Why enterprise software fails
<SolutionSection /> // How we fix it
<LiveProofSection /> // Real-time metrics
<CTASection /> // Lead capture
</main>
)
}
```
**Key Components Day 1:**
- `HeroSection`: Animated counter, gradient background
- `ComparisonTable`: Responsive table met visual contrast
- `LiveMetricsDisplay`: Hardcoded initially, database later
**LinkedIn Post Day 1:**
"🚀 Building a €100k EPD for €200. Day 1: Marketing site live.
Traditional: 6 months planning. Us: 6 hours coding.
Follow along: [link]"
### Day 3-4: Build Log & Metrics
**Focus:** Transparantie dashboard + build tracking
```typescript
// Database schema for metrics
create table build_metrics (
week_number int unique,
development_hours decimal,
infrastructure_cost decimal,
ai_api_cost decimal,
features_completed text[],
blog_post_url text
);
// API endpoint
app/api/build-metrics/route.ts
```
**LinkedIn Post Day 3:**
"📊 Radical transparency: Every hour tracked, every euro counted.
Week 1: 12 hours, €35 costs so far.
Check our build log: [link]"
### Day 5-6: ROI Calculator & Lead Capture
**Focus:** Interactive calculator + contact form
```typescript
// components/marketing/ROICalculator.tsx
export function ROICalculator() {
const [hours, setHours] = useState(10)
const [rate, setRate] = useState(75)
const [users, setUsers] = useState(5)
const savings = hours * 4 * rate * users
const breakEven = 200 / (savings - 50)
return (
// Interactive sliders + real-time calculation
)
}
```
**LinkedIn Post Day 5:**
"💰 Calculate YOUR savings: Our ROI calculator is live.
Average result: 5400% ROI in year 1.
Try it: [link]"
### Day 7: Week 1 Retrospective
**Focus:** Polish + performance + retrospective post
**Checklist:**
- [ ] Lighthouse score > 90
- [ ] Mobile responsive perfect
- [ ] Form submissions working
- [ ] Analytics tracking active
- [ ] Week 1 metrics in database
**LinkedIn Post Day 7:**
"✅ Week 1 complete: Marketing site from 0 to production.
- 30 hours development
- €50 total costs
- 5 leads already
Next week: Building the actual EPD. Who's watching? 👀"
### Technical Deliverables Week 1:
1. **Routes Created:**
- `/` - Landing page
- `/build-log` - Timeline view
- `/demo` - Demo information
- `/how-it-works` - Explainer + ROI
- `/contact` - Lead form
2. **Database Tables:**
- `build_metrics` - Week tracking
- `leads` - Form submissions
3. **Components Library:**
- Marketing layout wrapper
- Metric cards
- Timeline entry
- ROI calculator
- Lead capture form
4. **Content Created:**
- 4 LinkedIn posts
- Landing page copy
- Demo video script
- Email templates
---
## 7. Risico's & Mitigatie
🎯 **Doel:** Proactief risicomanagement voor succesvolle launch.
| Risico | Kans | Impact | Mitigatie | Owner |
|--------|------|--------|-----------|-------|
| **TipTap complexiteit** | Hoog | Hoog | Start basic, incrementeel uitbreiden | Colin |
| **Claude API kosten** | Medium | Medium | Caching layer, response limits | Colin |
| **Vercel build limiet** | Laag | Hoog | Optimize bundle, lazy loading | Colin |
| **Demo timing (>10 min)** | Medium | Medium | Oefen 10x, timer visible | Colin |
| **LinkedIn algorithm change** | Laag | Medium | Multi-channel: Twitter/email | Colin |
| **Supabase RLS bugs** | Medium | Hoog | Extensive testing, fallback auth | Colin |
| **AI output inconsistent** | Hoog | Medium | Prompt versioning, examples | Colin |
| **Scope creep** | Hoog | High | Strict MVP focus, "Phase 2" list | Colin |
**Mitigatie Strategie:**
- Daily commits (ship small)
- Weekly LinkedIn updates (build momentum)
- Feature flags (disable broken features)
- Public repo (community help)
---
## 8. Evaluatie & Lessons Learned
🎯 **Doel:** Continue verbetering en kennisdeling.
### Week 1 Review (Te documenteren)
- [ ] Setup sneller/langzamer dan verwacht?
- [ ] Supabase vs Firebase trade-offs?
- [ ] shadcn/ui productivity boost?
### Week 2 Review
- [ ] TipTap learning curve?
- [ ] Client module complexiteit?
- [ ] UI/UX feedback van early testers?
### Week 3 Review
- [ ] Claude API betrouwbaarheid?
- [ ] Prompt engineering iterations?
- [ ] Performance bottlenecks?
### Week 4 Review
- [ ] Marketing site conversie?
- [ ] Demo feedback?
- [ ] Total hours vs estimate?
### Post-Launch Metrics
- **Development:** ___ uur totaal (target: 80-120)
- **Costs:** €___ totaal (target: <€200)
- **LinkedIn:** ___ followers gained
- **Leads:** ___ Software on Demand inquiries
- **Demo's:** ___ uitgevoerd
- **Media:** ___ mentions/articles
---
## 9. Referenties
🎯 **Doel:** Alle projectdocumentatie op één plek.
### Mission Control Documents
- **PRD v1.2** – Product Requirements (Business & Marketing)
- **FO v2.0** – Functioneel Ontwerp (Flows & Features)
- **TO v1.2** – Technisch Ontwerp (Architecture & Database)
- **UX Stylesheet** – Design System & Components
- **API Access** – Endpoints & Authentication
### Project Resources
- **Repository:** `github.com/colinvanderheijden/aispeedrun`
- **Production:** `https://aispeedrun.nl`
- **Staging:** `https://aispeedrun-staging.vercel.app`
- **Supabase:** `app.supabase.com/project/dqugbrpwtisgyxscpefg`
- **LinkedIn Series:** `linkedin.com/in/colinvanderheijden`
### External Documentation
- [Next.js 15 Docs](https://nextjs.org/docs)
- [Supabase Docs](https://supabase.com/docs)
- [Claude API](https://docs.anthropic.com)
- [TipTap Editor](https://tiptap.dev)
- [Vercel Docs](https://vercel.com/docs)
---
## 10. Glossary & Abbreviations
| Term | Betekenis |
|------|-----------|
| **EPD** | Elektronisch Patiënten Dossier |
| **ECD** | Elektronisch Cliënten Dossier |
| **DSM** | Diagnostic and Statistical Manual |
| **GGZ** | Geestelijke Gezondheidszorg |
| **SMART** | Specifiek, Meetbaar, Acceptabel, Realistisch, Tijdgebonden |
| **RLS** | Row Level Security (Supabase) |
| **ISR** | Incremental Static Regeneration |
| **CTA** | Call To Action |
| **TCO** | Total Cost of Ownership |
| **MVP** | Minimum Viable Product |
| **B1** | Taal niveau (intermediate Dutch) |
---
## 11. Voortgang Samenvatting
### Huidige Status (15-11-2024)
- **Algemeen:** Project geïnitieerd, 10% compleet
- **Epic 0 (Project Setup):** 60% compleet - Basis infrastructure klaar, migrations nog leeg
- **Epic 1-7:** 0% compleet - Nog niet begonnen
### Voltooide Items
- ✅ Next.js 15 project initialized met App Router
- ✅ Tailwind CSS v3.4 + PostCSS configured
- ✅ Supabase project aangemaakt (dqugbrpwtisgyxscpefg)
- ✅ Supabase clients (server & browser) aangemaakt
- ✅ Environment variables setup
- ✅ GitHub repo initialized
- ✅ Vercel connected
### Lopende Werk
- 🔄 shadcn/ui setup completen
- 🔄 Database schema finaliseren
### Volgende Prioriteiten (Week 1)
1. ⏳ Standaard Next.js homepage vervangen
2. ⏳ Marketing routes setup
3. ⏳ Landing page hero section bouwen
4. ⏳ Database schema implementeren
5. ⏳ Supabase tables aanmaken met migrations
---
**Versiehistorie:**
| Versie | Datum | Auteur | Wijziging |
|--------|-------|--------|-----------|
| v1.0 | 15-11-2024 | Colin | Initiële versie op basis van PRD v1.2 + FO v2.0 + TO v1.2 |
| v1.1 | 15-11-2024 | Colin | Actualisering met huidige implementatiestatus en voortgang |

608
docs/specs/bouwplan.md
View File

@@ -1,608 +0,0 @@
# 🚀 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
- **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
---
## 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<br>✅ TypeScript configuratie<br>✅ Folder structuur volgens conventions<br>✅ 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<br>✅ tailwind.config.ts met custom theme<br>✅ lucide-react icons beschikbaar<br>✅ 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<br>✅ Connection string in .env.local<br>✅ Supabase client configured<br>✅ 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<br>✅ .env.example voor team<br>✅ Vercel environment variables<br>✅ Validation bij startup | 2 | Not Started | EP00-ST03 |
| EP00-ST05 | **Als developer wil ik Git repository opzetten zodat code versiebeheerd is** | ✅ GitHub repository<br>✅ .gitignore configuratie<br>✅ Branch protection rules<br>✅ 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<br>✅ Correct data types (UUID, JSONB, etc.)<br>✅ Foreign key constraints<br>✅ 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<br>✅ Policies voor authenticated users<br>✅ Test queries werken correct<br>✅ 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<br>✅ Initial migration script<br>✅ Rollback mogelijk<br>✅ 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<br>✅ Intake notes per cliënt<br>✅ Minimaal 1 compleet dossier<br>✅ 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_at
- `intake_notes`: id, client_id (FK), title, tag (CHECK), content_json (JSONB), content_text
- `problem_profiles`: id, client_id (FK), category (CHECK), severity (CHECK), remarks
- `treatment_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):**
```sql
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<br>✅ Email/password of magic link<br>✅ Session management<br>✅ 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<br>✅ Redirect naar login indien nodig<br>✅ Loading states tijdens auth<br>✅ 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<br>✅ Session cleanup<br>✅ Redirect naar login<br>✅ 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<br>✅ Zoekbalk voor naam/ID<br>✅ Pagination bij >20 items<br>✅ 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<br>✅ Velden: Voornaam, Achternaam, Geboortedatum<br>✅ Auto-generated UUID<br>✅ Validatie met Zod<br>✅ 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]<br>✅ Breadcrumb navigatie<br>✅ Tabs: Overzicht, Intakes, Profiel, Plan<br>✅ 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<br>✅ Form validation<br>✅ Optimistic updates<br>✅ 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<br>✅ Actions: setSelectedClient, updateClient<br>✅ Persistent state waar nodig<br>✅ TypeScript types | 3 | Not Started | EP00-ST01 |
**Technische implementatie details:**
- **API endpoints:**
- `POST /api/clients` - Create
- `GET /api/clients` - List with search
- `GET /api/clients/[id]` - Get single
- `PATCH /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<br>✅ Toolbar: Bold, Italic, Lists, etc.<br>✅ Placeholder text<br>✅ 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<br>✅ Store in intake_notes table<br>✅ Auto-save indicator<br>✅ 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<br>✅ Tag badge in lijst<br>✅ Filter op tag mogelijk<br>✅ 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<br>✅ Sorteer op datum<br>✅ Click to view/edit<br>✅ 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<br>✅ Store in content_text field<br>✅ Full-text search mogelijk<br>✅ 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)<br>✅ Collapsible/expandable<br>✅ Preview area voor AI output<br>✅ Action buttons: Invoegen/Annuleren | 8 | Not Started | EP04-ST01 |
**Technische implementatie details:**
- **TipTap setup:**
```typescript
import StarterKit from '@tiptap/starter-kit'
const editor = useEditor({
extensions: [StarterKit],
content: prosemirrorJSON
})
```
- **Storage:** content_json (JSONB) + content_text (TEXT)
- **API:** `/api/intakes` endpoints
---
### 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)<br>✅ Beschrijving per categorie<br>✅ Validation required field<br>✅ 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<br>✅ Kleur-coded badges<br>✅ Hover tooltips met uitleg<br>✅ Required validation | 3 | Not Started | EP05-ST01 |
| EP05-ST03 | **Als behandelaar wil ik opmerkingen toevoegen zodat ik context kan geven** | ✅ Textarea voor vrije tekst<br>✅ Character limit (500)<br>✅ Optional field<br>✅ 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"<br>✅ Suggestie paneel rechts<br>✅ Shows: categorie, severity, rationale<br>✅ Accepteer/Negeer buttons<br>✅ 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"<br>✅ Uses intake + profile als context<br>✅ Genereert 4 secties<br>✅ 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)<br>✅ Inline editing mogelijk<br>✅ Add/remove doelen<br>✅ Regenerate per doel optie | 8 | Not Started | EP06-ST01 |
| EP06-ST03 | **Als behandelaar wil ik interventies specificeren zodat behandeling duidelijk is** | ✅ Interventie lijst<br>✅ Type + frequentie + duur<br>✅ Voorgestelde interventies<br>✅ Custom toevoegen | 5 | Not Started | EP06-ST01 |
| EP06-ST04 | **Als behandelaar wil ik meetmomenten plannen zodat voortgang gemeten wordt** | ✅ Timeline met meetmomenten<br>✅ Na X sessies format<br>✅ Evaluatie types<br>✅ Calendar integration (stretch) | 5 | Not Started | EP06-ST01 |
| EP06-ST05 | **Als behandelaar wil ik plan publiceren zodat het definitief wordt** | ✅ Concept vs Gepubliceerd status<br>✅ Versioning (v1, v2, etc.)<br>✅ Published timestamp<br>✅ Read-only na publicatie<br>✅ Nieuwe versie mogelijk | 6 | Not Started | EP06-ST02 |
**Technische implementatie details:**
- **Plan structuur (JSONB):**
```typescript
{
doelen: string[],
interventies: string[],
frequentie: string,
meetmomenten: string[]
}
```
- **Status flow:** concept → gepubliceerd → nieuwe versie
- **API:** `/api/treatment-plan` endpoints
---
### 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<br>✅ Server-side only implementation<br>✅ Error handling<br>✅ 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<br>✅ 5-8 bullet points output<br>✅ Nederlands, klinisch neutraal<br>✅ 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<br>✅ Returns: category, severity, rationale<br>✅ Source sentences identificatie<br>✅ 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<br>✅ SMART doelen formulering<br>✅ Evidence-based interventies<br>✅ 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<br>✅ Track: prompt, response, duration<br>✅ Cost calculation<br>✅ 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)<br>✅ Responsive grid layout<br>✅ Data uit verschillende tables<br>✅ Click naar detail | 5 | Not Started | EP03-ST03 |
| EP08-ST02 | **Als behandelaar wil ik tegels configureren zodat ik kan personaliseren** | ✅ Settings icon → modal<br>✅ Checkboxes per tegel<br>✅ LocalStorage persistence<br>✅ Instant preview | 3 | Not Started | EP08-ST01 |
| EP08-ST03 | **Als gebruiker wil ik breadcrumb navigatie zodat ik weet waar ik ben** | ✅ Breadcrumb in header<br>✅ Clickable segments<br>✅ Current page highlight<br>✅ Responsive truncation | 2 | Not Started | EP03-ST03 |
| EP08-ST04 | **Als gebruiker wil ik sidebar navigatie zodat ik tussen modules kan wisselen** | ✅ Vertical navigation<br>✅ Active state indicator<br>✅ Icons + labels<br>✅ 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<br>✅ Consistent met UX stylesheet<br>✅ TypeScript props<br>✅ Storybook (optional) | 5 | Not Started | EP00-ST02 |
| EP09-ST02 | **Als developer wil ik toast notificaties implementeren zodat feedback duidelijk is** | ✅ Success/Error/Info/Warning<br>✅ Auto-dismiss na 5 sec<br>✅ Queue multiple toasts<br>✅ 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<br>✅ Spinners voor buttons<br>✅ Progress bars voor AI<br>✅ Consistent animation | 3 | Not Started | EP09-ST01 |
| EP09-ST04 | **Als developer wil ik formulier componenten maken zodat input consistent is** | ✅ Form wrapper met validation<br>✅ Error messages styling<br>✅ Required field indicators<br>✅ 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<br>✅ System preference detect<br>✅ Persist preference<br>✅ 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<br>✅ Utils & services tests<br>✅ 80% coverage /lib folder<br>✅ CI integration | 5 | Not Started | All features |
| EP10-ST02 | **Als developer wil ik E2E tests schrijven zodat kritieke flows werken** | ✅ Playwright setup<br>✅ Happy path: intake → profile → plan<br>✅ Error scenarios<br>✅ Cross-browser | 5 | Not Started | All features |
| EP10-ST03 | **Als team wil ik smoke tests uitvoeren zodat demo stabiel is** | ✅ Manual test checklist<br>✅ All features tested<br>✅ Performance acceptable<br>✅ No console errors | 2 | Not Started | All features |
| EP10-ST04 | **Als developer wil ik accessibility testen zodat app toegankelijk is** | ✅ Keyboard navigation<br>✅ Screen reader support<br>✅ WCAG AA contrast<br>✅ 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<br>✅ EU region (Amsterdam)<br>✅ Environment variables<br>✅ 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<br>✅ Realistic intake texts<br>✅ Pre-generated AI responses<br>✅ Backup data ready | 5 | Not Started | EP01-ST04 |
| EP11-ST03 | **Als presenter wil ik demo script hebben zodat presentatie gestructureerd is** | ✅ 10-minute script<br>✅ Key talking points<br>✅ Backup scenarios<br>✅ Q&A anticipatie | 3 | Not Started | All features |
| EP11-ST04 | **Als team wil ik dry-run doen zodat demo succesvol verloopt** | ✅ Complete run-through<br>✅ Timing verified (< 10 min)<br>✅ Technical issues fixed<br>✅ 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<br>✅ Create/edit appointments<br>✅ Link to client<br>✅ Dashboard widget | 8 | Not Started | EP08-ST01 |
| EP12-ST02 | **Als behandelaar wil ik PDF export zodat ik rapporten kan delen** | ✅ Export button<br>✅ Professional layout<br>✅ All sections included<br>✅ 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<br>✅ B1 niveau output<br>✅ Preserve medical accuracy<br>✅ 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
1. **New Client Flow**
- Create client → Add intake → Generate summary → Extract problems → Create plan
- Expected time: <2 minutes
- All data persisted correctly
2. **AI Integration Flow**
- Large intake text (2000+ words) → All AI features work
- Response time <5 seconds per call
- Graceful degradation if AI fails
3. **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
1. AI vermindert administratieve last met 50%
2. Consistente kwaliteit van documentatie
3. Meer tijd voor cliëntcontact
4. Evidence-based suggesties
5. 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](./prd-mini-ecd.md) - Business requirements en scope
- **FO** — [Functioneel Ontwerp](./fo-mini-ecd.md) - User flows en functionele specificaties
- **TO** — [Technisch Ontwerp](./to-mini-ecd.md) - Architectuur en database design
- **UX/UI** — [Stylesheet](./ux-stylesheet.md) - Kleuren en design system
- **API** — [API Access Document](./api-acces-mini-ecd.md) - 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
```typescript
// 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
```typescript
// 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
```typescript
// 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 |

1109
docs/specs/design-specs-manifesto-website.md Normal file
View File

File diff suppressed because it is too large Load Diff

1119
docs/specs/fo-mini-ecd-v2.md Normal file
View File

File diff suppressed because it is too large Load Diff

448
docs/specs/prd-mini-ecd-v1.2.md Normal file
View File

@@ -0,0 +1,448 @@
# 📄 Product Requirements Document (PRD)
**Product:** Mini-ECD Prototype
**Doel:** Demo tijdens AI-inspiratiesessie bij PinkRoccade GGZ + Live Build Serie
**Versie:** 1.2 (MVP met DSM-light simulatie + Onboarding + Marketing Site)
**Datum:** nov 2025
---
## 1. Doelstelling
**Primair doel:** Bewijzen dat **Software on Demand** de toekomst is door live te demonstreren hoe één developer met AI-tooling een werkend EPD bouwt in 4 weken voor €50/maand.
**Het contrast:**
- **Traditioneel:** Team van 5+ developers, €100k+ budget, 2 jaar implementatie
- **Software on Demand:** 1 developer + AI tools, €50/mnd, 4 weken
**De build als bewijs:** Via een **"Build in Public" LinkedIn-serie** tonen we elke week concrete voortgang. Het mini-ECD (intake → probleemclassificatie → behandelplan) dient als herkenbaar voorbeeld uit de GGZ-sector, maar de boodschap is universeel: **custom software is nu voor iedereen betaalbaar en snel leverbaar**.
**Secundair doel:** Positioneren van ikbenlit.nl als expert in Software on Demand en AI-gedreven development.
---
## 2. Doelgroep
**Primaire doelgroep (LinkedIn Build Serie):**
* **Ondernemers & MKB** → bewijzen dat custom software betaalbaar is
* **IT-managers & CTO's** → alternatief voor dure development teams
* **Startup founders** → snel MVP bouwen zonder €100k+ investment
* **Developers** → leren hoe AI-tooling development versnelt
**Secundaire doelgroep (EPD use case):**
* **GGZ-professionals** → herkenbaar voorbeeld, potentiële early adopters
* **Consultants** → inzicht in mogelijkheden voor hun klanten
**Tertaire doelgroep:**
* **Investeerders** → tonen van nieuwe development economics
* **Potentiële klanten ikbenlit.nl** → Software on Demand consultancy
---
## 3. Kernfunctionaliteiten (MVP)
### 3.1 EPD Core Features
1. **Cliënt inschrijven**
* Velden: Voornaam, Achternaam, Geboortedatum.
* Automatische ClientID.
* Verschijnt in Cliëntenlijst.
2. **Overzicht (Cliëntdashboard)**
* Tegels:
* Basisgegevens: ClientID, Naam, Geboortedatum.
* Intake: verkorte weergave laatste intakeverslag.
* Probleemprofiel: DSM-light categorie + severity-badge.
* Behandelplan: doelen in bullets + status.
* Afspraken: laatste afspraak + eerstvolgende 3 afspraken.
* Configuratie: gebruiker kan via een instellingen-knop kiezen welke tegels zichtbaar zijn.
3. **Intake-verslag maken**
* Rich text editor (TipTap).
* Tags: Intake / Evaluatie / Plan.
* Opslaan & koppelen aan cliënt.
4. **Probleemprofiel (DSM-light simulatie)**
* Dropdown categorieën (simulatie DSM-5 hoofdcategorieën):
* Stemming / Depressieve klachten
* Angststoornissen
* Gedrags- en impulsstoornissen
* Middelengebruik / Verslaving
* Cognitieve stoornissen
* Context / Psychosociaal
* Severity: Laag / Middel / Hoog.
* Vrij veld: opmerkingen.
* **AI-suggestie:** intake analyseren → voorstel categorie + severity.
5. **AI-ondersteuning bij verslag**
* Knoppen:
* *Samenvatten* (in bullets).
* *Verbeter leesbaarheid* (B1-niveau).
* *Extract problemen* (AI vult categorie/severity suggestie in).
6. **AI-voorstel behandelplan**
* Genereert secties: Doelen, Interventies, Frequentie/Duur, Meetmomenten.
* Gebruiker kan bewerken of accepteren.
7. **Mini-agenda (optioneel, stretch)**
* Afspraak plannen gekoppeld aan cliënt.
8. **Rapport export (stretch)**
* PDF: cliëntgegevens + intake + probleemprofiel + behandelplan.
### 3.2 Onboarding & UX Guidance (NIEUW)
**Doel:** Onderscheiden van legacy EPD's met slechte onboarding door slimme, context-aware begeleiding.
1. **Eenmalige Walkthrough**
* Start automatisch bij eerste login
* Skipbaar + opnieuw starten via user menu
* Stappen (3 minuten totaal):
1. Welkom + AI-waarde uitleg (15 sec)
2. Cliënt aanmaken (live demo, 45 sec)
3. Intake schrijven + AI samenvatten (60 sec)
4. Dashboard tonen (30 sec)
5. "Je bent klaar!" + link naar docs
2. **Context-aware Tooltips**
* Verschijnen automatisch bij eerste gebruik van complexe features
* Dismissable met "Toon niet meer" optie
* Voorbeelden:
* Eerste keer AI-knop → "AI kan je intake samenvatten in 5 seconden"
* Eerste keer DSM-dropdown → "Laat AI een suggestie doen op basis van intake"
* Eerste keer publiceren → "Dit maakt het plan definitief en verhoogt versienummer"
3. **Help-iconen op vaste plekken**
* Klein (?) icoontje naast complexe features
* Hover = korte tooltip, klik = uitgebreidere uitleg
* Locaties:
* DSM-light categorieën uitleg
* SMART doelen criteria
* Severity-bepaling richtlijnen
* AI-features (waarom/wanneer gebruiken)
**Technische basis:**
* State tracking in localStorage: `{ onboardingCompleted: boolean, tooltipsSeen: string[] }`
* Centraal config bestand voor alle guidance content
* Herbruikbare componenten: `<OnboardingProvider>`, `<Tooltip id="">`, `<HelpIcon topic="">`
* Library: react-joyride voor walkthrough
**Voordelen voor demo:**
* Direct contrast met "200-pagina PDF handleiding" van legacy systemen
* Zichtbaar verschil in gebruikerservaring
* Laat zien hoe moderne UX werkt
### 3.3 Marketing Website (Build in Public Hub)
**Doel:** Centrale hub voor LinkedIn Build Serie + lead generation voor Software on Demand consultancy.
**Structuur binnen zelfde Next.js app:**
1. **Landing Page** (`/`)
* **Hero Section:**
- "Software on Demand: Van idee naar werkend product in weken, niet maanden"
- Live counter: "Week X van 4 | Y uur development | €Z kosten"
- Comparison table: "Traditioneel vs. Software on Demand"
* **The Problem:**
- Enterprise software: €100k+ budgets, 2 jaar implementatie
- Vendor lock-in, rigide roadmaps, verouderde tech stacks
- Kleine bedrijven kunnen custom software niet betalen
* **The Solution:**
- AI-assisted development: 10x sneller, 95% goedkoper
- One-developer teams met AI tools = enterprise quality
- Pay-as-you-grow: €50/mnd start, scale when needed
* **Live Proof (EPD Example):**
- "Zie hoe we een €100k EPD bouwen voor €50/mnd"
- Real-time progress updates
- Transparante cost tracking
* **Stack Showcase:**
- Next.js + Claude AI + Supabase = modern foundation
- "Same tools big tech uses, now for small business"
* **CTA's:**
- Primary: "Volg de build op LinkedIn"
- Secondary: "Bespreek jouw Software on Demand project"
- Tertiary: "Probeer live demo"
2. **Build Log** (`/build-log`)
* **Week-by-week breakdown:**
- Week 1: "Foundation - 8 uur, €0 kosten"
- Week 2: "AI Integration - 12 uur, €25 API kosten"
- Week 3: "Core Features - 15 uur, €35 API kosten"
- Week 4: "Polish & Launch - 10 uur, €15 kosten"
* **Per entry:**
- What we built (features delivered)
- How we built it (tools, AI prompts, decisions)
- Time spent vs. traditional estimate
- Code snippets (educational value)
- Challenges & solutions (authenticity)
- LinkedIn post embedded
* **Running totals:**
- Total development hours
- Total costs (infrastructure + AI)
- Features completed
- Traditional estimate comparison
3. **Live Demo** (`/demo`)
* "Try it yourself" pitch
* Demo credentials (read-only access)
* Video walkthrough (2 min)
* Feature comparison with enterprise EPD's
* "This took 4 weeks. Traditional build: 24 months"
4. **Software on Demand Explained** (`/how-it-works`)
* What is Software on Demand
* When it makes sense (vs. SaaS, vs. traditional custom)
* Pricing model transparency
* Case study: EPD build breakdown
* ROI calculator (interactive)
5. **Request Your Build** (`/contact`)
* Lead capture form
* "Describe your software need in 3 sentences"
* Estimated timeline + cost preview
* Calendar booking for intake call
* Trust signals: LinkedIn recommendations, previous builds
**Content Strategy:**
* Wekelijkse LinkedIn post → immediate blog entry
* Radical transparency: share costs, time, failures
* Educational focus: teach while you build
* Open-source key components (drive traffic + credibility)
**Conversion Funnel:**
```
LinkedIn Post → Landing Page → Build Log → "Request Your Build"
↓
Live Demo → Conviction → Contact
```
**Metrics Tracking:**
- Visitor source (LinkedIn, organic, direct)
- Time on build-log pages
- Demo usage (how many try it)
- Form submissions
- LinkedIn follower growth correlation
---
## 4. Build & Demo Flows
**Wekelijkse LinkedIn Build Flow:**
**Week 1: Foundation & First Intake**
1. Setup Next.js + Supabase + Claude API
2. Database schema + eerste cliënt aanmaken
3. Intake editor met TipTap werkend
4. **LinkedIn post:** "Van 0 naar werkende intake in 8 uur"
**Week 2: AI Integration**
1. AI samenvatting implementeren
2. Probleem extractie met source highlighting
3. DSM-light classificatie
4. **LinkedIn post:** "AI genereert samenvatting in 3 seconden vs. 30 minuten handmatig"
**Week 3: Treatment Planning**
1. Behandelplan generatie
2. SMART doelen formulering
3. Versioning & publicatie flow
4. **LinkedIn post:** "Complete behandelplan in 10 minuten vs. 2 uur traditioneel"
**Week 4: Polish & Launch**
1. Onboarding system
2. Dashboard met configureerbare tegels
3. Performance optimalisatie
4. **LinkedIn post:** "Van idee naar werkend product: 4 weken, €200 totaal"
**Live Demo Flow (voor geïnteresseerden):**
1. Login met demo credentials
2. Onboarding walkthrough (3 min)
3. Nieuwe cliënt → Intake → AI samenvatten (2 min)
4. Probleemprofiel met AI-suggestie (2 min)
5. Behandelplan genereren & publiceren (2 min)
6. Dashboard tonen met alle data (1 min)
**Totaal: 10 minuten hands-on**
---
## 5. Niet in scope
* Autorisaties en rollenbeheer (demo auth only).
* Externe koppelingen (Teams, TOPdesk, etc.).
* Volledige DSM-5 implementatie (alleen simulatie).
* Dit prototype is geen gevalideerd medisch hulpmiddel en dient enkel voor demonstratiedoeleinden.
* Marketing website SEO optimalisatie (fase 1).
* Analytics/tracking op marketing site (tenzij simpel via Vercel Analytics).
---
## 6. Technische randvoorwaarden
* **Framework:** Next.js (App Router) - single repo voor marketing + EPD
* **Styling:** Tailwind CSS
* **Database:** Supabase (PostgreSQL)
* **AI:** Claude AI (Anthropic)
* **Hosting:** Vercel (EU region)
* **Onboarding:** react-joyride + custom tooltip system
* **Marketing:** Dezelfde Next.js app, `/marketing` routes
**Routing structuur:**
```
/app
/(marketing)
/page.tsx → Landing
/build-log/page.tsx → Timeline
/demo/page.tsx → Demo info
/(app)
/clients/... → Protected EPD
```
---
## 7. Succescriteria
**Bewijs van Software on Demand concept:**
* ✅ Werkend EPD gebouwd in max 4 weken part-time (80-120 uur totaal)
* ✅ Totale kosten ≤ €200 (infrastructure + AI API)
* ✅ Maandelijkse run-kosten ≤ €50
* ✅ Feature-pariteit met basis EPD flow (intake → plan)
* ✅ Performance vergelijkbaar met enterprise EPD's (<3s loads, <5s AI)
**LinkedIn Build Serie impact:**
* 🎯 Minimaal 250 LinkedIn volgers gedurende build
* 🎯 Gemiddeld 100+ likes per wekelijkse post
* 🎯 Minimaal 10 comments/post met inhoudelijke vragen
* 🎯 5+ shares per post (viral potential)
* 🎯 3+ media vermeldingen of podcast invites
**Business impact (ikbenlit.nl):**
* 💰 Minimaal 10 leads voor Software on Demand consultancy
* 💰 2+ contracten binnen 2 maanden na launch
* 💰 Case study gebruikt in minimaal 3 pitches
* 💰 Landing page conversie >5% (visitor → lead)
**Technische kwaliteit:**
* ⚙️ 0 critical bugs tijdens live demo's
* ⚙️ >80% code coverage op business logic
* ⚙️ Lighthouse score >90 op marketing site
* ⚙️ Mobile responsive op alle schermen
* ⚙️ WCAG AA toegankelijkheid
**Proof points voor messaging:**
* 📊 "X% sneller dan traditionele development"
* 📊 "Y% goedkoper dan enterprise EPD"
* 📊 "Z uur totale development tijd vs. W maanden traditioneel"
* 📊 "Maandelijkse kosten €50 vs. €X.000 enterprise licentie"
---
## 8. Risico's
**Build & Technical:**
* **Scope creep:** Blijf bij MVP features, geen "nice to have" tijdens 4 weken
* **AI-output inconsistent:** Prompt versioning + fallback strategies
* **Time underestimation:** Buffer 20% extra voor onverwachte issues
* **Claude API costs exceed budget:** Implement caching + rate limiting
**Marketing & Messaging:**
* **LinkedIn engagement laag:** Backup content strategie, paid promotion indien nodig
* **Verkeerde doelgroep bereikt:** A/B test messaging, refine targeting
* **Sceptici: "AI code is slechte code":** Show test coverage, performance metrics, live demo
* **Traditional developers defensive:** Frame als evolution, not replacement
**Business Impact:**
* **Geen leads binnen 2 weken:** Adjust CTA's, offer free consultation
* **Leads maar geen conversies:** Re-evaluate pricing/positioning
* **Concurrent bouwt sneller/goedkoper:** Emphasize quality + domain expertise
**Privacy & Compliance:**
* **Fictieve data lijkt te echt:** Disclaimer op elke pagina, obvious fake names
* **GDPR issues met LinkedIn tracking:** Comply with cookie consent, minimal tracking
**Mitigatie:**
- Weekly retrospective: wat werkt, wat niet
- Transparent over setbacks in build-log (authenticity)
- Pre-written backup posts if week goes badly
- Video demo backup if live demo fails
---
## 9. Roadmap (post-demo)
**EPD uitbreidingen:**
* Autorisaties en auditlog.
* Trendanalyse (stemming/voortgang).
* Integratie met PinkRoccade modules.
* Compliance en security uitbreiden.
**Marketing site:**
* SEO optimalisatie voor zoekwoorden
* Lead magnet (gratis "AI in Healthcare" whitepaper)
* Case study pagina met ROI berekening
* Video testimonials van demo deelnemers
* Newsletter signup voor wekelijkse updates
**LinkedIn serie vervolg:**
* Post-launch: "Wat we leerden" reflectie
* Cost breakdown transparantie
* Open-source delen van componenten
* Follow-up serie: "Van prototype naar productie"
---
## 10. Meetbare doelen
| Categorie | Metric | Target | Meetmoment |
|-----------|--------|--------|------------|
| **Build Efficiency** | Total development hours | ≤120h (part-time 4 wks) | Week 4 |
| **Build Efficiency** | Cost per feature | <€50/feature | Week 4 |
| **Build Efficiency** | Traditional estimate | >500h (proof of 4x speed) | Week 4 |
| **Cost Proof** | Total build cost | ≤€200 | Week 4 |
| **Cost Proof** | Monthly run cost | ≤€50 | Month 1-3 |
| **Cost Proof** | Cost vs enterprise EPD | >99% cheaper | Week 4 |
| **LinkedIn Impact** | Followers gained | 250+ | Week 4 |
| **LinkedIn Impact** | Avg post engagement | 100+ likes, 10+ comments | Per week |
| **LinkedIn Impact** | Share rate | 5+ shares/post | Per week |
| **LinkedIn Impact** | Profile views | 500+/week | Week 2-4 |
| **Lead Generation** | Software on Demand inquiries | 10+ | Within 2 weeks post-launch |
| **Lead Generation** | Qualified leads | 5+ | Within 4 weeks |
| **Lead Generation** | Conversion to contract | 2+ | Within 8 weeks |
| **Lead Generation** | Landing page conversion | >5% | Continuous |
| **Technical Quality** | Lighthouse performance | >90 | Week 4 |
| **Technical Quality** | Code coverage | >80% business logic | Week 4 |
| **Technical Quality** | Critical bugs | 0 | Week 4 |
| **Technical Quality** | API response time | <5s (AI), <1s (CRUD) | Week 4 |
| **Proof Validation** | Live demo success rate | >95% | Post-launch |
| **Proof Validation** | User onboarding completion | >70% | Month 1 |
| **Media Attention** | Podcast/interview invites | 3+ | Within 8 weeks |
| **Media Attention** | Blog/article mentions | 5+ | Within 12 weeks |
---
## 11. Stakeholders & Communicatie
| Stakeholder | Interesse | Communicatie | Priority |
|-------------|-----------|--------------|----------|
| **LinkedIn netwerk** | Software on Demand proof | Wekelijkse posts + live updates | Critical |
| **Potentiële klanten** | Custom software affordability | Landing page + demo + case study | Critical |
| **ikbenlit.nl prospects** | AI consultancy services | Website + LinkedIn + sales funnel | High |
| **Developers** | AI-assisted development learning | Build-log technical details + code snippets | Medium |
| **GGZ professionals** | EPD use case validation | Optional feedback, niet primary focus | Low |
| **Media/Podcasts** | Thought leadership | Press kit + interview availability | Medium |
| **Traditional dev agencies** | Market disruption awareness | Indirect via content, not confrontational | Low |
---
## Wijzigingslog
| Versie | Datum | Wijzigingen |
|--------|-------|-------------|
| 1.0 | aug 2025 | Initiële versie MVP |
| 1.1 | aug 2025 | DSM-light simulatie toegevoegd |
| 1.2 | nov 2025 | Onboarding system + Marketing website geïntegreerd, LinkedIn Build Serie strategie toegevoegd |

1331
docs/specs/to-mini-ecd-v1_2.md Normal file
View File

File diff suppressed because it is too large Load Diff

756
docs/templates/aispeedrun-manifesto.html vendored Normal file
View File

@@ -0,0 +1,756 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Speedrun - Het Software Manifesto</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Playfair+Display:wght@400;700;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
/* Core colors from UX stylesheet */
--primary-blue: #3B82F6;
--primary-blue-hover: #2563EB;
--green-accent: #16A34A;
--yellow-accent: #F59E0B;
--text-primary: #0F172A;
--text-secondary: #475569;
--background: #F8FAFC;
--surface: #FFFFFF;
--border-color: #E2E8F0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection {
background: var(--yellow-accent);
color: white;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-primary);
background: white;
overflow-x: hidden;
line-height: 1.6;
}
/* Manifesto Typography */
.manifesto-statement {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(3rem, 8vw, 7rem);
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.manifesto-subtitle {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2.5rem);
line-height: 1.3;
font-style: italic;
}
.mono-accent {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
background: var(--yellow-accent);
color: white;
padding: 0.2em 0.4em;
white-space: nowrap;
}
/* Navigation - Minimal */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 2rem 3rem;
background: transparent;
mix-blend-mode: difference;
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1600px;
margin: 0 auto;
}
.logo {
font-weight: 900;
font-size: 1.2rem;
color: white;
text-decoration: none;
letter-spacing: -0.02em;
}
.nav-action {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-action a {
color: white;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Opening Statement */
.opening {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--text-primary);
color: white;
position: relative;
overflow: hidden;
}
.opening::before {
content: '2024';
position: absolute;
top: -10%;
right: -5%;
font-size: 30rem;
font-weight: 900;
opacity: 0.03;
letter-spacing: -0.05em;
}
.opening-content {
max-width: 1200px;
padding: 4rem 2rem;
z-index: 1;
position: relative;
}
.opening .manifesto-statement {
margin-bottom: 2rem;
}
.opening .manifesto-subtitle {
opacity: 0.7;
max-width: 600px;
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.5;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
/* The Problem Statement */
.problem {
padding: 8rem 2rem;
background: white;
}
.problem-content {
max-width: 1400px;
margin: 0 auto;
}
.problem-header {
margin-bottom: 6rem;
}
.problem-header h2 {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 900;
line-height: 1;
margin-bottom: 2rem;
letter-spacing: -0.03em;
}
.highlight-yellow {
background: linear-gradient(180deg, transparent 60%, var(--yellow-accent) 60%);
padding: 0 0.2em;
}
.problem-grid {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 4rem;
margin-bottom: 6rem;
position: relative;
}
.divider-vertical {
background: var(--border-color);
width: 1px;
height: 100%;
}
.problem-column h3 {
font-size: 1.8rem;
margin-bottom: 2rem;
font-weight: 700;
}
.problem-list {
list-style: none;
font-size: 1.1rem;
line-height: 2;
}
.problem-list li {
padding-left: 2rem;
position: relative;
margin-bottom: 0.5rem;
}
.problem-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--yellow-accent);
font-weight: 700;
}
/* Cost Statement */
.cost-statement {
background: var(--text-primary);
color: white;
padding: 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cost-statement::after {
content: '€€€';
position: absolute;
bottom: -20%;
right: -5%;
font-size: 20rem;
opacity: 0.05;
font-weight: 900;
}
.cost-amount {
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 900;
letter-spacing: -0.04em;
margin-bottom: 1rem;
}
/* Personal Story */
.story {
padding: 8rem 2rem;
background: var(--background);
}
.story-content {
max-width: 900px;
margin: 0 auto;
font-size: 1.3rem;
line-height: 1.8;
}
.story-content p {
margin-bottom: 2rem;
}
.story-highlight {
font-size: 2rem;
font-weight: 700;
color: var(--green-accent);
margin: 3rem 0;
text-align: center;
}
/* The Solution */
.solution {
padding: 8rem 2rem;
background: white;
}
.solution-header {
text-align: center;
margin-bottom: 6rem;
}
.solution-header h2 {
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 900;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-blue), var(--green-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.solution-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}
.solution-card {
padding: 2rem;
background: white;
border: 2px solid var(--border-color);
position: relative;
transition: all 0.3s;
}
.solution-card:hover {
border-color: var(--primary-blue);
transform: translateY(-5px);
}
.solution-number {
position: absolute;
top: -20px;
left: 20px;
background: var(--yellow-accent);
color: white;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.2rem;
}
/* Timeline */
.timeline {
padding: 8rem 2rem;
background: linear-gradient(135deg, var(--text-primary) 0%, #1e3a5f 100%);
color: white;
position: relative;
}
.timeline-content {
max-width: 1200px;
margin: 0 auto;
}
.week-blocks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 4rem;
}
.week-block {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 2rem;
text-align: center;
position: relative;
border: 2px solid transparent;
transition: all 0.3s;
}
.week-block.active {
border-color: var(--yellow-accent);
background: rgba(255,255,255,0.15);
}
.week-number {
font-size: 3rem;
font-weight: 900;
opacity: 0.3;
margin-bottom: 1rem;
}
.week-block.active .week-number {
opacity: 1;
color: var(--yellow-accent);
}
/* Call to Action */
.cta-section {
padding: 12rem 2rem;
background: white;
text-align: center;
position: relative;
}
.cta-content h2 {
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 900;
margin-bottom: 2rem;
line-height: 0.9;
letter-spacing: -0.04em;
}
.cta-buttons {
display: flex;
gap: 2rem;
justify-content: center;
margin-top: 4rem;
}
.btn-primary {
background: var(--primary-blue);
color: white;
padding: 1.5rem 3rem;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s;
border: 3px solid var(--primary-blue);
}
.btn-primary:hover {
background: var(--primary-blue-hover);
transform: scale(1.05);
}
.btn-secondary {
background: transparent;
color: var(--text-primary);
padding: 1.5rem 3rem;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s;
border: 3px solid var(--text-primary);
}
.btn-secondary:hover {
background: var(--text-primary);
color: white;
}
/* Footer */
footer {
padding: 4rem 2rem;
background: var(--text-primary);
color: white;
text-align: center;
}
.footer-content {
max-width: 800px;
margin: 0 auto;
}
.footer-content p {
opacity: 0.7;
margin-bottom: 1rem;
}
.signature {
margin-top: 2rem;
font-size: 1.2rem;
font-weight: 700;
}
/* Responsive */
@media (max-width: 768px) {
.problem-grid {
grid-template-columns: 1fr;
}
.divider-vertical {
display: none;
}
.week-blocks {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
/* Animations */
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<!-- Minimal Navigation -->
<nav>
<div class="nav-inner">
<a href="#" class="logo">AI SPEEDRUN</a>
<div class="nav-action">
<a href="#manifesto">Manifesto</a>
<a href="#timeline">Build</a>
<a href="#demo">Demo →</a>
</div>
</div>
</nav>
<!-- Opening Statement -->
<section class="opening">
<div class="opening-content">
<h1 class="manifesto-statement">
Software<br>
is<br>
<span style="color: var(--yellow-accent);">Kapot.</span>
</h1>
<p class="manifesto-subtitle">
En iedereen weet het.
</p>
</div>
<div class="scroll-indicator">↓ Scroll</div>
</section>
<!-- The Problem -->
<section class="problem" id="manifesto">
<div class="problem-content">
<div class="problem-header">
<h2>
Ik werk al <span class="highlight-yellow">15 jaar</span> in de GGZ.
</h2>
<p style="font-size: 1.5rem; color: var(--text-secondary);">
PinkRoccade, Nedap, Zorgdomein, Caress—ik heb ze allemaal voorbij zien komen.
</p>
</div>
<div class="problem-grid">
<div class="problem-column">
<h3>De Belofte</h3>
<ul class="problem-list">
<li>€100.000/jaar licentiekosten</li>
<li>6 maanden implementatie</li>
<li>€50.000 setup & training</li>
<li>5-jarig contract</li>
<li>"Alles wat je nodig hebt"</li>
</ul>
</div>
<div class="divider-vertical"></div>
<div class="problem-column">
<h3>De Realiteit</h3>
<ul class="problem-list">
<li>Behandelaren haten de workflow</li>
<li>IT worstelt met integraties</li>
<li>200 features, 20 gebruikt</li>
<li>18 maanden voor een "kleine" aanpassing</li>
<li>Vendor lock-in tot in de eeuwigheid</li>
</ul>
</div>
</div>
<div class="cost-statement">
<div class="cost-amount">€500.000+</div>
<p style="font-size: 1.5rem;">Over 5 jaar. Voor software die niet past.</p>
</div>
</div>
</section>
<!-- Personal Story -->
<section class="story">
<div class="story-content">
<p>
<strong>Als behandelaar</strong> vulde ik formulieren in die niemand las.
</p>
<p>
<strong>Als product owner</strong> probeerde ik systemen te fixen die fundamenteel broken waren.
</p>
<p>
<strong>Als consultant</strong> zag ik organisaties worstelen met exact dezelfde problemen.
</p>
<div class="story-highlight">
"Dit moet toch sneller kunnen?"
</div>
<p style="text-align: center; font-size: 1.5rem;">
Telkens dezelfde vraag. Telkens hetzelfde antwoord: <strong>"Nee, zo werkt het nu eenmaal."</strong>
</p>
<p style="text-align: center; font-size: 2rem; font-weight: 900; color: var(--text-primary); margin-top: 3rem;">
Bullshit.
</p>
</div>
</section>
<!-- The Solution -->
<section class="solution">
<div class="solution-header">
<h2>NU KAN HET WEL</h2>
<p style="font-size: 1.5rem; color: var(--text-secondary);">
4 weken. €50/maand. Klaar.
</p>
</div>
<div class="solution-grid">
<div class="solution-card">
<span class="solution-number">1</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">AI-Powered Intake</h3>
<p>45 minuten gesprek → 2 minuten samenvatting</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 1</code>
</div>
<div class="solution-card">
<span class="solution-number">2</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">DSM-5 Suggesties</h3>
<p>Automatische diagnose-ondersteuning</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 2</code>
</div>
<div class="solution-card">
<span class="solution-number">3</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">Behandelplannen</h3>
<p>AI genereert, jij verfijnt</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 3</code>
</div>
<div class="solution-card">
<span class="solution-number">4</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">Live & Werkend</h3>
<p>Geen jarenlange implementatie</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 4</code>
</div>
</div>
</section>
<!-- Timeline -->
<section class="timeline" id="timeline">
<div class="timeline-content">
<h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem;">
Build in Public
</h2>
<p style="font-size: 1.3rem; opacity: 0.9;">
Geen geheimen. Alles op LinkedIn. Live.
</p>
<div class="week-blocks">
<div class="week-block active">
<div class="week-number">01</div>
<h3>Setup</h3>
<p style="opacity: 0.7;">Database, Auth, UI</p>
</div>
<div class="week-block active">
<div class="week-number">02</div>
<h3>AI Core</h3>
<p style="opacity: 0.7;">Claude integratie</p>
</div>
<div class="week-block">
<div class="week-number">03</div>
<h3>Workflows</h3>
<p style="opacity: 0.7;">Intake → Plan</p>
</div>
<div class="week-block">
<div class="week-number">04</div>
<h3>Launch</h3>
<p style="opacity: 0.7;">Live demo</p>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="cta-section">
<div class="cta-content">
<h2>
Stop met<br>
<span style="color: var(--text-secondary);">wachten op</span><br>
verandering
</h2>
<p style="font-size: 1.5rem; max-width: 600px; margin: 2rem auto; color: var(--text-secondary);">
Bouw hem gewoon zelf. In 4 weken.
</p>
<div class="cta-buttons">
<a href="#demo" class="btn-primary">Watch Live Demo</a>
<a href="https://linkedin.com" class="btn-secondary">Volg de Build</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<p>Dit is geen startup pitch.</p>
<p>Dit is geen vendor lock-in.</p>
<p>Dit is een statement.</p>
<div class="signature">
Colin Lindo<br>
<span style="opacity: 0.7; font-weight: 400;">15 jaar GGZ. 10 jaar development.</span><br>
<span style="color: var(--yellow-accent);">4 weken to change everything.</span>
</div>
</div>
</footer>
<script>
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Fade in on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.solution-card, .week-block').forEach(el => {
observer.observe(el);
});
</script>
</body>
</html>

394
docs/templates/prd_template.md vendored
View File

@@ -1,10 +1,4 @@
# 🚀 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.
---
# 📄 Product Requirements Document (PRD) – Template
**Projectnaam:** _[vul in]_
**Versie:** _v1.0_
@@ -13,357 +7,103 @@ Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetaill
---
## 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.
## 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:**
> 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.
> 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. Uitgangspunten
### 2.1 Technische Stack
🎯 **Doel:** Benoem de technologieën en frameworks die worden gebruikt.
📘 **Toelichting:** Denk aan frontend, backend, database, hosting en externe services.
## 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:**
- **Frontend:** SvelteKit + Tailwind CSS + Lucide Icons
- **Backend:** Firebase Functions / Next.js API Routes
- **Database:** Firestore / PostgreSQL
- **AI/ML:** Vertex AI (Gemini) / OpenAI API
- **Hosting:** Vercel / Firebase Hosting
- **Auth:** Firebase Auth / Supabase Auth
> - **Product Owners & Managers:** inzicht in AI als hulpmiddel.
> - **Developers:** inspiratie voor AI-integratie.
> - **Zorgprofessionals:** herkenbare workflows met directe meerwaarde.
### 2.2 Projectkaders
🎯 **Doel:** Benoem de vaste kaders waarbinnen het project wordt ontwikkeld.
📘 **Toelichting:** Denk aan beperkingen (tijd, budget, resources) en aannames.
---
## 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:**
- **Tijd:** 3 weken bouwtijd voor MVP
- **Budget:** €X voor externe services (API calls, hosting)
- **Team:** 1 developer + 1 consultant/sparringpartner
- **Data:** Geen productiegegevens (alle data fictief voor demo)
- **Doel:** Demo op AI-inspiratiesessie
### 2.3 Programmeer Uitgangspunten
🎯 **Doel:** Vastleggen van code-kwaliteit principes en development best practices.
📘 **Toelichting:** Deze principes gelden voor alle code die in dit project wordt geschreven.
**Code Quality Principles:**
- **DRY (Don't Repeat Yourself)**
- Herbruikbare componenten en functies
- Centrale configuratie voor herhaalde waarden
- Utility functions voor gemeenschappelijke logica
- **KISS (Keep It Simple, Stupid)**
- Eenvoudige oplossingen boven complexe architectuur
- Duidelijke naamgeving (spreekt voor zich)
- Vermijd premature optimization
- **SOC (Separation of Concerns)**
- UI-componenten gescheiden van business logic
- API-calls in dedicated service layers
- Database queries in repository/model layers
- Styling gescheiden van functionaliteit
- **YAGNI (You Aren't Gonna Need It)**
- Bouw alleen wat nu nodig is
- Geen features "voor later"
- Iteratief uitbreiden op basis van feedback
**Development Practices:**
- **Code Organization**
- Consistent folder structure (`/components`, `/lib`, `/routes`, `/api`)
- Één component/functie per file waar logisch
- Index files voor clean imports
- **Error Handling**
- Try-catch blocks op alle async operaties
- User-friendly foutmeldingen in UI
- Logging van errors naar console/monitoring
- **Security**
- Nooit API keys in frontend code
- Input validation op alle user input
- Firestore/database rules voor data access control
- CORS configuratie voor API endpoints
- **Performance**
- Lazy loading waar mogelijk
- Debounce op search/input handlers
- Optimized images en assets
- Minimal bundle size (tree-shaking)
- **Testing**
- Unit tests voor kritieke business logic
- Integration tests voor API endpoints
- Smoke tests voor belangrijkste flows
- Manual testing checklist voor demo
- **Documentation**
- README met setup instructies
- Inline comments voor complexe logica
- JSDoc/TypeScript types voor public APIs
- Architecture Decision Records (ADR) voor belangrijke keuzes
**Voorbeeld implementatie:**
```typescript
// ❌ NIET - Violation of DRY
if (user.role === 'admin') { /* ... */ }
if (user.role === 'admin') { /* ... */ }
// ✅ WEL - DRY principle
const isAdmin = (user) => user.role === 'admin';
if (isAdmin(user)) { /* ... */ }
// ❌ NIET - Violation of SOC
<button onClick={() => {
fetch('/api/data').then(r => r.json()).then(data => {
setState(data);
});
}}>
Load
</button>
// ✅ WEL - SOC principle
// In /lib/api.ts
export const loadData = async () => {
const response = await fetch('/api/data');
return response.json();
};
// In component
<button onClick={handleLoad}>Load</button>
```
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.
---
## 3. Epics & Stories Overzicht
🎯 **Doel:** De bouw opdelen in logische epics (fases) met stories (subfases).
📘 **Toelichting:** Elke epic bevat het doel, afhankelijkheden en status. Stories zijn de uitvoerbare taken binnen een epic.
## 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).
**Epic Structuur:**
| Epic ID | Titel | Doel | Status | Stories | Opmerkingen |
|---------|-------|------|--------|---------|-------------|
| E0 | Setup & Configuratie | Repo, omgeving, dependencies | ✅ Gereed | 4 | Config getest |
| E1 | Data & Database | Datamodel en demo-data | 🔄 In Progress | 3 | Rules nog aanvullen |
| E2 | UI & Layout | Interface, navigatie, componenten | ⏳ To Do | 3 | Wireframes gereed |
| E3 | AI-integratie | AI endpoints en prompt engineering | ⏳ To Do | 3 | Test met Gemini model |
| E4 | Testing & Deploy | QA, demo prep en deployment | ⏳ To Do | 3 | |
**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.
---
## 4. Epics & Stories (Uitwerking)
🎯 **Doel:** Verdeel complexe epics in beheersbare stories voor meer overzicht.
📘 **Toelichting:** Je bepaalt zelf het detailniveau. Kleine projecten kunnen volstaan met 2-3 stories per epic; grotere implementaties kunnen tot 10 stories bevatten.
## 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.
### Epic 0 — Setup & Configuratie
**Epic Doel:** Werkende development omgeving met alle benodigde tools en dependencies.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E0.S1 | Repository aanmaken | GitHub repo + lokale clone, `.gitignore` config | ✅ | — | 1 |
| E0.S2 | Project initialisatie | `npm create` draait, dev server start | ✅ | E0.S1 | 2 |
| E0.S3 | Dependencies installeren | Tailwind, Firebase, TypeScript geïnstalleerd | 🔄 | E0.S2 | 2 |
| E0.S4 | Environment variables | `.env.local` + Vercel vars geconfigureerd | ⏳ | E0.S3 | 1 |
**Technical Notes:**
- Gebruik `pnpm` voor snellere installs
- `.env.example` committen voor team onboarding
**Voorbeeld:**
> Rollenbeheer, koppelingen met externe systemen (Teams, ECD), productie-grade beveiliging.
---
### Epic 1 — Data & Database
**Epic Doel:** Werkend datamodel met seed data voor development en demo.
## 6. Succescriteria
🎯 **Doel:** Objectieve meetlat voor een geslaagde oplevering.
📘 **Toelichting:** Formuleer concrete, toetsbare criteria.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E1.S1 | Datamodel ontwerpen | ERD/schema gedocumenteerd, collections defined | 🔄 | E0.S4 | 3 |
| E1.S2 | Security Rules implementeren | Firestore rules geschreven en getest | ⏳ | E1.S1 | 3 |
| E1.S3 | Demo-data seeden | 3+ testcliënten met complete intake data | ⏳ | E1.S1 | 2 |
**Technical Notes:**
- Collections: `clients`, `intakes`, `plans`, `ai_events`
- Demo user heeft `all access` voor development
- Seed script: `npm run seed`
**Voorbeeld:**
- Demo duurt ≤ 10 minuten.
- AI-output zichtbaar en bewerkbaar.
- Geen fouten bij standaardflows.
- Minimaal 1 live testgebruiker.
---
### Epic 2 — UI & Layout
**Epic Doel:** Gebruiksvriendelijke interface volgens UX/FO specificatie.
## 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.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E2.S1 | Layout skelet bouwen | Topbalk + linker navigatie responsive | ⏳ | E1.S3 | 5 |
| E2.S2 | Component library setup | Herbruikbare buttons, cards, forms | ⏳ | E2.S1 | 3 |
| E2.S3 | Routing & navigatie | `/clients/[id]` structuur werkt, breadcrumbs | ⏳ | E2.S1 | 3 |
**Technical Notes:**
- shadcn/ui componenten of custom Tailwind components
- Keyboard shortcuts: Ctrl+S (save), Cmd+K (search)
- Mobile-first approach
**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 |
---
### Epic 3 — AI-integratie
**Epic Doel:** Werkende AI-features voor samenvatten, extraheren en plannen genereren.
## 8. Roadmap / Vervolg (Post-MVP)
🎯 **Doel:** Richting geven aan toekomstige uitbreidingen.
📘 **Toelichting:** Beschrijf logische vervolgstappen na de MVP.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E3.S1 | Vertex AI configuratie | GCP project + SA key, test call succesvol | ⏳ | E0.S4 | 3 |
| E3.S2 | API endpoints bouwen | `/api/summarize`, `/extract`, `/plan` werken | ⏳ | E3.S1, E1.S3 | 8 |
| E3.S3 | Logging & monitoring | AI calls loggen naar `ai_events` collection | ⏳ | E3.S2 | 2 |
**Technical Notes:**
- Model: `gemini-1.5-pro` of `gemini-2.0-flash`
- Prompt templates in `/lib/prompts/`
- Error handling voor rate limits en API failures
- Response caching voor repeated calls
**Voorbeeld:**
- Rollen & rechtenbeheer
- Auditlog + versiebeheer
- Trendanalyse
- Integratie met bestaande zorgsystemen (PinkRoccade, Nedap, etc.)
---
### Epic 4 — Testing & Deployment
**Epic Doel:** Stabiele, geteste applicatie live op productie omgeving.
## 9. Bijlagen & Referenties
🎯 **Doel:** Bronnen koppelen voor context en consistentie.
📘 **Toelichting:** Verwijs naar ondersteunende documenten of interne kennisbestanden.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E4.S1 | Smoke tests uitvoeren | Alle happy flows werken zonder crashes | ⏳ | E3.S3 | 3 |
| E4.S2 | Demo dry-run | Volledige demo in max 10 minuten | ⏳ | E4.S1 | 2 |
| E4.S3 | Productie deployment | Live op Vercel, environment vars gezet | ⏳ | E4.S2 | 2 |
**Technical Notes:**
- Test scenarios gedocumenteerd in `/docs/test-plan.md`
- Vercel deployment: EU region (Amsterdam)
- Rollback plan als deployment faalt
---
## 5. 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.
### Test Types
| Test Type | Scope | Tools | Verantwoordelijke |
|-----------|-------|-------|-------------------|
| Unit Tests | Business logic, utilities | Vitest / Jest | Developer |
| Integration Tests | API endpoints, database | Playwright / Supertest | Developer |
| Smoke Tests | Kritieke user flows | Manual checklist | QA / Developer |
| Performance Tests | Load times, API response | Lighthouse, Network tab | Developer |
| Security Tests | Auth, data access, XSS | Manual + OWASP checklist | Developer |
### Test Coverage Targets
- **Unit tests:** 80%+ coverage op `/lib` folder
- **Integration tests:** Alle API endpoints
- **Smoke tests:** 3 happy flows + 2 error scenarios
### Manual Test Checklist (voor demo)
- [ ] User kan inloggen
- [ ] Nieuwe cliënt aanmaken werkt
- [ ] Intake formulier opslaan werkt
- [ ] AI samenvatting genereert binnen 5 sec
- [ ] Behandelplan wordt gegenereerd
- [ ] Navigatie werkt zonder errors
- [ ] Mobile view is responsive
- [ ] Error states tonen user-friendly messages
---
## 6. 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.
### Demo Scenario
**Duur:** 10 minuten
**Doelgroep:** Zorgorganisatie stakeholders + management
**Locatie:** Live op Vercel (backup: localhost)
**Flow:**
1. **Intro** (1 min): Context en doel van de AI-assistent
2. **Nieuwe cliënt** (2 min): Aanmaken + intake invullen
3. **AI in actie** (4 min):
- Samenvatting genereren
- Belangrijkste punten extractie
- Behandelplan voorstel
4. **Interactie** (2 min): Aanpassingen maken, opslaan
5. **Afsluiting** (1 min): Vragen + next steps
**Backup Plan:**
- Lokale versie klaar bij internet issues
- Pre-seeded data als AI API niet reageert
- Screenshots als complete fallback
---
## 7. Risico's & Mitigatie
🎯 **Doel:** risico's vroeg signaleren en voorzien van oplossingen.
📘 **Toelichting:** Gebruik dit als dynamische checklist.
| Risico | Kans | Impact | Mitigatie | Owner |
|--------|------|--------|-----------|-------|
| AI-output inconsistent | Hoog | Hoog | Snapshot tests, prompt versioning, fallback responses | Developer |
| API rate limits tijdens demo | Middel | Hoog | Caching, pre-warmed responses, backup data | Developer |
| Firebase regels te open | Middel | Hoog | Strikte rules voor productie, security audit | Developer |
| Tijdsdruk deadline | Hoog | Middel | Prioriteer MVP features, cut scope indien nodig | PM |
| Browser compatibility issues | Laag | Middel | Test op Chrome, Safari, Firefox | QA |
| Environment vars niet gezet | Middel | Hoog | `.env.example` + deployment checklist | DevOps |
---
## 8. Evaluatie & Lessons Learned
🎯 **Doel:** reflecteren op het proces en verbeteringen vastleggen.
📘 **Toelichting:** noteer inzichten na elke sprint of oplevering.
**Te documenteren na project:**
- Wat ging goed? Wat niet?
- Welke AI-tools waren het meest effectief?
- Welke prompts werkten het beste?
- Waar liepen we vertraging op?
- Wat doen we volgende keer anders?
- Herbruikbare componenten voor volgende projecten
---
## 9. Referenties
🎯 **Doel:** koppelen aan de overige Mission Control-documenten.
**Mission Control Documents:**
- **PRD** — Product Requirements Document
- **FO** — Functioneel Ontwerp
- **TO** — Technisch Ontwerp
- **UX/UI** — Design specificatie
- **API Access** — Authenticatie en endpoints documentatie
**External Resources:**
- Repository: `https://github.com/[org]/[project]`
- Deployment: `https://[project].vercel.app`
- Design: Figma link
- Documentation: `/docs` folder in repo
---
## 10. Glossary & Abbreviations
| Term | Betekenis |
|------|-----------|
| Epic | Grote feature of fase in development (bevat meerdere stories) |
| Story | Kleine, uitvoerbare taak binnen een epic |
| Story Points | Schatting van complexiteit (Fibonacci: 1, 2, 3, 5, 8, 13) |
| MVP | Minimum Viable Product |
| DRY | Don't Repeat Yourself |
| KISS | Keep It Simple, Stupid |
| SOC | Separation of Concerns |
| YAGNI | You Aren't Gonna Need It |
| SA | Service Account (GCP) |
| ADR | Architecture Decision Record |
---
**Versiehistorie:**
| Versie | Datum | Auteur | Wijziging |
|--------|-------|--------|-----------|
| v1.0 | [datum] | [naam] | Initiële versie |
**Voorbeeld:**
- FO (Functioneel Ontwerp)
- TO (Technisch Ontwerp)
- UX/UI-specificatie
- Mission Control / Build Plan
- API Access Document