chore: static frontend layout

frontend/src/layouts/dashboard/config.js

@@ -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',
+    title: 'Devices',
-    path: '/customers',
+    path: '/devices',
     icon: (
       <SvgIcon fontSize="small">
-        <UsersIcon />
+       <CpuChip/>
-      </SvgIcon>
-    )
-  },
-  {
-    title: 'Companies',
-    path: '/companies',
-    icon: (
-      <SvgIcon fontSize="small">
-        <ShoppingBagIcon />
-      </SvgIcon>
-    )
-  },
-  {
-    title: 'Account',
-    path: '/account',
-    icon: (
-      <SvgIcon fontSize="small">
-        <UserIcon />
       </SvgIcon>
     )
   },
@@ -54,12 +37,24 @@ export const items = [
       </SvgIcon>
     )
   },
+];
+
+/*
   {
-    title: 'Login',
+    title: 'Customers',
-    path: '/auth/login',
+    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>
     )
   }
-];
+*/ 

frontend/src/layouts/dashboard/side-nav-item.js

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

frontend/src/layouts/dashboard/top-nav.js

@@ -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>*/}
-            <Tooltip title="Notifications">
+            {/*<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}

frontend/src/pages/auth/login.js

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

frontend/src/pages/devices.js

@@ -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%' }}
+            />
+*/

frontend/src/pages/index.js

@@ -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>
+                        <OverviewLatestProducts
-          <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
               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;

frontend/src/pages/settings.js

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

frontend/src/sections/overview/overview-latest-orders.js

@@ -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',
+  Associando: 'warning',
-  delivered: 'success',
+  Online: 'success',
-  refunded: 'error'
+  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 />
+      {/*<Divider />
-      <CardActions sx={{ justifyContent: 'flex-end' }}>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
-        <Button
+          <Button
-          color="inherit"
+            color="inherit"
-          endIcon={(
+            endIcon={(
-            <SvgIcon fontSize="small">
+              <SvgIcon fontSize="small">
-              <ArrowRightIcon />
+                <ArrowRightIcon />
-            </SvgIcon>
+              </SvgIcon>
-          )}
+            )}
-          size="small"
+            size="small"
-          variant="text"
+            variant="text"
-        >
+          >
-          View all
+            View all
-        </Button>
+          </Button>
-      </CardActions>
+            </CardActions>*/}
     </Card>
   );
 };

frontend/src/sections/overview/overview-tasks-progress.js

@@ -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>

frontend/src/sections/overview/overview-total-customers.js

@@ -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>

frontend/src/sections/overview/overview-traffic.js

@@ -14,18 +14,12 @@ import {
 } from '@mui/material';
 import { Chart } from 'src/components/chart';
 
-const useChartOptions = (labels) => {
+const useChartOptions = (labels,title) => {
   const theme = useTheme();
-
+  let options =  {
-  return {
     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 { chartSeries, labels, sx, title } = props;
-  const chartOptions = useChartOptions(labels);
+  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>

frontend/src/theme/colors.js

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