refactor: replace inline image modals with shared ImagePreviewDialog component

resources/js/components/modal/image-preview.tsx

@@ -1,18 +1,26 @@
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-import { X } from 'lucide-react';
-
 interface ImagePreviewDialogProps {
     imageUrl: string | null;
     onClose: () => void;
 }
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { X } from 'lucide-react';
 
 export function ImagePreviewDialog({ imageUrl, onClose }: ImagePreviewDialogProps) {
     return (
         <Dialog open={!!imageUrl} onOpenChange={() => onClose()}>
-            <DialogContent className="max-w-3xl p-0 overflow-hidden border-none bg-transparent shadow-none">
+            <DialogContent
+                className="max-w-3xl p-0 overflow-hidden border-none bg-transparent shadow-none"
+                showCloseButton={false}
+            >
+                <VisuallyHidden>
+                    <DialogTitle>Image preview</DialogTitle>
+                    <DialogDescription>Preview of selected image</DialogDescription>
+                </VisuallyHidden>
+
                 <div className="relative group">
                     <img
-                        src={imageUrl || ''}
+                        src={imageUrl ?? undefined}
                         alt="Preview"
                         className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
                     />

resources/js/pages/admin/finance/expense/hooks/use-expense-index.ts

@@ -65,6 +65,10 @@ export function useExpenseIndex() {
         setSelectedProof(url);
     };
 
+    const closeImagePreview = () => {
+        setSelectedProof(null);
+    };
+
     return {
         isFormOpen,
         selectedExpense,
@@ -86,5 +90,6 @@ export function useExpenseIndex() {
         confirmBulkDelete,
         closeForm,
         onPreviewImage,
+        closeImagePreview,
     };
 }

resources/js/pages/admin/finance/expense/index.tsx

@@ -4,26 +4,16 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Trash2, X, Plus } from 'lucide-react';
 import { DataTable } from '@/components/data-table';
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogMedia,
-    AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
 
 import { useExpenseIndex } from './hooks/use-expense-index';
 import { getColumns } from './partials/columns';
 import { ExpenseFormModal } from './partials/expense-form-modal';
 import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
+import { ImagePreviewDialog } from '@/components/modal/image-preview';
 
 export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
     const {
+        selectedProof,
         isFormOpen,
         selectedExpense,
         isDeleteDialogOpen,
@@ -31,12 +21,10 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
         expenseToDelete,
         rowsToDelete,
         rowSelection,
-        selectedProof,
         setRowSelection,
         setRowsToDelete,
         setIsDeleteDialogOpen,
         setIsBulkDeleteDialogOpen,
-        setSelectedProof,
         onAdd,
         onEdit,
         onDelete,
@@ -44,6 +32,7 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
         confirmBulkDelete,
         closeForm,
         onPreviewImage,
+        closeImagePreview
     } = useExpenseIndex();
 
     const columns = getColumns({ onEdit, onDelete, onPreviewImage });
@@ -68,24 +57,6 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
                 expense={selectedExpense}
             />
 
-            <Dialog open={!!selectedProof} onOpenChange={() => setSelectedProof(null)}>
-                <DialogContent className="max-w-3xl p-0 overflow-hidden border-none bg-transparent shadow-none">
-                    <div className="relative group">
-                        <img
-                            src={selectedProof || ''}
-                            alt="Proof"
-                            className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
-                        />
-                        <button
-                            onClick={() => setSelectedProof(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>
-
             <Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
                 <CardContent className="p-0">
                     <DataTable
@@ -133,6 +104,11 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
                 }
                 onDelete={confirmBulkDelete}
             />
+
+            <ImagePreviewDialog
+                imageUrl={selectedProof}
+                onClose={closeImagePreview}
+            />
         </div>
     );
 }

resources/js/pages/admin/master/product/index.tsx

@@ -2,24 +2,13 @@ import { Head, Link } from '@inertiajs/react';
 import type { Product, Category } from '@/types';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Trash2, Plus, X } from 'lucide-react';
+import { Trash2, Plus } from 'lucide-react';
 import { DataTable } from '@/components/data-table';
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogMedia,
-    AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
 
 import productRoutes from '@/routes/product';
 import { useProductIndex } from './hooks/use-product-index';
 import { getColumns } from './partials/columns';
-import { ImagePreviewDialog } from './partials/image-preview-dialog';
+import { ImagePreviewDialog } from '../../../../components/modal/image-preview';
 import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
 
 export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) {

resources/js/pages/admin/master/product/partials/columns.tsx

@@ -22,26 +22,15 @@ export const getColumns = ({ onDelete, onToggleStatus, onPreviewImage }: ColumnP
         header: "Thumbnail",
         meta: { title: "Thumbnail" },
         cell: ({ row }) => {
-            const product = row.original;
+            const url = row.original.thumbnail_url;
-            return (
+            return url ? (
-                <div className="flex items-center">
+                <button onClick={() => onPreviewImage(url)} className="block w-fit">
-                    {product.thumbnail_url ? (
+                    <img src={url} alt="Thumbnail" className="h-10 w-10 object-cover rounded-md border hover:opacity-80 transition-opacity" />
-                        <button
-                            onClick={() => onPreviewImage(product.thumbnail_url || '')}
-                            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-10 w-10 flex items-center justify-center bg-muted rounded-md border">
                     <ImagePlus className="h-4 w-4 text-muted-foreground" />
                 </div>
-                    )}
-                </div>
             );
         }
     },