docs(ST-509/510): plan Todo Data Table + detail-kaart in backlog M5

Voegt ST-509 (Data Table met TanStack, filter, paginering) en ST-510
(detail-kaart voor aanmaken/bewerken/promoveren) toe aan de backlog.
ST-501–505 gemarkeerd als vervangen door het nieuwe ontwerp.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/scrum4me-backlog.md

@@ -20,7 +20,7 @@ De MVP is klaar wanneer Lars — de primaire persona — de volledige cyclus kan
 | M2: Stories & Drag-and-drop | Stories als blokken, dnd-kit, Zustand | ST-201 – ST-210 |
 | M3: Sprint Backlog & Sprint Planning | Sprint aanmaken, stories slepen, taken | ST-301 – ST-312 |
 | M4: Claude Code REST API | Alle endpoints, tokenbeheer | ST-401 – ST-410 |
-| M5: Todo-lijst | Todo CRUD, promotie naar PBI/story | ST-501 – ST-506 |
+| M5: Todo-lijst | Todo CRUD, promotie naar PBI/story; Data Table + detail-kaart | ST-501 – ST-506, ST-509 – ST-510 |
 | M6: Polish & Launch-ready | Foutafhandeling, toegankelijkheid, CI/CD, beveiliging | ST-601 – ST-612 |
 
 ---
@@ -249,26 +249,46 @@ De MVP is klaar wanneer Lars — de primaire persona — de volledige cyclus kan
 
 ### M5: Todo-lijst
 
-- [ ] **ST-501** Todo-lijst pagina
+> **Herontwerp (april 2026):** ST-501–505 beschreven de oorspronkelijke QuickInput-aanpak. Die is geïmplementeerd maar vervangen door een Data Table + detail-kaart ontwerp (ST-509–510). ST-501–505 zijn als referentie bewaard; de functionele eisen zijn ongewijzigd.
+
+- [x] **ST-501** Todo-lijst pagina *(vervangen door ST-509)*
   - `/todos` pagina; haal actieve (niet-gearchiveerde) todos op inclusief productnaam; snel-invoerveld bovenaan met product-dropdown (verplicht) en titel (Enter om op te slaan); `createTodo` Server Action; lege staat met instructie; productnaam-badge per todo-item
   - Done when: todo aanmaken via Enter persisteert en verschijnt in lijst met productnaam; aanmaken zonder product geblokkeerd; lege staat zichtbaar bij geen todos
 
-- [ ] **ST-502** Todo afvinken
+- [x] **ST-502** Todo afvinken *(vervangen door ST-509)*
   - Checkbox per todo; `toggleTodo` Server Action; afgevinkte todos visueel doorgestreept; afgevinkte todos blijven zichtbaar onderaan de lijst
   - Done when: afvinken persistent na herlaad; visuele doorstreping correct
 
-- [ ] **ST-503** Afgevinkte todos archiveren
+- [x] **ST-503** Afgevinkte todos archiveren *(vervangen door ST-510)*
   - "Archiveer afgeronde items" knop; `archiveCompletedTodos` Server Action; gearchiveerde todos verdwijnen uit standaardweergave
   - Done when: archiveren verbergt alle afgevinkte todos; telling correct
 
-- [ ] **ST-504** Todo promoveren naar PBI
+- [x] **ST-504** Todo promoveren naar PBI *(vervangen door ST-510)*
   - "Promoveer naar PBI" contextmenu of knop per todo; dialoog: product dropdown (actieve producten), prioriteit dropdown; titel vooringevuld (bewerkbaar); bevestigingswaarschuwing; `promoteTodeToPbi` Server Action (maak PBI aan, verwijder todo)
   - Done when: gepromoveerde todo verdwijnt; PBI zichtbaar in juist product met juiste prioriteit
 
-- [ ] **ST-505** Todo promoveren naar story
+- [x] **ST-505** Todo promoveren naar story *(vervangen door ST-510)*
   - "Promoveer naar story" knop per todo; dialoog: product dropdown → PBI dropdown (gefilterd op product), prioriteit; titel vooringevuld; `promoteTodoToStory` Server Action (maak story aan, verwijder todo)
   - Done when: gepromoveerde todo verdwijnt; story zichtbaar in juist PBI met juiste prioriteit
 
+- [ ] **ST-509** Todo Data Table
+  - Installeer `@tanstack/react-table`; voeg shadcn `data-table`-patroon toe
+  - Kolommen: afvink-checkbox (inline toggle via `toggleTodoAction`), titel (max 2 regels, text-ellipsis), productnaam-badge, aanmaakdatum
+  - Toolbar boven de tabel: product-filter dropdown (Alles / Geen product / per product), "Archiveer afgerond"-knop (actief als er afgevinkte todos zijn)
+  - Paginering: max 10 rijen per pagina; vorige/volgende knoppen; paginatelling
+  - Rij-selectie: één rij tegelijk; geselecteerde rij visueel gemarkeerd; klik op geselecteerde rij deselecteert
+  - Lege staat: "Geen todo's voor deze selectie." als filter geen resultaten geeft; "Nog geen todo's. Maak er een aan hieronder." als de lijst helemaal leeg is
+  - Done when: tabel toont alle actieve todos; paginering werkt; filter werkt; afvinken persistent na herlaad; archiveer-knop verbergt afgevinkte todos
+
+- [ ] **ST-510** Todo detail-kaart
+  - Kaart onder de tabel; altijd zichtbaar
+  - **Aanmaken:** "+" knop in toolbar; kaart toont leeg formulier met product-dropdown (erft geselecteerd filter-product, of "Geen product" als filter op "Alles" staat), titel-invoer; opslaan via `createTodoAction`; na opslaan: kaart leegmaken, tabel ververst
+  - **Bewerken:** klik op tabelrij laadt todo in kaart; velden: product-dropdown, titel, done-toggle; opslaan via nieuwe `updateTodoAction` (title + product_id); annuleren deselecteert rij en leegt kaart
+  - **Promoveren:** twee knoppen in de kaart — "→ PBI" en "→ Story"; openen de bestaande `PromotePbiDialog` en `PromoteStoryDialog`; alleen zichtbaar als een bestaande todo geselecteerd is
+  - **Demo-modus:** kaart-invoer uitgeschakeld; promote-knoppen verborgen
+  - `updateTodoAction` toevoegen aan `actions/todos.ts`: valideert eigenaarschap, past title en/of product_id aan, `revalidatePath('/todos')`
+  - Done when: aanmaken via kaart persisteert; bewerken van titel en product werkt; promote vanuit kaart opent juist dialoog; kaart leeg bij geen selectie; demo-gebruiker ziet uitgeschakelde kaart
+
 - [ ] **ST-506** Rolbeheer in instellingen
   - `/settings` pagina met roltoewijzing (checkbox per rol: Product Owner, Scrum Master, Developer); minimaal één rol verplicht; `updateRoles` Server Action; geselecteerde rollen zichtbaar in profielbalk
   - Done when: rollen bijwerken persisterend; profielbalk toont gekozen rollen; uitvinken van alle rollen geeft validatiefout