From 2dfd01e4216652c1c302956792df6c5c683bc5e8 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sat, 25 Apr 2026 19:23:54 +0200
Subject: [PATCH] feat(todos): dropdown filters visible todos; 'Alles' toont
 alles

De product-dropdown fungeert nu als filter voor de lijst:
- 'Alles' (default) toont alle todo's
- 'Geen product' toont alleen ongelinkte todo's
- Een specifiek product toont alleen todo's van dat product

Nieuw aangemaakte todo's krijgen het geselecteerde product mee.
'Alles' en 'Geen product' resulteren in een todo zonder productlink.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 actions/todos.ts               |  3 ++-
 components/todos/todo-list.tsx | 40 +++++++++++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/actions/todos.ts b/actions/todos.ts
index 86c8ad6..1b717a8 100644
--- a/actions/todos.ts
+++ b/actions/todos.ts
@@ -18,7 +18,8 @@ export async function createTodoAction(_prevState: unknown, formData: FormData)
   if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
 
   const title = (formData.get('title') as string)?.trim()
-  const productId = (formData.get('productId') as string)?.trim() || null
+  const raw = (formData.get('productId') as string)?.trim()
+  const productId = (raw && raw !== 'all') ? raw : null
 
   if (!title) return { error: 'Titel is verplicht' }
 
diff --git a/components/todos/todo-list.tsx b/components/todos/todo-list.tsx
index 998ebac..b22e146 100644
--- a/components/todos/todo-list.tsx
+++ b/components/todos/todo-list.tsx
@@ -40,7 +40,17 @@ interface TodoListProps {
   isDemo: boolean
 }
 
-function QuickInput({ products, isDemo }: { products: Product[]; isDemo: boolean }) {
+function QuickInput({
+  products,
+  isDemo,
+  selectedProductId,
+  onProductChange,
+}: {
+  products: Product[]
+  isDemo: boolean
+  selectedProductId: string
+  onProductChange: (id: string) => void
+}) {
   const [state, formAction] = useActionState(createTodoAction, undefined)
   const titleRef = useRef<HTMLInputElement>(null)
 
@@ -53,9 +63,12 @@ function QuickInput({ products, isDemo }: { products: Product[]; isDemo: boolean
       <form action={formAction} className="flex gap-2">
         <select
           name="productId"
+          value={selectedProductId}
+          onChange={e => onProductChange(e.target.value)}
           disabled={isDemo}
           className="border border-border rounded-lg px-3 py-1.5 text-sm bg-input-background shrink-0"
         >
+          <option value="all">Alles</option>
           <option value="">Geen product</option>
           {products.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
         </select>
@@ -239,9 +252,17 @@ export function TodoList({ todos, products, isDemo }: TodoListProps) {
   const [, startTransition] = useTransition()
   const [promotePbi, setPromotePbi] = useState<Todo | null>(null)
   const [promoteStory, setPromoteStory] = useState<Todo | null>(null)
+  const [selectedProductId, setSelectedProductId] = useState('all')
 
-  const open = todos.filter(t => !t.done)
-  const done = todos.filter(t => t.done)
+  const filtered =
+    selectedProductId === 'all'
+      ? todos
+      : selectedProductId === ''
+      ? todos.filter(t => t.product_id === null)
+      : todos.filter(t => t.product_id === selectedProductId)
+
+  const open = filtered.filter(t => !t.done)
+  const done = filtered.filter(t => t.done)
 
   function handleToggle(id: string, current: boolean) {
     startTransition(async () => {
@@ -259,11 +280,18 @@ export function TodoList({ todos, products, isDemo }: TodoListProps) {
 
   return (
     <div className="space-y-4">
-      <QuickInput products={products} isDemo={isDemo} />
+      <QuickInput
+        products={products}
+        isDemo={isDemo}
+        selectedProductId={selectedProductId}
+        onProductChange={setSelectedProductId}
+      />
 
-      {todos.length === 0 ? (
+      {filtered.length === 0 ? (
         <div className="bg-surface-container-low border border-border rounded-xl p-12 text-center">
-          <p className="text-muted-foreground text-sm">Geen todo&apos;s. Voeg er een toe hierboven.</p>
+          <p className="text-muted-foreground text-sm">
+            {todos.length === 0 ? 'Geen todo’s. Voeg er een toe hierboven.' : 'Geen todo’s voor deze selectie.'}
+          </p>
         </div>
       ) : (
         <>