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

src/app/Header.tsx

@@ -129,7 +129,6 @@ export default function Header(props: Props) {
 						<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
 					</Box>
 			</Toolbar>
-
 			</AppBar>
 			<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
 			{isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}

src/app/LoadingScreen.tsx

@@ -1,23 +1,23 @@
 import { Box, CircularProgress, Typography, useTheme } from "@mui/material";
 
 interface Props {
-    message?: string;
+  message?: string;
 }
 
 export default function LoadingScreen(props: Props) {
-    const { message } = props;
-    const theme = useTheme();
+	const { message } = props;
+	const theme = useTheme();
 
-    return (
-        <Box sx={{ width: "100%", height: "100%", justifyContent: "center", alignContent: "center", textAlign: "center" }}>
-            <CircularProgress
-                size={150}
-                style={{ marginBottom: theme.spacing(4) }}
-            />
-            <br/>
-            <Typography variant="h6">
-                {message ? message : "Loading..."}
-            </Typography>
-        </Box>
-    );
+	return (
+		<Box sx={{ width: "100%", height: "100%", justifyContent: "center", alignContent: "center", textAlign: "center" }}>
+			<CircularProgress
+				size={150}
+				style={{ marginBottom: theme.spacing(4) }}
+			/>
+			<br/>
+			<Typography variant="h6">
+				{message ? message : "Loading..."}
+			</Typography>
+		</Box>
+	);
 }

src/common/DraggableTabs.tsx

@@ -1,4 +1,6 @@
 import { Tabs, TabsProps } from "@mui/material";
+import { getContextKeys, getContextTypes } from "pbHelpers/Context";
+import { useGlobalState } from "providers";
 import React, { useEffect, useState, useRef } from "react";
 // import AnimatedTabs from "./AnimatedTabs";
 
@@ -12,13 +14,35 @@ export default function DraggableTabs(props: DraggableTabsProps) {
   const { startNode, endNode, children, ...tabsProps } = props;
   const [selectedValue, setSelectedValue] = useState<any>(tabsProps.value);
   const initialChildren = React.Children.toArray(children);
-  const [tabOrder, setTabOrder] = useState<number[]>([]);
   const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
   const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
+  const [{ as, user }] = useGlobalState()
+  
+  // cache key should be unique for the context and user
+  let cacheKey = "tab-order-"
+  const types = getContextTypes()
+  getContextKeys().forEach((key, index) => {
+    cacheKey = cacheKey + types[index] + "-" + key + "-"
+  })
+  cacheKey = cacheKey + (as ? as : user.id())
+
+  // Get tab order from cache
+  const [tabOrder, setTabOrder] = useState<number[]>(() => {
+    const storedValue = localStorage.getItem(cacheKey);
+    return storedValue !== null ? JSON.parse(storedValue) : [];
+  });
+
+  // save tab order to cache when it changes
+  useEffect(() => {
+    // console.log(initialChildren.length)
+    localStorage.setItem(cacheKey, JSON.stringify(tabOrder));
+  }, [tabOrder]);
 
   useEffect(() => {
     const newOrder = initialChildren.map((_, index) => index);
-    setTabOrder(newOrder);
+    if (tabOrder.length < 1) setTabOrder(newOrder);
+    // const oddOnesOut = newOrder.filter(item => !tabOrder.includes(item))
+    // setTabOrder([...oddOnesOut, ...tabOrder])
     tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
   }, [initialChildren.length]);
 

src/common/PulseBox.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles((_theme: Theme) => ({
       height: '100%',
       border: '2px solid var(--pulse-color)',
       borderRadius: 'inherit', // Should inherit from Box
-      animation: '$pulse 2s infinite ease-in-out',
+      animation: '$pulse 1.75s infinite ease-in-out',
       pointerEvents: 'none',
       boxSizing: 'border-box',
       transition: "border-color 0.35s ease-in-out",

src/navigation/SideNavigator.tsx

@@ -216,7 +216,7 @@ export default function SideNavigator(props: Props) {
             id="tour-dashboard"
             onClick={() => goTo("/users")}
             classes={getClasses("/user")}
-            >
+          >
             <ListItemIcon>
               <Person />
             </ListItemIcon>
@@ -271,7 +271,8 @@ export default function SideNavigator(props: Props) {
 
   return (
     <SwipeableDrawer
-      variant={width === "xs" || width === "sm" ? "temporary" : "permanent"}
+      // variant={width === "xs" || width === "sm" ? "temporary" : "permanent"}
+      variant={!open ? "permanent" : width === "xs" || width === "sm" ? "temporary" : "permanent"}
       classes={{
         paper: classNames(
           classes.sideMenu,