feat: adding the edit button and logic

src/private/AddOrEditProductForm.jsx

@@ -1,60 +1,45 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
-import { Box, Button, TextField, Typography, Grid } from '@mui/material';
+import { Box, Button, TextField, Grid } from '@mui/material';
 
-export default function AddProductForm({ onAdd }) {
+export default function AddOrEditProductForm({ onAdd, initialData }) {
   const [product, setProduct] = useState({
     name: '',
     price: '',
-    supplier: '',
+    provider: '',
     stock: '',
-    category: '',
+    category: ''
   });
 
+  useEffect(() => {
+    if (initialData) {
+      setProduct(initialData);
+    } else {
+      setProduct({
+        name: '',
+        price: '',
+        provider: '',
+        stock: '',
+        category: ''
+      });
+    }
+  }, [initialData]);
+
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setProduct((prev) => ({ ...prev, [name]: value }));
+    setProduct((prev) => ({
+      ...prev,
+      [name]: name === 'price' || name === 'stock' ? Number(value) : value
+    }));
   };
 
- const handleSave = () => {
+  const handleSubmit = () => {
     if (onAdd) {
       onAdd(product);
-      setProduct({ name: '', price: '', provider: '', stock: '', category: '' });
     }
   };
 
-  const handleDelete = () => {
-    console.log('Deleting product');
-  };
-
-  const handleUpdate = () => {
-    console.log('Updating product:', product);
-  };
-
   return (
-    <Box
+    <Box mt={2}>
-      sx={{
-        maxWidth: 400,
-        mx: 'auto',
-        mt: 4,
-        p: 3,
-        borderRadius: 2,
-        boxShadow: 3,
-        bgcolor: 'white',
-      }}
-    >
-      <Typography variant="h6" gutterBottom textAlign="center" color='black'>
-        Add Products
-      </Typography>
-
-      <TextField
-        fullWidth
-        label="Company"
-        name="company"
-        value={product.company || ''}
-        onChange={handleChange}
-        margin="normal"
-      />
-
       <TextField
         fullWidth
         label="Name"
@@ -78,7 +63,7 @@ export default function AddProductForm({ onAdd }) {
             fullWidth
             label="Provider"
             name="provider"
-            value={product.provider || ''}
+            value={product.provider}
             onChange={handleChange}
             margin="normal"
           />
@@ -103,17 +88,10 @@ export default function AddProductForm({ onAdd }) {
         onChange={handleChange}
         margin="normal"
       />
-
+      <Box display="flex" justifyContent="flex-end" mt={2}>
-      <Box display="flex" justifyContent="space-between" mt={2}>
+        <Button variant="contained" onClick={handleSubmit}>
-        <Button variant="contained" color="primary" onClick={handleSave}>
           Save
         </Button>
-        <Button variant="outlined" onClick={handleDelete}>
-          Delete
-        </Button>
-        <Button variant="outlined" onClick={handleUpdate}>
-          Update
-        </Button>
       </Box>
     </Box>
   );

src/private/Admin.jsx

@@ -2,10 +2,11 @@
 import SectionContainer from '../components/SectionContainer';
 import React, { useState } from 'react';
 import { DataGrid } from '@mui/x-data-grid';
-import { Typography, Button, Dialog, DialogTitle, DialogContent } from '@mui/material';
+import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
-import AddProductForm from './AddProductForm';
+import AddOrEditProductForm from './AddOrEditProductForm.jsx';
+import EditIcon from '@mui/icons-material/Edit';
 
-const columns = [
+const columnsBase = [
     { field: 'id', headerName: 'ID', width: 70 },
     { field: 'company', headerName: 'Company', flex: 1 },
     { field: 'name', headerName: 'Name', flex: 1 },
@@ -17,44 +18,75 @@ const columns = [
 
 export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
     const [rows, setRows] = useState([
-    { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home' },
+        { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home' },
-    { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home' },
+        { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home' },
-    { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home' },
+        { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home' },
-    { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home' },
+        { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home' },
-    { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home' }
+        { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home' }
-  ]);
+    ]);
 
-  const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [editingProduct, setEditingProduct] = useState(null);
 
-  const handleAddProduct = (newProduct) => {
+    const handleAddOrEditProduct = (product) => {
-    const id = rows.length + 1;
+        if (editingProduct) {
-    setRows([...rows, { id, company: 'Fendi casa', ...newProduct }]);
+            // Update existing
-    setOpen(false);
+            setRows(rows.map((row) => (row.id === editingProduct.id ? { ...editingProduct, ...product } : row)));
-  };
+        } else {
+            // Add new
+            const id = rows.length + 1;
+            setRows([...rows, { id, company: 'Fendi casa', ...product }]);
+        }
+        setOpen(false);
+        setEditingProduct(null);
+    };
+
+    const handleEditClick = (params) => {
+        setEditingProduct(params.row);
+        setOpen(true);
+    };
+
+    const columns = [
+        ...columnsBase,
+        {
+            field: 'actions',
+            headerName: 'Actions',
+            width: 100,
+            renderCell: (params) => (
+                <IconButton color="primary" onClick={() => handleEditClick(params)}>
+                    <EditIcon />
+                </IconButton>
+            )
+        }
+    ];
 
     return (
-
+        <SectionContainer sx={{ width: '100%' }}>
-        <SectionContainer sx={{width: '100%' }}>
             <Typography variant="h6" gutterBottom>
                 Product Catalog
             </Typography>
 
-             <Button variant="contained" color="primary" onClick={() => setOpen(true)} sx={{ mb: 2 }}>
+            <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
-                Add Product
+                <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
-            </Button>
-
-            <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
-                <DialogTitle>Add Product</DialogTitle>
                 <DialogContent>
-                <AddProductForm onAdd={handleAddProduct} />
+                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} />
                 </DialogContent>
             </Dialog>
 
-            <DataGrid
+            <Box mt={2}>
-                rows={rows}
+                <DataGrid
-                columns={columns}
+                    rows={rows}
-                pageSize={5}
+                    columns={columns}
-                rowsPerPageOptions={[5]} />
+                    pageSize={5}
+                    rowsPerPageOptions={[5]}
+                />
+
+                <Box display="flex" justifyContent="flex-end" mt={2}>
+                    <Button variant="contained" color="primary" onClick={() => setOpen(true)}>
+                        Add Product
+                    </Button>
+                </Box>
+            </Box>
         </SectionContainer>
     );
 }