louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: static frontend layout

Browse Source
This commit is contained in:
Leandro Farias 2023-03-31 14:22:22 +00:00
parent 7b81761daa
commit 9257e2073b
12 changed files with 394 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/layouts/dashboard/config.js
View File

@ -5,6 +5,7 @@ import ShoppingBagIcon from '@heroicons/react/24/solid/ShoppingBagIcon';
import UserIcon from '@heroicons/react/24/solid/UserIcon';
import UserPlusIcon from '@heroicons/react/24/solid/UserPlusIcon';
import UsersIcon from '@heroicons/react/24/solid/UsersIcon';
import CpuChip from '@heroicons/react/24/solid/CpuChipIcon';
import XCircleIcon from '@heroicons/react/24/solid/XCircleIcon';
import { SvgIcon } from '@mui/material';
@ -19,29 +20,11 @@ export const items = [
)
},
{
title: 'Customers',
path: '/customers',
title: 'Devices',
path: '/devices',
icon: (
<SvgIcon fontSize="small">
<UsersIcon />
</SvgIcon>
)
},
{
title: 'Companies',
path: '/companies',
icon: (
<SvgIcon fontSize="small">
<ShoppingBagIcon />
</SvgIcon>
)
},
{
title: 'Account',
path: '/account',
icon: (
<SvgIcon fontSize="small">
<UserIcon />
<CpuChip/>
</SvgIcon>
)
},
@ -54,12 +37,24 @@ export const items = [
</SvgIcon>
)
},
];
/*
{
title: 'Login',
path: '/auth/login',
title: 'Customers',
path: '/customers',
icon: (
<SvgIcon fontSize="small">
<LockClosedIcon />
<UsersIcon />
</SvgIcon>
)
},
{
title: 'Account',
path: '/account',
icon: (
<SvgIcon fontSize="small">
<UserIcon />
</SvgIcon>
)
},
@ -72,6 +67,24 @@ export const items = [
</SvgIcon>
)
},
{
title: 'Login',
path: '/auth/login',
icon: (
<SvgIcon fontSize="small">
<LockClosedIcon />
</SvgIcon>
)
},
{
title: 'Companies',
path: '/companies',
icon: (
<SvgIcon fontSize="small">
<ShoppingBagIcon />
</SvgIcon>
)
},
{
title: 'Error',
path: '/404',
@ -81,4 +94,4 @@ export const items = [
</SvgIcon>
)
}
];
*/

2
frontend/src/layouts/dashboard/side-nav-item.js
View File

@ -50,7 +50,7 @@ export const SideNavItem = (props) => {
justifyContent: 'center',
mr: 2,
...(active && {
color: 'primary.main'
color: '#FFFFFF'
})
}}
>

8
frontend/src/layouts/dashboard/top-nav.js
View File

@ -78,14 +78,14 @@ export const TopNav = (props) => {
direction="row"
spacing={2}
>
<Tooltip title="Contacts">
{/*<Tooltip title="Contacts">
<IconButton>
<SvgIcon fontSize="small">
<UsersIcon />
</SvgIcon>
</IconButton>
</Tooltip>
<Tooltip title="Notifications">
</Tooltip>*/}
{/*<Tooltip title="Notifications">
<IconButton>
<Badge
badgeContent={4}
@ -97,7 +97,7 @@ export const TopNav = (props) => {
</SvgIcon>
</Badge>
</IconButton>
</Tooltip>
</Tooltip>*/}
<Avatar
onClick={accountPopover.handleOpen}
ref={accountPopover.anchorRef}

4
frontend/src/pages/auth/login.js
View File

@ -103,7 +103,7 @@ const Page = () => {
color="text.secondary"
variant="body2"
>
Não possui uma conta?
Don't have an account?
&nbsp;
<Link
component={NextLink}
@ -111,7 +111,7 @@ const Page = () => {
underline="hover"
variant="subtitle2"
>
Registre-se
Register
</Link>
</Typography>
</Stack>

234
frontend/src/pages/devices.js Normal file
View File

@ -0,0 +1,234 @@
import Head from 'next/head';
import { subDays, subHours } from 'date-fns';
import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material';
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { OverviewBudget } from 'src/sections/overview/overview-budget';
import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders';
import { OverviewLatestProducts } from 'src/sections/overview/overview-latest-products';
import { OverviewSales } from 'src/sections/overview/overview-sales';
import { OverviewTasksProgress } from 'src/sections/overview/overview-tasks-progress';
import { OverviewTotalCustomers } from 'src/sections/overview/overview-total-customers';
import { OverviewTotalProfit } from 'src/sections/overview/overview-total-profit';
import { OverviewTraffic } from 'src/sections/overview/overview-traffic';
const now = new Date();
const Page = () => (
<>
<Head>
<title>
Oktopus | TR-369
</title>
</Head>
<Box
component="main"
sx={{
flexGrow: 1,
py: 8
}}
>
<Container maxWidth="xl">
<Grid
container
spacing={3}
>
</Grid>
<OverviewLatestOrders
orders={[
{
id: 'f69f88012978187a6c12897f',
ref: 'DEV1049',
amount: 30.5,
customer: {
name: 'Ekaterina Tankova'
},
createdAt: 1555016400000,
status: 'Associando'
},
{
id: '9eaa1c7dd4433f413c308ce2',
ref: 'DEV1048',
amount: 25.1,
customer: {
name: 'Cao Yu'
},
createdAt: 1555016400000,
status: 'Online'
},
{
id: '01a5230c811bd04996ce7c13',
ref: 'DEV1047',
amount: 10.99,
customer: {
name: 'Alexa Richardson'
},
createdAt: 1554930000000,
status: 'Offline'
},
{
id: '1f4e1bd0a87cea23cdb83d18',
ref: 'DEV1046',
amount: 96.43,
customer: {
name: 'Anje Keizer'
},
createdAt: 1554757200000,
status: 'Associando'
},
{
id: '9f974f239d29ede969367103',
ref: 'DEV1045',
amount: 32.54,
customer: {
name: 'Clarke Gillebert'
},
createdAt: 1554670800000,
status: 'Online'
},
{
id: 'ffc83c1560ec2f66a1c05596',
ref: 'DEV1044',
amount: 16.76,
customer: {
name: 'Adam Denisov'
},
createdAt: 1554670800000,
status: 'Online'
}
]}
sx={{ height: '100%' }}
/>
</Container>
</Box>
</>
);
Page.getLayout = (page) => (
<DashboardLayout>
{page}
</DashboardLayout>
);
export default Page;
/*
<OverviewSales
chartSeries={[
{
name: 'This year',
data: [18, 16, 5, 8, 3, 14, 14, 16, 17, 19, 18, 20]
},
{
name: 'Last year',
data: [12, 11, 4, 6, 2, 9, 9, 10, 11, 12, 13, 13]
}
]}
sx={{ height: '100%' }}
/>
<OverviewLatestProducts
products={[
{
id: '5ece2c077e39da27658aa8a9',
image: '/assets/products/product-1.png',
name: 'Healthcare Erbology',
updatedAt: subHours(now, 6).getTime()
},
{
id: '5ece2c0d16f70bff2cf86cd8',
image: '/assets/products/product-2.png',
name: 'Makeup Lancome Rouge',
updatedAt: subDays(subHours(now, 8), 2).getTime()
},
{
id: 'b393ce1b09c1254c3a92c827',
image: '/assets/products/product-5.png',
name: 'Skincare Soja CO',
updatedAt: subDays(subHours(now, 1), 1).getTime()
},
{
id: 'a6ede15670da63f49f752c89',
image: '/assets/products/product-6.png',
name: 'Makeup Lipstick',
updatedAt: subDays(subHours(now, 3), 3).getTime()
},
{
id: 'bcad5524fe3a2f8f8620ceda',
image: '/assets/products/product-7.png',
name: 'Healthcare Ritual',
updatedAt: subDays(subHours(now, 5), 6).getTime()
}
]}
sx={{ height: '100%' }}
/>
</Grid>
<Grid
xs={12}
md={12}
lg={8}
>
<OverviewLatestOrders
orders={[
{
id: 'f69f88012978187a6c12897f',
ref: 'DEV1049',
amount: 30.5,
customer: {
name: 'Ekaterina Tankova'
},
createdAt: 1555016400000,
status: 'pending'
},
{
id: '9eaa1c7dd4433f413c308ce2',
ref: 'DEV1048',
amount: 25.1,
customer: {
name: 'Cao Yu'
},
createdAt: 1555016400000,
status: 'Online'
},
{
id: '01a5230c811bd04996ce7c13',
ref: 'DEV1047',
amount: 10.99,
customer: {
name: 'Alexa Richardson'
},
createdAt: 1554930000000,
status: 'refunded'
},
{
id: '1f4e1bd0a87cea23cdb83d18',
ref: 'DEV1046',
amount: 96.43,
customer: {
name: 'Anje Keizer'
},
createdAt: 1554757200000,
status: 'pending'
},
{
id: '9f974f239d29ede969367103',
ref: 'DEV1045',
amount: 32.54,
customer: {
name: 'Clarke Gillebert'
},
createdAt: 1554670800000,
status: 'Online'
},
{
id: 'ffc83c1560ec2f66a1c05596',
ref: 'DEV1044',
amount: 16.76,
customer: {
name: 'Adam Denisov'
},
createdAt: 1554670800000,
status: 'Online'
}
]}
sx={{ height: '100%' }}
/>
*/

93
frontend/src/pages/index.js
View File

@ -37,12 +37,6 @@ const Page = () => (
sm={6}
lg={3}
>
<OverviewBudget
difference={12}
positive
sx={{ height: '100%' }}
value="$24k"
/>
</Grid>
<Grid
xs={12}
@ -71,15 +65,62 @@ const Page = () => (
sm={6}
lg={3}
>
<OverviewTotalProfit
</Grid>
<Grid
xs={12}
lg={4}
>
<OverviewTraffic
chartSeries={[63, 15, 22]}
labels={['Cameras', 'Routers', 'Sensors']}
sx={{ height: '100%' }}
title={'Vendors'}
/>
</Grid>
<Grid
xs={12}
lg={4}
>
<OverviewTraffic
chartSeries={[88, 22]}
labels={['Online', 'Offline']}
sx={{ height: '100%' }}
title={'Status'}
/>
</Grid>
<Grid
xs={12}
//md={6}
lg={4}
>
<OverviewTraffic
chartSeries={[63, 15, 22]}
labels={['Cameras', 'Routers', 'Sensors']}
sx={{ height: '100%' }}
value="$15k"
title={'Devices Type'}
/>
</Grid>
<Grid
xs={12}
lg={8}
md={6}
lg={4}
>
</Grid>
</Grid>
</Container>
</Box>
</>
);
Page.getLayout = (page) => (
<DashboardLayout>
{page}
</DashboardLayout>
);
export default Page;
/*
<OverviewSales
chartSeries={[
{
@ -93,24 +134,7 @@ const Page = () => (
]}
sx={{ height: '100%' }}
/>
</Grid>
<Grid
xs={12}
md={6}
lg={4}
>
<OverviewTraffic
chartSeries={[63, 15, 22]}
labels={['Desktop', 'Tablet', 'Phone']}
sx={{ height: '100%' }}
/>
</Grid>
<Grid
xs={12}
md={6}
lg={4}
>
<OverviewLatestProducts
<OverviewLatestProducts
products={[
{
id: '5ece2c077e39da27658aa8a9',
@ -216,17 +240,4 @@ const Page = () => (
]}
sx={{ height: '100%' }}
/>
</Grid>
</Grid>
</Container>
</Box>
</>
);
Page.getLayout = (page) => (
<DashboardLayout>
{page}
</DashboardLayout>
);
export default Page;
*/

2
frontend/src/pages/settings.js
View File

@ -23,7 +23,7 @@ const Page = () => (
<Typography variant="h4">
Settings
</Typography>
<SettingsNotifications />
{/*<SettingsNotifications />*/}
<SettingsPassword />
</Stack>
</Container>

51
frontend/src/sections/overview/overview-latest-orders.js
View File

@ -1,6 +1,7 @@
import { format } from 'date-fns';
import PropTypes from 'prop-types';
import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
import ArrowTopRightOnSquareIcon from '@heroicons/react/24/solid/ArrowTopRightOnSquareIcon';
import {
Box,
Button,
@ -19,9 +20,9 @@ import { Scrollbar } from 'src/components/scrollbar';
import { SeverityPill } from 'src/components/severity-pill';
const statusMap = {
pending: 'warning',
delivered: 'success',
refunded: 'error'
Associando: 'warning',
Online: 'success',
Offline: 'error'
};
export const OverviewLatestOrders = (props) => {
@ -29,24 +30,27 @@ export const OverviewLatestOrders = (props) => {
return (
<Card sx={sx}>
<CardHeader title="Latest Orders" />
<CardHeader title="Devices" />
<Scrollbar sx={{ flexGrow: 1 }}>
<Box sx={{ minWidth: 800 }}>
<Table>
<TableHead>
<TableRow>
<TableCell>
Order
Model
</TableCell>
<TableCell>
Customer
</TableCell>
<TableCell sortDirection="desc">
Date
Vendor
</TableCell>
<TableCell>
Status
</TableCell>
<TableCell>
Acessar
</TableCell>
</TableRow>
</TableHead>
<TableBody>
@ -72,6 +76,11 @@ export const OverviewLatestOrders = (props) => {
{order.status}
</SeverityPill>
</TableCell>
<TableCell>
<SvgIcon fontSize="small" sx={{cursor:'pointer'}}>
<ArrowTopRightOnSquareIcon />
</SvgIcon>
</TableCell>
</TableRow>
);
})}
@ -79,21 +88,21 @@ export const OverviewLatestOrders = (props) => {
</Table>
</Box>
</Scrollbar>
<Divider />
<CardActions sx={{ justifyContent: 'flex-end' }}>
<Button
color="inherit"
endIcon={(
<SvgIcon fontSize="small">
<ArrowRightIcon />
</SvgIcon>
)}
size="small"
variant="text"
>
View all
</Button>
</CardActions>
{/*<Divider />
<CardActions sx={{ justifyContent: 'flex-end' }}>
<Button
color="inherit"
endIcon={(
<SvgIcon fontSize="small">
<ArrowRightIcon />
</SvgIcon>
)}
size="small"
variant="text"
>
View all
</Button>
</CardActions>*/}
</Card>
);
};

11
frontend/src/sections/overview/overview-tasks-progress.js
View File

@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import ListBulletIcon from '@heroicons/react/24/solid/ListBulletIcon';
import Signal from '@heroicons/react/24/solid/SignalIcon';
import {
Avatar,
Box,
@ -25,25 +26,25 @@ export const OverviewTasksProgress = (props) => {
>
<Stack spacing={1}>
<Typography
color="text.secondary"
color="sucess.main"
gutterBottom
variant="overline"
>
Task Progress
Conexão MQTT
</Typography>
<Typography variant="h4">
{value}%
{value}ms
</Typography>
</Stack>
<Avatar
sx={{
backgroundColor: 'warning.main',
backgroundColor: '#f28950',
height: 56,
width: 56
}}
>
<SvgIcon>
<ListBulletIcon />
<Signal />
</SvgIcon>
</Avatar>
</Stack>

7
frontend/src/sections/overview/overview-total-customers.js
View File

@ -3,6 +3,7 @@ import ArrowDownIcon from '@heroicons/react/24/solid/ArrowDownIcon';
import ArrowUpIcon from '@heroicons/react/24/solid/ArrowUpIcon';
import UsersIcon from '@heroicons/react/24/solid/UsersIcon';
import { Avatar, Card, CardContent, Stack, SvgIcon, Typography } from '@mui/material';
import CpuChipIcon from '@heroicons/react/24/solid/CpuChipIcon';
export const OverviewTotalCustomers = (props) => {
const { difference, positive = false, sx, value } = props;
@ -21,7 +22,7 @@ export const OverviewTotalCustomers = (props) => {
color="text.secondary"
variant="overline"
>
Total Customers
Total Devices
</Typography>
<Typography variant="h4">
{value}
@ -29,13 +30,13 @@ export const OverviewTotalCustomers = (props) => {
</Stack>
<Avatar
sx={{
backgroundColor: 'success.main',
backgroundColor: 'indigo.main',
height: 56,
width: 56
}}
>
<SvgIcon>
<UsersIcon />
<CpuChipIcon />
</SvgIcon>
</Avatar>
</Stack>

33
frontend/src/sections/overview/overview-traffic.js
View File

@ -14,18 +14,12 @@ import {
} from '@mui/material';
import { Chart } from 'src/components/chart';
const useChartOptions = (labels) => {
const useChartOptions = (labels,title) => {
const theme = useTheme();
return {
let options = {
chart: {
background: 'transparent'
},
colors: [
theme.palette.primary.main,
theme.palette.success.main,
theme.palette.warning.main
],
dataLabels: {
enabled: false
},
@ -60,6 +54,19 @@ const useChartOptions = (labels) => {
fillSeriesColor: false
}
};
if(title === "Status"){
options.colors = [
theme.palette.success.main,
theme.palette.error.main,
]
}else{
options.colors = [
theme.palette.primary.main,
theme.palette.info.main,
theme.palette.warning.main
]
}
return options
};
const iconMap = {
@ -81,12 +88,14 @@ const iconMap = {
};
export const OverviewTraffic = (props) => {
const { chartSeries, labels, sx } = props;
const chartOptions = useChartOptions(labels);
const { chartSeries, labels, sx, title } = props;
const chartOptions = useChartOptions(labels,title);
return (
<Card sx={sx}>
<CardHeader title="Traffic Source" />
<div style={{display:'flex',justifyContent:'center'}}>
<CardHeader title={title} />
</div>
<CardContent>
<Chart
height={300}
@ -117,7 +126,7 @@ export const OverviewTraffic = (props) => {
{iconMap[label]}
<Typography
sx={{ my: 1 }}
variant="h6"
variant="h8"
>
{label}
</Typography>

2
frontend/src/theme/colors.js
View File

@ -12,7 +12,7 @@ const withAlphas = (color) => {
};
export const neutral = {
50: '#F8F9FA',
50: '#306d6f',
100: '#F3F4F6',
200: '#E5E7EB',
300: '#D2D6DB',