Add DashboardReports and WidgetReport components; update AppBar title with build tag

database.sql

@@ -1,10 +1,11 @@
 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 (username, password_hash, perms) 
-VALUES ('admin', 'ecd71870d1963316a97e3ac3408c9835ad8cf0f3c1bc703527c30265534f75ae', 'admin');
+INSERT INTO users (token, username, password_hash, perms) 
+VALUES ('be01e88cc202593292d503e4ed9e51e9eb217093662efbb145030ba51b97c22a','admin', 'ecd71870d1963316a97e3ac3408c9835ad8cf0f3c1bc703527c30265534f75ae', 'admin');

src/App.js

@@ -11,6 +11,7 @@ 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,8 +27,8 @@ function App() {
         <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/reports" element={<Reports />} /> */} 
+        {/* <Route path="/dashboard/configuration" element={<Settings />} /> */}
+        <Route path="/dashboard/reports" element={<DashboardReports />} />
         <Route path="/dashboard/console" element={<Terminal/>} />
         <Route path="/settings" element={<SettingsMain/>} />
         <Route path="/settings/info" element={<SettingsInfo/>} />

src/Dashboard/DashboardReports.js

@@ -0,0 +1,33 @@
+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/metadata.json

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

src/widgets/AppBar.js

@@ -9,6 +9,7 @@ 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;
 
@@ -43,7 +44,10 @@ export const AppBarFull = () => {
             <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
             <Toolbar>
                 <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-                Admin Dashboard
+                {['DEV', 'ALPHA', 'BETA'].includes(metadata.buildTag) ? 
+                  `Admin Dashboard ${metadata.buildTag}` :
+                  'Admin Dashboard'
+                }
                 </Typography>
                 <IconButton
                 color="inherit"

src/widgets/WidgetReport.js

@@ -0,0 +1,22 @@
+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>
+  );
+}