fixed permission issue with groups, added groups and devices links to team page

src/pages/Groups.tsx

@@ -1,4 +1,5 @@
-import { Box, Chip, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, Grid2, IconButton, Theme, Tooltip, Typography } from "@mui/material";
+import { LibraryAdd as CreateGroupIcon } from "@mui/icons-material"
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
@@ -10,6 +11,8 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { or } from "utils/types";
 import PageContainer from "./PageContainer";
+import GroupSettings from "group/GroupSettings";
+import { green } from "@mui/material/colors";
 
 const useStyles = makeStyles((theme: Theme) => {
   const isMobile = useMobile()
@@ -32,6 +35,9 @@ const useStyles = makeStyles((theme: Theme) => {
       display: "flex",
       width: theme.spacing(1),
     },
+    green: {
+      color: green["600"]
+    },
   });
 });
 
@@ -47,13 +53,14 @@ export default function GroupsPage() {
   const [loading, setLoading] = useState(false)
 
   const [groups, setGroups] = useState<pond.Group[]>([])
+  const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState(false)
 
   const classes = useStyles()
 
   const loadGroups = () => {
     setLoading(true)
     groupAPI.listGroups(limit, page*limit, order, orderBy, search).then(resp => {
-      setGroups(resp.data.groups)
+      setGroups(or(resp.data.groups, []))
       setTotal(resp.data.total)
     }).finally(() => {
       setLoading(false)
@@ -115,10 +122,37 @@ export default function GroupsPage() {
     if (row.settings?.groupId) navigate(appendToUrl(or(row.settings?.groupId, "")), { state: {group: row} })
   }
 
+  const groupButton = () => {
+    return (
+      <Tooltip title="Create Group">
+        <IconButton
+          onClick={() => setGroupSettingsIsOpen(true)}
+          aria-label="Create Group"
+          size="small"
+        >
+          <CreateGroupIcon className={classes.green} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
+  const title = () => {
+    return (
+      <Grid2 container alignItems={"center"} spacing={1}>
+        <Grid2>
+          <SmartBreadcrumb />
+        </Grid2>
+        <Grid2>
+          {groupButton()}
+        </Grid2>
+      </Grid2>
+    )
+  }
+
   return (
     <PageContainer >
       <ResponsiveTable<pond.Group>
-        title={<SmartBreadcrumb />}
+        title={title()}
         rows={groups} 
         columns={columns()}
         total={total}
@@ -130,6 +164,15 @@ export default function GroupsPage() {
         setSearchText={setSearch}
         onRowClick={handleRowClick}
       />
+      <GroupSettings
+        // initialGroup={selectedGroup}
+        // mode={groupSettingsMode}
+        mode={"add"}
+        isDialogOpen={groupSettingsIsOpen}
+        closeDialogCallback={() => setGroupSettingsIsOpen(false)}
+        refreshCallback={loadGroups}
+        canEdit={true}
+      />
     </PageContainer>
   )
 }