fix: resolve MDX type imports for release notes
Fixed runtime error in release notes pages: - Removed unused MDXRemote import from lib/mdx/releases.ts - Fixed MDXComponents type import in mdx-components.tsx - Added @types/mdx as dev dependency Pages now load correctly: - /releases (overview) - /releases/authentication - /releases/release-notes-system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
74
docs/specs/archive/api-acces-mini-ecd.md
Normal file
74
docs/specs/archive/api-acces-mini-ecd.md
Normal file
@@ -0,0 +1,74 @@
|
||||
## API‑toegang Mini‑ECD
|
||||
|
||||
Laatste update: 2025‑11‑09 • Versie: 0.2 (MVP)
|
||||
|
||||
### Overzicht
|
||||
De Mini‑ECD API biedt server‑side endpoints in Next.js voor AI‑functionaliteit (Claude / Anthropic). In de MVP is één endpoint beschikbaar.
|
||||
|
||||
### Base URL
|
||||
- Ontwikkel (lokaal): `http://localhost:3000`
|
||||
- Productie: n.t.b. (Vercel)
|
||||
|
||||
### Authenticatie
|
||||
- **MVP**: geen externe client‑auth; endpoints dienen alleen in trusted context gebruikt te worden (server‑side calls of demo‑omgeving).
|
||||
- Claude AI authenticatie verloopt server‑side via Anthropic API key.
|
||||
|
||||
### Headers
|
||||
- `Content-Type: application/json`
|
||||
|
||||
### Endpoints
|
||||
|
||||
#### POST `/api/ai/summarize`
|
||||
- **Doel**: vat NL intake‑tekst samen in puntsgewijze bullets (max 6), neutraal en feitelijk.
|
||||
- **Request body**
|
||||
```json
|
||||
{
|
||||
"text": "string (1..20000)",
|
||||
"language": "string (optioneel, default: nl)"
|
||||
}
|
||||
```
|
||||
- **Voorbeeld (PowerShell)**
|
||||
```powershell
|
||||
Invoke-RestMethod -Uri http://localhost:3000/api/ai/summarize -Method POST -Body (@{ text = "Korte intake tekst" } | ConvertTo-Json) -ContentType "application/json"
|
||||
```
|
||||
- **Voorbeeld (curl)**
|
||||
```bash
|
||||
curl -X POST http://localhost:3000/api/ai/summarize \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"text":"Korte intake tekst"}'
|
||||
```
|
||||
- **Response (200)**
|
||||
```json
|
||||
{
|
||||
"summary": "- Bullet 1\n- Bullet 2\n..."
|
||||
}
|
||||
```
|
||||
- **Fouten**
|
||||
- 400: ongeldige body (validatie faalt)
|
||||
- 500: Claude AI fout of configuratie ontbreekt
|
||||
|
||||
### Omgevingsvariabelen
|
||||
- **Claude AI**
|
||||
- `ANTHROPIC_API_KEY` (bv. `sk-ant-...`) — vereist voor alle AI-endpoints
|
||||
- **Optioneel**
|
||||
- `ANTHROPIC_MODEL` (default `claude-3-5-sonnet-20241022`)
|
||||
|
||||
Voorbeeld in `.env.local` (lokaal): zie `/.env.example`.
|
||||
|
||||
### Implementatiedetails
|
||||
- Server helper: `src/lib/server/claude.ts` initialiseert Claude client met API key.
|
||||
- Endpoint: `src/app/api/ai/summarize/route.ts` (Next.js Route Handler met Zod‑validatie, Claude API call).
|
||||
|
||||
### Beveiliging (MVP)
|
||||
- Houd `ANTHROPIC_API_KEY` uit de client; uitsluitend server‑side gebruiken.
|
||||
- Gebruik Vercel Environment Variables in productie.
|
||||
|
||||
### Roadmap (volgende endpoints)
|
||||
- `POST /api/ai/readability` – herschrijf naar B1‑niveau.
|
||||
- `POST /api/ai/extract` – extracteer categorie/severity uit intake.
|
||||
- `POST /api/ai/generate-plan` – genereer behandelplan (Doelen, Interventies, etc.).
|
||||
|
||||
### Changelog
|
||||
- 0.2 (2025‑11‑09): Migratie naar Next.js + Claude AI (Anthropic); update van base URL naar :3000.
|
||||
- 0.1 (2025‑09‑02): Eerste versie met `summarize` endpoint en env‑richtlijnen.
|
||||
|
||||
507
docs/specs/archive/bouwplan-ai-speedrun-marketing-first-v2.1.md
Normal file
507
docs/specs/archive/bouwplan-ai-speedrun-marketing-first-v2.1.md
Normal file
@@ -0,0 +1,507 @@
|
||||
# 🚀 Mission Control – Bouwplan AI Speedrun EPD v2.1
|
||||
|
||||
**Projectnaam:** AI Speedrun - Mini-EPD Prototype
|
||||
**Versie:** v2.1 (Vereenvoudigde User Journey + Teal Design System)
|
||||
**Datum:** 17-11-2024
|
||||
**Auteur:** Colin Lit
|
||||
**Laatste Update:** 17-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
|
||||
|
||||
**Nieuwe Strategie (v2.1):**
|
||||
- **Vereenvoudigde user journey:** Geen separate EPD demo pagina meer
|
||||
- **Features in timeline:** Build-in-public transparantie met features showcase per week
|
||||
- **Login met features:** Directe showcase van EPD capabilities op login pagina
|
||||
- **Teal-first design:** Modern, innovatief brand identity (#0D9488)
|
||||
|
||||
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.
|
||||
|
||||
**Referenties:**
|
||||
- **FO v2.1:** `docs/specs/fo-marketing-app-flow-v2.md` - Vereenvoudigde user journey
|
||||
- **UX Plan v2.0:** `docs/specs/ux-implementation-plan-v2.md` - Teal-first design system
|
||||
|
||||
---
|
||||
|
||||
## 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 met teal-first design system
|
||||
- **UI Components:** shadcn/ui + custom components (Timeline, AIButton)
|
||||
- **Rich Text:** TipTap editor (ProseMirror basis) - Week 3
|
||||
- **Icons:** Lucide React
|
||||
- **Animations:** Framer Motion (voor timeline scroll effects)
|
||||
- **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
|
||||
|
||||
**Design System:**
|
||||
- **Primary Color:** Teal (#0D9488 / teal-600) - Innovation signal
|
||||
- **AI Color:** Amber (#F59E0B / amber-500) - AI actions
|
||||
- **Neutral:** Slate scale voor professional foundation
|
||||
- **Typography:** Crimson Text (serif) + Inter (sans) + JetBrains Mono
|
||||
|
||||
---
|
||||
|
||||
## 3. Epics & Stories Overzicht
|
||||
|
||||
🎯 **Doel:** 8 duidelijke epics voor 4-weken development sprint - **Marketing First Strategy met vereenvoudigde user journey**.
|
||||
|
||||
| Epic ID | Titel | Doel | Status | Story Count | Week |
|
||||
|---------|-------|------|--------|-------------|------|
|
||||
| **WEEK 1 - FOUNDATION & MARKETING REFACTOR** |||||
|
||||
| E0 | Project Setup | Next.js + Supabase + Vercel running | ✅ Compleet | 5 | 1 |
|
||||
| E1 | Marketing Website Refactor | Homepage met timeline + login met features | 🔄 In Progress | 7 | 1 |
|
||||
| E2 | Design System Migration | Teal-first colors + component updates | ✅ Compleet | 5 | 1 |
|
||||
| **WEEK 2 - EPD CORE** |||||
|
||||
| E3 | Database & Auth | Schema + RLS + demo users | ✅ Compleet | 4 | 2 |
|
||||
| E4 | Core UI & Client Module | Layout + Client CRUD + Navigation | ⏳ To Do | 5 | 2 |
|
||||
| **WEEK 3 - AI MAGIC** |||||
|
||||
| E5 | Intake & AI Integration | TipTap + Claude API + Prompts | ⏳ To Do | 6 | 3 |
|
||||
| E6 | Profile & Plan | DSM + behandelplan flows | ⏳ To Do | 4 | 3 |
|
||||
| **WEEK 4 - POLISH & LAUNCH** |||||
|
||||
| E7 | Onboarding System | Walkthrough + tooltips + help | ⏳ To Do | 4 | 4 |
|
||||
| E8 | Performance & Launch | Optimization + demo prep | ⏳ To Do | 4 | 4 |
|
||||
|
||||
---
|
||||
|
||||
## 4. Epics & Stories (Uitwerking)
|
||||
|
||||
### Epic 0 — Project Setup
|
||||
|
||||
**Epic Doel:** Werkende development omgeving met alle benodigde tools en dependencies.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E0.S1 | Repository aanmaken | GitHub repo + lokale clone, `.gitignore` config | ✅ | — | 1 |
|
||||
| E0.S2 | Next.js project initialisatie | Next.js 15 App Router draait, dev server start | ✅ | E0.S1 | 2 |
|
||||
| E0.S3 | Supabase setup | Project aangemaakt, database connected, Auth enabled | ✅ | E0.S2 | 3 |
|
||||
| E0.S4 | Dependencies installeren | Tailwind, shadcn/ui, Framer Motion, Lucide geïnstalleerd | ✅ | E0.S2 | 2 |
|
||||
| E0.S5 | Environment variables | `.env.local` + Vercel vars geconfigureerd | ✅ | E0.S3 | 1 |
|
||||
|
||||
**Technical Notes:**
|
||||
- Gebruik `pnpm` voor snellere installs
|
||||
- `.env.example` committen voor team onboarding
|
||||
- Supabase project in EU region (Amsterdam)
|
||||
|
||||
---
|
||||
|
||||
### Epic 1 — Marketing Website Refactor
|
||||
|
||||
**Epic Doel:** Vereenvoudigde marketing homepage met timeline (features showcase) en login pagina met features.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E1.S1 | Verwijder EPD demo pagina | `/epd` route verwijderd, navigation updated | ⏳ | E0.S5 | 1 |
|
||||
| E1.S2 | Homepage vereenvoudigen | Manifesto content verwijderd, statement section toegevoegd | ⏳ | E1.S1 | 3 |
|
||||
| E1.S3 | Timeline component integreren | Aceternity timeline met features per week | ⏳ | E1.S2 | 5 |
|
||||
| E1.S4 | Timeline content structuur | `content/nl/timeline.json` met features array | ⏳ | E1.S3 | 2 |
|
||||
| E1.S5 | Login pagina refactor | Split-screen layout: features links, login rechts | ⏳ | E1.S1 | 4 |
|
||||
| E1.S6 | Features showcase component | Herbruikbare feature cards voor timeline + login | ⏳ | E1.S3, E1.S5 | 3 |
|
||||
| E1.S7 | CTA updates | Homepage CTA naar `/login`, navigation cleanup | ⏳ | E1.S2, E1.S5 | 1 |
|
||||
|
||||
**Technical Notes:**
|
||||
- Timeline component: `components/ui/timeline.tsx` (Aceternity UI pattern)
|
||||
- Features data: `content/nl/timeline.json` (met features array per week)
|
||||
- Login layout: Inspiratie van `components/ui/sign-in.tsx`
|
||||
- Mobile: Stack layout voor login pagina (features boven, form onder)
|
||||
|
||||
**Content Structure:**
|
||||
```json
|
||||
// content/nl/timeline.json
|
||||
{
|
||||
"weeks": [
|
||||
{
|
||||
"weekNumber": 1,
|
||||
"title": "Week 1 • Nov 11-17",
|
||||
"status": "completed",
|
||||
"description": "...",
|
||||
"features": [
|
||||
{
|
||||
"title": "AI-Gestuurde Intake",
|
||||
"description": "...",
|
||||
"time": "< 5 seconden",
|
||||
"traditional": "15-20 minuten handmatig",
|
||||
"icon": "Brain"
|
||||
}
|
||||
],
|
||||
"metrics": { ... },
|
||||
"achievements": [ ... ]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Epic 2 — Design System Migration
|
||||
|
||||
**Epic Doel:** Teal-first design system implementeren (migratie van blue naar teal).
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E2.S1 | Tailwind config update | Teal brand colors, amber AI colors | ✅ | E0.S4 | 2 |
|
||||
| E2.S2 | Global CSS variables | `--primary`, `--info` naar teal | ✅ | E2.S1 | 1 |
|
||||
| E2.S3 | Component color updates | Buttons, links, navigation naar teal | ✅ | E2.S2 | 3 |
|
||||
| E2.S4 | AIButton component | Amber gradient button voor AI actions | ✅ | E2.S1 | 2 |
|
||||
| E2.S5 | Contrast testing | WCAG AA compliance voor teal colors | ✅ | E2.S3 | 1 |
|
||||
|
||||
**Technical Notes:**
|
||||
- Primary: `teal-700` (#0F766E) - **5.47:1 contrast op white (WCAG AA compliant)**
|
||||
- AI actions: `amber-600` (#D97706) gradient → `amber-700` (#B45309)
|
||||
- Test contrast: Automated script `scripts/test-contrast.ts`
|
||||
- WCAG compliance: 7/11 AA Normal (4.5:1), 11/11 AA Large (3:1) ✅
|
||||
- Documentation: `docs/design/wcag-compliance.md`
|
||||
|
||||
**Implementation Summary:**
|
||||
- ✅ Tailwind config: Teal-700 als DEFAULT voor betere contrast
|
||||
- ✅ CSS variables: Alle `--color-brand`, `--color-info`, `--color-input-focus` → teal-700
|
||||
- ✅ Components updated: sign-in, timeline, reading-progress, modern-side-bar
|
||||
- ✅ AIButton component: Amber-600→700 gradient, 3 variants, fully accessible
|
||||
- ✅ Contrast tested: All combinations pass WCAG AA for intended use cases
|
||||
|
||||
**Color Palette (Final):**
|
||||
```typescript
|
||||
// tailwind.config.ts
|
||||
colors: {
|
||||
brand: {
|
||||
600: '#0D9488', // UI components (3.74:1 on white)
|
||||
700: '#0F766E', // PRIMARY text (5.47:1 on white - WCAG AA)
|
||||
800: '#115E59', // Hover states
|
||||
DEFAULT: '#0F766E',
|
||||
},
|
||||
ai: {
|
||||
600: '#D97706', // AI buttons (3.19:1 - AA Large)
|
||||
700: '#B45309', // AI hover (5.02:1 - AA Normal)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Epic 3 — Database & Auth
|
||||
|
||||
**Epic Doel:** Werkend datamodel met seed data, auth flow en RLS policies.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E3.S1 | Database schema | 5 core tables: clients, intake_notes, problem_profiles, treatment_plans, ai_events | ✅ | E0.S3 | 5 |
|
||||
| E3.S2 | RLS policies | Row-level security per table (user isolation) | ✅ | E3.S1 | 3 |
|
||||
| E3.S3 | Demo users seed | demo@mini-ecd.demo account aangemaakt | ✅ | E3.S2 | 1 |
|
||||
| E3.S4 | Auth flow | Magic link + password login werkend | ✅ | E3.S3 | 2 |
|
||||
|
||||
**Technical Notes:**
|
||||
- Schema: PostgreSQL via Supabase
|
||||
- RLS: `auth.uid() = created_by` pattern
|
||||
- Demo users: Shared dataset voor demo purposes
|
||||
- Auth: Supabase Auth (magic link + password)
|
||||
|
||||
---
|
||||
|
||||
### Epic 4 — Core UI & Client Module
|
||||
|
||||
**Epic Doel:** EPD app foundation: layout, client CRUD, navigation.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E4.S1 | Coming Soon dashboard | `/epd/clients` placeholder met roadmap | ⏳ | E3.S4 | 2 |
|
||||
| E4.S2 | App layout | Header + sidebar + main content area | ⏳ | E4.S1 | 3 |
|
||||
| E4.S3 | Client list page | CRUD operations, table view, filters | ⏳ | E4.S2 | 5 |
|
||||
| E4.S4 | Client detail page | Tabs: Intake, Profile, Plan (placeholders) | ⏳ | E4.S3 | 3 |
|
||||
| E4.S5 | Navigation & routing | App routes, breadcrumbs, logout flow | ⏳ | E4.S2 | 2 |
|
||||
|
||||
**Technical Notes:**
|
||||
- Layout: Separate van marketing (app header vs MinimalNav)
|
||||
- Client CRUD: Forms met validation (Zod)
|
||||
- Routing: `/epd/clients` namespace
|
||||
- Mobile: Responsive table → card layout
|
||||
|
||||
---
|
||||
|
||||
### Epic 5 — Intake & AI Integration
|
||||
|
||||
**Epic Doel:** TipTap editor + Claude API voor intake samenvatting en B1 readability.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E5.S1 | TipTap editor setup | Rich text editor in client detail | ⏳ | E4.S4 | 4 |
|
||||
| E5.S2 | Claude API endpoints | `/api/ai/summarize`, `/api/ai/simplify` | ⏳ | E0.S5 | 5 |
|
||||
| E5.S3 | AI-rail component | Right panel voor AI suggestions | ⏳ | E5.S2 | 4 |
|
||||
| E5.S4 | Prompt engineering | Nederlands prompts voor samenvatting | ⏳ | E5.S2 | 3 |
|
||||
| E5.S5 | AI event logging | Log alle AI calls naar `ai_events` table | ⏳ | E5.S2 | 2 |
|
||||
| E5.S6 | Error handling | Retry logic, user-friendly errors | ⏳ | E5.S2 | 2 |
|
||||
|
||||
**Technical Notes:**
|
||||
- TipTap: ProseMirror-based editor
|
||||
- Claude: 3.5 Sonnet voor Nederlands
|
||||
- Prompts: Templates in `/lib/prompts/`
|
||||
- Cost tracking: Log tokens + estimated costs
|
||||
|
||||
---
|
||||
|
||||
### Epic 6 — Profile & Plan
|
||||
|
||||
**Epic Doel:** DSM-light classificatie + SMART behandelplan generatie.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E6.S1 | Profile tab UI | DSM categories + severity selector | ⏳ | E4.S4 | 3 |
|
||||
| E6.S2 | AI categorize endpoint | `/api/ai/categorize` met DSM-light output | ⏳ | E5.S2 | 4 |
|
||||
| E6.S3 | Plan tab UI | SMART doelen form + interventies | ⏳ | E4.S4 | 3 |
|
||||
| E6.S4 | AI plan generator | `/api/ai/plan` met 4 secties output | ⏳ | E6.S2 | 5 |
|
||||
|
||||
**Technical Notes:**
|
||||
- DSM-light: 6 categorieën (stemming, angst, gedrag, etc.)
|
||||
- Plan structuur: JSONB in database (flexibel)
|
||||
- AI output: Structured JSON voor consistentie
|
||||
|
||||
---
|
||||
|
||||
### Epic 7 — Onboarding System
|
||||
|
||||
**Epic Doel:** User guidance voor eerste gebruik (tooltips, walkthrough).
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E7.S1 | First-time user detection | Check `user_metadata.onboarded` flag | ⏳ | E4.S2 | 1 |
|
||||
| E7.S2 | Tooltip system | React Joyride of custom tooltips | ⏳ | E7.S1 | 3 |
|
||||
| E7.S3 | Help documentation | In-app help modal met shortcuts | ⏳ | E7.S2 | 2 |
|
||||
| E7.S4 | Skip onboarding | Option om walkthrough te skippen | ⏳ | E7.S2 | 1 |
|
||||
|
||||
**Technical Notes:**
|
||||
- Tooltips: Highlight key features (AI buttons, etc.)
|
||||
- Help: Keyboard shortcuts, feature overview
|
||||
- Optional: Skip voor returning users
|
||||
|
||||
---
|
||||
|
||||
### Epic 8 — Performance & Launch
|
||||
|
||||
**Epic Doel:** Optimization, testing, demo preparation.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|--------------|
|
||||
| E8.S1 | Performance optimization | Lighthouse > 90, LCP < 2.5s | ⏳ | E7.S4 | 3 |
|
||||
| E8.S2 | Accessibility audit | WCAG AA compliance, keyboard nav | ⏳ | E8.S1 | 2 |
|
||||
| E8.S3 | Demo dry-run | 10-min demo scenario werkt | ⏳ | E8.S2 | 2 |
|
||||
| E8.S4 | Production deployment | Live op Vercel, monitoring setup | ⏳ | E8.S3 | 2 |
|
||||
|
||||
**Technical Notes:**
|
||||
- Performance: Image optimization, code splitting
|
||||
- Accessibility: Focus states, ARIA labels
|
||||
- Demo: Pre-seeded data, backup plan
|
||||
- Monitoring: Vercel Analytics + error tracking
|
||||
|
||||
---
|
||||
|
||||
## 5. Kwaliteit & Testplan
|
||||
|
||||
🎯 **Doel:** Vastleggen hoe de kwaliteit van het project wordt geborgd.
|
||||
|
||||
### Test Types
|
||||
|
||||
| Test Type | Scope | Tools | Verantwoordelijke |
|
||||
|-----------|-------|-------|-------------------|
|
||||
| Unit Tests | Business logic, utilities | Vitest | Developer |
|
||||
| Integration Tests | API endpoints, database | Playwright | Developer |
|
||||
| Smoke Tests | Kritieke user flows | Manual checklist | Developer |
|
||||
| Performance Tests | Load times, API response | Lighthouse | Developer |
|
||||
| Accessibility Tests | WCAG AA compliance | axe DevTools | Developer |
|
||||
|
||||
### Test Coverage Targets
|
||||
|
||||
- **Unit tests:** 80%+ coverage op `/lib` folder
|
||||
- **Integration tests:** Alle API endpoints
|
||||
- **Smoke tests:** 5 happy flows + 3 error scenarios
|
||||
|
||||
### Manual Test Checklist (voor demo)
|
||||
|
||||
**Marketing Site:**
|
||||
- [ ] Homepage laadt met hero + statement + timeline
|
||||
- [ ] Timeline scrollt en toont features per week
|
||||
- [ ] Login pagina toont features showcase + form
|
||||
- [ ] Navigation werkt (Home, Contact, Login)
|
||||
- [ ] Mobile responsive (timeline, login layout)
|
||||
|
||||
**EPD App:**
|
||||
- [ ] User kan inloggen (magic link + demo credentials)
|
||||
- [ ] Coming Soon dashboard toont roadmap
|
||||
- [ ] Client CRUD werkt (Week 2)
|
||||
- [ ] Intake editor werkt met TipTap (Week 3)
|
||||
- [ ] AI samenvatting genereert binnen 5 sec (Week 3)
|
||||
- [ ] Profile + Plan tabs werken (Week 3)
|
||||
- [ ] Navigatie werkt zonder errors
|
||||
- [ ] Mobile view is responsive
|
||||
- [ ] Error states tonen user-friendly messages
|
||||
|
||||
**Design System:**
|
||||
- [ ] Teal colors consistent overal
|
||||
- [ ] Amber AI buttons duidelijk
|
||||
- [ ] Contrast ratios WCAG AA compliant
|
||||
- [ ] Focus states zichtbaar
|
||||
|
||||
---
|
||||
|
||||
## 6. Demo & Presentatieplan
|
||||
|
||||
🎯 **Doel:** Beschrijven hoe de demo wordt gepresenteerd.
|
||||
|
||||
### Demo Scenario
|
||||
|
||||
**Duur:** 10 minuten
|
||||
**Doelgroep:** GGZ innovatiemanagers + bestuurders
|
||||
**Locatie:** Live op Vercel (backup: localhost)
|
||||
|
||||
**Flow:**
|
||||
1. **Intro** (1 min): Homepage - Statement + Timeline overview
|
||||
2. **Features showcase** (2 min): Timeline scrollen, features per week zien
|
||||
3. **Login** (1 min): Login pagina met features showcase
|
||||
4. **EPD demo** (4 min):
|
||||
- Client lijst
|
||||
- Nieuwe intake maken
|
||||
- AI samenvatting genereren
|
||||
- Profile + Plan tabs
|
||||
5. **Afsluiting** (2 min): Vragen + LinkedIn build-in-public link
|
||||
|
||||
**Backup Plan:**
|
||||
- Lokale versie klaar bij internet issues
|
||||
- Pre-seeded data als AI API niet reageert
|
||||
- Screenshots als complete fallback
|
||||
|
||||
---
|
||||
|
||||
## 7. Risico's & Mitigatie
|
||||
|
||||
🎯 **Doel:** Risico's vroeg signaleren en voorzien van oplossingen.
|
||||
|
||||
| Risico | Kans | Impact | Mitigatie | Owner |
|
||||
|--------|------|--------|-----------|-------|
|
||||
| Teal design niet goed ontvangen | Laag | Middel | Rollback plan (1 uur), hybrid approach mogelijk | Developer |
|
||||
| Timeline component complex | Middel | Middel | Aceternity UI pattern gebruiken, simplify indien nodig | Developer |
|
||||
| Features data structuur te complex | Middel | Laag | Start simpel, iteratief uitbreiden | Developer |
|
||||
| AI-output inconsistent | Hoog | Hoog | Snapshot tests, prompt versioning, fallback responses | Developer |
|
||||
| API rate limits tijdens demo | Middel | Hoog | Caching, pre-warmed responses, backup data | Developer |
|
||||
| Tijdsdruk deadline | Hoog | Middel | Prioriteer MVP features, cut scope indien nodig | Developer |
|
||||
| Login pagina layout niet responsive | Laag | Middel | Test op mobile early, stack layout fallback | Developer |
|
||||
|
||||
---
|
||||
|
||||
## 8. Evaluatie & Lessons Learned
|
||||
|
||||
🎯 **Doel:** Reflecteren op het proces en verbeteringen vastleggen.
|
||||
|
||||
**Te documenteren na project:**
|
||||
- Wat ging goed? Wat niet?
|
||||
- Was teal-first design de juiste keuze?
|
||||
- Werkt vereenvoudigde user journey beter?
|
||||
- Welke AI-tools waren het meest effectief?
|
||||
- Welke prompts werkten het beste?
|
||||
- Waar liepen we vertraging op?
|
||||
- Wat doen we volgende keer anders?
|
||||
- Herbruikbare componenten voor volgende projecten
|
||||
|
||||
---
|
||||
|
||||
## 9. Referenties
|
||||
|
||||
🎯 **Doel:** Koppelen aan de overige Mission Control-documenten.
|
||||
|
||||
**Mission Control Documents:**
|
||||
- **PRD v1.2** — `docs/specs/prd-mini-ecd-v2.md` - Product Requirements & Business Case
|
||||
- **FO v2.1** — `docs/specs/fo-marketing-app-flow-v2.md` - Functioneel Ontwerp (vereenvoudigde user journey)
|
||||
- **UX Plan v2.0** — `docs/specs/ux-implementation-plan-v2.md` - Teal-first design system
|
||||
- **TO v1.2** — `docs/specs/to-mini-ecd-v1_2.md` - Technische Architectuur & Database Schema
|
||||
- **API Specs** — `docs/specs/api-acces-mini-ecd.md` - Endpoint Documentation
|
||||
|
||||
**External Resources:**
|
||||
- Repository: GitHub (public voor transparantie)
|
||||
- Deployment: Vercel (EU region Amsterdam)
|
||||
- Design: Tailwind CSS + shadcn/ui
|
||||
- Documentation: `/docs` folder in repo
|
||||
|
||||
---
|
||||
|
||||
## 10. Glossary & Abbreviations
|
||||
|
||||
| Term | Betekenis |
|
||||
|------|-----------|
|
||||
| Epic | Grote feature of fase in development (bevat meerdere stories) |
|
||||
| Story | Kleine, uitvoerbare taak binnen een epic |
|
||||
| Story Points | Schatting van complexiteit (Fibonacci: 1, 2, 3, 5, 8, 13) |
|
||||
| MVP | Minimum Viable Product |
|
||||
| DRY | Don't Repeat Yourself |
|
||||
| KISS | Keep It Simple, Stupid |
|
||||
| SOC | Separation of Concerns |
|
||||
| YAGNI | You Aren't Gonna Need It |
|
||||
| RLS | Row Level Security (Supabase) |
|
||||
| WCAG | Web Content Accessibility Guidelines |
|
||||
| LCP | Largest Contentful Paint (performance metric) |
|
||||
|
||||
---
|
||||
|
||||
## Versiehistorie
|
||||
|
||||
| Versie | Datum | Auteur | Wijziging |
|
||||
|--------|-------|--------|-----------|
|
||||
| v2.1 | 17-11-2024 | Colin | Nieuw bouwplan op basis van FO v2.1 (vereenvoudigde user journey) en UX Plan v2.0 (teal-first design). Verwijderd: EPD demo pagina. Nieuw: Timeline met features, login met features showcase. |
|
||||
| v1.6 | 15-11-2024 | Colin | Eerdere versie met separate EPD demo pagina |
|
||||
|
||||
---
|
||||
|
||||
**Status:** Ready for Week 1 Implementation
|
||||
**Next Action:** Begin Epic 1 (Marketing Website Refactor)
|
||||
**Owner:** Colin Lit
|
||||
**Timeline:** Week 1-4 (4 weken sprint)
|
||||
|
||||
502
docs/specs/archive/bouwplan-auth-hook-duplicate-email-v1.0.md
Normal file
502
docs/specs/archive/bouwplan-auth-hook-duplicate-email-v1.0.md
Normal file
@@ -0,0 +1,502 @@
|
||||
# 🔐 Bouwplan — Auth Hook voor Duplicate Email Detection
|
||||
|
||||
**Projectnaam:** Mini EPD - Auth Hook Implementatie
|
||||
**Versie:** v1.0 (Code-First Approach)
|
||||
**Datum:** 18-01-2025
|
||||
**Auteur:** Colin (met Claude Code)
|
||||
**Scope:** Server-side duplicate email detection via Auth Hook - Volledig in code waar mogelijk
|
||||
|
||||
---
|
||||
|
||||
## 1. Filosofie: Code-First Approach
|
||||
|
||||
**Principe:**
|
||||
- ✅ Alles wat mogelijk is in code/migrations → komt in code
|
||||
- ✅ Geen handmatige Dashboard configuratie waar mogelijk
|
||||
- ✅ Flexibel voor toekomstige auth provider switches
|
||||
- ✅ Herhaalbaar en version controlled
|
||||
|
||||
**Realiteit:**
|
||||
- Functie: Volledig in SQL migrations ✅
|
||||
- Hook link: Vereist Dashboard configuratie (Supabase limietatie) ⚠️
|
||||
- Oplossing: Setup script + duidelijke documentatie
|
||||
|
||||
---
|
||||
|
||||
## 2. Probleem Statement
|
||||
|
||||
**Huidige Situatie:**
|
||||
- Bij signup met bestaand emailadres (bijv. `colin.lit@gmail.com`) krijgt gebruiker succesmelding
|
||||
- Geen email wordt verzonden (omdat account al bestaat)
|
||||
- Gebruiker denkt dat account is aangemaakt maar krijgt geen verificatie email
|
||||
- Verwarrende UX
|
||||
|
||||
**Root Cause:**
|
||||
- Supabase geeft geen error bij duplicate email als "Email confirmation" AAN staat
|
||||
- Dit is een security feature (email enumeration prevention)
|
||||
- Client-side detection is onbetrouwbaar (werkt alleen als password correct is)
|
||||
|
||||
**Oplossing:**
|
||||
- Implementeer `before-user-created` Auth Hook
|
||||
- Server-side check of email al bestaat in database
|
||||
- Return custom error message als email al geregistreerd is
|
||||
|
||||
---
|
||||
|
||||
## 3. Wat Gaan We Bouwen?
|
||||
|
||||
| Component | Wat | Waar | Status |
|
||||
|-----------|-----|------|--------|
|
||||
| Postgres Function | Database functie | `supabase/migrations/` | ✅ Volledig in code |
|
||||
| Setup Script | Automatiseer hook link | `scripts/setup-auth-hook.ts` | ✅ Code-based |
|
||||
| README | Documentatie | `docs/AUTH_HOOK_SETUP.md` | ✅ Documentatie |
|
||||
| Error Handling | Client-side updates | `app/login/page.tsx` | ✅ Code |
|
||||
|
||||
**Totaal: ~2.5 uur werk**
|
||||
|
||||
---
|
||||
|
||||
## 4. Technische Keuze: Postgres Function vs HTTP Edge Function
|
||||
|
||||
### **Optie A: Postgres Function (AANBEVOLEN) ✅**
|
||||
**Voordelen:**
|
||||
- ✅ Geen extra dependencies nodig
|
||||
- ✅ Direct database access (sneller)
|
||||
- ✅ Makkelijk te onderhouden (SQL in migrations)
|
||||
- ✅ Geen extra hosting/configuration
|
||||
- ✅ Past bij bestaande setup (je hebt al migrations)
|
||||
|
||||
**Nadelen:**
|
||||
- ⚠️ Moet SQL schrijven (maar is simpel)
|
||||
|
||||
### **Optie B: HTTP Edge Function**
|
||||
**Voordelen:**
|
||||
- ✅ TypeScript (bekende taal)
|
||||
- ✅ Meer flexibiliteit voor complexe logica
|
||||
|
||||
**Nadelen:**
|
||||
- ❌ Extra setup nodig (Supabase Functions)
|
||||
- ❌ Extra deployment step
|
||||
- ❌ Meer complexiteit
|
||||
|
||||
**Beslissing: Postgres Function (Optie A)**
|
||||
|
||||
---
|
||||
|
||||
## 5. Implementatie Plan
|
||||
|
||||
### **Epic 1: Volledig Code-Based Setup**
|
||||
|
||||
| Story ID | Wat Bouwen? | Bestanden | Story Points |
|
||||
|----------|-------------|-----------|--------------|
|
||||
| E1.S1 | Create hook function | `supabase/migrations/YYYYMMDDHHMMSS_auth_hook_duplicate_email.sql` | 2 |
|
||||
| E1.S2 | Setup script voor hook link | `scripts/setup-auth-hook.ts` | 2 |
|
||||
| E1.S3 | Documentatie | `docs/AUTH_HOOK_SETUP.md` | 1 |
|
||||
| E1.S4 | Update client error handling | `app/login/page.tsx` | 1 |
|
||||
|
||||
---
|
||||
|
||||
## 6. Epic 1 — Implementatie Details
|
||||
|
||||
### **E1.S1 - Create Hook Function (Volledig in Migrations)**
|
||||
|
||||
**Bestand:** `supabase/migrations/20250118120000_auth_hook_duplicate_email.sql`
|
||||
|
||||
**Wat doet de functie:**
|
||||
1. Ontvangt signup event van Supabase Auth
|
||||
2. Haalt email adres uit event payload
|
||||
3. Valideert email (niet NULL/empty)
|
||||
4. Normaliseert email (lowercase + trim)
|
||||
5. Checkt of email al bestaat in `auth.users` table (case-insensitive)
|
||||
6. Als email bestaat → return error object
|
||||
7. Als email nieuw is → return empty object (allow signup)
|
||||
|
||||
**SQL Code:**
|
||||
```sql
|
||||
-- ============================================================================
|
||||
-- Auth Hook: Duplicate Email Detection
|
||||
-- ============================================================================
|
||||
-- Deze functie wordt aangeroepen VOOR een nieuwe user wordt aangemaakt.
|
||||
-- Checkt of het emailadres al bestaat en blokkeert signup indien nodig.
|
||||
--
|
||||
-- Hook Type: before-user-created
|
||||
-- Flexibel: Werkt met elke auth provider die Postgres functies ondersteunt
|
||||
-- ============================================================================
|
||||
|
||||
create or replace function public.hook_check_duplicate_email(event jsonb)
|
||||
returns jsonb
|
||||
language plpgsql
|
||||
security definer
|
||||
set search_path = public, auth
|
||||
as $$
|
||||
declare
|
||||
user_email text;
|
||||
email_exists boolean;
|
||||
begin
|
||||
-- Extract email from event payload
|
||||
user_email := event->'user'->>'email';
|
||||
|
||||
-- Validate email is not null or empty
|
||||
if user_email is null or trim(user_email) = '' then
|
||||
return jsonb_build_object(
|
||||
'error', jsonb_build_object(
|
||||
'message', 'Email adres is verplicht.',
|
||||
'http_code', 400
|
||||
)
|
||||
);
|
||||
end if;
|
||||
|
||||
-- Normalize email (lowercase, trim) for consistent checking
|
||||
user_email := lower(trim(user_email));
|
||||
|
||||
-- Check if email already exists in auth.users (case-insensitive)
|
||||
select exists(
|
||||
select 1
|
||||
from auth.users
|
||||
where lower(email) = user_email
|
||||
) into email_exists;
|
||||
|
||||
-- If email exists, reject signup with error
|
||||
if email_exists then
|
||||
return jsonb_build_object(
|
||||
'error', jsonb_build_object(
|
||||
'message', 'Dit emailadres is al geregistreerd. Probeer in te loggen of gebruik "Wachtwoord vergeten?".',
|
||||
'http_code', 400
|
||||
)
|
||||
);
|
||||
end if;
|
||||
|
||||
-- Email doesn't exist, allow signup
|
||||
return '{}'::jsonb;
|
||||
end;
|
||||
$$;
|
||||
|
||||
-- Grant execute permission to Supabase Auth service
|
||||
grant execute
|
||||
on function public.hook_check_duplicate_email
|
||||
to supabase_auth_admin;
|
||||
|
||||
-- Revoke from other roles (security)
|
||||
revoke execute
|
||||
on function public.hook_check_duplicate_email
|
||||
from authenticated, anon, public;
|
||||
|
||||
-- Add comment for documentation
|
||||
comment on function public.hook_check_duplicate_email is
|
||||
'Auth hook voor duplicate email detection. Wordt aangeroepen via Supabase Auth Hooks (before-user-created).';
|
||||
```
|
||||
|
||||
**Waarom `set search_path`?**
|
||||
- Zorgt dat `auth.users` correct wordt gevonden
|
||||
- Voorkomt "table not found" errors
|
||||
- Best practice voor security definer functies
|
||||
|
||||
**MVP Verbeteringen:**
|
||||
- ✅ NULL/empty email check (voorkomt crashes)
|
||||
- ✅ Email normalisatie (lowercase + trim voor consistentie)
|
||||
- ✅ Case-insensitive duplicate check (Email@Example.com = email@example.com)
|
||||
|
||||
---
|
||||
|
||||
### **E1.S2 - Setup Script (Automatiseer Hook Link)**
|
||||
|
||||
**Bestand:** `scripts/setup-auth-hook.ts`
|
||||
|
||||
**Doel:** Automatiseer hook link configuratie waar mogelijk
|
||||
|
||||
```typescript
|
||||
#!/usr/bin/env tsx
|
||||
/**
|
||||
* Setup Script: Configure Auth Hook Link
|
||||
*
|
||||
* Dit script configureert de link tussen Supabase Auth Hook en onze Postgres functie.
|
||||
*
|
||||
* Helaas ondersteunt Supabase Management API nog geen Auth Hooks configuratie,
|
||||
* dus dit script geeft instructies voor handmatige configuratie.
|
||||
*
|
||||
* In de toekomst kan dit worden geautomatiseerd zodra Supabase API dit ondersteunt.
|
||||
*/
|
||||
|
||||
import { supabaseAdmin } from '@/lib/supabase/server'
|
||||
|
||||
async function setupAuthHook() {
|
||||
console.log('🔐 Auth Hook Setup Script\n')
|
||||
|
||||
// Check if function exists by trying to call it with a test payload
|
||||
// This is more reliable than querying pg_proc directly
|
||||
const { error } = await supabaseAdmin.rpc('hook_check_duplicate_email', {
|
||||
event: JSON.stringify({
|
||||
user: {
|
||||
email: 'test@example.com'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// If function doesn't exist, we'll get a "function does not exist" error
|
||||
// If it exists but returns an error, that's fine - we just want to check existence
|
||||
if (error && error.message?.includes('does not exist')) {
|
||||
console.error('❌ Function niet gevonden:', error.message)
|
||||
console.log('\n📝 Stap 1: Run eerst de migration:')
|
||||
console.log(' supabase db push')
|
||||
console.log(' Of via Supabase Dashboard → SQL Editor')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('✅ Function exists: hook_check_duplicate_email')
|
||||
console.log('\n📝 Stap 2: Configureer hook link in Supabase Dashboard:')
|
||||
console.log(' 1. Ga naar: https://supabase.com/dashboard/project/YOUR_PROJECT/auth/hooks')
|
||||
console.log(' 2. Klik "Add hook"')
|
||||
console.log(' 3. Selecteer:')
|
||||
console.log(' - Hook Type: before-user-created')
|
||||
console.log(' - Hook Name: check-duplicate-email')
|
||||
console.log(' - Hook Function: hook_check_duplicate_email')
|
||||
console.log(' - Hook URL: (leeg laten)')
|
||||
console.log(' 4. Klik "Save"')
|
||||
console.log('\n💡 Tip: Deze stap moet handmatig omdat Supabase Management API')
|
||||
console.log(' Auth Hooks configuratie nog niet ondersteunt.')
|
||||
console.log('\n✅ Setup compleet! Test met: pnpm run test:auth-hook')
|
||||
}
|
||||
|
||||
setupAuthHook().catch(console.error)
|
||||
```
|
||||
|
||||
**Toevoegen aan `package.json`:**
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"setup:auth-hook": "tsx scripts/setup-auth-hook.ts"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **E1.S3 - Documentatie**
|
||||
|
||||
**Bestand:** `docs/AUTH_HOOK_SETUP.md`
|
||||
|
||||
```markdown
|
||||
# Auth Hook Setup Guide
|
||||
|
||||
## Overzicht
|
||||
|
||||
Deze hook detecteert duplicate emails VOOR een user wordt aangemaakt,
|
||||
waardoor gebruikers direct feedback krijgen als hun email al geregistreerd is.
|
||||
|
||||
## Setup (Eerste Keer)
|
||||
|
||||
### Stap 1: Deploy Migration
|
||||
|
||||
\`\`\`bash
|
||||
# Via Supabase CLI (aanbevolen)
|
||||
supabase db push
|
||||
|
||||
# Of via Dashboard
|
||||
# Ga naar SQL Editor → Run migration file
|
||||
\`\`\`
|
||||
|
||||
### Stap 2: Configureer Hook Link
|
||||
|
||||
**Helaas moet dit handmatig via Dashboard** (Supabase ondersteunt dit nog niet via API):
|
||||
|
||||
1. Ga naar: [Supabase Dashboard → Auth → Hooks](https://supabase.com/dashboard/project/_/auth/hooks)
|
||||
2. Klik "Add hook"
|
||||
3. Vul in:
|
||||
- **Hook Type:** \`before-user-created\`
|
||||
- **Hook Name:** \`check-duplicate-email\`
|
||||
- **Hook Function:** \`hook_check_duplicate_email\`
|
||||
- **Hook URL:** (leeg laten)
|
||||
4. Klik "Save"
|
||||
|
||||
### Stap 3: Test
|
||||
|
||||
\`\`\`bash
|
||||
pnpm run setup:auth-hook
|
||||
\`\`\`
|
||||
|
||||
## Herhaalbaarheid
|
||||
|
||||
- ✅ Functie code staat in migrations (version controlled)
|
||||
- ⚠️ Hook link moet per omgeving handmatig worden geconfigureerd
|
||||
- 📝 Documentatie staat in Git
|
||||
|
||||
## Toekomstige Verbeteringen
|
||||
|
||||
Zodra Supabase Management API Auth Hooks ondersteunt, kunnen we:
|
||||
- Hook link volledig automatiseren
|
||||
- Setup script uitbreiden met API calls
|
||||
- CI/CD pipeline voor hook configuratie
|
||||
|
||||
## Flexibiliteit
|
||||
|
||||
De functie is geschreven in standaard PostgreSQL, waardoor:
|
||||
- ✅ Werkt met elke auth provider die Postgres functies ondersteunt
|
||||
- ✅ Makkelijk te migreren naar andere auth systemen
|
||||
- ✅ Geen vendor lock-in voor de logica zelf
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **E1.S4 - Update Client Error Handling**
|
||||
|
||||
**Bestand:** `app/login/page.tsx`
|
||||
|
||||
**Wat wijzigen:**
|
||||
- Update error handling om hook error messages te tonen
|
||||
- Hook errors komen binnen via `error.message`
|
||||
- Verbeter UX door automatisch naar login mode te switchen bij duplicate email
|
||||
|
||||
**Verbeterde code:**
|
||||
```typescript
|
||||
catch (error: any) {
|
||||
const errorMessage = error.message || 'Er ging iets mis. Probeer opnieuw.'
|
||||
|
||||
// Check if it's a duplicate email error from hook
|
||||
if (errorMessage.includes('al geregistreerd')) {
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: errorMessage
|
||||
})
|
||||
// Switch to login mode after 2 seconds
|
||||
setTimeout(() => {
|
||||
setMode('login')
|
||||
setPassword('')
|
||||
setConfirmPassword('')
|
||||
}, 2000)
|
||||
} else {
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: errorMessage
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Implementatie Volgorde
|
||||
|
||||
**Stap 1: Create Migration** (30 min)
|
||||
1. Maak `supabase/migrations/20250118120000_auth_hook_duplicate_email.sql`
|
||||
2. Deploy via `supabase db push` of Dashboard
|
||||
|
||||
**Stap 2: Create Setup Script** (30 min)
|
||||
1. Maak `scripts/setup-auth-hook.ts`
|
||||
2. Test script: `pnpm run setup:auth-hook`
|
||||
|
||||
**Stap 3: Create Documentation** (15 min)
|
||||
1. Maak `docs/AUTH_HOOK_SETUP.md`
|
||||
2. Update main README met link
|
||||
|
||||
**Stap 4: Configure Hook Link** (5 min)
|
||||
1. Run setup script voor instructies
|
||||
2. Volg Dashboard stappen
|
||||
|
||||
**Stap 5: Update Client** (15 min)
|
||||
1. Verbeter error handling
|
||||
2. Test duplicate email scenario
|
||||
|
||||
**Stap 6: Testing** (30 min)
|
||||
1. Test signup met nieuw email → moet werken
|
||||
2. Test signup met bestaand email → moet error geven
|
||||
3. Test signup met bestaand email + verkeerd password → moet error geven
|
||||
4. Test signup met bestaand email + correct password → moet error geven (want account bestaat al)
|
||||
|
||||
**Totaal: ~2.5 uur werk**
|
||||
|
||||
---
|
||||
|
||||
## 8. Testing Checklist
|
||||
|
||||
| Test Case | Scenario | Expected Result |
|
||||
|-----------|----------|-----------------|
|
||||
| TC1 | Signup met nieuw email | Account aangemaakt, email verzonden |
|
||||
| TC2 | Signup met bestaand email | Error: "Dit emailadres is al geregistreerd..." |
|
||||
| TC3 | Signup met bestaand email (case variant: Email@Example.com) | Error: "Dit emailadres is al geregistreerd..." |
|
||||
| TC4 | Signup met lege/NULL email | Error: "Email adres is verplicht." |
|
||||
| TC5 | Hook disabled → signup met bestaand email | Oude gedrag (geen error, maar ook geen email) |
|
||||
|
||||
---
|
||||
|
||||
## 9. Voordelen van Code-First Aanpak
|
||||
|
||||
✅ **Version Control**: Functie code staat in Git
|
||||
✅ **Herhaalbaar**: Migrations kunnen opnieuw worden gedraaid
|
||||
✅ **Documentatie**: Alles staat in code en docs
|
||||
✅ **Flexibel**: Makkelijk te migreren naar andere auth providers
|
||||
✅ **Team-vriendelijk**: Iedereen ziet wat er gebeurt
|
||||
✅ **CI/CD Ready**: Migrations kunnen geautomatiseerd worden
|
||||
✅ **Server-side**: Veilig, kan niet worden omzeild door client
|
||||
✅ **Betrouwbaar**: Werkt altijd, ongeacht password
|
||||
✅ **Duidelijke UX**: Gebruiker krijgt direct feedback
|
||||
✅ **Security**: Behoudt email enumeration protection voor andere scenario's
|
||||
✅ **Performance**: Direct database check, geen extra HTTP calls
|
||||
|
||||
---
|
||||
|
||||
## 10. Limitaties & Workarounds
|
||||
|
||||
**Limitaties:**
|
||||
- ⚠️ Hook link configuratie kan niet volledig in code (Supabase limietatie)
|
||||
- ⚠️ Setup script geeft alleen instructies (geen API beschikbaar)
|
||||
|
||||
**Workarounds:**
|
||||
- ✅ Duidelijke documentatie voor handmatige stap
|
||||
- ✅ Setup script valideert dat functie bestaat
|
||||
- ✅ Toekomst-proof: zodra API beschikbaar is, kunnen we automatiseren
|
||||
|
||||
---
|
||||
|
||||
## 11. Alternatieve Aanpakken (Niet Aanbevolen)
|
||||
|
||||
### **Optie X: Email Confirmation UIT zetten**
|
||||
- ❌ Minder secure (email enumeration mogelijk)
|
||||
- ✅ Wel makkelijker duplicate detection
|
||||
- **Niet aanbevolen voor production**
|
||||
|
||||
### **Optie Y: Client-side login check (huidige aanpak)**
|
||||
- ⚠️ Werkt alleen als password correct is
|
||||
- ⚠️ Extra API call
|
||||
- ⚠️ Kan niet onderscheiden tussen "nieuw account" en "verkeerd password"
|
||||
- **Acceptabel voor prototype, niet voor production**
|
||||
|
||||
---
|
||||
|
||||
## 12. Definition of Done
|
||||
|
||||
✅ **Epic 1 compleet wanneer:**
|
||||
- Postgres functie bestaat en werkt (in migrations)
|
||||
- Setup script werkt en geeft duidelijke instructies
|
||||
- Documentatie compleet en up-to-date
|
||||
- Hook geconfigureerd in Supabase Dashboard
|
||||
- Test signup met bestaand email geeft error
|
||||
- Test signup met nieuw email werkt normaal
|
||||
- Error messages zijn gebruiksvriendelijk
|
||||
- Geen breaking changes aan bestaande auth flow
|
||||
- Git commit: `feat: Add auth hook for duplicate email detection`
|
||||
|
||||
---
|
||||
|
||||
## 13. MVP vs Production
|
||||
|
||||
**Wat zit er in MVP (huidige plan):**
|
||||
- ✅ Duplicate email detection
|
||||
- ✅ NULL/empty email validation
|
||||
- ✅ Case-insensitive matching
|
||||
- ✅ Email normalisatie (lowercase + trim)
|
||||
- ✅ Duidelijke error messages
|
||||
- ✅ Setup script voor validatie
|
||||
|
||||
**Wat komt later (Production - Optioneel):**
|
||||
- [ ] Rate limiting op hook (voorkom abuse)
|
||||
- [ ] Logging tabel voor duplicate attempts
|
||||
- [ ] Analytics: hoeveel duplicate attempts per dag?
|
||||
- [ ] Monitoring/alerting voor hook failures
|
||||
- [ ] Custom error messages per scenario
|
||||
|
||||
---
|
||||
|
||||
**Status:** ⏳ Ready for Implementation
|
||||
**Geschatte Tijd:** 2.5 uur
|
||||
**Next Step:** Maak migration file `supabase/migrations/20250118120000_auth_hook_duplicate_email.sql`
|
||||
|
||||
452
docs/specs/archive/bouwplan-login-refactor-v1.0.md
Normal file
452
docs/specs/archive/bouwplan-login-refactor-v1.0.md
Normal file
@@ -0,0 +1,452 @@
|
||||
# 🚀 Bouwplan — Login Refactor: Email + Wachtwoord Primair
|
||||
|
||||
**Projectnaam:** Mini EPD Demo Platform - Login Optimalisatie
|
||||
**Versie:** v1.0
|
||||
**Datum:** 18-01-2025
|
||||
**Auteur:** Colin (met Claude Code)
|
||||
**Scope:** Login page herontwerp (Email+Password primair, Magic Link secundair)
|
||||
|
||||
---
|
||||
|
||||
## 1. Doel en Context
|
||||
|
||||
🎯 **Doel:** De login flow optimaliseren voor een demo platform door Email + Wachtwoord de primaire methode te maken in plaats van Magic Link.
|
||||
|
||||
📘 **Toelichting:**
|
||||
Het huidige login scherm heeft Magic Link als primaire methode, maar voor een **demo platform** is dit suboptimaal omdat prospects direct willen inloggen zonder email roundtrip. We maken Email + Password de primaire methode en verplaatsen Magic Link naar een secundaire optie.
|
||||
|
||||
**Huidige situatie:**
|
||||
- Magic Link is default (toggle nodig voor demo login)
|
||||
- Demo credentials verborgen achter extra click
|
||||
- 2-3 extra clicks voor demo users
|
||||
- Conditional rendering met `showDemoLogin` state
|
||||
|
||||
**Gewenste situatie:**
|
||||
- Email + Password formulier als primair scherm
|
||||
- One-click demo login prominent zichtbaar
|
||||
- Magic Link als minimale fallback (kleine link onderaan)
|
||||
- Focus op snelheid: Quick Demo button is de CTA
|
||||
|
||||
**Context:**
|
||||
- Dit is een DEMO platform, geen productie EPD
|
||||
- Primaire use case: Prospects willen snel kijken
|
||||
- Secundaire use case: Serieuze trial users maken eigen account
|
||||
- Magic Link blijft beschikbaar voor zero-password signup
|
||||
|
||||
---
|
||||
|
||||
## 2. Uitgangspunten
|
||||
|
||||
### 2.2 Projectkaders
|
||||
|
||||
- **Tijd:** 2-3 uur voor volledige implementatie + testing
|
||||
- **Team:** 1 developer (zelfstandig uit te voeren)
|
||||
- **Demo accounts:** Bestaande demo users blijven ongewijzigd
|
||||
- **Breaking changes:** GEEN - Alle bestaande auth flows blijven werken
|
||||
- **Deployment:** Auto-deploy via Vercel na git push
|
||||
|
||||
### 2.3 Programmeer Uitgangspunten
|
||||
|
||||
**Code Quality Principles:**
|
||||
- ✅ **DRY:** Hergebruik bestaande auth functies (`loginWithPassword`, `loginWithMagicLink`)
|
||||
- ✅ **KISS:** Eenvoudige layout refactor, geen complexe state management
|
||||
- ✅ **SOC:** UI changes in page.tsx, auth logic blijft in lib/auth/client.ts
|
||||
- ✅ **YAGNI:** Alleen login UI optimalisatie, geen extra conversion features
|
||||
|
||||
**Security:**
|
||||
- Demo credentials blijven in info box (niet hardcoded in code)
|
||||
- Bestaande Supabase auth flows blijven ongewijzigd
|
||||
- Geen nieuwe environment variables nodig
|
||||
|
||||
**Bestaande Bestanden (NIET wijzigen):**
|
||||
```
|
||||
lib/auth/client.ts - Auth functies
|
||||
lib/auth/server.ts - Server auth
|
||||
middleware.ts - Route protection
|
||||
app/auth/callback/route.ts - Magic link callback
|
||||
app/auth/logout/route.ts - Logout handler
|
||||
components/ui/button.tsx - UI components
|
||||
```
|
||||
|
||||
**Te Wijzigen Bestanden:**
|
||||
```
|
||||
app/login/page.tsx - Volledige UI refactor
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Epics & Stories Overzicht
|
||||
|
||||
🎯 **Doel:** De bouw opdelen in logische epics (fases) met stories (subfases).
|
||||
|
||||
| Epic ID | Titel | Doel | Status | Stories | Geschatte Tijd |
|
||||
|---------|-------|------|--------|---------|----------------|
|
||||
| E1 | Login UI Refactor | Email+Password primair maken | ⏳ To Do | 3 | 1-2 uur |
|
||||
| E2 | Demo UX Verbetering | One-click demo + betere copy | ⏳ To Do | 2 | 30 min |
|
||||
| E3 | Testing & Verificatie | Alle flows testen | ⏳ To Do | 2 | 30 min |
|
||||
|
||||
**Totale schatting:** 2-3 uur werk
|
||||
|
||||
---
|
||||
|
||||
## 4. Epics & Stories (Uitwerking)
|
||||
|
||||
### Epic 1 — Login UI Refactor
|
||||
|
||||
**Epic Doel:** Email + Password formulier wordt de primaire login methode zonder toggle logic.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|-----------------|
|
||||
| E1.S1 | Verwijder conditional toggle logic | `showDemoLogin` state verwijderd, geen toggle buttons meer | ⏳ | — | 2 |
|
||||
| E1.S2 | Herstructureer page layout | Email+Password primair, Magic Link achter kleine link | ⏳ | E1.S1 | 3 |
|
||||
| E1.S3 | Update copy & labels | Focus op Quick Demo, Magic Link minimaal | ⏳ | E1.S2 | 1 |
|
||||
|
||||
**Technical Notes:**
|
||||
|
||||
**E1.S1 - Toggle Logic Aanpassen:**
|
||||
```typescript
|
||||
// VERWIJDER:
|
||||
const [showDemoLogin, setShowDemoLogin] = useState(false)
|
||||
|
||||
// VERVANG door:
|
||||
const [showMagicLink, setShowMagicLink] = useState(false)
|
||||
|
||||
// VERWIJDER oude toggle buttons:
|
||||
<button onClick={() => setShowDemoLogin(true)}>Login met Demo Account</button>
|
||||
<button onClick={() => setShowDemoLogin(false)}>← Terug</button>
|
||||
|
||||
// NIEUWE logic:
|
||||
// Default = Email+Password form zichtbaar
|
||||
// showMagicLink = true → Toon Magic Link form in plaats van password form
|
||||
```
|
||||
|
||||
**E1.S2 - Layout Herstructureren:**
|
||||
```
|
||||
NIEUWE STRUCTUUR:
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Header: "Login" │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [QuickDemoButton - zie E2.S1] │
|
||||
│ │
|
||||
│ ─── of vul handmatig in ─── │
|
||||
│ │
|
||||
│ Email: [________________] │
|
||||
│ Password: [________________] │
|
||||
│ [Login Button] │
|
||||
│ │
|
||||
│ [Demo Credentials Info Box - E2.S2] │
|
||||
│ │
|
||||
│ Liever zonder wachtwoord? │
|
||||
│ [Gebruik magic link →] │
|
||||
└─────────────────────────────────────────┘
|
||||
|
||||
MAGIC LINK FLOW (na click op link):
|
||||
- Conditional state: showMagicLink = true
|
||||
- Toon email input + "Stuur Magic Link" button
|
||||
- "← Terug naar login" link
|
||||
```
|
||||
|
||||
**E1.S3 - Copy Updates:**
|
||||
```typescript
|
||||
// OUD → NIEUW
|
||||
"🔑 Demo Account Login" → "Login"
|
||||
"📧 Login met Magic Link" → [VERBORGEN achter link]
|
||||
"Login met Demo Account" → [VERWIJDERD - QuickDemoButton vervangt dit]
|
||||
"Snelle Demo Login" → "🚀 Start Demo (geen registratie)"
|
||||
|
||||
// NIEUW
|
||||
"Liever zonder wachtwoord?" → Link onderaan
|
||||
"Gebruik magic link →" → Toont magic link formulier
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Epic 2 — Demo UX Verbetering
|
||||
|
||||
**Epic Doel:** Demo gebruikers kunnen met één click inloggen zonder formulier in te vullen.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|-----------------|
|
||||
| E2.S1 | Implementeer QuickDemoButton | One-click demo login zonder form invullen | ⏳ | E1.S2 | 3 |
|
||||
| E2.S2 | Voeg credentials info box toe | Demo credentials zichtbaar voor manual login | ⏳ | E1.S2 | 2 |
|
||||
|
||||
**Technical Notes:**
|
||||
|
||||
**E2.S1 - QuickDemoButton Component:**
|
||||
```typescript
|
||||
// Inline component in app/login/page.tsx
|
||||
// (of aparte component indien herbruikbaar elders)
|
||||
|
||||
function QuickDemoButton() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
async function handleQuickDemo() {
|
||||
setLoading(true)
|
||||
try {
|
||||
const result = await loginWithPassword(
|
||||
'demo@mini-ecd.demo',
|
||||
'Demo2024!'
|
||||
)
|
||||
|
||||
if (result.success) {
|
||||
setMessage({
|
||||
type: 'success',
|
||||
text: 'Ingelogd! Redirect naar EPD...'
|
||||
})
|
||||
setTimeout(() => router.push('/epd/clients'), 1000)
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: 'Login mislukt. Probeer opnieuw.'
|
||||
})
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full bg-teal-600 hover:bg-teal-700"
|
||||
onClick={handleQuickDemo}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Demo laden...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
🚀 Start Demo (geen registratie)
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**E2.S2 - Credentials Info Box:**
|
||||
```typescript
|
||||
// Info card onder password form, boven Magic Link divider
|
||||
|
||||
<div className="rounded-lg bg-slate-50 border border-slate-200 p-4 space-y-2">
|
||||
<p className="text-sm font-medium text-slate-700">
|
||||
Demo Account Credentials:
|
||||
</p>
|
||||
<div className="text-xs text-slate-600 space-y-1">
|
||||
<p>📧 Email: <code className="bg-white px-2 py-1 rounded">demo@mini-ecd.demo</code></p>
|
||||
<p>🔒 Wachtwoord: <code className="bg-white px-2 py-1 rounded">Demo2024!</code></p>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 italic">
|
||||
💡 Of gebruik de "Start Demo" knop voor directe toegang
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Epic 3 — Testing & Verificatie
|
||||
|
||||
**Epic Doel:** Alle login flows werken correct na refactor zonder regressies.
|
||||
|
||||
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|
||||
|----------|--------------|---------------------|--------|------------------|-----------------|
|
||||
| E3.S1 | Test alle login flows | Alle 3 methoden werken zonder errors | ⏳ | E2.S2 | 2 |
|
||||
| E3.S2 | Responsive & accessibility check | Werkt op mobile, keyboard navigatie OK | ⏳ | E3.S1 | 1 |
|
||||
|
||||
**Technical Notes:**
|
||||
|
||||
**E3.S1 - Login Flow Test Scenarios:**
|
||||
|
||||
| Test Case | Scenario | Expected Result | Status |
|
||||
|-----------|----------|-----------------|--------|
|
||||
| TC1 | Click "Start Demo" button | Direct inloggen → redirect /epd/clients | ⏳ |
|
||||
| TC2 | Manual login (demo credentials) | Formulier submit → success → redirect | ⏳ |
|
||||
| TC3 | Magic link (geldig email) | "Check je email" message → email ontvangen | ⏳ |
|
||||
| TC4 | Invalid password | Error message: "Ongeldige inloggegevens" | ⏳ |
|
||||
| TC5 | Empty fields | Validation error | ⏳ |
|
||||
| TC6 | Network error | User-friendly error message | ⏳ |
|
||||
|
||||
**E3.S2 - Responsive & Accessibility Checklist:**
|
||||
|
||||
**Responsive:**
|
||||
- [ ] 320px viewport (iPhone SE): Layout niet broken
|
||||
- [ ] 768px viewport (iPad): Twee-kolom layout werkt
|
||||
- [ ] 1920px viewport (Desktop): Maximale breedte begrensd
|
||||
|
||||
**Accessibility:**
|
||||
- [ ] Tab-order logisch: QuickDemo → Email → Password → Login → MagicLink Email → Send
|
||||
- [ ] Focus states zichtbaar (outline/ring)
|
||||
- [ ] Error messages hebben `role="alert"`
|
||||
- [ ] Buttons hebben duidelijke labels
|
||||
- [ ] Contrast ratio > 4.5:1 (WCAG AA)
|
||||
- [ ] Screen reader test: NVDA/VoiceOver leest alles voor
|
||||
|
||||
**Browser Testing:**
|
||||
- [ ] Chrome (latest)
|
||||
- [ ] Firefox (latest)
|
||||
- [ ] Safari (macOS + iOS)
|
||||
- [ ] Edge (latest)
|
||||
|
||||
---
|
||||
|
||||
## 5. Kwaliteit & Testplan
|
||||
|
||||
🎯 **Doel:** Vastleggen hoe de kwaliteit van de refactor wordt geborgd.
|
||||
|
||||
### Manual Test Checklist (voor deployment)
|
||||
|
||||
**Happy Flows:**
|
||||
- [ ] Quick demo button: Click → Loading state → Success → Redirect /epd/clients
|
||||
- [ ] Manual email+password: Type credentials → Submit → Redirect
|
||||
- [ ] Magic link: Enter email → Submit → "Check email" message → Email ontvangen
|
||||
|
||||
**Error Flows:**
|
||||
- [ ] Wrong password: Error message "Ongeldige inloggegevens"
|
||||
- [ ] Invalid email format: Validation error
|
||||
- [ ] Network timeout: User-friendly error
|
||||
- [ ] Rate limit (4 emails/hour): Supabase error handled
|
||||
|
||||
**UI/UX:**
|
||||
- [ ] Loading states show spinners
|
||||
- [ ] Success messages turn teal-50 background
|
||||
- [ ] Error messages turn red-50 background
|
||||
- [ ] All text readable (contrast check)
|
||||
- [ ] No console errors/warnings
|
||||
- [ ] No layout shift during loading
|
||||
|
||||
**Regression Testing:**
|
||||
- [ ] Existing demo accounts still work
|
||||
- [ ] `/auth/callback` magic link flow unchanged
|
||||
- [ ] Middleware still protects `/epd/*` routes
|
||||
- [ ] Logout still works (`/auth/logout`)
|
||||
- [ ] Session refresh in middleware works
|
||||
|
||||
---
|
||||
|
||||
## 6. Risico's & Mitigatie
|
||||
|
||||
🎯 **Doel:** Risico's vroeg signaleren en voorzien van oplossingen.
|
||||
|
||||
| Risico | Kans | Impact | Mitigatie | Owner |
|
||||
|--------|------|--------|-----------|-------|
|
||||
| Breaking change in login flow | Laag | Hoog | - Behoud alle bestaande auth functies<br>- Test beide flows grondig<br>- Rollback plan ready | Developer |
|
||||
| Demo credentials exposure | Middel | Laag | - Info box toont credentials (is OK voor demo)<br>- Geen hardcoded passwords in source<br>- RLS policies beschermen database | Developer |
|
||||
| Magic link users verward | Middel | Laag | - Duidelijke "Of gebruik Magic Link" sectie<br>- Behoud alle bestaande UX voor magic link | Developer |
|
||||
| Mobile layout breaks | Laag | Middel | - Test op 320px viewport<br>- Use responsive Tailwind classes<br>- Max-width container | Developer |
|
||||
| Supabase rate limit tijdens testing | Hoog | Laag | - Use demo account voor testing (geen magic link)<br>- Test magic link max 1x per test run | Developer |
|
||||
| Accessibility regression | Middel | Middel | - Tab-order testing<br>- Screen reader check<br>- WCAG contrast check | Developer |
|
||||
|
||||
---
|
||||
|
||||
## 7. Definition of Done
|
||||
|
||||
**Epic 1-3 zijn compleet wanneer:**
|
||||
|
||||
✅ **Functional Requirements:**
|
||||
- Email + Password is primair formulier (bovenaan pagina)
|
||||
- Quick demo button werkt (one-click login)
|
||||
- Magic Link optie minimaal zichtbaar (kleine link)
|
||||
- Demo credentials info box zichtbaar
|
||||
- Alle 3 login methoden getest en werkend
|
||||
- Focus op Quick Demo als primaire CTA
|
||||
|
||||
✅ **Quality Requirements:**
|
||||
- Geen console errors/warnings
|
||||
- Mobile responsive (320px - 1920px)
|
||||
- Accessible (keyboard nav + screen reader)
|
||||
- Loading states correct
|
||||
- Error messages user-friendly
|
||||
|
||||
✅ **Code Quality:**
|
||||
- Bestaande auth functies ongewijzigd
|
||||
- Clean code (geen commented code)
|
||||
- Consistent Tailwind styling
|
||||
- Type-safe (TypeScript errors = 0)
|
||||
|
||||
✅ **Documentation:**
|
||||
- Git commit message: `feat: Login UI refactor - Email+Password primair`
|
||||
- Code comments voor complexe logica
|
||||
- Dit bouwplan bijgewerkt met "✅ Gereed" status
|
||||
|
||||
✅ **Deployment:**
|
||||
- Lokaal getest (npm run dev)
|
||||
- Git commit + push
|
||||
- Vercel auto-deploy succesvol
|
||||
- Production smoke test uitgevoerd
|
||||
|
||||
---
|
||||
|
||||
## 8. Implementatie Volgorde
|
||||
|
||||
**Aanbevolen volgorde:**
|
||||
|
||||
1. **E1.S1** - Verwijder toggle logic (15 min)
|
||||
- Clean up `showDemoLogin` state
|
||||
- Verwijder toggle buttons
|
||||
|
||||
2. **E1.S2** - Herstructureer layout (30 min)
|
||||
- Email+Password form bovenaan
|
||||
- Dividers toevoegen
|
||||
- Magic Link onderaan
|
||||
|
||||
3. **E1.S3** - Update copy (10 min)
|
||||
- Alle labels updaten
|
||||
- Verwarrende tekst verwijderen
|
||||
|
||||
4. **E2.S1** - QuickDemoButton (20 min)
|
||||
- Component implementeren
|
||||
- Loading states
|
||||
- Error handling
|
||||
|
||||
5. **E2.S2** - Credentials info box (10 min)
|
||||
- Styled info card
|
||||
- Demo credentials display
|
||||
|
||||
6. **E3.S1** - Test alle flows (20 min)
|
||||
- Happy flows
|
||||
- Error flows
|
||||
- Regression tests
|
||||
|
||||
7. **E3.S2** - Responsive + A11y (15 min)
|
||||
- Mobile viewport test
|
||||
- Keyboard navigation
|
||||
- Screen reader check
|
||||
|
||||
**Total: ~2 uur**
|
||||
|
||||
---
|
||||
|
||||
## 9. Referenties
|
||||
|
||||
**Mission Control Documents:**
|
||||
- **PRD:** `docs/specs/prd-mini-ecd-v1.2.md`
|
||||
- **FO:** `docs/specs/fo-mini-ecd-v2.md`
|
||||
- **TO:** `docs/specs/to-mini-ecd-v1_2.md`
|
||||
- **Auth Setup:** `docs/AUTH_SETUP.md`
|
||||
|
||||
**Code References:**
|
||||
- Login page: `app/login/page.tsx` (TE WIJZIGEN)
|
||||
- Auth client: `lib/auth/client.ts` (ONGEWIJZIGD)
|
||||
- Auth server: `lib/auth/server.ts` (ONGEWIJZIGD)
|
||||
- Middleware: `middleware.ts` (ONGEWIJZIGD)
|
||||
|
||||
**External Resources:**
|
||||
- Repository: `https://github.com/[org]/15-mini-epd-prototype`
|
||||
- Deployment: Vercel (auto-deploy on push)
|
||||
- Supabase Project: `dqugbrpwtisgyxscpefg` (EU region)
|
||||
|
||||
---
|
||||
|
||||
## 10. Versiehistorie
|
||||
|
||||
| Versie | Datum | Auteur | Wijziging |
|
||||
|--------|-------|--------|-----------|
|
||||
| v1.0 | 18-01-2025 | Colin | Initiële versie - Login refactor bouwplan |
|
||||
|
||||
---
|
||||
|
||||
**Status:** ⏳ Ready for Implementation
|
||||
**Next Steps:** Start met E1.S1 (toggle logic verwijderen)
|
||||
1168
docs/specs/archive/design-specs-manifesto-website.md
Normal file
1168
docs/specs/archive/design-specs-manifesto-website.md
Normal file
File diff suppressed because it is too large
Load Diff
681
docs/specs/archive/fo-live-transcriptie-v1.md
Normal file
681
docs/specs/archive/fo-live-transcriptie-v1.md
Normal file
@@ -0,0 +1,681 @@
|
||||
# 🧩 Functioneel Ontwerp (FO) — Live Transcriptie & AI Verslag
|
||||
|
||||
**Projectnaam:** Mini-ECD - Live Transcriptie Feature
|
||||
**Versie:** v1.0
|
||||
**Datum:** 19-11-2024
|
||||
**Auteur:** Colin van der Heijden (AI Speedrun)
|
||||
|
||||
---
|
||||
|
||||
## 1. Doel en relatie met het PRD
|
||||
🎯 **Doel van dit document:**
|
||||
Het Functioneel Ontwerp beschrijft **hoe** de live transcriptie en AI-verslag functionaliteit werkt binnen het Mini-ECD systeem. Dit document vertaalt de behoefte uit het PRD ("behandelaars willen minder tijd kwijt zijn aan typen") naar concrete gebruikerservaringen en schermflows.
|
||||
|
||||
📘 **Toelichting aan de lezer:**
|
||||
Dit FO beschrijft twee nauw verbonden features:
|
||||
1. **Live Transcriptie** - Real-time spraak-naar-tekst tijdens gesprekken (Deepgram)
|
||||
2. **AI Verslag Structurering** - Transformatie van ruwe transcriptie naar gestructureerd verslag (Claude)
|
||||
|
||||
Deze features zijn dé showcase van "Software on Demand" - waar traditionele EPD's 30 minuten handmatig typen vereisen, doen wij dit in 2 minuten AI-tijd.
|
||||
|
||||
**Relatie met PRD v1.2:**
|
||||
- User Story US-02: "Intakeverslag schrijven met AI-ondersteuning"
|
||||
- Epic E4: "AI Integration" (Week 3)
|
||||
- Succes criterium: "<5s AI response time"
|
||||
|
||||
---
|
||||
|
||||
## 2. Overzicht van de belangrijkste onderdelen
|
||||
🎯 **Doel:** Inzicht in de nieuwe componenten binnen de bestaande EPD-structuur.
|
||||
|
||||
**Nieuwe componenten:**
|
||||
1. **Live Opname Interface** - Microfoon controles, timer, real-time feedback
|
||||
2. **Transcriptie Editor** - TipTap editor met live text streaming
|
||||
3. **AI Verslag Generator** - Claude-powered structurering
|
||||
4. **Audio Management** - Opslaan/deleten opnames (privacy)
|
||||
|
||||
**Bestaande componenten (aangepast):**
|
||||
- Intake Editor - uitgebreid met opname-functionaliteit
|
||||
- AI Rail - nieuwe actie "Structureer Verslag"
|
||||
- Client Dashboard - toon opname-status
|
||||
|
||||
---
|
||||
|
||||
## 3. User Stories
|
||||
|
||||
🎯 **Doel:** Beschrijven wat gebruikers moeten kunnen doen vanuit hun perspectief.
|
||||
|
||||
| ID | Rol | Doel / Actie | Verwachte waarde | Prioriteit |
|
||||
|----|------|---------------|------------------|-------------|
|
||||
| US-10 | Behandelaar | Live opname starten tijdens gesprek | Handen vrij, focus op cliënt | Hoog |
|
||||
| US-11 | Behandelaar | Real-time zien wat er getranscribeerd wordt | Vertrouwen dat het werkt | Hoog |
|
||||
| US-12 | Behandelaar | Opname pauzeren (telefoon, onderbreking) | Geen irrelevante tekst in verslag | Middel |
|
||||
| US-13 | Behandelaar | Transcriptie handmatig corrigeren | Controle over eindresultaat | Hoog |
|
||||
| US-14 | Behandelaar | AI laten structureren tot verslag | Geen handmatig herstructureren | Hoog |
|
||||
| US-15 | Behandelaar | Audio bewaren voor verificatie | Terughoren bij onduidelijkheid | Laag |
|
||||
| US-16 | Demo-bezoeker | Live demo zien werken | Geloven dat het echt werkt | Kritiek |
|
||||
| US-17 | Privacy Officer | Audio auto-delete na X dagen | AVG compliance | Middel |
|
||||
|
||||
---
|
||||
|
||||
## 4. Functionele werking per onderdeel
|
||||
|
||||
### 4.1 Live Opname Interface
|
||||
|
||||
**Functionaliteit:**
|
||||
* Microfoon permissie vragen (browser native)
|
||||
* Audio stream naar Deepgram websocket
|
||||
* Real-time transcriptie ontvangen
|
||||
* Visual feedback (recording indicator, timer)
|
||||
|
||||
**Schermopbouw:**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ Intake: Lisa de Jong [🎤 OPNAME 00:12:34] │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────────────┐ │
|
||||
│ │ 🔴 Aan het opnemen... │ │
|
||||
│ │ │ │
|
||||
│ │ Laatst: "...moeilijk weer inslapen" │ │
|
||||
│ └──────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [TipTap Editor - Real-time transcriptie] │
|
||||
│ │
|
||||
│ Client geeft aan dat ze al 3 maanden last heeft van │
|
||||
│ slaapproblemen. Ze wordt 's nachts wakker en kan │
|
||||
│ moeilijk weer inslapen...█ │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ [⏸️ Pauzeer] [⏹️ Stop & Bewaar] [🗑️ Annuleer] │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**States:**
|
||||
- **Initieel**: Knop "🎤 Start Opname" boven editor
|
||||
- **Permission gevraagd**: Modal "Geef toegang tot microfoon"
|
||||
- **Recording**: Rode indicator, timer loopt, tekst verschijnt
|
||||
- **Paused**: Gele indicator, timer gestopt, "Hervatten" knop
|
||||
- **Stopped**: Transcriptie volledig, "Bewerken" of "AI Structureren"
|
||||
|
||||
**Interacties:**
|
||||
1. **Start Opname**
|
||||
- Klik 🎤 Start Opname
|
||||
- Browser vraagt mic permission
|
||||
- Websocket verbinding naar Deepgram
|
||||
- Timer start (00:00:00)
|
||||
- Rode 🔴 indicator verschijnt
|
||||
|
||||
2. **Tijdens Opname**
|
||||
- Gebruiker praat
|
||||
- Deepgram stuurt tekst chunks terug
|
||||
- TipTap editor append tekst real-time
|
||||
- Laatste paar woorden highlighted (fade effect)
|
||||
- Handmatig typen/corrigeren is mogelijk
|
||||
|
||||
3. **Pauzeren**
|
||||
- Klik ⏸️ Pauzeer
|
||||
- Websocket blijft open maar stuurt geen audio
|
||||
- Timer stopt
|
||||
- Indicator wordt geel 🟡
|
||||
- Klik opnieuw → Hervatten
|
||||
|
||||
4. **Stoppen**
|
||||
- Klik ⏹️ Stop & Bewaar
|
||||
- Websocket sluit
|
||||
- Final transcriptie in editor
|
||||
- Audio lokaal opgeslagen (optioneel)
|
||||
- Overschakeling naar "Bewerk Modus"
|
||||
|
||||
5. **Annuleren**
|
||||
- Klik 🗑️ Annuleer
|
||||
- Confirmation: "Weet je het zeker?"
|
||||
- Bij ja: transcriptie verwijderen
|
||||
- Bij nee: doorgaan met opname
|
||||
|
||||
**Error Scenarios:**
|
||||
- **Geen mic permission**: "Geef toegang tot microfoon om op te nemen"
|
||||
- **Internet weg**: "Verbinding verbroken. Opname gepauzeerd."
|
||||
- **Deepgram quota**: "Opname limiet bereikt. Schakel over naar typen?"
|
||||
- **Browser niet ondersteund**: "Je browser ondersteunt geen opname"
|
||||
|
||||
---
|
||||
|
||||
### 4.2 Transcriptie Editor
|
||||
|
||||
**Functionaliteit:**
|
||||
* TipTap editor met live text streaming
|
||||
* Highlight recent toegevoegde tekst
|
||||
* Manual editing tijdens/na opname
|
||||
* Auto-save elke 30 seconden
|
||||
* Undo/redo werkt met live input
|
||||
|
||||
**Schermopbouw:**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ [TipTap Toolbar: B I U • 1. " ] │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Hoofdklacht: │
|
||||
│ Client geeft aan dat ze al 3 maanden last heeft van │
|
||||
│ slaapproblemen. Ze wordt gemiddeld 3-4 keer per nacht │
|
||||
│ wakker en kan dan moeilijk weer inslapen. │
|
||||
│ │
|
||||
│ Context: │
|
||||
│ De klachten zijn begonnen na een stressvolle periode │
|
||||
│ op het werk. [LIVE: Client vertelt dat...]█ │
|
||||
│ │
|
||||
│ [Laatste update: zojuist • Auto-save actief] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- **Live highlighting**: Laatste 20 woorden in lichtblauw, fade naar normaal
|
||||
- **Typing indicator**: █ cursor pulseert tijdens transcriptie
|
||||
- **Manual override**: Behandelaar kan tijdens opname typen/corrigeren
|
||||
- **Smart paragraphs**: Deepgram smart formatting maakt alinea's
|
||||
- **Timestamps** (optioneel): [00:12:34] markers voor navigatie
|
||||
|
||||
**States:**
|
||||
- **Live transcriptie**: Tekst append + highlight
|
||||
- **Paused**: Editor blijft bewerkbaar
|
||||
- **Stopped**: Normale editor modus
|
||||
- **Saving**: "Opslaan..." indicator
|
||||
- **Saved**: "✓ Opgeslagen om 14:32"
|
||||
|
||||
---
|
||||
|
||||
### 4.3 AI Verslag Generator
|
||||
|
||||
**Functionaliteit:**
|
||||
* Claude analyseert ruwe transcriptie
|
||||
* Structureert in standaard verslag format
|
||||
* Behoudt feitelijke informatie
|
||||
* Voegt professionele tone toe
|
||||
|
||||
**Workflow:**
|
||||
```
|
||||
[Ruwe Transcriptie]
|
||||
↓
|
||||
[Klik "✨ AI Structureer Verslag"]
|
||||
↓
|
||||
[Claude verwerking 5-10s]
|
||||
↓
|
||||
[Preview in AI Rail]
|
||||
↓
|
||||
[Accepteren → Vervangt origineel]
|
||||
[OF]
|
||||
[Aanpassen → Handmatig bewerken]
|
||||
```
|
||||
|
||||
**AI Rail Layout:**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ ✨ AI VERSLAG │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ HOOFDKLACHT │
|
||||
│ Cliënt presenteert zich met │
|
||||
│ slaapproblemen sinds 3 maanden. │
|
||||
│ Nachtelijk ontwaken 3-4x, moeilijk │
|
||||
│ hervatten slaap. │
|
||||
│ │
|
||||
│ ANAMNESE │
|
||||
│ • Onset na werkstress │
|
||||
│ • Geen eerdere slaapklachten │
|
||||
│ • Normale slaaphygiëne │
|
||||
│ │
|
||||
│ OBSERVATIES │
|
||||
│ • Alert en helder │
|
||||
│ • Vermoeidheid zichtbaar │
|
||||
│ │
|
||||
│ PLAN │
|
||||
│ • Vervolgafspraak over 2 weken │
|
||||
│ • Slaapdagboek bijhouden │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [✓ Accepteer & Vervang] │
|
||||
│ [📋 Kopieer] │
|
||||
│ [✏️ Handmatig Aanpassen] │
|
||||
│ [❌ Annuleer] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Prompt Strategie (voor Claude):**
|
||||
```
|
||||
Systeem: Je bent een ervaren GGZ-behandelaar die transcripties
|
||||
omzet naar professionele verslagen.
|
||||
|
||||
Instructies:
|
||||
- Structureer in: Hoofdklacht, Anamnese, Observaties, Plan
|
||||
- Behoud alle feitelijke informatie
|
||||
- Gebruik professionele maar toegankelijke taal (B1)
|
||||
- Geen interpretaties, alleen feiten
|
||||
- Max 400 woorden
|
||||
|
||||
Input: [ruwe transcriptie]
|
||||
Output: [gestructureerd verslag in markdown]
|
||||
```
|
||||
|
||||
**States:**
|
||||
- **Idle**: Knop "✨ Structureer Verslag" beschikbaar
|
||||
- **Processing**: Spinner + "AI analyseert..." (5-10s)
|
||||
- **Preview**: Gestructureerd verslag in rail
|
||||
- **Accepted**: Vervangt editor content
|
||||
- **Error**: "Kon niet verwerken. Probeer opnieuw."
|
||||
|
||||
**Acties:**
|
||||
- **Accepteer & Vervang**: Overschrijft originele transcriptie
|
||||
- **Kopieer**: Naar clipboard (voor elders plakken)
|
||||
- **Handmatig Aanpassen**: Opent in split-view (links origineel, rechts AI)
|
||||
- **Annuleer**: Verwerpt AI-versie, behoudt origineel
|
||||
|
||||
---
|
||||
|
||||
### 4.4 Audio Management
|
||||
|
||||
**Functionaliteit:**
|
||||
* Originele audio opslaan (optioneel)
|
||||
* Replay functionaliteit
|
||||
* Privacy-compliant auto-delete
|
||||
* Storage in Supabase
|
||||
|
||||
**UI Elementen:**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ AUDIO OPNAME │
|
||||
├─────────────────────────────────────┤
|
||||
│ 📁 opname-2024-11-19-14-32.webm │
|
||||
│ Duur: 12:34 • 5.2 MB │
|
||||
│ │
|
||||
│ [▶️ Afspelen] [📥 Download] │
|
||||
│ │
|
||||
│ ⚠️ Privacy: │
|
||||
│ [ ] Audio bewaren voor verificatie │
|
||||
│ [ ] Auto-delete na 7 dagen │
|
||||
│ │
|
||||
│ [💾 Opslaan] [🗑️ Verwijderen] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Privacy Flow:**
|
||||
1. **Tijdens opname**: Audio lokaal in browser
|
||||
2. **Streaming**: Naar Deepgram (niet bewaard door hen)
|
||||
3. **Na stop**:
|
||||
- Optie 1: Direct deleten (default)
|
||||
- Optie 2: Uploaden naar Supabase Storage
|
||||
4. **Auto-delete**: Cron job verwijdert na X dagen
|
||||
|
||||
**Database Schema:**
|
||||
```typescript
|
||||
interface AudioRecording {
|
||||
id: uuid
|
||||
intake_note_id: uuid // FK naar intake_notes
|
||||
storage_path: string // Supabase Storage path
|
||||
duration_seconds: number
|
||||
file_size_bytes: number
|
||||
created_at: timestamp
|
||||
expires_at: timestamp // Auto-delete datum
|
||||
deleted: boolean
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. UI-overzicht (visuele structuur)
|
||||
|
||||
### 5.1 Intake met Live Opname (Volledig scherm)
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ Mini-ECD Logo | Intake: Lisa de Jong | [🎤 00:12:34] [⚙️] │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌────────────────────┐ ┌─────────────────────────────────────┐ │
|
||||
│ │ SIDEBAR NAV │ │ EDITOR GEBIED │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ > Overzicht │ │ [🔴 AAN HET OPNEMEN] │ │
|
||||
│ │ • Intakes │ │ │ │
|
||||
│ │ Profiel │ │ [TipTap Editor met live tekst] │ │
|
||||
│ │ Plan │ │ │ │
|
||||
│ │ Afspraken │ │ Client geeft aan dat ze al... │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ [⏸️ Pauzeer] [⏹️ Stop] [🗑️ Annuleer]│ │
|
||||
│ │ │ │ │ │
|
||||
│ └────────────────────┘ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ [Toast Area: "✓ Auto-save om 14:32" ] │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.2 AI Verslag Generatie (Split View)
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ Mini-ECD Logo | Intake: Lisa de Jong | [✨ AI Actief] [⚙️]│
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────────────────────────────┬─────────────────────────────┐
|
||||
│ │ EDITOR (Originele Transcriptie) │ AI RAIL (Verslag) │
|
||||
│ │ │ │
|
||||
│ │ Client geeft aan dat ze al 3 │ ✨ GESTRUCTUREERD VERSLAG │
|
||||
│ │ maanden last heeft van slaap- │ │
|
||||
│ │ problemen. Ze wordt gemiddeld │ HOOFDKLACHT │
|
||||
│ │ 3-4 keer per nacht wakker... │ Cliënt presenteert zich... │
|
||||
│ │ │ │
|
||||
│ │ [250+ woorden ruwe tekst] │ ANAMNESE │
|
||||
│ │ │ • Onset na werkstress │
|
||||
│ │ │ • Geen eerdere klachten │
|
||||
│ │ │ │
|
||||
│ │ │ OBSERVATIES │
|
||||
│ │ │ • Alert en helder │
|
||||
│ │ │ │
|
||||
│ │ │ PLAN │
|
||||
│ │ │ • Vervolgafspraak │
|
||||
│ │ │ │
|
||||
│ │ │ [✓ Accepteer & Vervang] │
|
||||
│ │ │ [📋 Kopieer] │
|
||||
│ │ │ [❌ Annuleer] │
|
||||
│ └──────────────────────────────────┴─────────────────────────────┘
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Interacties met AI (functionele beschrijving)
|
||||
|
||||
### 6.1 Deepgram (Speech-to-Text)
|
||||
|
||||
| Aspect | Detail |
|
||||
|--------|--------|
|
||||
| **Trigger** | Klik "🎤 Start Opname" |
|
||||
| **Input** | Live audio stream van microfoon |
|
||||
| **Verwerking** | Deepgram Nova-2 model, Nederlands, smart formatting |
|
||||
| **Output** | Real-time text chunks → append in editor |
|
||||
| **Latency** | <500ms per chunk |
|
||||
| **Feedback** | Live typing indicator + highlight recent text |
|
||||
| **Cost** | €0,0043/min = €0,19 per 45-min gesprek |
|
||||
|
||||
**Technische flow:**
|
||||
```
|
||||
Browser Mic → Websocket → Deepgram API
|
||||
↓
|
||||
Text chunks
|
||||
↓
|
||||
TipTap Editor
|
||||
```
|
||||
|
||||
### 6.2 Claude (Verslag Structurering)
|
||||
|
||||
| Aspect | Detail |
|
||||
|--------|--------|
|
||||
| **Trigger** | Klik "✨ Structureer Verslag" |
|
||||
| **Input** | Ruwe transcriptie (TipTap JSON) |
|
||||
| **Verwerking** | Claude 3.5 Sonnet met GGZ-verslag prompt |
|
||||
| **Output** | Markdown gestructureerd verslag (4 secties) |
|
||||
| **Latency** | 5-10 seconden |
|
||||
| **Feedback** | Spinner → Preview in AI Rail → Accept/Edit |
|
||||
| **Cost** | ~2000 tokens = €0,006 per verslag |
|
||||
|
||||
**Prompt template:**
|
||||
```typescript
|
||||
const PROMPT = `
|
||||
Je bent een ervaren GGZ-behandelaar. Structureer deze
|
||||
transcriptie in een professioneel verslag.
|
||||
|
||||
STRUCTUUR:
|
||||
1. HOOFDKLACHT - Waarom komt cliënt?
|
||||
2. ANAMNESE - Achtergrond, ontstaan, context
|
||||
3. OBSERVATIES - Wat viel op tijdens gesprek
|
||||
4. PLAN - Vervolgstappen
|
||||
|
||||
REGELS:
|
||||
- Behoud alle feiten
|
||||
- B1 taalniveau (professioneel maar helder)
|
||||
- Geen interpretaties
|
||||
- Max 400 woorden
|
||||
|
||||
TRANSCRIPTIE:
|
||||
${transcriptText}
|
||||
|
||||
OUTPUT (markdown format):
|
||||
`;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Gebruikersrollen en rechten
|
||||
|
||||
| Rol | Toegang | Beperkingen |
|
||||
|-----|---------|-------------|
|
||||
| **Behandelaar** | Volledige opname + AI features | Alleen eigen cliënten |
|
||||
| **Demo User** | Volledige opname + AI features | Alleen demo-data (fictief) |
|
||||
| **Manager** | Alleen transcripties lezen | Geen opname starten |
|
||||
| **Auditor** | Toegang tot audio (indien bewaard) | Read-only |
|
||||
|
||||
**Privacy niveau per rol:**
|
||||
- Behandelaar: Kan audio bewaren/deleten
|
||||
- Demo: Audio auto-delete na sessie
|
||||
- Manager: Geen audio toegang
|
||||
- Auditor: Alleen bij specifieke permissie
|
||||
|
||||
---
|
||||
|
||||
## 8. Demo Scenario (10 minuten)
|
||||
|
||||
### Scenario: GGZ Professional Demo
|
||||
|
||||
**Setup:**
|
||||
- Demo account ingelogd
|
||||
- Client "Demo Persoon" vooraf aangemaakt
|
||||
- Microfoon getest (backup: pre-recorded audio)
|
||||
|
||||
**Flow:**
|
||||
|
||||
**[0:00 - 1:00] Intro & Context**
|
||||
> "Traditioneel EPD: 30 minuten typen na gesprek. Wij: 2 minuten AI-tijd. Laten we het live zien."
|
||||
|
||||
**[1:00 - 3:00] Live Opname Demo**
|
||||
1. Navigeer naar Intakes tab
|
||||
2. Klik "🎤 Start Opname"
|
||||
3. Browser vraagt microfoon → Toestaan
|
||||
4. Begin praten (vooraf script):
|
||||
```
|
||||
"Client geeft aan dat ze de afgelopen 3 maanden
|
||||
last heeft van slaapproblemen. Ze wordt gemiddeld
|
||||
3 tot 4 keer per nacht wakker en kan dan moeilijk
|
||||
weer inslapen. De klachten zijn begonnen na een
|
||||
stressvolle periode op het werk..."
|
||||
```
|
||||
5. Toon live verschijnende tekst in editor
|
||||
6. Demonstreer Pauzeer functie (5 sec stilte)
|
||||
7. Hervatten, nog 30 seconden verder praten
|
||||
8. Stop opname
|
||||
|
||||
**[3:00 - 5:00] AI Verslag Generatie**
|
||||
1. Toon ruwe transcriptie (250+ woorden)
|
||||
2. Klik "✨ Structureer Verslag"
|
||||
3. Wacht 5 seconden (toon spinner)
|
||||
4. AI Rail toont gestructureerd verslag:
|
||||
- Hoofdklacht
|
||||
- Anamnese (bullets)
|
||||
- Observaties
|
||||
- Plan
|
||||
5. Klik "Accepteer & Vervang"
|
||||
6. Editor toont nu professioneel verslag
|
||||
|
||||
**[5:00 - 7:00] ROI Pitch**
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ TRADITIONEEL → AI SPEEDRUN │
|
||||
├────────────────────────────────────────┤
|
||||
│ 45 min gesprek 45 min gesprek │
|
||||
│ 30 min typen 2 min AI check │
|
||||
│ = 75 min totaal = 47 min totaal │
|
||||
│ │
|
||||
│ Kost: €31,25 Kost: €19,58 │
|
||||
│ (behandelaar @€25/u) (+€0,19 AI) │
|
||||
│ │
|
||||
│ BESPARING: 37% tijd, 38% kosten │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**[7:00 - 9:00] Extra Features Tour**
|
||||
- Toon audio bewaar-optie (privacy toggle)
|
||||
- Toon auto-delete na 7 dagen
|
||||
- Toon handmatig correctie tijdens opname
|
||||
- Toon pause/resume workflow
|
||||
|
||||
**[9:00 - 10:00] Q&A & Next Steps**
|
||||
> "Dit is week 2 van de build. Volgende week: behandelplan AI-generatie. Follow op LinkedIn!"
|
||||
|
||||
---
|
||||
|
||||
## 9. Edge Cases & Error Handling
|
||||
|
||||
| Scenario | Systeem Gedrag | User Feedback |
|
||||
|----------|---------------|---------------|
|
||||
| **Geen microfoon** | Disable opname-knop | "Geen microfoon gedetecteerd" |
|
||||
| **Mic permission denied** | Show instructie | "Geef toegang via browser-instellingen" |
|
||||
| **Internet valt weg** | Pause + buffer lokaal | "Verbinding verbroken, hervatten?" |
|
||||
| **Deepgram quota op** | Switch naar manual | "Opname limiet bereikt, typ handmatig" |
|
||||
| **Browser refresh tijdens opname** | Verlies opname | Warning: "Opname gaat verloren bij refresh" |
|
||||
| **Claude API timeout** | Retry 1x, dan fail | "Verwerking duurde te lang, probeer opnieuw" |
|
||||
| **Audio te groot (>25MB)** | Reject upload | "Audio te groot, max 45 minuten" |
|
||||
| **Geen spraak gedetecteerd** | Timer stopt na 30s stilte | "Geen spraak gedetecteerd, pauzeren?" |
|
||||
|
||||
---
|
||||
|
||||
## 10. Performance & Kosten
|
||||
|
||||
### 10.1 Performance Targets
|
||||
|
||||
| Metric | Target | Measurement |
|
||||
|--------|--------|-------------|
|
||||
| **Deepgram latency** | <500ms per chunk | Websocket timestamp |
|
||||
| **Editor update** | <100ms per chunk | React render time |
|
||||
| **Claude verslag** | <10s total | API call duration |
|
||||
| **Audio upload** | <5s voor 45 min | Supabase Storage speed |
|
||||
| **UI responsiveness** | 60fps tijdens opname | Chrome DevTools |
|
||||
|
||||
### 10.2 Cost Breakdown
|
||||
|
||||
**Per gesprek (45 minuten):**
|
||||
```
|
||||
Deepgram transcriptie: €0,19
|
||||
Claude structurering: €0,006
|
||||
Supabase storage: €0,001 (indien bewaard)
|
||||
──────────────────────────────
|
||||
Totaal per gesprek: €0,197
|
||||
|
||||
Traditioneel alternatief:
|
||||
30 min behandelaar tijd @ €25/uur = €12,50
|
||||
|
||||
ROI: 6.244% besparing
|
||||
```
|
||||
|
||||
**Maandelijks (100 gesprekken):**
|
||||
```
|
||||
Deepgram: €19,00
|
||||
Claude: €0,60
|
||||
Storage: €0,10
|
||||
──────────────────
|
||||
Totaal: €19,70/maand
|
||||
|
||||
Traditioneel: €1.250/maand (behandelaar-tijd)
|
||||
Besparing: €1.230/maand (98%)
|
||||
```
|
||||
|
||||
**Binnen €50/maand budget?**
|
||||
✅ Ja, zelfs met 250 gesprekken/maand = €49,25
|
||||
|
||||
---
|
||||
|
||||
## 11. Privacy & AVG Compliance
|
||||
|
||||
### 11.1 Data Flow
|
||||
|
||||
```
|
||||
1. Audio opname → Browser (lokaal)
|
||||
2. Stream → Deepgram (real-time, niet bewaard)
|
||||
3. Transcriptie → Supabase EU (bewaard)
|
||||
4. Audio → Optioneel Supabase Storage (bewaard)
|
||||
5. Auto-delete → Cron job (na X dagen)
|
||||
```
|
||||
|
||||
### 11.2 Privacy Measures
|
||||
|
||||
| Aspect | Implementatie |
|
||||
|--------|---------------|
|
||||
| **Audio storage** | Opt-in (default: niet bewaren) |
|
||||
| **Deepgram policy** | Audio niet bewaard, GDPR compliant |
|
||||
| **Supabase region** | EU (Frankfurt/London) |
|
||||
| **Encryption** | At-rest + in-transit (TLS) |
|
||||
| **Auto-delete** | Configureerbaar (7/14/30 dagen) |
|
||||
| **Access control** | RLS policies (alleen eigen data) |
|
||||
| **Audit log** | Wie heeft wanneer audio beluisterd |
|
||||
|
||||
### 11.3 Disclaimer (demo)
|
||||
|
||||
> **Demo Privacy Notice:**
|
||||
> Deze demo gebruikt fictieve data. Voor productie:
|
||||
> - Audio wordt niet bewaard door Deepgram
|
||||
> - Opslag in EU-regio servers
|
||||
> - Automatische verwijdering na [X] dagen
|
||||
> - Volledige AVG-compliance
|
||||
|
||||
---
|
||||
|
||||
## 12. Technische Dependencies
|
||||
|
||||
| Component | Library/Service | Version | Kritiek |
|
||||
|-----------|----------------|---------|---------|
|
||||
| **Speech-to-Text** | Deepgram Nova-2 | Latest | Ja |
|
||||
| **Editor** | TipTap (ProseMirror) | v2.x | Ja |
|
||||
| **AI Structuur** | Claude 3.5 Sonnet | Latest | Ja |
|
||||
| **Websocket** | Native Browser API | - | Ja |
|
||||
| **Audio Storage** | Supabase Storage | - | Nee |
|
||||
| **UI Components** | shadcn/ui | - | Nee |
|
||||
|
||||
**Fallback strategie:**
|
||||
- Deepgram down → Manual typing
|
||||
- Claude down → Save transcriptie, later structureren
|
||||
- Websocket fail → Polling fallback (degraded UX)
|
||||
|
||||
---
|
||||
|
||||
## 13. Bijlagen & Referenties
|
||||
|
||||
**Gerelateerde documenten:**
|
||||
- PRD v1.2 (Product Requirements Document)
|
||||
- TO v1.2 (Technisch Ontwerp) - wordt aangevuld met dit FO
|
||||
- UX Stylesheet - kleuren voor recording UI
|
||||
- Bouwplan v1.1 - Epic E4 (Week 3)
|
||||
|
||||
**Externe referenties:**
|
||||
- [Deepgram Docs](https://developers.deepgram.com/docs/getting-started-with-live-streaming-audio)
|
||||
- [TipTap Docs](https://tiptap.dev/docs/editor/getting-started)
|
||||
- [Claude API](https://docs.anthropic.com/claude/reference)
|
||||
- [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)
|
||||
|
||||
**Demo assets:**
|
||||
- Intake script (Nederlands, 3 minuten)
|
||||
- Pre-recorded backup audio
|
||||
- ROI calculator spreadsheet
|
||||
- LinkedIn post templates (Week 2-3)
|
||||
|
||||
---
|
||||
|
||||
**Versiehistorie:**
|
||||
|
||||
| Versie | Datum | Auteur | Wijziging |
|
||||
|--------|-------|--------|-----------|
|
||||
| v1.0 | 19-11-2024 | Colin | Initiële versie - Live Transcriptie & AI Verslag |
|
||||
|
||||
---
|
||||
|
||||
**Einde Functioneel Ontwerp - Live Transcriptie Feature**
|
||||
699
docs/specs/archive/fo-marketing-app-flow-v2.md
Normal file
699
docs/specs/archive/fo-marketing-app-flow-v2.md
Normal file
@@ -0,0 +1,699 @@
|
||||
# 🧩 Functioneel Ontwerp (FO) – Marketing & App Flow v2.1
|
||||
|
||||
**Projectnaam:** AI Speedrun - Mini-EPD Prototype
|
||||
**Versie:** v2.1 (Vereenvoudigde User Journey)
|
||||
**Datum:** 17-11-2024
|
||||
**Auteur:** Colin Lit
|
||||
|
||||
---
|
||||
|
||||
## 1. Doel en relatie met het PRD
|
||||
|
||||
🎯 **Doel van dit document:**
|
||||
Dit Functioneel Ontwerp beschrijft de **vereenvoudigde user journey** voor de AI Speedrun marketing website en EPD applicatie. Het lost de huidige UX problemen op (broken links, onduidelijke navigatie) en introduceert een heldere scheiding tussen marketing en applicatie.
|
||||
|
||||
📘 **Toelichting aan de lezer:**
|
||||
Versie 2.0 is een refactor van de huidige implementatie (v1.2). De belangrijkste wijzigingen:
|
||||
- **Marketing vereenvoudigd**: Van lange manifesto naar compacte statement + timeline met features
|
||||
- **Geen separate EPD demo pagina**: Features worden getoond in timeline op homepage en op login pagina
|
||||
- **Duidelijke app routing**: `/epd/*` namespace voor alle EPD functionaliteit
|
||||
- **Werkende flows**: Alle CTA's en login links gaan naar bestaande pagina's
|
||||
- **Coming Soon strategie**: Eerlijke communicatie tijdens Week 2 development
|
||||
|
||||
Dit document is niet-technisch en beschrijft wat gebruikers zien en kunnen doen.
|
||||
|
||||
---
|
||||
|
||||
## 2. Overzicht van de belangrijkste onderdelen
|
||||
|
||||
🎯 **Doel:** De 4 kernmodules van de applicatie
|
||||
|
||||
**Marketing Modules (Publiek):**
|
||||
1. **Marketing Homepage** (`/`) - Vereenvoudigde landing met hero, statement en timeline (met features)
|
||||
2. **Contact & Leads** (`/contact`) - Lead capture formulier
|
||||
|
||||
**Auth & App Modules (Protected/Semi-Protected):**
|
||||
3. **Login & Authentication** (`/login`) - Magic link + demo credentials + features showcase
|
||||
4. **EPD App Dashboard** (`/epd/clients`) - Coming Soon placeholder (Week 2+)
|
||||
|
||||
---
|
||||
|
||||
## 3. User Stories
|
||||
|
||||
🎯 **Doel:** Wat gebruikers kunnen en willen doen
|
||||
|
||||
### Prioriteit: Hoog (MVP Critical)
|
||||
|
||||
| ID | Rol | Doel / Actie | Verwachte waarde | Status |
|
||||
|----|-----|--------------|------------------|--------|
|
||||
| US-01 | Marketing bezoeker | Homepage bekijken met project statement en voortgang | Begrijpen wat AI Speedrun doet en volgen van build progress + features zien | ✅ Te implementeren |
|
||||
| US-02 | Marketing bezoeker | EPD features bekijken in timeline | Zien wat het prototype kan (features getoond in timeline op homepage) | ✅ Te implementeren |
|
||||
| US-03 | Marketing bezoeker | Contact opnemen voor lead | Interesse tonen in Software on Demand services | ✅ Bestaand |
|
||||
| US-04 | Demo gebruiker | Inloggen met demo credentials | Toegang tot EPD app prototype | ✅ Bestaand (fix redirect) |
|
||||
| US-05 | Demo gebruiker | Coming Soon dashboard zien | Weten dat app in Week 2 komt + verwachtingen managen | ✅ Te implementeren |
|
||||
| US-06 | Terugkerende gebruiker | Direct naar login navigeren | Snel inloggen zonder homepage te moeten bezoeken | ✅ Te implementeren (nav link) |
|
||||
|
||||
### Prioriteit: Middel (Nice to Have)
|
||||
|
||||
| ID | Rol | Doel / Actie | Verwachte waarde | Status |
|
||||
|----|-----|--------------|------------------|--------|
|
||||
| US-07 | Ingelogde gebruiker | Uitloggen | Sessie beëindigen en terug naar marketing | 🔄 Toekomstig |
|
||||
| US-08 | Marketing bezoeker | Wekelijkse updates volgen via timeline | Build in public transparantie ervaren | ✅ Te implementeren |
|
||||
| US-09 | Stakeholder | ROI vergelijking zien | Business case begrijpen (traditioneel vs AI) | ⏸️ On hold |
|
||||
|
||||
### Prioriteit: Laag (Future Enhancement)
|
||||
|
||||
| ID | Rol | Doel / Actie | Verwachte waarde | Status |
|
||||
|----|-----|--------------|------------------|--------|
|
||||
| US-10 | Developer | Interactieve ROI calculator gebruiken | Eigen business case berekenen | ⏸️ On hold |
|
||||
| US-11 | LinkedIn volger | Build metrics dashboard zien | Real-time tracking van uren en kosten | ⏸️ On hold |
|
||||
|
||||
---
|
||||
|
||||
## 4. Functionele werking per onderdel
|
||||
|
||||
🎯 **Doel:** Per module beschrijven wat gebruikers kunnen doen
|
||||
|
||||
### 4.1 Marketing Homepage (`/`)
|
||||
|
||||
**Doel:** Compacte, krachtige introductie van Software on Demand concept met build-in-public transparantie.
|
||||
|
||||
**Secties (van boven naar beneden):**
|
||||
|
||||
1. **Hero Section** (behouden zoals nu)
|
||||
- Full-viewport quote van Jensen Huang: "Software is eating the world"
|
||||
- Dot-shader achtergrond (subtiel, opacity 0.02)
|
||||
- Scroll indicator
|
||||
|
||||
2. **Statement Section** (NIEUW - vervangt lange manifesto)
|
||||
- **Heading**: "Software on Demand: Van €100k naar €200"
|
||||
- **3-4 Paragrafen** in problem → solution → proof format:
|
||||
- *Problem*: Enterprise software kost €100.000+ en duurt 12-24 maanden
|
||||
- *Solution*: AI-powered development verkort dit naar 4 weken en €200
|
||||
- *Proof*: Dit EPD is het bewijs - gebouwd in 4 weken, build in public
|
||||
- *CTA*: Volg de voortgang hieronder
|
||||
- **Visueel**: Clean, serif typography (Crimson Text), breathing room
|
||||
|
||||
3. **Timeline Section** (NIEUW - build in public met features showcase)
|
||||
- **Component**: Aceternity UI Timeline (21st.dev)
|
||||
- **Content structure** per week:
|
||||
- Week nummer + datum range (bijv. "Week 1 • Nov 11-17")
|
||||
- Status badge: Completed / In Progress / Planned
|
||||
- Korte beschrijving (3-4 zinnen): wat is er gebouwd
|
||||
- **Features showcase** (NIEUW):
|
||||
- Per week worden relevante EPD features getoond
|
||||
- Feature cards met: Titel, beschrijving, tijdswinst (bijv. "30 min → 5 sec")
|
||||
- Icons per feature type (Brain voor AI, Zap voor snelheid, etc.)
|
||||
- Visuele highlight van wat er die week gebouwd is
|
||||
- Metrics cards: Development hours, Infrastructure cost
|
||||
- Achievements lijst: Bullets met voltooide features
|
||||
- Optioneel: Screenshot of visual van die week
|
||||
- **Interactie**: Scroll-based animation (timeline ontvouwt)
|
||||
- **Data source**: `content/nl/timeline.json` (met features array per week)
|
||||
|
||||
4. **CTA Section** (vereenvoudigd)
|
||||
- **Primary CTA**: "Probeer het prototype" → `/login` (direct naar login met features)
|
||||
- **Secondary CTA**: "Volg voortgang" → Scroll to timeline (anchor link `#timeline`)
|
||||
- **Tertiary**: "Contact" → `/contact`
|
||||
- **Visueel**: Button hierarchy duidelijk (primary = green, secondary = outline)
|
||||
|
||||
**Verwijderd uit v1.2:**
|
||||
- Lange manifesto content (8000+ woorden)
|
||||
- Separate EPD demo pagina (`/epd`) - features nu in timeline
|
||||
- Comparison table (verwijderd - niet meer nodig)
|
||||
- Multiple insight boxes
|
||||
- Statement sections met dark backgrounds
|
||||
|
||||
**States:**
|
||||
- **Normal**: Alle content zichtbaar
|
||||
- **Loading**: Skeleton voor timeline items
|
||||
- **Empty state**: (niet van toepassing - statische content)
|
||||
|
||||
**Navigatie:**
|
||||
- Top: MinimalNav (Home, Contact, Login) - EPD Prototype link verwijderd
|
||||
- Footer: Copyright + link naar ikbenlit.nl
|
||||
|
||||
---
|
||||
|
||||
### 4.2 ~~EPD Demo Info Pagina (`/epd`)~~ VERWIJDERD
|
||||
|
||||
**Status:** Deze pagina is verwijderd in v2.1. Features worden nu getoond in:
|
||||
- Timeline op homepage (`/`)
|
||||
- Features showcase op login pagina (`/login`)
|
||||
|
||||
**Reden:** Vereenvoudiging van user journey - gebruikers zien features direct in context van build progress en kunnen direct naar login gaan.
|
||||
|
||||
---
|
||||
|
||||
### 4.3 Contact & Lead Capture (`/contact`)
|
||||
|
||||
**Doel:** Lead acquisition voor Software on Demand consultancy.
|
||||
|
||||
**Functionaliteit:** (behouden zoals nu - werkt al)
|
||||
- Form fields: Naam, Email, Bericht
|
||||
- Client-side validation (Zod)
|
||||
- Submit → API `/api/leads` → Supabase `leads` table
|
||||
- Success state: "Bedankt! We nemen contact op"
|
||||
- Error state: "Er ging iets mis. Probeer opnieuw"
|
||||
|
||||
**Navigatie:**
|
||||
- Terug naar homepage via nav
|
||||
|
||||
---
|
||||
|
||||
### 4.4 Login & Authentication (`/login`)
|
||||
|
||||
**Doel:** Flexibele auth met magic link (productie) en demo credentials (MVP), inclusief features showcase.
|
||||
|
||||
**Layout:** Split-screen design (zoals `sign-in.tsx` component)
|
||||
- **Links (60%)**: Features showcase met visuals
|
||||
- **Rechts (40%)**: Login formulier
|
||||
|
||||
**Features Showcase Sectie (Links):**
|
||||
- **Grid layout** met feature cards:
|
||||
- AI-Gestuurde Intake (30 min → 5 sec)
|
||||
- Automatische DSM Classificatie (15 min → 3 sec)
|
||||
- Behandelplan Generatie (45 min → 10 sec)
|
||||
- B1 Readability (30 min → 3 sec)
|
||||
- **Visuals**: Icons, stat cards, of screenshots per feature
|
||||
- **Metrics**: Tijdswinst per feature prominent getoond
|
||||
- **Design**: Inspiratie van `components/ui/sign-in.tsx` collage layout
|
||||
|
||||
**Login Form Sectie (Rechts):**
|
||||
|
||||
**Twee tabs/modes:**
|
||||
|
||||
1. **Magic Link Login** (voor productie users)
|
||||
- Email input
|
||||
- "Stuur Magic Link" button
|
||||
- Success: "Check je email voor login link"
|
||||
- Nieuwe users: Account wordt automatisch aangemaakt
|
||||
- Callback: `/auth/callback` → redirect naar `/epd/clients`
|
||||
|
||||
2. **Demo Credentials Login** (voor demo)
|
||||
- Email + Password inputs
|
||||
- Toggle show/hide password
|
||||
- "Login" button
|
||||
- Quick demo button: Auto-fill + submit
|
||||
- Success: Redirect naar `/epd/clients`
|
||||
- Error: "Ongeldige credentials"
|
||||
|
||||
**Demo credentials info box:**
|
||||
- Gele achtergrond
|
||||
- Credentials in monospace font
|
||||
- Copy-paste friendly
|
||||
|
||||
**States:**
|
||||
- Loading: "Inloggen..." spinner
|
||||
- Error: Red error message
|
||||
- Success: Green message + redirect
|
||||
- Mobile: Features sectie wordt boven login form getoond (stack layout)
|
||||
|
||||
**Navigatie:**
|
||||
- Link in MinimalNav: "Login"
|
||||
- Logo → terug naar `/`
|
||||
|
||||
---
|
||||
|
||||
### 4.5 EPD App - Coming Soon Dashboard (`/epd/clients`)
|
||||
|
||||
**Doel:** Eerlijke communicatie dat app in Week 2 gebouwd wordt, manage expectations.
|
||||
|
||||
**Functionaliteit:** (NIEUW - te bouwen)
|
||||
|
||||
**Layout:**
|
||||
```
|
||||
┌────────────────────────────────────────────┐
|
||||
│ Header: Logo | "EPD Dashboard" | Logout │
|
||||
├────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [Icon] Coming Soon │
|
||||
│ │
|
||||
│ EPD Dashboard - In Ontwikkeling │
|
||||
│ │
|
||||
│ Week 2 (Nov 18-24): Client management │
|
||||
│ Week 3 (Nov 25-Dec 1): AI integrations │
|
||||
│ │
|
||||
│ [Mockup screenshot placeholder] │
|
||||
│ │
|
||||
│ [Button: Terug naar Info] [Logout] │
|
||||
│ │
|
||||
└────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Content:**
|
||||
- **Heading**: "EPD Dashboard - Coming Week 2"
|
||||
- **Beschrijving**:
|
||||
- "De EPD applicatie wordt momenteel gebouwd."
|
||||
- "Bekijk de voortgang op de homepage (timeline sectie)"
|
||||
- **Timeline preview**:
|
||||
- Week 2: Client management & CRUD
|
||||
- Week 3: AI integrations (intake, profiel, plan)
|
||||
- Week 4: Polish & onboarding
|
||||
- **Mockup/Screenshot**: Wireframe of visual preview van wat komt
|
||||
- **Actions**:
|
||||
- Button: "Terug naar Prototype Info" → `/epd`
|
||||
- Button: "Logout" → `/auth/logout` → redirect `/`
|
||||
|
||||
**States:**
|
||||
- **Authenticated**: Normale weergave
|
||||
- **Not authenticated**: Redirect naar `/login` (middleware)
|
||||
|
||||
**Navigatie:**
|
||||
- Logo → `/epd/clients` (blijf in app context)
|
||||
- "Terug naar Info" → `/epd` (exit app)
|
||||
- Logout → `/` (marketing)
|
||||
|
||||
**Future states (Week 2+):**
|
||||
- Replace Coming Soon met werkende client lijst
|
||||
- Zelfde layout, andere content
|
||||
|
||||
---
|
||||
|
||||
## 5. UI-overzicht (visuele structuur)
|
||||
|
||||
🎯 **Doel:** Globale schermopbouw voor developers en designers
|
||||
|
||||
### 5.1 Marketing Layout (alle publieke paginas)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ MinimalNav (fixed top) │
|
||||
│ [Logo] Home | Contact | Login │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ ReadingProgress (scroll-based bar) │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Page Content │
|
||||
│ (hero, statement, timeline, │
|
||||
│ features, forms, etc.) │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ Footer: © AI Speedrun | ikbenlit.nl │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Minimal navigation: scroll-based color change
|
||||
- Reading progress bar (client component)
|
||||
- No sidebar
|
||||
- Full-width content
|
||||
- Mobile: Hamburger menu
|
||||
|
||||
### 5.2 EPD App Layout (protected paginas)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ App Header │
|
||||
│ [Logo: EPD] EPD Dashboard [User] [Logout] │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Main Content │
|
||||
│ (coming soon state │
|
||||
│ of client list future) │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ Footer: Terug naar Info | ikbenlit.nl │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Separate header (geen MinimalNav)
|
||||
- User state visible
|
||||
- Logout prominent
|
||||
- Exit to marketing link
|
||||
- Future: Sidebar toevoegen voor app nav
|
||||
|
||||
---
|
||||
|
||||
## 6. Navigatie Flows & User Journeys
|
||||
|
||||
🎯 **Doel:** Visualiseren hoe gebruikers door de applicatie bewegen
|
||||
|
||||
### Flow 1: Marketing Bezoeker → Lead
|
||||
|
||||
```
|
||||
Landing (/)
|
||||
↓
|
||||
Lees Statement + Timeline (met features)
|
||||
↓
|
||||
Decision Point:
|
||||
├─→ "Probeer het prototype" → /login
|
||||
│ ↓
|
||||
│ Zie features showcase + login form
|
||||
│ ↓
|
||||
│ Login met demo credentials
|
||||
│ ↓
|
||||
│ /epd/clients (Coming Soon)
|
||||
│
|
||||
└─→ "Contact" → /contact
|
||||
↓
|
||||
Vul formulier in
|
||||
↓
|
||||
Lead opgeslagen ✓
|
||||
```
|
||||
|
||||
### Flow 2: Demo Gebruiker → EPD App
|
||||
|
||||
```
|
||||
Direct naar /login (nav link)
|
||||
↓
|
||||
Kies: Magic Link OF Demo Credentials
|
||||
↓
|
||||
[Demo pad]
|
||||
Fill demo@mini-ecd.demo + Demo2024!
|
||||
↓
|
||||
Submit
|
||||
↓
|
||||
Auth success → Middleware redirect
|
||||
↓
|
||||
/epd/clients (Coming Soon)
|
||||
↓
|
||||
Options:
|
||||
├─→ "Terug naar Info" → /epd
|
||||
└─→ "Logout" → /
|
||||
```
|
||||
|
||||
### Flow 3: Terugkerende Gebruiker (Week 2+)
|
||||
|
||||
```
|
||||
Homepage / or direct /login
|
||||
↓
|
||||
Login (magic link of credentials)
|
||||
↓
|
||||
/epd/clients (werkende app)
|
||||
↓
|
||||
Client lijst → Client detail
|
||||
↓
|
||||
Intake → AI → Profiel → Plan
|
||||
↓
|
||||
Logout → terug naar marketing
|
||||
```
|
||||
|
||||
### Flow 4: Build-in-Public Volger
|
||||
|
||||
```
|
||||
LinkedIn post → Homepage
|
||||
↓
|
||||
Scroll naar Timeline (met features per week)
|
||||
↓
|
||||
Lees weekly updates + zie features
|
||||
↓
|
||||
Decision:
|
||||
├─→ "Probeer demo" → /login (met features showcase)
|
||||
├─→ "Contact" → /contact
|
||||
└─→ Exit (volg op LinkedIn)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Interacties met AI (functionele beschrijving)
|
||||
|
||||
🎯 **Doel:** Waar AI voorkomt in toekomstige EPD app (Week 3+)
|
||||
|
||||
📘 **Toelichting:** Deze sectie beschrijft toekomstige AI features die nog niet in Coming Soon state zitten.
|
||||
|
||||
| Locatie | AI-actie | Trigger | Input | Output | Timing |
|
||||
|---------|----------|---------|-------|--------|--------|
|
||||
| Intake Editor | Samenvatten | Button "AI Samenvatten" | TipTap editor content (max 20k chars) | 5-8 bullets in rechterpaneel | ~3-5 sec |
|
||||
| Intake Editor | B1 Leesbaarheid | Button "Vereenvoudig taal" | Selected text of hele intake | Herschreven versie in B1 Nederlands | ~5 sec |
|
||||
| Profiel Tab | Extract Problemen | Button "AI Analyse" | Intake content | DSM-light categorie + severity + rationale | ~5-8 sec |
|
||||
| Plan Tab | Genereer Plan | Button "Genereer Behandelplan" | Profiel + intake data | 4 secties: Doelen, Interventies, Freq/Duur, Meetmomenten | ~10-15 sec |
|
||||
|
||||
**AI-rail (rechterpaneel) gedrag:**
|
||||
- Slides in vanaf rechts bij AI actie
|
||||
- Loading state: Spinner + "AI analyseert..."
|
||||
- Result state: Content + bronverwijzingen
|
||||
- Actions: "Invoegen", "Regenereer", "Annuleer"
|
||||
- Preview mode: Highlight waar content ingevoegd wordt
|
||||
|
||||
**Cost tracking** (toekomstig):
|
||||
- Alle AI calls worden gelogd in `ai_events` table
|
||||
- Dashboard toont: Aantal calls, tokens gebruikt, geschatte kosten
|
||||
- Target: <€5/maand voor MVP demo use
|
||||
|
||||
---
|
||||
|
||||
## 8. Routes & Toegangsrechten
|
||||
|
||||
🎯 **Doel:** Duidelijk overzicht welke routes publiek of protected zijn
|
||||
|
||||
### Publieke Routes (geen auth vereist)
|
||||
|
||||
| Route | Naam | Functie | Status |
|
||||
|-------|------|---------|--------|
|
||||
| `/` | Marketing Homepage | Statement + Timeline (met features) | ✅ Refactor |
|
||||
| `/contact` | Contact Form | Lead capture | ✅ Bestaand |
|
||||
| `/login` | Login Pagina | Auth flow + features showcase | ✅ Refactor |
|
||||
| `/auth/callback` | OAuth Callback | Magic link handler | ✅ Bestaand |
|
||||
|
||||
**Verwijderd:**
|
||||
- `/epd` - EPD Demo Info pagina (features nu in timeline en login)
|
||||
|
||||
### Protected Routes (auth vereist)
|
||||
|
||||
| Route | Naam | Functie | Status |
|
||||
|-------|------|---------|--------|
|
||||
| `/epd/clients` | EPD Dashboard | Coming Soon (Week 2: Client lijst) | ⏳ Te bouwen |
|
||||
| `/epd/clients/[id]` | Client Detail | Client dossier (Week 2) | 🔄 Toekomstig |
|
||||
| `/epd/clients/[id]/intake` | Intake Editor | TipTap + AI (Week 3) | 🔄 Toekomstig |
|
||||
| `/epd/clients/[id]/profile` | Probleem Profiel | DSM-light + AI (Week 3) | 🔄 Toekomstig |
|
||||
| `/epd/clients/[id]/plan` | Behandelplan | SMART doelen + AI (Week 3) | 🔄 Toekomstig |
|
||||
|
||||
### API Routes
|
||||
|
||||
| Route | Naam | Functie | Auth | Status |
|
||||
|-------|------|---------|------|--------|
|
||||
| `/api/leads` | Lead Submission | POST contact form data | No | ✅ Bestaand |
|
||||
| `/api/ai/summarize` | AI Summarize | POST intake → bullets | Yes | 🔄 Week 3 |
|
||||
| `/api/ai/categorize` | AI Categorize | POST intake → DSM profile | Yes | 🔄 Week 3 |
|
||||
| `/api/ai/plan` | AI Plan Generator | POST profile → treatment plan | Yes | 🔄 Week 3 |
|
||||
| `/auth/logout` | Logout | Supabase signOut | Yes | ✅ Bestaand |
|
||||
|
||||
### Middleware Logic (simplified)
|
||||
|
||||
```typescript
|
||||
// Public routes (no redirect)
|
||||
const publicRoutes = [
|
||||
'/', '/contact', '/login',
|
||||
'/auth/callback', '/auth/logout'
|
||||
]
|
||||
|
||||
// Logic
|
||||
if (!user && !isPublicRoute) {
|
||||
redirect('/login?redirect=' + pathname)
|
||||
}
|
||||
|
||||
if (user && pathname === '/login') {
|
||||
redirect('/epd/clients')
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Content Management Strategie
|
||||
|
||||
🎯 **Doel:** Hoe content beheerd en bijgewerkt wordt
|
||||
|
||||
### Timeline Content (Build-in-Public updates)
|
||||
|
||||
**Locatie**: `content/timeline/` of `content/nl/timeline.json`
|
||||
|
||||
**Structuur per week**:
|
||||
```json
|
||||
{
|
||||
"weekNumber": 1,
|
||||
"title": "Week 1 • Nov 11-17",
|
||||
"status": "completed", // completed | in_progress | planned
|
||||
"description": "Marketing site foundation. Hero, statement setup, database schema aangemaakt.",
|
||||
"features": [
|
||||
{
|
||||
"title": "AI-Gestuurde Intake",
|
||||
"description": "Schrijf een intakeverslag en krijg binnen seconden een gestructureerde samenvatting",
|
||||
"time": "< 5 seconden",
|
||||
"traditional": "15-20 minuten handmatig",
|
||||
"icon": "Brain"
|
||||
},
|
||||
{
|
||||
"title": "Automatische DSM Classificatie",
|
||||
"description": "Het systeem analyseert de intake en stelt DSM-categorieën voor",
|
||||
"time": "< 3 seconden",
|
||||
"traditional": "10-15 minuten analyse",
|
||||
"icon": "Zap"
|
||||
}
|
||||
],
|
||||
"metrics": {
|
||||
"developmentHours": 30,
|
||||
"infrastructureCost": 50,
|
||||
"totalCost": 50
|
||||
},
|
||||
"achievements": [
|
||||
"Landing page met hero + statement",
|
||||
"Timeline component met features",
|
||||
"Contact form + lead capture API",
|
||||
"Database schema (5 core tables)",
|
||||
"Supabase Auth + RLS policies"
|
||||
],
|
||||
"visual": "/timeline/week-1-screenshot.png" // optional
|
||||
}
|
||||
```
|
||||
|
||||
**Update frequency**: Einde van elke week (zaterdag/zondag)
|
||||
|
||||
**Ownership**: Handmatig door Colin via JSON edit
|
||||
|
||||
**Alternative**: MDX files met frontmatter voor meer flexibiliteit
|
||||
|
||||
### Static Content (niet-timeline)
|
||||
|
||||
| Content Type | Locatie | Format | Update Freq |
|
||||
|--------------|---------|--------|-------------|
|
||||
| Navigation | `content/nl/navigation.json` | JSON | Ad-hoc |
|
||||
| Timeline (met features) | `content/nl/timeline.json` | JSON | Weekly |
|
||||
| EPD Features (voor login) | `content/nl/epd.json` | JSON | Rarely |
|
||||
| Metadata (SEO) | `content/nl/metadata.json` | JSON | Once |
|
||||
|
||||
---
|
||||
|
||||
## 10. Gebruikersrollen en rechten
|
||||
|
||||
🎯 **Doel:** Wie kan wat binnen de applicatie
|
||||
|
||||
| Rol | Toegang tot | Beperkingen | Auth Method |
|
||||
|-----|-------------|-------------|-------------|
|
||||
| **Anonymous Visitor** | Marketing pages (/, /contact, /login) | Geen EPD app toegang | - |
|
||||
| **Demo User** | Alles (marketing + EPD app) | Fictieve data only, geen wijzigingen persistent | Email/password (demo credentials) |
|
||||
| **Magic Link User** | Marketing + EPD app (toekomstig) | Eigen dossiers (RLS) | Magic link email |
|
||||
| **Admin** (toekomstig) | Alle dossiers + metrics | - | Special credentials |
|
||||
|
||||
**RLS (Row Level Security) in Supabase:**
|
||||
- Elke gebruiker ziet alleen eigen clients/notes/profiles/plans
|
||||
- Policy: `auth.uid() = created_by`
|
||||
- Demo users delen fictieve dataset
|
||||
- Real users: isolated per user_id
|
||||
|
||||
---
|
||||
|
||||
## 11. States & Edge Cases
|
||||
|
||||
🎯 **Doel:** Hoe systeem omgaat met uitzonderlijke situaties
|
||||
|
||||
### Marketing Website
|
||||
|
||||
| Scenario | Gedrag |
|
||||
|----------|--------|
|
||||
| Timeline data niet beschikbaar | Toon skeleton loading + "Updates coming soon" |
|
||||
| Image load failure | Fallback naar placeholder met initials |
|
||||
| Form submission error | Retry optie + error message + support email |
|
||||
| Slow network | Progressive loading, defer non-critical content |
|
||||
|
||||
### Login Flow
|
||||
|
||||
| Scenario | Gedrag |
|
||||
|----------|--------|
|
||||
| Ongeldige demo credentials | Error: "Credentials incorrect. Gebruik demo@mini-ecd.demo" |
|
||||
| Magic link expired | Error + "Request new link" button |
|
||||
| Already logged in | Direct redirect naar `/epd/clients` |
|
||||
| Network error tijdens auth | Error message + retry button |
|
||||
|
||||
### EPD App (Coming Soon)
|
||||
|
||||
| Scenario | Gedrag |
|
||||
|----------|--------|
|
||||
| User bezoekt direct `/epd/clients` | Middleware check → redirect `/login` als niet ingelogd |
|
||||
| Logout tijdens session | Redirect naar `/` + success toast |
|
||||
| Session expired | Redirect naar `/login` + "Session verlopen, log opnieuw in" |
|
||||
|
||||
### Week 2+ (Toekomstig - Client CRUD)
|
||||
|
||||
| Scenario | Gedrag |
|
||||
|----------|--------|
|
||||
| Lege state (geen clients) | "Voeg je eerste cliënt toe" + CTA button |
|
||||
| Delete confirmation | Modal: "Weet je zeker? Alle dossiers worden verwijderd" |
|
||||
| Concurrent edit conflict | Toast: "Data is veranderd, herlaad pagina" |
|
||||
| AI API failure | Retry 3x, dan error + support contact |
|
||||
|
||||
---
|
||||
|
||||
## 12. Bijlagen & Referenties
|
||||
|
||||
🎯 **Doel:** Linken naar gerelateerde documenten
|
||||
|
||||
**Mission Control Documents:**
|
||||
- **PRD v1.2** (`docs/specs/prd-mini-ecd-v2.md`) - Product Requirements & Business Case
|
||||
- **TO v1.2** (`docs/specs/to-mini-ecd-v1_2.md`) - Technische Architectuur & Database Schema
|
||||
- **Bouwplan v1.6** (`docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md`) - Epic & Story Planning
|
||||
- **UX Stylesheet** (`docs/specs/ux-stylesheet.md`) - Design System & Tailwind Config
|
||||
- **API Specs** (`docs/specs/api-acces-mini-ecd.md`) - Endpoint Documentation
|
||||
|
||||
**External Resources:**
|
||||
- [Aceternity UI Timeline](https://21st.dev/r/timeline) - Timeline component inspiratie
|
||||
- [Supabase Auth Docs](https://supabase.com/docs/guides/auth) - Authentication flows
|
||||
- [Next.js 15 Routing](https://nextjs.org/docs/app/building-your-application/routing) - App Router patterns
|
||||
|
||||
**Design References:**
|
||||
- `docs/design/timeline-comp.tsx` - Timeline component voorbeeld
|
||||
- Bestaande marketing components in `app/(marketing)/components/`
|
||||
|
||||
---
|
||||
|
||||
## 13. Implementatie Prioriteiten (voor Developers)
|
||||
|
||||
🎯 **Doel:** Volgorde van bouwen voor maximale impact
|
||||
|
||||
### 🔴 Critical (Week 1 fixes - nu)
|
||||
|
||||
1. **Verwijder EPD demo pagina** (15 min)
|
||||
- Delete `/app/(marketing)/epd/page.tsx`
|
||||
- Update navigation (verwijder "EPD Prototype" link)
|
||||
- Update middleware (verwijder `/epd` uit public routes)
|
||||
|
||||
2. **Coming Soon page** (30 min)
|
||||
- Create `/epd/clients/page.tsx`
|
||||
- Simple layout + logout
|
||||
- Middleware redirect update
|
||||
|
||||
### 🟡 High Priority (Week 1-2 refactor)
|
||||
|
||||
3. **Timeline component met features** (3-4 uur)
|
||||
- Install/copy Aceternity timeline
|
||||
- Create timeline content JSON met features array
|
||||
- Add features showcase per week item
|
||||
- Add to homepage
|
||||
|
||||
4. **Homepage vereenvoudiging** (2-3 uur)
|
||||
- Remove manifesto long-form
|
||||
- Add statement section
|
||||
- Integrate timeline (met features)
|
||||
- Update CTA: "Probeer het prototype" → `/login`
|
||||
|
||||
5. **Login pagina met features showcase** (2-3 uur)
|
||||
- Split-screen layout (features links, login rechts)
|
||||
- Features grid component (hergebruik van EPD features)
|
||||
- Mobile responsive (stack layout)
|
||||
- Integreer bestaande login functionaliteit
|
||||
|
||||
### 🟢 Medium Priority (Week 2 app build)
|
||||
|
||||
5. **EPD App foundation** (Week 2)
|
||||
- Client CRUD
|
||||
- App layout met sidebar
|
||||
- Navigation tussen contexts
|
||||
|
||||
6. **AI integrations** (Week 3)
|
||||
- API endpoints
|
||||
- TipTap editor
|
||||
- AI-rail components
|
||||
|
||||
---
|
||||
|
||||
## Changelog
|
||||
|
||||
| Versie | Datum | Auteur | Wijzigingen |
|
||||
|--------|-------|--------|-------------|
|
||||
| v2.0 | 17-11-2024 | Colin | Initiële versie - Refactor van v1.2 implementatie. Nieuwe timeline approach, vereenvoudigde marketing, /epd/* routing, coming soon strategie |
|
||||
| v2.1 | 17-11-2024 | Colin | Verwijderd: Separate EPD demo pagina (/epd). Features nu in timeline op homepage en features showcase op login pagina. Vereenvoudigde user journey. |
|
||||
|
||||
---
|
||||
|
||||
**Einde Functioneel Ontwerp v2.1**
|
||||
1119
docs/specs/archive/fo-mini-ecd-v2.md
Normal file
1119
docs/specs/archive/fo-mini-ecd-v2.md
Normal file
File diff suppressed because it is too large
Load Diff
448
docs/specs/archive/prd-mini-ecd-v1.2.md
Normal file
448
docs/specs/archive/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 |
|
||||
Reference in New Issue
Block a user