snippetsx/admin_dashboard_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Refactored all pages available right now for more readability
All checks were successful
Testing Example / build-and-test (push) Successful in 1m57s
Details

Browse Source 
Added Sidebar.js where stored all sidebars for this project
Added AppBar.js where stored all appbars for this project
This commit is contained in:
SnippetsX 2024-11-22 22:20:29 +03:00
parent 5b50fc362e
commit 65e8404592
11 changed files with 242 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.js
View File

@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-do
import SettingsMain from './Settings/SettingsMain' import SettingsMain from './Settings/SettingsMain'
import SettingsInfo from './Settings/SettingsInfo' import SettingsInfo from './Settings/SettingsInfo'
import Dashboard from './Dashboard/DashboardMain' import Dashboard from './Dashboard/DashboardMain'
import DashboardUsers from './Dashboard/DashboardUsers'
import ProgressBar from './widgets/ProgressBar' import ProgressBar from './widgets/ProgressBar'
import metadata from './metadata.json'; import metadata from './metadata.json';
@ -24,8 +25,8 @@ function App() {
<Routes> <Routes>
<Route path='/' element={<Navigate to='/dashboard' />} /> <Route path='/' element={<Navigate to='/dashboard' />} />
<Route path="/dashboard" element={<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={<Reports />} /> */} <Route path="/dashboard/reports" element={<Reports />} /> */}
<Route path="/dashboard/console" element={<Terminal/>} /> <Route path="/dashboard/console" element={<Terminal/>} />
<Route path="/settings" element={<SettingsMain/>} /> <Route path="/settings" element={<SettingsMain/>} />

122
src/Dashboard/DashboardMain.js
View File

@ -1,134 +1,22 @@
import React, { useState } from 'react'; import React from 'react';
import { import {
Box, Box,
ListItem,
ListItemText,
List,
Drawer,
IconButton,
Divider,
CssBaseline, CssBaseline,
AppBar,
Toolbar, Toolbar,
Typography,
Menu,
MenuItem,
} from '@mui/material'; } 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 { ThemeProvider } from '@mui/material/styles';
import theme from '../theme'; import theme from '../theme';
import deleteToken from '../core/deleteToken';
import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics' import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
import { SidebarMain } from '../widgets/Sidebar';
import { AppBarFull } from '../widgets/AppBar';
const drawerWidth = 240;
export default function DashboardMain() { export default function DashboardMain() {
const [anchorEl, setAnchorEl] = useState(null);
const openMenu = Boolean(anchorEl);
const handleMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> <CssBaseline />
<AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}> <AppBarFull />
<Toolbar> <SidebarMain />
<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 <Box
component="main" component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }} sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}

146
src/Dashboard/DashboardUsers.js
View File

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

123
src/Settings/SettingsInfo.js
View File

@ -1,138 +1,33 @@
import React, { useState } from 'react'; import React from 'react';
import { import {
Box, Box,
ListItem,
ListItemText,
List,
Drawer,
IconButton,
Divider,
CssBaseline, CssBaseline,
AppBar,
Toolbar, Toolbar,
Typography, Typography,
Menu,
MenuItem,
} from '@mui/material'; } 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 { ThemeProvider } from '@mui/material/styles';
import theme from '../theme'; import theme from '../theme';
import deleteToken from '../core/deleteToken';
import '../metadata.json' import '../metadata.json'
import { DashboardInfo } from '../widgets/WidgetStatic' import { DashboardInfo } from '../widgets/WidgetStatic'
import { SidebarSettings } from '../widgets/Sidebar';
const drawerWidth = 240; import { AppBarFull } from '../widgets/AppBar';
export default function SettingsInfo() { export default function SettingsInfo() {
const [anchorEl, setAnchorEl] = useState(null);
const openMenu = Boolean(anchorEl);
const handleMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> <CssBaseline />
<AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}> <AppBarFull />
<Toolbar> <SidebarSettings />
<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 <Box
component="main" component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }} sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
> >
<Toolbar /> <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>
</Box> </Box>
</ThemeProvider> </ThemeProvider>

123
src/Settings/SettingsMain.js
View File

@ -1,51 +1,21 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Box, Box,
ListItem,
ListItemText,
List,
Drawer,
IconButton,
Divider,
CssBaseline, CssBaseline,
AppBar,
Toolbar, Toolbar,
Typography, Typography,
Menu,
MenuItem,
Switch, Switch,
FormControlLabel FormControlLabel
} from '@mui/material'; } 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 { ThemeProvider } from '@mui/material/styles';
import theme from '../theme'; 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'; import {toggleDeveloperMode, getDeveloperMode } from '../core/configEdit';
const drawerWidth = 240;
export default function SettingsMain() { export default function SettingsMain() {
const [anchorEl, setAnchorEl] = useState(null); const [developerMode, setDeveloperMode] = useState(getDeveloperMode());
const openMenu = Boolean(anchorEl);
let [developerMode, setDeveloperMode] = useState(getDeveloperMode());
const handleMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
const handleDeveloperModeChange = (e) => { const handleDeveloperModeChange = (e) => {
setDeveloperMode(!developerMode); setDeveloperMode(!developerMode);
@ -56,91 +26,8 @@ export default function SettingsMain() {
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> <CssBaseline />
<AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}> <AppBarFull />
<Toolbar> <SidebarSettings />
<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>
<Box <Box
component="main" component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }} sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}

119
src/Terminal/TerminalPage.js
View File

@ -1,132 +1,23 @@
import React, { useState } from 'react'; import React from 'react';
import { import {
Box, Box,
ListItem,
ListItemText,
List,
Drawer,
IconButton,
Divider,
CssBaseline, CssBaseline,
AppBar,
Toolbar, Toolbar,
Typography,
Menu,
MenuItem,
} from '@mui/material'; } 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 { ThemeProvider } from '@mui/material/styles';
import theme from '../theme'; import theme from '../theme';
import deleteToken from '../core/deleteToken';
import { Terminal } from 'xterm'; import { Terminal } from 'xterm';
import 'xterm/css/xterm.css'; import 'xterm/css/xterm.css';
import { SidebarMain } from '../widgets/Sidebar';
import { AppBarFull } from '../widgets/AppBar';
const drawerWidth = 240;
export default function TerminalPage() { export default function TerminalPage() {
const [anchorEl, setAnchorEl] = useState(null);
const openMenu = Boolean(anchorEl);
const handleMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> <CssBaseline />
<AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}> <AppBarFull />
<Toolbar> <SidebarMain />
<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 <Box
component="main" component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }} sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}

2
src/metadata.json
View File

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

90
src/widgets/AppBar.js Normal file
View File

@ -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>
)
}

10
src/widgets/ProgressBar.js
View File

@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Box, LinearProgress, Typography, Container } from '@mui/material'; import { Box, LinearProgress, Typography, Container } from '@mui/material';
import theme from '../theme'; import theme from '../theme';
import { AppBar, Toolbar } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles'; import { ThemeProvider } from '@mui/material/styles';
import { AppBarFull } from './AppBar';
const ProgressBar = () => { const ProgressBar = () => {
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
@ -25,13 +25,7 @@ const ProgressBar = () => {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<AppBar position="static"> <AppBarFull />
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Admin Dashboard
</Typography>
</Toolbar>
</AppBar>
<Container maxWidth="sm" sx={{ <Container maxWidth="sm" sx={{
mt: 4, mt: 4,
display: 'flex', display: 'flex',

107
src/widgets/Sidebar.js Normal file
View File

@ -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>
)
}

8
src/widgets/WidgetsStatistics.js
View File

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