From f95754db1bcc6e039f249175c5f8f221a57aecd9 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Tue, 5 May 2026 15:00:24 +0200
Subject: [PATCH] feat(ST-abeu63oz): /admin/products/[id] product-detail met
 ledenbeheer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- page.tsx: product-header (naam/eigenaar/repo_url-link), leden-tabel, niet-leden dropdown
- MemberActions: 'remove' → adminRemoveMemberAction, 'add' → select + adminAddMemberAction
- ← Terug naar producten link
---
 .../[id]/_components/MemberActions.tsx        |  54 +++++++++
 app/(app)/admin/products/[id]/page.tsx        | 104 ++++++++++++++++++
 2 files changed, 158 insertions(+)
 create mode 100644 app/(app)/admin/products/[id]/_components/MemberActions.tsx
 create mode 100644 app/(app)/admin/products/[id]/page.tsx

diff --git a/app/(app)/admin/products/[id]/_components/MemberActions.tsx b/app/(app)/admin/products/[id]/_components/MemberActions.tsx
new file mode 100644
index 0000000..deb3445
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/app/(app)/admin/products/[id]/page.tsx b/app/(app)/admin/products/[id]/page.tsx
new file mode 100644
index 0000000..30c6268
--- /dev/null
+++ b/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>
+  )
+}