added group tabs:

src/pages/Groups.tsx

@@ -0,0 +1,132 @@
+import { Box, Chip, Theme, Tooltip, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import ResponsiveTable, { Column } from "common/ResponsiveTable";
+import SmartBreadcrumb from "common/SmartBreadcrumb";
+import { useMobile } from "hooks";
+import { appendToUrl } from "navigation/Router";
+import { pond } from "protobuf-ts/pond";
+import { useGroupAPI } from "providers";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { or } from "utils/types";
+
+const useStyles = makeStyles((theme: Theme) => {
+  const isMobile = useMobile()
+  return ({
+    cellContainer: {
+      margin: theme.spacing(1),
+      marginLeft: theme.spacing(2),
+      display: "flex",
+      maxWidth: theme.spacing(isMobile ? 18 : 32),
+    },
+    bigCellContainer: {
+      margin: theme.spacing(1),
+      marginLeft: theme.spacing(2),
+      display: "flex",
+      width: "auto",
+    },
+    smallCellContainer: {
+      margin: theme.spacing(1),
+      marginLeft: theme.spacing(2),
+      display: "flex",
+      width: theme.spacing(1),
+    },
+  });
+});
+
+export default function GroupsPage() {
+  const groupAPI = useGroupAPI()
+  const navigate = useNavigate()
+  const [limit, setLimit] = useState(10)
+  const [page, setPage] = useState(0)
+  const [order, setOrder] = useState<"asc" | "desc">("asc")
+  const [orderBy, setOrderBy] = useState("")
+  const [search, setSearch] = useState("")
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+  const [groups, setGroups] = useState<pond.Group[]>([])
+
+  const classes = useStyles()
+
+  const loadGroups = () => {
+    setLoading(true)
+    groupAPI.listGroups(limit, page*limit, order, orderBy, search).then(resp => {
+      setGroups(resp.data.groups)
+      setTotal(resp.data.total)
+    }).finally(() => {
+      setLoading(false)
+    })
+  }
+
+  useEffect(() => {
+    loadGroups()
+  }, [limit, page, order, orderBy, search])
+
+  const handleRowsPerPageChange = (event: any) => {
+    setLimit(event.target.value);
+  };
+
+  const columns = (): Column<pond.Group>[] => {
+    return [
+      {
+        title: "Size",
+        render: (group) => {
+          return (
+            <Box className={classes.smallCellContainer}>
+              {group.settings?.devices?.length ? group.settings.devices.length : 0}
+            </Box>
+          )
+        }
+      },
+      {
+        title: "Group Name",
+        render: (group) => {
+          return (
+            <Box className={classes.cellContainer}>
+              <Chip 
+                variant="outlined"
+                label={group.settings?.name ? group.settings.name : "Group " + group.settings?.groupId} 
+              />
+            </Box>
+          )
+        }
+      },
+      {
+        title: "Description",
+        render: device => {
+          const description = device.settings?.description ?? ""
+          return (
+            <Box className={classes.bigCellContainer}>
+              <Tooltip title={device.settings?.description}>
+                <Typography variant="body2">
+                  {description}
+                </Typography>
+              </Tooltip>
+            </Box>
+          )
+        }
+      },
+    ]
+  }
+
+  const handleRowClick = (row: pond.Group) => {
+    if (row.settings?.groupId) navigate(appendToUrl(or(row.settings?.groupId, "")), { state: {group: row} })
+  }
+
+  return (
+    <ResponsiveTable<pond.Group>
+      title={<SmartBreadcrumb />}
+      rows={groups} 
+      columns={columns()}
+      total={total}
+      pageSize={limit}
+      page={page}
+      setPage={setPage}
+      handleRowsPerPageChange={handleRowsPerPageChange}
+      isLoading={loading}
+      setSearchText={setSearch}
+      onRowClick={handleRowClick}
+    />
+  )
+}