diff --git a/src/App.jsx b/src/App.jsx
index cca2356..d57c311 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import Box from '@mui/material/Box';
import Products from './private/products/Products';
import Clients from './private/clients/Clients';
+import Providers from './private/providers/Providers';
function App() {
const [zone, setZone] = useState('public'); // Could be 'public' | 'restricted' | 'private'
@@ -30,6 +31,7 @@ function App() {
{zone === 'public' && currentView === 'Products' && }
{zone === 'public' && currentView === 'Clients' && }
+ {zone === 'public' && currentView === 'Providers' && }
diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index 701e2ae..0ae9a64 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -3,6 +3,7 @@ import fendiLogo from '/favicon.png'
import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import MenuDrawer from './MenuDrawer';
+import MenuIcon from '@mui/icons-material/Menu';
export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
@@ -29,7 +30,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
setMenuOpen(true)}>
- 
+
diff --git a/src/components/MenuDrawer.jsx b/src/components/MenuDrawer.jsx
index b370d1f..ce52d68 100644
--- a/src/components/MenuDrawer.jsx
+++ b/src/components/MenuDrawer.jsx
@@ -3,7 +3,7 @@ import { Drawer, List, ListItem, ListItemText, useMediaQuery } from '@mui/materi
const menuOptions = {
public: ['Home', 'Explore', 'Contact'],
restricted: ['Dashboard', 'Projects', 'Support'],
- private: ['Products', 'Clients', 'Categories', 'Users', 'Orders', 'Settings', 'Logout'],
+ private: ['Products', 'Clients', 'Providers', 'Logout'],
};
export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
diff --git a/src/private/providers/AddOrEditProviderForm.jsx b/src/private/providers/AddOrEditProviderForm.jsx
new file mode 100644
index 0000000..cf0e304
--- /dev/null
+++ b/src/private/providers/AddOrEditProviderForm.jsx
@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react';
+import { Box, Button, TextField, Avatar, Typography, Paper } from '@mui/material';
+
+export default function AddOrEditProviderForm({ onAdd, initialData, onCancel }) {
+ const [provider, setProvider] = useState({
+ name: '',
+ email: '',
+ phone: '',
+ location: '',
+ category: '',
+ });
+
+ useEffect(() => {
+ if (initialData) {
+ setProvider(initialData);
+ } else {
+ setProvider({
+ name: '',
+ email: '',
+ phone: '',
+ location: '',
+ category: '',
+ });
+ }
+ }, [initialData]);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setProvider((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const handleSubmit = () => {
+ if (onAdd) {
+ onAdd(provider);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/private/providers/Providers.jsx b/src/private/providers/Providers.jsx
new file mode 100644
index 0000000..b309158
--- /dev/null
+++ b/src/private/providers/Providers.jsx
@@ -0,0 +1,173 @@
+import SectionContainer from '../../components/SectionContainer.jsx';
+import { useState } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
+import AddOrEditProviderForm from './AddOrEditProviderForm.jsx';
+
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import '../../App.css';
+
+const columnsBase = [
+ { field: 'name', headerName: 'Name', flex: 1 },
+ { field: 'location', headerName: 'Location', flex: 1 },
+ { field: 'category', headerName: 'Category', flex: 1 },
+ { field: 'email', headerName: 'Email', flex: 1 },
+ { field: 'phone', headerName: 'Phone', flex: 1 }
+];
+
+export default function Providers({ children, maxWidth = 'lg', sx = {} }) {
+ const [rows, setRows] = useState([
+ {
+ id: 1,
+ name: '2G2 S.R.L.',
+ email: 'info@2g2.it',
+ phone: '+39 055 123456',
+ location: 'Via Alessandro Volta, 29, 50041, Calenzano',
+ category: 'Fabrics',
+ },
+ {
+ id: 2,
+ name: '3MC S.R.L.',
+ email: 'contact@3mc.it',
+ phone: '+39 055 654321',
+ location: 'Via Mugellese, 20/22, 50013, Campi Bisenzio',
+ category: 'FJ, Metal & Hard Accessories',
+ },
+ {
+ id: 3,
+ name: 'A.M.F. S.P.A.',
+ email: 'info@amfspa.it',
+ phone: '+39 0424 789012',
+ location: 'Via Bortolo Sacchi, 54/58, 36061, Bassano del Grappa',
+ category: 'Leather Goods',
+ },
+ {
+ id: 4,
+ name: 'AB CREATIVE S.R.L.S.',
+ email: 'hello@abcreative.it',
+ phone: '+39 055 987654',
+ location: 'Via Della Pace Mondiale, 100, 50018, Scandicci',
+ category: 'Material Embellishment',
+ }
+ ]);
+
+ const [open, setOpen] = useState(false);
+ const [editingProvider, setEditingProvider] = useState(null);
+ const [confirmOpen, setConfirmOpen] = useState(false);
+ const [rowToDelete, setRowToDelete] = useState(null);
+
+ const handleAddOrEditProvider = (provider) => {
+ if (editingProvider) {
+ setRows(rows.map((row) => (row.id === editingProvider.id ? { ...editingProvider, ...provider } : row)));
+ } else {
+ const id = rows.length + 1;
+ setRows([...rows, { id, company: provider.name, ...provider }]);
+ }
+ setOpen(false);
+ setEditingProvider(null);
+ };
+
+ const handleEditClick = (params) => {
+ setEditingProvider(params.row);
+ setOpen(true);
+ };
+
+ const handleDeleteClick = (row) => {
+ setRowToDelete(row);
+ setConfirmOpen(true);
+ };
+
+ const confirmDelete = () => {
+ setRows(rows.filter((row) => row.id !== rowToDelete.id));
+ setRowToDelete(null);
+ setConfirmOpen(false);
+ };
+
+ const columns = [
+ ...columnsBase,
+ {
+ field: 'actions',
+ headerName: '',
+ width: 130,
+ renderCell: (params) => (
+
+ handleEditClick(params)}
+ >
+
+
+ handleDeleteClick(params.row)}
+ >
+
+
+
+ )
+ }
+ ];
+
+ return (
+
+
+ Providers
+
+
+
+
+
+
+
+ ({ top: 8, bottom: 8 })}
+ />
+
+
+
+
+
+
+ );
+}