Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

src/common/SmartBreadcrumb.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import { Replay } from "@mui/icons-material";
 import { useMobile } from "hooks";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 import { useLocation } from "react-router";
 import { Link as RouterLink } from "react-router-dom";
 import { or } from "utils/types";
@@ -47,6 +47,7 @@ interface Props {
   componentName?: string;
   groupName?: string;
   binName?: string;
+  teamName?: string;
   reportTarget?: string;
   loading?: boolean;
   reload?: () => void;
@@ -114,6 +115,11 @@ export default function SmartBreadcrumb(props: Props) {
     return or(regexMatch[1], "0").toString();
   };
 
+  const teamKey = (): string => {
+    const regexMatch = or(location.pathname.match(/\/teams\/([^/]+)/), [])
+    return or(regexMatch[1], "0").toString();
+  };
+
   const reportIDShort = (): string => {
     return reportID().split("-")[0];
   };
@@ -220,6 +226,10 @@ export default function SmartBreadcrumb(props: Props) {
     return "/teams";
   }
 
+  const teamPath = (): string => {
+    return "/teams" + "/" + teamKey();
+  }
+
   const getBreadcrumbMap = (): { [key: string]: string } => {
     const { groupName, deviceName, componentName, reportTarget, binName } = props;
     const deviceLabel: string = deviceName ? deviceName : "Device " + deviceID();
@@ -227,6 +237,13 @@ export default function SmartBreadcrumb(props: Props) {
     const binLabel: string = binName ?? "Bin " + binID();
     const mineLabel: string = "Mine Site";
     const jobsiteLabel: string = "Job Site";
+  
+    let lastTeamName = props.teamName;
+    if (props.teamName) {
+      localStorage.setItem('lastTeamName-'+teamKey(), props.teamName);
+    } else {
+      lastTeamName = or(localStorage.getItem('lastTeamName-'+teamKey()), undefined);
+    }
 
     return {
       [dashboardPath()]: "Dashboard",
@@ -250,7 +267,8 @@ export default function SmartBreadcrumb(props: Props) {
       [usersPath()]: "Users",
       [binsPath()]: "Bins",
       [binPath()]: binLabel,
-      [teamsPath()]: "Teams"
+      [teamsPath()]: "Teams",
+      [teamPath()]: lastTeamName ? lastTeamName : "Team " + teamKey(),
     };
   };
 

src/navigation/BottomNavigator.tsx

@@ -97,33 +97,37 @@ export default function BottomNavigator(props: Props) {
     }
   };
 
+  const getType = () => {
+    return theme.palette.mode === "light" ? "dark" : "light"
+  }
+
   const authenticatedNavigation = () => {
     return (
       <BottomNavigation value={route} onChange={(_, newValue) => handleRouteChange(newValue)}>
         {isAdaptive && (
-          <BottomNavigationAction label="Farm" icon={<FieldsIcon type="light" />} value="fields" />
+          <BottomNavigationAction label="Farm" icon={<FieldsIcon type={getType()} />} value="fields" />
         )}
         {isAdaptive && (
-          <BottomNavigationAction label="Bins" icon={<BinsIcon type="light" />} value="bins" />
+          <BottomNavigationAction label="Bins" icon={<BinsIcon type={getType()} />} value="bins" />
         )}
         {isAdCon && (
           <BottomNavigationAction
             label="Site Map"
-            icon={<FieldsIcon type="light" />}
+            icon={<FieldsIcon type={getType()} />}
             value="constructionsiteMap"
           />
         )}
         {isOmni && (
           <BottomNavigationAction
             label="Map"
-            icon={<AirportMapIcon type="light" />}
+            icon={<AirportMapIcon type={getType()} />}
             value="aviationMap"
           />
         )}
         {isOmni && (
           <BottomNavigationAction
             label="Terminals"
-            icon={<PlaneIcon type="light" />}
+            icon={<PlaneIcon type={getType()} />}
             value="terminals"
           />
         )}
@@ -132,11 +136,11 @@ export default function BottomNavigator(props: Props) {
           label="Devices"
           icon={
             isAdaptive ? (
-              <BindaptIcon type="light" />
+              <BindaptIcon type={getType()} />
             ) : isAdCon ? (
-              <NexusSTIcon type="light" />
+              <NexusSTIcon type={getType()} />
             ) : isOmni ? (
-              <OmniAirDeviceIcon type="light" />
+              <OmniAirDeviceIcon type={getType()} />
             ) : (
               <DevicesIcon />
             )
@@ -146,7 +150,7 @@ export default function BottomNavigator(props: Props) {
         {isAdCon && (
           <BottomNavigationAction
             label="Sites"
-            icon={<JobsiteIcon type="light" />}
+            icon={<JobsiteIcon type={getType()} />}
             value="jobsites"
           />
         )}
@@ -183,6 +187,7 @@ export default function BottomNavigator(props: Props) {
       bottom={0}
       width="100vw"
       zIndex={theme.zIndex.appBar}
+      sx={{ background: theme.palette.background.paper }}
       style={{
         overflow:
           window.location.origin.includes("staging") || window.location.origin.includes("localhost")

src/pages/Devices.tsx

@@ -120,10 +120,16 @@ export default function Devices() {
     setGroups(newGroups);
   };
 
+  const getGroup = () => {
+    let group = groups[parseInt(tab)]
+    return group
+  }
+
   useEffect(() => {
     setGroupPermissions([])
     if (tab === "all") return
-    groupAPI.getGroupPermissions(parseInt(tab)).then(resp => {
+    groupAPI.getGroupPermissions(getGroup().id()).then(resp => {
+      console.log(resp)
       setGroupPermissions(resp.data.permissions)
     })
   }, [tab])
@@ -375,11 +381,6 @@ export default function Devices() {
     )
   }
 
-  const getGroup = () => {
-    let group = groups[parseInt(tab)]
-    return group
-  }
-
   const mobile = (row: Device) => {
     return (
       <Box sx={{ margin: 2 }}>

src/pages/Team.tsx

@@ -2,6 +2,7 @@ import { Avatar, AvatarGroup, Box, Button, Card, Divider, Grid2, List, ListItemB
 import { makeStyles } from "@mui/styles";
 import LoadingScreen from "app/LoadingScreen";
 import Chat from "chat/Chat";
+import SmartBreadcrumb from "common/SmartBreadcrumb";
 // import SmartBreadcrumb from "common/SmartBreadcrumb";
 import { useMobile } from "hooks";
 import { cloneDeep } from "lodash";
@@ -162,7 +163,8 @@ export default function TeamPage() {
         <Grid2 container direction={"column"} spacing={isMobile ? 0 : 0.5} >
           <Grid2 >
             <Typography variant={isMobile ? "h5" : "h4"} className={classes.ellipsis} >
-              {team.name()}
+              {/* {team.name()} */}
+              <SmartBreadcrumb paddingBottom={1} teamName={team.name()} />
               {/* <SmartBreadcrumb /> */}
             </Typography>
           </Grid2>

src/providers/pond/groupAPI.tsx

@@ -42,6 +42,20 @@ export interface IGroupAPIContext {
   updateGroupPermissions: (id: number, users: User[]) => Promise<any>;
 }
 
+function buildQueryString(params: Record<string, string | string[] | number | null | undefined>): string {
+  // Filter out null, undefined, or empty string values
+  const validParams = Object.entries(params)
+      .filter(([_, value]) => value != null && value !== '')
+      .map(([key, value]) => `${key}=${value}`);
+
+  if (validParams.length === 0) {
+      return '';
+  }
+
+  // Join parameters with '&' and prepend '?'
+  return `?${validParams.join('&')}`;
+}
+
 export const GroupAPIContext = createContext<IGroupAPIContext>({} as IGroupAPIContext);
 
 interface Props {}
@@ -53,8 +67,16 @@ export default function GroupProvider(props: PropsWithChildren<Props>) {
   const [{ as }] = useGlobalState();
 
   const addGroup = (group: pond.GroupSettings) => {
-    let url = pondURL("/groups")
-    if (as) url = pondURL("/groups?as=" + as)
+    // let url = pondURL("/groups")
+    // let keys = getContextKeys()
+    // let types = getContextTypes()
+    // if (as) url = pondURL("/groups?as=" + as)
+    const params = {
+      keys: getContextKeys(),
+      types: getContextTypes(),
+      as: getContextTypes().includes("team") ? undefined : as
+    }
+    let url = pondURL(`/groups${buildQueryString(params)}`)
     return new Promise<AxiosResponse>((resolve, reject) => {
       post(url, group).then(resp => {
         return resolve(resp)
@@ -157,19 +179,25 @@ export default function GroupProvider(props: PropsWithChildren<Props>) {
     keys?: string[],
     types?: string[],
   ) => {
-    keys = keys ? keys : getContextKeys();
-    types = types? types : getContextTypes();
-    let url = "/groupPermissions/" + id
-    if (as) {
-      url = url + "?as=" + as +
-      +
-      (keys ? "?keys=" + keys.toString() : "") +
-      (types ? "&types=" + types.toString() : "")
-    } else {
-      url = url + 
-        (keys ? "?keys=" + keys.toString() : "") +
-        (types ? "&types=" + types.toString() : "")
+    // keys = keys ? keys : getContextKeys();
+    // types = types? types : getContextTypes();
+    // let url = "/groupPermissions/" + id
+    // if (as) {
+    //   url = url + "?as=" + as +
+    //   +
+    //   (keys ? "?keys=" + keys.toString() : "") +
+    //   (types ? "&types=" + types.toString() : "")
+    // } else {
+    //   url = url + 
+    //     (keys ? "?keys=" + keys.toString() : "") +
+    //     (types ? "&types=" + types.toString() : "")
+    // }
+    const params = {
+      keys: getContextKeys(),
+      types: getContextTypes(),
+      as: getContextTypes().includes("team") ? undefined : as,
     }
+    let url = `/groupPermissions/${id}${buildQueryString(params)}`
     return new Promise<AxiosResponse<pond.GetPermissionsResponse>>((resolve, reject) => {
       get<pond.GetPermissionsResponse>(pondURL(url)).then(resp => {
         resp.data = pond.GetPermissionsResponse.fromObject(resp.data)

src/user/UserMenu.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, Button, Checkbox, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
+import { Avatar, Box, Button, Checkbox, Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
@@ -270,6 +270,7 @@ export default function UserMenu() {
             <ListItemText primary="View Site as Team" />
           </MenuItem>
         )}
+        <Divider />
         {hasAdmin && (
           <Tooltip title="Access Object">
             <MenuItem onClick={() => openAccessObject()} aria-label="Access Object" dense>
@@ -280,6 +281,7 @@ export default function UserMenu() {
             </MenuItem>
           </Tooltip>
         )}
+        <Divider />
         <MenuItem onClick={handleLogout} aria-label="Sign Out" dense>
           <ListItemIcon>
             <ExitToApp className={classes.red} />