feat: add the delete confirmation dialog

src/private/Admin.jsx

@@ -5,6 +5,7 @@ import { DataGrid } from '@mui/x-data-grid';
 import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
 import AddOrEditProductForm from './AddOrEditProductForm.jsx';
 import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const columnsBase = [
     { field: 'id', headerName: 'ID', width: 70 },
@@ -28,6 +29,9 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
     const [open, setOpen] = useState(false);
     const [editingProduct, setEditingProduct] = useState(null);
 
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [rowToDelete, setRowToDelete] = useState(null);
+
     const handleAddOrEditProduct = (product) => {
         if (editingProduct) {
             // Update existing
@@ -46,16 +50,32 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
         setOpen(true);
     };
 
+    const handleDeleteClick = (row) => {
+        setRowToDelete(row);
+        setConfirmOpen(true);
+    };
+
+    const confirmDelete = () => {
+        setRows(rows.filter((row) => row.id !== rowToDelete.id));
+        setRowToDelete(null);
+        setConfirmOpen(false);
+    };
+
     const columns = [
         ...columnsBase,
         {
             field: 'actions',
             headerName: 'Actions',
-            width: 100,
+            width: 130,
             renderCell: (params) => (
+                <Box>
                     <IconButton color="primary" onClick={() => handleEditClick(params)}>
                         <EditIcon />
                     </IconButton>
+                    <IconButton color="error" onClick={() => handleDeleteClick(params.row)}>
+                        <DeleteIcon />
+                    </IconButton>
+                </Box>
             )
         }
     ];
@@ -73,6 +93,20 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
                 </DialogContent>
             </Dialog>
 
+            <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+                <DialogTitle>Confirm Delete</DialogTitle>
+                <DialogContent>
+                    <Typography>
+                        Are you sure you want to delete{' '}
+                        <strong>{rowToDelete?.name}</strong>?
+                    </Typography>
+                    <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
+                        <Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
+                        <Button variant="contained" color="error" onClick={confirmDelete}>Delete</Button>
+                    </Box>
+                </DialogContent>
+            </Dialog>
+
             <Box mt={2}>
                 <DataGrid
                     rows={rows}