feat: addproductform implementation

src/private/AddProductForm.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { Box, Button, TextField, Typography, Grid } from '@mui/material';
+
+export default function AddProductForm() {
+  const [product, setProduct] = useState({
+    name: '',
+    price: '',
+    supplier: '',
+    stock: '',
+    category: '',
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setProduct((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSave = () => {
+    console.log('Saving product:', product);
+  };
+
+  const handleDelete = () => {
+    console.log('Deleting product');
+  };
+
+  const handleUpdate = () => {
+    console.log('Updating product:', product);
+  };
+
+  return (
+    <Box
+      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"
+        name="name"
+        value={product.name}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <TextField
+        fullWidth
+        label="Price"
+        name="price"
+        type="number"
+        value={product.price}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <TextField
+            fullWidth
+            label="Provider"
+            name="provider"
+            value={product.provider || ''}
+            onChange={handleChange}
+            margin="normal"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            fullWidth
+            label="Stock"
+            name="stock"
+            type="number"
+            value={product.stock}
+            onChange={handleChange}
+            margin="normal"
+          />
+        </Grid>
+      </Grid>
+      <TextField
+        fullWidth
+        label="Category"
+        name="category"
+        value={product.category}
+        onChange={handleChange}
+        margin="normal"
+      />
+
+      <Box display="flex" justifyContent="space-between" mt={2}>
+        <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

@@ -1,8 +1,9 @@
 
 import SectionContainer from '../components/SectionContainer';
-import React from 'react';
+import React, { useState } from 'react';
 import { DataGrid } from '@mui/x-data-grid';
-import { Typography, InputBase, IconButton, Box } from '@mui/material';
+import { Typography, Button, Dialog, DialogTitle, DialogContent } from '@mui/material';
+import AddProductForm from './AddProductForm';
 
 const columns = [
     { field: 'id', headerName: 'ID', width: 70 },
@@ -14,27 +15,47 @@ const columns = [
     { field: 'category', headerName: 'Category', flex: 1 }
 ];
 
-const rows = [
-    { 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.00, provider: 'Provider B', stock: 50, category: 'Home' },
-    { id: 3, company:'Fendi casa', name: 'Product 3', price: 5.50, 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: 5, company:'Fendi casa', name: 'Product 5', price: 8.20, provider: 'Provider E', stock: 75, category: 'Home' }
-];
-
 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: 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: 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' }
+  ]);
+
+  const [open, setOpen] = useState(false);
+
+  const handleAddProduct = (newProduct) => {
+    const id = rows.length + 1;
+    setRows([...rows, { id, company: 'Fendi casa', ...newProduct }]);
+    setOpen(false);
+  };
+
     return (
 
         <SectionContainer sx={{width: '100%' }}>
             <Typography variant="h6" gutterBottom>
                 Product Catalog
             </Typography>
+
+             <Button variant="contained" color="primary" onClick={() => setOpen(true)} sx={{ mb: 2 }}>
+                Add Product
+            </Button>
+
+            <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+                <DialogTitle>Add Product</DialogTitle>
+                <DialogContent>
+                <AddProductForm onAdd={handleAddProduct} />
+                </DialogContent>
+            </Dialog>
+
+
             <DataGrid
                 rows={rows}
                 columns={columns}
                 pageSize={5}
-                rowsPerPageOptions={[5]}
+                rowsPerPageOptions={[5]} />
-            />
         </SectionContainer>
     );
 }