From eca45258a12c8d99e3766ee7eed4286dbeb9599b Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 17 Apr 2026 13:11:16 +0700
Subject: [PATCH] feat: add image preview modal for product thumbnails in
 product index page

---
 .../js/pages/admin/master/product/index.tsx   | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/admin/master/product/index.tsx b/resources/js/pages/admin/master/product/index.tsx
index e1074cd..7566754 100644
--- a/resources/js/pages/admin/master/product/index.tsx
+++ b/resources/js/pages/admin/master/product/index.tsx
@@ -24,8 +24,11 @@ import {
     AlertDialogMedia,
     AlertDialogTitle,
 } from "@/components/ui/alert-dialog"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { X } from 'lucide-react';
 
 export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) {
+    const [selectedImage, setSelectedImage] = useState<string | null>(null);
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
     const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
     const [productToDelete, setProductToDelete] = useState<Product | null>(null);
@@ -80,11 +83,16 @@ export default function ProductIndex({ products, categories }: { products: Produ
                 return (
                     <div className="flex items-center">
                         {product.thumbnail_url ? (
-                            <img
-                                src={product.thumbnail_url}
-                                alt={product.name}
-                                className="h-12 w-12 rounded-lg object-cover border border-border/50 shadow-sm"
-                            />
+                            <button
+                                onClick={() => setSelectedImage(product.thumbnail_url || null)}
+                                className="h-12 w-12 rounded-lg overflow-hidden border border-border/50 shadow-sm hover:opacity-80 transition-opacity"
+                            >
+                                <img
+                                    src={product.thumbnail_url}
+                                    alt={product.name}
+                                    className="h-full w-full object-cover"
+                                />
+                            </button>
                         ) : (
                             <div className="h-12 w-12 rounded-lg bg-muted flex items-center justify-center border border-border/50">
                                 <span className="text-[10px] text-muted-foreground uppercase font-semibold">N/A</span>
@@ -277,6 +285,24 @@ export default function ProductIndex({ products, categories }: { products: Produ
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
+            
+            <Dialog open={!!selectedImage} onOpenChange={() => setSelectedImage(null)}>
+                <DialogContent className="max-w-3xl p-0 overflow-hidden border-none bg-transparent shadow-none">
+                    <div className="relative group">
+                        <img
+                            src={selectedImage || ''}
+                            alt="Preview"
+                            className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
+                        />
+                        <button
+                            onClick={() => setSelectedImage(null)}
+                            className="absolute top-4 right-4 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 backdrop-blur-sm transition-all shadow-xl"
+                        >
+                            <X className="size-5" />
+                        </button>
+                    </div>
+                </DialogContent>
+            </Dialog>
         </div>
     );
 }