|
|
@@ -14,194 +14,218 @@ import Container from '@mui/material/Container';
|
|
|
import Grid from '@mui/material/Grid';
|
|
|
import Paper from '@mui/material/Paper';
|
|
|
import Link from '@mui/material/Link';
|
|
|
+import Avatar from '@mui/material/Avatar';
|
|
|
+
|
|
|
+
|
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
|
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
|
|
import NotificationsIcon from '@mui/icons-material/Notifications';
|
|
|
import { mainListItems, secondaryListItems } from './listItems';
|
|
|
+import AccountCircle from '@mui/icons-material/AccountCircle';
|
|
|
// import Chart from './Chart';
|
|
|
import Deposits from './Deposits';
|
|
|
import Orders from './Orders';
|
|
|
|
|
|
+
|
|
|
+import MailIcon from '@mui/icons-material/Mail';
|
|
|
+
|
|
|
+import Logo from '../Images/logo.png';
|
|
|
+import ProfilePicture from '../Images/man.png';
|
|
|
+
|
|
|
+
|
|
|
function Copyright(props) {
|
|
|
- return (
|
|
|
- <Typography variant="body2" color="text.secondary" align="center" {...props}>
|
|
|
- {'Copyright © '}
|
|
|
- <Link color="inherit" href="https://mui.com/">
|
|
|
- Your Website
|
|
|
- </Link>{' '}
|
|
|
- {new Date().getFullYear()}
|
|
|
- {'.'}
|
|
|
- </Typography>
|
|
|
- );
|
|
|
+ return (
|
|
|
+ <Typography variant="body2" color="text.secondary" align="center" {...props}>
|
|
|
+ {'Copyright © '}
|
|
|
+ <Link color="inherit" href="https://mui.com/">
|
|
|
+ Your Website
|
|
|
+ </Link>{' '}
|
|
|
+ {new Date().getFullYear()}
|
|
|
+ {'.'}
|
|
|
+ </Typography>
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
const drawerWidth = 240;
|
|
|
|
|
|
const AppBar = styled(MuiAppBar, {
|
|
|
- shouldForwardProp: (prop) => prop !== 'open',
|
|
|
+ shouldForwardProp: (prop) => prop !== 'open',
|
|
|
})(({ theme, open }) => ({
|
|
|
- zIndex: theme.zIndex.drawer + 1,
|
|
|
- transition: theme.transitions.create(['width', 'margin'], {
|
|
|
- easing: theme.transitions.easing.sharp,
|
|
|
- duration: theme.transitions.duration.leavingScreen,
|
|
|
- }),
|
|
|
- ...(open && {
|
|
|
- marginLeft: drawerWidth,
|
|
|
- width: `calc(100% - ${drawerWidth}px)`,
|
|
|
+ zIndex: theme.zIndex.drawer + 1,
|
|
|
transition: theme.transitions.create(['width', 'margin'], {
|
|
|
- easing: theme.transitions.easing.sharp,
|
|
|
- duration: theme.transitions.duration.enteringScreen,
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.leavingScreen,
|
|
|
+ }),
|
|
|
+ ...(open && {
|
|
|
+ marginLeft: drawerWidth,
|
|
|
+ width: `calc(100% - ${drawerWidth}px)`,
|
|
|
+ transition: theme.transitions.create(['width', 'margin'], {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.enteringScreen,
|
|
|
+ }),
|
|
|
}),
|
|
|
- }),
|
|
|
}));
|
|
|
|
|
|
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
|
|
|
- ({ theme, open }) => ({
|
|
|
- '& .MuiDrawer-paper': {
|
|
|
- position: 'relative',
|
|
|
- whiteSpace: 'nowrap',
|
|
|
- width: drawerWidth,
|
|
|
- transition: theme.transitions.create('width', {
|
|
|
- easing: theme.transitions.easing.sharp,
|
|
|
- duration: theme.transitions.duration.enteringScreen,
|
|
|
- }),
|
|
|
- boxSizing: 'border-box',
|
|
|
- ...(!open && {
|
|
|
- overflowX: 'hidden',
|
|
|
- transition: theme.transitions.create('width', {
|
|
|
- easing: theme.transitions.easing.sharp,
|
|
|
- duration: theme.transitions.duration.leavingScreen,
|
|
|
- }),
|
|
|
- width: theme.spacing(7),
|
|
|
- [theme.breakpoints.up('sm')]: {
|
|
|
- width: theme.spacing(9),
|
|
|
+ ({ theme, open }) => ({
|
|
|
+ '& .MuiDrawer-paper': {
|
|
|
+ position: 'relative',
|
|
|
+ whiteSpace: 'nowrap',
|
|
|
+ width: drawerWidth,
|
|
|
+ transition: theme.transitions.create('width', {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.enteringScreen,
|
|
|
+ }),
|
|
|
+ boxSizing: 'border-box',
|
|
|
+ ...(!open && {
|
|
|
+ overflowX: 'hidden',
|
|
|
+ transition: theme.transitions.create('width', {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.leavingScreen,
|
|
|
+ }),
|
|
|
+ width: theme.spacing(7),
|
|
|
+ [theme.breakpoints.up('sm')]: {
|
|
|
+ width: theme.spacing(9),
|
|
|
+ },
|
|
|
+ }),
|
|
|
},
|
|
|
- }),
|
|
|
- },
|
|
|
- }),
|
|
|
+ }),
|
|
|
);
|
|
|
|
|
|
const mdTheme = createTheme();
|
|
|
|
|
|
function DashboardContent() {
|
|
|
- const [open, setOpen] = React.useState(true);
|
|
|
- const toggleDrawer = () => {
|
|
|
- setOpen(!open);
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <ThemeProvider theme={mdTheme}>
|
|
|
- <Box sx={{ display: 'flex' }}>
|
|
|
- <CssBaseline />
|
|
|
- <AppBar position="absolute" open={open}>
|
|
|
- <Toolbar
|
|
|
- sx={{
|
|
|
- pr: '24px', // keep right padding when drawer closed
|
|
|
- }}
|
|
|
- >
|
|
|
- <IconButton
|
|
|
- edge="start"
|
|
|
- color="inherit"
|
|
|
- aria-label="open drawer"
|
|
|
- onClick={toggleDrawer}
|
|
|
- sx={{
|
|
|
- marginRight: '36px',
|
|
|
- ...(open && { display: 'none' }),
|
|
|
- }}
|
|
|
- >
|
|
|
- <MenuIcon />
|
|
|
- </IconButton>
|
|
|
- <Typography
|
|
|
- component="h1"
|
|
|
- variant="h6"
|
|
|
- color="inherit"
|
|
|
- noWrap
|
|
|
- sx={{ flexGrow: 1 }}
|
|
|
- >
|
|
|
- Dashboard
|
|
|
- </Typography>
|
|
|
- <IconButton color="inherit">
|
|
|
- <Badge badgeContent={4} color="secondary">
|
|
|
- <NotificationsIcon />
|
|
|
- </Badge>
|
|
|
- </IconButton>
|
|
|
- </Toolbar>
|
|
|
- </AppBar>
|
|
|
- <Drawer variant="permanent" open={open}>
|
|
|
- <Toolbar
|
|
|
- sx={{
|
|
|
- display: 'flex',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'flex-end',
|
|
|
- px: [1],
|
|
|
- }}
|
|
|
- >
|
|
|
- <IconButton onClick={toggleDrawer}>
|
|
|
- <ChevronLeftIcon />
|
|
|
- </IconButton>
|
|
|
- </Toolbar>
|
|
|
- <Divider />
|
|
|
- <List>{mainListItems}</List>
|
|
|
- <Divider />
|
|
|
- <List>{secondaryListItems}</List>
|
|
|
- </Drawer>
|
|
|
- <Box
|
|
|
- component="main"
|
|
|
- sx={{
|
|
|
- backgroundColor: (theme) =>
|
|
|
- theme.palette.mode === 'light'
|
|
|
- ? theme.palette.grey[100]
|
|
|
- : theme.palette.grey[900],
|
|
|
- flexGrow: 1,
|
|
|
- height: '100vh',
|
|
|
- overflow: 'auto',
|
|
|
- }}
|
|
|
- >
|
|
|
- <Toolbar />
|
|
|
- <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
|
|
|
- <Grid container spacing={3}>
|
|
|
- {/* Chart */}
|
|
|
- <Grid item xs={12} md={8} lg={9}>
|
|
|
- <Paper
|
|
|
- sx={{
|
|
|
- p: 2,
|
|
|
- display: 'flex',
|
|
|
- flexDirection: 'column',
|
|
|
- height: 240,
|
|
|
- }}
|
|
|
- >
|
|
|
- {/* <Chart /> */}
|
|
|
- </Paper>
|
|
|
- </Grid>
|
|
|
- {/* Recent Deposits */}
|
|
|
- <Grid item xs={12} md={4} lg={3}>
|
|
|
- <Paper
|
|
|
- sx={{
|
|
|
- p: 2,
|
|
|
- display: 'flex',
|
|
|
- flexDirection: 'column',
|
|
|
- height: 240,
|
|
|
- }}
|
|
|
+ const [open, setOpen] = React.useState(true);
|
|
|
+ const toggleDrawer = () => {
|
|
|
+ setOpen(!open);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <ThemeProvider theme={mdTheme}>
|
|
|
+ <Box sx={{ display: 'flex' }}>
|
|
|
+ <CssBaseline />
|
|
|
+ <AppBar style={{ backgroundColor : '#fff' }} position="absolute" open={open}>
|
|
|
+ <Toolbar sx={{ pr: '24px' }} >
|
|
|
+
|
|
|
+ <IconButton style={{ color : '#212529' }} edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: '36px', ...(open && { display: 'none' }), }} >
|
|
|
+ <MenuIcon />
|
|
|
+ </IconButton>
|
|
|
+
|
|
|
+ <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
|
|
|
+ <div className="sidebar-header">
|
|
|
+ <div className="width_img">
|
|
|
+ <img src={Logo} alt=""/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Typography>
|
|
|
+
|
|
|
+
|
|
|
+ <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
|
|
|
+ <IconButton size="large" aria-label="show 4 new mails" color="inherit">
|
|
|
+ <Badge badgeContent={4} color="error">
|
|
|
+ <MailIcon style={{ color : '#212529' }} />
|
|
|
+ </Badge>
|
|
|
+ </IconButton>
|
|
|
+ <IconButton
|
|
|
+ size="large"
|
|
|
+ aria-label="show 17 new notifications"
|
|
|
+ color="inherit"
|
|
|
+ >
|
|
|
+ <Badge badgeContent={17} color="error">
|
|
|
+ <NotificationsIcon style={{ color : '#212529' }}/>
|
|
|
+ </Badge>
|
|
|
+ </IconButton>
|
|
|
+ <IconButton
|
|
|
+ size="small"
|
|
|
+ edge="end"
|
|
|
+ aria-label="account of current user"
|
|
|
+ aria-haspopup="true"
|
|
|
+ onClick={ () => console.log('show menu') }
|
|
|
+ color="inherit"
|
|
|
+ >
|
|
|
+ <Avatar alt="Cindy Baker" src={ProfilePicture} />
|
|
|
+
|
|
|
+ </IconButton>
|
|
|
+ </Box>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </Toolbar>
|
|
|
+ </AppBar>
|
|
|
+ <Drawer variant="permanent" open={open}>
|
|
|
+ <Toolbar
|
|
|
+ sx={{
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'flex-end',
|
|
|
+ px: [1],
|
|
|
+ }} >
|
|
|
+ <IconButton onClick={toggleDrawer}>
|
|
|
+ <ChevronLeftIcon />
|
|
|
+ </IconButton>
|
|
|
+ </Toolbar>
|
|
|
+ <Divider />
|
|
|
+ <List>{mainListItems}</List>
|
|
|
+ <Divider />
|
|
|
+ <List>{secondaryListItems}</List>
|
|
|
+ </Drawer>
|
|
|
+ <Box
|
|
|
+ component="main"
|
|
|
+ sx={{
|
|
|
+ backgroundColor: (theme) =>
|
|
|
+ theme.palette.mode === 'light'
|
|
|
+ ? theme.palette.grey[100]
|
|
|
+ : theme.palette.grey[900],
|
|
|
+ flexGrow: 1,
|
|
|
+ height: '100vh',
|
|
|
+ overflow: 'auto',
|
|
|
+ }}
|
|
|
>
|
|
|
- <Deposits />
|
|
|
- </Paper>
|
|
|
- </Grid>
|
|
|
- {/* Recent Orders */}
|
|
|
- <Grid item xs={12}>
|
|
|
- <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
|
|
|
- <Orders />
|
|
|
- </Paper>
|
|
|
- </Grid>
|
|
|
- </Grid>
|
|
|
- <Copyright sx={{ pt: 4 }} />
|
|
|
- </Container>
|
|
|
- </Box>
|
|
|
- </Box>
|
|
|
- </ThemeProvider>
|
|
|
- );
|
|
|
+ <Toolbar />
|
|
|
+ <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
|
|
|
+ <Grid container spacing={3}>
|
|
|
+ {/* Chart */}
|
|
|
+ <Grid item xs={12} md={8} lg={9}>
|
|
|
+ <Paper
|
|
|
+ sx={{
|
|
|
+ p: 2,
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'column',
|
|
|
+ height: 240,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {/* <Chart /> */}
|
|
|
+ </Paper>
|
|
|
+ </Grid>
|
|
|
+ {/* Recent Deposits */}
|
|
|
+ <Grid item xs={12} md={4} lg={3}>
|
|
|
+ <Paper
|
|
|
+ sx={{
|
|
|
+ p: 2,
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'column',
|
|
|
+ height: 240,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Deposits />
|
|
|
+ </Paper>
|
|
|
+ </Grid>
|
|
|
+ {/* Recent Orders */}
|
|
|
+ <Grid item xs={12}>
|
|
|
+ <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
|
|
|
+ <Orders />
|
|
|
+ </Paper>
|
|
|
+ </Grid>
|
|
|
+ </Grid>
|
|
|
+ <Copyright sx={{ pt: 4 }} />
|
|
|
+ </Container>
|
|
|
+ </Box>
|
|
|
+ </Box>
|
|
|
+ </ThemeProvider>
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
export default function Dashboard() {
|
|
|
- return <DashboardContent />;
|
|
|
+ return <DashboardContent />;
|
|
|
}
|
|
|
|
amenpunk