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

Epic 1: Implement two-level EPD layout and navigation

Browse Source 
Implemented complete two-level navigation system with context-aware
sidebar and header components.

## Changes

### Layout (E1.S1)
- Add fixed header (60px) to EPD layout
- Maintain fixed sidebar (240px)
- Add scrollable main content area with padding

### Context-Aware Sidebar (E1.S2)
- Level 1 (Behandelaar): Dashboard | Cliënten | Agenda | Rapportage
- Level 2 (Client Dossier): ← Cliënten | Dashboard | Intake | Diagnose | Behandelplan | Rapportage
- URL-based context detection (/epd/clients/[id])
- Dynamic menu switching with back button in Level 2

### Context-Aware Header (E1.S3)
- Logo left, search right (both levels)
- Client selector center (Level 2 only)
- Shows client name, ID, and birthdate
- Dropdown icon for future client switching

### Routes & Placeholders (E1.S4)
- Level 1: /epd/dashboard, /epd/agenda, /epd/reports
- Level 2: /epd/clients/[id]/intake, diagnose, plan, reports
- All placeholder pages with clear Epic indicators

### Documentation
- Add comprehensive bouwplan: docs/specs/UI/bouwplan-mini-epd-v1.0.md
- 7 Epics with detailed stories and tech notes

### Fixes
- Fix MDX component type import for build

🚀 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
2025-11-19 21:03:43 +01:00
parent 2ae7b37e5f
commit 78e3019063
11 changed files with 869 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/epd/agenda/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Behandelaar Agenda - Level 1
*
* Kalender view met alle afspraken van de behandelaar.
*/
export default function AgendaPage() {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Agenda
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
Behandelaar Agenda
</p>
<p className="text-slate-500 text-sm">
Kalender view met alle afspraken (alle cliënten)
</p>
<p className="text-xs text-slate-400 mt-4">
Placeholder - Not designed yet
</p>
</div>
</div>
);
}

27
app/epd/clients/[id]/diagnose/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Diagnose & Probleemprofiel - Level 2 (Client Dossier)
*
* DSM-light categorieën met severity tracking.
*/
export default function DiagnosePage({ params }: { params: Promise<{ id: string }> }) {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Diagnose & Probleemprofiel
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
DSM-light Categorieën
</p>
<p className="text-slate-500 text-sm">
6 categorieën met severity indicators (Laag/Middel/Hoog)
</p>
<p className="text-xs text-slate-400 mt-4">
Epic 4 - Placeholder for future content
</p>
</div>
</div>
);
}

27
app/epd/clients/[id]/intake/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Intake Sectie - Level 2 (Client Dossier)
*
* TipTap editor voor intake notities met CRUD functionaliteit.
*/
export default function IntakePage({ params }: { params: Promise<{ id: string }> }) {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Intakes
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
Intake Notities
</p>
<p className="text-slate-500 text-sm">
TipTap editor, CRUD voor intakes, slide-in detail panel
</p>
<p className="text-xs text-slate-400 mt-4">
Epic 3 - Placeholder for future content
</p>
</div>
</div>
);
}

27
app/epd/clients/[id]/plan/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Behandelplan - Level 2 (Client Dossier)
*
* SMART doelen tracking met interventies en versioning.
*/
export default function PlanPage({ params }: { params: Promise<{ id: string }> }) {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Behandelplan
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
SMART Doelen & Interventies
</p>
<p className="text-slate-500 text-sm">
Treatment plan met versioning (v1, v2, concept/gepubliceerd)
</p>
<p className="text-xs text-slate-400 mt-4">
Epic 5 - Placeholder for future content
</p>
</div>
</div>
);
}

27
app/epd/clients/[id]/reports/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Client Rapportage - Level 2 (Client Dossier)
*
* Client-specifieke voortgang en metrics.
*/
export default function ClientReportsPage({ params }: { params: Promise<{ id: string }> }) {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Rapportage & Voortgang
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
Client Voortgang
</p>
<p className="text-slate-500 text-sm">
Behandelduur, sessies, doelvoortgang tracking
</p>
<p className="text-xs text-slate-400 mt-4">
Placeholder - Not designed yet
</p>
</div>
</div>
);
}

89
app/epd/components/epd-header.tsx
View File

@@ -1,53 +1,60 @@
"use client";
import React from 'react';
import { Bell, Search } from 'lucide-react';
import { Search, ChevronDown } from 'lucide-react';
import { usePathname } from 'next/navigation';
interface EPDHeaderProps {
title?: string;
subtitle?: string;
className?: string;
}
export function EPDHeader({ title, subtitle }: EPDHeaderProps) {
export function EPDHeader({ className = "" }: EPDHeaderProps) {
const pathname = usePathname();
// Context detection: Level 2 if URL contains /clients/[id]
const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
const clientId = isClientContext ? pathname.split('/')[3] : null;
// TODO: Fetch actual client data based on clientId
// For now, hardcoded demo data
const selectedClient = clientId ? {
name: "Bas Jansen",
id: "CL0002",
birthDate: "20-11-1992"
} : null;
return (
<header className="sticky top-0 z-20 bg-white border-b border-slate-200 shadow-sm">
<div className="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
{/* Left: Page Title */}
<div className="flex-1">
{title && (
<div>
<h1 className="text-lg font-semibold text-slate-900">
{title}
</h1>
{subtitle && (
<p className="text-xs text-slate-500 mt-0.5">
{subtitle}
</p>
)}
<header className={`h-[60px] bg-white border-b border-slate-200 flex items-center px-6 ${className}`}>
{/* Left: Logo */}
<div className="flex items-center">
<span className="text-base font-medium text-slate-800">Mini-ECD</span>
</div>
{/* Center: Client Selector (only in Level 2) */}
<div className="flex-1 flex justify-center">
{selectedClient && (
<button className="flex flex-col items-center px-4 py-1 hover:bg-slate-50 rounded-md transition-colors group">
<div className="flex items-center gap-1.5">
<span className="text-sm font-medium text-slate-900">
{selectedClient.name}
</span>
<ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
</div>
)}
</div>
{/* Right: Search & Notifications */}
<div className="flex items-center gap-3">
{/* Search Bar - Hidden on mobile */}
<div className="hidden md:block relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
<input
type="text"
placeholder="Zoeken..."
className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
/>
</div>
{/* Notifications */}
<button
className="relative p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
aria-label="Notificaties"
>
<Bell className="h-5 w-5" />
{/* Notification badge */}
<span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full" />
<span className="text-xs text-slate-500">
ID: {selectedClient.id} | Geb: {selectedClient.birthDate}
</span>
</button>
)}
</div>
{/* Right: Search */}
<div className="flex items-center">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
<input
type="text"
placeholder="Zoek cliënt..."
className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
/>
</div>
</div>
</header>

46
app/epd/components/epd-sidebar.tsx
View File

@@ -29,13 +29,21 @@ interface EPDSidebarProps {
userName?: string;
}
// EPD Navigation items
const navigationItems: NavigationItem[] = [
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/clients" },
// LEVEL 1: Behandelaar Context Navigation
const level1NavigationItems: NavigationItem[] = [
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/dashboard" },
{ id: "clients", name: "Cliënten", icon: Users, href: "/epd/clients" },
{ id: "documentation", name: "Documentatie", icon: FileText, href: "/epd/docs" },
{ id: "settings", name: "Instellingen", icon: Settings, href: "/epd/settings" },
{ id: "help", name: "Help", icon: HelpCircle, href: "/epd/help" },
{ id: "agenda", name: "Agenda", icon: FileText, href: "/epd/agenda" },
{ id: "reports", name: "Rapportage", icon: Settings, href: "/epd/reports" },
];
// LEVEL 2: Client Dossier Context Navigation (clientId gets injected)
const level2NavigationItems: NavigationItem[] = [
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/dashboard" },
{ id: "intake", name: "Intake", icon: FileText, href: "/intake" },
{ id: "diagnose", name: "Diagnose", icon: Settings, href: "/diagnose" },
{ id: "plan", name: "Behandelplan", icon: HelpCircle, href: "/plan" },
{ id: "reports", name: "Rapportage", icon: Settings, href: "/reports" },
];
export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarProps) {
@@ -43,6 +51,18 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
const [isOpen, setIsOpen] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(false);
// Context detection: Level 2 if URL contains /clients/[id]
const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
const clientId = isClientContext ? pathname.split('/')[3] : null;
// Determine which navigation items to show
const navigationItems = isClientContext
? level2NavigationItems.map(item => ({
...item,
href: `/epd/clients/${clientId}${item.href}`
}))
: level1NavigationItems;
// Auto-open sidebar on desktop
useEffect(() => {
const handleResize = () => {
@@ -140,6 +160,20 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
{/* Navigation */}
<nav className="flex-1 px-3 py-4 overflow-y-auto">
{/* Back to Cliënten button (Level 2 only) */}
{isClientContext && (
<>
<Link
href="/epd/clients"
className="flex items-center gap-2 px-3 py-2.5 mb-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-md transition-colors"
>
<ChevronLeft className="h-4 w-4" />
{!isCollapsed && <span>Cliënten</span>}
</Link>
<div className="h-px bg-slate-200 my-2 mx-3" />
</>
)}
<ul className="space-y-1">
{navigationItems.map((item) => {
const Icon = item.icon;

27
app/epd/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Behandelaar Dashboard - Level 1
*
* Overzicht van caseload, aandachtspunten, taken en recente activiteit.
*/
export default function DashboardPage() {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Dashboard
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
Behandelaar Dashboard
</p>
<p className="text-slate-500 text-sm">
Caseload overzicht, aandachtspunten en aankomende afspraken
</p>
<p className="text-xs text-slate-400 mt-4">
Epic 1 - Placeholder for future content
</p>
</div>
</div>
);
}

13
app/epd/layout.tsx
View File

@@ -20,7 +20,7 @@ export default async function EPDLayout({ children }: EPDLayoutProps) {
return (
<div className="min-h-screen bg-slate-50 flex">
{/* Sidebar */}
{/* Sidebar - Fixed 240px width on desktop */}
<EPDSidebar
userEmail={user?.email}
userName={user?.user_metadata?.full_name}
@@ -28,9 +28,14 @@ export default async function EPDLayout({ children }: EPDLayoutProps) {
{/* Main Content Area */}
<div className="flex-1 flex flex-col min-w-0">
{/* Page Content */}
<main className="flex-1 overflow-auto">
{children}
{/* Header - Fixed 60px height */}
<EPDHeader />
{/* Page Content - Scrollable */}
<main className="flex-1 overflow-auto bg-white">
<div className="p-8">
{children}
</div>
</main>
</div>
</div>

27
app/epd/reports/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Behandelaar Rapportage - Level 1
*
* BI dashboards, KPI's en statistieken.
*/
export default function ReportsPage() {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Rapportage
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
Behandelaar Rapportage
</p>
<p className="text-slate-500 text-sm">
BI dashboards, KPI's, trends en statistieken
</p>
<p className="text-xs text-slate-400 mt-4">
Placeholder - Not designed yet
</p>
</div>
</div>
);
}

583
docs/specs/UI/bouwplan-mini-epd-v1.0.md Normal file
View File

@@ -0,0 +1,583 @@
# 🚀 Bouwplan — Mini EPD Prototype
**Projectnaam:** Mini EPD Prototype
**Versie:** v1.0
**Datum:** 19-11-2025
**Auteur:** Development Team
---
## 1. Doel en Context
🎯 **Doel:** Een werkend MVP bouwen van een desktop EPD (Electronisch Patiënten Dossier) systeem voor de geestelijke gezondheidszorg met AI-ondersteuning.
**Context:**
Het Mini EPD is een modern dossier systeem voor behandelaren in de GGZ. Het ondersteunt de volledige workflow van intake tot behandelplan met AI-assistentie voor:
- Intake notities en samenvattingen
- DSM-light diagnose classificatie
- SMART behandelplan generatie
**Scope MVP:**
- Desktop-only (min-width 1280px, optimized voor 1440-1920px)
- Two-level navigation systeem (Behandelaar ↔ Client Dossier context)
- 5 core database tables (clients, intake_notes, problem_profiles, treatment_plans, ai_events)
- TipTap rich text editor voor notities
- AI features: summarize, classify, generate plans
**Referenties:**
- Interface Design: `docs/specs/UI/interface-design-plan.md`
- User Flows: `docs/specs/UI/mocks-ui-flow.md`
- Database Schema: `supabase/migrations/20241115000002_create_epd_core_tables.sql`
---
## 2. Uitgangspunten
### 2.1 Technische Stack
- **Frontend:** Next.js 15 + React 19 + TypeScript
- **Styling:** Tailwind CSS v4
- **UI Components:** Radix UI + shadcn/ui patterns
- **Icons:** Lucide React
- **Rich Text:** TipTap (ProseMirror)
- **Database:** Supabase (PostgreSQL)
- **Auth:** Supabase Auth (email/password + OAuth)
- **AI/ML:** OpenAI API / Vertex AI (Gemini) - TBD
- **Hosting:** Vercel
- **State Management:** React Context + URL state
### 2.2 Projectkaders
- **Platform:** Desktop only (MVP), no mobile optimization
- **Timeline:** Iteratief, focus op core workflows eerst
- **Data:** Demo data, geen echte patiëntgegevens
- **Team:** 1-2 developers
- **Performance:** Target < 2s page load, < 5s AI responses
### 2.3 Programmeer Uitgangspunten
**Code Quality Principles:**
- **DRY:** Herbruikbare componenten (`/components/epd/`, `/lib/epd/`)
- **SOC:**
- UI components in `/app/epd/components/`
- Business logic in `/lib/epd/`
- Database queries in `/lib/supabase/queries/`
- API routes in `/app/api/`
- **KISS:** Geen premature abstraction, iteratief verfijnen
- **YAGNI:** Alleen Week 1-2 features, AI features in Week 3
**Development Practices:**
- **Error Handling:** Try-catch op alle async ops, user-friendly messages
- **Security:**
- RLS policies op alle tables
- API keys in environment variables
- Input validation op alle forms
- **Performance:**
- Server Components waar mogelijk
- Client Components alleen voor interactiviteit
- Lazy loading voor AI features
- Debounce op search (300ms)
- **Accessibility:**
- WCAG AA compliance
- Keyboard navigation (Tab, Enter, Escape)
- ARIA labels op alle interactive elements
- Focus states visible
---
## 3. Epics & Stories Overzicht
| Epic ID | Titel | Doel | Status | Stories | Opmerkingen |
|---------|-------|------|--------|---------|-------------|
| E0 | Setup & Configuratie | Repo, database, auth werkend | ✅ | 3 | Grotendeels klaar |
| E1 | Layout & Navigation | Two-level context systeem | 🔄 | 4 | In progress |
| E2 | Cliënten Management | CRUD clients, search/filter | ⏳ | 5 | Week 1-2 |
| E3 | Intake Systeem | TipTap editor, CRUD notes | ⏳ | 6 | Week 1-2 |
| E4 | Diagnose & Probleemprofiel | DSM-light categories, manual entry | ⏳ | 4 | Week 2 |
| E5 | Behandelplan | SMART goals, interventions, versioning | ⏳ | 5 | Week 2-3 |
| E6 | AI Integration | Summarize, classify, generate (Week 3) | ⏳ | 4 | Week 3 |
| E7 | Testing & Polish | QA, accessibility, performance | ⏳ | 3 | Ongoing |
---
## 4. Epics & Stories (Uitwerking)
### Epic 0 — Setup & Configuratie
**Status:** ✅ Grotendeels gereed
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E0.S1 | Repository + Next.js 15 setup | App draait lokaal op :3000 | ✅ | 2 |
| E0.S2 | Supabase project + schema | 5 core tables aangemaakt | ✅ | 3 |
| E0.S3 | Auth flows (login/logout) | Email/password werkt, OAuth ready | ✅ | 5 |
**Tech Notes:**
- Database migrations in `supabase/migrations/`
- Auth flows in `app/auth/` (callback, logout, reset-password)
- Environment vars: `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`
---
### Epic 1 — Layout & Navigation
**Doel:** Two-level context systeem werkend met context-aware sidebar en header
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E1.S1 | EPD root layout | Fixed header + sidebar layout | 🔄 | 3 |
| E1.S2 | Context-aware sidebar | Level 1 vs Level 2 menu dynamisch | 🔄 | 5 |
| E1.S3 | Context-aware header | Client dropdown in Level 2, search bar | 🔄 | 5 |
| E1.S4 | URL-based context detection | Layout past zich aan op basis van URL | ⏳ | 3 |
**Tech Notes:**
**Routing structure:**
```
/epd/dashboard → Behandelaar dashboard (Level 1)
/epd/clients → Cliënten lijst (Level 1)
/epd/clients/[id] → Client dashboard (Level 2)
/epd/clients/[id]/intake → Intake sectie (Level 2)
/epd/clients/[id]/diagnose → Diagnose sectie (Level 2)
/epd/clients/[id]/plan → Behandelplan (Level 2)
```
**Context detection logic:**
```typescript
const isClientDossier = pathname.includes('/clients/') &&
pathname.match(/\/clients\/[^\/]+/);
const clientId = isClientDossier ? pathname.split('/')[3] : null;
```
**Components:**
- `app/epd/layout.tsx` - Root EPD layout met context detection
- `app/epd/components/epd-header.tsx` - Context-aware header
- `app/epd/components/epd-sidebar.tsx` - Context-aware sidebar
---
### Epic 2 — Cliënten Management
**Doel:** CRUD voor cliënten, search/filter, recent clients
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E2.S1 | Cliënten lijst view | Table met search, filters werkend | ⏳ | 5 |
| E2.S2 | Nieuwe cliënt formulier | Modal/page met validatie, opslaan werkt | ⏳ | 5 |
| E2.S3 | Client detail edit | Bestaande client gegevens bewerken | ⏳ | 3 |
| E2.S4 | Search & filter functionaliteit | Real-time zoeken op naam, BSN, ID | ⏳ | 5 |
| E2.S5 | Recent clients tracking | localStorage, max 5 items, dropdown | ⏳ | 3 |
**Tech Notes:**
**Database queries:**
```typescript
// lib/supabase/queries/clients.ts
export async function getClients(filters: ClientFilters) {
const query = supabase
.from('clients')
.select('id, first_name, last_name, birth_date, created_at')
.order('last_name', { ascending: true });
if (filters.search) {
query.or(`first_name.ilike.%${filters.search}%,last_name.ilike.%${filters.search}%`);
}
return query;
}
```
**Search debounce:**
```typescript
const debouncedSearch = useMemo(
() => debounce((value: string) => setSearchQuery(value), 300),
[]
);
```
**Components:**
- `app/epd/clients/page.tsx` - Cliënten lijst
- `app/epd/clients/components/client-list.tsx`
- `app/epd/clients/components/client-search.tsx`
- `app/epd/clients/new/page.tsx` - Nieuwe cliënt form
---
### Epic 3 — Intake Systeem
**Doel:** TipTap editor voor intake notities met CRUD functionaliteit
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E3.S1 | TipTap editor setup | Rich text editor werkend, formatting | ⏳ | 8 |
| E3.S2 | Intake lijst view | Toon alle intakes per client, sorteerbaar | ⏳ | 3 |
| E3.S3 | Nieuwe intake aanmaken | Editor opent, opslaan werkt, JSONB storage | ⏳ | 5 |
| E3.S4 | Intake detail slide-in | 400px panel, scroll, edit/delete | ⏳ | 5 |
| E3.S5 | Content text extraction | JSONB → plain text voor search index | ⏳ | 3 |
| E3.S6 | Auto-save drafts | localStorage, 30s interval, restore on return | ⏳ | 5 |
**Tech Notes:**
**TipTap configuration:**
```typescript
import { useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
const editor = useEditor({
extensions: [StarterKit],
content: initialContent,
onUpdate: ({ editor }) => {
const json = editor.getJSON()
const text = editor.getText()
// Save to state/DB
}
})
```
**Database structure:**
```sql
intake_notes (
id UUID,
client_id UUID,
title TEXT,
tag TEXT ('Intake', 'Evaluatie', 'Plan'),
content_json JSONB, -- TipTap document
content_text TEXT, -- Plain text for FTS
created_at TIMESTAMPTZ
)
```
**Components:**
- `app/epd/clients/[id]/intake/page.tsx` - Intake lijst
- `app/epd/clients/[id]/intake/components/intake-editor.tsx`
- `app/epd/clients/[id]/intake/components/intake-detail-panel.tsx`
---
### Epic 4 — Diagnose & Probleemprofiel
**Doel:** DSM-light categorieën met severity tracking (manual entry MVP)
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E4.S1 | DSM categories grid UI | 6 categorieën visueel, severity badges | ⏳ | 5 |
| E4.S2 | Problem profile CRUD | Aanmaken/bewerken/verwijderen per categorie | ⏳ | 5 |
| E4.S3 | Severity indicator | Laag/Middel/Hoog visueel duidelijk | ⏳ | 2 |
| E4.S4 | Source linking | Link diagnose → intake note (bronverwijzing) | ⏳ | 3 |
**Tech Notes:**
**DSM-light categories:**
```typescript
const DSM_CATEGORIES = [
{ id: 'stemming_depressie', label: 'Stemming & Depressie', color: 'blue' },
{ id: 'angst', label: 'Angst', color: 'purple' },
{ id: 'gedrag_impuls', label: 'Gedrag & Impuls', color: 'red' },
{ id: 'middelen_gebruik', label: 'Middelengebruik', color: 'orange' },
{ id: 'cognitief', label: 'Cognitief', color: 'green' },
{ id: 'context_psychosociaal', label: 'Context & Psychosociaal', color: 'teal' },
] as const;
```
**Severity levels:**
```typescript
type Severity = 'laag' | 'middel' | 'hoog';
const SEVERITY_CONFIG = {
laag: { label: 'Laag', color: 'green', dots: 1 },
middel: { label: 'Middel', color: 'yellow', dots: 3 },
hoog: { label: 'Hoog', color: 'red', dots: 5 },
};
```
**Components:**
- `app/epd/clients/[id]/diagnose/page.tsx`
- `app/epd/clients/[id]/diagnose/components/dsm-categories.tsx`
- `app/epd/clients/[id]/diagnose/components/severity-indicator.tsx`
---
### Epic 5 — Behandelplan
**Doel:** SMART doelen tracking met interventies en versioning
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E5.S1 | Treatment plan data model | JSONB structure + versioning | ⏳ | 3 |
| E5.S2 | SMART goals editor | Lijst van doelen, progress tracking | ⏳ | 8 |
| E5.S3 | Interventies sectie | Evidence-based methoden lijst | ⏳ | 5 |
| E5.S4 | Frequentie & planning | Sessie planning, duration estimate | ⏳ | 3 |
| E5.S5 | Plan versioning | v1, v2, concept/gepubliceerd status | ⏳ | 5 |
**Tech Notes:**
**Treatment plan JSONB structure:**
```typescript
interface TreatmentPlan {
doelen: Array<{
id: string;
beschrijving: string;
specifiek: string; // S - Specific
meetbaar: string; // M - Measurable
acceptabel: boolean; // A - Acceptable
realistisch: boolean; // R - Realistic
tijdgebonden: string; // T - Time-bound
voortgang: number; // 0-100%
}>;
interventies: Array<{
naam: string; // "CGT", "ACT", "EMDR"
beschrijving: string;
doel_ids: string[]; // Links to goals
}>;
frequentie: {
sessies_per_week: number;
totaal_sessies: number;
duur_minuten: number;
};
meetmomenten: Array<{
week: number;
beschrijving: string;
}>;
}
```
**Versioning logic:**
```typescript
// When creating new version:
const latestVersion = await getLatestPlanVersion(clientId);
const newVersion = latestVersion ? latestVersion.version + 1 : 1;
// Publish: concept → gepubliceerd
await supabase
.from('treatment_plans')
.update({ status: 'gepubliceerd', published_at: new Date() })
.eq('id', planId);
```
**Components:**
- `app/epd/clients/[id]/plan/page.tsx`
- `app/epd/clients/[id]/plan/components/smart-goals.tsx`
- `app/epd/clients/[id]/plan/components/interventions.tsx`
- `app/epd/clients/[id]/plan/components/plan-version-selector.tsx`
---
### Epic 6 — AI Integration (Week 3)
**Doel:** AI-powered features voor summarize, classify, generate
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E6.S1 | AI API configuratie | OpenAI/Vertex setup, test call works | ⏳ | 3 |
| E6.S2 | Intake samenvatting | /api/ai/summarize endpoint, <5s response | ⏳ | 8 |
| E6.S3 | Diagnose classificatie | /api/ai/classify endpoint, DSM mapping | ⏳ | 8 |
| E6.S4 | Behandelplan generatie | /api/ai/generate-plan, SMART goals output | ⏳ | 13 |
**Tech Notes:**
**API Routes:**
```
POST /api/ai/summarize - Samenvatting van intake note
POST /api/ai/classify - DSM-light classificatie
POST /api/ai/generate-plan - Behandelplan generatie
```
**AI Events logging:**
```typescript
await supabase.from('ai_events').insert({
kind: 'summarize',
client_id: clientId,
note_id: noteId,
request: { prompt, model },
response: { output, tokens },
duration_ms: responseTime,
});
```
**Prompt templates:**
```typescript
const SUMMARIZE_PROMPT = `
Je bent een GGZ-professional. Vat de volgende intake notitie samen in 3-5 bullet points.
Focus op: klachten, achtergrond, observaties.
Notitie:
{content}
`;
```
**Components:**
- `app/api/ai/summarize/route.ts`
- `app/api/ai/classify/route.ts`
- `app/api/ai/generate-plan/route.ts`
- `lib/ai/prompts.ts`
- `lib/ai/client.ts` (OpenAI/Vertex wrapper)
---
### Epic 7 — Testing & Polish
**Doel:** QA, accessibility audit, performance optimization
| Story ID | Beschrijving | AC | Status | Points |
|----------|--------------|-----|--------|--------|
| E7.S1 | Manual test scenarios | Alle happy flows werken zonder errors | ⏳ | 5 |
| E7.S2 | Accessibility audit | WCAG AA compliance, keyboard nav werkt | ⏳ | 5 |
| E7.S3 | Performance optimization | Lighthouse score >90, <2s load | ⏳ | 3 |
---
## 5. Kwaliteit & Testplan
### Test Types
| Test Type | Scope | Verantwoordelijke |
|-----------|-------|-------------------|
| Manual Testing | Happy flows, edge cases | Developer |
| Accessibility | Keyboard nav, screen reader | Developer |
| Performance | Lighthouse, load times | Developer |
### Manual Test Checklist
**Level 1 - Behandelaar Context:**
- [ ] Login werkt (email/password)
- [ ] Dashboard toont correct (caseload, aandachtspunten)
- [ ] Cliënten lijst laadt, search werkt
- [ ] Nieuwe cliënt aanmaken werkt
- [ ] Klik op client → switch naar Level 2
**Level 2 - Client Dossier Context:**
- [ ] Client dashboard toont correct (info, laatste intake, diagnose)
- [ ] Sidebar toont "← Cliënten" button
- [ ] Header toont client dropdown
- [ ] Navigatie tussen secties werkt (Intake, Diagnose, Plan)
- [ ] "← Cliënten" button → terug naar Level 1
**Intake:**
- [ ] TipTap editor opent, formatting werkt
- [ ] Opslaan intake werkt (JSONB + text extraction)
- [ ] Intake lijst toont alle notities
- [ ] Slide-in detail panel opent/sluit correct
- [ ] Bewerken intake werkt
**Diagnose:**
- [ ] DSM categories grid toont 6 categorieën
- [ ] Severity indicator werkt (laag/middel/hoog)
- [ ] Problem profile aanmaken/bewerken werkt
- [ ] Bronverwijzing naar intake note werkt
**Behandelplan:**
- [ ] SMART goals toevoegen/bewerken werkt
- [ ] Interventies sectie werkt
- [ ] Progress tracking werkt (0-100%)
- [ ] Versioning werkt (v1, v2, concept/gepubliceerd)
**AI Features (Week 3):**
- [ ] Samenvatting genereert binnen 5 seconden
- [ ] Classificatie geeft valide DSM categories
- [ ] Behandelplan generator werkt, output is bruikbaar
- [ ] AI events worden gelogd
**Accessibility:**
- [ ] Alle interactive elements keyboard accessible
- [ ] Focus states zichtbaar
- [ ] ARIA labels correct
- [ ] Color contrast WCAG AA
---
## 6. Demo & Presentatieplan
**Duur:** 15 minuten
**Doelgroep:** Stakeholders, GGZ-professionals
**Demo Scenario:**
1. **Login** (1 min) - Toon authenticatie flow
2. **Behandelaar Dashboard** (2 min) - Overzicht caseload, aandachtspunten
3. **Nieuwe Cliënt** (2 min) - Voeg "Bas Jansen" toe
4. **Intake Notitie** (3 min) - TipTap editor, rich text, opslaan
5. **AI Samenvatting** (2 min) - Genereer samenvatting (Week 3 feature)
6. **Diagnose** (2 min) - DSM classificatie, severity
7. **Behandelplan** (2 min) - SMART goals, interventies
8. **Q&A** (1 min)
**Backup Plan:**
- Localhost als Vercel deployment faalt
- Pre-seeded demo data
- Screenshots als fallback
---
## 7. Risico's & Mitigatie
| Risico | Kans | Impact | Mitigatie | Owner |
|--------|------|--------|-----------|-------|
| TipTap integratie complex | Middel | Hoog | Start met StarterKit, uitbreiden later | Dev |
| AI API rate limits | Hoog | Middel | Caching, response fallbacks, debounce | Dev |
| Context switching bugs | Middel | Hoog | Uitgebreide URL-based state tests | Dev |
| Performance met grote datasets | Middel | Middel | Pagination, lazy loading, indexing | Dev |
| RLS policies te open (demo) | Laag | Hoog | Duidelijke comments, productie checklist | Dev |
| Two-level navigation verwarrend | Middel | Middel | User testing, clear visual feedback | Dev |
---
## 8. Evaluatie & Lessons Learned
**Te documenteren na MVP:**
- Welke onderdelen namen meer tijd dan verwacht?
- TipTap editor challenges en oplossingen
- AI prompt engineering insights (Week 3)
- Two-level navigation UX feedback
- Performance bottlenecks en optimalisaties
- Herbruikbare patterns voor volgende projecten
---
## 9. Referenties
**Mission Control Documents:**
- **Interface Design:** `docs/specs/UI/interface-design-plan.md`
- **User Flows:** `docs/specs/UI/mocks-ui-flow.md`
- **Database Schema:** `supabase/migrations/20241115000002_create_epd_core_tables.sql`
**Codebase:**
- **Repository:** `/home/colin/development/15-mini-epd-prototype`
- **EPD App:** `app/epd/`
- **Components:** `components/ui/`, `app/epd/components/`
- **Database Queries:** `lib/supabase/queries/`
- **Migrations:** `supabase/migrations/`
**External Resources:**
- Next.js 15 Docs: https://nextjs.org/docs
- Supabase Docs: https://supabase.com/docs
- TipTap Docs: https://tiptap.dev
- Radix UI: https://radix-ui.com
- Tailwind CSS: https://tailwindcss.com
---
## 10. Glossary & Abbreviations
| Term | Betekenis |
|------|-----------|
| EPD | Electronisch Patiënten Dossier |
| GGZ | Geestelijke Gezondheidszorg |
| DSM | Diagnostic and Statistical Manual (psychiatric classification) |
| DSM-light | Vereenvoudigde categorisatie (6 hoofdgroepen) |
| SMART | Specific, Measurable, Acceptable, Realistic, Time-bound |
| TipTap | Rich text editor gebouwd op ProseMirror |
| RLS | Row Level Security (Supabase/PostgreSQL) |
| Level 1 | Behandelaar Context (caseload overzicht) |
| Level 2 | Client Dossier Context (individuele cliënt focus) |
| Context Switch | Navigatie tussen Level 1 ↔ Level 2 |
| FTS | Full-Text Search |
| JSONB | PostgreSQL JSON Binary data type |
---
**Versiehistorie:**
| Versie | Datum | Auteur | Wijziging |
|--------|-------|--------|-----------|
| v1.0 | 19-11-2025 | Development Team | Initiële versie op basis van UI specs |