chore: fix header and show a mockup dashboard page

src/App.jsx

@@ -9,6 +9,7 @@ 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 LoginPage from './private/LoginPage';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
@@ -21,7 +22,7 @@ function PrivateRoute({ children }) {
 
 function App() {
   const [zone, setZone] = useState('public'); // public | restricted | private
-  const [currentView, setCurrentView] = useState('Products');
+  const [currentView, setCurrentView] = useState('Dashboard');
 
   return (
     <>
@@ -34,6 +35,7 @@ function App() {
       >
 
         <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
+        <Box sx={{ height: 64 }} />
 
         <Box component="main" sx={{ flex: 1, p: 2 }}>
           <Routes>
@@ -46,6 +48,7 @@ function App() {
                   {zone === 'private' && <Clients />}
                   {zone === 'restricted' && <Clients />}
 
+                  {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
                   {zone === 'public' && currentView === 'Products' && <Products />}
                   {zone === 'public' && currentView === 'Clients' && <Clients />}
                   {zone === 'public' && currentView === 'Providers' && <Providers />}
@@ -57,7 +60,7 @@ function App() {
           </Routes>
         </Box>
 
-
+        <Box sx={{ height: 64 }} />
         <Footer zone={zone} />
       </Box>