feat(frontend): devices page in progress

frontend/src/pages/devices.js

@@ -43,7 +43,7 @@ const Page = () => (
                                 name: 'Ekaterina Tankova'
                             },
                             createdAt: 1555016400000,
-                            status: 'Associando'
+                            status: 'Associating'
                         },
                         {
                             id: '9eaa1c7dd4433f413c308ce2',
@@ -73,7 +73,7 @@ const Page = () => (
                                 name: 'Anje Keizer'
                             },
                             createdAt: 1554757200000,
-                            status: 'Associando'
+                            status: 'Associating'
                         },
                         {
                             id: '9f974f239d29ede969367103',

frontend/src/pages/devices/[id].js

@@ -0,0 +1,11 @@
+import { useRouter } from 'next/router'
+
+const Page = () => {
+    const router = useRouter()
+    const { id } = router.query
+
+    return <p>Device: {id}</p>
+}
+    
+
+export default Page;

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

@@ -18,9 +18,10 @@ import {
 } from '@mui/material';
 import { Scrollbar } from 'src/components/scrollbar';
 import { SeverityPill } from 'src/components/severity-pill';
+import { useRouter } from 'next/router';
 
 const statusMap = {
-  Associando: 'warning',
+  Associating: 'warning',
   Online: 'success',
   Offline: 'error'
 };
@@ -28,6 +29,8 @@ const statusMap = {
 export const OverviewLatestOrders = (props) => {
   const { orders = [], sx } = props;
 
+  const router = useRouter()
+
   return (
     <Card sx={sx}>
       <CardHeader title="Devices" />
@@ -49,7 +52,7 @@ export const OverviewLatestOrders = (props) => {
                   Status
                 </TableCell>
                 <TableCell>
-                  Acessar
+                  Access
                 </TableCell>
               </TableRow>
             </TableHead>
@@ -77,7 +80,7 @@ export const OverviewLatestOrders = (props) => {
                       </SeverityPill>
                     </TableCell>
                     <TableCell>
-                    <SvgIcon fontSize="small" sx={{cursor:'pointer'}}>
+                    <SvgIcon fontSize="small" sx={{cursor:'pointer'}} onClick={()=>router.push("devices/"+order.id)}>
                       <ArrowTopRightOnSquareIcon />
                     </SvgIcon>
                     </TableCell>