From 1b94f329542e9344033cdd63512121385d9bff1b Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Sun, 3 May 2026 17:39:05 +0200
Subject: [PATCH] feat(ST-?): UI triggers voor ProductDialog op dashboard en
 product-detail

Voegt NewProductButton toe op het dashboard (vervangt de /products/new
link) en EditProductButton op de product-detail pagina. Bewerken-knop
is alleen zichtbaar voor de product-eigenaar en verborgen in demo-modus.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/(app)/dashboard/page.tsx                |  6 ++---
 app/(app)/products/[id]/page.tsx            | 14 +++++++++++
 components/dashboard/new-product-button.tsx | 23 ++++++++++++++++++
 components/products/edit-product-button.tsx | 27 +++++++++++++++++++++
 4 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 components/dashboard/new-product-button.tsx
 create mode 100644 components/products/edit-product-button.tsx

diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
index 9497e54..95a84d4 100644
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -4,8 +4,8 @@ import { SessionData, sessionOptions } from '@/lib/session'
 import { prisma } from '@/lib/prisma'
 import { productAccessFilter } from '@/lib/product-access'
 import Link from 'next/link'
-import { Button } from '@/components/ui/button'
 import { ProductList } from '@/components/dashboard/product-list'
+import { NewProductButton } from '@/components/dashboard/new-product-button'
 
 interface Props {
   searchParams: Promise<{ archived?: string }>
@@ -43,9 +43,7 @@ export default async function DashboardPage({ searchParams }: Props) {
             </Link>
           )}
         </div>
-        {!session.isDemo && !showArchived && (
-          <Button nativeButton={false} render={<Link href="/products/new" />}>+ Nieuw product</Button>
-        )}
+        {!session.isDemo && !showArchived && <NewProductButton />}
       </div>
 
       <ProductList
diff --git a/app/(app)/products/[id]/page.tsx b/app/(app)/products/[id]/page.tsx
index 85519dd..d635e16 100644
--- a/app/(app)/products/[id]/page.tsx
+++ b/app/(app)/products/[id]/page.tsx
@@ -15,6 +15,7 @@ import { EditTaskLoader } from '@/app/_components/tasks/edit-task-loader'
 import { TaskDialogSkeleton } from '@/app/_components/tasks/task-dialog-skeleton'
 import { StartSprintButton } from '@/components/sprint/start-sprint-button'
 import { ActivateProductButton } from '@/components/shared/activate-product-button'
+import { EditProductButton } from '@/components/products/edit-product-button'
 import Link from 'next/link'
 
 interface Props {
@@ -105,6 +106,19 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
           ) : (
             !isDemo && <StartSprintButton productId={id} />
           )}
+          {!isDemo && product.user_id === session.userId && (
+            <EditProductButton
+              product={{
+                id: product.id,
+                name: product.name,
+                code: product.code,
+                description: product.description,
+                repo_url: product.repo_url,
+                definition_of_done: product.definition_of_done,
+                auto_pr: product.auto_pr,
+              }}
+            />
+          )}
           <Link
             href={`/products/${id}/settings`}
             className="text-xs text-muted-foreground hover:text-foreground"
diff --git a/components/dashboard/new-product-button.tsx b/components/dashboard/new-product-button.tsx
new file mode 100644
index 0000000..cf3e36a
--- /dev/null
+++ b/components/dashboard/new-product-button.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { ProductDialog } from '@/components/dialogs/product-dialog'
+
+export function NewProductButton() {
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>+ Nieuw product</Button>
+      <ProductDialog
+        mode="create"
+        open={open}
+        onOpenChange={setOpen}
+        onSaved={(id) => router.push(`/products/${id}`)}
+      />
+    </>
+  )
+}
diff --git a/components/products/edit-product-button.tsx b/components/products/edit-product-button.tsx
new file mode 100644
index 0000000..e574f59
--- /dev/null
+++ b/components/products/edit-product-button.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
+
+interface Props {
+  product: ProductDialogProduct
+}
+
+export function EditProductButton({ product }: Props) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        Bewerken
+      </Button>
+      <ProductDialog
+        mode="edit"
+        open={open}
+        onOpenChange={setOpen}
+        product={product}
+      />
+    </>
+  )
+}