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>