feat: add menu and event to show clients page, also add a basic clients page

src/App.jsx

@@ -1,14 +1,15 @@
 import { useState } from 'react'
+import './App.css'
 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 './App.css'
 
 function App() {
   const [zone, setZone] = useState('public'); // Could be 'public' | 'restricted' | 'private'
+  const [currentView, setCurrentView] = useState('Products');
 
   return (
     <>
@@ -20,13 +21,15 @@ function App() {
         }}
       >
 
-        <AppHeader zone={zone} />
+        <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
 
         {/* Main content area */}
         <Box component="main" sx={{ flex: 1, p: 2 }}>
-          {zone === 'private' && <Products />}
+          {zone === 'private' && <Clients />}
-          {zone === 'restricted' && <Products />}
+          {zone === 'restricted' && <Clients />}
-          {zone === 'public' && <Products />}
+
+          {zone === 'public' && currentView === 'Products' && <Products />}
+          {zone === 'public' && currentView === 'Clients' && <Clients />}
         </Box>
         <Footer zone={zone} />
       </Box>

src/components/AppHeader.jsx

@@ -4,7 +4,7 @@ import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/ma
 import SearchIcon from '@mui/icons-material/Search';
 import MenuDrawer from './MenuDrawer';
 
-export default function AppHeader({ zone = 'public' }) {
+export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
   const bgColor = {
     public: '#40120EFF',
@@ -63,7 +63,12 @@ export default function AppHeader({ zone = 'public' }) {
         )}
 
         {/* Rendering the Drawer */}
-        <MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
+        <MenuDrawer
+          zone="private"
+          open={menuOpen}
+          onClose={() => setMenuOpen(false)}
+          onSelect={onSelectMenuItem} // pass handler from App
+        />
 
       </Toolbar>
     </AppBar>

src/components/MenuDrawer.jsx

@@ -3,10 +3,10 @@ import { Drawer, List, ListItem, ListItemText, useMediaQuery } from '@mui/materi
 const menuOptions = {
   public: ['Home', 'Explore', 'Contact'],
   restricted: ['Dashboard', 'Projects', 'Support'],
-  private: ['Products', 'Provider', 'Categories', 'Users', 'Orders', 'Settings', 'Logout'],
+  private: ['Products', 'Clients', 'Categories', 'Users', 'Orders', 'Settings', 'Logout'],
 };
 
-export default function MenuDrawer({ zone = 'public', open, onClose }) {
+export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
   const isMobile = useMediaQuery('(max-width:900px)');
   const items = menuOptions[zone];
 
@@ -21,7 +21,10 @@ export default function MenuDrawer({ zone = 'public', open, onClose }) {
     }}>
       <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 14 }}>
         {items.map((text, index) => (
-          <ListItem key={index} onClick={onClose}>
+          <ListItem key={index}  onClick={() => {
+              onClose(); // Close drawer
+              onSelect?.(text); // Notify parent of selected item
+            }}>
             <ListItemText
               primary={text}
               slotProps={{

src/private/clients/Clients.jsx

@@ -0,0 +1,118 @@
+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, Avatar } from '@mui/material';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import '../../App.css';
+
+const columns = [
+  {
+    field: 'avatar',
+    headerName: '',
+    width: 100,
+    renderCell: (params) => (
+      <Avatar
+        src={params.value || '/favicon.png'}
+        sx={{ width: 48, height: 48 }}
+      />
+    )
+  },
+  { field: 'fullName', headerName: 'Full Name', flex: 1 },
+  { field: 'email', headerName: 'Email', flex: 1.5 },
+  { field: 'phone', headerName: 'Phone', flex: 1 },
+  { field: 'address', headerName: 'Address', flex: 1.5 },
+  { field: 'company', headerName: 'Company', flex: 1 },
+  {
+    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,
+          }}
+        >
+          <EditRoundedIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          size="small"
+          sx={{
+            backgroundColor: '#FBE9E7',
+            color: '#C62828',
+            '&:hover': { backgroundColor: '#EF9A9A' },
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <DeleteRoundedIcon fontSize="small" />
+        </IconButton>
+      </Box>
+    )
+  }
+];
+
+export default function Clients() {
+  const [rows, setRows] = useState([
+    {
+      id: 1,
+      avatar: '/client1.jpg',
+      fullName: 'Anna Wintour',
+      email: 'anna@fendi.com',
+      phone: '+1 555-1234',
+      address: '123 Fashion Blvd, NY',
+      company: 'Fendi Casa'
+    },
+    {
+      id: 2,
+      avatar: '/client2.jpg',
+      fullName: 'Karl Lagerfeld',
+      email: 'karl@fendi.com',
+      phone: '+1 555-5678',
+      address: '456 Style Ave, Paris',
+      company: 'Fendi Casa'
+    },
+    {
+      id: 3,
+      avatar: '',
+      fullName: 'Donatella Versace',
+      email: 'donatella@fendi.com',
+      phone: '+1 555-9999',
+      address: '789 Couture St, Milan',
+      company: 'Fendi Casa'
+    }
+  ]);
+
+  return (
+    <SectionContainer sx={{ width: '100%' }}>
+      <Typography variant="h4" gutterBottom color="#26201AFF">
+        Clients
+      </Typography>
+      <Box mt={2}>
+        <DataGrid
+          getRowHeight={() => 60}
+          rows={rows}
+          columns={columns}
+          pageSize={5}
+          rowsPerPageOptions={[5]}
+          getRowSpacing={() => ({ top: 4, bottom: 4 })}
+        />
+        <Box display="flex" justifyContent="flex-end" mt={2}>
+          <Button variant="contained" className="button-gold">
+            Add Client
+          </Button>
+        </Box>
+      </Box>
+    </SectionContainer>
+  );
+}