265d3a971f
Diagnose Module: - Diagnose overzicht pagina met alle patiënt diagnoses - Diagnosis manager met ICD-10 combobox zoekfunctie - Diagnose kaarten met hoofddiagnose markering - Modal voor nieuwe/bewerkte diagnoses - ICD-10 GGZ codes dataset (lib/data/) - Zod schemas voor diagnose validatie - TypeScript types voor ICD-10 (lib/types/icd10.ts) - Complete documentatie (PRD, FO, TO, Bouwplan) Agenda Uitbreidingen: - Patient context card in afspraak modal - Rapportage composer direct in afspraak modal - Rapportage bewerken vanuit gekoppelde rapportages - Verbeterde focus styling voor inputs Behandelplan: - Flat componenten structuur (behandeldoel-card, form, planning) - Context header component - Uitgebreide types (lib/types/behandelplan.ts) - Actions voor behandelplan beheer UI Componenten: - Command component (shadcn/ui) voor combobox - Popover component (shadcn/ui) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
196 lines
5.0 KiB
Markdown
196 lines
5.0 KiB
Markdown
# Diagnose Module - Implementatieplan
|
|
|
|
## Overzicht
|
|
Implementatie van een verbeterde diagnosemodule voor het Mini-EPD prototype met:
|
|
- ICD-10 classificatie (publiek domein, geen licentie nodig)
|
|
- Autocomplete zoekfunctionaliteit
|
|
- Consistente UX/UI volgens bestaande EPD patterns
|
|
|
|
## Documentatie Status ✅
|
|
- [x] PRD v1.1 - `docs/specs/diagnose/prd-diagnose-module-v1.md`
|
|
- [x] FO v1.1 - `docs/specs/diagnose/fo-diagnose-module-v1.md`
|
|
- [x] TO v1.0 - `docs/specs/diagnose/to-diagnose-module-v1.md`
|
|
- [x] UX/UI Specificaties (zie hieronder)
|
|
|
|
---
|
|
|
|
## UX/UI Design Beslissingen
|
|
|
|
### Kleurenschema (conform ux-stylesheet.md)
|
|
| Element | Kleur | Hex |
|
|
|---------|-------|-----|
|
|
| Primary action (knoppen) | Teal | `#0D9488` (teal-600) |
|
|
| Borders | Slate | `#E2E8F0` (slate-200) |
|
|
| Text primary | Slate | `#0F172A` (slate-900) |
|
|
| Text secondary | Slate | `#64748B` (slate-500) |
|
|
| Error | Red | `#DC2626` |
|
|
| Success toast | Green | `#16A34A` |
|
|
|
|
### Badge Kleuren (Ernst/Status)
|
|
| Type | Achtergrond | Tekst |
|
|
|------|-------------|-------|
|
|
| Ernst: Licht | `#E5E7EB` | `#374151` |
|
|
| Ernst: Matig | `#FEF3C7` | `#92400E` |
|
|
| Ernst: Ernstig | `#FEE2E2` | `#991B1B` |
|
|
| Status: Actief | `#ECFDF5` | `#16A34A` |
|
|
| Status: In remissie | `#EFF6FF` | `#3B82F6` |
|
|
| Status: Opgelost | `#F1F5F9` | `#64748B` |
|
|
| HOOFD badge | `#0D9488` | `#FFFFFF` |
|
|
|
|
### Component Patterns (hergebruik bestaande)
|
|
- **Card layout**: Zoals `anamnese-manager.tsx` en `risk-manager.tsx`
|
|
- **Modal/Dialog**: Zoals `appointment-modal.tsx`
|
|
- **Form styling**: Bestaande input/select classes
|
|
- **Empty state**: Zoals `intake-list.tsx`
|
|
|
|
---
|
|
|
|
## Implementatie Stappenplan
|
|
|
|
### Epic 1: Data & Types (~1 uur)
|
|
|
|
**Story 1.1: ICD-10 Codelijst JSON**
|
|
```
|
|
lib/data/icd10-ggz-codes.json
|
|
```
|
|
- ~50 meest voorkomende GGZ codes
|
|
- Categorieën: Depressie, Angst, Trauma, OCD, Persoonlijkheid, etc.
|
|
- Velden: code, display, category, keywords
|
|
|
|
**Story 1.2: TypeScript Types**
|
|
```
|
|
lib/types/icd10.ts
|
|
```
|
|
- ICD10Code interface
|
|
- ICD10Category interface
|
|
|
|
**Story 1.3: Zod Validatie Schema**
|
|
```
|
|
lib/schemas/diagnosis.ts
|
|
```
|
|
- diagnosisSchema met code, severity, status validatie
|
|
|
|
---
|
|
|
|
### Epic 2: UI Componenten (~3-4 uur)
|
|
|
|
**Story 2.1: Installeer cmdk**
|
|
```bash
|
|
pnpm add cmdk
|
|
```
|
|
|
|
**Story 2.2: ICD10Combobox Component**
|
|
```
|
|
app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/icd10-combobox.tsx
|
|
```
|
|
- Autocomplete met cmdk
|
|
- Client-side filtering
|
|
- Snelkeuze bij leeg veld
|
|
- Keyboard navigatie
|
|
|
|
**Story 2.3: DiagnosisCard Component**
|
|
```
|
|
app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/diagnosis-card.tsx
|
|
```
|
|
- Code + beschrijving header
|
|
- Ernst/Status/Datum badges
|
|
- HOOFD badge voor hoofddiagnose
|
|
- Expandable onderbouwing
|
|
- Bewerk/Verwijder acties
|
|
|
|
**Story 2.4: DiagnosisModal Component**
|
|
```
|
|
app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/diagnosis-modal.tsx
|
|
```
|
|
- Dialog wrapper
|
|
- ICD10Combobox integratie
|
|
- Ernst dropdown (Licht/Matig/Ernstig)
|
|
- Status dropdown (Actief/In remissie/Opgelost)
|
|
- Type radio (Hoofd/Nevendiagnose)
|
|
- DSM-5 referentie tekstveld (optioneel)
|
|
- Onderbouwing textarea
|
|
- Validatie met zod
|
|
|
|
---
|
|
|
|
### Epic 3: Integratie (~2 uur)
|
|
|
|
**Story 3.1: Refactor DiagnosisManager**
|
|
```
|
|
app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/diagnosis-manager.tsx
|
|
```
|
|
- Vervang inline form door modal trigger
|
|
- Integreer DiagnosisCard voor lijst
|
|
- Lege staat met dashed border
|
|
- + Nieuwe diagnose knop
|
|
|
|
**Story 3.2: Update Server Actions**
|
|
```
|
|
app/epd/patients/[id]/intakes/[intakeId]/actions.ts
|
|
```
|
|
- Wijzig code_system naar 'ICD-10'
|
|
- Voeg updateDiagnosis() functie toe
|
|
- Uitbreid DiagnosisPayload type
|
|
|
|
**Story 3.3: Toast Integratie**
|
|
- Succes toast bij opslaan
|
|
- Succes toast bij verwijderen
|
|
- Error handling
|
|
|
|
---
|
|
|
|
### Epic 4: Polish (~1 uur)
|
|
|
|
**Story 4.1: Empty State**
|
|
- Dashed border container
|
|
- Icon + tekst
|
|
- Prominente CTA knop
|
|
|
|
**Story 4.2: Loading States**
|
|
- Button spinner bij opslaan
|
|
- Disabled state tijdens transitie
|
|
|
|
**Story 4.3: Validatie Feedback**
|
|
- Inline errors onder velden
|
|
- Focus op eerste error veld
|
|
|
|
---
|
|
|
|
## Kritieke Bestanden
|
|
|
|
### Te wijzigen
|
|
- `app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/diagnosis-manager.tsx`
|
|
- `app/epd/patients/[id]/intakes/[intakeId]/actions.ts`
|
|
|
|
### Nieuw aan te maken
|
|
- `lib/data/icd10-ggz-codes.json`
|
|
- `lib/types/icd10.ts`
|
|
- `lib/schemas/diagnosis.ts`
|
|
- `app/epd/.../diagnosis/components/icd10-combobox.tsx`
|
|
- `app/epd/.../diagnosis/components/diagnosis-card.tsx`
|
|
- `app/epd/.../diagnosis/components/diagnosis-modal.tsx`
|
|
|
|
### Dependencies
|
|
- `cmdk` (toe te voegen)
|
|
|
|
---
|
|
|
|
## Acceptatiecriteria
|
|
|
|
1. **Zoekfunctie**: Zoeken op "depressie" toont F32.x codes binnen 200ms
|
|
2. **Code selectie**: Selecteren vult beschrijving automatisch in
|
|
3. **Validatie**: Opslaan zonder code toont inline error
|
|
4. **CRUD**: Toevoegen, bewerken, verwijderen werkt correct
|
|
5. **Badges**: Ernst en status tonen correcte kleuren
|
|
6. **Hoofddiagnose**: Maximaal 1 per intake, duidelijk gemarkeerd
|
|
7. **Build**: `pnpm build` slaagt zonder errors
|
|
|
|
---
|
|
|
|
## Geschatte Doorlooptijd
|
|
- Epic 1: 1 uur
|
|
- Epic 2: 3-4 uur
|
|
- Epic 3: 2 uur
|
|
- Epic 4: 1 uur
|
|
- **Totaal: ~7-8 uur**
|