61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
|
|
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 AddProductForm from './AddProductForm';
|
|
|
|
const columns = [
|
|
{ field: 'id', headerName: 'ID', width: 70 },
|
|
{ field: 'company', headerName: 'Company', flex: 1 },
|
|
{ field: 'name', headerName: 'Name', flex: 1 },
|
|
{ field: 'price', headerName: '$', width: 100, type: 'number' },
|
|
{ field: 'provider', headerName: 'Provider', flex: 1 },
|
|
{ field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
|
|
{ field: 'category', headerName: 'Category', flex: 1 }
|
|
];
|
|
|
|
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]} />
|
|
</SectionContainer>
|
|
);
|
|
} |