feat: add the new menu for admin and the users page

src/App.jsx

@@ -4,12 +4,9 @@ import AppHeader from './components/AppHeader';
 import Footer from './components/Footer';
 import Box from '@mui/material/Box';
 
-import Products from './private/products/Products';
 import Clients from './private/clients/Clients';
-import Providers from './private/providers/Providers';
-import Categories from './private/categories/Categories';
-import Admin from './private/mongo/Admin';
 import Dashboard from './private/dashboard/Dashboard';
+import UserManagement from './private/users/UserManagement';
 
 import LoginPage from './private/LoginPage';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
@@ -49,11 +46,8 @@ function App() {
                   {zone === 'restricted' && <Clients />}
 
                   {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
-                  {zone === 'public' && currentView === 'Products' && <Products />}
-                  {zone === 'public' && currentView === 'Clients' && <Clients />}
-                  {zone === 'public' && currentView === 'Providers' && <Providers />}
-                  {zone === 'public' && currentView === 'Categories' && <Categories />}
-                  {zone === 'public' && currentView === 'Admin' && <Admin />}
+
+                 {zone === 'public' && currentView === 'UserManagement' && <UserManagement />}
                 </PrivateRoute>
               }
             />

src/components/MenuDrawerPrivate.jsx

@@ -151,8 +151,12 @@ export default function MenuDrawerPrivate({
                         onClick={() => {
                             if (hasChildren) {
                                 handleToggleNode(key);
+                            } else {
+                                if (node.title === 'Users Management') {
+                                    onSelect?.('UserManagement');
                                 } else {
                                     onSelect?.(node.title);
+                                }
                                 if (isMobile) onClose?.();
                             }
                         }}

src/private/users/AddOrEditUserForm.jsx

@@ -0,0 +1,103 @@
+import { useState, useEffect } from 'react';
+import { Box, Button, TextField, MenuItem } from '@mui/material';
+import { createExternalData, updateExternalData } from '../../api/mongo/actions';
+
+export default function AddOrEditUserForm({ onAdd, initialData, onCancel }) {
+    const [formData, setFormData] = useState({
+        username: '',
+        fullName: '',
+        email: '',
+        role: 'User',
+        status: 'Active'
+    });
+
+    useEffect(() => {
+        if (initialData) {
+            setFormData({ ...initialData });
+        } else {
+            setFormData({
+                username: '',
+                fullName: '',
+                email: '',
+                role: 'User',
+                status: 'Active'
+            });
+        }
+    }, [initialData]);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async () => {
+        try {
+            if (initialData) {
+                await updateExternalData(formData);
+            } else {
+                await createExternalData(formData);
+            }
+            if (onAdd) onAdd();
+        } catch (error) {
+            console.error('Error submitting form:', error);
+        }
+    };
+
+    return (
+        <Box sx={{ py: 2 }}>
+            <TextField
+                fullWidth
+                label="Username"
+                name="username"
+                value={formData.username}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                label="Full Name"
+                name="fullName"
+                value={formData.fullName}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                label="Email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                select
+                label="Role"
+                name="role"
+                value={formData.role}
+                onChange={handleChange}
+                margin="normal"
+            >
+                <MenuItem value="Admin">Admin</MenuItem>
+                <MenuItem value="User">User</MenuItem>
+                <MenuItem value="Manager">Manager</MenuItem>
+            </TextField>
+            <TextField
+                fullWidth
+                select
+                label="Status"
+                name="status"
+                value={formData.status}
+                onChange={handleChange}
+                margin="normal"
+            >
+                <MenuItem value="Active">Active</MenuItem>
+                <MenuItem value="Inactive">Inactive</MenuItem>
+            </TextField>
+            <Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
+                <Button onClick={onCancel} className="button-transparent">Cancel</Button>
+                <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+            </Box>
+        </Box>
+    );
+}

src/private/users/UserManagement.jsx

@@ -0,0 +1,181 @@
+import SectionContainer from '../../components/SectionContainer';
+import { useEffect, useState, useRef } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import AddOrEditUserForm from './AddOrEditUserForm';
+import { getExternalData, deleteExternalData } from '../../api/mongo/actions';
+import useApiToast from '../../hooks/useApiToast';
+
+const columnsBase = [
+    { field: 'username', headerName: 'Username', flex: 1 },
+    { field: 'fullName', headerName: 'Full Name', flex: 2 },
+    { field: 'email', headerName: 'Email', flex: 2 },
+    { field: 'role', headerName: 'Role', flex: 1 },
+    { field: 'status', headerName: 'Status', width: 120 },
+    {
+        field: 'createdAt',
+        headerName: 'Created At',
+        width: 160,
+        valueFormatter: (params) => {
+            const date = params?.value;
+            return date ? new Date(date).toLocaleString() : '—';
+        }
+    },
+    { field: 'createdBy', headerName: 'Created By', flex: 1 },
+    {
+        field: 'updatedAt',
+        headerName: 'Updated At',
+        width: 160,
+        valueFormatter: (params) => {
+            const date = params?.value;
+            return date ? new Date(date).toLocaleString() : '—';
+        }
+    },
+    { field: 'updatedBy', headerName: 'Updated By', flex: 1 },
+];
+
+export default function UserManagement() {
+    const [rows, setRows] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [editingData, setEditingData] = useState(null);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [rowToDelete, setRowToDelete] = useState(null);
+    const { handleError } = useApiToast();
+
+    const hasLoaded = useRef(false);
+
+    useEffect(() => {
+        if (!hasLoaded.current) {
+            loadData();
+            hasLoaded.current = true;
+        }
+    }, []);
+
+    const handleEditClick = (params) => {
+        setEditingData(params.row);
+        setOpen(true);
+    };
+
+    const handleDeleteClick = (row) => {
+        setRowToDelete(row);
+        setConfirmOpen(true);
+    };
+
+    const handleConfirmDelete = async () => {
+        try {
+            await deleteExternalData(rowToDelete._Id);
+            await loadData();
+        } catch (error) {
+            console.error('Delete failed:', error);
+        } finally {
+            setConfirmOpen(false);
+            setRowToDelete(null);
+        }
+    };
+
+    const loadData = async () => {
+        try {
+            const data = await getExternalData();
+            const safeData = Array.isArray(data) ? data : [];
+            setRows(safeData);
+        } catch (error) {
+            console.error('Error loading data:', error);
+            handleError(error, 'Failed to load data');
+            setRows([]);
+        }
+    };
+
+    const columns = [
+        ...columnsBase,
+        {
+            field: 'actions',
+            headerName: '',
+            width: 130,
+            renderCell: (params) => (
+                <Box display="flex" alignItems="center" justifyContent="flex-end" height="100%" gap={2}>
+                    <IconButton
+                        size="small"
+                        sx={{
+                            backgroundColor: '#DFCCBC',
+                            color: '#26201A',
+                            '&:hover': { backgroundColor: '#C2B2A4' },
+                            borderRadius: 2,
+                            p: 1,
+                        }}
+                        onClick={() => handleEditClick(params)}
+                    >
+                        <EditRoundedIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton
+                        size="small"
+                        sx={{
+                            backgroundColor: '#FBE9E7',
+                            color: '#C62828',
+                            '&:hover': { backgroundColor: '#EF9A9A' },
+                            borderRadius: 2,
+                            p: 1,
+                        }}
+                        onClick={() => handleDeleteClick(params.row)}
+                    >
+                        <DeleteRoundedIcon fontSize="small" />
+                    </IconButton>
+                </Box>
+            )
+        }
+    ];
+
+    return (
+        <SectionContainer sx={{ width: '100%' }}>
+            <Typography variant="h4" gutterBottom color='#26201AFF'>User Management</Typography>
+
+            <Dialog open={open} onClose={() => { setOpen(false); setEditingData(null); }} maxWidth="md" fullWidth>
+                <DialogTitle>{editingData ? 'Edit User' : 'Add User'}</DialogTitle>
+                <DialogContent>
+                    <AddOrEditUserForm
+                        onAdd={async () => {
+                            await loadData();
+                            setOpen(false);
+                            setEditingData(null);
+                        }}
+                        initialData={editingData}
+                        onCancel={() => {
+                            setOpen(false);
+                            setEditingData(null);
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+                <DialogTitle>Confirm Delete</DialogTitle>
+                <DialogContent>
+                    <Typography>
+                        Are you sure you want to delete <strong>{rowToDelete?.username}</strong>?
+                    </Typography>
+                    <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
+                        <Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
+                        <Button variant="contained" onClick={handleConfirmDelete} className="button-gold">Delete</Button>
+                    </Box>
+                </DialogContent>
+            </Dialog>
+
+            <Box mt={2}>
+                <DataGrid
+                    rows={rows}
+                    columns={columns}
+                    pageSize={5}
+                    rowsPerPageOptions={[5]}
+                    getRowSpacing={() => ({ top: 4, bottom: 4 })}
+                />
+
+                <Box display="flex" justifyContent="flex-end" mt={2}>
+                    <Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
+                        Add User
+                    </Button>
+                </Box>
+            </Box>
+        </SectionContainer>
+    );
+}