From af4cc08d870b493177ad0576065c729194d2a2eb Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 21 Feb 2025 15:47:45 -0600
Subject: [PATCH] component cards imported

---
 src/component/AddCompsFromDiag.tsx       |  33 ++-
 src/component/ComponentActions.tsx       |  33 ++-
 src/component/UnitMeasurementSummary.tsx |  29 +--
 src/pages/Device.tsx                     | 297 +++++++++++++++++++++--
 4 files changed, 330 insertions(+), 62 deletions(-)

diff --git a/src/component/AddCompsFromDiag.tsx b/src/component/AddCompsFromDiag.tsx
index 38940f3..fcd1457 100644
--- a/src/component/AddCompsFromDiag.tsx
+++ b/src/component/AddCompsFromDiag.tsx
@@ -3,12 +3,10 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  makeStyles,
   Step,
   StepLabel,
   Stepper,
-  createStyles,
-  Grid,
+  Grid2 as Grid,
   FormControlLabel,
   Switch,
   Table,
@@ -19,19 +17,20 @@ import {
   Box,
   Typography,
   Checkbox
-} from "@material-ui/core";
+} from "@mui/material";
 
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { Component, Device } from "models";
 import { pond, quack } from "protobuf-ts/pond";
 import { useComponentAPI, useSnackbar } from "providers";
 import React, { useEffect, useState } from "react";
-import { getThemeType } from "theme";
 import { CableInfo } from "./ComponentDiagnostics";
 import ComponentForm from "./ComponentForm";
+import { getThemeType } from "theme/themeType";
+import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles(() =>
-  createStyles({
+const useStyles = makeStyles(() => {
+  return ({
     buttons: {
       marginLeft: 5,
       marginRight: 5
@@ -48,7 +47,7 @@ const useStyles = makeStyles(() =>
       padding: 0
     }
   })
-);
+});
 
 interface Props {
   open: boolean;
@@ -147,8 +146,8 @@ export default function AddCompsFromDiag(props: Props) {
   const simpleActions = () => {
     return (
       <DialogActions>
-        <Grid container direction="row" justify="space-between">
-          <Grid item>
+        <Grid container direction="row" justifyContent="space-between">
+          <Grid>
             <Button
               variant="contained"
               color="primary"
@@ -158,7 +157,7 @@ export default function AddCompsFromDiag(props: Props) {
               Cancel
             </Button>
           </Grid>
-          <Grid item>
+          <Grid>
             <Button
               className={classes.buttons}
               variant="contained"
@@ -177,8 +176,8 @@ export default function AddCompsFromDiag(props: Props) {
   const advancedActions = () => {
     return (
       <DialogActions>
-        <Grid container direction="row" justify="space-between">
-          <Grid item>
+        <Grid container direction="row" justifyContent="space-between">
+          <Grid>
             <Button
               variant="contained"
               color="primary"
@@ -188,7 +187,7 @@ export default function AddCompsFromDiag(props: Props) {
               Cancel
             </Button>
           </Grid>
-          <Grid item>
+          <Grid>
             {currentStep !== 0 && (
               <Button
                 className={classes.buttons}
@@ -328,9 +327,9 @@ export default function AddCompsFromDiag(props: Props) {
           close();
         }}>
         <DialogTitle>
-          <Grid container direction="row" justify="space-between">
-            <Grid item>Port {port} Components</Grid>
-            <Grid item>
+          <Grid container direction="row" justifyContent="space-between">
+            <Grid >Port {port} Components</Grid>
+            <Grid >
               <FormControlLabel
                 control={
                   <Switch
diff --git a/src/component/ComponentActions.tsx b/src/component/ComponentActions.tsx
index e5e467c..8556652 100644
--- a/src/component/ComponentActions.tsx
+++ b/src/component/ComponentActions.tsx
@@ -1,17 +1,14 @@
 import {
-  createStyles,
   Divider,
   IconButton,
   ListItemIcon,
   ListItemText,
-  makeStyles,
   Menu,
   MenuItem,
+  Theme,
   Tooltip
-} from "@material-ui/core";
-import { green, teal } from "@material-ui/core/colors";
-import { Theme } from "@material-ui/core/styles/createMuiTheme";
-import { AddCircle, DeleteOutline, MoreVert, SaveAlt, Settings } from "@material-ui/icons";
+} from "@mui/material";
+import { AddCircle, DeleteOutline, MoreVert, SaveAlt, Settings } from "@mui/icons-material";
 import ExportDataSettings from "component/ExportDataSettings";
 import InteractionSettings from "interactions/InteractionSettings";
 import { Component, Device } from "models";
@@ -23,9 +20,11 @@ import { useGlobalState } from "providers";
 import React, { useState } from "react";
 import { or } from "utils/types";
 import ComponentSettings from "./ComponentSettings";
+import { green, teal } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((_theme: Theme) => {
+  return ({
     addIcon: {
       color: green["500"],
       "&:hover": {
@@ -48,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) =>
       color: "var(--status-alert)"
     }
   })
-);
+});
 
 interface Props {
   device: Device;
@@ -83,7 +82,7 @@ export default function ComponentActions(props: Props) {
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
   const [componentSettingsMode, setComponentSettingsMode] = useState<string>("");
   const [isJSON, setIsJSON] = useState(false);
-  const [{ user, newStructure }] = useGlobalState();
+  const [{ user }] = useGlobalState();
 
   const openMoreMenu = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     setAnchorEl(event.currentTarget);
@@ -115,7 +114,7 @@ export default function ComponentActions(props: Props) {
         onClose={closeMoreMenu}
         disableAutoFocusItem>
         {canAddInteraction && (
-          <MenuItem dense onClick={() => setIsAddInteractionOpen(true)} button divider>
+          <MenuItem dense onClick={() => setIsAddInteractionOpen(true)} divider>
             <ListItemIcon>
               <AddCircle className={classes.addIcon} />
             </ListItemIcon>
@@ -129,7 +128,7 @@ export default function ComponentActions(props: Props) {
             setIsExportDataOpen(true);
           }}>
           <ListItemIcon>
-            <SaveAlt fontSize="default" className={classes.exportDataIcon} />
+            <SaveAlt  className={classes.exportDataIcon} />
           </ListItemIcon>
           <ListItemText primary="Export Data" />
         </MenuItem>
@@ -137,7 +136,7 @@ export default function ComponentActions(props: Props) {
         {canEdit && (
           <MenuItem dense onClick={() => openComponentSettingsDialog("remove")}>
             <ListItemIcon>
-              <DeleteOutline fontSize="default" className={classes.red} />
+              <DeleteOutline  className={classes.red} />
             </ListItemIcon>
             <ListItemText primary="Delete" />
           </MenuItem>
@@ -173,7 +172,7 @@ export default function ComponentActions(props: Props) {
           refreshCallback={refreshCallback}
           canEdit={canEdit}
         />
-        <ExportDataSettings
+        {/* <ExportDataSettings
           device={device}
           component={component}
           isDialogOpen={isExportDataOpen}
@@ -181,9 +180,9 @@ export default function ComponentActions(props: Props) {
           initialStartDate={initialStartDate}
           initialEndDate={initialEndDate}
           isJSON={isJSON}
-          newMeasurements={newStructure}
+          // newMeasurements={newStructure}
           user={user}
-        />
+        /> */}
       </React.Fragment>
     );
   };
@@ -195,7 +194,7 @@ export default function ComponentActions(props: Props) {
         aria-label="Component Settings"
         onOpen={event => event.stopPropagation()}>
         <IconButton color="default" onClick={() => openComponentSettingsDialog("")}>
-          <Settings fontSize="default" />
+          <Settings  />
         </IconButton>
       </Tooltip>
       <Tooltip title="More">
diff --git a/src/component/UnitMeasurementSummary.tsx b/src/component/UnitMeasurementSummary.tsx
index 2c1eec5..f9a1d03 100644
--- a/src/component/UnitMeasurementSummary.tsx
+++ b/src/component/UnitMeasurementSummary.tsx
@@ -1,15 +1,16 @@
-import { Box, Grid, Typography, makeStyles, createStyles, Theme } from "@material-ui/core";
+import { Box, Grid2 as Grid, Typography, Theme, Divider } from "@mui/material";
 import GrainDescriber from "grain/GrainDescriber";
 import { Component } from "models";
 import { convertedUnitMeasurement } from "models/UnitMeasurement";
 import moment from "moment";
 import { pond } from "protobuf-ts/pond";
 import React, { useEffect, useState } from "react";
-import Divider from "@material-ui/core/Divider";
+// import Divider from "@material-ui/core/Divider";
 import { Plenum } from "models/Plenum";
 import { Pressure } from "models/Pressure";
 import { GrainCable } from "models/GrainCable";
 import { extension, Summary } from "pbHelpers/ComponentType";
+import { makeStyles } from "@mui/styles";
 
 interface Props {
   component: Component | Plenum | Pressure | GrainCable;
@@ -24,8 +25,8 @@ interface Props {
   excludedNodes?: number[];
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     "@keyframes ripple": {
       from: {
         transform: "scale(.8)",
@@ -50,7 +51,7 @@ const useStyles = makeStyles((theme: Theme) =>
       margin: theme.spacing(1)
     }
   })
-);
+});
 
 export default function UnitMeasurementSummary(props: Props) {
   const {
@@ -112,7 +113,7 @@ export default function UnitMeasurementSummary(props: Props) {
     let grain = GrainDescriber(component.settings.grainType);
     return (
       <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Typography variant={largeText ? "body1" : "caption"} color="textPrimary">
             {summaries.map((summary: Summary, index: number) => {
               let sumVal = summary.value;
@@ -133,7 +134,7 @@ export default function UnitMeasurementSummary(props: Props) {
                 if (found) {
                   overlays.push(
                     <React.Fragment key={"overlay" + index}>
-                      <Grid item>
+                      <Grid >
                         <Box
                           width="20px"
                           height="20px"
@@ -142,7 +143,7 @@ export default function UnitMeasurementSummary(props: Props) {
                           style={{ background: overlay.colour }}
                         />
                       </Grid>
-                      <Grid item>
+                      <Grid >
                         <Typography
                           variant={largeText ? "body1" : "caption"}
                           component="span"
@@ -178,7 +179,7 @@ export default function UnitMeasurementSummary(props: Props) {
             </Typography>
           )}
         {!props.omitTime && (
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <Typography color="textSecondary" variant={largeText ? "body1" : "caption"}>
               {moment(timestamp).fromNow()}
             </Typography>
@@ -186,7 +187,7 @@ export default function UnitMeasurementSummary(props: Props) {
         )}
         {overlays.length > 0 && (
           <React.Fragment>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Divider variant="middle" className={classes.divider} />
             </Grid>
             <Grid container direction="row">
@@ -205,11 +206,11 @@ export default function UnitMeasurementSummary(props: Props) {
     const blacklist: Array<any> = [];
     const filteredSummaries = summaries.filter((item: any) => !blacklist.includes(item.label));
     return (
-      <Grid container direction="row" justify={centered ? "center" : "flex-start"} spacing={1}>
+      <Grid container direction="row" justifyContent={centered ? "center" : "flex-start"} spacing={1}>
         {filteredSummaries.map((summary: Summary, i: number) => {
           let sumVal = summary.value;
           return (
-            <Grid item key={"summary-" + i}>
+            <Grid key={"summary-" + i}>
               {summary.label}
               {summary.error && <span style={{ color: "red" }}>{" [error(s)]"}</span>}
               {": "}
@@ -257,7 +258,7 @@ export default function UnitMeasurementSummary(props: Props) {
             if (found) {
               overlays.push(
                 <React.Fragment key={"overlay" + i}>
-                  <Grid item>
+                  <Grid >
                     <Box
                       width="20px"
                       height="20px"
@@ -266,7 +267,7 @@ export default function UnitMeasurementSummary(props: Props) {
                       style={{ background: overlay.colour }}
                     />
                   </Grid>
-                  <Grid item>
+                  <Grid >
                     <Typography
                       variant={largeText ? "body1" : "caption"}
                       component="span"
diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx
index 0c11b0d..c0d1a90 100644
--- a/src/pages/Device.tsx
+++ b/src/pages/Device.tsx
@@ -1,5 +1,5 @@
-import { Button, Grid2 } from "@mui/material";
-import { Component, Device, User } from "models";
+import { Button, Checkbox, Divider, FormControlLabel, Grid2 as Grid, List, ListItem, Typography } from "@mui/material";
+import { Component, Device, Interaction, User } from "models";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { useDeviceAPI, useGlobalState, useSnackbar } from "providers";
 import { useEffect, useState } from "react";
@@ -9,11 +9,16 @@ import { useMobile } from "hooks";
 import LoadingScreen from "app/LoadingScreen";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import DeviceActions from "device/DeviceActions";
-import { pond } from "protobuf-ts/pond";
+import { pond, quack } from "protobuf-ts/pond";
 import { cloneDeep } from "lodash";
 import DeviceOverview from "device/DeviceOverview";
 import { DeviceAvailabilityMap, FindAvailablePositions, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
 import AddComponentManualDialog from "component/AddComponentManualDialog"; 
+import ComponentCard from "component/ComponentCard";
+import { sameComponentID, sortComponents } from "pbHelpers/Component";
+import { isController } from "pbHelpers/ComponentType";
+import { or } from "utils";
+import ComponentDiagnostics from "component/ComponentDiagnostics";
 
 export default function DevicePage() {
   const deviceAPI = useDeviceAPI()
@@ -28,15 +33,19 @@ export default function DevicePage() {
   const [permissions, setPermissions] = useState<pond.Permission[]>([])
   const [preferences, setPreferences] = useState<pond.DevicePreferences>(pond.DevicePreferences.create())
   const [tags, setTags] = useState<pond.Tag[]>([]);
+  const [interactions, setInteractions] = useState<Interaction[]>([]);
+  const [prefsMap, setPrefsMap] = useState<Map<string, pond.DeviceComponentPreferences>>(new Map());
 
   const [cellularUsage, _setCellularUsage] = useState<number>(0);
   const [cellularStatus, _setCellularStatus] = useState<string>("");
 
   const [availablePositions, setAvailablePositions] = useState<DeviceAvailabilityMap>(new Map());
   const [availableOffsets, setAvailableOffsets] = useState<OffsetAvailabilityMap>(new Map());
+  const [displayOrder, setDisplayOrder] = useState<string[]>([]);
 
-  // const [components, setComponents] = useState<Map<string, Component>>(new Map());
-  const [components, setComponents] = useState<Component[]>([]);
+  const [components, setComponents] = useState<Map<string, Component>>(new Map());
+  const [diagnosticComponents, setDiagnosticComponents] = useState<Component[]>([]);
+  // const [components, setComponents] = useState<Component[]>([]);
 
   const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
 
@@ -70,7 +79,42 @@ export default function DevicePage() {
         device.settings.product
       );
       setAvailablePositions(available.GetAvailability());
-      setComponents(newComps)
+      let rawComponents: Array<any> = or(resp.data.components, []);
+      let rComponents: Map<string, Component> = new Map();
+      let diagComponents: Component[] = [];
+      rawComponents.forEach((rawComponent: any) => {
+        let component = Component.any(rawComponent);
+        rComponents.set(component.key(), component);
+        //check if is a diagnostic component
+        switch (component.type()) {
+          case quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE:
+            if (component.subType() === quack.GrainCableSubtype.GRAIN_CABLE_SUBTYPE_OPI_DIAG) {
+              diagComponents.push(component);
+            }
+        }
+      });
+      setComponents(rComponents)
+      let interactions: Interaction[] = [];
+      resp.data.interactions.forEach((interaction: pond.Interaction) => {
+        if (
+          interaction.settings &&
+          interaction.settings.nodeOne > interaction.settings.nodeTwo &&
+          interaction.settings.nodeTwo !== 0
+        ) {
+          //flip operator and send negative comparitor to save
+          interaction.settings.conditions.forEach(condition => {
+            //coming back from the backend as a string for some reason
+            if (condition.comparison.toString() === "RELATIONAL_OPERATOR_GREATER_THAN") {
+              condition.comparison = quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN;
+            } else {
+              condition.comparison = quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN;
+            }
+            condition.value = condition.value * -1;
+          });
+        }
+        interactions.push(Interaction.any(interaction));
+      });
+      setInteractions(interactions);
     }).catch(err => {
       setDevice(Device.create());
       // setComponents(new Map());
@@ -95,6 +139,10 @@ export default function DevicePage() {
     .finally(() => setLoading(false));
   }
 
+  useEffect(() => {
+    console.log(components)
+  }, [components])
+
   useEffect(() => {
     loadDevice()
   }, [deviceID])
@@ -126,13 +174,233 @@ export default function DevicePage() {
     return usage;
   };
 
+  const displayedComponentsBlacklist = [
+    quack.ComponentType.COMPONENT_TYPE_POWER,
+    quack.ComponentType.COMPONENT_TYPE_MODEM
+  ];
+
+  const getOrderedComponents = () => {
+    let compsToOrder: Component[] = [];
+    Array.from(components.values()).forEach(comp => {
+      if (!displayedComponentsBlacklist.includes(comp.settings.type)) {
+        compsToOrder.push(comp);
+      }
+    });
+    if (displayOrder.length === compsToOrder.length) {
+      return compsToOrder.sort((a, b: Component) => sortComponents(a, b, displayOrder));
+    } else {
+      return compsToOrder;
+    }
+  };
+
+  const handleComponentChanged = (component: Component) => {
+    let updatedComponents = cloneDeep(components);
+    let updatedComponent = cloneDeep(component);
+    if (updatedComponents.has(updatedComponent.key())) {
+      updatedComponents.set(updatedComponent.key(), updatedComponent);
+      setComponents(updatedComponents);
+    }
+  };
+
+  const componentCards = () => {
+    let orderedComponents = getOrderedComponents();
+    let sensorComponents: JSX.Element[] = [];
+    let controllerComponents: JSX.Element[] = [];
+    //let componentCards = [];
+    //let hasGPS = false;
+    for (let i = 0; i < orderedComponents.length; i++) {
+      let c = orderedComponents[i];
+      if (displayedComponentsBlacklist.includes(c.settings.type)) {
+        continue;
+      }
+      let id: quack.IComponentID = quack.ComponentID.fromObject({
+        type: c.settings.type,
+        addressType: c.settings.addressType,
+        address: c.settings.address
+      });
+      let filteredInteractions = interactions.filter(interaction => {
+        let isSource = false;
+        let isSink = false;
+        if (interaction.settings) {
+          isSource = sameComponentID(interaction.settings.source, id);
+          isSink = sameComponentID(interaction.settings.sink, id);
+        }
+        return isSource || isSink;
+      });
+      // if (id.type === quack.ComponentType.COMPONENT_TYPE_GPS) {
+      //   hasGPS = true;
+      // }
+      if (isController(c.settings.type)) {
+        controllerComponents.push(
+          <ComponentCard
+            device={device}
+            availablePositions={availablePositions}
+            availableOffsets={availableOffsets}
+            component={c}
+            components={orderedComponents}
+            interactions={filteredInteractions}
+            permissions={permissions}
+            deviceComponentPreferences={prefsMap.get(c.key())}
+            key={i}
+            refreshCallback={(updatedComponent?: Component) =>
+              updatedComponent ? handleComponentChanged(updatedComponent) : loadDevice()
+            }
+          />
+        );
+      } else {
+        sensorComponents.push(
+          <ComponentCard
+            device={device}
+            availablePositions={availablePositions}
+            availableOffsets={availableOffsets}
+            component={c}
+            components={orderedComponents}
+            interactions={filteredInteractions}
+            permissions={permissions}
+            deviceComponentPreferences={prefsMap.get(c.key())}
+            key={i}
+            refreshCallback={(updatedComponent?: Component) =>
+              updatedComponent ? handleComponentChanged(updatedComponent) : loadDevice()
+            }
+          />
+        );
+      }
+    }
+    return (
+      <List>
+        <li>
+          <Grid container direction="row" justifyContent="space-between">
+            <Grid >
+              <Typography display="block" variant="h6">
+                Sensors
+              </Typography>
+            </Grid>
+            <Grid >
+              {/* <FormControlLabel
+                label="Show Errors"
+                control={
+                  <Checkbox
+                    checked={showErrors}
+                    onChange={() => {
+                      //setShowErrors(!showErrors);
+                      dispatch({ key: "showErrors", value: !showErrors });
+                    }}
+                  />
+                }
+              /> */}
+            </Grid>
+          </Grid>
+        </li>
+        <Divider component="li" />
+        <ListItem>
+          <Grid container direction="row" justifyContent="flex-start" spacing={2}>
+            {sensorComponents}
+          </Grid>
+        </ListItem>
+        <li>
+          <Typography display="block" variant="h6">
+            Controls
+          </Typography>
+        </li>
+        <Divider component="li" />
+        <ListItem>
+          <Grid container direction="row" justifyContent="flex-start" spacing={2}>
+            {controllerComponents}
+          </Grid>
+        </ListItem>
+        {device.settings.mutations.length > 0 && (
+          <>
+            <li>
+              <Typography display="block" variant="h6">
+                Calculated Measurements
+              </Typography>
+            </li>
+            <Divider component="li" />
+            <ListItem>
+              <Grid container direction="row" justifyContent="flex-start" spacing={2}>
+                {/* {device.settings.mutations.map((mut, i) => (
+                  <DeviceMutationCard
+                    key={"mutation" + i}
+                    deviceId={device.id()}
+                    mutation={mut}
+                    showMobile={isMobile}
+                  />
+                ))} */}
+              </Grid>
+            </ListItem>
+          </>
+        )}
+        {device.settings.product !== pond.DeviceProduct.DEVICE_PRODUCT_NONE &&
+          permissions.includes(pond.Permission.PERMISSION_WRITE) && (
+            <>
+              <li>
+                <Typography display="block" variant="h6">
+                  Setup
+                </Typography>
+              </li>
+              <Divider component="li" />
+              <ListItem>
+                <Grid container direction="row" spacing={2}>
+                  {isMobile ? (
+                    <>
+                      <Grid size={{ xs: 12 }}>
+                        {/* <DeviceWizard
+                          device={device}
+                          //permissions={permissions}
+                          components={Array.from(components.values())}
+                          refreshCallback={load}
+                        /> */}
+                      </Grid>
+                      {diagnosticComponents.map(comp => (
+                        <Grid size={{ xs: 12 }} key={comp.key()}>
+                          <ComponentDiagnostics
+                            component={comp}
+                            device={device}
+                            refreshCallback={loadDevice}
+                          />
+                        </Grid>
+                      ))}
+                    </>
+                  ) : (
+                    <>
+                      <Grid size={{ xs: 6, sm: 6, lg: 4, xl: 3 }} >
+                        {/* <DeviceWizard
+                          device={device}
+                          //permissions={permissions}
+                          components={Array.from(components.values())}
+                          refreshCallback={load}
+                        /> */}
+                      </Grid>
+                      <Grid size={{ xs: 6, sm: 6, lg: 8, xl: 9 }} >
+                        <Grid container direction="row" spacing={2}>
+                          {diagnosticComponents.map(comp => (
+                            <Grid  size={{ sm: 12, lg: 6, xl: 4 }} key={comp.key()}>
+                              <ComponentDiagnostics
+                                component={comp}
+                                device={device}
+                                refreshCallback={loadDevice}
+                              />
+                            </Grid>
+                          ))}
+                        </Grid>
+                      </Grid>
+                    </>
+                  )}
+                </Grid>
+              </ListItem>
+            </>
+          )}
+      </List>
+    );
+  }
+
   return (
     <PageContainer padding={isMobile ? 0 : 2}>
-      <Grid2 container justifyContent={"space-between"}>
-        <Grid2>
+      <Grid container justifyContent={"space-between"}>
+        <Grid>
           <SmartBreadcrumb />
-        </Grid2>
-        <Grid2>
+        </Grid>
+        <Grid>
           <AddComponentManualDialog 
             device={device.id()}
             open={addComponentManualDialogOpen}
@@ -152,18 +420,19 @@ export default function DevicePage() {
             availablePositions={availablePositions} 
             availableOffsets={availableOffsets}
           />
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
       <DeviceOverview
         device={device}
-        // components={[...components.values()]}
+        components={[...components.values()]}
         // components={[]}
-        components={components}
+        // components={components}
         usage={getUsage()}
         loading={loading}
         tags={tags}
         groupID={parseInt(groupID)}
       />
+      {componentCards()}
     </PageContainer>
   );
 }
\ No newline at end of file