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>
 

src/components/AppHeader.jsx

@@ -40,7 +40,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         left: 0,
         right: 0,
       }} >
-      <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+      <Toolbar disableGutters sx={{ justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'nowrap', pl: 0, pr: 0, minHeight: 64, width: '100%', '&.MuiToolbar-gutters': { pl: 0, pr: 0 }, position: 'relative', }}>
         <Box
           sx={{
             display: 'flex',
@@ -57,7 +57,18 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           </Typography>
         </Box>
 
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px', ml: 'auto' }}>
+        <Box
+          sx={{
+            position: 'absolute',
+            right: 20,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+
+          }}
+        >
           <IconButton>
             <img src="/refresh.png" alt="Reload" width={24} height={24} />
           </IconButton>

src/private/dashboard/Dashboard.jsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Box, Grid, Paper, Typography, Divider } from '@mui/material';
+import { BarChart, LineChart, PieChart } from '@mui/x-charts';
+
+const paperSx = {
+  p: 2,
+  borderRadius: 2,
+  boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+  backgroundColor: '#fff',
+};
+
+export default function Dashboard() {
+  // ===== Mock data (Fendi-like categories) =====
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+  const revenue = [42, 55, 48, 61, 70, 78]; // $k
+  const orders = [180, 210, 195, 240, 260, 300];
+
+  const categories = [
+    { label: 'Furniture', value: 38 },
+    { label: 'Lighting', value: 18 },
+    { label: 'Textiles', value: 14 },
+    { label: 'Decorative', value: 12 },
+    { label: 'Kitchen & Dining', value: 10 },
+    { label: 'Outdoor', value: 8 },
+  ];
+
+  const topProducts = [
+    { label: 'Sofa Roma', value: 24 },
+    { label: 'Lamp Venezia', value: 18 },
+    { label: 'Rug Milano', value: 15 },
+    { label: 'Table Firenze', value: 12 },
+    { label: 'Chair Torino', value: 9 },
+  ];
+
+  return (
+    <Box sx={{ p: 3 }}>
+      {/* KPIs */}
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Revenue (Last 30d)</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 312k</Typography>
+            <Typography variant="caption" color="success.main">+8.4% vs prev.</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Orders</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>1,385</Typography>
+            <Typography variant="caption" color="success.main">+6.1% vs prev.</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Avg. Order Value</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 225</Typography>
+            <Typography variant="caption" color="text.secondary">stable</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Returning Customers</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>42%</Typography>
+            <Typography variant="caption" color="success.main">+2.0 pts</Typography>
+          </Paper>
+        </Grid>
+      </Grid>
+
+      {/* Charts */}
+      <Grid container spacing={2}>
+        {/* Revenue trend */}
+        <Grid item xs={12} md={8}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Revenue & Orders</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <LineChart
+              xAxis={[{ scaleType: 'point', data: months }]}
+              series={[
+                { data: revenue, label: 'Revenue ($k)', curve: 'catmullRom' },
+                { data: orders, label: 'Orders', curve: 'catmullRom', yAxisKey: 'right' },
+              ]}
+              yAxis={[{}, { id: 'right', position: 'right' }]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+
+        {/* Category share */}
+        <Grid item xs={12} md={4}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Sales by Category</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <PieChart
+              series={[
+                {
+                  data: categories.map((c, i) => ({ id: i, value: c.value, label: c.label })),
+                  innerRadius: 30,
+                  paddingAngle: 2,
+                },
+              ]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+
+        {/* Top products */}
+        <Grid item xs={12}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Top Products</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <BarChart
+              xAxis={[{ scaleType: 'band', data: topProducts.map(p => p.label) }]}
+              series={[{ data: topProducts.map(p => p.value), label: 'Units' }]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}