diff --git a/docs/bouwplan_template.txt b/docs/bouwplan_template.txt deleted file mode 100644 index 16704fa..0000000 --- a/docs/bouwplan_template.txt +++ /dev/null @@ -1,191 +0,0 @@ -# πŸš€ Mission Control – Bouwplan Template - -πŸ’‘ **Tip:** Dit document kun je samenstellen met hulp van AI-tools zoals **ChatGPT, Claude, Cursor** of **Gemini**. -Gebruik ze als **sparringpartner** om de bouw van je software te plannen, te documenteren en te verbeteren – zelfs als je geen ontwikkelaar bent. -Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetailleerd je elk onderdeel uitwerkt. Voor kleine prototypes volstaat een beknopt overzicht; voor grotere projecten kun je per fase en subfase inzoomen. - ---- - -**Projectnaam:** _[vul in]_ -**Versie:** _v1.0_ -**Datum:** _[dd-mm-jjjj]_ -**Auteur:** _[naam]_ - ---- - -## 1. Doel en context -🎯 **Doel:** Leg uit wat je gaat bouwen en waarom. -πŸ“˜ **Toelichting:** Beschrijf kort de aanleiding voor het project en hoe het past binnen je organisatie of productstrategie. Verwijs hier naar het PRD of FO voor achtergrond. - -**Voorbeeld:** -> Het doel is een werkend MVP te bouwen van de AI-assistent voor zorgdossiers. We tonen de meerwaarde van AI binnen de intake β†’ profiel β†’ plan workflow. - ---- - -## 2. Uitgangspunten -🎯 **Doel:** Benoem de vaste kaders waarbinnen het project wordt ontwikkeld. -πŸ“˜ **Toelichting:** Denk aan gebruikte stack, beperkingen (tijd, budget, resources) en aannames. - -**Voorbeeld:** -- Stack: SvelteKit + Firebase + Vertex AI -- Tijd: 3 weken bouwtijd voor MVP -- Geen productiegegevens (alle data fictief) -- Doel: demo op AI-inspiratiesessie - ---- - -## 3. Fase- en subfase-overzicht -🎯 **Doel:** De bouw opdelen in logische fases met een duidelijke volgorde. -πŸ“˜ **Toelichting:** Elke fase bevat het doel, afhankelijkheden en status. Je kunt de status handmatig of via AI bijhouden. - -**Voorbeeld:** -| Fase | Titel | Doel | Status | Opmerkingen | -|------|--------|------|---------|--------------| -| 0 | Setup | Repo, omgeving, dependencies | βœ… Gereed | Config getest | -| 1 | Data & Firebase | Datamodel en demo-data | πŸ”„ In Progress | Rules nog aanvullen | -| 2 | UI & Layout | SvelteKit layout, navigatie | ⏳ To Do | Wireframes gereed | -| 3 | AI-integratie | Vertex AI endpoints | ⏳ To Do | Test met Gemini model | -| 4 | Testing & Deploy | Demo testen & live zetten | ⏳ To Do | | - ---- - -## 4. Subfases (uitwerking per fase) -🎯 **Doel:** Verdeel complexe fases in beheersbare subfases voor meer overzicht. -πŸ“˜ **Toelichting:** Je bepaalt zelf het detailniveau. Kleine projecten kunnen volstaan met 2-3 subfases; grotere implementaties kunnen tot 10 subfases bevatten. Gebruik dit format om focus en voortgang te behouden. - -**Voorbeeldstructuur:** - -### Fase 0 β€” Setup -| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen | -|----------|------|--------|------------------|--------------| -| 0.1 | Repo aanmaken | βœ… | β€” | GitHub en Vercel gereed | -| 0.2 | Dependencies installeren | βœ… | 0.1 | Tailwind, Lucide, Firebase | -| 0.3 | Omgevingsvariabelen configureren | πŸ”„ | 0.2 | `.env.local` + Vercel vars | -| 0.4 | Template cleanup | ⏳ | 0.2 | Verwijder standaard demo-content | - -### Fase 1 β€” Data & Firebase -| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen | -|----------|------|--------|------------------|--------------| -| 1.1 | Datamodel ontwerpen | πŸ”„ | 0.4 | Definieer `clients`, `intakes`, `plans` | -| 1.2 | Security Rules schrijven | ⏳ | 1.1 | Demo-user all access | -| 1.3 | Demo-data seeden | ⏳ | 1.1 | 3 testcliΓ«nten + intake | - -### Fase 2 β€” UI & Layout -| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen | -|----------|------|--------|------------------|--------------| -| 2.1 | Layout skelet bouwen | ⏳ | 1.3 | Topbalk + navigatie | -| 2.2 | Componentenbibliotheek koppelen | ⏳ | 2.1 | shadcn/ui of eigen variant | -| 2.3 | Navigatie en routes | ⏳ | 2.1 | `/clients/[id]` structuur | - -### Fase 3 β€” AI-integratie -| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen | -|----------|------|--------|------------------|--------------| -| 3.1 | Vertex AI configureren | ⏳ | 0.3 | GCP SA key in `.env` | -| 3.2 | Endpoints aanmaken | ⏳ | 3.1 | summarize, extract, plan | -| 3.3 | Logging & telemetrie | ⏳ | 3.2 | Log requests in `ai_events` | - -### Fase 4 β€” Testing & Deploy -| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen | -|----------|------|--------|------------------|--------------| -| 4.1 | Smoke tests uitvoeren | ⏳ | 3.3 | Prompt snapshots testen | -| 4.2 | Demo dry-run | ⏳ | 4.1 | Met tijdmeting (≀10 min) | -| 4.3 | Publicatie Vercel | ⏳ | 4.2 | EU-regio deployment | - ---- - -## 5. Fasebeschrijving (detail) -🎯 **Doel:** Per fase beschrijven wat er moet gebeuren, zonder in code te duiken. -πŸ“˜ **Toelichting:** Gebruik korte opsommingen en eventueel snippets om een AI-tool te laten helpen bij specifieke taken. - -**Voorbeeldstructuur:** - -### Fase 1 – Setup -* Doel: basisomgeving inrichten. -* Taken: - - Init SvelteKit project met Tailwind. - - Voeg ESLint, Prettier en TypeScript toe. - - Controleer lokale run in dev-modus. -* Snippet (voorbeeld prompt voor Cursor): - ``` - Maak een SvelteKit boilerplate met Tailwind en lucide-icons. Voeg een voorbeeldcomponent toe. - ``` - -### Fase 2 – Data & Firebase -* Doel: datamodel definiΓ«ren en seed-data aanmaken. -* Taken: - - Collections opzetten (`clients`, `intakes`, `plans`). - - Security Rules schrijven. - - Demo-gebruiker configureren. - -### Fase 3 – UI & Interactie -* Doel: interface opzetten volgens UX/FO. -* Taken: - - Layout bouwen met Topbalk + Linkernav. - - Dummy-content tonen per tab. - - Toetscombinaties testen (Ctrl+S, Cmd+K). -* Snippet (prompt): - ``` - Bouw een Svelte-component voor de linkernavigatie met active state en hover animatie. - ``` - -### Fase 4 – AI-integratie -* Doel: AI-functionaliteit koppelen (server-side). -* Taken: - - Vertex AI instellen (Gemini model). - - Endpoints maken: summarize, extract, plan. - - Output testen met fictieve data. - ---- - -## 6. Kwaliteit & Testplan -🎯 **Doel:** vastleggen hoe de kwaliteit van het project wordt geborgd. -πŸ“˜ **Toelichting:** Licht toe welke tests je uitvoert en hoe je weet dat de build stabiel is. - -**Voorbeeld:** -- Smoke tests per flow (A/B/C) -- Snapshot tests op AI-output structuur -- Handmatige demo-run vΓ³Γ³r oplevering - ---- - -## 7. Demo & Presentatieplan -🎯 **Doel:** beschrijven hoe de demo wordt gepresenteerd of getest. -πŸ“˜ **Toelichting:** Vermeld wat je laat zien, wie betrokken is en welk scenario wordt gevolgd. - -**Voorbeeld:** -> We tonen in 10 minuten de flow: nieuwe cliΓ«nt β†’ intake β†’ AI-samenvatting β†’ behandelplan. -> De demo draait lokaal in Vercel met mockdata. - ---- - -## 8. Risico’s & Mitigatie -🎯 **Doel:** risico’s vroeg signaleren en voorzien van oplossingen. -πŸ“˜ **Toelichting:** Gebruik dit als dynamische checklist. - -**Voorbeeld:** -| Risico | Impact | Mitigatie | -|--------|---------|------------| -| AI-output inconsistent | Hoog | Test prompts, gebruik snapshot tests | -| Firebase regels te open | Middel | Sluiten voor productie | -| Tijdsdruk | Hoog | Schalen op taken via AI of no-code tooling | - ---- - -## 9. Evaluatie & Lessons Learned -🎯 **Doel:** reflecteren op het proces en verbeteringen vastleggen. -πŸ“˜ **Toelichting:** noteer inzichten na elke sprint of oplevering. - -**Voorbeeld:** -> De AI-rail werkte goed, maar het kostte extra tijd om prompts te fine-tunen. Voor de volgende iteratie gebruiken we vooraf geteste promptblokken. - ---- - -## 10. Referenties -🎯 **Doel:** koppelen aan de overige Mission Control-documenten. - -**Verwijzingen:** -- PRD – Product Requirements Document -- FO – Functioneel Ontwerp -- TO – Technisch Ontwerp -- UX/UI-specificatie -- API Access Document \ No newline at end of file diff --git a/docs/prd_template.txt b/docs/prd_template.txt deleted file mode 100644 index 5f5488f..0000000 --- a/docs/prd_template.txt +++ /dev/null @@ -1,109 +0,0 @@ -# πŸ“„ Product Requirements Document (PRD) – Template - -**Projectnaam:** _[vul in]_ -**Versie:** _v1.0_ -**Datum:** _[dd-mm-jjjj]_ -**Auteur:** _[naam]_ - ---- - -## 1. Doelstelling -🎯 **Doel van deze sectie:** Beschrijf waarom dit product of prototype wordt gebouwd en wat het beoogde resultaat is. -πŸ“˜ **Toelichting:** Geef een korte samenvatting van het *waarom* van dit project. Wat wil je aantonen, oplossen of verbeteren? Benoem ook of het om een demo, MVP of productieversie gaat. - -**Voorbeeld:** -> Een werkend prototype dat de waarde van AI toont binnen het zorgdossierproces: intake β†’ analyse β†’ behandelplan. De focus ligt op snelheid, eenvoud en AI-toepasbaarheid. - ---- - -## 2. Doelgroep -🎯 **Doel:** Schets wie de eindgebruikers, stakeholders en testers zijn. -πŸ“˜ **Toelichting:** Omschrijf de primaire doelgroepen (bijv. zorgprofessionals, developers, managers) en hun belangrijkste behoeften of problemen. Vermeld eventueel persona’s of gebruikersscenario’s. - -**Voorbeeld:** -> - **Product Owners & Managers:** inzicht in AI als hulpmiddel. -> - **Developers:** inspiratie voor AI-integratie. -> - **Zorgprofessionals:** herkenbare workflows met directe meerwaarde. - ---- - -## 3. Kernfunctionaliteiten (MVP-scope) -🎯 **Doel:** Afbakenen van de minimale werkende functies. -πŸ“˜ **Toelichting:** Maak een genummerde lijst van functies die in deze versie moeten werken. Beschrijf elke functie kort (input, output, interactie) en markeer *stretch-features* of optionele uitbreidingen. - -**Voorbeeld:** -1. **CliΓ«ntbeheer:** aanmaken, bekijken en selecteren. -2. **Intakeverslag:** rich text editor met AI-samenvatting. -3. **Probleemprofiel:** AI-extractie van categorie/severity. -4. **Behandelplan:** AI-genereerbare doelen/interventies. -5. *(Stretch)* PDF-export en mini-agenda. - ---- - -## 4. Gebruikersflows (Demo- of MVP-flows) -🎯 **Doel:** Laten zien hoe de gebruiker stap-voor-stap door het systeem gaat. -πŸ“˜ **Toelichting:** Beschrijf 2–4 concrete "flows" in stappen (input β†’ actie β†’ resultaat). - -**Voorbeeld:** -1. Nieuwe cliΓ«nt aanmaken β†’ Intake invullen β†’ AI-samenvatten. -2. Intake analyseren β†’ AI-suggestie β†’ Probleemprofiel genereren. -3. Profiel bevestigen β†’ AI-behandelplan genereren β†’ Publiceer v1. - ---- - -## 5. Niet in Scope -🎯 **Doel:** Duidelijk maken wat (nog) niet wordt gebouwd. -πŸ“˜ **Toelichting:** Noem features of modules die bewust buiten deze versie vallen. Dit voorkomt ruis en scope creep. - -**Voorbeeld:** -> Rollenbeheer, koppelingen met externe systemen (Teams, ECD), productie-grade beveiliging. - ---- - -## 6. Succescriteria -🎯 **Doel:** Objectieve meetlat voor een geslaagde oplevering. -πŸ“˜ **Toelichting:** Formuleer concrete, toetsbare criteria. - -**Voorbeeld:** -- Demo duurt ≀ 10 minuten. -- AI-output zichtbaar en bewerkbaar. -- Geen fouten bij standaardflows. -- Minimaal 1 live testgebruiker. - ---- - -## 7. Risico’s & Mitigatie -🎯 **Doel:** Risico’s vroeg signaleren en plannen hoe ermee om te gaan. -πŸ“˜ **Toelichting:** Beschrijf de belangrijkste risico’s en hoe je ze voorkomt of opvangt. - -**Voorbeeld:** -| Risico | Impact | Mitigatie | -|--------|---------|------------| -| AI-output inconsistent | Hoog | Prompts testen, fallback responses voorbereiden | -| Scope creep | Middel | Scope afbakenen in PRD en Mission Control | -| Privacy | Laag | Alleen demo-data gebruiken | - ---- - -## 8. Roadmap / Vervolg (Post-MVP) -🎯 **Doel:** Richting geven aan toekomstige uitbreidingen. -πŸ“˜ **Toelichting:** Beschrijf logische vervolgstappen na de MVP. - -**Voorbeeld:** -- Rollen & rechtenbeheer -- Auditlog + versiebeheer -- Trendanalyse -- Integratie met bestaande zorgsystemen (PinkRoccade, Nedap, etc.) - ---- - -## 9. Bijlagen & Referenties -🎯 **Doel:** Bronnen koppelen voor context en consistentie. -πŸ“˜ **Toelichting:** Verwijs naar ondersteunende documenten of interne kennisbestanden. - -**Voorbeeld:** -- FO (Functioneel Ontwerp) -- TO (Technisch Ontwerp) -- UX/UI-specificatie -- Mission Control / Build Plan -- API Access Document diff --git a/docs/api-acces-mini-ecd.md b/docs/specs/api-acces-mini-ecd.md similarity index 100% rename from docs/api-acces-mini-ecd.md rename to docs/specs/api-acces-mini-ecd.md diff --git a/docs/specs/bouwplan.md b/docs/specs/bouwplan.md new file mode 100644 index 0000000..dcc2c55 --- /dev/null +++ b/docs/specs/bouwplan.md @@ -0,0 +1,608 @@ +# πŸš€ Mission Control β€” Bouwplan Mini-EPD Prototype + +**Projectnaam:** Mini-EPD Prototype +**Versie:** v1.0 +**Datum:** 10-11-2025 +**Auteur:** Development Team PinkRoccade GGZ + +--- + +## 1. Doel en context + +🎯 **Doel:** Een werkend mini-EPD prototype bouwen dat tijdens de AI-inspiratiesessie bij PinkRoccade GGZ de kernprocessen uit de GGZ demonstreert: **intake β†’ probleemclassificatie β†’ behandelplan**. + +πŸ“˜ **Toelichting:** Dit project focust op het zichtbaar maken van AI-waarde (samenvatten, structureren, plan genereren) in een herkenbare GGZ-workflow. De demo duurt maximaal 10 minuten en toont hoe AI zorgmedewerkers kan ondersteunen bij administratieve taken. Het systeem wordt gebouwd met fictieve data voor demonstratiedoeleinden. + +**Belangrijkste doelen:** +- Demonstreren van AI-toegevoegde waarde in ECD-processen +- Herkenbare workflow voor GGZ-professionals +- Inspiratie bieden voor AI-integratie in bestaande systemen +- Direct bruikbare output (samenvattingen, behandelplannen) genereren + +--- + +## 2. Uitgangspunten + +### 2.1 Technische Stack + +🎯 **Doel:** Complete technologie stack voor het mini-EPD prototype. + +**Frontend:** +- **Framework:** Next.js 14+ (App Router) +- **Styling:** Tailwind CSS v3.4 (fallback vanaf v4 bij problemen) +- **UI Componenten:** shadcn/ui of eigen headless componenten +- **Rich Text Editor:** TipTap (ProseMirror basis) +- **Iconen:** lucide-react +- **State Management:** Zustand + React Context API + +**Backend:** +- **API:** Next.js Route Handlers (server-side) +- **Database:** Supabase (PostgreSQL) +- **Auth:** Supabase Auth +- **Storage:** Supabase Storage +- **AI Integration:** Claude API (Anthropic) + +**DevOps & Tooling:** +- **Hosting:** Vercel (EU region) +- **Version Control:** Git/GitHub +- **Type Safety:** TypeScript +- **Validation:** Zod +- **Testing:** Vitest (unit) + Playwright (E2E) +- **PDF Export (stretch):** Chromium via Playwright/Puppeteer + +### 2.2 Projectkaders + +🎯 **Doel:** Vaste kaders waarbinnen het project wordt ontwikkeld. + +- **Tijd:** 3 weken totale bouwtijd voor MVP +- **Demo deadline:** Augustus 2025 (AI-inspiratiesessie) +- **Budget:** Beperkt voor externe API calls (Claude AI) +- **Team:** 1-2 developers + 1 consultant/product owner +- **Data:** Uitsluitend fictieve demo-data (geen productiegegevens) +- **Scope:** MVP features voor 10-minuten demo +- **Gebruikers:** Demo-users met volledige toegang (simplified auth) +- **Compliance:** Geen medische certificering vereist (demo only) + +### 2.3 Programmeer Uitgangspunten + +🎯 **Doel:** Code-kwaliteit principes en development best practices. + +**Core Principles:** + +- **DRY (Don't Repeat Yourself)** + - Herbruikbare React componenten in `/src/components/ui/` + - Shared utility functions in `/src/lib/utils/` + - Centrale API client voor Supabase queries + - Gedeelde prompt templates voor AI calls + +- **SOC (Separation of Concerns)** + - UI componenten gescheiden van business logic + - Database queries in dedicated service layers (`/src/lib/services/`) + - AI prompts in `/src/lib/ai/prompts/` + - Styling via Tailwind classes, geen inline styles + - Route handlers voor server-side operaties + +- **KISS (Keep It Simple, Stupid)** + - Directe Supabase queries zonder ORM overhead + - Eenvoudige state management met Zustand + - Minimale abstractie voor MVP scope + - Clear component naming (e.g., `ClientList`, `IntakeEditor`) + +- **YAGNI (You Aren't Gonna Need It)** + - Geen multi-tenant setup voor demo + - Basis auth zonder rollenbeheer + - Skip complex caching voor MVP + - Geen realtime features voor eerste versie + +- **Security** + - API keys alleen server-side (`ANTHROPIC_API_KEY`, `SUPABASE_SERVICE_ROLE_KEY`) + - Input sanitization met Zod schemas + - Row Level Security (RLS) policies in Supabase + - CORS configuratie voor API endpoints + - XSS protection via React's default escaping + +--- + +## 3. Epics & Stories Overzicht + +🎯 **Doel:** Complete overzicht van alle development epics met technische details. + +| Epic ID | Epic Naam | Totaal Stories | Story Points | Status | Priority | Dependencies | +|---------|-----------|----------------|--------------|--------|----------|--------------| +| EP00 | Project Setup & Configuration | 5 | 13 | Not Started | Critical | - | +| EP01 | Database & Data Model | 4 | 21 | Not Started | Critical | EP00 | +| EP02 | Authentication & Authorization | 3 | 8 | Not Started | High | EP00, EP01 | +| EP03 | Client Management | 5 | 21 | Not Started | High | EP01, EP02 | +| EP04 | Intake Module | 6 | 34 | Not Started | Critical | EP03 | +| EP05 | Problem Profile (DSM-light) | 4 | 21 | Not Started | High | EP04 | +| EP06 | Treatment Plan Module | 5 | 34 | Not Started | High | EP05 | +| EP07 | AI Integration | 5 | 34 | Not Started | Critical | EP04 | +| EP08 | Dashboard & Navigation | 4 | 13 | Not Started | Medium | EP03 | +| EP09 | UI Components & Styling | 5 | 21 | Not Started | Medium | EP00 | +| EP10 | Testing & Quality Assurance | 4 | 13 | Not Started | High | All | +| EP11 | Deployment & Demo Prep | 4 | 13 | Not Started | Critical | All | +| EP12 | Stretch Features | 3 | 21 | Not Started | Low | EP06 | + +**Totaal:** 57 stories | 257 story points + +--- + +## 4. Epics & Stories (Uitwerking) + +### Epic EP00 β€” Project Setup & Configuration +**Epic Doel:** Complete development omgeving met alle tools en dependencies geconfigureerd. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP00-ST01 | **Als developer wil ik een Next.js project opzetten zodat ik kan beginnen met development** | βœ… Next.js 14+ met App Router
βœ… TypeScript configuratie
βœ… Folder structuur volgens conventions
βœ… Development server draait op localhost:3000 | 3 | Not Started | - | +| EP00-ST02 | **Als developer wil ik Tailwind CSS en UI libraries installeren zodat ik consistent kan stylen** | βœ… Tailwind CSS v3.4 werkend
βœ… tailwind.config.ts met custom theme
βœ… lucide-react icons beschikbaar
βœ… shadcn/ui setup (of besluit voor custom) | 3 | Not Started | EP00-ST01 | +| EP00-ST03 | **Als developer wil ik Supabase project aanmaken zodat ik database en auth kan gebruiken** | βœ… Supabase project in EU region
βœ… Connection string in .env.local
βœ… Supabase client configured
βœ… TypeScript types generation script | 3 | Not Started | EP00-ST01 | +| EP00-ST04 | **Als developer wil ik environment variables configureren zodat services veilig verbonden zijn** | βœ… .env.local met alle keys
βœ… .env.example voor team
βœ… Vercel environment variables
βœ… Validation bij startup | 2 | Not Started | EP00-ST03 | +| EP00-ST05 | **Als developer wil ik Git repository opzetten zodat code versiebeheerd is** | βœ… GitHub repository
βœ… .gitignore configuratie
βœ… Branch protection rules
βœ… Initial commit met setup | 2 | Not Started | EP00-ST01 | + +**Technische implementatie details:** +- **Database:** Gebruik Supabase EU-region (Frankfurt/London) +- **Environment variables:** + ``` + NEXT_PUBLIC_SUPABASE_URL + NEXT_PUBLIC_SUPABASE_ANON_KEY + SUPABASE_SERVICE_ROLE_KEY + ANTHROPIC_API_KEY + ``` +- **Folder structuur:** + ``` + /src + /app (routes) + /components + /lib (utilities, services) + /types + ``` + +--- + +### Epic EP01 β€” Database & Data Model +**Epic Doel:** Complete database schema met alle tabellen en relaties volgens TO specificatie. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP01-ST01 | **Als developer wil ik database tabellen creΓ«ren zodat data opgeslagen kan worden** | βœ… Tables: clients, intake_notes, problem_profiles, treatment_plans, ai_events
βœ… Correct data types (UUID, JSONB, etc.)
βœ… Foreign key constraints
βœ… Timestamps (created_at, updated_at) | 8 | Not Started | EP00-ST03 | +| EP01-ST02 | **Als developer wil ik Row Level Security policies implementeren zodat data veilig is** | βœ… RLS enabled op alle tables
βœ… Policies voor authenticated users
βœ… Test queries werken correct
βœ… Service role bypass werkt | 5 | Not Started | EP01-ST01 | +| EP01-ST03 | **Als developer wil ik database migrations opzetten zodat schema versiebeheerd is** | βœ… Supabase migrations folder
βœ… Initial migration script
βœ… Rollback mogelijk
βœ… Documentation | 3 | Not Started | EP01-ST01 | +| EP01-ST04 | **Als developer wil ik demo data seeden zodat er test content beschikbaar is** | βœ… 3+ test cliΓ«nten
βœ… Intake notes per cliΓ«nt
βœ… Minimaal 1 compleet dossier
βœ… Seed script: `npm run seed` | 5 | Not Started | EP01-ST01 | + +**Technische implementatie details:** +- **Database Schema (zie TO Β§2.3):** + - `clients`: id (UUID), first_name, last_name, birth_date, created_at, updated_at + - `intake_notes`: id, client_id (FK), title, tag (CHECK), content_json (JSONB), content_text + - `problem_profiles`: id, client_id (FK), category (CHECK), severity (CHECK), remarks + - `treatment_plans`: id, client_id (FK), version, status (CHECK), plan (JSONB) + - `ai_events`: id, kind, client_id, request, response, duration_ms + +- **RLS Policies (zie TO Β§2.4):** + ```sql + CREATE POLICY "Allow all for authenticated users" ON [table] + FOR ALL USING (auth.uid() IS NOT NULL); + ``` + +--- + +### Epic EP02 β€” Authentication & Authorization +**Epic Doel:** Werkende authenticatie met Supabase Auth voor demo gebruikers. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP02-ST01 | **Als gebruiker wil ik kunnen inloggen zodat ik toegang krijg tot het systeem** | βœ… Login pagina op /auth/login
βœ… Email/password of magic link
βœ… Session management
βœ… Redirect naar dashboard | 3 | Not Started | EP00-ST03, EP01-ST02 | +| EP02-ST02 | **Als developer wil ik protected routes implementeren zodat alleen ingelogde users toegang hebben** | βœ… Middleware voor auth check
βœ… Redirect naar login indien nodig
βœ… Loading states tijdens auth
βœ… Session refresh | 3 | Not Started | EP02-ST01 | +| EP02-ST03 | **Als gebruiker wil ik kunnen uitloggen zodat mijn sessie beΓ«indigd wordt** | βœ… Logout button in header
βœ… Session cleanup
βœ… Redirect naar login
βœ… Clear local state | 2 | Not Started | EP02-ST01 | + +**Technische implementatie details:** +- **Auth flow:** Email/password voor demo (magic link als backup) +- **Middleware:** Check auth in `middleware.ts` +- **Protected routes:** Alles behalve `/auth/*` +- **Session:** Supabase JWT tokens + +--- + +### Epic EP03 β€” Client Management +**Epic Doel:** Complete CRUD functionaliteit voor cliΓ«ntbeheer. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP03-ST01 | **Als behandelaar wil ik een cliΓ«ntenlijst zien zodat ik overzicht heb** | βœ… Tabel met: ClientID, Naam, Geboortedatum, Laatste update
βœ… Zoekbalk voor naam/ID
βœ… Pagination bij >20 items
βœ… Loading skeleton | 5 | Not Started | EP01-ST01, EP02-ST02 | +| EP03-ST02 | **Als behandelaar wil ik een nieuwe cliΓ«nt aanmaken zodat ik kan starten met intake** | βœ… Modal/drawer met formulier
βœ… Velden: Voornaam, Achternaam, Geboortedatum
βœ… Auto-generated UUID
βœ… Validatie met Zod
βœ… Success toast | 5 | Not Started | EP03-ST01 | +| EP03-ST03 | **Als behandelaar wil ik cliΓ«ntgegevens bekijken zodat ik het dossier kan inzien** | βœ… Route: /clients/[id]
βœ… Breadcrumb navigatie
βœ… Tabs: Overzicht, Intakes, Profiel, Plan
βœ… 404 handling | 5 | Not Started | EP03-ST01 | +| EP03-ST04 | **Als behandelaar wil ik cliΓ«ntgegevens bewerken zodat ik updates kan maken** | βœ… Edit mode in detail view
βœ… Form validation
βœ… Optimistic updates
βœ… Error handling | 3 | Not Started | EP03-ST03 | +| EP03-ST05 | **Als developer wil ik Zustand store voor client state zodat data consistent blijft** | βœ… clientStore.ts setup
βœ… Actions: setSelectedClient, updateClient
βœ… Persistent state waar nodig
βœ… TypeScript types | 3 | Not Started | EP00-ST01 | + +**Technische implementatie details:** +- **API endpoints:** + - `POST /api/clients` - Create + - `GET /api/clients` - List with search + - `GET /api/clients/[id]` - Get single + - `PATCH /api/clients/[id]` - Update +- **Zustand store:** Central state voor selected client +- **Validatie:** Zod schemas voor alle forms + +--- + +### Epic EP04 β€” Intake Module +**Epic Doel:** Rich text editor voor intake verslagen met TipTap integratie. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP04-ST01 | **Als behandelaar wil ik TipTap editor gebruiken zodat ik rijk opgemaakte notities kan maken** | βœ… TipTap met StarterKit
βœ… Toolbar: Bold, Italic, Lists, etc.
βœ… Placeholder text
βœ… Content als ProseMirror JSON | 8 | Not Started | EP03-ST03 | +| EP04-ST02 | **Als behandelaar wil ik intake verslagen opslaan zodat ze bewaard blijven** | βœ… Save button + Ctrl/Cmd+S
βœ… Store in intake_notes table
βœ… Auto-save indicator
βœ… Success/error toasts | 5 | Not Started | EP04-ST01 | +| EP04-ST03 | **Als behandelaar wil ik tags toevoegen aan verslagen zodat ik ze kan categoriseren** | βœ… Tag dropdown: Intake/Evaluatie/Plan
βœ… Tag badge in lijst
βœ… Filter op tag mogelijk
βœ… Validation | 3 | Not Started | EP04-ST02 | +| EP04-ST04 | **Als behandelaar wil ik oude intakes bekijken zodat ik historie kan inzien** | βœ… Lijst van intakes per cliΓ«nt
βœ… Sorteer op datum
βœ… Click to view/edit
βœ… Read-only mode optie | 5 | Not Started | EP04-ST02 | +| EP04-ST05 | **Als developer wil ik tekst extractie implementeren voor search** | βœ… Extract plain text van ProseMirror
βœ… Store in content_text field
βœ… Full-text search mogelijk
βœ… Performance optimization | 5 | Not Started | EP04-ST02 | +| EP04-ST06 | **Als behandelaar wil ik de AI-rail zien zodat AI-resultaten preview kan bekijken** | βœ… Rechter paneel (40% breedte)
βœ… Collapsible/expandable
βœ… Preview area voor AI output
βœ… Action buttons: Invoegen/Annuleren | 8 | Not Started | EP04-ST01 | + +**Technische implementatie details:** +- **TipTap setup:** + ```typescript + import StarterKit from '@tiptap/starter-kit' + const editor = useEditor({ + extensions: [StarterKit], + content: prosemirrorJSON + }) + ``` +- **Storage:** content_json (JSONB) + content_text (TEXT) +- **API:** `/api/intakes` endpoints + +--- + +### Epic EP05 β€” Problem Profile (DSM-light) +**Epic Doel:** DSM-light categorisatie systeem met severity bepaling. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP05-ST01 | **Als behandelaar wil ik een probleem categorie selecteren zodat ik kan classificeren** | βœ… Dropdown met 6 categorieΓ«n (zie FO Β§4.4)
βœ… Beschrijving per categorie
βœ… Validation required field
βœ… Store in problem_profiles | 5 | Not Started | EP04-ST02 | +| EP05-ST02 | **Als behandelaar wil ik severity aangeven zodat ernst duidelijk is** | βœ… Button group: Laag/Middel/Hoog
βœ… Kleur-coded badges
βœ… Hover tooltips met uitleg
βœ… Required validation | 3 | Not Started | EP05-ST01 | +| EP05-ST03 | **Als behandelaar wil ik opmerkingen toevoegen zodat ik context kan geven** | βœ… Textarea voor vrije tekst
βœ… Character limit (500)
βœ… Optional field
βœ… Markdown support | 3 | Not Started | EP05-ST01 | +| EP05-ST04 | **Als behandelaar wil ik AI-suggestie paneel gebruiken zodat classificatie sneller gaat** | βœ… Knop "AI > Analyseer intake"
βœ… Suggestie paneel rechts
βœ… Shows: categorie, severity, rationale
βœ… Accepteer/Negeer buttons
βœ… Source highlighting in intake (zie TO Β§5.4) | 10 | Not Started | EP04-ST02, EP07-ST03 | + +**Technische implementatie details:** +- **CategorieΓ«n (enum):** + - stemming_depressie + - angst + - gedrag_impuls + - middelen_gebruik + - cognitief + - context_psychosociaal +- **Severity badges:** Tailwind classes volgens UX stylesheet +- **AI highlighting:** TipTap Decorations API + +--- + +### Epic EP06 β€” Treatment Plan Module +**Epic Doel:** Genereren en beheren van gestructureerde behandelplannen. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP06-ST01 | **Als behandelaar wil ik een behandelplan genereren zodat ik snel een opzet heb** | βœ… Knop "AI > Genereer behandelplan"
βœ… Uses intake + profile als context
βœ… Genereert 4 secties
βœ… Loading state tijdens generatie | 10 | Not Started | EP05-ST01, EP07-ST04 | +| EP06-ST02 | **Als behandelaar wil ik doelen bewerken zodat ze SMART geformuleerd zijn** | βœ… Lijst van doelen (bullets)
βœ… Inline editing mogelijk
βœ… Add/remove doelen
βœ… Regenerate per doel optie | 8 | Not Started | EP06-ST01 | +| EP06-ST03 | **Als behandelaar wil ik interventies specificeren zodat behandeling duidelijk is** | βœ… Interventie lijst
βœ… Type + frequentie + duur
βœ… Voorgestelde interventies
βœ… Custom toevoegen | 5 | Not Started | EP06-ST01 | +| EP06-ST04 | **Als behandelaar wil ik meetmomenten plannen zodat voortgang gemeten wordt** | βœ… Timeline met meetmomenten
βœ… Na X sessies format
βœ… Evaluatie types
βœ… Calendar integration (stretch) | 5 | Not Started | EP06-ST01 | +| EP06-ST05 | **Als behandelaar wil ik plan publiceren zodat het definitief wordt** | βœ… Concept vs Gepubliceerd status
βœ… Versioning (v1, v2, etc.)
βœ… Published timestamp
βœ… Read-only na publicatie
βœ… Nieuwe versie mogelijk | 6 | Not Started | EP06-ST02 | + +**Technische implementatie details:** +- **Plan structuur (JSONB):** + ```typescript + { + doelen: string[], + interventies: string[], + frequentie: string, + meetmomenten: string[] + } + ``` +- **Status flow:** concept β†’ gepubliceerd β†’ nieuwe versie +- **API:** `/api/treatment-plan` endpoints + +--- + +### Epic EP07 β€” AI Integration +**Epic Doel:** Claude AI integratie voor alle AI-powered features. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP07-ST01 | **Als developer wil ik Claude API client configureren zodat AI calls mogelijk zijn** | βœ… Anthropic SDK setup
βœ… Server-side only implementation
βœ… Error handling
βœ… Rate limiting logic | 5 | Not Started | EP00-ST04 | +| EP07-ST02 | **Als behandelaar wil ik intake samenvatten met AI zodat ik snel overzicht heb** | βœ… Endpoint: /api/ai/summarize
βœ… 5-8 bullet points output
βœ… Nederlands, klinisch neutraal
βœ… Max 5 sec response time | 8 | Not Started | EP07-ST01, EP04-ST06 | +| EP07-ST03 | **Als behandelaar wil ik problemen extraheren met AI zodat classificatie sneller gaat** | βœ… Endpoint: /api/ai/extract
βœ… Returns: category, severity, rationale
βœ… Source sentences identificatie
βœ… Highlighting support | 8 | Not Started | EP07-ST01 | +| EP07-ST04 | **Als behandelaar wil ik behandelplan genereren met AI zodat ik een goede basis heb** | βœ… Endpoint: /api/ai/generate-plan
βœ… SMART doelen formulering
βœ… Evidence-based interventies
βœ… Structured JSON output | 8 | Not Started | EP07-ST01 | +| EP07-ST05 | **Als developer wil ik AI events loggen zodat gebruik gemonitord wordt** | βœ… Store in ai_events table
βœ… Track: prompt, response, duration
βœ… Cost calculation
βœ… Error logging | 5 | Not Started | EP07-ST01, EP01-ST01 | + +**Technische implementatie details:** +- **Claude model:** claude-3-5-sonnet-20241022 +- **Prompt templates:** `/src/lib/ai/prompts/` +- **Temperature:** 0.3 (deterministic) +- **Max tokens:** Per endpoint verschillend +- **Security:** API key alleen server-side + +--- + +### Epic EP08 β€” Dashboard & Navigation +**Epic Doel:** Configureerbaar dashboard met tegels en navigatie. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP08-ST01 | **Als behandelaar wil ik een dashboard zien zodat ik overzicht heb per cliΓ«nt** | βœ… 5 tegels (zie FO Β§4.2)
βœ… Responsive grid layout
βœ… Data uit verschillende tables
βœ… Click naar detail | 5 | Not Started | EP03-ST03 | +| EP08-ST02 | **Als behandelaar wil ik tegels configureren zodat ik kan personaliseren** | βœ… Settings icon β†’ modal
βœ… Checkboxes per tegel
βœ… LocalStorage persistence
βœ… Instant preview | 3 | Not Started | EP08-ST01 | +| EP08-ST03 | **Als gebruiker wil ik breadcrumb navigatie zodat ik weet waar ik ben** | βœ… Breadcrumb in header
βœ… Clickable segments
βœ… Current page highlight
βœ… Responsive truncation | 2 | Not Started | EP03-ST03 | +| EP08-ST04 | **Als gebruiker wil ik sidebar navigatie zodat ik tussen modules kan wisselen** | βœ… Vertical navigation
βœ… Active state indicator
βœ… Icons + labels
βœ… Collapsible op mobile | 3 | Not Started | EP03-ST03 | + +**Technische implementatie details:** +- **Tegels:** Basisgegevens, Laatste Intake, Probleemprofiel, Behandelplan, Afspraken +- **Grid:** Tailwind Grid met responsive breakpoints +- **State:** Zustand voor tegel configuratie + +--- + +### Epic EP09 β€” UI Components & Styling +**Epic Doel:** Consistente UI componenten volgens UX stylesheet. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP09-ST01 | **Als developer wil ik basis componenten bouwen zodat UI consistent is** | βœ… Button, Card, Input, Select
βœ… Consistent met UX stylesheet
βœ… TypeScript props
βœ… Storybook (optional) | 5 | Not Started | EP00-ST02 | +| EP09-ST02 | **Als developer wil ik toast notificaties implementeren zodat feedback duidelijk is** | βœ… Success/Error/Info/Warning
βœ… Auto-dismiss na 5 sec
βœ… Queue multiple toasts
βœ… Accessible (aria-live) | 3 | Not Started | EP09-ST01 | +| EP09-ST03 | **Als developer wil ik loading states implementeren zodat gebruiker weet dat er geladen wordt** | βœ… Skeleton loaders
βœ… Spinners voor buttons
βœ… Progress bars voor AI
βœ… Consistent animation | 3 | Not Started | EP09-ST01 | +| EP09-ST04 | **Als developer wil ik formulier componenten maken zodat input consistent is** | βœ… Form wrapper met validation
βœ… Error messages styling
βœ… Required field indicators
βœ… Help text support | 5 | Not Started | EP09-ST01 | +| EP09-ST05 | **Als developer wil ik dark mode ondersteunen (stretch) zodat gebruikers kunnen kiezen** | βœ… Theme toggle button
βœ… System preference detect
βœ… Persist preference
βœ… All components support | 5 | Not Started | EP09-ST01 | + +**Technische implementatie details:** +- **Kleuren:** Zie UX stylesheet (Β§2-4) +- **Component library:** shadcn/ui of custom +- **Icons:** lucide-react consistent gebruik + +--- + +### Epic EP10 β€” Testing & Quality Assurance +**Epic Doel:** Comprehensive testing voor stabiele demo. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP10-ST01 | **Als developer wil ik unit tests schrijven zodat business logic getest is** | βœ… Vitest setup
βœ… Utils & services tests
βœ… 80% coverage /lib folder
βœ… CI integration | 5 | Not Started | All features | +| EP10-ST02 | **Als developer wil ik E2E tests schrijven zodat kritieke flows werken** | βœ… Playwright setup
βœ… Happy path: intake β†’ profile β†’ plan
βœ… Error scenarios
βœ… Cross-browser | 5 | Not Started | All features | +| EP10-ST03 | **Als team wil ik smoke tests uitvoeren zodat demo stabiel is** | βœ… Manual test checklist
βœ… All features tested
βœ… Performance acceptable
βœ… No console errors | 2 | Not Started | All features | +| EP10-ST04 | **Als developer wil ik accessibility testen zodat app toegankelijk is** | βœ… Keyboard navigation
βœ… Screen reader support
βœ… WCAG AA contrast
βœ… Focus management | 1 | Not Started | EP09 | + +**Technische implementatie details:** +- **Test scenarios:** Zie FO Β§9 demo-scenario +- **Performance:** <3s initial load, <5s AI responses +- **Browser support:** Chrome, Firefox, Safari latest + +--- + +### Epic EP11 β€” Deployment & Demo Prep +**Epic Doel:** Production-ready deployment en demo voorbereiding. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP11-ST01 | **Als developer wil ik Vercel deployment configureren zodat app live is** | βœ… Vercel project setup
βœ… EU region (Amsterdam)
βœ… Environment variables
βœ… Custom domain (optional) | 3 | Not Started | All features | +| EP11-ST02 | **Als team wil ik demo data prepareren zodat presentatie smooth verloopt** | βœ… 3 complete test cliΓ«nten
βœ… Realistic intake texts
βœ… Pre-generated AI responses
βœ… Backup data ready | 5 | Not Started | EP01-ST04 | +| EP11-ST03 | **Als presenter wil ik demo script hebben zodat presentatie gestructureerd is** | βœ… 10-minute script
βœ… Key talking points
βœ… Backup scenarios
βœ… Q&A anticipatie | 3 | Not Started | All features | +| EP11-ST04 | **Als team wil ik dry-run doen zodat demo succesvol verloopt** | βœ… Complete run-through
βœ… Timing verified (< 10 min)
βœ… Technical issues fixed
βœ… Feedback processed | 2 | Not Started | EP11-ST01 | + +**Technische implementatie details:** +- **Deployment checklist:** + - Environment variables set + - Database migrations run + - Seed data loaded + - SSL certificate active + - Monitoring enabled + +--- + +### Epic EP12 β€” Stretch Features (Optional) +**Epic Doel:** Extra features indien tijd beschikbaar. + +| Story ID | Story Description | Acceptance Criteria | Story Points | Status | Dependencies | +|----------|-------------------|---------------------|--------------|--------|--------------| +| EP12-ST01 | **Als behandelaar wil ik afspraken kunnen plannen zodat agenda gekoppeld is** | βœ… Calendar view
βœ… Create/edit appointments
βœ… Link to client
βœ… Dashboard widget | 8 | Not Started | EP08-ST01 | +| EP12-ST02 | **Als behandelaar wil ik PDF export zodat ik rapporten kan delen** | βœ… Export button
βœ… Professional layout
βœ… All sections included
βœ… Download trigger | 8 | Not Started | EP06-ST05 | +| EP12-ST03 | **Als behandelaar wil ik leesbaarheid verbeteren met AI zodat tekst B1-niveau wordt** | βœ… Endpoint: /api/ai/readability
βœ… B1 niveau output
βœ… Preserve medical accuracy
βœ… Preview before apply | 5 | Not Started | EP07-ST01 | + +--- + +## 5. Kwaliteit & Testplan + +🎯 **Doel:** Borging van kwaliteit voor stabiele demo. + +### Test Types +| Test Type | Scope | Tools | Coverage Target | +|-----------|-------|-------|-----------------| +| Unit Tests | Services, utilities, validators | Vitest | 80% /lib folder | +| Integration Tests | API endpoints, database queries | Vitest + MSW | All critical endpoints | +| E2E Tests | Complete user flows | Playwright | 3 happy paths, 2 error paths | +| Performance Tests | Load time, API response | Lighthouse | LCP <2.5s, FID <100ms | +| Accessibility Tests | WCAG compliance | axe-core | AA compliance | +| Security Tests | Auth, XSS, SQL injection | Manual + automated | OWASP top 10 | + +### Critical Test Scenarios +1. **New Client Flow** + - Create client β†’ Add intake β†’ Generate summary β†’ Extract problems β†’ Create plan + - Expected time: <2 minutes + - All data persisted correctly + +2. **AI Integration Flow** + - Large intake text (2000+ words) β†’ All AI features work + - Response time <5 seconds per call + - Graceful degradation if AI fails + +3. **Error Handling** + - Network failure β†’ Appropriate error messages + - Invalid input β†’ Clear validation feedback + - AI timeout β†’ Fallback behavior + +### Demo Checklist +- [ ] Login with demo account works +- [ ] Create new client (auto-generated ID) +- [ ] Write intake with TipTap editor +- [ ] AI summarize returns Dutch bullets +- [ ] Problem extraction with highlighting +- [ ] Treatment plan generation (SMART goals) +- [ ] Publish plan (version 1) +- [ ] Dashboard shows all data correctly +- [ ] Navigation breadcrumbs work +- [ ] No console errors +- [ ] Performance acceptable (<3s loads) +- [ ] Mobile view responsive + +--- + +## 6. Demo & Presentatieplan + +🎯 **Doel:** Succesvolle 10-minuten demo tijdens AI-inspiratiesessie. + +### Demo Timeline +| Time | Activity | Key Points | Backup Plan | +|------|----------|------------|-------------| +| 0:00-1:00 | **Intro** | Context mini-EPD, AI-toegevoegde waarde | Slides ready | +| 1:00-2:30 | **Nieuwe cliΓ«nt** | Quick entry, auto ClientID, immediate start | Pre-created client | +| 2:30-5:00 | **Intake + AI** | TipTap editor, AI summarize, source highlighting | Cached AI response | +| 5:00-7:00 | **Profile + Plan** | DSM categorization, AI-generated plan, SMART goals | Manual input ready | +| 7:00-8:30 | **Publiceren** | Version control, status change, dashboard update | Screenshots | +| 8:30-10:00 | **Q&A** | Interactive discussion, next steps | FAQ prepared | + +### Technical Setup +- **Primary:** Live on Vercel (stable internet required) +- **Backup 1:** Local development server +- **Backup 2:** Recorded video demo +- **Backup 3:** Static screenshots + +### Key Messages +1. AI vermindert administratieve last met 50% +2. Consistente kwaliteit van documentatie +3. Meer tijd voor cliΓ«ntcontact +4. Evidence-based suggesties +5. Privacy-first design (geen echte data) + +--- + +## 7. Risico's & Mitigatie + +🎯 **Doel:** Proactieve risico management voor succesvolle oplevering. + +| Risico | Kans | Impact | Mitigatie | Owner | +|--------|------|--------|-----------|-------| +| **Claude API rate limits** | Hoog | Hoog | Response caching, queue implementation, fallback to OpenAI | Developer | +| **TipTap complexiteit** | Medium | Hoog | Start simple, incremental features, fallback to textarea | Developer | +| **Supabase RLS policies fout** | Medium | Hoog | Extensive testing, service role fallback, monitoring | Developer | +| **AI output inconsistent** | Hoog | Medium | Prompt versioning, temperature tuning, validation layer | Developer | +| **Demo internet uitval** | Laag | Hoog | Local setup ready, mobile hotspot backup, video recording | Presenter | +| **Tijd tekort voor features** | Medium | Medium | MoSCoW prioritization, MVP focus, stretch clearly marked | PM | +| **Browser compatibility** | Laag | Medium | Test on Chrome/Safari/Firefox, polyfills where needed | QA | +| **Performance issues** | Medium | Medium | Lazy loading, code splitting, CDN for assets | Developer | +| **Security vulnerability** | Laag | Hoog | Pen test, OWASP checklist, security headers | Developer | + +--- + +## 8. Referenties + +🎯 **Doel:** Koppeling naar alle relevante projectdocumentatie. + +### Mission Control Documents +- **PRD** β€” [Product Requirements Document](./prd-mini-ecd.md) - Business requirements en scope +- **FO** β€” [Functioneel Ontwerp](./fo-mini-ecd.md) - User flows en functionele specificaties +- **TO** β€” [Technisch Ontwerp](./to-mini-ecd.md) - Architectuur en database design +- **UX/UI** β€” [Stylesheet](./ux-stylesheet.md) - Kleuren en design system +- **API** β€” [API Access Document](./api-acces-mini-ecd.md) - Endpoints en authenticatie + +### External Resources +- **Repository:** `https://github.com/pinkroccade/mini-epd-prototype` +- **Deployment:** `https://mini-epd.vercel.app` +- **Supabase:** `https://app.supabase.com/project/[project-id]` +- **Claude AI:** `https://docs.anthropic.com/claude/reference` +- **TipTap Docs:** `https://tiptap.dev` +- **Next.js Docs:** `https://nextjs.org/docs` + +### Development Resources +- **Component Library:** `https://ui.shadcn.com` +- **Icons:** `https://lucide.dev` +- **Tailwind:** `https://tailwindcss.com` + +--- + +## 9. Technische Notities + +### Database Queries Examples +```typescript +// Get client with full dossier +const { data: client } = await supabase + .from('clients') + .select(` + *, + intake_notes (*), + problem_profiles (*), + treatment_plans (*) + `) + .eq('id', clientId) + .single() + +// Search clients +const { data: clients } = await supabase + .from('clients') + .select('*') + .ilike('last_name', `%${searchQuery}%`) + .order('updated_at', { ascending: false }) +``` + +### AI Prompt Templates +```typescript +// Summarize prompt +const SUMMARIZE_PROMPT = ` +Vat het onderstaande intake-verslag samen in 5-8 bullets. +Schrijf in Nederlands, klinisch neutraal, zonder persoonlijke informatie. + +Intake verslag: +{intakeText} +` + +// Extract problems prompt +const EXTRACT_PROMPT = ` +Analyseer de intake en bepaal: +1. DSM-light categorie (kies uit: stemming_depressie, angst, gedrag_impuls, middelen_gebruik, cognitief, context_psychosociaal) +2. Severity (laag, middel, hoog) +3. Rationale (2-3 zinnen) +4. Bronzinnen uit de tekst + +Intake: +{intakeText} +` +``` + +### Component Structure +```typescript +// Example component with proper typing +interface ClientCardProps { + client: Client + onClick?: (id: string) => void + isSelected?: boolean +} + +export function ClientCard({ client, onClick, isSelected }: ClientCardProps) { + return ( + onClick?.(client.id)} + > + + {client.first_name} {client.last_name} + + {format(new Date(client.birth_date), 'dd-MM-yyyy')} + + + + ) +} +``` + +--- + +**Versiehistorie:** + +| Versie | Datum | Auteur | Wijziging | +|--------|-------|--------|-----------| +| v1.0 | 10-11-2025 | Development Team | InitiΓ«le versie met complete epic breakdown | \ No newline at end of file diff --git a/docs/fo-mini-ecd.md b/docs/specs/fo-mini-ecd.md similarity index 100% rename from docs/fo-mini-ecd.md rename to docs/specs/fo-mini-ecd.md diff --git a/docs/prd-mini-ecd.md b/docs/specs/prd-mini-ecd.md similarity index 100% rename from docs/prd-mini-ecd.md rename to docs/specs/prd-mini-ecd.md diff --git a/docs/specs/sync-log.json b/docs/specs/sync-log.json new file mode 100644 index 0000000..775c3dd --- /dev/null +++ b/docs/specs/sync-log.json @@ -0,0 +1,28 @@ +{ + "timestamp": "2025-11-10T08:34:00Z", + "source_folder_id": "11Vm70rVxj01gIbJzN6Kk1x_8yTbFxSg2", + "source_folder_name": "01-project-epd-prototype", + "destination": "./docs/specs/", + "sync_method": "git-restore", + "projects": [ + { + "name": "mini-epd-prototype", + "files_synced": 5, + "files_failed": 0, + "status": "success", + "files": [ + "api-acces-mini-ecd.md", + "fo-mini-ecd.md", + "prd-mini-ecd.md", + "to-mini-ecd.md", + "ux-stylesheet.md" + ] + } + ], + "summary": { + "total_projects": 1, + "total_files": 5, + "total_failures": 0, + "sync_status": "success" + } +} diff --git a/docs/to-mini-ecd.md b/docs/specs/to-mini-ecd.md similarity index 100% rename from docs/to-mini-ecd.md rename to docs/specs/to-mini-ecd.md diff --git a/docs/ux-stylesheet.md b/docs/specs/ux-stylesheet.md similarity index 100% rename from docs/ux-stylesheet.md rename to docs/specs/ux-stylesheet.md diff --git a/docs/templates/bouwplan_template.md b/docs/templates/bouwplan_template.md new file mode 100644 index 0000000..4adaebf --- /dev/null +++ b/docs/templates/bouwplan_template.md @@ -0,0 +1,369 @@ +# πŸš€ Mission Control β€” Bouwplan Template + +πŸ’‘ **Tip:** Dit document kun je samenstellen met hulp van AI-tools zoals **ChatGPT, Claude, Cursor** of **Gemini**. +Gebruik ze als **sparringpartner** om de bouw van je software te plannen, te documenteren en te verbeteren β€” zelfs als je geen ontwikkelaar bent. +Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetailleerd je elk onderdeel uitwerkt. Voor kleine prototypes volstaat een beknopt overzicht; voor grotere projecten kun je per fase en subfase inzoomen. + +--- + +**Projectnaam:** _[vul in]_ +**Versie:** _v1.0_ +**Datum:** _[dd-mm-jjjj]_ +**Auteur:** _[naam]_ + +--- + +## 1. Doel en context +🎯 **Doel:** Leg uit wat je gaat bouwen en waarom. +πŸ“˜ **Toelichting:** Beschrijf kort de aanleiding voor het project en hoe het past binnen je organisatie of productstrategie. Verwijs hier naar het PRD of FO voor achtergrond. + +**Voorbeeld:** +> Het doel is een werkend MVP te bouwen van de AI-assistent voor zorgdossiers. We tonen de meerwaarde van AI binnen de intake β†’ profiel β†’ plan workflow. + +--- + +## 2. Uitgangspunten + +### 2.1 Technische Stack +🎯 **Doel:** Benoem de technologieΓ«n en frameworks die worden gebruikt. +πŸ“˜ **Toelichting:** Denk aan frontend, backend, database, hosting en externe services. + +**Voorbeeld:** +- **Frontend:** SvelteKit + Tailwind CSS + Lucide Icons +- **Backend:** Firebase Functions / Next.js API Routes +- **Database:** Firestore / PostgreSQL +- **AI/ML:** Vertex AI (Gemini) / OpenAI API +- **Hosting:** Vercel / Firebase Hosting +- **Auth:** Firebase Auth / Supabase Auth + +### 2.2 Projectkaders +🎯 **Doel:** Benoem de vaste kaders waarbinnen het project wordt ontwikkeld. +πŸ“˜ **Toelichting:** Denk aan beperkingen (tijd, budget, resources) en aannames. + +**Voorbeeld:** +- **Tijd:** 3 weken bouwtijd voor MVP +- **Budget:** €X voor externe services (API calls, hosting) +- **Team:** 1 developer + 1 consultant/sparringpartner +- **Data:** Geen productiegegevens (alle data fictief voor demo) +- **Doel:** Demo op AI-inspiratiesessie + +### 2.3 Programmeer Uitgangspunten +🎯 **Doel:** Vastleggen van code-kwaliteit principes en development best practices. +πŸ“˜ **Toelichting:** Deze principes gelden voor alle code die in dit project wordt geschreven. + +**Code Quality Principles:** + +- **DRY (Don't Repeat Yourself)** + - Herbruikbare componenten en functies + - Centrale configuratie voor herhaalde waarden + - Utility functions voor gemeenschappelijke logica + +- **KISS (Keep It Simple, Stupid)** + - Eenvoudige oplossingen boven complexe architectuur + - Duidelijke naamgeving (spreekt voor zich) + - Vermijd premature optimization + +- **SOC (Separation of Concerns)** + - UI-componenten gescheiden van business logic + - API-calls in dedicated service layers + - Database queries in repository/model layers + - Styling gescheiden van functionaliteit + +- **YAGNI (You Aren't Gonna Need It)** + - Bouw alleen wat nu nodig is + - Geen features "voor later" + - Iteratief uitbreiden op basis van feedback + +**Development Practices:** + +- **Code Organization** + - Consistent folder structure (`/components`, `/lib`, `/routes`, `/api`) + - Één component/functie per file waar logisch + - Index files voor clean imports + +- **Error Handling** + - Try-catch blocks op alle async operaties + - User-friendly foutmeldingen in UI + - Logging van errors naar console/monitoring + +- **Security** + - Nooit API keys in frontend code + - Input validation op alle user input + - Firestore/database rules voor data access control + - CORS configuratie voor API endpoints + +- **Performance** + - Lazy loading waar mogelijk + - Debounce op search/input handlers + - Optimized images en assets + - Minimal bundle size (tree-shaking) + +- **Testing** + - Unit tests voor kritieke business logic + - Integration tests voor API endpoints + - Smoke tests voor belangrijkste flows + - Manual testing checklist voor demo + +- **Documentation** + - README met setup instructies + - Inline comments voor complexe logica + - JSDoc/TypeScript types voor public APIs + - Architecture Decision Records (ADR) voor belangrijke keuzes + +**Voorbeeld implementatie:** +```typescript +// ❌ NIET - Violation of DRY +if (user.role === 'admin') { /* ... */ } +if (user.role === 'admin') { /* ... */ } + +// βœ… WEL - DRY principle +const isAdmin = (user) => user.role === 'admin'; +if (isAdmin(user)) { /* ... */ } + +// ❌ NIET - Violation of SOC + + +// βœ… WEL - SOC principle +// In /lib/api.ts +export const loadData = async () => { + const response = await fetch('/api/data'); + return response.json(); +}; + +// In component + +``` + +--- + +## 3. Epics & Stories Overzicht +🎯 **Doel:** De bouw opdelen in logische epics (fases) met stories (subfases). +πŸ“˜ **Toelichting:** Elke epic bevat het doel, afhankelijkheden en status. Stories zijn de uitvoerbare taken binnen een epic. + +**Epic Structuur:** +| Epic ID | Titel | Doel | Status | Stories | Opmerkingen | +|---------|-------|------|--------|---------|-------------| +| E0 | Setup & Configuratie | Repo, omgeving, dependencies | βœ… Gereed | 4 | Config getest | +| E1 | Data & Database | Datamodel en demo-data | πŸ”„ In Progress | 3 | Rules nog aanvullen | +| E2 | UI & Layout | Interface, navigatie, componenten | ⏳ To Do | 3 | Wireframes gereed | +| E3 | AI-integratie | AI endpoints en prompt engineering | ⏳ To Do | 3 | Test met Gemini model | +| E4 | Testing & Deploy | QA, demo prep en deployment | ⏳ To Do | 3 | | + +--- + +## 4. Epics & Stories (Uitwerking) +🎯 **Doel:** Verdeel complexe epics in beheersbare stories voor meer overzicht. +πŸ“˜ **Toelichting:** Je bepaalt zelf het detailniveau. Kleine projecten kunnen volstaan met 2-3 stories per epic; grotere implementaties kunnen tot 10 stories bevatten. + +### Epic 0 β€” Setup & Configuratie +**Epic Doel:** Werkende development omgeving met alle benodigde tools en dependencies. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E0.S1 | Repository aanmaken | GitHub repo + lokale clone, `.gitignore` config | βœ… | β€” | 1 | +| E0.S2 | Project initialisatie | `npm create` draait, dev server start | βœ… | E0.S1 | 2 | +| E0.S3 | Dependencies installeren | Tailwind, Firebase, TypeScript geΓ―nstalleerd | πŸ”„ | E0.S2 | 2 | +| E0.S4 | Environment variables | `.env.local` + Vercel vars geconfigureerd | ⏳ | E0.S3 | 1 | + +**Technical Notes:** +- Gebruik `pnpm` voor snellere installs +- `.env.example` committen voor team onboarding + +--- + +### Epic 1 β€” Data & Database +**Epic Doel:** Werkend datamodel met seed data voor development en demo. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E1.S1 | Datamodel ontwerpen | ERD/schema gedocumenteerd, collections defined | πŸ”„ | E0.S4 | 3 | +| E1.S2 | Security Rules implementeren | Firestore rules geschreven en getest | ⏳ | E1.S1 | 3 | +| E1.S3 | Demo-data seeden | 3+ testcliΓ«nten met complete intake data | ⏳ | E1.S1 | 2 | + +**Technical Notes:** +- Collections: `clients`, `intakes`, `plans`, `ai_events` +- Demo user heeft `all access` voor development +- Seed script: `npm run seed` + +--- + +### Epic 2 β€” UI & Layout +**Epic Doel:** Gebruiksvriendelijke interface volgens UX/FO specificatie. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E2.S1 | Layout skelet bouwen | Topbalk + linker navigatie responsive | ⏳ | E1.S3 | 5 | +| E2.S2 | Component library setup | Herbruikbare buttons, cards, forms | ⏳ | E2.S1 | 3 | +| E2.S3 | Routing & navigatie | `/clients/[id]` structuur werkt, breadcrumbs | ⏳ | E2.S1 | 3 | + +**Technical Notes:** +- shadcn/ui componenten of custom Tailwind components +- Keyboard shortcuts: Ctrl+S (save), Cmd+K (search) +- Mobile-first approach + +--- + +### Epic 3 β€” AI-integratie +**Epic Doel:** Werkende AI-features voor samenvatten, extraheren en plannen genereren. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E3.S1 | Vertex AI configuratie | GCP project + SA key, test call succesvol | ⏳ | E0.S4 | 3 | +| E3.S2 | API endpoints bouwen | `/api/summarize`, `/extract`, `/plan` werken | ⏳ | E3.S1, E1.S3 | 8 | +| E3.S3 | Logging & monitoring | AI calls loggen naar `ai_events` collection | ⏳ | E3.S2 | 2 | + +**Technical Notes:** +- Model: `gemini-1.5-pro` of `gemini-2.0-flash` +- Prompt templates in `/lib/prompts/` +- Error handling voor rate limits en API failures +- Response caching voor repeated calls + +--- + +### Epic 4 β€” Testing & Deployment +**Epic Doel:** Stabiele, geteste applicatie live op productie omgeving. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E4.S1 | Smoke tests uitvoeren | Alle happy flows werken zonder crashes | ⏳ | E3.S3 | 3 | +| E4.S2 | Demo dry-run | Volledige demo in max 10 minuten | ⏳ | E4.S1 | 2 | +| E4.S3 | Productie deployment | Live op Vercel, environment vars gezet | ⏳ | E4.S2 | 2 | + +**Technical Notes:** +- Test scenarios gedocumenteerd in `/docs/test-plan.md` +- Vercel deployment: EU region (Amsterdam) +- Rollback plan als deployment faalt + +--- + +## 5. Kwaliteit & Testplan +🎯 **Doel:** vastleggen hoe de kwaliteit van het project wordt geborgd. +πŸ“˜ **Toelichting:** Licht toe welke tests je uitvoert en hoe je weet dat de build stabiel is. + +### Test Types +| Test Type | Scope | Tools | Verantwoordelijke | +|-----------|-------|-------|-------------------| +| Unit Tests | Business logic, utilities | Vitest / Jest | Developer | +| Integration Tests | API endpoints, database | Playwright / Supertest | Developer | +| Smoke Tests | Kritieke user flows | Manual checklist | QA / Developer | +| Performance Tests | Load times, API response | Lighthouse, Network tab | Developer | +| Security Tests | Auth, data access, XSS | Manual + OWASP checklist | Developer | + +### Test Coverage Targets +- **Unit tests:** 80%+ coverage op `/lib` folder +- **Integration tests:** Alle API endpoints +- **Smoke tests:** 3 happy flows + 2 error scenarios + +### Manual Test Checklist (voor demo) +- [ ] User kan inloggen +- [ ] Nieuwe cliΓ«nt aanmaken werkt +- [ ] Intake formulier opslaan werkt +- [ ] AI samenvatting genereert binnen 5 sec +- [ ] Behandelplan wordt gegenereerd +- [ ] Navigatie werkt zonder errors +- [ ] Mobile view is responsive +- [ ] Error states tonen user-friendly messages + +--- + +## 6. Demo & Presentatieplan +🎯 **Doel:** beschrijven hoe de demo wordt gepresenteerd of getest. +πŸ“˜ **Toelichting:** Vermeld wat je laat zien, wie betrokken is en welk scenario wordt gevolgd. + +### Demo Scenario +**Duur:** 10 minuten +**Doelgroep:** Zorgorganisatie stakeholders + management +**Locatie:** Live op Vercel (backup: localhost) + +**Flow:** +1. **Intro** (1 min): Context en doel van de AI-assistent +2. **Nieuwe cliΓ«nt** (2 min): Aanmaken + intake invullen +3. **AI in actie** (4 min): + - Samenvatting genereren + - Belangrijkste punten extractie + - Behandelplan voorstel +4. **Interactie** (2 min): Aanpassingen maken, opslaan +5. **Afsluiting** (1 min): Vragen + next steps + +**Backup Plan:** +- Lokale versie klaar bij internet issues +- Pre-seeded data als AI API niet reageert +- Screenshots als complete fallback + +--- + +## 7. Risico's & Mitigatie +🎯 **Doel:** risico's vroeg signaleren en voorzien van oplossingen. +πŸ“˜ **Toelichting:** Gebruik dit als dynamische checklist. + +| Risico | Kans | Impact | Mitigatie | Owner | +|--------|------|--------|-----------|-------| +| AI-output inconsistent | Hoog | Hoog | Snapshot tests, prompt versioning, fallback responses | Developer | +| API rate limits tijdens demo | Middel | Hoog | Caching, pre-warmed responses, backup data | Developer | +| Firebase regels te open | Middel | Hoog | Strikte rules voor productie, security audit | Developer | +| Tijdsdruk deadline | Hoog | Middel | Prioriteer MVP features, cut scope indien nodig | PM | +| Browser compatibility issues | Laag | Middel | Test op Chrome, Safari, Firefox | QA | +| Environment vars niet gezet | Middel | Hoog | `.env.example` + deployment checklist | DevOps | + +--- + +## 8. Evaluatie & Lessons Learned +🎯 **Doel:** reflecteren op het proces en verbeteringen vastleggen. +πŸ“˜ **Toelichting:** noteer inzichten na elke sprint of oplevering. + +**Te documenteren na project:** +- Wat ging goed? Wat niet? +- Welke AI-tools waren het meest effectief? +- Welke prompts werkten het beste? +- Waar liepen we vertraging op? +- Wat doen we volgende keer anders? +- Herbruikbare componenten voor volgende projecten + +--- + +## 9. Referenties +🎯 **Doel:** koppelen aan de overige Mission Control-documenten. + +**Mission Control Documents:** +- **PRD** β€” Product Requirements Document +- **FO** β€” Functioneel Ontwerp +- **TO** β€” Technisch Ontwerp +- **UX/UI** β€” Design specificatie +- **API Access** β€” Authenticatie en endpoints documentatie + +**External Resources:** +- Repository: `https://github.com/[org]/[project]` +- Deployment: `https://[project].vercel.app` +- Design: Figma link +- Documentation: `/docs` folder in repo + +--- + +## 10. Glossary & Abbreviations + +| Term | Betekenis | +|------|-----------| +| Epic | Grote feature of fase in development (bevat meerdere stories) | +| Story | Kleine, uitvoerbare taak binnen een epic | +| Story Points | Schatting van complexiteit (Fibonacci: 1, 2, 3, 5, 8, 13) | +| MVP | Minimum Viable Product | +| DRY | Don't Repeat Yourself | +| KISS | Keep It Simple, Stupid | +| SOC | Separation of Concerns | +| YAGNI | You Aren't Gonna Need It | +| SA | Service Account (GCP) | +| ADR | Architecture Decision Record | + +--- + +**Versiehistorie:** + +| Versie | Datum | Auteur | Wijziging | +|--------|-------|--------|-----------| +| v1.0 | [datum] | [naam] | InitiΓ«le versie | \ No newline at end of file diff --git a/docs/fo_template.txt b/docs/templates/fo_template.md similarity index 100% rename from docs/fo_template.txt rename to docs/templates/fo_template.md diff --git a/docs/templates/prd_template.md b/docs/templates/prd_template.md new file mode 100644 index 0000000..4adaebf --- /dev/null +++ b/docs/templates/prd_template.md @@ -0,0 +1,369 @@ +# πŸš€ Mission Control β€” Bouwplan Template + +πŸ’‘ **Tip:** Dit document kun je samenstellen met hulp van AI-tools zoals **ChatGPT, Claude, Cursor** of **Gemini**. +Gebruik ze als **sparringpartner** om de bouw van je software te plannen, te documenteren en te verbeteren β€” zelfs als je geen ontwikkelaar bent. +Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetailleerd je elk onderdeel uitwerkt. Voor kleine prototypes volstaat een beknopt overzicht; voor grotere projecten kun je per fase en subfase inzoomen. + +--- + +**Projectnaam:** _[vul in]_ +**Versie:** _v1.0_ +**Datum:** _[dd-mm-jjjj]_ +**Auteur:** _[naam]_ + +--- + +## 1. Doel en context +🎯 **Doel:** Leg uit wat je gaat bouwen en waarom. +πŸ“˜ **Toelichting:** Beschrijf kort de aanleiding voor het project en hoe het past binnen je organisatie of productstrategie. Verwijs hier naar het PRD of FO voor achtergrond. + +**Voorbeeld:** +> Het doel is een werkend MVP te bouwen van de AI-assistent voor zorgdossiers. We tonen de meerwaarde van AI binnen de intake β†’ profiel β†’ plan workflow. + +--- + +## 2. Uitgangspunten + +### 2.1 Technische Stack +🎯 **Doel:** Benoem de technologieΓ«n en frameworks die worden gebruikt. +πŸ“˜ **Toelichting:** Denk aan frontend, backend, database, hosting en externe services. + +**Voorbeeld:** +- **Frontend:** SvelteKit + Tailwind CSS + Lucide Icons +- **Backend:** Firebase Functions / Next.js API Routes +- **Database:** Firestore / PostgreSQL +- **AI/ML:** Vertex AI (Gemini) / OpenAI API +- **Hosting:** Vercel / Firebase Hosting +- **Auth:** Firebase Auth / Supabase Auth + +### 2.2 Projectkaders +🎯 **Doel:** Benoem de vaste kaders waarbinnen het project wordt ontwikkeld. +πŸ“˜ **Toelichting:** Denk aan beperkingen (tijd, budget, resources) en aannames. + +**Voorbeeld:** +- **Tijd:** 3 weken bouwtijd voor MVP +- **Budget:** €X voor externe services (API calls, hosting) +- **Team:** 1 developer + 1 consultant/sparringpartner +- **Data:** Geen productiegegevens (alle data fictief voor demo) +- **Doel:** Demo op AI-inspiratiesessie + +### 2.3 Programmeer Uitgangspunten +🎯 **Doel:** Vastleggen van code-kwaliteit principes en development best practices. +πŸ“˜ **Toelichting:** Deze principes gelden voor alle code die in dit project wordt geschreven. + +**Code Quality Principles:** + +- **DRY (Don't Repeat Yourself)** + - Herbruikbare componenten en functies + - Centrale configuratie voor herhaalde waarden + - Utility functions voor gemeenschappelijke logica + +- **KISS (Keep It Simple, Stupid)** + - Eenvoudige oplossingen boven complexe architectuur + - Duidelijke naamgeving (spreekt voor zich) + - Vermijd premature optimization + +- **SOC (Separation of Concerns)** + - UI-componenten gescheiden van business logic + - API-calls in dedicated service layers + - Database queries in repository/model layers + - Styling gescheiden van functionaliteit + +- **YAGNI (You Aren't Gonna Need It)** + - Bouw alleen wat nu nodig is + - Geen features "voor later" + - Iteratief uitbreiden op basis van feedback + +**Development Practices:** + +- **Code Organization** + - Consistent folder structure (`/components`, `/lib`, `/routes`, `/api`) + - Één component/functie per file waar logisch + - Index files voor clean imports + +- **Error Handling** + - Try-catch blocks op alle async operaties + - User-friendly foutmeldingen in UI + - Logging van errors naar console/monitoring + +- **Security** + - Nooit API keys in frontend code + - Input validation op alle user input + - Firestore/database rules voor data access control + - CORS configuratie voor API endpoints + +- **Performance** + - Lazy loading waar mogelijk + - Debounce op search/input handlers + - Optimized images en assets + - Minimal bundle size (tree-shaking) + +- **Testing** + - Unit tests voor kritieke business logic + - Integration tests voor API endpoints + - Smoke tests voor belangrijkste flows + - Manual testing checklist voor demo + +- **Documentation** + - README met setup instructies + - Inline comments voor complexe logica + - JSDoc/TypeScript types voor public APIs + - Architecture Decision Records (ADR) voor belangrijke keuzes + +**Voorbeeld implementatie:** +```typescript +// ❌ NIET - Violation of DRY +if (user.role === 'admin') { /* ... */ } +if (user.role === 'admin') { /* ... */ } + +// βœ… WEL - DRY principle +const isAdmin = (user) => user.role === 'admin'; +if (isAdmin(user)) { /* ... */ } + +// ❌ NIET - Violation of SOC + + +// βœ… WEL - SOC principle +// In /lib/api.ts +export const loadData = async () => { + const response = await fetch('/api/data'); + return response.json(); +}; + +// In component + +``` + +--- + +## 3. Epics & Stories Overzicht +🎯 **Doel:** De bouw opdelen in logische epics (fases) met stories (subfases). +πŸ“˜ **Toelichting:** Elke epic bevat het doel, afhankelijkheden en status. Stories zijn de uitvoerbare taken binnen een epic. + +**Epic Structuur:** +| Epic ID | Titel | Doel | Status | Stories | Opmerkingen | +|---------|-------|------|--------|---------|-------------| +| E0 | Setup & Configuratie | Repo, omgeving, dependencies | βœ… Gereed | 4 | Config getest | +| E1 | Data & Database | Datamodel en demo-data | πŸ”„ In Progress | 3 | Rules nog aanvullen | +| E2 | UI & Layout | Interface, navigatie, componenten | ⏳ To Do | 3 | Wireframes gereed | +| E3 | AI-integratie | AI endpoints en prompt engineering | ⏳ To Do | 3 | Test met Gemini model | +| E4 | Testing & Deploy | QA, demo prep en deployment | ⏳ To Do | 3 | | + +--- + +## 4. Epics & Stories (Uitwerking) +🎯 **Doel:** Verdeel complexe epics in beheersbare stories voor meer overzicht. +πŸ“˜ **Toelichting:** Je bepaalt zelf het detailniveau. Kleine projecten kunnen volstaan met 2-3 stories per epic; grotere implementaties kunnen tot 10 stories bevatten. + +### Epic 0 β€” Setup & Configuratie +**Epic Doel:** Werkende development omgeving met alle benodigde tools en dependencies. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E0.S1 | Repository aanmaken | GitHub repo + lokale clone, `.gitignore` config | βœ… | β€” | 1 | +| E0.S2 | Project initialisatie | `npm create` draait, dev server start | βœ… | E0.S1 | 2 | +| E0.S3 | Dependencies installeren | Tailwind, Firebase, TypeScript geΓ―nstalleerd | πŸ”„ | E0.S2 | 2 | +| E0.S4 | Environment variables | `.env.local` + Vercel vars geconfigureerd | ⏳ | E0.S3 | 1 | + +**Technical Notes:** +- Gebruik `pnpm` voor snellere installs +- `.env.example` committen voor team onboarding + +--- + +### Epic 1 β€” Data & Database +**Epic Doel:** Werkend datamodel met seed data voor development en demo. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E1.S1 | Datamodel ontwerpen | ERD/schema gedocumenteerd, collections defined | πŸ”„ | E0.S4 | 3 | +| E1.S2 | Security Rules implementeren | Firestore rules geschreven en getest | ⏳ | E1.S1 | 3 | +| E1.S3 | Demo-data seeden | 3+ testcliΓ«nten met complete intake data | ⏳ | E1.S1 | 2 | + +**Technical Notes:** +- Collections: `clients`, `intakes`, `plans`, `ai_events` +- Demo user heeft `all access` voor development +- Seed script: `npm run seed` + +--- + +### Epic 2 β€” UI & Layout +**Epic Doel:** Gebruiksvriendelijke interface volgens UX/FO specificatie. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E2.S1 | Layout skelet bouwen | Topbalk + linker navigatie responsive | ⏳ | E1.S3 | 5 | +| E2.S2 | Component library setup | Herbruikbare buttons, cards, forms | ⏳ | E2.S1 | 3 | +| E2.S3 | Routing & navigatie | `/clients/[id]` structuur werkt, breadcrumbs | ⏳ | E2.S1 | 3 | + +**Technical Notes:** +- shadcn/ui componenten of custom Tailwind components +- Keyboard shortcuts: Ctrl+S (save), Cmd+K (search) +- Mobile-first approach + +--- + +### Epic 3 β€” AI-integratie +**Epic Doel:** Werkende AI-features voor samenvatten, extraheren en plannen genereren. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E3.S1 | Vertex AI configuratie | GCP project + SA key, test call succesvol | ⏳ | E0.S4 | 3 | +| E3.S2 | API endpoints bouwen | `/api/summarize`, `/extract`, `/plan` werken | ⏳ | E3.S1, E1.S3 | 8 | +| E3.S3 | Logging & monitoring | AI calls loggen naar `ai_events` collection | ⏳ | E3.S2 | 2 | + +**Technical Notes:** +- Model: `gemini-1.5-pro` of `gemini-2.0-flash` +- Prompt templates in `/lib/prompts/` +- Error handling voor rate limits en API failures +- Response caching voor repeated calls + +--- + +### Epic 4 β€” Testing & Deployment +**Epic Doel:** Stabiele, geteste applicatie live op productie omgeving. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E4.S1 | Smoke tests uitvoeren | Alle happy flows werken zonder crashes | ⏳ | E3.S3 | 3 | +| E4.S2 | Demo dry-run | Volledige demo in max 10 minuten | ⏳ | E4.S1 | 2 | +| E4.S3 | Productie deployment | Live op Vercel, environment vars gezet | ⏳ | E4.S2 | 2 | + +**Technical Notes:** +- Test scenarios gedocumenteerd in `/docs/test-plan.md` +- Vercel deployment: EU region (Amsterdam) +- Rollback plan als deployment faalt + +--- + +## 5. Kwaliteit & Testplan +🎯 **Doel:** vastleggen hoe de kwaliteit van het project wordt geborgd. +πŸ“˜ **Toelichting:** Licht toe welke tests je uitvoert en hoe je weet dat de build stabiel is. + +### Test Types +| Test Type | Scope | Tools | Verantwoordelijke | +|-----------|-------|-------|-------------------| +| Unit Tests | Business logic, utilities | Vitest / Jest | Developer | +| Integration Tests | API endpoints, database | Playwright / Supertest | Developer | +| Smoke Tests | Kritieke user flows | Manual checklist | QA / Developer | +| Performance Tests | Load times, API response | Lighthouse, Network tab | Developer | +| Security Tests | Auth, data access, XSS | Manual + OWASP checklist | Developer | + +### Test Coverage Targets +- **Unit tests:** 80%+ coverage op `/lib` folder +- **Integration tests:** Alle API endpoints +- **Smoke tests:** 3 happy flows + 2 error scenarios + +### Manual Test Checklist (voor demo) +- [ ] User kan inloggen +- [ ] Nieuwe cliΓ«nt aanmaken werkt +- [ ] Intake formulier opslaan werkt +- [ ] AI samenvatting genereert binnen 5 sec +- [ ] Behandelplan wordt gegenereerd +- [ ] Navigatie werkt zonder errors +- [ ] Mobile view is responsive +- [ ] Error states tonen user-friendly messages + +--- + +## 6. Demo & Presentatieplan +🎯 **Doel:** beschrijven hoe de demo wordt gepresenteerd of getest. +πŸ“˜ **Toelichting:** Vermeld wat je laat zien, wie betrokken is en welk scenario wordt gevolgd. + +### Demo Scenario +**Duur:** 10 minuten +**Doelgroep:** Zorgorganisatie stakeholders + management +**Locatie:** Live op Vercel (backup: localhost) + +**Flow:** +1. **Intro** (1 min): Context en doel van de AI-assistent +2. **Nieuwe cliΓ«nt** (2 min): Aanmaken + intake invullen +3. **AI in actie** (4 min): + - Samenvatting genereren + - Belangrijkste punten extractie + - Behandelplan voorstel +4. **Interactie** (2 min): Aanpassingen maken, opslaan +5. **Afsluiting** (1 min): Vragen + next steps + +**Backup Plan:** +- Lokale versie klaar bij internet issues +- Pre-seeded data als AI API niet reageert +- Screenshots als complete fallback + +--- + +## 7. Risico's & Mitigatie +🎯 **Doel:** risico's vroeg signaleren en voorzien van oplossingen. +πŸ“˜ **Toelichting:** Gebruik dit als dynamische checklist. + +| Risico | Kans | Impact | Mitigatie | Owner | +|--------|------|--------|-----------|-------| +| AI-output inconsistent | Hoog | Hoog | Snapshot tests, prompt versioning, fallback responses | Developer | +| API rate limits tijdens demo | Middel | Hoog | Caching, pre-warmed responses, backup data | Developer | +| Firebase regels te open | Middel | Hoog | Strikte rules voor productie, security audit | Developer | +| Tijdsdruk deadline | Hoog | Middel | Prioriteer MVP features, cut scope indien nodig | PM | +| Browser compatibility issues | Laag | Middel | Test op Chrome, Safari, Firefox | QA | +| Environment vars niet gezet | Middel | Hoog | `.env.example` + deployment checklist | DevOps | + +--- + +## 8. Evaluatie & Lessons Learned +🎯 **Doel:** reflecteren op het proces en verbeteringen vastleggen. +πŸ“˜ **Toelichting:** noteer inzichten na elke sprint of oplevering. + +**Te documenteren na project:** +- Wat ging goed? Wat niet? +- Welke AI-tools waren het meest effectief? +- Welke prompts werkten het beste? +- Waar liepen we vertraging op? +- Wat doen we volgende keer anders? +- Herbruikbare componenten voor volgende projecten + +--- + +## 9. Referenties +🎯 **Doel:** koppelen aan de overige Mission Control-documenten. + +**Mission Control Documents:** +- **PRD** β€” Product Requirements Document +- **FO** β€” Functioneel Ontwerp +- **TO** β€” Technisch Ontwerp +- **UX/UI** β€” Design specificatie +- **API Access** β€” Authenticatie en endpoints documentatie + +**External Resources:** +- Repository: `https://github.com/[org]/[project]` +- Deployment: `https://[project].vercel.app` +- Design: Figma link +- Documentation: `/docs` folder in repo + +--- + +## 10. Glossary & Abbreviations + +| Term | Betekenis | +|------|-----------| +| Epic | Grote feature of fase in development (bevat meerdere stories) | +| Story | Kleine, uitvoerbare taak binnen een epic | +| Story Points | Schatting van complexiteit (Fibonacci: 1, 2, 3, 5, 8, 13) | +| MVP | Minimum Viable Product | +| DRY | Don't Repeat Yourself | +| KISS | Keep It Simple, Stupid | +| SOC | Separation of Concerns | +| YAGNI | You Aren't Gonna Need It | +| SA | Service Account (GCP) | +| ADR | Architecture Decision Record | + +--- + +**Versiehistorie:** + +| Versie | Datum | Auteur | Wijziging | +|--------|-------|--------|-----------| +| v1.0 | [datum] | [naam] | InitiΓ«le versie | \ No newline at end of file diff --git a/docs/to_template.txt b/docs/templates/to_template.md similarity index 100% rename from docs/to_template.txt rename to docs/templates/to_template.md