Merge branch 'staging_environment'

2026-05-26 11:39:23 -06:00 · 2026-05-26 11:39:23 -06:00 · 184704aee3
commit 184704aee3
parent ced3576c96 a503148238
84 changed files with 1295 additions and 650 deletions
--- a/.env
+++ b/.env
@ -7,6 +7,7 @@ VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com
 VITE_AUTH0_AUDIENCE=api.brandxtech.ca
 VITE_AUTH0_DEV_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1
 VITE_AUTH0_STAGING_CLIENT_ID=3ib460VvLwdeyse5iUSQfxkVdQaUmphP
 VITE_AUTH0_STREAMLINE_CLIENT_ID=HwUV0hHNdVvU96zuMBTAU8i7nFdwwgIX
 VITE_AUTH0_BXT_CLIENT_ID=sLnqOu40uWfQT1lYSDYj2wYmlLEHRB74
 VITE_AUTH0_ADAPTIVE_AGRICULTURE_CLIENT_ID=5pUCkl2SfogkWmM244UDcLEUOp8EFdHd
@ -16,6 +17,9 @@ VITE_AUTH0_MIVENT_CLIENT_ID=VNALE7RW6l3dY5uYcxgwElZV0lcT25Fg
 VITE_AUTH0_OMNIAIR_CLIENT_ID=IblmarD8wFafiD6doxTmOHQ6Bx3L9wWl
 VITE_AUTH0_INTELLIFARMS_CLIENT_ID=RYtuAyOcB4DSaaqJMLDMf3pV8SFY9PdY
 #Crisp
 VITE_CRISP_WEBSITE_ID=80170383-b426-43c0-8f66-8e20a05bcdce
 #Branding (Default theme)
 VITE_APP_WEBSITE_TITLE="Adaptive Dashboard"
 VITE_APP_PRIMARY_COLOUR=blue
@ -24,3 +28,6 @@ VITE_APP_SIGNATURE_COLOUR="#323232"
 # Live device/component WebSocket streams (must match string "true" in code)
 VITE_ENABLE_WEBSOCKETS=true
 # Default whitelabel; overwrite in .env.local
 #VITE_WHITELABEL=adaptive-ag
--- a/deploy.sh
+++ b/deploy.sh
@ -0,0 +1,67 @@
 #!/usr/bin/env bash
 set -euo pipefail
 # Load .env.local if it exists
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 ENV_FILE="$SCRIPT_DIR/.env.local"
 if [[ -f "$ENV_FILE" ]]; then
  # Export only the vars we care about, ignoring comments and blank lines
  set -o allexport
  # shellcheck source=/dev/null
  source <(grep -E '^(DEPLOY_USER|DEPLOY_HOST|DEPLOY_SSH_KEY)=' "$ENV_FILE")
  set +o allexport
 fi
 # Prompt for any missing values
 if [[ -z "${DEPLOY_USER:-}" ]]; then
  read -rp "SSH username: " DEPLOY_USER
 fi
 if [[ -z "${DEPLOY_HOST:-}" ]]; then
  read -rp "Server IP/hostname: " DEPLOY_HOST
 fi
 if [[ -z "${DEPLOY_SSH_KEY:-}" ]]; then
  read -rp "SSH key path [~/.ssh/id_ed25519]: " DEPLOY_SSH_KEY
  DEPLOY_SSH_KEY="${DEPLOY_SSH_KEY:-~/.ssh/id_ed25519}"
 fi
 SSH_OPTS="-i $DEPLOY_SSH_KEY"
 echo "→ Deploying to $DEPLOY_USER@$DEPLOY_HOST using key $DEPLOY_SSH_KEY"
 # 1. Build frontend for LAN / self-contained hosts (indexLocal.html via vite --mode localnet)
 #    Pass VITE_WHITELABEL if provided as an argument; otherwise Vite reads it from .env
 (
  cd "$SCRIPT_DIR"
  if [[ -n "${1:-}" ]]; then
    echo "→ Whitelabel override: $1"
    VITE_WHITELABEL="$1" npm run build:local
  else
    npm run build:local
  fi
 )
 # Fail if the bundle still embeds Crisp (wrong vite mode or stale build/)
 INDEX_HTML="$SCRIPT_DIR/build/index.html"
 if [[ ! -f "$INDEX_HTML" ]]; then
  echo "error: missing $INDEX_HTML after build:local" >&2
  exit 1
 fi
 # 2. Build container image
 docker build -t webui:local -f Dockerfile .
 # 3. Transfer image
 docker save webui:local | ssh $SSH_OPTS "$DEPLOY_USER@$DEPLOY_HOST" docker load
 # 4. SCP compose file
 scp $SSH_OPTS docker-compose.local.yml "$DEPLOY_USER@$DEPLOY_HOST:~/"
 # 5. Deploy — then force service recreate. Swarm often keeps the old task when the tag stays
 #    webui:local after docker load, so without --force you still see the previous HTML/JS.
 STACK_NAME="${LOCAL_DOCKER_STACK_NAME:-webui}"
 SERVICE_NAME="${STACK_NAME}_webui"
 ssh $SSH_OPTS "$DEPLOY_USER@$DEPLOY_HOST" \
  "docker stack deploy -c docker-compose.local.yml $STACK_NAME && docker service update --force $SERVICE_NAME"
--- a/docker-compose.local.yml
+++ b/docker-compose.local.yml
@ -0,0 +1,18 @@
 version: "3.6"
 services:
  webui:
    image: webui:local
    ports:
      - "8080:80"
    stop_signal: SIGQUIT
    deploy:
      replicas: 1
      update_config:
        order: start-first
    healthcheck:
      test: ["CMD", "curl", "-f", "localhost:80/health"]
      interval: 1m
      timeout: 10s
      retries: 3
      start_period: 30s
--- a/indexLocal.html
+++ b/indexLocal.html
@ -0,0 +1,16 @@
 <!-- LAN / self-contained deploy shell: use with `vite --mode localnet` (e.g. build:local, start-local).
     Minimal HTML, no third-party bootstraps that call the public internet (Crisp, etc.). -->
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" id="favicon-link" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title id="title-id">Adaptive Dashboard</title>
    <link rel="manifest" id="manifest-link" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/app/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -52,7 +52,6 @@
        "react-dom": "^18.3.1",
        "react-emoji-render": "^2.0.1",
        "react-error-boundary": "^5.0.0",
        "react-full-screen": "^1.1.1",
        "react-horizontal-scrolling-menu": "^7.1.1",
        "react-infinite-scroller": "^1.2.6",
        "react-joyride": "^2.9.3",
@ -8617,12 +8616,6 @@
        "node": ">=10"
      }
    },
    "node_modules/fscreen": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
      "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
      "license": "MIT"
    },
    "node_modules/function-bind": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@ -11516,21 +11509,6 @@
        "is-lite": "^0.8.2"
      }
    },
    "node_modules/react-full-screen": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz",
      "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==",
      "license": "MIT",
      "dependencies": {
        "fscreen": "^1.0.2"
      },
      "engines": {
        "node": ">=10"
      },
      "peerDependencies": {
        "react": ">= 16.8.0"
      }
    },
    "node_modules/react-horizontal-scrolling-menu": {
      "version": "7.1.8",
      "resolved": "https://registry.npmjs.org/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-7.1.8.tgz",
--- a/package.json
+++ b/package.json
@ -5,10 +5,10 @@
  "type": "module",
  "scripts": {
    "start": "VITE_AUTH0_CLIENT_ID=5pUCkl2SfogkWmM244UDcLEUOp8EFdHd VITE_AUTH0_AUDIENCE=api.brandxtech.ca VITE_APP_API_URL=https://api.brandxtech.ca/v1 VITE_APP_WS_URL=ws://api.brandxtech.ca/v1/live vite",
-    "start-local": "VITE_AUTH0_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1 VITE_AUTH0_AUDIENCE=bxt-dev.api.adaptiveagriculture.ca VITE_APP_API_URL=http://localhost:50052/v1 VITE_APP_WS_URL=ws://localhost:50052/v1/live VITE_APP_BILLING_URL=http://localhost:50053/v1 VITE_APP_RECLUSE_URL=http://localhost:50054/v1 VITE_APP_GITLAB_URL=http://localhost:50055/v1 vite",
+    "start-local": "VITE_AUTH0_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1 VITE_AUTH0_AUDIENCE=bxt-dev.api.adaptiveagriculture.ca VITE_APP_API_URL=http://localhost:50052/v1 VITE_APP_WS_URL=ws://localhost:50052/v1/live VITE_APP_BILLING_URL=http://localhost:50053/v1 VITE_APP_RECLUSE_URL=http://localhost:50054/v1 VITE_APP_GITLAB_URL=http://localhost:50055/v1 vite --mode localnet",
    "start-dev": "VITE_AUTH0_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1 VITE_APP_API_URL=https://bxt-dev.api.adaptiveagriculture.ca/v1 VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com VITE_AUTH0_AUDIENCE=bxt-dev.api.adaptiveagriculture.ca VITE_AUTH0_DEV_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1 vite",
-    "start-streamline": "VITE_AUTH0_CLIENT_ID=HwUV0hHNdVvU96zuMBTAU8i7nFdwwgIX VITE_APP_API_URL=https://streamline.api.adaptiveagriculture.ca/v1 VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com VITE_AUTH0_AUDIENCE=streamline.api.adaptiveagriculture.ca vite",
+    "start-streamline": "VITE_WHITELABEL=streamline VITE_AUTH0_CLIENT_ID=HwUV0hHNdVvU96zuMBTAU8i7nFdwwgIX VITE_APP_API_URL=https://streamline.api.adaptiveagriculture.ca/v1 VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com VITE_AUTH0_AUDIENCE=streamline.api.adaptiveagriculture.ca vite",
-    "start-staging": "VITE_LOCAL_STAGING=true VITE_AUTH0_CLIENT_ID=3ib460VvLwdeyse5iUSQfxkVdQaUmphP VITE_AUTH0_AUDIENCE=stagingapi.brandxtech.ca VITE_AUTH0_CLIENT_DOMAIN=adaptivestaging.us.auth0.com VITE_APP_API_URL=https://stagingapi.brandxtech.ca/v1 VITE_APP_WS_URL=ws://stagingapi.brandxtech.ca/v1/live VITE_APP_AUTH0_CLIENT_DOMAIN=adaptivestaging.us.auth0.com VITE_APP_AUTH0_AUDIENCE=stagingapi.brandxtech.ca vite",
+    "start-staging": "VITE_WHITELABEL=staging VITE_AUTH0_CLIENT_ID=3ib460VvLwdeyse5iUSQfxkVdQaUmphP VITE_AUTH0_AUDIENCE=stagingapi.brandxtech.ca VITE_AUTH0_CLIENT_DOMAIN=adaptivestaging.us.auth0.com VITE_APP_API_URL=https://stagingapi.brandxtech.ca/v1 VITE_APP_WS_URL=ws://stagingapi.brandxtech.ca/v1/live vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
@ -16,6 +16,7 @@
    "build:development": "VITE_CRISP_WEBSITE_ID={CRISP_WEBSITE_ID} VITE_AUTH0_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1 VITE_AUTH0_AUDIENCE=bxt-dev.api.adaptiveagriculture.ca VITE_APP_API_URL=https://bxt-dev.api.adaptiveagriculture.ca/v1 NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_DEVELOPMENT} VITE_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_CNHI_SCOPES=${CNHI_SCOPES} VITE_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_JD_SCOPES=${JD_SCOPES} VITE_JD_STATE=${JD_STATE} VITE_OPEN_WEATHERMAP=${OPEN_WEATHERMAP} vite build",
    "build:production": "VITE_CRISP_WEBSITE_ID={CRISP_WEBSITE_ID} VITE_AUTH0_CLIENT_ID=5pUCkl2SfogkWmM244UDcLEUOp8EFdHd VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com VITE_AUTH0_AUDIENCE=api.brandxtech.ca VITE_APP_API_URL=https://api.brandxtech.ca/v1 NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_PRODUCTION} VITE_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_CNHI_SCOPES=${CNHI_SCOPES} VITE_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_JD_SCOPES=${JD_SCOPES} VITE_JD_STATE=${JD_STATE} VITE_OPEN_WEATHERMAP=${OPEN_WEATHERMAP} vite build",
    "build:streamline": "VITE_CRISP_WEBSITE_ID={CRISP_WEBSITE_ID} VITE_AUTH0_CLIENT_ID=HwUV0hHNdVvU96zuMBTAU8i7nFdwwgIX VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com VITE_AUTH0_AUDIENCE=streamline.api.adaptiveagriculture.ca VITE_APP_API_URL=https://streamline.api.adaptiveagriculture.ca/v1 NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_PRODUCTION} VITE_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_CNHI_SCOPES=${CNHI_SCOPES} VITE_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_JD_SCOPES=${JD_SCOPES} VITE_JD_STATE=${JD_STATE} VITE_OPEN_WEATHERMAP=${OPEN_WEATHERMAP} vite build",
    "build:local": "VITE_AUTH0_CLIENT_ID=local VITE_AUTH0_AUDIENCE=local VITE_AUTH0_CLIENT_DOMAIN=local VITE_APP_API_URL=http://172.16.1.20:50052/v1 VITE_APP_WS_URL=ws://172.16.1.20:50052/v1/live NODE_OPTIONS=--max_old_space_size=4096 vite build --mode localnet",
    "build:offline": "npx env-cmd offline,whitelabel npm run build",
    "test": "vitest"
  },
@ -64,7 +65,6 @@
    "react-dom": "^18.3.1",
    "react-emoji-render": "^2.0.1",
    "react-error-boundary": "^5.0.0",
    "react-full-screen": "^1.1.1",
    "react-horizontal-scrolling-menu": "^7.1.1",
    "react-infinite-scroller": "^1.2.6",
    "react-joyride": "^2.9.3",
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@ -1,15 +1,20 @@
 import { Auth0Provider } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import { isAuth0Configured, isAuth0SpaOriginAllowed, shouldMountAuth0Provider } from '../utils/auth0Config'
 import AuthWrapper from '../providers/auth'
 import HTTPProvider from 'providers/http'
 import { useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import LocalAuthPlaceholder from './LocalAuthPlaceholder'
 import UserWrapper from './UserWrapper'
 import { getWhitelabel } from 'services/whiteLabel'
 import { AppThemeProvider } from 'theme/AppThemeProvider'
 import { LocalAuthProvider, Auth0AuthBridge } from '../providers/authContext'
 function App() {
-  const [token, setToken] = useState<string | undefined>(undefined)
+  const [token, setToken] = useState<string | undefined>(() => {
    return localStorage.getItem('local_auth_token') || undefined
  })
  const whiteLabel = getWhitelabel()
  const manifestPath = "/" + whiteLabel.name.replace(/\s/g, "") + "/manifest.json"
@ -54,6 +59,29 @@ function App() {
    "/libracart"
  ]
  if (!shouldMountAuth0Provider()) {
    const placeholderReason =
      isAuth0Configured() && !isAuth0SpaOriginAllowed() ? 'insecure_origin' : 'unconfigured'
    if (!token) {
      return (
        <AppThemeProvider>
          <LocalAuthPlaceholder reason={placeholderReason} setToken={setToken} />
        </AppThemeProvider>
      )
    }
    return (
      <AppThemeProvider>
        <LocalAuthProvider token={token}>
          <HTTPProvider token={token}>
            <UserWrapper token={token} />
          </HTTPProvider>
        </LocalAuthProvider>
      </AppThemeProvider>
    )
  }
  return (
    <AppThemeProvider>
      <Auth0Provider
@ -70,9 +98,11 @@ function App() {
        {/* <CssBaseline /> */}
        <AuthWrapper setToken={setToken}>
          { token ?
-            <HTTPProvider token={token}>
+            <Auth0AuthBridge>
-              <UserWrapper token={token} />
+              <HTTPProvider token={token}>
-            </HTTPProvider>
+                <UserWrapper token={token} />
              </HTTPProvider>
            </Auth0AuthBridge>
          :
            <LoadingScreen
              message='Loading user profile'
--- a/src/app/LocalAuthPlaceholder.tsx
+++ b/src/app/LocalAuthPlaceholder.tsx
@ -0,0 +1,141 @@
 import { Box, Button, CssBaseline, Paper, Stack, TextField, Typography } from '@mui/material'
 import { getName } from 'services/whiteLabel'
 import { useState } from 'react'
 import axios from 'axios'
 export type LocalAuthPlaceholderReason = 'unconfigured' | 'insecure_origin'
 interface Props {
  reason?: LocalAuthPlaceholderReason
  setToken?: (token: string) => void
 }
 export default function LocalAuthPlaceholder(props: Props) {
  const { reason = 'unconfigured', setToken } = props
  const productName = getName()
  const [mode, setMode] = useState<'login' | 'signup'>('login')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const apiUrl = import.meta.env.VITE_APP_API_URL
  const handleSignup = async () => {
    setError('')
    setLoading(true)
    try {
      const resp = await axios.post(`${apiUrl}/local-auth/signup`, { email, password, name })
      const token = resp.data.token
      if (token && setToken) {
        localStorage.setItem('local_auth_token', token)
        setToken(token)
      }
    } catch (err: any) {
      setError(err.response?.data?.error || 'Signup failed')
    } finally {
      setLoading(false)
    }
  }
  const handleLogin = async () => {
    setError('')
    setLoading(true)
    try {
      const resp = await axios.post(`${apiUrl}/local-auth/login`, { email, password })
      const token = resp.data.token
      if (token && setToken) {
        localStorage.setItem('local_auth_token', token)
        setToken(token)
      }
    } catch (err: any) {
      setError(err.response?.data?.error || 'Login failed')
    } finally {
      setLoading(false)
    }
  }
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (mode === 'signup') {
      handleSignup()
    } else {
      handleLogin()
    }
  }
  const explanation =
    reason === 'insecure_origin'
      ? 'This URL is not a secure context for cloud sign-in. Use local account sign-in instead.'
      : 'Local account sign-in for this deployment.'
  return (
    <>
      <CssBaseline />
      <Box
        sx={{
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          bgcolor: 'background.default',
          p: 2,
        }}
      >
        <Paper elevation={2} sx={{ maxWidth: 420, width: '100%', p: 4 }}>
          <form onSubmit={handleSubmit}>
            <Stack spacing={2} alignItems="stretch">
              <Typography variant="h5" component="h1">
                {productName}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {explanation}
              </Typography>
              {mode === 'signup' && (
                <TextField
                  label="Name"
                  value={name}
                  onChange={e => setName(e.target.value)}
                  fullWidth
                />
              )}
              <TextField
                label="Email"
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                required
                fullWidth
              />
              <TextField
                label="Password"
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
                required
                fullWidth
              />
              {error && (
                <Typography variant="body2" color="error">
                  {error}
                </Typography>
              )}
              <Button variant="contained" size="large" type="submit" disabled={loading}>
                {mode === 'signup' ? 'Sign up' : 'Log in'}
              </Button>
              <Button
                variant="text"
                size="small"
                onClick={() => { setMode(mode === 'login' ? 'signup' : 'login'); setError('') }}
              >
                {mode === 'login' ? 'Need an account? Sign up' : 'Already have an account? Log in'}
              </Button>
            </Stack>
          </form>
        </Paper>
      </Box>
    </>
  )
 }
--- a/src/app/UserWrapper.tsx
+++ b/src/app/UserWrapper.tsx
@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import './App.css'
 import { useUserAPI } from '../providers/pond/userAPI'
 import { useAuth0 } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import LoadingScreen from './LoadingScreen'
 import NavigationContainer from '../navigation/NavigationContainer'
@ -12,9 +11,8 @@ import { makeStyles } from '@mui/styles'
 import { CssBaseline, Theme } from '@mui/material'
 import { AppThemeProvider } from 'theme/AppThemeProvider'
 import HTTPProvider from 'providers/http'
 import { Crisp } from "crisp-sdk-web";
 import { useMobile, useSnackbar } from 'hooks'
-import { initCrisp } from '../chat/CrispChat'
+import { initCrisp, isCrispEnabled } from '../chat/CrispChat'
 // import FirmwareLoader from './FirmwareLoader'
 const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
@ -64,16 +62,19 @@ export default function UserWrapper(props: Props) {
  const [loading, setLoading] = useState(false)
  const userAPI = useUserAPI();
  const classes = useStyles();
  const useAuth = useAuth0();
  const hasFetched = useRef(false);
  const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
  const snackbar = useSnackbar()
  const isMobile = useMobile()
-  const user_id = or(useAuth.user?.sub, "")
+  const user_id = (() => {
-
+    try {
-  const crispInitialized = useRef(false);
+      const payload = JSON.parse(atob(token.split('.')[1]))
-  Crisp.configure(import.meta.env.VITE_CRISP_WEBSITE_ID);
+      return or(payload.sub, '')
    } catch {
      return ''
    }
  })()
  const loadUser = useCallback(() => {
    if (!userAPI.getUserWithTeam) return;
@ -114,15 +115,14 @@ export default function UserWrapper(props: Props) {
  }, [setGlobal])
  useEffect(() => {
-    if (global?.user) {
+    if (!global?.user || !isCrispEnabled()) return;
-      initCrisp({
+    initCrisp({
-        websiteId: import.meta.env.VITE_CRISP_WEBSITE_ID,
+      websiteId: import.meta.env.VITE_CRISP_WEBSITE_ID,
-        email: global.user.settings.email,
+      email: global.user.settings.email,
-        nickname: global.user.settings.name || global.user.settings.email,
+      nickname: global.user.settings.name || global.user.settings.email,
-        phone: global.user.settings.phoneNumber,
+      phone: global.user.settings.phoneNumber,
-        tokenId: global.user.id(),
+      tokenId: global.user.id(),
-      });
+    });
    }
  }, [global]);
  // useEffect(() => {
@ -150,6 +150,7 @@ export default function UserWrapper(props: Props) {
  // }, [isMobile]);
  useEffect(() => {
    if (!isCrispEnabled()) return;
    let style = document.getElementById("crisp-offset-override");
    if (!style) {
      style = document.createElement("style");
--- a/src/app/main.tsx
+++ b/src/app/main.tsx
@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { StyledEngineProvider } from '@mui/material/styles'
 import App from './App'
 // I don't consider providing a disabled button to a Tooltip an error.
@ -20,6 +21,8 @@ if ('serviceWorker' in navigator) {
 createRoot(document.getElementById('root')!).render(
  // <StrictMode>
-    <App />
+    <StyledEngineProvider injectFirst>
      <App />
    </StyledEngineProvider>
  // </StrictMode>,
 )
--- a/src/bin/AddBinFab.tsx
+++ b/src/bin/AddBinFab.tsx
@ -28,6 +28,7 @@ const useStyles = makeStyles((theme: Theme) => {
      position: "fixed",
      bottom: theme.spacing(8), //for mobile navigator
      right: theme.spacing(2),
      zIndex: theme.zIndex.speedDial,
      [theme.breakpoints.up("sm")]: {
        bottom: theme.spacing(1.75)
      }
--- a/src/bin/BinVisualizerV2.tsx
+++ b/src/bin/BinVisualizerV2.tsx
@ -36,7 +36,6 @@ import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
 import { useGlobalState, useSnackbar } from "providers";
 import React, { useCallback, useEffect, useState } from "react";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import moment, { Moment } from "moment";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { getThemeType } from "theme";
@ -72,6 +71,7 @@ import ButtonGroup from "common/ButtonGroup";
 import ModeChangeDialog from "./conditioning/modeChangeDialog";
 import CustomGrainSelector from "grain/CustomGrainSelector";
 import BinControllerDisplay from "./BinControllerDisplay";
 import { useFullScreen } from "hooks/FullScreenHandle";
 const useStyles = makeStyles((theme: Theme) => {
  return ({
@ -217,7 +217,7 @@ export default function BinVisualizer(props: Props) {
  const isMobile = useMobile();
  const classes = useStyles();
  const theme = useTheme();
-  const fullScreenHandler = useFullScreenHandle();
+  const {fullScreenHandler, FullScreenWrapper} = useFullScreen()
  const viewport = useViewport();
  const { openSnack } = useSnackbar();
  const [fillPercentage, setFillPercentage] = useState<number | null>(0);
@ -1344,7 +1344,7 @@ export default function BinVisualizer(props: Props) {
    return (
      <Box display="flex" width={1} justifyContent="flex-end">
-        <FullScreen handle={fullScreenHandler}>
+        <FullScreenWrapper>
          <Box
            position="relative"
            height={1}
@ -1441,7 +1441,7 @@ export default function BinVisualizer(props: Props) {
              />
            </Box>
          </Box>
-        </FullScreen>
+        </FullScreenWrapper>
      </Box>
    );
  };
--- a/src/chat/ChatDrawer.tsx
+++ b/src/chat/ChatDrawer.tsx
@ -7,7 +7,7 @@ import Chat from "./Chat";
 import { pond } from "protobuf-ts/pond";
 import { useEffect, useState } from "react";
 import { useTeamAPI } from "providers";
-import { closeCrispChat, openCrispChat } from './CrispChat';
+import { closeCrispChat, isCrispEnabled, openCrispChat } from './CrispChat';
 import RobotIcon from "products/CommonIcons/robotIcon";
 const useStyles = makeStyles<Theme>((theme: Theme) => ({
@ -68,7 +68,7 @@ export function ChatDrawer(props: Props) {
  }
  useEffect(() => {
-    if (open) {
+    if (open && isCrispEnabled()) {
      closeCrispChat()
    }
  }, [open])
@ -108,13 +108,15 @@ export function ChatDrawer(props: Props) {
              <Avatar src={team.settings.avatar} />
            </IconButton>
          </Tooltip>
-          <Tooltip title={"Chat Assistant"} placement="right">
+          {isCrispEnabled() && (
-            <IconButton
+            <Tooltip title={"Chat Assistant"} placement="right">
-              onClick={openCrisp}
+              <IconButton
-            >
+                onClick={openCrisp}
-              <RobotIcon />
+              >
-            </IconButton>
+                <RobotIcon />
-          </Tooltip>
+              </IconButton>
            </Tooltip>
          )}
          <Box width={"100%"} borderBottom={"1px solid grey"} />
          {teams.map((t, i)=> {
            if (t.settings?.key === team.key()) return null;
--- a/src/chat/CrispChat.ts
+++ b/src/chat/CrispChat.ts
@ -5,6 +5,11 @@ const ANIMATION_DURATION_MS = 300;
 let initialized = false;
 export function isCrispEnabled(): boolean {
  const id = import.meta.env.VITE_CRISP_WEBSITE_ID;
  return typeof id === "string" && id.trim() !== "";
 }
 /**
 * Initialize Crisp and immediately hide the default chat button.
 * Call this once on app load (e.g., in UserWrapper after user data is ready).
@ -17,6 +22,7 @@ export function initCrisp(opts: {
  tokenId?: string;
 }) {
  if (initialized) return;
  if (!opts.websiteId?.trim()) return;
  Crisp.configure(opts.websiteId);
  Crisp.session.reset();
@ -71,6 +77,7 @@ function injectCrispStyles() {
 * Safe to call from any onClick handler.
 */
 export function openCrispChat() {
  if (!initialized) return;
  const chatbox = document.getElementById("crisp-chatbox");
  if (chatbox) {
    chatbox.classList.add("crisp-visible");
@ -86,6 +93,7 @@ export function openCrispChat() {
 * Close the chat window and hide the widget.
 */
 export function closeCrispChat() {
  if (!initialized) return;
  Crisp.chat.close();
  hideCrispChatButton();
 }
--- a/src/component/ComponentCard.tsx
+++ b/src/component/ComponentCard.tsx
@ -190,7 +190,18 @@ export default function ComponentCard(props: Props) {
        cableID = "Cable: " + (component.settings.addressType - 8);
      }
      return port + " " + cableID;
-    } else {
+    } else if (component.settings.addressType === quack.AddressType.ADDRESS_TYPE_I2C) {
      let description = ""
      let type = getFriendlyAddressTypeName(component.settings.addressType);
      description = type
      if(component.settings.expansionLine){
        description = description + ": Exp Line " + component.settings.expansionLine
      }
      if(component.settings.muxLine){
        description = description + " ,Mux Line " + component.settings.muxLine
      }
      return description
    }else{
      return getFriendlyAddressTypeName(component.settings.addressType);
    }
  };
--- a/src/device/DeviceTags.tsx
+++ b/src/device/DeviceTags.tsx
@ -8,7 +8,6 @@ import {
  ListItem,
  ListItemIcon,
  ListItemText,
  Theme,
  Typography
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
@ -19,10 +18,10 @@ import TagSettings from "common/TagSettings";
 import { Device, Tag } from "models";
 import { filterByTag } from "pbHelpers/Tag";
 import { useDeviceAPI, useSnackbar, useTagAPI } from "providers";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { pond } from "protobuf-ts/pond";
-const useStyles = makeStyles((_theme: Theme) => {
+const useStyles = makeStyles(() => {
  return ({
    addIcon: {
      color: "var(--status-ok)"
@ -45,19 +44,19 @@ function AddDeviceTag(props: AddDeviceTagProps) {
  const [searchValue, setSearchValue] = useState("");
  const [tags, setTags] = useState<Tag[]>([])
-  const loadTags = () => {
+  const loadTags = useCallback(() => {
    tagAPI.listTags().then(resp => {
-      let newTags: Tag[] = [];
+      const newTags: Tag[] = [];
      resp.data.tags.forEach((tag: pond.Tag) => {
        newTags.push(Tag.create(tag))
      })
      setTags(newTags)
    })
-  }
+  }, [tagAPI])
  useEffect(() => {
    loadTags()
-  }, [])
+  }, [loadTags])
  const tagItems = tags
    .filter(tag => !deviceTags.some(tagSettings => tagSettings.key === tag.settings.key))
@ -144,10 +143,10 @@ export default function DeviceTags(props: DeviceTagsProps) {
  const [deviceTags, setDeviceTags] = useState<pond.TagSettings[]>(device.status.tags);
  const previousDeviceRef = useRef(device);
-  const loadTags = () => {
+  const loadTags = useCallback(() => {
    // setLoading(true)
    tagAPI.listTags().then(resp => {
-      let newTags: Tag[] = [];
+      const newTags: Tag[] = [];
      resp.data.tags.forEach((tag: pond.Tag) => {
        newTags.push(Tag.create(tag))
      })
@ -155,7 +154,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
    }).finally(() => {
      // setLoading(false)
    })
-  }
+  }, [tagAPI])
  useEffect(() => {
    if (previousDeviceRef.current !== device) {
@ -166,14 +165,16 @@ export default function DeviceTags(props: DeviceTagsProps) {
  useEffect(() => {
    loadTags()
-  }, [])
+  }, [loadTags])
  const addTag = (tag: Tag) => {
    if (!deviceTags.some(dt => dt.key === tag.settings.key)) {
      deviceAPI
        .tag(device.id(), tag.settings.key)
        .then(() => {
-          setDeviceTags([...deviceTags, tag.settings]);
+          setDeviceTags(current =>
            current.some(dt => dt.key === tag.settings.key) ? current : [...current, tag.settings]
          );
        })
        .catch(() => error("Failed to tag device as " + tag.name));
    }
@ -184,7 +185,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
      deviceAPI
        .untag(device.id(), tag.key())
        .then(() => {
-          setDeviceTags(deviceTags.filter(t => tag.key() !== t.key));
+          setDeviceTags(current => current.filter(t => tag.key() !== t.key));
        })
        .catch(() => error("Failed to remove tag " + tag.name + " from device"));
    }
@ -197,7 +198,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
  return (
    <React.Fragment>
      {deviceTags?.map(tagSettings => {
-        let pondTag = pond.Tag.create({ settings: tagSettings })
+        const pondTag = pond.Tag.create({ settings: tagSettings })
        return (
          <Grid key={"device-tags-"+tagSettings.key}>
            <DeviceTag tag={Tag.create(pondTag)} removeTagFromDevice={removeTagFromDevice} />
--- a/src/device/autoDetect/DeviceScannedComponents.tsx
+++ b/src/device/autoDetect/DeviceScannedComponents.tsx
@ -12,6 +12,7 @@ import ResponsiveDialog from "common/ResponsiveDialog";
 import { useComponentAPI, useDeviceAPI, useSnackbar } from "hooks";
 import { ConfigurablePin } from "pbHelpers/AddressTypes";
 import ScannedOneWirePort from "./OneWire/ScannedOneWirePort";
 import I2CExpander from "./I2CExpander";
 interface Props {
  scannedComponents: pond.ComponentAddressMap
@ -27,6 +28,7 @@ interface CompStep {
 }
 let i2cBlacklistAddresses: number[] = [0x70]
 let i2cExpanderAddresses: number[] = [0x71]
 export default function DeviceScannedComponents(props: Props){
  const {scannedComponents, device, availablePositions, availableOffsets, refreshCallback} = props
@ -35,6 +37,7 @@ export default function DeviceScannedComponents(props: Props){
  const [scannedI2C, setScannedI2C] = useState<pond.DetectI2C>() //the unmodified scan of addresses
  const [scannedOneWire, setScannedOneWire] = useState<pond.DetectOneWire[]>([])
  const [validI2CCompAddresses, setValidI2CComponentAddresses] = useState<quack.AddressData[]>([]) //the filtered array of address data
  const [expanderAddresses, setExpanderAddresses] = useState<quack.AddressData[]>([])
  const [components, setComponents] = useState<Component[]>([])
  const [steps, setSteps] = useState<CompStep[]>([]);
  const { error, success } = useSnackbar();
@ -69,18 +72,23 @@ export default function DeviceScannedComponents(props: Props){
  useEffect(()=>{
    let valid: quack.AddressData[] = []
    let expanders: quack.AddressData[] = []
    //filter the address data
    let addr = scannedI2C?.settings?.foundAddresses
    console.log(addr)
    if(addr){
      addr.forEach(addrData => {
        if(!i2cBlacklistAddresses.includes(addrData.address)){
-          if(!(addrData.address === 0x71 && addrData.expansionLine === undefined)){
+            if(i2cExpanderAddresses.includes(addrData.address) && addrData.expansionLine === 0){
-            valid.push(addrData)
+              expanders.push(addrData)
-          }
+            }else{
              valid.push(addrData)
            }
        }
      })
    }
    console.log(valid)
    setExpanderAddresses(expanders)
    setValidI2CComponentAddresses(valid)
  },[scannedI2C])
@ -257,33 +265,49 @@ export default function DeviceScannedComponents(props: Props){
        {scannedI2C !== undefined && 
          <Box marginBottom={5}>
          <Box justifyContent="space-between" display="flex">
-            <Typography sx={{fontWeight: 650}}>
+            <Typography sx={{fontWeight: 650, fontSize: 20}}>
-              I2C Sensors
+              I2C Scan
            </Typography>
            <Button variant="contained" color="primary" onClick={()=>{removeScan(scannedI2C.key, pond.ObjectType.OBJECT_TYPE_DETECT_I2C)}}>Clear Scan</Button>
          </Box>
-          {validI2CCompAddresses.length > 0 ? validI2CCompAddresses.map((addr, index) => {
+          {expanderAddresses.length > 0 && 
-            return (
+            <Box marginBottom={3}>
-              <ScannedI2C key={index} sensorNum={index+1} addressData={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? new Map<quack.ComponentType, number[]>()}/>
+              <Typography fontWeight={650}>Detected Expanders</Typography>
-            )
+              {expanderAddresses.map((expAddr, index) => {
-          }) :
+                return (
-            <Box sx={{
+                  <I2CExpander key={index} address={expAddr}/>
-              margin: 1,
+                )
-              display: "flex",
+              })}
-              justifyContent: "center"
+            </Box>
-            }}>
+          }
-              <Typography>
+
-                No Sensors Found  
+          {validI2CCompAddresses.length > 0 ?
-              </Typography>
+            <Box>
              <Typography fontWeight={650}>Detected Sensors</Typography>
              {validI2CCompAddresses.map((addr, index) => {
                return (
                  <ScannedI2C key={index} sensorNum={index+1} addressData={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? new Map<quack.ComponentType, number[]>()}/>
                )
              })}
            </Box>
          :
            <Box sx={{
                margin: 1,
                display: "flex",
                justifyContent: "center"
              }}>
                <Typography>
                  No Sensors Found  
                </Typography>
              </Box>
            }
            </Box>
          }
          </Box>
        }
        {scannedOneWire.length > 0 &&
          <Box>
            <Box justifyContent="space-between" display="flex">
              <Typography sx={{fontWeight: 650}}>
-                Pin Port Sensors
+                Pin Port Scan
              </Typography>
            </Box>
            {scannedOneWire.map((scan,i) => {
--- a/src/device/autoDetect/I2CExpander.tsx
+++ b/src/device/autoDetect/I2CExpander.tsx
@ -0,0 +1,27 @@
 import { Box, Typography } from "@mui/material"
 import { quack } from "protobuf-ts/quack"
 interface Props {
    address: quack.AddressData
 }
 export default function I2CExpander(props: Props) {
    const {address} = props
    const expanderType = () => {
        switch(address.address){
            case 0x71:
                return "Grain Cable Expander"
            default:
                return "Unknown Expander"
        }
    }
    return (
        <Box sx={{marginY: 1}}>
            <Typography>{expanderType()} {address.muxLine ? "Mux Line: " + address.muxLine : ""}</Typography>
        </Box>
    )
 }
--- a/src/device/autoDetect/ScannedI2C.tsx
+++ b/src/device/autoDetect/ScannedI2C.tsx
@ -108,6 +108,7 @@ export default function ScannedI2C(props: Props){
    <Box sx={{marginY: 1}}>
      {sensorNum && <Typography>Sensor {sensorNum}</Typography>}
      <Typography variant="caption">{addressData.expansionLine !== 0 && "Expansion Line: " + addressData.expansionLine}</Typography>
      {/* may also want to specify the mux line, not sure if the sensors will have a mux line though */}
      {types.length > 0 ?
      <React.Fragment>
        <Grid2 container direction="row" alignItems="center" justifyContent="space-between">
--- a/src/hooks/FullScreenHandle.tsx
+++ b/src/hooks/FullScreenHandle.tsx
@ -0,0 +1,121 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 /**
 * Drop-in replacement for react-full-screen's useFullScreenHandle + FullScreen component.
 *
 * Motivation: react-full-screen 1.1.1 doesn't debounce fullscreenchange events, so on
 * Windows systems with DPI scaling > 100%, the resize triggered during fullscreen entry
 * fires a fullscreenchange event that the library misinterprets as an exit, immediately
 * popping back out of fullscreen.
 *
 * This hook bypasses the library entirely and calls the native Fullscreen API directly,
 * ignoring fullscreenchange events fired within DEBOUNCE_MS of entry to absorb the
 * DPI-scaling resize blip.
 *
 * Usage — replace in BinVisualizerV2.tsx:
 *
 *   // Remove:
 *   import { FullScreen, useFullScreenHandle } from "react-full-screen";
 *   const fullScreenHandler = useFullScreenHandle();
 *   <FullScreen handle={fullScreenHandler}> ... </FullScreen>
 *
 *   // Add:
 *   import { useFullScreen } from "hooks/useFullScreen";
 *   const { fullScreenHandler, FullScreenWrapper } = useFullScreen();
 *   <FullScreenWrapper> ... </FullScreenWrapper>
 *
 *   // Everything else (fullScreenHandler.active, .enter(), .exit()) stays the same.
 */
 const DEBOUNCE_MS = 500;
 export interface FullScreenHandle {
  active: boolean;
  enter: () => void;
  exit: () => void;
 }
 export function useFullScreen(): {
  fullScreenHandler: FullScreenHandle;
  FullScreenWrapper: React.FC<{ children: React.ReactNode }>;
 } {
  const [active, setActive] = useState(false);
  const containerRef = useRef<HTMLDivElement | null>(null);
  // Timestamp of the last enter() call — used to debounce spurious exit events
  const enterTimeRef = useRef<number>(0);
  const enter = useCallback(() => {
    const el = containerRef.current;
    if (!el) return;
    enterTimeRef.current = Date.now();
    if (el.requestFullscreen) {
      el.requestFullscreen().catch(() => {
        // Some browsers (e.g. iOS Safari) reject the promise — silently ignore
      });
    } else if ((el as any).webkitRequestFullscreen) {
      (el as any).webkitRequestFullscreen();
    } else if ((el as any).mozRequestFullScreen) {
      (el as any).mozRequestFullScreen();
    } else if ((el as any).msRequestFullscreen) {
      (el as any).msRequestFullscreen();
    }
  }, []);
  const exit = useCallback(() => {
    if (document.exitFullscreen) {
      document.exitFullscreen().catch(() => {});
    } else if ((document as any).webkitExitFullscreen) {
      (document as any).webkitExitFullscreen();
    } else if ((document as any).mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any).msExitFullscreen) {
      (document as any).msExitFullscreen();
    }
  }, []);
  useEffect(() => {
    const handleChange = () => {
      const fullscreenEl =
        document.fullscreenElement ||
        (document as any).webkitFullscreenElement ||
        (document as any).mozFullScreenElement ||
        (document as any).msFullscreenElement;
      const isNowFullscreen = fullscreenEl === containerRef.current;
      // If we just called enter() and this event fires within DEBOUNCE_MS,
      // and it looks like an exit, ignore it — it's the DPI-scaling resize blip
      if (!isNowFullscreen && Date.now() - enterTimeRef.current < DEBOUNCE_MS) {
        return;
      }
      setActive(isNowFullscreen);
    };
    document.addEventListener("fullscreenchange", handleChange);
    document.addEventListener("webkitfullscreenchange", handleChange);
    document.addEventListener("mozfullscreenchange", handleChange);
    document.addEventListener("MSFullscreenChange", handleChange);
    return () => {
      document.removeEventListener("fullscreenchange", handleChange);
      document.removeEventListener("webkitfullscreenchange", handleChange);
      document.removeEventListener("mozfullscreenchange", handleChange);
      document.removeEventListener("MSFullscreenChange", handleChange);
    };
  }, []);
  const FullScreenWrapper: React.FC<{ children: React.ReactNode }> = useCallback(
    ({ children }) => (
      <div ref={containerRef} style={{ width: "100%", height: "100%" }}>
        {children}
      </div>
    ),
    []
  );
  return {
    fullScreenHandler: { active, enter, exit },
    FullScreenWrapper,
  };
 }
--- a/src/navigation/BottomNavigator.tsx
+++ b/src/navigation/BottomNavigator.tsx
@ -13,14 +13,14 @@ import BinsIcon from "products/Bindapt/BinsIcon";
 import { useGlobalState } from "providers";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { IsAdaptiveAgriculture, isBXT, IsMiVent, IsAdCon, IsOmniAir, IsMiPCA, IsIntellifarms } from "services/whiteLabel";
+import { getFeatures, getWhitelabel } from "services/whiteLabel";
 import FieldsIcon from "products/AgIcons/FieldsIcon";
 import NexusSTIcon from "products/Construction/NexusSTIcon";
 import OmniAirDeviceIcon from "products/AviationIcons/OmniAirDeviceIcon";
 import AirportMapIcon from "products/AviationIcons/AirportMapIcon";
 import PlaneIcon from "products/AviationIcons/PlaneIcon";
 import JobsiteIcon from "products/Construction/JobSiteIcon";
-import { useAuth0 } from "@auth0/auth0-react";
+import { useAuthContext } from "providers/authContext";
 interface Props {
  sideIsOpen: boolean;
@ -33,23 +33,19 @@ export default function BottomNavigator(props: Props) {
  const navigate = useNavigate();
  const location = useLocation();
  const prevLocation = usePrevious(location);
-  const { isAuthenticated } = useAuth0();
+  const { isAuthenticated } = useAuthContext();
  const [{ user }] = useGlobalState();
  const [route, setRoute] = useState(sideIsOpen ? "side" : "");
-  const isAg = IsAdaptiveAgriculture();
+  const wl = getWhitelabel();
-  const isIntel = IsIntellifarms();
+  const f = getFeatures();
  const isMiVent = IsMiVent();
  const isAdCon = IsAdCon();
  const isOmni = IsOmniAir();
  const isMiPCA = IsMiPCA();
  const reRoute = useCallback(
    (path: string) => {
      if (path === "") {
-        if (isAg || isIntel) {
+        if (f.bins) {
          return "bins";
        }
-        if (isMiVent) {
+        if (f.ventilation) {
          return "ventilation";
        }
        return "devices";
@ -75,7 +71,7 @@ export default function BottomNavigator(props: Props) {
      }
      return path;
    },
-    [isAg, isMiVent, isIntel]
+    [f]
  );
  const autoDetectRoute = useCallback(() => {
@ -106,27 +102,27 @@ export default function BottomNavigator(props: Props) {
  const authenticatedNavigation = () => {
    return (
      <BottomNavigation value={route} onChange={(_, newValue) => handleRouteChange(newValue)}>
-        {isAg || isIntel && (
+        {f.visualFarm && (
          <BottomNavigationAction label="Farm" icon={<FieldsIcon type={getType()} />} value="visualFarm" />
        )}
-        {isAg || isIntel && (
+        {f.bins && (
          <BottomNavigationAction label="Bins" icon={<BinsIcon type={getType()} />} value="bins" />
        )}
-        {isAdCon && (
+        {f.constructionMap && (
          <BottomNavigationAction
            label="Site Map"
            icon={<FieldsIcon type={getType()} />}
            value="constructionMap"
          />
        )}
-        {(isOmni || isMiPCA) && (
+        {f.aviationMap && (
          <BottomNavigationAction
            label="Map"
            icon={<AirportMapIcon type={getType()} />}
            value="aviationMap"
          />
        )}
-        {(isOmni || isMiPCA) && (
+        {f.terminals && (
          <BottomNavigationAction
            label="Terminals"
            icon={<PlaneIcon type={getType()} />}
@ -137,11 +133,11 @@ export default function BottomNavigator(props: Props) {
        <BottomNavigationAction
          label="Devices"
          icon={
-            (isAg || isIntel) ? (
+            f.bins ? (
              <BindaptIcon type={getType()} />
-            ) : isAdCon ? (
+            ) : f.constructionMap ? (
              <NexusSTIcon type={getType()} />
-            ) : (isOmni || isMiPCA) ? (
+            ) : f.aviationMap ? (
              <OmniAirDeviceIcon type={getType()} />
            ) : (
              <DevicesIcon />
@ -149,22 +145,15 @@ export default function BottomNavigator(props: Props) {
          }
          value="devices"
        />
-        {isAdCon && (
+        {f.jobsites && (
          <BottomNavigationAction
            label="Sites"
            icon={<JobsiteIcon type={getType()} />}
            value="jobsites"
          />
        )}
        {/* {isMiVent && (
          <BottomNavigationAction
            label="Ventilation"
            icon={<VentilationIcon type="light" />}
            value="ventilation"
          />
        )} */}
-        {isBXT() && user.hasFeature("security") && (
+        {f.security && user.hasFeature("security") && (
          <BottomNavigationAction label="Security" icon={<Security />} value="security" />
        )}
        <BottomNavigationAction label="More" icon={<MoreHoriz />} value="more" />
--- a/src/navigation/Router.tsx
+++ b/src/navigation/Router.tsx
@ -1,7 +1,7 @@
 import { lazy, Suspense } from "react";
 import LoadingScreen from "../app/LoadingScreen";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { useAuth0 } from "@auth0/auth0-react";
+import { useAuthContext } from "providers/authContext";
 import Header from "app/Header";
 import Logout from "pages/Logout";
 import { ErrorBoundary } from "react-error-boundary";
@ -57,7 +57,7 @@ export const appendToUrl = (appendage: number | string) => {
 export default function Router() {
-  const { /*isAuthenticated, loginWithRedirect,*/ isLoading } = useAuth0();
+  const { isAuthenticated } = useAuthContext();
  const whiteLabel = getWhitelabel();
  const [{ user }] = useGlobalState();
@ -306,13 +306,7 @@ export default function Router() {
    );
  }
-  if (isLoading) return null;
+  if (!isAuthenticated) return null;
  // if (!isAuthenticated) {
  //   loginWithRedirect()
  //   return (
  //     null
  //   )
  // }
  function ErrorFallback({ error }: { error: Error }) {
    return <div>Something went wrong: {error.stack}</div>;
--- a/src/navigation/SideNavigator.tsx
+++ b/src/navigation/SideNavigator.tsx
@ -23,19 +23,9 @@ import BindaptIcon from "../products/Bindapt/BindaptIcon";
 import { useLocation, useNavigate } from "react-router-dom";
 import BinsIcon from "products/Bindapt/BinsIcon";
 import { useGlobalState } from "providers";
-import {
+import { getFeatures } from "services/whiteLabel";
  IsAdaptiveAgriculture,
  // hasTutorialPlaylist,
  IsAdCon,
  IsIntellifarms,
  IsMiPCA,
  // isBXT,
  IsMiVent,
  IsOmniAir,
  IsStreamline,
 } from "services/whiteLabel";
 import MiningIcon from "products/ventilation/MiningIcon";
-import { useAuth0 } from "@auth0/auth0-react";
+import { useAuthContext } from "providers/authContext";
 import FieldsIcon from "products/AgIcons/FieldsIcon";
 import PlaneIcon from "products/AviationIcons/PlaneIcon";
 import AirportMapIcon from "products/AviationIcons/AirportMapIcon";
@ -53,6 +43,7 @@ import CNHiIcon from "products/CommonIcons/cnhiIcon";
 import LibraCartIcon from "products/CommonIcons/libracartIcon";
 const drawerWidth = 230;
 const closedDrawerWidth = 9.25;
 const useStyles = makeStyles((theme: Theme) => ({
  sideMenu: {
@ -66,6 +57,8 @@ const useStyles = makeStyles((theme: Theme) => ({
  sideMenuOpened: {
    zIndex: theme.zIndex.drawer + 2,
    width: drawerWidth,
    minWidth: drawerWidth,
    maxWidth: drawerWidth,
    transition: theme.transitions.create(["width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
@ -76,12 +69,16 @@ const useStyles = makeStyles((theme: Theme) => ({
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
-    // overflowX: "hidden",
+    overflowX: "hidden",
    width: theme.spacing(0),
    minWidth: theme.spacing(0),
    maxWidth: theme.spacing(0),
    // zIndex: theme.zIndex.drawer,
    // opacity: 0,
    [theme.breakpoints.up("md")]: {
-      width: theme.spacing(9.25),
+      width: theme.spacing(closedDrawerWidth),
      minWidth: theme.spacing(closedDrawerWidth),
      maxWidth: theme.spacing(closedDrawerWidth),
      opacity: 1
    }
  },
@ -130,7 +127,7 @@ interface Props {
 export default function SideNavigator(props: Props) {
  const { open, onOpen, onClose } = props;
-  const { isAuthenticated } = useAuth0()
+  const { isAuthenticated } = useAuthContext()
  const theme = useTheme();
  const width = useWidth();
  const classes = useStyles();
@ -165,16 +162,10 @@ export default function SideNavigator(props: Props) {
  }
  const authenticatedSideMenu = () => {
-    const isMiVent = IsMiVent();
+    const f = getFeatures();
    const isAg = IsAdaptiveAgriculture() 
    const isIntel = IsIntellifarms()
    const isStreamline = IsStreamline()
    const isOmni = IsOmniAir()
    const isMiPCA = IsMiPCA()
    const isAdCon = IsAdCon()
    return (
      <List className={classes.list} component="nav">
-        {(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
+        {(f.visualFarm || user.hasFeature("admin")) && (
        <Tooltip title="Visual Farm" placement="right">
          <ListItemButton
            id="tour-visual-farm"
@ -188,7 +179,7 @@ export default function SideNavigator(props: Props) {
          </ListItemButton>
        </Tooltip>
        )}
-        {((isOmni || isMiPCA) || user.hasFeature("admin")) && (
+        {(f.aviationMap || user.hasFeature("admin")) && (
        <Tooltip title="Aviation Map" placement="right">
          <ListItemButton
            id="tour-aviation-map"
@ -202,7 +193,7 @@ export default function SideNavigator(props: Props) {
          </ListItemButton>
        </Tooltip>
        )}
-        {(isAdCon || user.hasFeature("admin")) && (
+        {(f.constructionMap || user.hasFeature("admin")) && (
        <Tooltip title="Construction Map" placement="right">
          <ListItemButton
            id="tour-construction-map"
@ -216,7 +207,7 @@ export default function SideNavigator(props: Props) {
          </ListItemButton>
        </Tooltip>
        )}
-        {(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
+        {(f.contracts || user.hasFeature("admin")) && (
          <Tooltip title="Contracts" placement="right">
            <ListItemButton
              id="tour-contracts"
@ -230,7 +221,7 @@ export default function SideNavigator(props: Props) {
            </ListItemButton>
          </Tooltip>
        )}
-        {(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
+        {(f.bins || user.hasFeature("admin")) && (
        <Tooltip title="Bins" placement="right">
          <ListItemButton
            id="tour-bins"
@ -244,7 +235,7 @@ export default function SideNavigator(props: Props) {
          </ListItemButton>
        </Tooltip>
        )}
-        {((isOmni || isMiPCA) || user.hasFeature("admin")) && (
+        {(f.terminals || user.hasFeature("admin")) && (
          <Tooltip title="Terminals" placement="right">
            <ListItemButton
              id="tour-terminals"
@ -258,7 +249,7 @@ export default function SideNavigator(props: Props) {
            </ListItemButton>
          </Tooltip>
        )}
-        {(user.hasFeature("installer") && isAg || user.hasFeature("admin")) &&
+        {(f.cableEstimator && user.hasFeature("installer") || user.hasFeature("admin")) &&
          <Tooltip title="Cable Estimator" placement="right">
            <ListItemButton
              id="tour-cable-estimator"
@ -272,7 +263,7 @@ export default function SideNavigator(props: Props) {
            </ListItemButton>
          </Tooltip>
        }
-        {(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
+        {(f.transactions || user.hasFeature("admin")) && (
          <Tooltip title="Transactions" placement="right">
            <ListItemButton
              id="tour-transactions"
@ -286,7 +277,7 @@ export default function SideNavigator(props: Props) {
            </ListItemButton>
          </Tooltip>
        )}
-        {(isMiVent || user.hasFeature("admin")) && (
+        {(f.mines || user.hasFeature("admin")) && (
          <Tooltip title="Mines" placement="right">
            <ListItemButton
              id="tour-mines"
@ -364,7 +355,7 @@ export default function SideNavigator(props: Props) {
            {open && <ListItemText primary="Users" />}
          </ListItemButton>
        </Tooltip>
-        {(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
+        {(f.fields || user.hasFeature("admin")) && (
        <Tooltip title="My Fields" placement="right">
          <ListItemButton
            id="tour-field-list"
@ -378,7 +369,7 @@ export default function SideNavigator(props: Props) {
          </ListItemButton>
        </Tooltip>
        )}
-        {(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
+        {(f.grainTypes || user.hasFeature("admin")) && (
        <Tooltip title="Grain Types" placement="right">
          <ListItemButton
            id="tour-grain-types"
@ -393,7 +384,7 @@ export default function SideNavigator(props: Props) {
        </Tooltip>
        )}
-        {(isAdCon || user.hasFeature("admin")) && (
+        {(f.jobsites || user.hasFeature("admin")) && (
        <Tooltip title="Jobsites" placement="right">
          <ListItemButton
            id="tour-jobsites"
@ -407,7 +398,7 @@ export default function SideNavigator(props: Props) {
          </ListItemButton>
        </Tooltip>
        )}
-        {(isAdCon || user.hasFeature("admin")) && (
+        {(f.heaters || user.hasFeature("admin")) && (
        <Tooltip title="Heaters" placement="right">
          <ListItemButton
            id="tour-heaters"
@ -462,7 +453,7 @@ export default function SideNavigator(props: Props) {
            </ListItemButton>
          </Tooltip>
        }
-        {(isAg || isIntel || isStreamline || user.hasFeature("admin")) &&
+        {(f.marketplace || user.hasFeature("admin")) &&
          <Tooltip title="Marketplace" placement="right">
            <ListItemButton
              id="tour-marketplace"
@ -538,11 +529,16 @@ export default function SideNavigator(props: Props) {
      onClose={onClose}
      sx={{ pointerEvents: isMobile&&!open ? "none" : "auto"}}
    >
-      <Toolbar >
+      <Toolbar>
        <Grid container direction="row" justifyContent={"flex-end"}>
          <Grid>
-            <IconButton onClick={onClose} aria-label="onClose side menu">
+            <IconButton
-              {theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
+              onClick={open ? onClose : onOpen}
              aria-label={open ? "Close side menu" : "Open side menu"}
            >
              {open
                ? theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />
                : theme.direction === "rtl" ? <ChevronLeft /> : <ChevronRight />}
            </IconButton>
          </Grid>
        </Grid>
--- a/src/pages/Bins.tsx
+++ b/src/pages/Bins.tsx
@ -58,9 +58,9 @@ import {
  // useBinYardAPI,
  useGlobalState,
  useInteractionsAPI,
-  useSnackbar,
+  useSnackbar
  useTeamAPI
 } from "providers";
 import { useTeamAPI } from "providers/pond/teamAPI";
 import React, { SetStateAction, useCallback, useEffect, useState } from "react";
 // import { getThemeType } from "theme";
 import { stringToMaterialColour } from "utils";
--- a/src/pages/Device.tsx
+++ b/src/pages/Device.tsx
@ -7,7 +7,8 @@ import { useDeviceStatusStreams } from "hooks/useDeviceStatusStreams";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import PageContainer from "./PageContainer";
-import { useHTTP, useMobile } from "hooks";
+import { useMobile } from "hooks";
 import { useHTTP } from "providers/http";
 import LoadingScreen from "app/LoadingScreen";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import DeviceActions from "device/DeviceActions";
--- a/src/pages/DeviceComponent.tsx
+++ b/src/pages/DeviceComponent.tsx
@ -38,7 +38,8 @@ import {
 } from "pbHelpers/DeviceAvailability";
 import { getDefaultInteraction } from "pbHelpers/Interaction";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState, useTeamAPI } from "providers";
+import { useGlobalState } from "providers";
 import { useTeamAPI } from "providers/pond/teamAPI";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 // import { useRouteMatch } from "react-router";
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@ -5,8 +5,9 @@ import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
 import { pond } from "protobuf-ts/pond";
-import { useDeviceAPI, useGlobalState, useGroupAPI, useTeamAPI } from "providers";
+import { useDeviceAPI, useGlobalState, useGroupAPI } from "providers";
-import { useHTTP } from "hooks";
+import { useHTTP } from "providers/http";
 import { useTeamAPI } from "providers/pond/teamAPI";
 import { useDeviceStatusStreams } from "hooks/useDeviceStatusStreams";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import PageContainer from "./PageContainer";
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@ -1,10 +1,11 @@
-import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react";
+import { RedirectLoginOptions } from "@auth0/auth0-react";
 // import { useAuth } from "hooks";
 import queryString from "query-string";
 import { useEffect } from "react";
 import { useLocation } from "react-router";
 // import Loading from "./Loading";
 import LoadingScreen from "app/LoadingScreen";
 import { useAuthContext } from "providers/authContext";
 // interface Props {
 //   prevPath?: string;
@ -13,7 +14,7 @@ import LoadingScreen from "app/LoadingScreen";
 export default function Login() {
  // const { prevPath } = props;
  const location = useLocation();
-  const { loginWithRedirect } = useAuth0();
+  const { loginWithRedirect } = useAuthContext();
  // const setRouteBeforeLogin = useCallback((): Promise<string> => {
  //   return new Promise(function(resolve) {
--- a/src/pages/Logout.tsx
+++ b/src/pages/Logout.tsx
@ -1,9 +1,9 @@
-import { useAuth0 } from "@auth0/auth0-react";
+import { useAuthContext } from "providers/authContext";
 import LoadingScreen from "app/LoadingScreen";
 import { useEffect } from "react";
 export default function Logout() {
-  const { logout } = useAuth0();
+  const { logout } = useAuthContext();
  useEffect(() => {
    logout();
--- a/src/pages/PageContainer.tsx
+++ b/src/pages/PageContainer.tsx
@ -1,4 +1,4 @@
-import { Container, SxProps, Theme } from "@mui/material";
+import { Container, SxProps, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import classNames from "classnames";
 // import { useMobile } from "hooks";
@ -47,6 +47,23 @@ const useStyles = makeStyles((theme: Theme) => ({
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  buildInfo: {
    position: "fixed" as const,
    bottom: 56,
    left: 8,
    fontSize: 10,
    lineHeight: 1.3,
    opacity: 0.35,
    color: theme.palette.text.secondary,
    pointerEvents: "none" as const,
    zIndex: 1,
    [theme.breakpoints.up("sm")]: {
      bottom: 8,
    },
    [theme.breakpoints.up("md")]: {
      left: `calc(${theme.spacing(9)} + 8px)`,
    }
  }
 }))
@ -78,8 +95,13 @@ export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
      }}
      disableGutters
      maxWidth={false}
-      children={<>{children}</>}
+    >
-    />
+      {children}
      <Typography component="div" className={classes.buildInfo}>
        {new Date(__BUILD_DATE__).toLocaleDateString()}<br />
        {__GIT_HASH__}
      </Typography>
    </Container>
  );
 };
--- a/src/pages/SignupCallback.tsx
+++ b/src/pages/SignupCallback.tsx
@ -7,7 +7,7 @@ import { CheckCircleOutline } from "@mui/icons-material";
 import { green } from "@mui/material/colors";
 import Tour, { TourStep } from "common/Tour";
 import Emoji from "react-emoji-render";
-import { getWhitelabel, IsAdaptiveAgriculture } from "services/whiteLabel";
+import { getWhitelabel, getFeatures } from "services/whiteLabel";
 import { pond } from "protobuf-ts/pond";
 import { User } from "models";
 // import { color } from "framer-motion";
@ -154,7 +154,7 @@ export default function SignupCallback () {
            <MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_FEET}>Feet (ft)</MenuItem>
          </TextField>
        </Grid2>
-        {IsAdaptiveAgriculture() && (
+        {getFeatures().grainUnit && (
          <Grid2 size={{ xs: 12 }}>
            <TextField
              select
@ -294,7 +294,7 @@ export default function SignupCallback () {
      placement: "right"
    })
    //tasks step
-    if (IsAdaptiveAgriculture()) {
+    if (getFeatures().visualFarm) {
      steps.push({
        title: "Visual Farm",
        content: (
--- a/src/pages/Team.tsx
+++ b/src/pages/Team.tsx
@ -12,10 +12,11 @@ import { appendToUrl } from "navigation/Router";
 import PageContainer from "pages/PageContainer";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState, useSnackbar, useTeamAPI, useUserAPI } from "providers";
+import { useGlobalState, useSnackbar, useUserAPI } from "providers";
 import { useTeamAPI } from "providers/pond/teamAPI";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { getSignatureAccentColour, IsAdaptiveAgriculture, IsStreamline } from "services/whiteLabel";
+import { getSignatureAccentColour, getFeatures } from "services/whiteLabel";
 import TeamActions from "teams/TeamActions";
 import TeamKeyManager from "teams/TeamKeyManager";
 import ObjectUsers from "user/ObjectUsers";
@ -219,8 +220,7 @@ export default function TeamPage() {
    navigate("bins")
  }
-  const isAg = IsAdaptiveAgriculture()
+  const f = getFeatures()
  const isStreamline = IsStreamline()
  return (
    <PageContainer spacing={isMobile ? 1 : 2}>
@ -266,7 +266,7 @@ export default function TeamPage() {
              <ListItemButton onClick={toGroups}>
                Groups
              </ListItemButton>
-              {((isAg || isStreamline) || user.hasFeature("admin")) && 
+              {(f.bins || user.hasFeature("admin")) &&
                <>
                  <Divider />
                  <ListItemButton onClick={toBins}>
--- a/src/providers/LoginButton.tsx
+++ b/src/providers/LoginButton.tsx
@ -1,7 +1,7 @@
-import { useAuth0 } from '@auth0/auth0-react';
+import { useAuthContext } from './authContext';
 const LoginButton = () => {
-  const { loginWithRedirect } = useAuth0();
+  const { loginWithRedirect } = useAuthContext();
  return (
    <button onClick={() => loginWithRedirect()}>
--- a/src/providers/authContext.tsx
+++ b/src/providers/authContext.tsx
@ -0,0 +1,44 @@
 import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react"
 import { createContext, PropsWithChildren, useContext } from "react"
 interface IAuthContext {
  isAuthenticated: boolean
  loginWithRedirect: (options?: RedirectLoginOptions) => void | Promise<void>
  logout: () => void
 }
 const AuthContext = createContext<IAuthContext>({
  isAuthenticated: false,
  loginWithRedirect: () => {},
  logout: () => {},
 })
 export function LocalAuthProvider(props: PropsWithChildren<{ token: string }>) {
  const { children, token } = props
  const doLogout = () => {
    localStorage.removeItem('local_auth_token')
    window.location.href = '/'
  }
  return (
    <AuthContext.Provider
      value={{
        isAuthenticated: !!token,
        loginWithRedirect: doLogout,
        logout: doLogout,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
 }
 export function Auth0AuthBridge(props: PropsWithChildren<{}>) {
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0()
  return (
    <AuthContext.Provider value={{ isAuthenticated, loginWithRedirect, logout: () => logout({ logoutParams: { returnTo: window.location.origin } }) }}>
      {props.children}
    </AuthContext.Provider>
  )
 }
 export const useAuthContext = () => useContext(AuthContext)
--- a/src/providers/http.tsx
+++ b/src/providers/http.tsx
@ -2,7 +2,7 @@ import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import moment from "moment";
 import { createContext, PropsWithChildren, useContext } from "react";
 import PondProvider from "./pond/pond";
-import { useAuth0 } from "@auth0/auth0-react";
+import { useAuthContext } from "./authContext";
 import SnackbarProvider from "./Snackbar";
 interface IHTTPContext {
@ -30,7 +30,7 @@ export const HTTPContext = createContext<IHTTPContext>({} as IHTTPContext);
 export default function HTTPProvider(props: Props) {
  const { children, token } = props;
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
+  const { isAuthenticated, loginWithRedirect } = useAuthContext();
  const defaultOptions = (demo: boolean = false) => {
    if (demo || !isAuthenticated || !token) {
@ -50,31 +50,24 @@ export default function HTTPProvider(props: Props) {
    return config;
  };
-  function isTokenExpired(token: string): boolean {
+  function isTokenExpired(token: string | undefined): boolean {
    if (!token) return true;
    try {
      // Split the token and decode the payload (second part)
      const payloadBase64 = token.split('.')[1];
-      const decodedPayload = atob(payloadBase64); // Decode base64
+      const payload = JSON.parse(atob(payloadBase64));
      const payload = JSON.parse(decodedPayload);
      // Get expiration time (in seconds)
      const exp = payload.exp;
-  
+      if (!exp) return true;
-      if (!exp) return true; // No exp field? Treat as expired
+      return Math.floor(Date.now() / 1000) >= exp;
-  
+    } catch {
-      // Current time in seconds
+      return true;
      const now = Math.floor(Date.now() / 1000);
      // Compare
      return now >= exp;
    } catch (error) {
      console.error("Invalid token format:", error);
      return true; // Err on the side of caution if decoding fails
    }
  }
  function get<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
-    if (isTokenExpired(token)) loginWithRedirect()
+    if (isTokenExpired(token)) {
      loginWithRedirect();
      return Promise.reject(new Error("token expired"));
    }
    return axios.get(url, {...defaultOptions(), ...spreadOptions});
  }
@ -83,6 +76,10 @@ export default function HTTPProvider(props: Props) {
    data?: any,
    spreadOptions?: AxiosRequestConfig
  ): Promise<AxiosResponse<T>> {
    if (isTokenExpired(token)) {
      loginWithRedirect();
      return Promise.reject(new Error("token expired"));
    }
    return axios.put(url, data, { ...defaultOptions(), ...spreadOptions });
  }
@ -91,10 +88,18 @@ export default function HTTPProvider(props: Props) {
    data?: any,
    spreadOptions?: AxiosRequestConfig
  ): Promise<AxiosResponse<T>> {
    if (isTokenExpired(token)) {
      loginWithRedirect();
      return Promise.reject(new Error("token expired"));
    }
    return axios.post(url, data, { ...defaultOptions(), ...spreadOptions });
  }
  function del<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    if (isTokenExpired(token)) {
      loginWithRedirect();
      return Promise.reject(new Error("token expired"));
    }
    return axios.delete(url, { ...defaultOptions(), ...spreadOptions });
  }
--- a/src/providers/pond/ObjectHeaterAPI.tsx
+++ b/src/providers/pond/ObjectHeaterAPI.tsx
@ -1,7 +1,7 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import React, { createContext, PropsWithChildren, useContext } from "react";
 import { or } from "utils";
 import { pondURL } from "./pond";
--- a/src/providers/pond/backpackAPI.tsx
+++ b/src/providers/pond/backpackAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/binAPI.tsx
+++ b/src/providers/pond/binAPI.tsx
@ -1,4 +1,5 @@
-import { useHTTP, usePermissionAPI } from "hooks";
+import { useHTTP } from "../http";
 import { usePermissionAPI } from "./permissionAPI";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { has, or } from "utils/types";
@ -6,7 +7,7 @@ import { User, binScope } from "models";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
 import { dateRange } from "providers/http";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { quack } from "protobuf-ts/quack";
 export interface IBinAPIContext {
--- a/src/providers/pond/binYardAPI.tsx
+++ b/src/providers/pond/binYardAPI.tsx
@ -1,10 +1,10 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { or } from "utils/types";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface IBinYardAPIContext {
  addBinYard: (bin: pond.BinYardSettings, otherTeam?: string) => Promise<AxiosResponse<pond.AddBinYardResponse>>;
--- a/src/providers/pond/cnhiProxyAPI.tsx
+++ b/src/providers/pond/cnhiProxyAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 //import { or } from "utils";
--- a/src/providers/pond/componentAPI.tsx
+++ b/src/providers/pond/componentAPI.tsx
@ -1,4 +1,4 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 // import { useWebsocket } from "websocket";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
@ -7,7 +7,7 @@ import { getComponentIDString } from "pbHelpers/Component";
 import { Component } from "models";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { quack } from "protobuf-ts/quack";
 export interface IComponentAPIContext {
--- a/src/providers/pond/contractAPI.tsx
+++ b/src/providers/pond/contractAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface IContractInterface {
  addContract: (
--- a/src/providers/pond/datadogProxyAPI.tsx
+++ b/src/providers/pond/datadogProxyAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/deviceAPI.tsx
+++ b/src/providers/pond/deviceAPI.tsx
@ -1,10 +1,11 @@
-import { useHTTP, usePermissionAPI } from "hooks";
+import { useHTTP } from "../http";
 import { usePermissionAPI } from "./permissionAPI";
 import { Component, deviceScope, User } from "models";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import moment from "moment";
 import { or } from "utils/types";
 import { dateRange } from "providers/http";
@ -699,8 +700,12 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
  };
  const setTags = (id: number, tags: string[]) => {
    const keys = getContextKeys()
    const types = getContextTypes()
    let url = "/devices/" + id + "/tags" + "?keys=" + keys + "&types=" + types
    if (as && !keys.includes(as)) url += "&as=" + as
    return new Promise<AxiosResponse>((resolve, reject) => {
-      put(pondURL("/devices/" + id + "/tags"), { tags }).then(resp => {
+      put(pondURL(url), { tags }).then(resp => {
        return resolve(resp)
      }).catch(err => {
        return reject(err)
@ -745,8 +750,12 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
  };
  const untag = (id: number, tag: string) => {
    const keys = getContextKeys()
    const types = getContextTypes()
    let url = "/devices/" + id + "/tags/" + tag + "?keys=" + keys + "&types=" + types
    if (as && !keys.includes(as)) url += "&as=" + as
    return new Promise<AxiosResponse>((resolve, reject) => {
-      del(pondURL("/devices/" + id + "/tags/" + tag)).then(resp => {
+      del(pondURL(url)).then(resp => {
        return resolve(resp)
      }).catch(err => {
        return reject(err)
--- a/src/providers/pond/devicePresetAPI.tsx
+++ b/src/providers/pond/devicePresetAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface IDevicePresetInterface {
  //add
--- a/src/providers/pond/fieldAPI.tsx
+++ b/src/providers/pond/fieldAPI.tsx
@ -1,7 +1,7 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import React, { createContext, PropsWithChildren, useContext } from "react";
 import { or } from "utils";
 import { pondURL } from "./pond";
--- a/src/providers/pond/fieldMarkerAPI.tsx
+++ b/src/providers/pond/fieldMarkerAPI.tsx
@ -1,7 +1,7 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/fileControllerAPI.tsx
+++ b/src/providers/pond/fileControllerAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers/StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
--- a/src/providers/pond/firmwareAPI.tsx
+++ b/src/providers/pond/firmwareAPI.tsx
@ -1,4 +1,4 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers/StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
--- a/src/providers/pond/gateAPI.tsx
+++ b/src/providers/pond/gateAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface IGateInterface {
  addGate: (
--- a/src/providers/pond/grainAPI.tsx
+++ b/src/providers/pond/grainAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { or } from "utils";
 export interface IGrainInterface {
--- a/src/providers/pond/grainBagAPI.tsx
+++ b/src/providers/pond/grainBagAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import React, { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface IGrainBagInterface {
  addGrainBag: (
--- a/src/providers/pond/groupAPI.tsx
+++ b/src/providers/pond/groupAPI.tsx
@ -1,11 +1,12 @@
-import { useHTTP, usePermissionAPI } from "hooks";
+import { useHTTP } from "../http";
 import { usePermissionAPI } from "./permissionAPI";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { or } from "utils/types";
 import { User, groupScope } from "models";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 export interface IGroupAPIContext {
--- a/src/providers/pond/harvestPlanAPI.tsx
+++ b/src/providers/pond/harvestPlanAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers/StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
--- a/src/providers/pond/homeMarkerAPI.tsx
+++ b/src/providers/pond/homeMarkerAPI.tsx
@ -1,7 +1,7 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/imagekitAPI.tsx
+++ b/src/providers/pond/imagekitAPI.tsx
@ -1,6 +1,6 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
--- a/src/providers/pond/interactionsAPI.tsx
+++ b/src/providers/pond/interactionsAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { Interaction } from "models";
 import { componentIDToString } from "pbHelpers/Component";
 import { pond } from "protobuf-ts/pond";
--- a/src/providers/pond/johnDeereProxyAPI.tsx
+++ b/src/providers/pond/johnDeereProxyAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 //import { or } from "utils";
--- a/src/providers/pond/keyManagerAPI.tsx
+++ b/src/providers/pond/keyManagerAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/libracartProxyAPI.tsx
+++ b/src/providers/pond/libracartProxyAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import React, { createContext, PropsWithChildren, useContext } from "react";
 //import { or } from "utils";
--- a/src/providers/pond/mineAPI.tsx
+++ b/src/providers/pond/mineAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { permissionToString } from "pbHelpers/Permission";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers/StateContainer";
--- a/src/providers/pond/mutationAPI.tsx
+++ b/src/providers/pond/mutationAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface IMutationAPIContext {
  linearMutation: (
--- a/src/providers/pond/noteAPI.tsx
+++ b/src/providers/pond/noteAPI.tsx
@ -1,7 +1,7 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
-// import { useGlobalState } from "providers";
+// import { useGlobalState } from "../StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/notificationAPI.tsx
+++ b/src/providers/pond/notificationAPI.tsx
@ -1,10 +1,10 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import React, { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { or } from "utils/types";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface INotificationAPIContext {
  listNotifications: (
--- a/src/providers/pond/permissionAPI.tsx
+++ b/src/providers/pond/permissionAPI.tsx
@ -1,9 +1,9 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { Scope, Team, User } from "models";
 import { permissionToString } from "pbHelpers/Permission";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { objectQueryParams, pondURL } from "./pond";
--- a/src/providers/pond/preferenceAPI.tsx
+++ b/src/providers/pond/preferenceAPI.tsx
@ -1,4 +1,4 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/siteAPI.tsx
+++ b/src/providers/pond/siteAPI.tsx
@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers/StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
--- a/src/providers/pond/tagAPI.tsx
+++ b/src/providers/pond/tagAPI.tsx
@ -1,4 +1,4 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/taskAPI.tsx
+++ b/src/providers/pond/taskAPI.tsx
@ -1,7 +1,7 @@
 import { AxiosResponse } from "axios";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/teamAPI.tsx
+++ b/src/providers/pond/teamAPI.tsx
@ -1,11 +1,11 @@
 import { AxiosResponse } from "axios";
 import { Scope, Team } from "models";
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { or } from "utils/types";
 import { pondURL } from "./pond";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface ITeamAPIContext {
  addTeam: (team: pond.TeamSettings) => Promise<AxiosResponse<pond.AddTeamResponse>>;
--- a/src/providers/pond/terminalAPI.tsx
+++ b/src/providers/pond/terminalAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 export interface ITerminalAPIContext {
  addTerminal: (
--- a/src/providers/pond/transactionAPI.tsx
+++ b/src/providers/pond/transactionAPI.tsx
@ -1,9 +1,9 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { or } from "utils";
 export interface ITransactionAPIContext {
--- a/src/providers/pond/usageAPI.tsx
+++ b/src/providers/pond/usageAPI.tsx
@ -1,6 +1,6 @@
-import { useHTTP } from "hooks";
+import { useHTTP } from "../http";
 import moment from "moment";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
--- a/src/providers/pond/userAPI.tsx
+++ b/src/providers/pond/userAPI.tsx
@ -1,10 +1,10 @@
-// import { useHTTP } from "hooks";
+// import { useHTTP } from "../http";
 // import { Scope, User } from "models";
 // import { pond } from "protobuf-ts/pond";
 import { createContext, PropsWithChildren, useContext } from "react";
 import { objectQueryParams, pondURL } from "./pond";
 // import { or } from "utils";
-import { useGlobalState } from "providers";
+import { useGlobalState } from "../StateContainer";
 // import { AxiosResponse } from "axios";
 import { useHTTP } from "../http";
 import { AxiosResponse } from "axios";
--- a/src/services/restAPI.js
+++ b/src/services/restAPI.js
@ -1,4 +1,4 @@
-import * as axios from "axios";
+import axios from "axios";
 export var defaultOptions = {
  headers: {
--- a/src/services/whiteLabel.ts
+++ b/src/services/whiteLabel.ts
@ -1,4 +1,3 @@
 // import { isOffline } from "utils/environment";
 import DefaultDarkLogo from "../assets/whitelabels/darkLogo.png";
 import DefaultLightLogo from "../assets/whitelabels/lightLogo.png";
 import AdapativeAgLogo from "../assets/whitelabels/AdaptiveAgriculture/logo.png";
@ -9,12 +8,10 @@ import BXTDarkLogo from "../assets/whitelabels/BXT/darkLogo.png";
 import AeroGrowDarkLogo from "../assets/whitelabels/AeroGrow/darkLogo.png";
 import AeroGrowLightLogo from "../assets/whitelabels/AeroGrow/lightLogo.png";
 import MiVentLightLogo from "../assets/whitelabels/MiVent/lightLogo.png";
 // import OmniAirLogo from "../assets/whitelabels/OmniAir/OmniAirLogo.png";
 import MiPCALogo from "../assets/whitelabels/MiPCA/MiPCALogo.png";
 import StreamlineLogo from "../assets/whitelabels/Streamline/stream-logo.png"
 import IntellifarmsLogo from "../assets/whitelabels/Intellifarms/IFND-2023-Logo.png"
 import IntellifarmsLogoWhite from "../assets/whitelabels/Intellifarms/IFND-2023-Logo-White.png"
 // import { green, yellow } from "@mui/material/colors";
 const protips: string[] = [
  "You can see the latest measurements for a device by starring its components!",
@ -31,354 +28,408 @@ const protips: string[] = [
  "Want to receive text messages about your devices? Update your phone number and enable SMS notifications!"
 ];
 export interface WhiteLabelFeatures {
  bins: boolean;
  visualFarm: boolean;
  contracts: boolean;
  transactions: boolean;
  fields: boolean;
  grainTypes: boolean;
  grainUnit: boolean;
  marketplace: boolean;
  cableEstimator: boolean;
  ventilation: boolean;
  mines: boolean;
  constructionMap: boolean;
  jobsites: boolean;
  heaters: boolean;
  aviationMap: boolean;
  terminals: boolean;
  security: boolean;
 }
 interface WhiteLabel {
-  name: any;
+  slug: string;
-  primaryColour: any; //must be a MATERIAL UI colour, used for various UI elements
+  name: string;
-  secondaryColour: any; //must be a MATERIAL UI colour, used for a few UI elements (less importance)
+  primaryColour: any;
-  signatureColour: any; //hex or RGB
+  secondaryColour: any;
-  signatureAccentColour: any; //hex or RGB
+  signatureColour: any;
-  auth0ClientId: any;
+  signatureAccentColour: any;
  auth0ClientId: string;
  redirectOnLogout: boolean;
  logoutRedirectTarget: string;
  darkLogo: any;
  lightLogo: any;
-  transparentLogoBG: boolean; //determines whether the background of the logo should be transparent or not
+  transparentLogoBG: boolean;
  blacklist: string[];
  features: WhiteLabelFeatures;
  hotjarID?: string;
  docs: string;
  protips: string[];
  tutorialPlaylistID?: string;
  thumbnail?: string;
  tutorialFiles?: { name: string; url: string }[];
-  homePage?: string;
+  homePage: string;
 }
-// const DEFAULT_WHITELABEL: WhiteLabel = {
+const AG_FEATURES: WhiteLabelFeatures = {
-//   name: import.meta.env.REACT_APP_WEBSITE_TITLE,
+  bins: true,
-//   primaryColour: import.meta.env.REACT_APP_PRIMARY_COLOUR,
+  visualFarm: true,
-//   secondaryColour: import.meta.env.REACT_APP_SECONDARY_COLOUR,
+  contracts: true,
-//   signatureColour: import.meta.env.REACT_APP_SIGNATURE_COLOUR,
+  transactions: true,
-//   signatureAccentColour: "#fff",
+  fields: true,
-//   auth0ClientId: import.meta.env.REACT_APP_AUTH0_CLIENT_ID,
+  grainTypes: true,
-//   redirectOnLogout: false,
+  grainUnit: true,
-//   logoutRedirectTarget: "",
+  marketplace: true,
-//   darkLogo: DefaultDarkLogo,
+  cableEstimator: true,
-//   lightLogo: DefaultLightLogo,
+  ventilation: false,
-//   transparentLogoBG: false,
+  mines: false,
-//   blacklist: [],
+  constructionMap: false,
-//   hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
+  jobsites: false,
-//   docs: "Platform",
+  heaters: false,
-//   protips: protips,
+  aviationMap: false,
-//   tutorialPlaylistID: ""
+  terminals: false,
-// };
+  security: false,
 const STAGING_WHITELABEL: WhiteLabel = {
  name: "Staging",
  primaryColour: import.meta.env.VITE_APP_PRIMARY_COLOUR,
  secondaryColour: import.meta.env.VITE_APP_SECONDARY_COLOUR,
  signatureColour: import.meta.env.VITE_APP_SIGNATURE_COLOUR,
  signatureAccentColour: "#fff",
  auth0ClientId: import.meta.env.VITE_AUTH0_STAGING_CLIENT_ID,
  redirectOnLogout: false,
  logoutRedirectTarget: "",
  darkLogo: DefaultDarkLogo,
  lightLogo: DefaultLightLogo,
  transparentLogoBG: false,
  blacklist: [],
  hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
  docs: "Platform",
  protips: protips,
  tutorialPlaylistID: "",
  homePage: "/devices"
 };
-const BXT_WHITE_LABEL: WhiteLabel = {
+const CONSTRUCTION_FEATURES: WhiteLabelFeatures = {
-  name: "Brand X Technologies",
+  bins: false,
-  primaryColour: "blue",
+  visualFarm: false,
-  // primaryColour: "#0000FF",
+  contracts: false,
-  secondaryColour: "yellow",
+  transactions: false,
-  // secondaryColour: "#FFFF00",
+  fields: false,
-  // signatureColour: "#272727",
+  grainTypes: false,
-  signatureColour: "#005bb0",
+  grainUnit: false,
-  signatureAccentColour: "#fff",
+  marketplace: false,
-  auth0ClientId: import.meta.env.VITE_AUTH0_DEV_CLIENT_ID,
+  cableEstimator: false,
-  redirectOnLogout: false,
+  ventilation: false,
-  logoutRedirectTarget: "",
+  mines: false,
-  darkLogo: BXTDarkLogo,
+  constructionMap: true,
-  lightLogo: BXTLightLogo,
+  jobsites: true,
-  transparentLogoBG: false,
+  heaters: true,
-  blacklist: [],
+  aviationMap: false,
-  hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
+  terminals: false,
-  docs: "Platform",
+  security: false,
  protips: protips,
  homePage: "/devices"
 };
-const STREAMLINE_WHITE_LABEL: WhiteLabel = {
+const AVIATION_FEATURES: WhiteLabelFeatures = {
-  name: "Streamline",
+  bins: false,
-  primaryColour: "#FFFF",
+  visualFarm: false,
-  // primaryColour: "#0000FF",
+  contracts: false,
-  secondaryColour: "yellow",
+  transactions: false,
-  // secondaryColour: "#FFFF00",
+  fields: false,
-  // signatureColour: "#272727",
+  grainTypes: false,
-  signatureColour: "#005bb0",
+  grainUnit: false,
-  signatureAccentColour: "#fff",
+  marketplace: false,
-  auth0ClientId: import.meta.env.VITE_AUTH0_STREAMLINE_CLIENT_ID,
+  cableEstimator: false,
-  redirectOnLogout: false,
+  ventilation: false,
-  logoutRedirectTarget: "",
+  mines: false,
-  darkLogo: StreamlineLogo,
+  constructionMap: false,
-  lightLogo: StreamlineLogo,
+  jobsites: false,
-  transparentLogoBG: false,
+  heaters: false,
-  blacklist: [],
+  aviationMap: true,
-  hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
+  terminals: true,
-  docs: "Platform",
+  security: false,
  protips: protips,
  homePage: "/devices"
 };
-export function isBXT(): boolean {
+const MIVENT_FEATURES: WhiteLabelFeatures = {
-  return getName() === "Brand X Technologies";
+  bins: false,
  visualFarm: false,
  contracts: false,
  transactions: false,
  fields: false,
  grainTypes: false,
  grainUnit: false,
  marketplace: false,
  cableEstimator: false,
  ventilation: true,
  mines: true,
  constructionMap: false,
  jobsites: false,
  heaters: false,
  aviationMap: false,
  terminals: false,
  security: false,
 };
 const BASE_FEATURES: WhiteLabelFeatures = {
  bins: false,
  visualFarm: false,
  contracts: false,
  transactions: false,
  fields: false,
  grainTypes: false,
  grainUnit: false,
  marketplace: false,
  cableEstimator: false,
  ventilation: false,
  mines: false,
  constructionMap: false,
  jobsites: false,
  heaters: false,
  aviationMap: false,
  terminals: false,
  security: false,
 };
 const registry: Record<string, WhiteLabel> = {
  "bxt": {
    slug: "bxt",
    name: "Brand X Technologies",
    primaryColour: "blue",
    secondaryColour: "yellow",
    signatureColour: "#005bb0",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_DEV_CLIENT_ID,
    redirectOnLogout: false,
    logoutRedirectTarget: "",
    darkLogo: BXTDarkLogo,
    lightLogo: BXTLightLogo,
    transparentLogoBG: false,
    blacklist: [],
    features: { ...BASE_FEATURES, security: true },
    hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
    docs: "Platform",
    protips: protips,
    homePage: "/devices",
  },
  "staging": {
    slug: "staging",
    name: "Staging",
    primaryColour: import.meta.env.VITE_APP_PRIMARY_COLOUR,
    secondaryColour: import.meta.env.VITE_APP_SECONDARY_COLOUR,
    signatureColour: import.meta.env.VITE_APP_SIGNATURE_COLOUR,
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_STAGING_CLIENT_ID,
    redirectOnLogout: false,
    logoutRedirectTarget: "",
    darkLogo: DefaultDarkLogo,
    lightLogo: DefaultLightLogo,
    transparentLogoBG: false,
    blacklist: [],
    features: AG_FEATURES,
    hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
    docs: "Platform",
    protips: protips,
    homePage: "/devices",
  },
  "adaptive-ag": {
    slug: "adaptive-ag",
    name: "Adaptive Agriculture",
    primaryColour: "green",
    secondaryColour: "yellow",
    signatureColour: "#272727",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_AGRICULTURE_CLIENT_ID,
    redirectOnLogout: true,
    logoutRedirectTarget: "https://adaptiveagriculture.ca",
    darkLogo: AdapativeAgLogo,
    lightLogo: AdapativeAgLogo,
    transparentLogoBG: true,
    blacklist: ["cost"],
    features: AG_FEATURES,
    hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_AGRICULTURE,
    docs: "AdaptiveAg",
    protips: protips,
    tutorialPlaylistID: "PLpLmJnI66Jfl5FXME31ckGam-sD8gB1s2",
    thumbnail: AdaptiveAgThumbnail,
    tutorialFiles: [
      {
        name: "Bindapt+",
        url: "https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Set-Up-Guide.pdf"
      },
      {
        name: "Adapter Plate",
        url: "https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Adapter-Plate-Set-Up-Guide.pdf"
      }
    ],
    homePage: "/bins",
  },
  "intellifarms": {
    slug: "intellifarms",
    name: "Intellifarms",
    primaryColour: "#9E1B32",
    secondaryColour: "#4A4F55",
    signatureColour: "#272727",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_INTELLIFARMS_CLIENT_ID,
    redirectOnLogout: true,
    logoutRedirectTarget: "https://myintellifarms.com",
    darkLogo: IntellifarmsLogo,
    lightLogo: IntellifarmsLogoWhite,
    transparentLogoBG: true,
    blacklist: [],
    features: AG_FEATURES,
    docs: "Platform",
    protips: protips,
    homePage: "/bins",
  },
  "streamline": {
    slug: "streamline",
    name: "Streamline",
    primaryColour: "#FFFF",
    secondaryColour: "yellow",
    signatureColour: "#005bb0",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_STREAMLINE_CLIENT_ID,
    redirectOnLogout: false,
    logoutRedirectTarget: "",
    darkLogo: StreamlineLogo,
    lightLogo: StreamlineLogo,
    transparentLogoBG: false,
    blacklist: [],
    features: AG_FEATURES,
    docs: "Platform",
    protips: protips,
    homePage: "/devices",
  },
  "aerogrow": {
    slug: "aerogrow",
    name: "AeroGrow",
    primaryColour: "green",
    secondaryColour: "cyan",
    signatureColour: "#fff",
    signatureAccentColour: "#000",
    auth0ClientId: import.meta.env.VITE_AUTH0_AEROGROW_CLIENT_ID,
    redirectOnLogout: true,
    logoutRedirectTarget: "https://www.aerogrowmanufacturing.com",
    darkLogo: AeroGrowDarkLogo,
    lightLogo: AeroGrowLightLogo,
    transparentLogoBG: true,
    blacklist: [],
    features: BASE_FEATURES,
    hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_AEROGROW,
    docs: "Platform",
    protips: protips,
    homePage: "/devices",
  },
  "mivent": {
    slug: "mivent",
    name: "MiVent",
    primaryColour: "green",
    secondaryColour: "yellow",
    signatureColour: "#272727",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_MIVENT_CLIENT_ID,
    redirectOnLogout: true,
    logoutRedirectTarget: "https://mivent.ca",
    darkLogo: MiVentLightLogo,
    lightLogo: MiVentLightLogo,
    transparentLogoBG: true,
    blacklist: ["cost"],
    features: MIVENT_FEATURES,
    hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_MIVENT,
    docs: "Platform",
    protips: protips,
    homePage: "/devices",
  },
  "adaptive-construction": {
    slug: "adaptive-construction",
    name: "Adaptive Construction",
    primaryColour: "blue",
    secondaryColour: "blue",
    signatureColour: "#272727",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_CONSTRUCTION_CLIENT_ID,
    redirectOnLogout: true,
    logoutRedirectTarget: "https://adaptiveconstruction.ca",
    darkLogo: AdConLogo,
    lightLogo: AdConLogo,
    transparentLogoBG: true,
    blacklist: ["cost"],
    features: CONSTRUCTION_FEATURES,
    hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_CONSTRUCTION,
    docs: "AdaptiveConstruction",
    protips: protips,
    homePage: "/devices",
  },
  "omniair": {
    slug: "omniair",
    name: "OmniAir",
    primaryColour: "#004f9b",
    secondaryColour: "yellow",
    signatureColour: "#272727",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID,
    redirectOnLogout: true,
    logoutRedirectTarget: "https://omniairsystems.com",
    darkLogo: MiPCALogo,
    lightLogo: MiPCALogo,
    transparentLogoBG: true,
    blacklist: ["cost"],
    features: AVIATION_FEATURES,
    docs: "OmniAir",
    protips: protips,
    homePage: "/devices",
  },
  "mipca": {
    slug: "mipca",
    name: "MiPCA",
    primaryColour: "#004f9b",
    secondaryColour: "yellow",
    signatureColour: "#272727",
    signatureAccentColour: "#fff",
    auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID,
    redirectOnLogout: true,
    logoutRedirectTarget: "https://mionetech.com",
    darkLogo: MiPCALogo,
    lightLogo: MiPCALogo,
    transparentLogoBG: true,
    blacklist: ["cost"],
    features: AVIATION_FEATURES,
    docs: "MiPCA",
    protips: protips,
    homePage: "/devices",
  },
 };
 // Ordered most-specific to least-specific
 const DOMAIN_RULES: [RegExp, string][] = [
  [/bxt-dev/, "bxt"],
  [/staging\.brandxtech/, "staging"],
  [/streamline\./, "streamline"],
  [/brandxtech|brandxducks/, "bxt"],
  [/adaptiveagriculture|adaptiveag/, "adaptive-ag"],
  [/adaptiveconstruction/, "adaptive-construction"],
  [/aerogrowmanufacturing/, "aerogrow"],
  [/mivent/, "mivent"],
  [/omniair/, "omniair"],
  [/mionetech|mipca/, "mipca"],
  [/myintellifarms|intellifarms/, "intellifarms"],
 ];
 function resolveSlug(): string {
  const override = import.meta.env.VITE_WHITELABEL;
  if (override && registry[override]) return override;
  const host = window.location.hostname;
  for (const [pattern, slug] of DOMAIN_RULES) {
    if (pattern.test(host)) return slug;
  }
  return "adaptive-ag";
 }
-const ADAPTIVE_AGRICULTURE_WHITE_LABEL: WhiteLabel = {
+let cached: WhiteLabel | null = null;
  name: "Adaptive Agriculture",
  primaryColour: "green",
  // primaryColour: "#008000",
  secondaryColour: "yellow",
  // secondaryColour: "#FFFF00",
  signatureColour: "#272727",
  signatureAccentColour: "#fff",
  auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_AGRICULTURE_CLIENT_ID,
  redirectOnLogout: true,
  logoutRedirectTarget: "https://adaptiveagriculture.ca",
  darkLogo: AdapativeAgLogo,
  lightLogo: AdapativeAgLogo,
  transparentLogoBG: true,
  blacklist: ["cost"],
  hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_AGRICULTURE,
  docs: "AdaptiveAg",
  protips: protips.concat([]),
  tutorialPlaylistID: "PLpLmJnI66Jfl5FXME31ckGam-sD8gB1s2",
  thumbnail: AdaptiveAgThumbnail,
  tutorialFiles: [
    {
      name: "Bindapt+",
      url: "https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Set-Up-Guide.pdf"
    },
    {
      name: "Adapter Plate",
      url:
        "https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Adapter-Plate-Set-Up-Guide.pdf"
    }
  ],
  homePage: "/bins"
 };
 export function IsAdaptiveAgriculture(): boolean {
  return (
    getName() === "Adaptive Agriculture" ||
    window.location.origin.includes("staging") ||
    window.location.origin.includes("localhost")
  );
 }
 const INTELLIFARMS_WHITE_LABEL: WhiteLabel = {
  name: "Intellifarms",
  primaryColour: "#9E1B32",
  secondaryColour: "#4A4F55",
  signatureColour: "#272727",
  signatureAccentColour: "#fff",
  auth0ClientId: import.meta.env.VITE_AUTH0_INTELLIFARMS_CLIENT_ID,
  redirectOnLogout: true,
  logoutRedirectTarget: "https://myintellifarms.com",
  darkLogo: IntellifarmsLogo,
  lightLogo: IntellifarmsLogoWhite,
  transparentLogoBG: true,
  blacklist: [],
  docs: "Platform",
  protips: protips,
  homePage: "/bins"
 };
 export function IsIntellifarms(): boolean {
  return (
    getName() === "Intellifarms" 
    // window.location.origin.includes("staging") ||
    // window.location.origin.includes("localhost")
  );
 }
 export function IsStreamline(): boolean {
  return (
    getName() === "Streamline" 
    // window.location.origin.includes("staging") ||
    // window.location.origin.includes("localhost")
  );
 }
 const AEROGROW_WHITE_LABEL: WhiteLabel = {
  name: "AeroGrow",
  primaryColour: "green",
  secondaryColour: "cyan",
  signatureColour: "#fff",
  signatureAccentColour: "#000",
  auth0ClientId: import.meta.env.VITE_AUTH0_AEROGROW_CLIENT_ID,
  redirectOnLogout: true,
  logoutRedirectTarget: "https://www.aerogrowmanufacturing.com",
  darkLogo: AeroGrowDarkLogo,
  lightLogo: AeroGrowLightLogo,
  transparentLogoBG: true,
  blacklist: [],
  hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_AEROGROW,
  docs: "Platform",
  protips: protips
 };
 export function IsMiVent(): boolean {
  return (
    getName() === "MiVent" ||
    window.location.origin.includes("staging") ||
    window.location.origin.includes("localhost")
  );
 }
 const MIVENT_WHITE_LABEL: WhiteLabel = {
  name: "MiVent",
  primaryColour: "green",
  secondaryColour: "yellow",
  signatureColour: "#272727",
  signatureAccentColour: "#fff",
  auth0ClientId: import.meta.env.VITE_AUTH0_MIVENT_CLIENT_ID,
  redirectOnLogout: true,
  logoutRedirectTarget: "https://mivent.ca",
  darkLogo: MiVentLightLogo,
  lightLogo: MiVentLightLogo,
  transparentLogoBG: true,
  blacklist: ["cost"],
  hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_MIVENT,
  docs: "Platform",
  protips: protips.concat([])
 };
 const ADAPTIVE_CONSTRUCTION_WHITE_LABEL: WhiteLabel = {
  name: "Adaptive Construction",
  primaryColour: "blue",
  secondaryColour: "blue",
  signatureColour: "#272727",
  signatureAccentColour: "#fff",
  auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_CONSTRUCTION_CLIENT_ID,
  redirectOnLogout: true,
  logoutRedirectTarget: "https://adaptiveconstruction.ca",
  darkLogo: AdConLogo,
  lightLogo: AdConLogo,
  transparentLogoBG: true,
  blacklist: ["cost"],
  hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_CONSTRUCTION,
  docs: "AdaptiveConstruction",
  protips: protips.concat([])
 };
 export function IsAdCon(): boolean {
  return (
    getName() === "Adaptive Construction" ||
    window.location.origin.includes("staging") ||
    window.location.origin.includes("localhost")
  );
 }
 const OMNIAIR_WHITE_LABEL: WhiteLabel = {
  name: "OmniAir",
  primaryColour: "#004f9b",
  secondaryColour: "yellow",
  signatureColour: "#272727",
  signatureAccentColour: "#fff",
  auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID,
  redirectOnLogout: true,
  logoutRedirectTarget: "https://omniairsystems.com",
  darkLogo: MiPCALogo,
  lightLogo: MiPCALogo,
  transparentLogoBG: true,
  blacklist: ["cost"],
  //hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_OMNIAIR, testing what happens if this is excluded
  docs: "OmniAir",
  protips: protips.concat([])
 };
 export function IsOmniAir(): boolean {
  return (
    getName() === "OmniAir" ||
    window.location.origin.includes("staging") ||
    window.location.origin.includes("localhost")
  );
 }
 const MIPCA_WHITE_LABEL: WhiteLabel = {
  name: "MiPCA",
  primaryColour: "#004f9b",
  secondaryColour: "yellow",
  signatureColour: "#272727",
  signatureAccentColour: "#fff",
  //omni air and MiPCA are the same client ID in Auth0, it is to replace it, once omniair gets removed we can re-name this
  auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID, 
  redirectOnLogout: true,
  logoutRedirectTarget: "https://mionetech.com",
  darkLogo: MiPCALogo,
  lightLogo: MiPCALogo,
  transparentLogoBG: true,
  blacklist: ["cost"],
  docs: "MiPCA",
  protips: protips.concat([])
 };
 export function IsMiPCA(): boolean {
  return (
    getName() === "MiPCA" ||
    window.location.origin.includes("staging") ||
    window.location.origin.includes("localhost")
  );
 }
 const whitelabels = new Map<string, WhiteLabel>([
  ["streamline", STREAMLINE_WHITE_LABEL],
  ["adaptiveag", ADAPTIVE_AGRICULTURE_WHITE_LABEL],
  ["adaptiveagriculture", ADAPTIVE_AGRICULTURE_WHITE_LABEL],
  ["brandxducks", BXT_WHITE_LABEL],
  ["brandxtech", BXT_WHITE_LABEL],
  ["aerogrowmanufacturing", AEROGROW_WHITE_LABEL],
  ["localhost", BXT_WHITE_LABEL],
  ["staging", STAGING_WHITELABEL],
  ["10.0", ADAPTIVE_CONSTRUCTION_WHITE_LABEL],
  ["mivent", MIVENT_WHITE_LABEL],
  ["adaptiveconstruction", ADAPTIVE_CONSTRUCTION_WHITE_LABEL],
  ["omniair", OMNIAIR_WHITE_LABEL],
  ["mipca", MIPCA_WHITE_LABEL],
  ["mionetech", MIPCA_WHITE_LABEL],
  ["intellifarms", INTELLIFARMS_WHITE_LABEL]
 ]);
 export function getWhitelabel(): WhiteLabel {
-//   if (isOffline()) {
+  if (!cached) {
-//     return DEFAULT_WHITELABEL;
+    cached = registry[resolveSlug()];
-//   }
+  }
  return cached;
 }
-  const hostname = window.location.hostname;
+export function getFeatures(): WhiteLabelFeatures {
-  if (window.location.origin.includes("bxt-dev")) {
+  return getWhitelabel().features;
    return BXT_WHITE_LABEL;
  }
  if (window.location.origin.includes("localhost")) {
    return INTELLIFARMS_WHITE_LABEL;
  }
  if (window.location.origin.includes("staging") || import.meta.env.VITE_LOCAL_STAGING=='true') {
    return STAGING_WHITELABEL;
  }
  const whiteLabelKeys = Array.from(whitelabels.keys());
  for (var i = 0; i < whiteLabelKeys.length; i++) {
    let key = whiteLabelKeys[i];
    if (hostname.includes(key)) {
      return whitelabels.get(key) as WhiteLabel;
    }
  }
  return ADAPTIVE_AGRICULTURE_WHITE_LABEL;
 }
 export function getPrimaryColour(): any {
@ -397,7 +448,7 @@ export function getSignatureAccentColour(): any {
  return getWhitelabel().signatureAccentColour;
 }
-export function getAuth0ClientId(): any {
+export function getAuth0ClientId(): string {
  return getWhitelabel().auth0ClientId;
 }
@ -418,10 +469,6 @@ export function getLightLogo(): any {
 }
 export function hideLogo(): boolean {
  // if (isOffline()) {
    // return false;
  // }
  return getWhitelabel().name === "";
 }
--- a/src/teams/TeamList.tsx
+++ b/src/teams/TeamList.tsx
@ -12,7 +12,8 @@ import {
  Grid2,
 } from "@mui/material";
 import { pond } from "protobuf-ts/pond";
-import { useGlobalState, useSnackbar, useTeamAPI, useUserAPI } from "providers";
+import { useGlobalState, useSnackbar, useUserAPI } from "providers";
 import { useTeamAPI } from "providers/pond/teamAPI";
 import { Team, teamScope } from "models";
 import { useNavigate } from "react-router";
 import { cloneDeep } from "lodash";
--- a/src/teams/TeamSettings.tsx
+++ b/src/teams/TeamSettings.tsx
@ -14,7 +14,8 @@ import {
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { Team } from "models";
 import { pond } from "protobuf-ts/pond";
-import { useSnackbar, useTeamAPI } from "providers";
+import { useSnackbar } from "providers";
 import { useTeamAPI } from "providers/pond/teamAPI";
 import React, { useEffect, useState } from "react";
 import DeleteButton from "common/DeleteButton";
 import { userRoleFromPermissions } from "pbHelpers/User";
--- a/src/user/UserMenu.tsx
+++ b/src/user/UserMenu.tsx
@ -5,7 +5,7 @@ import { makeStyles } from "@mui/styles";
 import { LockOpen, Person, Lock, Settings, SupervisedUserCircle as TeamIcon, ExitToApp, PersonAdd } from "@mui/icons-material";
 import { useState } from "react";
 import UserTeamName from "./UserTeamName";
-import { useAuth0 } from "@auth0/auth0-react";
+import { useAuthContext } from "providers/authContext";
 import UserSettings from "./UserSettings";
 import UserAvatar from "./UserAvatar";
 import { purple } from "@mui/material/colors";
@ -77,7 +77,7 @@ export default function UserMenu() {
  // const { toggleMode } = useThemeMode()
  const [{ user, team, as }, dispatch] = useGlobalState();
-  const { loginWithRedirect } = useAuth0();
+  const { loginWithRedirect } = useAuthContext();
  const classes = useStyles();
  const theme = useTheme();
--- a/src/user/UserSettings.tsx
+++ b/src/user/UserSettings.tsx
@ -29,7 +29,7 @@ import { useThemeMode } from "theme/AppThemeProvider";
 // import ContractsIcon from "products/CommonIcons/contractIcon";
 import UnitsIcon from "@mui/icons-material/Category";
 import { setThemeType } from "theme";
-import { IsAdaptiveAgriculture } from "services/whiteLabel";
+import { getFeatures } from "services/whiteLabel";
 import { setDistanceUnit, setGrainUnit, setPressureUnit, setTemperatureUnit } from "utils";
 import FieldsIcon from "products/AgIcons/FieldsIcon";
@ -529,7 +529,7 @@ export default function UserSettings(props: Props) {
            <MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_FEET}>Feet (ft)</MenuItem>
          </TextField>
        </Grid2>
-        {IsAdaptiveAgriculture() && (
+        {getFeatures().grainUnit && (
          <Grid2 size={{ xs: 12 }}>
            <TextField
              select
--- a/src/userFeatures/UserFeatures.tsx
+++ b/src/userFeatures/UserFeatures.tsx
@ -7,12 +7,7 @@ import JohnDeereIcon from "products/CommonIcons/johnDeereIcon";
 import CNHiIcon from "products/CommonIcons/cnhiIcon";
 import LibraCartIcon from "products/CommonIcons/libracartIcon";
 //import AgLogo from "assets/whitelabels/AdaptiveAgriculture/AGLogoSquare.png";
-import {
+import { getFeatures } from "services/whiteLabel";
  IsAdaptiveAgriculture
  // IsAdCon,
  // IsMiVent,
  // IsOmniAir
 } from "services/whiteLabel";
 import FeatureCard from "./FeatureCard";
 //import { ImgIcon } from "common/ImgIcon";
 //images to import for the image in the card for the feature make sure to have a 2:1 aspect ratio to keep the cards symmetrical
@ -90,19 +85,9 @@ export default function Marketplace() {
  useEffect(() => {
    let list: ProductDetails[] = [];
-    if (IsAdaptiveAgriculture() || user.hasFeature("admin")) {
+    if (getFeatures().marketplace || user.hasFeature("admin")) {
      list = list.concat(agFeatureList);
    }
    //   if(IsAdCon()){
    //     list = list.concat(constructionFeatureList)
    //   }
    //   if(IsOmniAir()){
    //     list = list.concat(aviationFeatureList)
    //   }
    //   if(IsMiVent()){
    //       list = list.concat(miningFeatureList)
    //   }
    //   list = list.concat(universalFeatureList)
    setFeaturList(list);
  }, []);
--- a/src/utils/auth0Config.ts
+++ b/src/utils/auth0Config.ts
@ -0,0 +1,24 @@
 import { getWhitelabel } from 'services/whiteLabel'
 /** True when Auth0 env + whitelabel client ID are present; avoids mounting Auth0Provider on offline / local LAN builds. */
 export function isAuth0Configured(): boolean {
  const wl = getWhitelabel()
  const domain = String(import.meta.env.VITE_AUTH0_CLIENT_DOMAIN ?? '').trim()
  const clientRaw = wl.auth0ClientId ?? import.meta.env.VITE_AUTH0_CLIENT_ID
  const clientId = String(clientRaw ?? '').trim()
  return domain.length > 0 && clientId.length > 0
 }
 /**
 * auth0-spa-js only runs in a "secure context" (HTTPS, http://localhost, http://127.0.0.1, etc.).
 * Plain http://192.168.x.x fails — same check as `window.isSecureContext`.
 */
 export function isAuth0SpaOriginAllowed(): boolean {
  if (typeof window === 'undefined') return true
  return window.isSecureContext
 }
 /** Mount Auth0 only when credentials exist and the browser will let the SDK run. */
 export function shouldMountAuth0Provider(): boolean {
  return isAuth0Configured() && isAuth0SpaOriginAllowed()
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -1 +1,4 @@
 /// <reference types="vite/client" />
 declare const __BUILD_DATE__: string
 declare const __GIT_HASH__: string
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,12 +1,71 @@
-import { defineConfig } from 'vite'
+import { defineConfig, type Plugin, type UserConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import { VitePWA } from 'vite-plugin-pwa';
 import * as path from 'path' // ✅ Import path module
 import { readFileSync, renameSync, existsSync, unlinkSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { execSync } from 'node:child_process'
 const rootDir = path.dirname(fileURLToPath(import.meta.url))
 const LOCALNET_MODE = 'localnet'
 /** Dev server: serve the minimal LAN shell (indexLocal.html) instead of the full index with third-party bootstraps. */
 function useLocalnetShellHtml (mode: string, command: string): Plugin {
  if (mode !== LOCALNET_MODE || command !== 'serve') {
    return { name: 'localnet-shell-html-noop' }
  }
  return {
    name: 'localnet-shell-html',
    apply: 'serve',
    transformIndexHtml: {
      order: 'pre',
      handler () {
        return readFileSync(path.join(rootDir, 'indexLocal.html'), 'utf-8')
      },
    },
  }
 }
 /** After build, LAN shell is emitted as indexLocal.html; rename to index.html so nginx and PWA still use /. */
 function emitLocalnetShellAsIndexHtml (mode: string): Plugin {
  if (mode !== LOCALNET_MODE) {
    return { name: 'emit-localnet-shell-as-index-noop' }
  }
  return {
    name: 'emit-localnet-shell-as-index-html',
    closeBundle () {
      const outDir = path.join(rootDir, 'build')
      const from = path.join(outDir, 'indexLocal.html')
      const to = path.join(outDir, 'index.html')
      if (existsSync(from)) {
        if (existsSync(to)) unlinkSync(to)
        renameSync(from, to)
      }
    },
  }
 }
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ command, mode }): UserConfig => {
  const useLocalnetShell = mode === LOCALNET_MODE
  let gitHash = 'unknown'
  try {
    gitHash = execSync('git rev-parse --short HEAD').toString().trim()
  } catch {}
  const buildDate = new Date().toISOString()
  return {
  define: {
    __BUILD_DATE__: JSON.stringify(buildDate),
    __GIT_HASH__: JSON.stringify(gitHash),
  },
  plugins: [
    useLocalnetShellHtml(mode, command),
    emitLocalnetShellAsIndexHtml(mode),
    react(), 
    tsconfigPaths(),
    VitePWA({
@ -53,12 +112,15 @@ export default defineConfig({
    target: 'esnext',
    rollupOptions: {
      input: {
-        main: path.resolve(__dirname, 'index.html')
+        main: path.join(
-      }
+          rootDir,
          useLocalnetShell ? 'indexLocal.html' : 'index.html'
        ),
      },
    }
  },
  esbuild: {
    keepNames: true, // Prevent function name mangling
  },
-  
+  }
 })