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 './App.css'
+import Clients from './private/clients/Clients';
 
 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 === 'restricted' && <Products />}
-          {zone === 'public' && <Products />}
+          {zone === 'private' && <Clients />}
+          {zone === 'restricted' && <Clients />}
+
+          {zone === 'public' && currentView === 'Products' && <Products />}
+          {zone === 'public' && currentView === 'Clients' && <Clients />}
         </Box>
         <Footer zone={zone} />
       </Box>