Content loader utility, Content directory structuur
This commit is contained in:
colinislit
979
docs/specs/archive/bouwplan.md
Normal file
979
docs/specs/archive/bouwplan.md
Normal 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 |
|
||||
618
docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md
Normal file
618
docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md
Normal 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 |
|
||||
@@ -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
1109
docs/specs/design-specs-manifesto-website.md
Normal file
File diff suppressed because it is too large
Load Diff
1119
docs/specs/fo-mini-ecd-v2.md
Normal file
1119
docs/specs/fo-mini-ecd-v2.md
Normal file
File diff suppressed because it is too large
Load Diff
448
docs/specs/prd-mini-ecd-v1.2.md
Normal file
448
docs/specs/prd-mini-ecd-v1.2.md
Normal 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
1331
docs/specs/to-mini-ecd-v1_2.md
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user