chore: fix header and show a mockup dashboard page

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>