added maintenance page

fixed settings page menu

src/App.js

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-do
 import SettingsMain from './Settings/SettingsMain'
 import SettingsInfo from './Settings/SettingsInfo'
 import Dashboard from './Dashboard/DashboardMain'
+import ProgressBar from './widgets/ProgressBar'
 import metadata from './metadata.json';
 
 import './App.css'
@@ -29,6 +30,7 @@ function App() {
         <Route path="/dashboard/console" element={<Terminal/>} />
         <Route path="/settings" element={<SettingsMain/>} />
         <Route path="/settings/info" element={<SettingsInfo/>} />
+        <Route path="/maintenance" element={<ProgressBar/>} />
       </Routes>
     </Router>
   );

src/Settings/SettingsMain.js

@@ -19,7 +19,6 @@ import DashboardIcon from '@mui/icons-material/DashboardOutlined';
 import BarChartIcon from '@mui/icons-material/BarChartOutlined';
 import SettingsIcon from '@mui/icons-material/SettingsOutlined';
 import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
-import MenuIcon from '@mui/icons-material/Menu';
 import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
@@ -32,15 +31,6 @@ export default function SettingsMain() {
   const [anchorEl, setAnchorEl] = useState(null);
   const openMenu = Boolean(anchorEl);
 
-  const handleDrawer = () => {
-    if(open === false){
-      setOpen(true);
-    } 
-    else{
-      setOpen(false);
-    }
-  };
-
 
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -54,17 +44,8 @@ export default function SettingsMain() {
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, width: `calc(100% - ${open ? drawerWidth : 0}px)`, ml: `${open ? drawerWidth : 0}px` }}>
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
           <Toolbar>
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              onClick={handleDrawer}
-              edge="start"
-              sx={{ marginRight: 2 }}
-            >
-              <MenuIcon />
-            </IconButton>
             <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
               Admin Dashboard
             </Typography>
@@ -117,9 +98,8 @@ export default function SettingsMain() {
               boxSizing: 'border-box',
             },
           }}
-          variant="persistent"
+          variant="permanent"
           anchor="left"
-          open={open}
           
         >
           <Divider />

src/metadata.json

@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":0,"buildRevision":7,"buildTag":"DEV"}
+{"buildMajor":1,"buildMinor":0,"buildRevision":10,"buildTag":"DEV"}

src/widgets/ProgressBar.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import { Box, LinearProgress, Typography, Container } from '@mui/material';
+import theme from '../theme';
+import { AppBar, Toolbar } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+
+const ProgressBar = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((oldProgress) => {
+        if (oldProgress === 100) {
+          return 100;
+        }
+        const diff = Math.random() * 10;
+        return Math.min(oldProgress + diff, 100);
+      });
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+        <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
+            Admin Dashboard
+          </Typography>
+        </Toolbar>
+      </AppBar>
+        <Container maxWidth="sm" sx={{ 
+            mt: 4,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '80vh'
+        }}>
+            <Box sx={{ width: '100%' }}>
+            <Typography variant="h5" sx={{ mb: 2, textAlign: 'center' }}>
+                Progress Status
+            </Typography>
+            <LinearProgress variant="determinate" value={progress} />
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
+                <Typography variant="body2" color="text.secondary">
+                {`${Math.round(progress)}%`}
+                </Typography>
+            </Box>
+            </Box>
+        </Container>
+    </ThemeProvider>
+  );
+};
+
+export default ProgressBar;