From 222c702fda5bc1280d561e7898078df31ba1e907 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Tue, 5 May 2026 14:57:29 +0200
Subject: [PATCH] feat(ST-abeu63oz): /admin/products pagina met CRUD-dialogen
 en ledenbeheer-link

- app/(app)/admin/_components/ProductFormDialog.tsx: gedeeld create/edit-formulier
  (naam, description, repo_url, definition_of_done, auto_pr, eigenaar-dropdown bij create)
- app/(app)/admin/products/page.tsx: server component, query products+user+_count,
  tabel met naam-link naar /admin/products/[id], eigenaar, leden/PBI-count, archived-badge
- app/(app)/admin/products/_components/ProductActions.tsx: client Bewerken/Archiveer/Verwijder
---
 .../admin/_components/ProductFormDialog.tsx   | 122 ++++++++++++++++++
 .../products/_components/ProductActions.tsx   |  76 +++++++++++
 app/(app)/admin/products/page.tsx             |  93 +++++++++++++
 3 files changed, 291 insertions(+)
 create mode 100644 app/(app)/admin/_components/ProductFormDialog.tsx
 create mode 100644 app/(app)/admin/products/_components/ProductActions.tsx
 create mode 100644 app/(app)/admin/products/page.tsx

diff --git a/app/(app)/admin/_components/ProductFormDialog.tsx b/app/(app)/admin/_components/ProductFormDialog.tsx
new file mode 100644
index 0000000..35690aa
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/app/(app)/admin/products/_components/ProductActions.tsx b/app/(app)/admin/products/_components/ProductActions.tsx
new file mode 100644
index 0000000..2a5e87b
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/app/(app)/admin/products/page.tsx b/app/(app)/admin/products/page.tsx
new file mode 100644
index 0000000..1e63208
--- /dev/null
+++ b/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>
+  )
+}