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

added database struct

Browse Source 
updated index.html with minor changes
added fully working logout option
Added Working Settings Page
Added blank option for the Terminal Page
Edited icons and options in Dashboard
Added blanks for subroutes
Added redirect from root to dashboard
This commit is contained in:
SnippetsX 2024-11-03 01:35:38 +03:00
parent 6da8d9f924
commit 1eece4f160
8 changed files with 193 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
database.sql Normal file
View File

@ -0,0 +1,8 @@
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
password_hash VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

2
public/index.html
View File

@ -8,7 +8,7 @@
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<title>LCSA Admin Dashboard</title>
</head>
<body>
<div id="root"></div>

2
public/manifest.json
View File

@ -1,5 +1,5 @@
{
"short_name": "React App",
"short_name": "LCSA Admin Dashboard",
"name": "Create React App Sample",
"icons": [
{

10
src/App.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import Login from './Login/LoginPage';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Preferences from './Preferences/Preferences'
import { BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom';
import Settings from './Settings/SettingsMain'
import Dashboard from './Dashboard/DashboardMain'
import './App.css'
import useToken from './core/useToken';
@ -17,8 +17,12 @@ function App() {
return (
<Router>
<Routes>
<Route path='/' element={<Navigate to='/dashboard' />} />
<Route path="/dashboard" element={<Dashboard/>} />
<Route path="/preferences" element={<Preferences/>} />
{/* <Route path="/dashboard/configuration" element={<Settings />} />
<Route path="/dashboard/users" element={<Users />} />
<Route path="/dashboard/reports" element={<Reports />} /> */}
<Route path="/settings" element={<Settings/>} />
</Routes>
</Router>
);

25
src/Dashboard/DashboardMain.js
View File

@ -17,12 +17,15 @@ import {
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 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';
const drawerWidth = 240;
@ -87,11 +90,15 @@ export default function DashboardMain() {
<AccountCircleIcon sx={{ marginRight: 2 }} />
My account
</MenuItem>
<MenuItem onClick={handleMenuClose}>
<MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
<SettingsIcon sx={{ marginRight: 2 }} />
Settings
</MenuItem>
<MenuItem onClick={handleMenuClose}>
<MenuItem onClick={() => {
handleMenuClose();
deleteToken();
window.location.reload();
}}>
<LogoutIcon sx={{ marginRight: 2 }} />
Logout
</MenuItem>
@ -127,14 +134,16 @@ export default function DashboardMain() {
<BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Settings">
<SettingsIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Settings" sx={{ color: '#FFFFFF' }} />
<ListItem button key="Server Configuration">
<ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Preferences">
<SettingsIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Preferences" sx={{ color: '#FFFFFF' }} />
<ListItem button key="Terminal">
<TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
</ListItem>
</List>
</Drawer>
<Box

40
src/Preferences/Preferences.js
View File

@ -1,40 +0,0 @@
import React, { useState } from 'react';
import {
Container,
TextField,
Button,
Typography,
Box,
} from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
import theme from '../theme';
const PreferencesPageWithTheme = () => (
<ThemeProvider theme={theme}>
<PreferencesPage />
</ThemeProvider>
);
const PreferencesPage = () => {
return (
<>
<Box
sx={{
width: '100%',
backgroundColor: '#4e00ba',
color: 'white',
padding: 2,
textAlign: 'bottom',
}}
>
<Typography variant="h6">
Admin Dashboard
</Typography>
</Box>
</>
)
}
export default PreferencesPageWithTheme;

152
src/Settings/SettingsMain.js Normal file
View File

@ -0,0 +1,152 @@
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 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';
const drawerWidth = 240;
export default function DashboardMain() {
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={{ zIndex: (theme) => theme.zIndex.drawer + 1, width: `calc(100% - ${open ? drawerWidth : 0}px)`, ml: `${open ? drawerWidth : 0}px` }}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawer}
edge="start"
sx={{ marginRight: 2 }}
>
<MenuIcon />
</IconButton>
<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="persistent"
anchor="left"
open={open}
>
<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 paragraph>
Welcome to the Settings!
</Typography>
</Box>
</Box>
</ThemeProvider>
);
}

5
src/core/deleteToken.js Normal file
View File

@ -0,0 +1,5 @@
import { useState } from 'react';
export default function deleteToken(){
localStorage.removeItem('token');
};