Merge pull request #99 from madhura68/feat/story-111ci8t4

ST-1205: Admin: gebruikersbeheer (/admin/users)

actions/admin/users.ts

@@ -0,0 +1,43 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
+import { Role } from '@prisma/client'
+import { prisma } from '@/lib/prisma'
+import { requireAdmin } from '@/lib/auth-guard'
+
+export async function deleteUserAction(userId: string) {
+  const session = await requireAdmin()
+  if (userId === session.userId) {
+    throw new Error('Zelfverwijdering niet toegestaan')
+  }
+  await prisma.user.delete({ where: { id: userId } })
+  revalidatePath('/admin/users')
+}
+
+const rolesSchema = z.array(z.nativeEnum(Role))
+
+export async function updateUserRolesAction(userId: string, roles: Role[]) {
+  const session = await requireAdmin()
+
+  const parsed = rolesSchema.safeParse(roles)
+  if (!parsed.success) {
+    throw new Error('Ongeldige rol-waarden')
+  }
+
+  if (userId === session.userId && !parsed.data.includes(Role.ADMIN)) {
+    throw new Error('Kan eigen ADMIN-rol niet verwijderen')
+  }
+
+  await prisma.$transaction([
+    prisma.userRole.deleteMany({ where: { user_id: userId } }),
+    ...parsed.data.map((role) => prisma.userRole.create({ data: { user_id: userId, role } })),
+  ])
+  revalidatePath('/admin/users')
+}
+
+export async function setMustResetPasswordAction(userId: string, value: boolean) {
+  await requireAdmin()
+  await prisma.user.update({ where: { id: userId }, data: { must_reset_password: value } })
+  revalidatePath('/admin/users')
+}

app/(app)/admin/layout.tsx

@@ -0,0 +1,16 @@
+import { requireAdmin } from '@/lib/auth-guard'
+import Link from 'next/link'
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  await requireAdmin()
+  return (
+    <div className="flex min-h-screen">
+      <nav className="w-48 border-r p-4 flex flex-col gap-2">
+        <Link href="/admin/users" className="text-sm font-medium text-foreground hover:text-primary">Gebruikers</Link>
+        <Link href="/admin/jobs" className="text-sm font-medium text-foreground hover:text-primary">Claude Jobs</Link>
+        <Link href="/admin/products" className="text-sm font-medium text-foreground hover:text-primary">Producten</Link>
+      </nav>
+      <main className="flex-1 p-6">{children}</main>
+    </div>
+  )
+}

app/(app)/admin/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function AdminPage() {
+  redirect('/admin/users')
+}

app/(app)/admin/users/page.tsx

@@ -0,0 +1,19 @@
+import { requireAdmin } from '@/lib/auth-guard'
+import { prisma } from '@/lib/prisma'
+import { UsersTable } from '@/components/admin/users-table'
+
+export default async function AdminUsersPage() {
+  const session = await requireAdmin()
+
+  const users = await prisma.user.findMany({
+    include: { roles: { select: { role: true } } },
+    orderBy: { created_at: 'desc' },
+  })
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-xl font-semibold text-foreground">Gebruikers</h1>
+      <UsersTable users={users} currentUserId={session.userId} />
+    </div>
+  )
+}

components/admin/users-table.tsx

@@ -0,0 +1,239 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { Role } from '@prisma/client'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from '@/components/ui/dialog'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  deleteUserAction,
+  updateUserRolesAction,
+  setMustResetPasswordAction,
+} from '@/actions/admin/users'
+
+type UserWithRoles = {
+  id: string
+  username: string
+  email: string | null
+  must_reset_password: boolean
+  created_at: Date
+  roles: { role: Role }[]
+}
+
+const ALL_ROLES: Role[] = [Role.PRODUCT_OWNER, Role.SCRUM_MASTER, Role.DEVELOPER, Role.ADMIN]
+
+const ROLE_LABEL: Record<Role, string> = {
+  PRODUCT_OWNER: 'Product Owner',
+  SCRUM_MASTER: 'Scrum Master',
+  DEVELOPER: 'Developer',
+  ADMIN: 'Admin',
+}
+
+function RoleBadge({ role }: { role: Role }) {
+  const cls =
+    role === Role.ADMIN
+      ? 'bg-status-done text-white border-transparent'
+      : role === Role.PRODUCT_OWNER
+        ? 'bg-status-in-progress text-white border-transparent'
+        : role === Role.SCRUM_MASTER
+          ? 'bg-priority-medium text-white border-transparent'
+          : 'bg-secondary text-secondary-foreground'
+  return <Badge className={cls}>{ROLE_LABEL[role]}</Badge>
+}
+
+function RolesDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
+  const [open, setOpen] = useState(false)
+  const [selected, setSelected] = useState<Set<Role>>(new Set(user.roles.map(r => r.role)))
+  const [pending, startTransition] = useTransition()
+  const isSelf = user.id === currentUserId
+
+  function toggle(role: Role) {
+    setSelected(prev => {
+      const next = new Set(prev)
+      if (next.has(role)) next.delete(role)
+      else next.add(role)
+      return next
+    })
+  }
+
+  function handleSave() {
+    startTransition(async () => {
+      await updateUserRolesAction(user.id, Array.from(selected))
+      setOpen(false)
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button variant="outline" size="sm" />}>
+        Rollen
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Rollen voor {user.username}</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 py-2">
+          {ALL_ROLES.map(role => {
+            const isDisabled = isSelf && role === Role.ADMIN && selected.has(role)
+            return (
+              <label key={role} className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={selected.has(role)}
+                  disabled={isDisabled}
+                  onChange={() => toggle(role)}
+                  className="rounded border-border"
+                />
+                <span className="text-sm">{ROLE_LABEL[role]}</span>
+                {isDisabled && <span className="text-xs text-muted-foreground">(eigen rol)</span>}
+              </label>
+            )
+          })}
+        </div>
+        <DialogFooter showCloseButton>
+          <Button onClick={handleSave} disabled={pending}>
+            {pending ? 'Opslaan…' : 'Opslaan'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function DeleteDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
+  const [open, setOpen] = useState(false)
+  const [pending, startTransition] = useTransition()
+  const isSelf = user.id === currentUserId
+
+  function handleDelete() {
+    startTransition(async () => {
+      await deleteUserAction(user.id)
+      setOpen(false)
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={
+          <Button
+            variant="destructive"
+            size="sm"
+            disabled={isSelf}
+            title={isSelf ? 'Zelfverwijdering niet toegestaan' : undefined}
+          />
+        }
+      >
+        Verwijder
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Gebruiker verwijderen</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-muted-foreground">
+          Weet je zeker dat je <strong>{user.username}</strong> wilt verwijderen? Dit kan niet ongedaan worden gemaakt.
+        </p>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>Annuleer</DialogClose>
+          <Button variant="destructive" onClick={handleDelete} disabled={pending}>
+            {pending ? 'Verwijderen…' : 'Verwijderen'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function ResetToggle({ user }: { user: UserWithRoles }) {
+  const [pending, startTransition] = useTransition()
+
+  function handleToggle() {
+    startTransition(async () => {
+      await setMustResetPasswordAction(user.id, !user.must_reset_password)
+    })
+  }
+
+  return (
+    <Button
+      variant={user.must_reset_password ? 'default' : 'outline'}
+      size="sm"
+      onClick={handleToggle}
+      disabled={pending}
+      title="Forceer wachtwoord-reset bij volgende login"
+    >
+      {user.must_reset_password ? 'Reset gepland' : 'Reset pw'}
+    </Button>
+  )
+}
+
+export function UsersTable({
+  users,
+  currentUserId,
+}: {
+  users: UserWithRoles[]
+  currentUserId: string
+}) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Gebruiker</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Rollen</TableHead>
+          <TableHead>Reset pw</TableHead>
+          <TableHead>Aangemaakt</TableHead>
+          <TableHead className="text-right">Acties</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(user => (
+          <TableRow key={user.id}>
+            <TableCell className="font-medium">{user.username}</TableCell>
+            <TableCell className="text-muted-foreground">{user.email ?? '—'}</TableCell>
+            <TableCell>
+              <div className="flex flex-wrap gap-1">
+                {user.roles.map(r => (
+                  <RoleBadge key={r.role} role={r.role} />
+                ))}
+                {user.roles.length === 0 && <span className="text-muted-foreground text-xs">Geen</span>}
+              </div>
+            </TableCell>
+            <TableCell>
+              {user.must_reset_password ? (
+                <Badge className="bg-priority-high text-white border-transparent">Ja</Badge>
+              ) : (
+                <span className="text-muted-foreground text-xs">—</span>
+              )}
+            </TableCell>
+            <TableCell className="text-muted-foreground text-xs">
+              {new Date(user.created_at).toLocaleDateString('nl-NL')}
+            </TableCell>
+            <TableCell>
+              <div className="flex gap-2 justify-end">
+                <ResetToggle user={user} />
+                <RolesDialog user={user} currentUserId={currentUserId} />
+                <DeleteDialog user={user} currentUserId={currentUserId} />
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

lib/auth-guard.ts

@@ -22,3 +22,11 @@ export async function requireSession() {
 
   return session
 }
+
+export async function requireAdmin() {
+  const session = await getSession()
+  if (!session.userId || !session.isAdmin) {
+    redirect('/dashboard')
+  }
+  return session
+}

lib/session.ts

@@ -3,6 +3,7 @@ import { SessionOptions } from 'iron-session'
 export interface SessionData {
   userId: string
   isDemo: boolean
+  isAdmin: boolean
   // ST-1002 (M10) — gezet door /api/auth/pair/claim na een succesvolle QR-pairing.
   // Beide velden zijn optioneel zodat bestaande wachtwoord-sessies onveranderd blijven.
   paired?: boolean