Merge branch 'upgrade_device' into staging_environment

src/common/SmartBreadcrumb.tsx

@@ -7,11 +7,12 @@ import {
   LinkProps,
   Skeleton,
   Theme,
+  Typography,
   useTheme
 } from "@mui/material";
 import { Replay } from "@mui/icons-material";
 import { useMobile } from "hooks";
-import { ReactNode, useEffect, useRef } from "react";
+import { ReactNode } from "react";
 import { useLocation } from "react-router";
 import { Link as RouterLink } from "react-router-dom";
 import { or } from "utils/types";
@@ -57,11 +58,13 @@ interface Props {
   paddingTop?: number;
   paddingBottom?: number;
   prependPaths?: string[];
+  state?: any;
 }
 
 interface LinkRouterProps extends LinkProps {
   to: string;
   replace?: boolean;
+  state?: any;
 }
 
 const LinkRouter = (props: LinkRouterProps) => <Link {...props} component={RouterLink as any} />;
@@ -72,7 +75,7 @@ export default function SmartBreadcrumb(props: Props) {
   const location = useLocation();
   const isMobile = useMobile();
   const classes = useStyles();
-  const { loading, reload } = props;
+  const { loading, reload, state } = props;
 
   const groupID = (): string => {
     let index = prependPaths?.indexOf("groups")
@@ -289,7 +292,7 @@ export default function SmartBreadcrumb(props: Props) {
     
     if (prependPaths) pathnames.splice(pathnames.length - 1, 0, ...prependPaths);
 
-    pathnames.forEach((_value: any, index: any) => {
+    pathnames.forEach((value: any, index: any) => {
       
       const lastPath = index === pathnames.length - 1;
       const to = `/${pathnames.slice(0, index + 1).join("/")}`;
@@ -310,6 +313,21 @@ export default function SmartBreadcrumb(props: Props) {
         links.push(linkComponent(to, label, lastPath));
       }
 
+      if (value === "support") {
+        links.push(
+          <Chip
+            key={"support-chip"}
+            variant={"filled"}
+            label={
+              <Typography variant="subtitle1" color="textPrimary">
+                Support
+              </Typography>
+            }
+            className={classes.chip}
+          />
+        )
+      }
+
     });
     return links;
   };
@@ -324,6 +342,7 @@ export default function SmartBreadcrumb(props: Props) {
             color={lastPath ? "textPrimary" : "textSecondary"}
             variant="subtitle1"
             to={to}
+            state={state}
             sx={{ '&:hover': { color: getThemeType() === "dark" ? 'white' : "black" }}}
             className={classes.textOverflow}>
             {label}

src/common/StatusSen5x.tsx

@@ -176,12 +176,12 @@ export default function StatusPlenum(props: Props) {
           >
             <Grid2>
               <Typography variant="body2" style={{ color: blue[300]}}>
-                {device.status.sen5x?.voc.toFixed(1)}%
+                V: {device.status.sen5x?.voc.toFixed(1)}%
               </Typography>
             </Grid2>
             <Grid2>
               <Typography variant="body2" style={{ color: blue[400]}}>
-                {device.status.sen5x?.nox.toFixed(1)}%
+                N: {device.status.sen5x?.nox.toFixed(1)}%
               </Typography>
             </Grid2>
           </Grid2>