listing devices and linking them to their respoective page

src/pages/Devices.tsx

@@ -1,20 +1,41 @@
 import { DeveloperBoard as ProvisionIcon } from "@mui/icons-material";
-import { IconButton, Theme, Tooltip } from "@mui/material";
+import { IconButton, Theme, Tooltip, Typography } from "@mui/material";
 import { blue } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
+import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
-import { useState } from "react";
+import { pond } from "protobuf-ts/pond";
+import { useDeviceAPI } from "providers";
+import { useEffect, useState } from "react";
+import PageContainer from "./PageContainer";
+import { useMobile } from "hooks";
+import { useLocation, useNavigate } from "react-router-dom";
+import { or } from "utils/types";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
     provisionIcon: {
       color: blue["700"]
+    },
+    cellContainer: {
+      padding: theme.spacing(1)
     }
   });
 });
 
 export default function Devices() {
+  const isMobile = useMobile();
   const classes = useStyles();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const deviceAPI = useDeviceAPI();
+  const [limit, setLimit] = useState(10);
+  const [offset, setOffset] = useState(0);
+  const [order, ] = useState<"asc" | "desc">("asc");
+  const [orderBy, ] = useState("name");
+  const [search, setSearch] = useState("");
+  const [total, setTotal] = useState(0);
+  const [devices, setDevices] = useState<pond.Device[]>([])
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
 
   const openProvisionDialog = () => {
@@ -25,18 +46,73 @@ export default function Devices() {
     setIsProvisionDialogOpen(false);
   };
 
+  const loadDevices = () => {
+    deviceAPI.list(limit, offset*limit, order, orderBy, search).then(resp => {
+      setDevices(resp.data.devices)
+      setTotal(resp.data.total)
+    })
+  }
+
+  useEffect(() => {
+    loadDevices()
+  }, [limit, offset, order, orderBy, search])
+
+  const handleChange = (event: any) => {
+    setLimit(event.target.value);
+  };
+
+  const appendToUrl = (appendage: number | string) => {
+    const basePath = location.pathname.replace(/\/$/, ""); // Ensure no trailing slash
+    return(`${basePath}/${appendage}`);
+  };
+
+  const toDevice = (device: pond.Device) => {
+    navigate(appendToUrl(or(device.settings?.deviceId, "")))
+  };
+
+  const columns = (): Column<pond.Device>[] => {
+    return [{
+      title: "Device",
+      render: (device) => {
+        return (
+          <Typography className={classes.cellContainer}>
+            {device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId}
+          </Typography>
+        )
+      }
+    }]
+  }
+
+  const provisionButton= () => {
+    return (
+      <Tooltip title="Provision Device">
+        <IconButton onClick={openProvisionDialog} aria-label="Provision Device">
+          <ProvisionIcon className={classes.provisionIcon} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
   return(
-    <>
-    <Tooltip title="Provision Device">
-      <IconButton onClick={openProvisionDialog} aria-label="Provision Device">
-        <ProvisionIcon className={classes.provisionIcon} />
-      </IconButton>
-    </Tooltip>
-    <ProvisionDevice
-      isOpen={isProvisionDialogOpen}
-      refreshCallback={/*load*/()=>{}}
-      closeDialogCallback={closeProvisionDialog}
-    />
-    </>
+    <PageContainer padding={isMobile ? 0 : 2}>
+      <ResponsiveTable<pond.Device>
+        title="Devices"
+        subtitle={provisionButton()}
+        rows={devices}
+        columns={columns()}
+        total={total}
+        pageSize={limit}
+        page={offset}
+        setPage={setOffset}
+        handleRowsPerPageChange={handleChange}
+        onRowClick={toDevice}
+        setSearchText={setSearch}
+      />
+      <ProvisionDevice
+        isOpen={isProvisionDialogOpen}
+        refreshCallback={loadDevices}
+        closeDialogCallback={closeProvisionDialog}
+      />
+    </PageContainer>
   )
 }

src/pages/PageContainer.tsx

@@ -38,11 +38,12 @@ interface Props extends PropsWithChildren{
   fullViewport?: boolean;
   isCenterCenter?: boolean;
   sx?: SxProps<Theme>;
+  padding?: number;
 }
 
 export const PageContainer: React.FunctionComponent<Props> = props => {
   const classes = useStyles();
-  const { children, fullViewport, isCenterCenter, sx } = props;
+  const { children, fullViewport, isCenterCenter, sx, padding } = props;
   // let fullViewport = false
   // let isCenterCenter = false
   return (
@@ -51,7 +52,10 @@ export const PageContainer: React.FunctionComponent<Props> = props => {
         fullViewport ? classes.fullViewportContainer : classes.pageContainer,
         isCenterCenter && classes.centerCenter
       )}
-      sx={sx}
+      sx={{
+        ...sx, // Spread existing sx
+        ...(padding !== undefined && { padding }), // Conditionally add padding
+      }}
       disableGutters
       maxWidth={false}
       children={<React.Fragment>{children}</React.Fragment>}

src/pages/Team.tsx

@@ -199,7 +199,7 @@ export default function TeamPage() {
   }
   
   return (
-    <PageContainer sx={{ padding: isMobile ? 1 : 2 }}>
+    <PageContainer padding={isMobile ? 0 : 2}>
       <Box className={classes.container}>
         <Box className={classes.leftBox}>
           {title()}

src/pages/Teams.tsx

@@ -1,9 +1,11 @@
+import { useMobile } from "hooks";
 import PageContainer from "pages/PageContainer";
 import TeamList from "teams/TeamList";
 
 export default function Teams() {
+  const isMobile = useMobile()
   return (
-    <PageContainer>
+    <PageContainer padding={isMobile ? 0 : 2}>
       <TeamList />
     </PageContainer>
   );

src/pages/Users.tsx

@@ -22,7 +22,7 @@ import {
 } from "@mui/material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import SearchSelect, { Option } from "common/SearchSelect";
-import { useSnackbar, useUserAPI } from "hooks";
+import { useMobile, useSnackbar, useUserAPI } from "hooks";
 import { User } from "models";
 import PageContainer from "pages/PageContainer";
 // import { ListUsersResponse } from "providers/pond/userAPI";
@@ -88,6 +88,7 @@ const useStyles = makeStyles((theme: Theme) => {
 
 export default function Users() {
   const classes = useStyles();
+  const isMobile = useMobile();
   const userAPI = useUserAPI();
   // let tableRef: any = React.createRef();
   const { error, success } = useSnackbar();
@@ -347,7 +348,7 @@ export default function Users() {
   }
 
   return (
-    <PageContainer>
+    <PageContainer padding={isMobile ? 0 : 2}>
       <ResponsiveTable<User> 
         title="Users"
         rows={rows}