Added version

Added info
removed test js
Generation buildNum

generate-buildno.js

@@ -0,0 +1,11 @@
+var fs = require('fs');
+console.log('Incrementing build number...');
+fs.readFile('src/metadata.json',function(err,content) {
+    if (err) throw err;
+    var metadata = JSON.parse(content);
+    metadata.buildRevision = metadata.buildRevision + 1;
+    fs.writeFile('src/metadata.json',JSON.stringify(metadata),function(err){
+        if (err) throw err;
+        console.log(`Current build number: ${metadata.buildMajor}.${metadata.buildMinor}.${metadata.buildRevision} ${metadata.buildTag}`);
+    })
+});

package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^6.1.3",
         "@mui/material": "^6.1.3",
+        "@mui/x-tree-view": "^7.22.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -3491,6 +3492,64 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/@mui/x-internals": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.21.0.tgz",
+      "integrity": "sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/utils": "^5.16.6 || ^6.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/x-tree-view": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.22.1.tgz",
+      "integrity": "sha512-EdFuzAgHn+/b++oNbm8JuXiF4MbRW+Dg70+MNbp2fQi8U1J38kg1hwvIFQ6Wi2AEt3Dv9euaPMFJM+a/4pk5Ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/utils": "^5.16.6 || ^6.0.0",
+        "@mui/x-internals": "7.21.0",
+        "@types/react-transition-group": "^4.4.11",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",

package.json

@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.3",
     "@mui/material": "^6.1.3",
+    "@mui/x-tree-view": "^7.22.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -22,8 +23,8 @@
     "xterm": "^5.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "node generate-buildno.js && react-scripts start",
-    "build": "react-scripts build",
+    "build": "node generate-buildno.js && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import Login from './Login/LoginPage';
 import { BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom';
-import Settings from './Settings/SettingsMain'
+import SettingsMain from './Settings/SettingsMain'
+import SettingsInfo from './Settings/SettingsInfo'
 import Dashboard from './Dashboard/DashboardMain'
+
 import './App.css'
 import useToken from './core/useToken';
 import Terminal from './Terminal/TerminalPage'
@@ -24,7 +26,8 @@ function App() {
         <Route path="/dashboard/users" element={<Users />} />
         <Route path="/dashboard/reports" element={<Reports />} /> */}
         <Route path="/dashboard/console" element={<Terminal/>} />
-        <Route path="/settings" element={<Settings/>} />
+        <Route path="/settings" element={<SettingsMain/>} />
+        <Route path="/settings/info" element={<SettingsInfo/>} />
       </Routes>
     </Router>
   );

src/Dashboard/DashboardMain.js

@@ -26,6 +26,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
 import deleteToken from '../core/deleteToken';
 import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 
 const drawerWidth = 240;
 

src/Settings/SettingsInfo.js

@@ -0,0 +1,147 @@
+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 MenuIcon from '@mui/icons-material/Menu';
+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;
+
+export default function SettingsInfo() {
+  const [open, setOpen] = useState(false);
+  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);
+  };
+
+  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>
+
+          </List>
+        </Drawer>
+        <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 />
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+}

src/metadata.json

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

src/widgets/WidgetStatic.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { 
+  Box,
+  Typography,
+} from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';
+import metadata from '../metadata.json';
+
+export const DashboardInfo = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        alignItems: 'center',
+        p: 3,
+        bgcolor: 'background.paper',
+        borderRadius: 2,
+        boxShadow: 3,
+      }}>
+        <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
+          Dashboard Info
+        </Typography>
+        <Typography paragraph>
+          Current Build: {metadata.buildMajor}.{metadata.buildMinor}.{metadata.buildRevision} {metadata.buildTag}
+        </Typography>
+      </Box>
+    </ThemeProvider>
+  );
+}
+

test.js

@@ -1 +0,0 @@
-console.log(JSON.parse('{"token":"admin"}'))