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

fully fixed login option for session.

Browse Source 
Updated README
Updated Dashboard main page
Fixed AppBar scrolling
This commit is contained in:
SnippetsX 2024-11-02 01:20:27 +03:00
parent a77f2ed598
commit 6da8d9f924
7 changed files with 183 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -1 +1,17 @@
# admin_dashboard_react
# Admin Dashboard writed on React
This project is a simple admin panel designed for managing servers. \
It utilizes Material UI for the user interface components. \
To run the project, you can download/clone the repository and use these commands to run:
```bash
npm install
npm start
```
or build:
```bash
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)

3
src/App.css
View File

@ -1,3 +0,0 @@
body {
overflow-x: hidden; /* Hide horizontal scrollbar */
}

6
src/App.js
View File

@ -1,12 +1,14 @@
import React, { useState} from 'react';
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 Dashboard from './Dashboard/DashboardMain'
import './App.css'
import useToken from './core/useToken';
function App() {
const [token, setToken] = useState();
const { token, setToken } = useToken();
if(!token){
return <Login setToken={setToken} />

295
src/Dashboard/DashboardMain.js
View File

@ -1,181 +1,152 @@
import React, { useState } from 'react';
import {
Container,
TextField,
Button,
Typography,
Box,
ListItem,
ListItemText,
List,
Drawer,
IconButton,
Divider
Divider,
CssBaseline,
AppBar,
Toolbar,
Typography,
Menu,
MenuItem,
} from '@mui/material';
import ListItemIcon from '@mui/icons-material/List'
import PeopleIcon from'@mui/icons-material/People'
import DashboardIcon from'@mui/icons-material/Dashboard'
import BarChartIcon from'@mui/icons-material/BarChart'
import SettingsIcon from'@mui/icons-material/Settings'
import ChevronLeftIcon from'@mui/icons-material/ChevronLeft'
import MenuIcon from'@mui/icons-material/Menu'
import {
Settings,
} from '@mui/icons-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';
const DashboardPageWithTheme = () => (
<ThemeProvider theme={theme}>
<DashboardPage />
</ThemeProvider>
);
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);
};
const DashboardPage = () => {
const [isMenuHidden, setIsMenuHidden] = useState('');
return (
<>
<Box
sx={{
width: '100%',
backgroundColor: '#4e00ba',
color: 'white',
padding: 2,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Typography variant="h6">
Admin Dashboard
</Typography>
<Button
variant="contained"
color="secondary"
onClick={() => {
// Здесь должна быть логика выхода
// navigate('/login');
}}
>
Выйти
</Button>
</Box>
<Drawer
variant="persistent"
anchor="left"
open={!isMenuHidden}
sx={{
width: 240,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: 240,
boxSizing: 'border-box',
},
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
padding: 2,
justifyContent: 'space-between',
}}
>
<Typography variant="h6">
Меню
</Typography>
<IconButton onClick={() => setIsMenuHidden(true)}>
<ChevronLeftIcon />
</IconButton>
</Box>
<Divider />
<List>
<ListItem button>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Главная" />
</ListItem>
<ListItem button>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText primary="Пользователи" />
</ListItem>
<ListItem button>
<ListItemIcon>
<BarChartIcon />
</ListItemIcon>
<ListItemText primary="Статистика" />
</ListItem>
<ListItem button>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Настройки" />
</ListItem>
</List>
</Drawer>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={() => setIsMenuHidden(false)}
edge="start"
sx={{ marginRight: 2, ...(isMenuHidden && { display: 'none' }) }}
>
<MenuIcon />
</IconButton>
<Container maxWidth="lg">
<Box
sx={{
marginTop: 5,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Typography component="h1" variant="h4" gutterBottom>
Добро пожаловать в панель администратора
</Typography>
<Box sx={{ mt: 4, width: '100%' }}>
<Typography variant="h5" gutterBottom>
Быстрые действия
<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>
<Box sx={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap' }}>
<Button variant="outlined" sx={{ m: 1 }}>Управление пользователями</Button>
<Button variant="outlined" sx={{ m: 1 }}>Статистика</Button>
<Button variant="outlined" sx={{ m: 1 }}>Настройки системы</Button>
</Box>
</Box>
<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}>
<SettingsIcon sx={{ marginRight: 2 }} />
Settings
</MenuItem>
<MenuItem onClick={handleMenuClose}>
<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}
<Box sx={{ mt: 4, width: '100%' }}>
<Typography variant="h5" gutterBottom>
Последние действия
</Typography>
{/* Здесь можно добавить компонент для отображения последних действий */}
</Box>
>
<Divider />
<List>
<ListItem button key="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="Settings">
<SettingsIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Settings" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Preferences">
<SettingsIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Preferences" sx={{ color: '#FFFFFF' }} />
</ListItem>
</List>
</Drawer>
<Box
component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
>
<Toolbar />
<Typography paragraph>
Welcome to the Dashboard!
</Typography>
</Box>
</Container>
<Box sx={{
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
textAlign: 'center',
padding: '10px',
backgroundColor: 'background.paper'
}}>
<Typography variant="body2" color="text.secondary">
© {new Date().getFullYear()} LCSA и SnippetsX. Все права защищены.
</Typography>
</Box>
</>
</ThemeProvider>
);
};
export default DashboardPageWithTheme;
}

22
src/Login/LoginPage.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Container, TextField, Typography, Box } from '@mui/material';
import { Button, Container, TextField, Typography, AppBar, Toolbar, Box } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
import theme from '../theme';
import {loginUser} from './LoginServerSend'
@ -20,19 +20,13 @@ export default function Login({ setToken }) {
return(
<ThemeProvider theme={theme}>
<Box
sx={{
width: '100%',
backgroundColor: '#4e00ba',
color: 'white',
padding: 2,
textAlign: 'center',
}}
>
<Typography variant="h6">
Admin Dashboard
</Typography>
</Box>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Admin Dashboard
</Typography>
</Toolbar>
</AppBar>
<Container component="main" maxWidth="xs">
<Box

18
src/core/useToken.js Normal file
View File

@ -0,0 +1,18 @@
import { useState } from 'react';
export default function useToken() {
const getToken = () => {
const tokenString = localStorage.getItem('token');
const userToken = JSON.parse(tokenString);
return userToken?.token
};
const [token, setToken] = useState(getToken());
const saveToken = userToken => {
localStorage.setItem('token', JSON.stringify(userToken));
setToken(userToken.token);
};
return {
setToken: saveToken,
token
}
}

3
src/theme.js
View File

@ -5,6 +5,9 @@ const theme = createTheme({
primary: {
main: '#4e00ba',
},
secondary: {
main: '#390087'
}
},
});