feat: add cancel button

src/private/AddOrEditProductForm.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Box, Button, TextField, Grid } from '@mui/material';
 
-export default function AddOrEditProductForm({ onAdd, initialData }) {
+export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
   const [product, setProduct] = useState({
     name: '',
     price: '',
@@ -88,10 +88,12 @@ export default function AddOrEditProductForm({ onAdd, initialData }) {
         onChange={handleChange}
         margin="normal"
       />
-      <Box display="flex" justifyContent="flex-end" mt={2}>
+     <Box mt={2}>
-        <Button variant="contained" onClick={handleSubmit}>
+      {/* Fields... */}
-          Save
+      <Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
-        </Button>
+        <Button onClick={onCancel}>Cancel</Button>
+        <Button variant="contained" onClick={handleSubmit}>Save</Button>
+      </Box>
     </Box>
     </Box>
   );

src/private/Admin.jsx

@@ -89,7 +89,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
             <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
                 <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
                 <DialogContent>
-                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} />
+                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }}/>
                 </DialogContent>
             </Dialog>