feat: ST-501-ST-506 M5 todo-lijst en rolbeheer

- Todo-lijst met snelle invoer via Enter (ST-501)
- Todo afvinken met visuele doorstreping (ST-502)
- Archiveer afgeronde todos (ST-503)
- Promoveer todo naar PBI met product en prioriteit keuze (ST-504)
- Promoveer todo naar story met product, PBI en prioriteit keuze (ST-505)
- Rolbeheer in instellingen: Product Owner, Scrum Master, Developer (ST-506)

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

app/(app)/settings/page.tsx

@@ -1,11 +1,18 @@
 import { cookies } from 'next/headers'
 import { getIronSession } from 'iron-session'
 import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
+import { RoleManager } from '@/components/settings/role-manager'
 import Link from 'next/link'
 
 export default async function SettingsPage() {
   const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
 
+  const userRoles = await prisma.userRole.findMany({
+    where: { user_id: session.userId },
+  })
+  const currentRoles = userRoles.map(r => r.role as string)
+
   return (
     <div className="p-6 max-w-2xl mx-auto w-full space-y-6">
       <h1 className="text-xl font-medium text-foreground">Instellingen</h1>
@@ -18,6 +25,8 @@ export default async function SettingsPage() {
         </p>
       </div>
 
+      <RoleManager currentRoles={currentRoles} isDemo={session.isDemo ?? false} />
+
       <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
         <div className="flex items-center justify-between">
           <h2 className="text-sm font-medium text-foreground">API Tokens</h2>

app/(app)/todos/page.tsx

@@ -0,0 +1,37 @@
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
+import { TodoList } from '@/components/todos/todo-list'
+
+export default async function TodosPage() {
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+
+  const todos = await prisma.todo.findMany({
+    where: { user_id: session.userId, archived: false },
+    orderBy: { created_at: 'asc' },
+  })
+
+  const products = await prisma.product.findMany({
+    where: { user_id: session.userId, archived: false },
+    orderBy: { name: 'asc' },
+    include: {
+      pbis: { orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }], select: { id: true, title: true } },
+    },
+  })
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto w-full">
+      <h1 className="text-xl font-medium text-foreground mb-6">Todo&apos;s</h1>
+      <TodoList
+        todos={todos.map(t => ({ id: t.id, title: t.title, done: t.done, created_at: t.created_at.toISOString() }))}
+        products={products.map(p => ({
+          id: p.id,
+          name: p.name,
+          pbis: p.pbis,
+        }))}
+        isDemo={session.isDemo ?? false}
+      />
+    </div>
+  )
+}