Move to dashboard theme
Philipp Heckel
parent
b497063af4
commit
c859f866b8
|
|
@ -0,0 +1,34 @@
|
||||||
|
module.exports = {
|
||||||
|
parser: "babel-eslint",
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
commonjs: true,
|
||||||
|
es6: true,
|
||||||
|
node: true,
|
||||||
|
jest: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
ecmaFeatures: {
|
||||||
|
impliedStrict: true,
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
sourceType: "module",
|
||||||
|
},
|
||||||
|
plugins: ["react", "react-hooks"],
|
||||||
|
extends: [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
],
|
||||||
|
settings: {
|
||||||
|
react: {
|
||||||
|
version: "detect",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
// You can do your customizations here...
|
||||||
|
// For example, if you don't want to use the prop-types package,
|
||||||
|
// you can turn off that recommended rule with: 'react/prop-types': ['off']
|
||||||
|
},
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -9,11 +9,13 @@
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@babel/core": "^7.17.5",
|
||||||
|
"@babel/preset-env": "^7.16.11",
|
||||||
|
"@babel/preset-react": "^7.16.7",
|
||||||
"@emotion/react": "latest",
|
"@emotion/react": "latest",
|
||||||
"@emotion/styled": "latest",
|
"@emotion/styled": "latest",
|
||||||
"@mui/icons-material": "^5.4.2",
|
"@mui/icons-material": "^5.4.2",
|
||||||
"@mui/material": "latest",
|
"@mui/material": "latest",
|
||||||
"check-dependencies": "^1.1.0",
|
|
||||||
"react": "latest",
|
"react": "latest",
|
||||||
"react-dom": "latest",
|
"react-dom": "latest",
|
||||||
"react-scripts": "^3.0.1",
|
"react-scripts": "^3.0.1",
|
||||||
|
|
|
||||||
230
web/src/App.js
230
web/src/App.js
|
|
@ -1,13 +1,96 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import {useState} from 'react';
|
||||||
import Container from '@mui/material/Container';
|
import Container from '@mui/material/Container';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
import Link from '@mui/material/Link';
|
import Link from '@mui/material/Link';
|
||||||
import {useEffect, useState} from "react";
|
|
||||||
import Subscription from './Subscription';
|
import Subscription from './Subscription';
|
||||||
import WsConnection from './WsConnection';
|
import WsConnection from './WsConnection';
|
||||||
|
import {createTheme, styled, ThemeProvider} from '@mui/material/styles';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import MuiDrawer from '@mui/material/Drawer';
|
||||||
|
import MuiAppBar from '@mui/material/AppBar';
|
||||||
|
import Toolbar from '@mui/material/Toolbar';
|
||||||
|
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
|
||||||
|
import List from '@mui/material/List';
|
||||||
|
import Divider from '@mui/material/Divider';
|
||||||
|
import IconButton from '@mui/material/IconButton';
|
||||||
|
import Badge from '@mui/material/Badge';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import Paper from '@mui/material/Paper';
|
||||||
|
import MenuIcon from '@mui/icons-material/Menu';
|
||||||
|
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||||
|
import NotificationsIcon from '@mui/icons-material/Notifications';
|
||||||
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||||
|
import ListItemText from "@mui/material/ListItemText";
|
||||||
|
import ListItemButton from "@mui/material/ListItemButton";
|
||||||
|
import SettingsIcon from "@mui/icons-material/Settings";
|
||||||
|
import AddIcon from "@mui/icons-material/Add";
|
||||||
|
import Card from "@mui/material/Card";
|
||||||
|
import {Button, CardActions, CardContent, Stack} from "@mui/material";
|
||||||
|
|
||||||
const SubscriptionList = (props) => {
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawerWidth = 240;
|
||||||
|
|
||||||
|
const AppBar = styled(MuiAppBar, {
|
||||||
|
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)`,
|
||||||
|
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),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const mdTheme = createTheme();
|
||||||
|
|
||||||
|
const SubscriptionNav = (props) => {
|
||||||
const subscriptions = props.subscriptions;
|
const subscriptions = props.subscriptions;
|
||||||
return (
|
return (
|
||||||
<div className="subscriptionList">
|
<div className="subscriptionList">
|
||||||
|
|
@ -26,33 +109,43 @@ const SubscriptionList = (props) => {
|
||||||
const SubscriptionItem = (props) => {
|
const SubscriptionItem = (props) => {
|
||||||
const subscription = props.subscription;
|
const subscription = props.subscription;
|
||||||
return (
|
return (
|
||||||
<>
|
<ListItemButton onClick={props.onClick}>
|
||||||
<div
|
<ListItemIcon>
|
||||||
onClick={props.onClick}
|
<ChatBubbleOutlineIcon />
|
||||||
style={{ fontWeight: props.selected ? 'bold' : '' }}
|
</ListItemIcon>
|
||||||
>
|
<ListItemText primary={subscription.shortUrl()} />
|
||||||
{subscription.shortUrl()}
|
</ListItemButton>
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const NotificationList = (props) => {
|
const NotificationList = (props) => {
|
||||||
return (
|
return (
|
||||||
<div className="notificationList">
|
<Stack spacing={3} className="notificationList">
|
||||||
{props.notifications.map(notification =>
|
{props.notifications.map(notification =>
|
||||||
<NotificationItem key={notification.id} notification={notification}/>)}
|
<NotificationItem key={notification.id} notification={notification}/>)}
|
||||||
</div>
|
</Stack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const NotificationItem = (props) => {
|
const NotificationItem = (props) => {
|
||||||
const notification = props.notification;
|
const notification = props.notification;
|
||||||
return (
|
return (
|
||||||
<>
|
<Card sx={{ minWidth: 275 }}>
|
||||||
<div className="date">{notification.time}</div>
|
<CardContent>
|
||||||
<div className="message">{notification.message}</div>
|
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
|
||||||
</>
|
{notification.time}
|
||||||
|
</Typography>
|
||||||
|
{notification.title && <Typography variant="h5" component="div">
|
||||||
|
title: {notification.title}
|
||||||
|
</Typography>}
|
||||||
|
<Typography variant="body1">
|
||||||
|
msg: {notification.message}
|
||||||
|
</Typography>
|
||||||
|
</CardContent>
|
||||||
|
<CardActions>
|
||||||
|
<Button size="small">Learn More</Button>
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -79,6 +172,7 @@ const SubscriptionAddForm = (props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
const [open, setOpen] = React.useState(true);
|
||||||
const [subscriptions, setSubscriptions] = useState({});
|
const [subscriptions, setSubscriptions] = useState({});
|
||||||
const [selectedSubscription, setSelectedSubscription] = useState(null);
|
const [selectedSubscription, setSelectedSubscription] = useState(null);
|
||||||
const [connections, setConnections] = useState({});
|
const [connections, setConnections] = useState({});
|
||||||
|
|
@ -96,21 +190,113 @@ const App = () => {
|
||||||
setSelectedSubscription(subscriptions[subscriptionId]);
|
setSelectedSubscription(subscriptions[subscriptionId]);
|
||||||
};
|
};
|
||||||
const notifications = (selectedSubscription !== null) ? selectedSubscription.notifications : [];
|
const notifications = (selectedSubscription !== null) ? selectedSubscription.notifications : [];
|
||||||
|
const toggleDrawer = () => {
|
||||||
|
setOpen(!open);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<Container maxWidth="sm">
|
<ThemeProvider theme={mdTheme}>
|
||||||
<Box sx={{my: 4}}>
|
<Box sx={{ display: 'flex' }}>
|
||||||
<Typography variant="h4" component="h1" gutterBottom>
|
<CssBaseline />
|
||||||
|
<AppBar position="absolute" open={open}>
|
||||||
|
<Toolbar
|
||||||
|
sx={{
|
||||||
|
pr: '24px', // keep right padding when drawer closed
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<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 }}
|
||||||
|
>
|
||||||
ntfy
|
ntfy
|
||||||
</Typography>
|
</Typography>
|
||||||
<SubscriptionAddForm onSubmit={addSubscription}/>
|
<IconButton color="inherit">
|
||||||
<SubscriptionList
|
<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 component="nav">
|
||||||
|
<SubscriptionNav
|
||||||
subscriptions={subscriptions}
|
subscriptions={subscriptions}
|
||||||
selectedSubscription={selectedSubscription}
|
selectedSubscription={selectedSubscription}
|
||||||
handleSubscriptionClick={handleSubscriptionClick}
|
handleSubscriptionClick={handleSubscriptionClick}
|
||||||
/>
|
/>
|
||||||
|
<Divider sx={{ my: 1 }} />
|
||||||
|
<ListItemButton>
|
||||||
|
<ListItemIcon>
|
||||||
|
<SettingsIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Settings" />
|
||||||
|
</ListItemButton>
|
||||||
|
<ListItemButton>
|
||||||
|
<ListItemIcon>
|
||||||
|
<AddIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Add subscription" />
|
||||||
|
</ListItemButton>
|
||||||
|
</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}>
|
||||||
|
<SubscriptionAddForm onSubmit={addSubscription}/>
|
||||||
<NotificationList notifications={notifications}/>
|
<NotificationList notifications={notifications}/>
|
||||||
</Box>
|
{/* Recent Orders */}
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
|
||||||
|
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Copyright sx={{ pt: 4 }} />
|
||||||
</Container>
|
</Container>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts';
|
|
||||||
import Title from './Title';
|
|
||||||
|
|
||||||
// Generate Sales Data
|
|
||||||
function createData(time, amount) {
|
|
||||||
return { time, amount };
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = [
|
|
||||||
createData('00:00', 0),
|
|
||||||
createData('03:00', 300),
|
|
||||||
createData('06:00', 600),
|
|
||||||
createData('09:00', 800),
|
|
||||||
createData('12:00', 1500),
|
|
||||||
createData('15:00', 2000),
|
|
||||||
createData('18:00', 2400),
|
|
||||||
createData('21:00', 2400),
|
|
||||||
createData('24:00', undefined),
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Chart() {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<Title>Today</Title>
|
|
||||||
<ResponsiveContainer>
|
|
||||||
<LineChart
|
|
||||||
data={data}
|
|
||||||
margin={{
|
|
||||||
top: 16,
|
|
||||||
right: 16,
|
|
||||||
bottom: 0,
|
|
||||||
left: 24,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey="time"
|
|
||||||
stroke={theme.palette.text.secondary}
|
|
||||||
style={theme.typography.body2}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
stroke={theme.palette.text.secondary}
|
|
||||||
style={theme.typography.body2}
|
|
||||||
>
|
|
||||||
<Label
|
|
||||||
angle={270}
|
|
||||||
position="left"
|
|
||||||
style={{
|
|
||||||
textAnchor: 'middle',
|
|
||||||
fill: theme.palette.text.primary,
|
|
||||||
...theme.typography.body1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Sales ($)
|
|
||||||
</Label>
|
|
||||||
</YAxis>
|
|
||||||
<Line
|
|
||||||
isAnimationActive={false}
|
|
||||||
type="monotone"
|
|
||||||
dataKey="amount"
|
|
||||||
stroke={theme.palette.primary.main}
|
|
||||||
dot={false}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,208 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
|
|
||||||
import CssBaseline from '@mui/material/CssBaseline';
|
|
||||||
import MuiDrawer from '@mui/material/Drawer';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import MuiAppBar from '@mui/material/AppBar';
|
|
||||||
import Toolbar from '@mui/material/Toolbar';
|
|
||||||
import List from '@mui/material/List';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import IconButton from '@mui/material/IconButton';
|
|
||||||
import Badge from '@mui/material/Badge';
|
|
||||||
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 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 Chart from './Chart';
|
|
||||||
import Deposits from './Deposits';
|
|
||||||
import Orders from './Orders';
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const drawerWidth = 240;
|
|
||||||
|
|
||||||
const AppBar = styled(MuiAppBar, {
|
|
||||||
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)`,
|
|
||||||
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),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
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 component="nav">
|
|
||||||
{mainListItems}
|
|
||||||
<Divider sx={{ my: 1 }} />
|
|
||||||
{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,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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 />;
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Title from './Title';
|
|
||||||
|
|
||||||
function preventDefault(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Deposits() {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<Title>Recent Deposits</Title>
|
|
||||||
<Typography component="p" variant="h4">
|
|
||||||
$3,024.00
|
|
||||||
</Typography>
|
|
||||||
<Typography color="text.secondary" sx={{ flex: 1 }}>
|
|
||||||
on 15 March, 2019
|
|
||||||
</Typography>
|
|
||||||
<div>
|
|
||||||
<Link color="primary" href="#" onClick={preventDefault}>
|
|
||||||
View balance
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Table from '@mui/material/Table';
|
|
||||||
import TableBody from '@mui/material/TableBody';
|
|
||||||
import TableCell from '@mui/material/TableCell';
|
|
||||||
import TableHead from '@mui/material/TableHead';
|
|
||||||
import TableRow from '@mui/material/TableRow';
|
|
||||||
import Title from './Title';
|
|
||||||
|
|
||||||
// Generate Order Data
|
|
||||||
function createData(id, date, name, shipTo, paymentMethod, amount) {
|
|
||||||
return { id, date, name, shipTo, paymentMethod, amount };
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [
|
|
||||||
createData(
|
|
||||||
0,
|
|
||||||
'16 Mar, 2019',
|
|
||||||
'Elvis Presley',
|
|
||||||
'Tupelo, MS',
|
|
||||||
'VISA ⠀•••• 3719',
|
|
||||||
312.44,
|
|
||||||
),
|
|
||||||
createData(
|
|
||||||
1,
|
|
||||||
'16 Mar, 2019',
|
|
||||||
'Paul McCartney',
|
|
||||||
'London, UK',
|
|
||||||
'VISA ⠀•••• 2574',
|
|
||||||
866.99,
|
|
||||||
),
|
|
||||||
createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81),
|
|
||||||
createData(
|
|
||||||
3,
|
|
||||||
'16 Mar, 2019',
|
|
||||||
'Michael Jackson',
|
|
||||||
'Gary, IN',
|
|
||||||
'AMEX ⠀•••• 2000',
|
|
||||||
654.39,
|
|
||||||
),
|
|
||||||
createData(
|
|
||||||
4,
|
|
||||||
'15 Mar, 2019',
|
|
||||||
'Bruce Springsteen',
|
|
||||||
'Long Branch, NJ',
|
|
||||||
'VISA ⠀•••• 5919',
|
|
||||||
212.79,
|
|
||||||
),
|
|
||||||
];
|
|
||||||
|
|
||||||
function preventDefault(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Orders() {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<Title>Recent Orders</Title>
|
|
||||||
<Table size="small">
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell>Date</TableCell>
|
|
||||||
<TableCell>Name</TableCell>
|
|
||||||
<TableCell>Ship To</TableCell>
|
|
||||||
<TableCell>Payment Method</TableCell>
|
|
||||||
<TableCell align="right">Sale Amount</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{rows.map((row) => (
|
|
||||||
<TableRow key={row.id}>
|
|
||||||
<TableCell>{row.date}</TableCell>
|
|
||||||
<TableCell>{row.name}</TableCell>
|
|
||||||
<TableCell>{row.shipTo}</TableCell>
|
|
||||||
<TableCell>{row.paymentMethod}</TableCell>
|
|
||||||
<TableCell align="right">{`$${row.amount}`}</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
<Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
|
|
||||||
See more orders
|
|
||||||
</Link>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -4,11 +4,9 @@ import CssBaseline from '@mui/material/CssBaseline';
|
||||||
import { ThemeProvider } from '@mui/material/styles';
|
import { ThemeProvider } from '@mui/material/styles';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import theme from './theme';
|
import theme from './theme';
|
||||||
import Dashboard from "./Dashboard";
|
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
|
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
<App />
|
<App />
|
||||||
</ThemeProvider>,
|
</ThemeProvider>,
|
||||||
|
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import ListItemButton from '@mui/material/ListItemButton';
|
|
||||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
||||||
import ListItemText from '@mui/material/ListItemText';
|
|
||||||
import ListSubheader from '@mui/material/ListSubheader';
|
|
||||||
import DashboardIcon from '@mui/icons-material/Dashboard';
|
|
||||||
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
|
|
||||||
import PeopleIcon from '@mui/icons-material/People';
|
|
||||||
import BarChartIcon from '@mui/icons-material/BarChart';
|
|
||||||
import LayersIcon from '@mui/icons-material/Layers';
|
|
||||||
import AssignmentIcon from '@mui/icons-material/Assignment';
|
|
||||||
|
|
||||||
export const mainListItems = (
|
|
||||||
<React.Fragment>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<DashboardIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Dashboard" />
|
|
||||||
</ListItemButton>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<ShoppingCartIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Orders" />
|
|
||||||
</ListItemButton>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<PeopleIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Customers" />
|
|
||||||
</ListItemButton>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<BarChartIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Reports" />
|
|
||||||
</ListItemButton>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<LayersIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Integrations" />
|
|
||||||
</ListItemButton>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const secondaryListItems = (
|
|
||||||
<React.Fragment>
|
|
||||||
<ListSubheader component="div" inset>
|
|
||||||
Saved reports
|
|
||||||
</ListSubheader>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<AssignmentIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Current month" />
|
|
||||||
</ListItemButton>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<AssignmentIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Last quarter" />
|
|
||||||
</ListItemButton>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemIcon>
|
|
||||||
<AssignmentIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Year-end sale" />
|
|
||||||
</ListItemButton>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
|
|
@ -5,10 +5,10 @@ import { createTheme } from '@mui/material/styles';
|
||||||
const theme = createTheme({
|
const theme = createTheme({
|
||||||
palette: {
|
palette: {
|
||||||
primary: {
|
primary: {
|
||||||
main: '#556cd6',
|
main: '#338574',
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
main: '#19857b',
|
main: '#338574',
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
main: red.A400,
|
main: red.A400,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue