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

src/pages/Team.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarGroup, Box, Button, Card, Grid2, Theme, Typography } from "@mui/material";
+import { Avatar, AvatarGroup, Box, Button, Card, Divider, Grid2, List, ListItemButton, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import LoadingScreen from "app/LoadingScreen";
 import Chat from "chat/Chat";
@@ -6,13 +6,14 @@ import Chat from "chat/Chat";
 import { useMobile } from "hooks";
 import { cloneDeep } from "lodash";
 import { Team, teamScope, User } from "models";
+import { appendToUrl } from "navigation/Router";
 // import { useSnackbar } from "notistack";
 import PageContainer from "pages/PageContainer";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { pond } from "protobuf-ts/pond";
 import { useSnackbar, useTeamAPI, useUserAPI } from "providers";
 import { useEffect, useState } from "react";
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { getSignatureAccentColour } from "services/whiteLabel";
 import TeamActions from "teams/TeamActions";
 import ObjectUsers from "user/ObjectUsers";
@@ -75,6 +76,7 @@ export default function TeamPage() {
   const isMobile = useMobile();
   const classes = useStyles({isMobile});
   const { state } = useLocation();
+  const navigate = useNavigate();
   // const { teamID } = useParams<{ teamID: string }>() as { teamID: string };
   const { teamID } = useParams<{ teamID: string }>();
   // const [{ user }, dispatch] = useGlobalState();
@@ -199,6 +201,14 @@ export default function TeamPage() {
       </Grid2>
     )
   }
+
+  const toDevices = () => {
+    navigate(appendToUrl("devices"))
+  }
+
+  const toGroups = () => {
+    navigate(appendToUrl("groups"))
+  }
   
   return (
     <PageContainer padding={isMobile ? 0 : 2}>
@@ -233,7 +243,17 @@ export default function TeamPage() {
         </Grid2>
         <Grid2 size={{ xs: 12, sm: 6 }}>
           <Card className={ isMobile ? classes.cardMobile : classes.card }>
-
+            <List>
+              <Divider />
+              <ListItemButton onClick={toDevices}>
+                Devices
+              </ListItemButton>
+              <Divider />
+              <ListItemButton onClick={toGroups}>
+                Groups
+              </ListItemButton>
+              <Divider />
+            </List>
           </Card>
         </Grid2>
       </Grid2>