.gitea/workflows/build.yaml

@@ -3,7 +3,6 @@ on:
   push:
     branches:
       - master
-      - dev
 
 jobs:
   build-and-test:
@@ -33,11 +32,6 @@ jobs:
       - name: Build app
         run: npm run build
 
-      - name: Get developer token
-        run: |
-          TOKEN=$(jq -r '.token' src/authtoken.json)
-          echo "TOKEN=$TOKEN" >> $GITHUB_ENV
-
       - name: Upload artifact
         uses: actions/upload-artifact@v3
         with:
@@ -65,25 +59,9 @@ jobs:
       - name: Create Release
         uses: https://gitea.com/actions/gitea-release-action@v1
         with:
-          body: |
-            ## Release Notes
-            
-            This is an automated release of version ${{ env.VERSION }}
-            
-            ### Changes
-            - Built from latest main branch
-            - Includes:
-            ${{ github.event.head_commit.message }}
-            
-            ### Developer Token
-            - ${{ env.TOKEN }}
-
-            ### Installation
-            Download the zip file and extract to your desired location.
           token: ${{ secrets.GITHUB_TOKEN }}
           tag_name: v${{ env.VERSION }}
           name: Release v${{ env.VERSION }}
-
           files: |
             release-artifacts/admin_dashboard-${{ env.VERSION }}.zip
           draft: false

.gitignore

@@ -13,11 +13,7 @@
 # production
 /build
 */build
-/src/authtoken.json
-<<<<<<< HEAD
-=======
 
->>>>>>> dev
 # misc
 .DS_Store
 .env.local

README.md

@@ -1,10 +1,6 @@
 # Admin Dashboard writed on React
-![Gitea Workflow Badge](https://git.lcsa.ru/snippetsx/admin_dashboard_react/actions/workflows/build.yaml/badge.svg)
-![Static Badge](https://img.shields.io/badge/Using_with-LCSA-%23006d75)
-![Static Badge](https://img.shields.io/badge/Created_by-SnippetsX-8A2BE2) \
- \
 This project is a simple admin panel designed for managing servers. \
-It utilizes Material UI for the user interface components.
+It utilizes Material UI for the user interface components. \
 ## Screenshots
 ![Image](/screenshots/screenshot1.png)
 ![Image](/screenshots/screenshot2.png)
@@ -22,3 +18,6 @@ npm install
 npm run build
 ```
 You can also download it from Releases page 
+
+![Static Badge](https://img.shields.io/badge/Using_with-LCSA-%23006d75)
+![Static Badge](https://img.shields.io/badge/Created_by-SnippetsX-8A2BE2)

database.sql

@@ -1,11 +1,10 @@
 CREATE TABLE users (
     id INT AUTO_INCREMENT PRIMARY KEY,
-    token VARCHAR(255) NOT NULL,
     username VARCHAR(50) NOT NULL UNIQUE,
     password_hash VARCHAR(255) NOT NULL,
     perms VARCHAR(255) NOT NULL
 );
 
 -- Test user with admin permissions
-INSERT INTO users (token, username, password_hash, perms) 
+INSERT INTO users (username, password_hash, perms) 
-VALUES ('be01e88cc202593292d503e4ed9e51e9eb217093662efbb145030ba51b97c22a','admin', 'ecd71870d1963316a97e3ac3408c9835ad8cf0f3c1bc703527c30265534f75ae', 'admin');
+VALUES ('admin', 'ecd71870d1963316a97e3ac3408c9835ad8cf0f3c1bc703527c30265534f75ae', 'admin');

generatetoken.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 
-const filePath = 'src/authtoken.json';
+const filePath = 'authtoken.json';
 
 if (!fs.existsSync(filePath)) {
     const randomToken = (Math.random().toString(36).substring(2, 10));

public/robots.txt

@@ -1,3 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow: /
+Disallow:

src/App.js

@@ -4,14 +4,12 @@ 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';
 
 import './App.css'
 import useToken from './core/useToken';
 import Terminal from './Terminal/TerminalPage'
-import DashboardReports from './Dashboard/DashboardReports';
 
 
 function App() {
@@ -26,9 +24,9 @@ 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/configuration" element={<Settings />} /> */}
+        <Route path="/dashboard/users" element={<Users />} />
-        <Route path="/dashboard/reports" element={<DashboardReports />} />
+        <Route path="/dashboard/reports" element={<Reports />} /> */}
         <Route path="/dashboard/console" element={<Terminal/>} />
         <Route path="/settings" element={<SettingsMain/>} />
         <Route path="/settings/info" element={<SettingsInfo/>} />

src/Dashboard/DashboardMain.js

@@ -1,22 +1,134 @@
-import React from 'react';
+import React, { useState } 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);
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarFull />
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-        <SidebarMain />
+          <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>
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}

src/Dashboard/DashboardReports.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { 
-  Box,
-  CssBaseline,
-  Toolbar,
-} from '@mui/material';
-import { ThemeProvider } from '@mui/material/styles';
-import theme from '../theme';
-import { SidebarMain } from '../widgets/Sidebar';
-import { AppBarFull } from '../widgets/AppBar';
-import  WidgetReport  from '../widgets/WidgetReport';
-
-export default function DashboardReports() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Box sx={{ display: 'flex' }}>
-        <CssBaseline />
-        <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 }}>
-            <WidgetReport />
-          </Box>
-        </Box>
-      </Box>
-    </ThemeProvider>
-  );
-}

src/Dashboard/DashboardUsers.js

@@ -1,31 +1,159 @@
-import React from 'react';
+import React, { useState } 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 { SidebarMain } from '../widgets/Sidebar';
+import deleteToken from '../core/deleteToken';
-import { AppBarFull } from '../widgets/AppBar';
+import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
 
+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 />
-        <AppBarFull />
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-        <SidebarMain />
+          <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>
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
         >
           <Toolbar />
-          <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
+          {/* <Typography variant="h4">Hi {localStorage.getItem('token')}</Typography> */}
-            Users Demo Page
+          <Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
-          </Typography>
+            <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>
         </Box>
       </Box>
     </ThemeProvider>

src/Settings/SettingsDatabaseConfig.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { ThemeProvider, Box, Typography } from "@mui/material";
-import { theme } from "../theme";
-
-
-const SettingsDatabaseConfig = () => {
-    return (
-        <ThemeProvider theme={theme}>
-          <Box sx={{ display: 'flex' }}>
-            <CssBaseline />
-            <AppBarFull />
-            <SidebarSettings />
-            <Box
-              component="main"
-              sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
-            >
-              <Toolbar />
-              <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
-                Database Configuration
-              </Typography>
-              
-            </Box>
-          </Box>
-        </ThemeProvider>
-      );
-};
-
-export default SettingsDatabaseConfig;

src/Settings/SettingsInfo.js

@@ -1,33 +1,138 @@
-import React from 'react';
+import React, { useState } 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'
-import { SidebarSettings } from '../widgets/Sidebar';
+
-import { AppBarFull } from '../widgets/AppBar';
+const drawerWidth = 240;
 
 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 />
-        <AppBarFull />
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-        <SidebarSettings />
+          <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>
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
         >
           <Toolbar />
-          <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
+        <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
-            System Information
+          System Information
-          </Typography>
+        </Typography>
-          <DashboardInfo />
+        <DashboardInfo />
         </Box>
       </Box>
     </ThemeProvider>

src/Settings/SettingsMain.js

@@ -1,24 +1,51 @@
 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 { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
-import { SidebarSettings } from '../widgets/Sidebar';
+import deleteToken from '../core/deleteToken';
-import { AppBarFull } from '../widgets/AppBar';
+
+
 import {toggleDeveloperMode, getDeveloperMode } from '../core/configEdit';
 
+const drawerWidth = 240;
 
 export default function SettingsMain() {
-  const [developerMode, setDeveloperMode] = useState(getDeveloperMode());
+  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 handleDeveloperModeChange = (e) => {
-    setDeveloperMode(!developerMode);
+    setDeveloperMode(e.target.checked);
     toggleDeveloperMode();
   };
 
@@ -26,8 +53,83 @@ export default function SettingsMain() {
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarFull />
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-        <SidebarSettings />
+          <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>
+            {getDeveloperMode() && (
+              <ListItem button key="Debug">
+                  <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+                <ListItemText primary="Debug" sx={{ color: '#FFFFFF' }} />
+              </ListItem>
+            )}
+
+          </List>
+        </Drawer>
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
@@ -53,7 +155,10 @@ export default function SettingsMain() {
               control={
                 <Switch
                   checked={developerMode}
-                  onChange={handleDeveloperModeChange}
+                  onChange={() => {
+                    setDeveloperMode(!developerMode);
+                    toggleDeveloperMode()
+                  }}
                 />
               }
               label="Developer Mode"

src/Terminal/TerminalPage.js

@@ -1,23 +1,132 @@
-import React from 'react';
+import React, { useState } 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';
-import { SidebarMain } from '../widgets/Sidebar';
+
-import { AppBarFull } from '../widgets/AppBar';
+
+const drawerWidth = 240;
 
 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 />
-        <AppBarFull />
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
-        <SidebarMain />
+          <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>
         <Box
           component="main"
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}

src/core/configEdit.js

@@ -65,9 +65,3 @@ export function getDeveloperMode() {
       throw error;
     });
 }
-
-export function getDatabaseConfig() {
-  return getConfig().then(config => config.database);
-}
-
-

src/metadata.json

@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":0,"buildRevision":21,"buildTag":"DEV"}
+{"buildMajor":1,"buildMinor":0,"buildRevision":12,"buildTag":"DEV"}

src/theme.js

@@ -11,10 +11,6 @@ const theme = createTheme({
       warning: {
         main: '#520013'
       }
-      ,
-      action: {
-        hover: '#00271e'
-      }
     },
     
   });

src/widgets/AppBar.js

@@ -1,94 +0,0 @@
-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";
-import metadata from "../metadata.json";
-
-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 }}>
-                {['DEV', 'ALPHA', 'BETA'].includes(metadata.buildTag) ? 
-                  `Admin Dashboard ${metadata.buildTag}` :
-                  '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>
-        
-    )
-}

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,7 +25,13 @@ const ProgressBar = () => {
 
   return (
     <ThemeProvider theme={theme}>
-        <AppBarFull />
+        <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
+            Admin Dashboard
+          </Typography>
+        </Toolbar>
+      </AppBar>
         <Container maxWidth="sm" sx={{ 
             mt: 4,
             display: 'flex',

src/widgets/Sidebar.js

@@ -1,111 +0,0 @@
-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="Main Settings" onClick={() => window.location.href = '/settings'}>
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Main Settings" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Database Configuration" onClick={() => window.location.href = '/settings/database'}>
-                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <ListItemText primary="Database Configuration" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Access lists" onClick={() => window.location.href = '/settings/access'}>
-                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Access lists" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Update" onClick={() => window.location.href = '/settings/update'}>
-                <UpdateIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Update" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Info" onClick={() => window.location.href = '/settings/info'}>
-                <InfoIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Info" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            {getDeveloperMode() && (
-              <ListItem button key="Debug" onClick={() => window.location.href = '/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" onClick={() => window.location.href = '/dashboard/users'}>
-                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Reports" onClick={() => window.location.href = '/dashboard/reports'}>
-                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              <ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
-            </ListItem>
-            <ListItem button key="Server Configuration" onClick={() => window.location.href = '/dashboard/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>
-    )
-}

src/widgets/WidgetReport.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { Box, CssBaseline, Toolbar } from "@mui/material";
-
-import { ThemeProvider } from "@mui/material/styles";
-import theme from "../theme";
-
-
-export default function WidgetReport() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Box sx={{ display: "flex" }}>
-        <CssBaseline />
-        <Box
-          component="main"
-          sx={{ flexGrow: 1, bgcolor: "background.default", p: 3 }}
-        >
-          <Toolbar />
-        </Box>
-      </Box>
-    </ThemeProvider>
-  );
-}

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,9 +40,7 @@ export const SystemMon = () => {
         bgcolor: 'background.paper',
         borderRadius: 2,
         boxShadow: 3,
-        minWidth: '260px',
+        width: '500px'
-        maxWidth: '500px',
-        width: '100%'
       }}>
         <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
           System Monitor
@@ -123,9 +121,7 @@ export const WebsiteAvailability = () => {
         bgcolor: 'background.paper',
         borderRadius: 2,
         boxShadow: 3,
-        minWidth: '260px',
+        width: '500px'
-        maxWidth: '500px',
-        width: '100%'
       }}>
         <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
           Services Avability