diff --git a/src/private/AddProductForm.jsx b/src/private/AddProductForm.jsx new file mode 100644 index 0000000..27e961d --- /dev/null +++ b/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 ( + + + Add Products + + + + + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/private/Admin.jsx b/src/private/Admin.jsx index 04f70e6..31bdc46 100644 --- a/src/private/Admin.jsx +++ b/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 ( Product Catalog + + + + setOpen(false)} maxWidth="sm" fullWidth> + Add Product + + + + + + + rowsPerPageOptions={[5]} /> ); } \ No newline at end of file