From 4abe2fa0b3f160983ad5a7eda47ac6e3ee097e88 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Mon, 4 May 2026 07:03:03 +0200
Subject: [PATCH] fix(dashboard): klik in productdialog redirect niet meer naar
 productpagina
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ProductDialog werd per kaart gerenderd binnen de klikbare card-div.
Hoewel Base UI de dialog portaalt naar document.body, bubblen React
events via de component-tree, niet de DOM-tree — clicks in de dialog
liepen door naar router.push op de kaart.

Fix: dialog-state opheffen naar ProductList; eén ProductDialog buiten
de map() en EditProductButton vervangen door een inline knop met
e.stopPropagation. EditProductButton blijft beschikbaar voor de
product-detailpagina.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/dashboard/product-list.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/product-list.tsx b/components/dashboard/product-list.tsx
index c8e5fdd..b85390a 100644
--- a/components/dashboard/product-list.tsx
+++ b/components/dashboard/product-list.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { useTransition } from 'react'
+import { useState, useTransition } from 'react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -10,7 +10,7 @@ import { CodeBadge } from '@/components/shared/code-badge'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { restoreProductAction } from '@/actions/products'
 import { setActiveProductAction } from '@/actions/active-product'
-import { EditProductButton } from '@/components/products/edit-product-button'
+import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
 
 interface Product {
   id: string
@@ -32,6 +32,7 @@ interface ProductListProps {
 export function ProductList({ products, isDemo, showArchived = false, activeProductId }: ProductListProps) {
   const router = useRouter()
   const [, startTransition] = useTransition()
+  const [editingProduct, setEditingProduct] = useState<ProductDialogProduct | null>(null)
 
   function handleRestore(id: string) {
     startTransition(async () => {
@@ -104,7 +105,16 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
               )}
               {!showArchived && (
                 <>
-                  <EditProductButton product={product} isDemo={isDemo} />
+                  <DemoTooltip show={isDemo}>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => { e.stopPropagation(); if (!isDemo) setEditingProduct(product) }}
+                      disabled={isDemo}
+                    >
+                      Bewerken
+                    </Button>
+                  </DemoTooltip>
                   {product.id === activeProductId
                     ? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
                     : (
@@ -136,6 +146,15 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
           </div>
         </div>
       ))}
+      {editingProduct && (
+        <ProductDialog
+          mode="edit"
+          open={!!editingProduct}
+          onOpenChange={(v) => { if (!v) setEditingProduct(null) }}
+          product={editingProduct}
+          isDemo={isDemo}
+        />
+      )}
     </div>
   )
 }