# Test Plan Epic 3 - P1 Blocks

**Datum:** 24-12-2024  
**Status:** Ready for Testing  
**Epic:** E3 - P1 Blocks (E3.S0-S6)

---

## Setup

1. **Start development server:**
   ```bash
   pnpm dev
   ```

2. **Open browser:**
   - Navigeer naar `http://localhost:3000`
   - Log in (of gebruik demo account)
   - Kies "Swift" interface preference
   - Je komt op `/epd/swift`

---

## Test Checklist

### E3.S0 - CanvasArea Block Rendering ✅

- [ ] **Empty State**
  - [ ] Wanneer geen block actief is, zie je de empty state met voorbeeld commando's
  - [ ] Empty state heeft "Wat wil je doen?" tekst

- [ ] **Block Transitions**
  - [ ] Wanneer een block opent, zie je een smooth fade-in animatie
  - [ ] Wanneer een block sluit, zie je een smooth fade-out animatie
  - [ ] Geen flickering tussen blocks

- [ ] **PatientContextCard Auto-Display**
  - [ ] Wanneer je een patiënt selecteert in ZoekenBlock, verschijnt PatientContextCard automatisch
  - [ ] PatientContextCard toont patiënt naam in header

---

### E3.S1 - Block Container ✅

- [ ] **Container Styling**
  - [ ] Alle blocks hebben een donkere achtergrond (slate-800)
  - [ ] Blocks hebben een border (slate-700)
  - [ ] Blocks hebben shadow-2xl

- [ ] **Close Button**
  - [ ] Elke block heeft een X button rechtsboven
  - [ ] Hover over X button verandert kleur
  - [ ] Klik op X sluit het block
  - [ ] ESC toets sluit ook het block

- [ ] **Sizes**
  - [ ] DagnotatieBlock heeft size "md"
  - [ ] ZoekenBlock heeft size "md"
  - [ ] OverdrachtBlock heeft size "lg"
  - [ ] PatientContextCard heeft size "lg"

- [ ] **Animations**
  - [ ] Container heeft fade-in animatie
  - [ ] Content heeft stagger animatie (items verschijnen na elkaar)
  - [ ] Close button heeft hover/tap animaties

---

### E3.S2 - DagnotatieBlock ✅

- [ ] **Patient Search**
  - [ ] Typ "jan" in patient search veld
  - [ ] Na ~300ms zie je zoekresultaten
  - [ ] Resultaten tonen naam, geboortedatum, BSN
  - [ ] Klik op een patiënt selecteert deze

- [ ] **Category Selector**
  - [ ] 5 categorie buttons zijn zichtbaar: medicatie, adl, gedrag, incident, observatie
  - [ ] Klik op een categorie selecteert deze (visuele feedback)
  - [ ] Alleen één categorie kan geselecteerd zijn

- [ ] **Text Input**
  - [ ] Textarea is beschikbaar
  - [ ] Character counter toont "0 / 500"
  - [ ] Typ tekst → counter update
  - [ ] Max 500 karakters (kan niet meer typen)

- [ ] **Include in Handover**
  - [ ] Checkbox "Opnemen in overdracht" is zichtbaar
  - [ ] Checkbox kan aangevinkt worden

- [ ] **Save Functionality**
  - [ ] Klik "Opslaan" zonder patiënt → error message
  - [ ] Klik "Opslaan" zonder categorie → error message
  - [ ] Klik "Opslaan" zonder tekst → error message
  - [ ] Vul alles in en klik "Opslaan"
  - [ ] Success toast verschijnt
  - [ ] Block sluit automatisch na ~500ms

- [ ] **Prefill Data**
  - [ ] Typ "notitie jan medicatie" in command input
  - [ ] DagnotatieBlock opent met "jan" voorgevuld in patient search
  - [ ] Categorie "medicatie" is geselecteerd

---

### E3.S3 - Patient Search API ✅

- [ ] **API Endpoint**
  - [ ] Open DevTools → Network tab
  - [ ] Typ in ZoekenBlock of DagnotatieBlock
  - [ ] Request naar `/api/patients/search?q=...` wordt gemaakt
  - [ ] Response heeft `patients` array met `matchScore`

- [ ] **Search Functionality**
  - [ ] Zoek op naam: "jan" → resultaten met "Jan" in naam
  - [ ] Zoek op BSN: "123456789" → resultaten met deze BSN
  - [ ] Zoek op clientnummer: "12345" → resultaten met dit nummer
  - [ ] Zoek op deel van naam: "mar" → resultaten met "Marie", "Maria", etc.

- [ ] **Match Scoring**
  - [ ] Exacte naam match heeft hogere score
  - [ ] Resultaten zijn gesorteerd op matchScore (hoogste eerst)

- [ ] **Error Handling**
  - [ ] Zoek op "x" (te kort) → geen request
  - [ ] Network error → error message in UI

---

### E3.S4 - ZoekenBlock ✅

- [ ] **Search Input**
  - [ ] Typ in search input veld
  - [ ] Debouncing werkt (geen request bij elke toetsaanslag)
  - [ ] Loading indicator tijdens zoeken

- [ ] **Search Results**
  - [ ] Resultaten verschijnen in dropdown
  - [ ] Elke resultaat toont: avatar, naam, geboortedatum, BSN, clientnummer
  - [ ] Max 5 resultaten getoond

- [ ] **Patient Selection**
  - [ ] Klik op een patiënt in resultaten
  - [ ] Loading indicator tijdens ophalen volledige data
  - [ ] Success toast: "Patiënt geselecteerd"
  - [ ] Block sluit automatisch
  - [ ] PatientContextCard verschijnt automatisch

- [ ] **Store Integration**
  - [ ] Na selectie is `activePatient` gezet in store
  - [ ] Recent action is toegevoegd: "Patiënt geselecteerd: [naam]"

- [ ] **Empty State**
  - [ ] Geen resultaten → "Geen patiënten gevonden" message
  - [ ] Te korte query → geen resultaten

---

### E3.S5 - PatientContextCard ✅

- [ ] **Auto-Open**
  - [ ] Na patiënt selectie in ZoekenBlock verschijnt PatientContextCard automatisch
  - [ ] PatientContextCard heeft patiënt naam in header

- [ ] **Loading State**
  - [ ] Tijdens laden zie je "Context laden..." met spinner

- [ ] **Notities Sectie**
  - [ ] Laatste 5 reports worden getoond
  - [ ] Elke notitie toont: type badge, overdracht indicator, datum/tijd, content preview
  - [ ] Content is gelimiteerd tot 2 regels (line-clamp-2)

- [ ] **Vitals Sectie**
  - [ ] Vitale functies van vandaag worden getoond
  - [ ] Grid layout (2 kolommen)
  - [ ] Abnormale waarden hebben amber achtergrond
  - [ ] Elke vital toont: naam, waarde, eenheid, tijdstip

- [ ] **Diagnoses Sectie**
  - [ ] Actieve diagnoses worden getoond
  - [ ] Elke diagnose toont: naam, startdatum (indien beschikbaar)

- [ ] **Risico's Sectie**
  - [ ] Risk assessments worden getoond
  - [ ] Risico badges met kleurcodering (rood voor hoog, amber voor gemiddeld)
  - [ ] Elke badge toont: type + niveau

- [ ] **Empty State**
  - [ ] Geen data beschikbaar → "Geen context beschikbaar voor deze patiënt"

- [ ] **Error Handling**
  - [ ] API error → error message met retry optie

---

### E3.S6 - OverdrachtBlock ✅

- [ ] **Patients List**
  - [ ] Lijst van patiënten met activiteit wordt geladen
  - [ ] Loading state tijdens laden
  - [ ] Elke patiënt toont: naam, alert count, risico indicator

- [ ] **Period Selector**
  - [ ] 4 period buttons: Vandaag, 3 dagen, 1 week, 2 weken
  - [ ] Geselecteerde periode heeft visuele feedback
  - [ ] Beschrijving onder buttons update bij selectie

- [ ] **Active Patient Filter**
  - [ ] Wanneer `activePatient` is gezet, toont alleen die patiënt
  - [ ] Wanneer geen `activePatient`, toont alle patiënten

- [ ] **Generate Summary**
  - [ ] Klik "Genereer" button voor een patiënt
  - [ ] Loading state: "Samenvatting wordt gegenereerd..."
  - [ ] Na ~3-5 seconden verschijnt samenvatting

- [ ] **Summary Display**
  - [ ] **Samenvatting**: AI-gegenereerde tekst in grijze box
  - [ ] **Aandachtspunten**: Lijst met urgentie badges
    - [ ] Urgente punten hebben rode border + alert icon
    - [ ] Bron type badges (observatie, rapportage, verpleegkundig, risico)
    - [ ] Bronverwijzingen met datum + label
  - [ ] **Actiepunten**: Checklist met acties
  - [ ] **Footer**: Tijdstip generatie + duration, refresh button

- [ ] **Error Handling**
  - [ ] API error → error message met "Opnieuw proberen" button
  - [ ] Network error → toast notification

- [ ] **Refresh**
  - [ ] Klik "Vernieuwen" button → nieuwe samenvatting wordt gegenereerd

---

## Cross-Feature Tests

- [ ] **Keyboard Shortcuts**
  - [ ] ESC sluit actieve block
  - [ ] Cmd+K focust command input

- [ ] **Animations**
  - [ ] Alle transitions zijn smooth (geen janky animaties)
  - [ ] Geen layout shifts tijdens animaties

- [ ] **Error States**
  - [ ] Network errors tonen user-friendly messages
  - [ ] Validation errors zijn duidelijk
  - [ ] Retry functionaliteit werkt

- [ ] **Performance**
  - [ ] Blocks openen binnen 100ms
  - [ ] API calls zijn debounced waar nodig
  - [ ] Geen onnodige re-renders

---

## Known Issues / Notes

- [ ] Noteer hier eventuele issues die je tegenkomt
- [ ] Noteer verbeteringen die je zou willen zien

---

## Test Resultaten

**Tester:** _________________  
**Datum:** _________________  
**Status:** ⏳ In Progress / ✅ Passed / ❌ Failed

**Totaal:** ___ / ___ tests passed

