feat(ST-abeu63oz): /admin/products/[id] product-detail met ledenbeheer

- page.tsx: product-header (naam/eigenaar/repo_url-link), leden-tabel, niet-leden dropdown
- MemberActions: 'remove' → adminRemoveMemberAction, 'add' → select + adminAddMemberAction
- ← Terug naar producten link

app/(app)/admin/_components/ProductFormDialog.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from '@/components/ui/dialog'
+import { adminCreateProductAction, adminUpdateProductAction } from '@/actions/admin/products'
+
+type User = { id: string; username: string }
+
+type ProductData = {
+  id: string
+  name: string
+  description: string | null
+  repo_url: string | null
+  definition_of_done: string
+  auto_pr: boolean
+  user_id: string
+}
+
+interface Props {
+  mode: 'create' | 'edit'
+  product?: ProductData
+  allUsers: User[]
+  trigger: React.ReactNode
+}
+
+export function ProductFormDialog({ mode, product, allUsers, trigger }: Props) {
+  const [open, setOpen] = useState(false)
+  const [pending, startTransition] = useTransition()
+  const [error, setError] = useState<string | null>(null)
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const data = {
+      name: fd.get('name') as string,
+      description: fd.get('description') as string || undefined,
+      repo_url: fd.get('repo_url') as string || undefined,
+      definition_of_done: fd.get('definition_of_done') as string,
+      auto_pr: fd.get('auto_pr') === 'on',
+      owner_user_id: fd.get('owner_user_id') as string,
+    }
+
+    setError(null)
+    startTransition(async () => {
+      try {
+        if (mode === 'create') {
+          await adminCreateProductAction(data)
+        } else {
+          await adminUpdateProductAction(product!.id, data)
+        }
+        setOpen(false)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Onbekende fout')
+      }
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<span />}>{trigger}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{mode === 'create' ? 'Nieuw product' : 'Product bewerken'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <div className="space-y-1">
+            <label htmlFor="name" className="text-sm font-medium">Naam</label>
+            <Input id="name" name="name" required maxLength={100} defaultValue={product?.name} />
+          </div>
+          <div className="space-y-1">
+            <label htmlFor="description" className="text-sm font-medium">Omschrijving</label>
+            <Input id="description" name="description" defaultValue={product?.description ?? ''} />
+          </div>
+          <div className="space-y-1">
+            <label htmlFor="repo_url" className="text-sm font-medium">Repo URL</label>
+            <Input id="repo_url" name="repo_url" type="url" defaultValue={product?.repo_url ?? ''} placeholder="https://github.com/..." />
+          </div>
+          <div className="space-y-1">
+            <label htmlFor="definition_of_done" className="text-sm font-medium">Definition of Done</label>
+            <Input id="definition_of_done" name="definition_of_done" required defaultValue={product?.definition_of_done} />
+          </div>
+          {mode === 'create' && (
+            <div className="space-y-1">
+              <label htmlFor="owner_user_id" className="text-sm font-medium">Eigenaar</label>
+              <select id="owner_user_id" name="owner_user_id" required className="w-full border border-border rounded-md px-2 py-1 text-sm bg-background text-foreground">
+                {allUsers.map(u => (
+                  <option key={u.id} value={u.id}>{u.username}</option>
+                ))}
+              </select>
+            </div>
+          )}
+          {mode === 'edit' && (
+            <input type="hidden" name="owner_user_id" value={product?.user_id} />
+          )}
+          <div className="flex items-center gap-2">
+            <input id="auto_pr" name="auto_pr" type="checkbox" defaultChecked={product?.auto_pr} className="rounded border-border" />
+            <label htmlFor="auto_pr" className="text-sm">Auto PR</label>
+          </div>
+          {error && (
+            <div className="text-sm text-destructive bg-destructive/10 rounded px-3 py-2">{error}</div>
+          )}
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" type="button" />}>Annuleer</DialogClose>
+            <Button type="submit" disabled={pending}>
+              {pending ? 'Opslaan…' : mode === 'create' ? 'Aanmaken' : 'Opslaan'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

app/(app)/admin/products/[id]/_components/MemberActions.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useRef, useTransition } from 'react'
+import { Button } from '@/components/ui/button'
+import { adminAddMemberAction, adminRemoveMemberAction } from '@/actions/admin/products'
+
+type NonMember = { id: string; username: string }
+
+type Props =
+  | { productId: string; userId: string; action: 'remove'; label: string; nonMembers?: never }
+  | { productId: string; userId?: never; action: 'add'; label: string; nonMembers: NonMember[] }
+
+export function MemberActions({ productId, userId, action, label, nonMembers }: Props) {
+  const [pending, startTransition] = useTransition()
+  const selectRef = useRef<HTMLSelectElement>(null)
+
+  function handleRemove() {
+    startTransition(async () => {
+      await adminRemoveMemberAction(productId, userId!)
+    })
+  }
+
+  function handleAdd() {
+    const selectedId = selectRef.current?.value
+    if (!selectedId) return
+    startTransition(async () => {
+      await adminAddMemberAction(productId, selectedId)
+    })
+  }
+
+  if (action === 'remove') {
+    return (
+      <Button variant="destructive" size="sm" onClick={handleRemove} disabled={pending}>
+        {pending ? '…' : label}
+      </Button>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <select
+        ref={selectRef}
+        className="text-sm border border-border rounded-md px-2 py-1 bg-background text-foreground"
+      >
+        {nonMembers!.map(u => (
+          <option key={u.id} value={u.id}>{u.username}</option>
+        ))}
+      </select>
+      <Button size="sm" onClick={handleAdd} disabled={pending}>
+        {pending ? '…' : label}
+      </Button>
+    </div>
+  )
+}

app/(app)/admin/products/[id]/page.tsx

@@ -0,0 +1,104 @@
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { requireAdmin } from '@/lib/auth-guard'
+import { prisma } from '@/lib/prisma'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { MemberActions } from './_components/MemberActions'
+
+export default async function AdminProductDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  await requireAdmin()
+  const { id } = await params
+
+  const product = await prisma.product.findUnique({
+    where: { id },
+    include: {
+      user: { select: { username: true } },
+      members: {
+        include: { user: { select: { id: true, username: true, email: true } } },
+        orderBy: { created_at: 'asc' },
+      },
+    },
+  })
+
+  if (!product) notFound()
+
+  const nonMembers = await prisma.user.findMany({
+    where: { NOT: { product_members: { some: { product_id: id } } } },
+    select: { id: true, username: true },
+    orderBy: { username: 'asc' },
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/products" className="text-sm text-muted-foreground hover:text-primary">
+          ← Terug naar producten
+        </Link>
+      </div>
+
+      <div className="space-y-1">
+        <h1 className="text-xl font-semibold text-foreground">{product.name}</h1>
+        <p className="text-sm text-muted-foreground">Eigenaar: {product.user.username}</p>
+        {product.repo_url && (
+          <a
+            href={product.repo_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-primary hover:underline"
+          >
+            {product.repo_url}
+          </a>
+        )}
+      </div>
+
+      <div className="space-y-3">
+        <h2 className="text-base font-medium text-foreground">Leden ({product.members.length})</h2>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Gebruiker</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead className="text-right">Acties</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {product.members.map(m => (
+              <TableRow key={m.id}>
+                <TableCell className="font-medium">{m.user.username}</TableCell>
+                <TableCell className="text-muted-foreground">{m.user.email ?? '—'}</TableCell>
+                <TableCell className="text-right">
+                  <MemberActions productId={id} userId={m.user.id} action="remove" label="Verwijder" />
+                </TableCell>
+              </TableRow>
+            ))}
+            {product.members.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={3} className="text-center text-muted-foreground py-4">
+                  Geen leden.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+
+        {nonMembers.length > 0 && (
+          <div className="flex items-center gap-2 pt-2">
+            <span className="text-sm text-muted-foreground">Lid toevoegen:</span>
+            <MemberActions productId={id} nonMembers={nonMembers} action="add" label="Toevoegen" />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/(app)/admin/products/_components/ProductActions.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { useTransition, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from '@/components/ui/dialog'
+import { adminArchiveProductAction, adminDeleteProductAction } from '@/actions/admin/products'
+import { ProductFormDialog } from '../../_components/ProductFormDialog'
+
+type User = { id: string; username: string }
+type Product = {
+  id: string
+  name: string
+  description: string | null
+  repo_url: string | null
+  definition_of_done: string
+  auto_pr: boolean
+  archived: boolean
+  user_id: string
+}
+
+export function ProductActions({ product, allUsers }: { product: Product; allUsers: User[] }) {
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [pending, startTransition] = useTransition()
+
+  function handleArchive() {
+    startTransition(async () => {
+      await adminArchiveProductAction(product.id, !product.archived)
+    })
+  }
+
+  function handleDelete() {
+    startTransition(async () => {
+      await adminDeleteProductAction(product.id)
+      setDeleteOpen(false)
+    })
+  }
+
+  return (
+    <div className="flex gap-2 justify-end">
+      <ProductFormDialog
+        mode="edit"
+        product={product}
+        allUsers={allUsers}
+        trigger={<Button variant="outline" size="sm">Bewerken</Button>}
+      />
+      <Button variant="outline" size="sm" onClick={handleArchive} disabled={pending}>
+        {product.archived ? 'Herstel' : 'Archiveer'}
+      </Button>
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogTrigger render={<Button variant="destructive" size="sm" />}>Verwijder</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Product verwijderen</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            Weet je zeker dat je <strong>{product.name}</strong> wilt verwijderen? Alle PBIs, stories en taken worden ook verwijderd.
+          </p>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" />}>Annuleer</DialogClose>
+            <Button variant="destructive" onClick={handleDelete} disabled={pending}>
+              {pending ? 'Verwijderen…' : 'Verwijderen'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

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

@@ -0,0 +1,93 @@
+import Link from 'next/link'
+import { requireAdmin } from '@/lib/auth-guard'
+import { prisma } from '@/lib/prisma'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { ProductFormDialog } from '../_components/ProductFormDialog'
+import { ProductActions } from './_components/ProductActions'
+
+export default async function AdminProductsPage() {
+  await requireAdmin()
+
+  const [products, allUsers] = await Promise.all([
+    prisma.product.findMany({
+      include: {
+        user: { select: { username: true } },
+        _count: { select: { members: true, pbis: true } },
+      },
+      orderBy: { created_at: 'desc' },
+    }),
+    prisma.user.findMany({
+      select: { id: true, username: true },
+      orderBy: { username: 'asc' },
+    }),
+  ])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold text-foreground">Producten</h1>
+        <ProductFormDialog
+          mode="create"
+          allUsers={allUsers}
+          trigger={<Button size="sm">Nieuw product</Button>}
+        />
+      </div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Naam</TableHead>
+            <TableHead>Eigenaar</TableHead>
+            <TableHead>Leden</TableHead>
+            <TableHead>PBIs</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Aangemaakt</TableHead>
+            <TableHead className="text-right">Acties</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {products.map(p => (
+            <TableRow key={p.id}>
+              <TableCell>
+                <Link href={`/admin/products/${p.id}`} className="font-medium text-primary hover:underline">
+                  {p.name}
+                </Link>
+              </TableCell>
+              <TableCell className="text-muted-foreground">{p.user.username}</TableCell>
+              <TableCell>{p._count.members}</TableCell>
+              <TableCell>{p._count.pbis}</TableCell>
+              <TableCell>
+                {p.archived ? (
+                  <Badge variant="outline">Gearchiveerd</Badge>
+                ) : (
+                  <Badge className="bg-status-done/15 text-status-done border-status-done/30">Actief</Badge>
+                )}
+              </TableCell>
+              <TableCell className="text-xs text-muted-foreground">
+                {new Date(p.created_at).toLocaleDateString('nl-NL')}
+              </TableCell>
+              <TableCell>
+                <ProductActions product={p} allUsers={allUsers} />
+              </TableCell>
+            </TableRow>
+          ))}
+          {products.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
+                Geen producten gevonden.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}