added status plenum to display plenum data, added pulseBox to extend the mui box and give it a pulsing animation of a given color

src/common/DraggableTabs.tsx

@@ -1,4 +1,4 @@
-import { darken, Tabs, TabsProps } from "@mui/material";
+import { Tabs, TabsProps } from "@mui/material";
 import React, { useEffect, useState, useRef } from "react";
 // import AnimatedTabs from "./AnimatedTabs";
 

src/common/PulseBox.tsx

@@ -0,0 +1,56 @@
+import { Box, BoxProps, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import classNames from "classnames";
+import { ReactNode } from "react";
+
+const useStyles = makeStyles((_theme: Theme) => ({
+  pulseWrapper: {
+    position: 'relative',
+    display: 'block', // Changed to block to respect Box margins
+    width: 'fit-content', // Shrinks to child width
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      border: '2px solid var(--pulse-color)',
+      borderRadius: 'inherit', // Should inherit from Box
+      animation: '$pulse 1.5s infinite ease-in-out',
+      pointerEvents: 'none',
+      boxSizing: 'border-box',
+    },
+  },
+  '@keyframes pulse': {
+    from: {
+      transform: "scale(1)",
+      opacity: 1
+    },
+    to: {
+      transform: "scale(1.25)",
+      opacity: 0
+    }
+  },
+}));
+
+interface Props extends BoxProps {
+  color: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export default function PulseBox(props: Props) {
+  const { color, children, className, ...boxProps } = props;
+  const classes = useStyles()
+
+  return (
+    <Box 
+      {...boxProps}
+      className={classNames([classes.pulseWrapper, className])} 
+      style={{ '--pulse-color': color } as React.CSSProperties}
+    >
+      {children}
+    </Box>
+  );
+};

src/common/ResponsiveTable.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles((theme: Theme) => {
   // const isMobile = useMobile()
   return ({
     gutter: {
-      backgroundColor: darken(theme.palette.background.paper, 0.03),
+      backgroundColor: darken(theme.palette.background.paper, 0.05),
       border: "none"
     },
     tableContainer: {
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme: Theme) => {
     rowHover: {
       cursor: "pointer",
       "&:hover": {
-        backgroundColor: "rgba(150, 150, 150, 0.05)"
+        backgroundColor: "rgba(150, 150, 150, 0.15)"
       }
     }
   })},
@@ -323,7 +323,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                 sx={{ 
                   width: "100%", 
                   display: "flex", 
-                  justifyContent: "center"
+                  justifyContent: "center",
                 }} 
                 onClick={(event) => handleCollapse(index, event)} 
                 // style={{pre}}

src/common/StatusPlenum.tsx

@@ -0,0 +1,51 @@
+import { Grid2, Theme, Typography } from "@mui/material";
+import { blue, orange } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+import { Device } from "models";
+import PulseBox from "./PulseBox";
+
+interface Props {
+  device: Device
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  const lightMode = theme.palette?.mode === "light";
+  return ({
+    box: {
+      display: "inline-block",
+      borderRadius: "6px",
+      backgroundColor: lightMode ? "rgb(170, 170, 170)" : "rgb(34, 34, 34)",
+      padding: theme.spacing(0.5),
+      marginRight: "auto",
+      margin: theme.spacing(1),
+    },
+    pulse: {
+      // padding: theme.spacing(2)
+      paddingLeft: theme.spacing(-6)
+    }
+  })
+})
+
+export default function StatusPlenum(props: Props) {
+  const { device } = props;
+  const classes = useStyles()
+
+  return (
+    <PulseBox color="blue" className={classes.box} >
+      {/* <Box className={classes.box}> */}
+        <Grid2 container direction="column" >
+          <Grid2>
+            <Typography variant="body2" style={{ color: orange[500]}}>
+              {device.status.plenum?.temperature.toFixed(1)}°C
+            </Typography>
+          </Grid2>
+          <Grid2>
+            <Typography variant="body2" style={{ color: blue[800]}}>
+              {device.status.plenum?.humidity.toFixed(1)}%
+            </Typography>
+          </Grid2>
+        </Grid2>
+      {/* </Box> */}
+    </PulseBox>
+  )
+}

src/pages/Devices.tsx

@@ -22,6 +22,7 @@ import BindaptIcon from "products/Bindapt/BindaptIcon";
 import { describePower } from "pbHelpers/Power";
 import { Tag as TagUI } from "common/Tag";
 import moment from "moment";
+import StatusPlenum from "common/StatusPlenum";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -214,6 +215,8 @@ export default function Devices() {
     ).then(resp => {
       let newDevices: Device[] = []
       resp.data.devices.forEach(device => {
+        console.log(device.status)
+        console.log(device.status?.plenum?.overlays)
         if (device.status?.plenum?.temperature) {
           setHasPlenums(true)
         }
@@ -325,18 +328,9 @@ export default function Devices() {
         render: (device: Device) => {
           if (device.status.plenum?.temperature) {
             return (
-              <Grid2 container direction="column" marginLeft={2}>
-                <Grid2>
-                  <Typography variant="body2" style={{ color: orange[300]}}>
-                    {device.status.plenum.temperature.toFixed(1)}°C
-                  </Typography>
-                </Grid2>
-                <Grid2>
-                  <Typography variant="body2" color="info">
-                    {device.status.plenum.humidity.toFixed(1)}%
-                  </Typography>
-                </Grid2>
-              </Grid2>
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusPlenum device={device} />
+              </Box>
             )
           } else {
             return (