From 65e8404592b054dc79fd9c80d178062c8679bc4e Mon Sep 17 00:00:00 2001
From: SnippetsX <snippetsx@lcsa.ru>
Date: Fri, 22 Nov 2024 22:20:29 +0300
Subject: [PATCH] Refactored all pages available right now for more readability
 Added Sidebar.js where stored all sidebars for this project Added AppBar.js
 where stored all appbars for this project

---
 src/App.js                       |   3 +-
 src/Dashboard/DashboardMain.js   | 122 ++------------------------
 src/Dashboard/DashboardUsers.js  | 146 ++-----------------------------
 src/Settings/SettingsInfo.js     | 123 ++------------------------
 src/Settings/SettingsMain.js     | 123 ++------------------------
 src/Terminal/TerminalPage.js     | 119 ++-----------------------
 src/metadata.json                |   2 +-
 src/widgets/AppBar.js            |  90 +++++++++++++++++++
 src/widgets/ProgressBar.js       |  10 +--
 src/widgets/Sidebar.js           | 107 ++++++++++++++++++++++
 src/widgets/WidgetsStatistics.js |  10 ++-
 11 files changed, 242 insertions(+), 613 deletions(-)
 create mode 100644 src/widgets/AppBar.js
 create mode 100644 src/widgets/Sidebar.js

diff --git a/src/App.js b/src/App.js
index fb4b9e0..f51a1d5 100644
--- a/src/App.js
+++ b/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 DashboardUsers from './Dashboard/DashboardUsers'
 import ProgressBar from './widgets/ProgressBar'
 import metadata from './metadata.json';
 
@@ -24,8 +25,8 @@ function App() {
       <Routes>
         <Route path='/' element={<Navigate to='/dashboard' />} />
         <Route path="/dashboard" element={<Dashboard/>} />
+        <Route path="/dashboard/users" element={<DashboardUsers />} />
         {/* <Route path="/dashboard/configuration" element={<Settings />} />
-        <Route path="/dashboard/users" element={<Users />} />
         <Route path="/dashboard/reports" element={<Reports />} /> */}
         <Route path="/dashboard/console" element={<Terminal/>} />
         <Route path="/settings" element={<SettingsMain/>} />
diff --git a/src/Dashboard/DashboardMain.js b/src/Dashboard/DashboardMain.js
index 561e38d..a06d488 100644
--- a/src/Dashboard/DashboardMain.js
+++ b/src/Dashboard/DashboardMain.js
@@ -1,134 +1,22 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { 
   Box,
-  ListItem,
-  ListItemText,
-  List,
-  Drawer,
-  IconButton,
-  Divider,
   CssBaseline,
-  AppBar,
   Toolbar,
-  Typography,
-  Menu,
-  MenuItem,
 } from '@mui/material';
-import PeopleIcon from '@mui/icons-material/PeopleOutline';
-import DashboardIcon from '@mui/icons-material/DashboardOutlined';
-import BarChartIcon from '@mui/icons-material/BarChartOutlined';
-import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
-import SettingsIcon from '@mui/icons-material/SettingsOutlined';
-import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
-import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
-import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
-import deleteToken from '../core/deleteToken';
 import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
-
-
-const drawerWidth = 240;
+import { SidebarMain } from '../widgets/Sidebar';
+import { AppBarFull } from '../widgets/AppBar';
 
 export default function DashboardMain() {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const openMenu = Boolean(anchorEl);
-
-  const handleMenuClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
   return (
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-          <Toolbar>
-            <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-              Admin Dashboard
-            </Typography>
-            <IconButton
-              color="inherit"
-              onClick={handleMenuClick}
-              sx={{ transform: 'scale(1.2)' }}
-            >
-              <AccountCircleIcon />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={openMenu}
-              onClose={handleMenuClose}
-            >
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                 Dashboard
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                 Profile
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                My account
-              </MenuItem>
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
-                  <SettingsIcon sx={{ marginRight: 2 }} />
-                Settings
-              </MenuItem>
-              <MenuItem onClick={() => { 
-                handleMenuClose(); 
-                deleteToken(); 
-                window.location.reload();
-              }}>
-                  <LogoutIcon sx={{ marginRight: 2 }} />
-                Logout
-              </MenuItem>
-            </Menu>
-          </Toolbar>
-        </AppBar>
-        <Drawer
-          sx={{
-            width: drawerWidth,
-            flexShrink: 0,
-            '& .MuiDrawer-paper': {
-              width: drawerWidth,
-              bgcolor: 'secondary.main',
-              boxSizing: 'border-box',
-            },
-          }}
-          variant="permanent"
-          anchor="left"
-        >
-          <Divider />
-          <List>
-            <ListItem button key="Dashboard" onClick={() => window.location.href = '/dashboard'}>
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Users">
-                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Reports">
-                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Server Configuration">
-                <ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-          <ListItem button key="Terminal" onClick={() => window.location.href = '/dashboard/console'}>
-              <TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-            <ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
-          </ListItem>
-
-
-          </List>
-        </Drawer>
+        <AppBarFull />
+        <SidebarMain />
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
diff --git a/src/Dashboard/DashboardUsers.js b/src/Dashboard/DashboardUsers.js
index c4522e6..c67e35e 100644
--- a/src/Dashboard/DashboardUsers.js
+++ b/src/Dashboard/DashboardUsers.js
@@ -1,159 +1,31 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { 
   Box,
-  ListItem,
-  ListItemText,
-  List,
-  Drawer,
-  IconButton,
-  Divider,
   CssBaseline,
-  AppBar,
   Toolbar,
   Typography,
-  Menu,
-  MenuItem,
 } from '@mui/material';
-import PeopleIcon from '@mui/icons-material/PeopleOutline';
-import DashboardIcon from '@mui/icons-material/DashboardOutlined';
-import BarChartIcon from '@mui/icons-material/BarChartOutlined';
-import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
-import SettingsIcon from '@mui/icons-material/SettingsOutlined';
-import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
-import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
-import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
-import deleteToken from '../core/deleteToken';
-import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
+import { SidebarMain } from '../widgets/Sidebar';
+import { AppBarFull } from '../widgets/AppBar';
 
-const drawerWidth = 240;
-
-export default function DashboardMain() {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const openMenu = Boolean(anchorEl);
-
-  const handleMenuClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
 
+export default function DashboardUsers() {
   return (
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-          <Toolbar>
-            <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-              Admin Dashboard
-            </Typography>
-            <IconButton
-              color="inherit"
-              onClick={handleMenuClick}
-              sx={{ transform: 'scale(1.2)' }}
-            >
-              <AccountCircleIcon />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={openMenu}
-              onClose={handleMenuClose}
-            >
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                 Dashboard
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                 Profile
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                My account
-              </MenuItem>
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
-                  <SettingsIcon sx={{ marginRight: 2 }} />
-                Settings
-              </MenuItem>
-              <MenuItem onClick={() => { 
-                handleMenuClose(); 
-                deleteToken(); 
-                window.location.reload();
-              }}>
-                  <LogoutIcon sx={{ marginRight: 2 }} />
-                Logout
-              </MenuItem>
-            </Menu>
-          </Toolbar>
-        </AppBar>
-        <Drawer
-          sx={{
-            width: drawerWidth,
-            flexShrink: 0,
-            '& .MuiDrawer-paper': {
-              width: drawerWidth,
-              bgcolor: 'secondary.main',
-              boxSizing: 'border-box',
-            },
-          }}
-          variant="permanent"
-          anchor="left"
-        >
-          <Divider />
-          <List>
-            <ListItem button key="Dashboard" onClick={() => window.location.href = '/dashboard'}>
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Users">
-                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Reports">
-                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Server Configuration">
-                <ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-          <ListItem button key="Terminal" onClick={() => window.location.href = '/dashboard/console'}>
-              <TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-            <ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
-          </ListItem>
-
-
-          </List>
-        </Drawer>
+        <AppBarFull />
+        <SidebarMain />
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
         >
           <Toolbar />
-          {/* <Typography variant="h4">Hi {localStorage.getItem('token')}</Typography> */}
-          <Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
-            <SystemMon/>
-            <WebsiteAvailability/>
-            <SystemMon/>
-          </Box>
-          <Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
-            <SystemMon/>
-            <WebsiteAvailability/>
-            <SystemMon/>
-          </Box>
-          <Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
-            <SystemMon/>
-            <WebsiteAvailability/>
-            <SystemMon/>
-          </Box>
-          <Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
-            <SystemMon/>
-            <WebsiteAvailability/>
-            <SystemMon/>
-          </Box>
+          <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
+            Users Demo Page
+          </Typography>
         </Box>
       </Box>
     </ThemeProvider>
diff --git a/src/Settings/SettingsInfo.js b/src/Settings/SettingsInfo.js
index b821dfa..9c420bf 100644
--- a/src/Settings/SettingsInfo.js
+++ b/src/Settings/SettingsInfo.js
@@ -1,138 +1,33 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { 
   Box,
-  ListItem,
-  ListItemText,
-  List,
-  Drawer,
-  IconButton,
-  Divider,
   CssBaseline,
-  AppBar,
   Toolbar,
   Typography,
-  Menu,
-  MenuItem,
 } from '@mui/material';
-import PeopleIcon from '@mui/icons-material/PeopleOutline';
-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 AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
-import deleteToken from '../core/deleteToken';
 import '../metadata.json'
 import { DashboardInfo } from '../widgets/WidgetStatic'
-
-const drawerWidth = 240;
+import { SidebarSettings } from '../widgets/Sidebar';
+import { AppBarFull } from '../widgets/AppBar';
 
 export default function SettingsInfo() {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const openMenu = Boolean(anchorEl);
-
-
-  const handleMenuClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
   return (
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-          <Toolbar>
-            <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-              Admin Dashboard
-            </Typography>
-            <IconButton
-              color="inherit"
-              onClick={handleMenuClick}
-              sx={{ transform: 'scale(1.2)' }}
-            >
-              <AccountCircleIcon />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={openMenu}
-              onClose={handleMenuClose}
-            >
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
-                  <DashboardIcon sx={{ marginRight: 2 }} />
-                 Dashboard
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                 Profile
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                My account
-              </MenuItem>
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
-                  <SettingsIcon sx={{ marginRight: 2 }} />
-                Settings
-              </MenuItem>
-              <MenuItem onClick={() => { 
-                handleMenuClose(); 
-                deleteToken(); 
-                window.location.reload();
-              }}>
-                  <LogoutIcon sx={{ marginRight: 2 }} />
-                Logout
-              </MenuItem>
-            </Menu>
-          </Toolbar>
-        </AppBar>
-        <Drawer
-          sx={{
-            width: drawerWidth,
-            flexShrink: 0,
-            '& .MuiDrawer-paper': {
-              width: drawerWidth,
-              bgcolor: 'secondary.main',
-              boxSizing: 'border-box',
-            },
-          }}
-          variant="permanent"
-          anchor="left"
-          
-        >
-          <Divider />
-          <List>
-            <ListItem button key="Database Configuration">
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Database Configuration" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Access lists">
-                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Access lists" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Debug">
-                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Debug" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Info" onClick={() => window.location.href = '/settings/info'}>
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Info" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-
-          </List>
-        </Drawer>
+        <AppBarFull />
+        <SidebarSettings />
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
         >
           <Toolbar />
-        <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
-          System Information
-        </Typography>
-        <DashboardInfo />
+          <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
+            System Information
+          </Typography>
+          <DashboardInfo />
         </Box>
       </Box>
     </ThemeProvider>
diff --git a/src/Settings/SettingsMain.js b/src/Settings/SettingsMain.js
index 8ad025d..46a3ba7 100644
--- a/src/Settings/SettingsMain.js
+++ b/src/Settings/SettingsMain.js
@@ -1,51 +1,21 @@
 import React, { useState } from 'react';
 import { 
   Box,
-  ListItem,
-  ListItemText,
-  List,
-  Drawer,
-  IconButton,
-  Divider,
   CssBaseline,
-  AppBar,
   Toolbar,
   Typography,
-  Menu,
-  MenuItem,
   Switch,
   FormControlLabel
-  
 } from '@mui/material';
-import PeopleIcon from '@mui/icons-material/PeopleOutline';
-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 AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
-import InfoIcon from '@mui/icons-material/InfoOutlined';
-import UpdateIcon from '@mui/icons-material/SystemUpdateAltOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
-import deleteToken from '../core/deleteToken';
-
-
+import { SidebarSettings } from '../widgets/Sidebar';
+import { AppBarFull } from '../widgets/AppBar';
 import {toggleDeveloperMode, getDeveloperMode } from '../core/configEdit';
 
-const drawerWidth = 240;
 
 export default function SettingsMain() {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const openMenu = Boolean(anchorEl);
-  let [developerMode, setDeveloperMode] = useState(getDeveloperMode());
-
-  const handleMenuClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
+  const [developerMode, setDeveloperMode] = useState(getDeveloperMode());
 
   const handleDeveloperModeChange = (e) => {
     setDeveloperMode(!developerMode);
@@ -56,91 +26,8 @@ export default function SettingsMain() {
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-          <Toolbar>
-            <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-              Admin Dashboard
-            </Typography>
-            <IconButton
-              color="inherit"
-              onClick={handleMenuClick}
-              sx={{ transform: 'scale(1.2)' }}
-            >
-              <AccountCircleIcon />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={openMenu}
-              onClose={handleMenuClose}
-            >
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
-                  <DashboardIcon sx={{ marginRight: 2 }} />
-                 Dashboard
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                 Profile
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                My account
-              </MenuItem>
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
-                  <SettingsIcon sx={{ marginRight: 2 }} />
-                Settings
-              </MenuItem>
-              <MenuItem onClick={() => { 
-                handleMenuClose(); 
-                deleteToken(); 
-                window.location.reload();
-              }}>
-                  <LogoutIcon sx={{ marginRight: 2 }} />
-                Logout
-              </MenuItem>
-            </Menu>
-          </Toolbar>
-        </AppBar>
-        <Drawer
-          sx={{
-            width: drawerWidth,
-            flexShrink: 0,
-            '& .MuiDrawer-paper': {
-              width: drawerWidth,
-              bgcolor: 'secondary.main',
-              boxSizing: 'border-box',
-            },
-          }}
-          variant="permanent"
-          anchor="left"
-          
-        >
-          <Divider />
-          <List>
-            <ListItem button key="Database Configuration" selected={window.location.pathname === '/settings'}>
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Database Configuration" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Access lists" selected={window.location.pathname === '/settings/access'}>
-                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Access lists" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Update" selected={window.location.pathname === '/settings/update'}>
-                <UpdateIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Update" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Info" selected={window.location.pathname === '/settings/info'}>
-                <InfoIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Info" sx={{ color: '#FFFFFF' }} onClick={() => { window.location.href = '/settings/info'; }}/>
-            </ListItem>
-            {getDeveloperMode() && (
-              <ListItem button key="Debug" selected={window.location.pathname === '/settings/debug'}>
-                  <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-                <ListItemText primary="Debug" sx={{ color: '#FFFFFF' }} />
-              </ListItem>
-            )}
-
-          </List>
-        </Drawer>
+        <AppBarFull />
+        <SidebarSettings />
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
diff --git a/src/Terminal/TerminalPage.js b/src/Terminal/TerminalPage.js
index b061275..24bf6f5 100644
--- a/src/Terminal/TerminalPage.js
+++ b/src/Terminal/TerminalPage.js
@@ -1,132 +1,23 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { 
   Box,
-  ListItem,
-  ListItemText,
-  List,
-  Drawer,
-  IconButton,
-  Divider,
   CssBaseline,
-  AppBar,
   Toolbar,
-  Typography,
-  Menu,
-  MenuItem,
 } from '@mui/material';
-import PeopleIcon from '@mui/icons-material/PeopleOutline';
-import DashboardIcon from '@mui/icons-material/DashboardOutlined';
-import BarChartIcon from '@mui/icons-material/PieChartOutlined';
-import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
-import SettingsIcon from '@mui/icons-material/SettingsOutlined';
-import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
-import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
-import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
-import deleteToken from '../core/deleteToken';
 import { Terminal } from 'xterm';
 import 'xterm/css/xterm.css';
-
-
-const drawerWidth = 240;
+import { SidebarMain } from '../widgets/Sidebar';
+import { AppBarFull } from '../widgets/AppBar';
 
 export default function TerminalPage() {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const openMenu = Boolean(anchorEl);
-
-  const handleMenuClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
   return (
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-          <Toolbar>
-            <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-              Admin Dashboard
-            </Typography>
-            <IconButton
-              color="inherit"
-              onClick={handleMenuClick}
-              sx={{ transform: 'scale(1.2)' }}
-            >
-              <AccountCircleIcon />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={openMenu}
-              onClose={handleMenuClose}
-            >
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                 Profile
-              </MenuItem>
-              <MenuItem onClick={handleMenuClose}>
-                  <AccountCircleIcon sx={{ marginRight: 2 }} />
-                My account
-              </MenuItem>
-              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
-                  <SettingsIcon sx={{ marginRight: 2 }} />
-                Settings
-              </MenuItem>
-              <MenuItem onClick={() => { 
-                handleMenuClose(); 
-                deleteToken(); 
-                window.location.reload();
-              }}>
-                  <LogoutIcon sx={{ marginRight: 2 }} />
-                Logout
-              </MenuItem>
-            </Menu>
-          </Toolbar>
-        </AppBar>
-        <Drawer
-          sx={{
-            width: drawerWidth,
-            flexShrink: 0,
-            '& .MuiDrawer-paper': {
-              width: drawerWidth,
-              bgcolor: 'secondary.main',
-              boxSizing: 'border-box',
-            },
-          }}
-          variant="permanent"
-          anchor="left"
-          
-        >
-          <Divider />
-          <List>
-            <ListItem button key="Dashboard" onClick={() => window.location.href = '/dashboard'}>
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Users">
-                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Reports">
-                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Server Configuration">
-                <ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-          <ListItem button key="Terminal" onClick={() => window.location.href = '/dashboard/console'}>
-              <TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-            <ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
-          </ListItem>
-
-
-          </List>
-        </Drawer>
+        <AppBarFull />
+        <SidebarMain />
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
diff --git a/src/metadata.json b/src/metadata.json
index a985f65..cdb01f7 100644
--- a/src/metadata.json
+++ b/src/metadata.json
@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":0,"buildRevision":15,"buildTag":"DEV"}
\ No newline at end of file
+{"buildMajor":1,"buildMinor":0,"buildRevision":16,"buildTag":"DEV"}
diff --git a/src/widgets/AppBar.js b/src/widgets/AppBar.js
new file mode 100644
index 0000000..eeed9b3
--- /dev/null
+++ b/src/widgets/AppBar.js
@@ -0,0 +1,90 @@
+import { AppBar, Toolbar, Typography } from "@mui/material";
+import React from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "../theme";
+import { useState } from "react";
+import { IconButton, Menu, MenuItem } from "@mui/material";
+import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
+import DashboardIcon from '@mui/icons-material/DashboardOutlined';
+import SettingsIcon from '@mui/icons-material/SettingsOutlined';
+import LogoutIcon from '@mui/icons-material/LogoutOutlined';
+import deleteToken from "../core/deleteToken";
+
+const drawerWidth = 240;
+
+export const AppBarLimited = () => {
+    return (
+        <ThemeProvider theme={theme}>
+            <AppBar position="static">
+                <Toolbar>
+                    <Typography variant="h6" sx={{ flexGrow: 1 }}>
+                        Admin Dashboard
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+        </ThemeProvider>
+    )
+}
+
+export const AppBarFull = () => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const openMenu = Boolean(anchorEl);
+
+    const handleMenuClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    
+    const handleMenuClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <ThemeProvider theme={theme}>
+            <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
+            <Toolbar>
+                <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
+                Admin Dashboard
+                </Typography>
+                <IconButton
+                color="inherit"
+                onClick={handleMenuClick}
+                sx={{ transform: 'scale(1.2)' }}
+                >
+                <AccountCircleIcon />
+                </IconButton>
+                <Menu
+                anchorEl={anchorEl}
+                open={openMenu}
+                onClose={handleMenuClose}
+                >
+                <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
+                    <DashboardIcon sx={{ marginRight: 2 }} />
+                    Dashboard
+                </MenuItem>
+                <MenuItem onClick={handleMenuClose}>
+                    <AccountCircleIcon sx={{ marginRight: 2 }} />
+                    Profile
+                </MenuItem>
+                <MenuItem onClick={handleMenuClose}>
+                    <AccountCircleIcon sx={{ marginRight: 2 }} />
+                    My account
+                </MenuItem>
+                <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
+                    <SettingsIcon sx={{ marginRight: 2 }} />
+                    Settings
+                </MenuItem>
+                <MenuItem onClick={() => { 
+                    handleMenuClose(); 
+                    deleteToken(); 
+                    window.location.reload();
+                }}>
+                    <LogoutIcon sx={{ marginRight: 2 }} />
+                    Logout
+                </MenuItem>
+                </Menu>
+            </Toolbar>
+        </AppBar>
+        </ThemeProvider>
+        
+    )
+}
diff --git a/src/widgets/ProgressBar.js b/src/widgets/ProgressBar.js
index f61c68f..3102945 100644
--- a/src/widgets/ProgressBar.js
+++ b/src/widgets/ProgressBar.js
@@ -1,8 +1,8 @@
 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';
+import { AppBarFull } from './AppBar';
 
 const ProgressBar = () => {
   const [progress, setProgress] = useState(0);
@@ -25,13 +25,7 @@ const ProgressBar = () => {
 
   return (
     <ThemeProvider theme={theme}>
-        <AppBar position="static">
-        <Toolbar>
-          <Typography variant="h6" sx={{ flexGrow: 1 }}>
-            Admin Dashboard
-          </Typography>
-        </Toolbar>
-      </AppBar>
+        <AppBarFull />
         <Container maxWidth="sm" sx={{ 
             mt: 4,
             display: 'flex',
diff --git a/src/widgets/Sidebar.js b/src/widgets/Sidebar.js
new file mode 100644
index 0000000..0146d6b
--- /dev/null
+++ b/src/widgets/Sidebar.js
@@ -0,0 +1,107 @@
+import { Drawer, Divider, List, ListItem, ListItemText, ThemeProvider } from "@mui/material";
+import React from "react";
+import theme from "../theme";
+import DashboardIcon from '@mui/icons-material/DashboardOutlined';
+import PeopleIcon from '@mui/icons-material/PeopleOutline';
+import UpdateIcon from '@mui/icons-material/SystemUpdateAltOutlined';
+import InfoIcon from '@mui/icons-material/InfoOutlined';
+import BarChartIcon from '@mui/icons-material/BarChartOutlined';
+import { getDeveloperMode } from "../core/configEdit";
+import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
+import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
+
+const drawerWidth = 240;
+
+export const SidebarSettings = () => {
+    return (
+        <ThemeProvider theme={theme}>
+            <Drawer
+          sx={{
+            width: drawerWidth,
+            flexShrink: 0,
+            '& .MuiDrawer-paper': {
+              width: drawerWidth,
+              bgcolor: 'secondary.main',
+              boxSizing: 'border-box',
+            },
+          }}
+          variant="permanent"
+          anchor="left"
+          
+        >
+          <Divider />
+          <List>
+            <ListItem button key="Database Configuration" selected={window.location.pathname === '/settings'}>
+                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
+              <ListItemText primary="Database Configuration" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Access lists" selected={window.location.pathname === '/settings/access'}>
+                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Access lists" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Update" selected={window.location.pathname === '/settings/update'}>
+                <UpdateIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Update" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Info" selected={window.location.pathname === '/settings/info'}>
+                <InfoIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Info" sx={{ color: '#FFFFFF' }} onClick={() => { window.location.href = '/settings/info'; }}/>
+            </ListItem>
+            {getDeveloperMode() && (
+              <ListItem button key="Debug" selected={window.location.pathname === '/settings/debug'}>
+                  <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+                <ListItemText primary="Debug" sx={{ color: '#FFFFFF' }} />
+              </ListItem>
+            )}
+
+          </List>
+        </Drawer>
+        </ThemeProvider>
+    )
+}
+
+export const SidebarMain = () => {
+    return (
+        <ThemeProvider theme={theme}>
+            <Drawer
+          sx={{
+            width: drawerWidth,
+            flexShrink: 0,
+            '& .MuiDrawer-paper': {
+              width: drawerWidth,
+              bgcolor: 'secondary.main',
+              boxSizing: 'border-box',
+            },
+          }}
+          variant="permanent"
+          anchor="left"
+        >
+          <Divider />
+          <List>
+            <ListItem button key="Dashboard" onClick={() => window.location.href = '/dashboard'}>
+                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
+              <ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Users">
+                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Reports">
+                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Server Configuration">
+                <ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+          <ListItem button key="Terminal" onClick={() => window.location.href = '/dashboard/console'}>
+              <TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+            <ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
+          </ListItem>
+
+
+          </List>
+        </Drawer>
+        </ThemeProvider>
+    )
+}
diff --git a/src/widgets/WidgetsStatistics.js b/src/widgets/WidgetsStatistics.js
index 0be4918..f22bb90 100644
--- a/src/widgets/WidgetsStatistics.js
+++ b/src/widgets/WidgetsStatistics.js
@@ -32,7 +32,7 @@ export const SystemMon = () => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Box sx={{ 
+      <Box sx={{
         display: 'flex', 
         flexDirection: 'column', 
         alignItems: 'center',
@@ -40,7 +40,9 @@ export const SystemMon = () => {
         bgcolor: 'background.paper',
         borderRadius: 2,
         boxShadow: 3,
-        width: '500px'
+        minWidth: '260px',
+        maxWidth: '500px',
+        width: '100%'
       }}>
         <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
           System Monitor
@@ -121,7 +123,9 @@ export const WebsiteAvailability = () => {
         bgcolor: 'background.paper',
         borderRadius: 2,
         boxShadow: 3,
-        width: '500px'
+        minWidth: '260px',
+        maxWidth: '500px',
+        width: '100%'
       }}>
         <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
           Services Avability