diff --git a/README.md b/README.md index 4c3f3b6..5babdeb 100644 --- a/README.md +++ b/README.md @@ -1 +1,17 @@ -# admin_dashboard_react \ No newline at end of file +# 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) \ No newline at end of file diff --git a/src/App.css b/src/App.css index 405ec1c..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +0,0 @@ -body { - overflow-x: hidden; /* Hide horizontal scrollbar */ -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 7569316..531e3c3 100644 --- a/src/App.js +++ b/src/App.js @@ -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 diff --git a/src/Dashboard/DashboardMain.js b/src/Dashboard/DashboardMain.js index 433ebaa..2ab2f84 100644 --- a/src/Dashboard/DashboardMain.js +++ b/src/Dashboard/DashboardMain.js @@ -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 = () => ( - - - -); +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 ( - <> - - - Admin Dashboard - - - - - - - Меню - - setIsMenuHidden(true)}> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - setIsMenuHidden(false)} - edge="start" - sx={{ marginRight: 2, ...(isMenuHidden && { display: 'none' }) }} - > - - - - - - Добро пожаловать в панель администратора - - - - - Быстрые действия + + + + theme.zIndex.drawer + 1, width: `calc(100% - ${open ? drawerWidth : 0}px)`, ml: `${open ? drawerWidth : 0}px` }}> + + + + + + Admin Dashboard - - - - - - + + + + + + + Profile + + + + My account + + + + Settings + + + + Logout + + + + + - - Последние действия - - {/* Здесь можно добавить компонент для отображения последних действий */} - + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + Welcome to the Dashboard! + - - - - - © {new Date().getFullYear()} LCSA и SnippetsX. Все права защищены. - - + ); -}; - - - -export default DashboardPageWithTheme; +} \ No newline at end of file diff --git a/src/Login/LoginPage.js b/src/Login/LoginPage.js index ac8e873..9ec6063 100644 --- a/src/Login/LoginPage.js +++ b/src/Login/LoginPage.js @@ -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( - - - Admin Dashboard - - + + + + Admin Dashboard + + + { + 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 + } +} \ No newline at end of file diff --git a/src/theme.js b/src/theme.js index 6f6ec08..1ab9c93 100644 --- a/src/theme.js +++ b/src/theme.js @@ -5,6 +5,9 @@ const theme = createTheme({ primary: { main: '#4e00ba', }, + secondary: { + main: '#390087' + } }, });