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

package-lock.json

@@ -33,14 +33,15 @@
         "notistack": "^3.0.1",
         "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#dev",
         "react": "^18.3.1",
+        "react-beautiful-dnd": "^13.1.1",
         "react-color": "^2.19.3",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^5.0.0",
         "react-full-screen": "^1.1.1",
         "react-horizontal-scrolling-menu": "^7.1.1",
-        "react-image": "^4.1.0",
         "react-infinite-scroller": "^1.2.6",
         "react-joyride": "^2.9.3",
+        "react-map-gl": "^8.0.1",
         "react-phone-input-2": "^2.15.1",
         "react-router-dom": "^6.28.0",
         "react-virtualized-auto-sizer": "^1.0.25",
@@ -53,9 +54,11 @@
         "@types/jsonexport": "^3.0.5",
         "@types/lodash": "^4.17.13",
         "@types/react": "^18.3.10",
+        "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-color": "^3.0.13",
         "@types/react-dom": "^18.3.0",
         "@types/react-infinite-scroller": "^1.2.5",
+        "@types/react-map-gl": "^6.1.7",
         "@vitejs/plugin-react": "^4.3.2",
         "eslint": "^9.11.1",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
@@ -2484,6 +2487,39 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec": {
+      "version": "19.3.3",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.3.tgz",
+      "integrity": "sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw==",
+      "license": "ISC",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/unitbezier": "^0.0.1",
+        "json-stringify-pretty-compact": "^3.0.0",
+        "minimist": "^1.2.8",
+        "rw": "^1.3.3",
+        "sort-object": "^3.0.3"
+      },
+      "bin": {
+        "gl-style-format": "dist/gl-style-format.mjs",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
+        "gl-style-validate": "dist/gl-style-validate.mjs"
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "6.1.7",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.7.tgz",
@@ -5596,6 +5632,16 @@
       "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
       "license": "MIT"
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
+      "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -5622,6 +5668,16 @@
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
       "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
     },
+    "node_modules/@types/mapbox-gl": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.1.tgz",
+      "integrity": "sha512-NsGKKtgW93B+UaLPti6B7NwlxYlES5DpV5Gzj9F75rK5ALKsqSk15CiEHbOnTr09RGbr6ZYiCdI+59NNNcAImg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.9.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
@@ -5649,6 +5705,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-beautiful-dnd": {
+      "version": "13.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz",
+      "integrity": "sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-color": {
       "version": "3.0.13",
       "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.13.tgz",
@@ -5679,6 +5745,31 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-map-gl": {
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/@types/react-map-gl/-/react-map-gl-6.1.7.tgz",
+      "integrity": "sha512-szkfkWd3FbySDkxyn0MDj9yzD8XYk+RIi4od6sGb3lVHNBGcW20G2v2vcq2N5k18UYAdqAoKGSYuHkGV4JOCrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/mapbox-gl": "*",
+        "@types/react": "*",
+        "@types/viewport-mercator-project": "*"
+      }
+    },
+    "node_modules/@types/react-redux": {
+      "version": "7.1.34",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
+      "integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.11",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
@@ -5711,6 +5802,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/viewport-mercator-project": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@types/viewport-mercator-project/-/viewport-mercator-project-6.1.6.tgz",
+      "integrity": "sha512-uWrbqhRXFeiT6CAvRjf0BkQKRkKED+ofrPhglKpUktQML3463dEPiA4iwe7cZQs6m49Zo/g03rL7ChMLiE5Z8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "gl-matrix": "^3.2.0"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.11.0.tgz",
@@ -5941,6 +6042,41 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@vis.gl/react-mapbox": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@vis.gl/react-mapbox/-/react-mapbox-8.0.1.tgz",
+      "integrity": "sha512-s/OokvgK1T43Ev2/4hj21C0DKrf79nIigBCdYPtAkEX88qGLRQ5t5zCRqg5Zl+44xXfVxcVpX2/vWUKd9oYGKQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "mapbox-gl": ">=3.5.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      },
+      "peerDependenciesMeta": {
+        "mapbox-gl": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vis.gl/react-maplibre": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@vis.gl/react-maplibre/-/react-maplibre-8.0.1.tgz",
+      "integrity": "sha512-IFguo7DKIDZ9U9uRI4thZRfc5aTHEH4lWlIjedBeCpLeMm7wdrqtU2JshyEQt8dDO85kkEE7CbrtjMx5MplaoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@maplibre/maplibre-gl-style-spec": "^19.2.1"
+      },
+      "peerDependencies": {
+        "maplibre-gl": ">=4.0.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      },
+      "peerDependenciesMeta": {
+        "maplibre-gl": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
@@ -6133,6 +6269,15 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -6182,6 +6327,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -6374,6 +6528,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bytewise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz",
+      "integrity": "sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bytewise-core": "^1.2.2",
+        "typewise": "^1.0.3"
+      }
+    },
+    "node_modules/bytewise-core": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bytewise-core/-/bytewise-core-1.2.3.tgz",
+      "integrity": "sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==",
+      "license": "MIT",
+      "dependencies": {
+        "typewise-core": "^1.2"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -6659,6 +6832,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/css-vendor": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
@@ -7466,6 +7648,18 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7888,6 +8082,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -8321,6 +8531,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -8444,6 +8663,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -8625,6 +8856,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -8715,6 +8955,12 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz",
+      "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==",
+      "license": "MIT"
+    },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -9011,6 +9257,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -9064,6 +9316,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -9589,6 +9850,12 @@
       "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
       "license": "ISC"
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -9618,6 +9885,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-beautiful-dnd": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
+      "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
+      "deprecated": "react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-color": {
       "version": "2.19.3",
       "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
@@ -9740,15 +10027,6 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-image": {
-      "version": "4.1.0",
-      "integrity": "sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==",
-      "peerDependencies": {
-        "@babel/runtime": ">=7",
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
     "node_modules/react-infinite-scroller": {
       "version": "1.2.6",
       "integrity": "sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==",
@@ -9815,6 +10093,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/react-map-gl": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-8.0.1.tgz",
+      "integrity": "sha512-VQjLcZdtyJCPXxy5xVL2QIgfA+YG3v+PzSdt07WWbVmXFhV4wUuy6DZSQYDdfqVH2BujKo/ImdL5zfEJApRnpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vis.gl/react-mapbox": "8.0.1",
+        "@vis.gl/react-maplibre": "8.0.1"
+      },
+      "peerDependencies": {
+        "mapbox-gl": ">=1.13.0",
+        "maplibre-gl": ">=1.13.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      },
+      "peerDependenciesMeta": {
+        "mapbox-gl": {
+          "optional": true
+        },
+        "maplibre-gl": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-phone-input-2": {
       "version": "2.15.1",
       "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
@@ -9831,6 +10133,37 @@
         "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
       }
     },
+    "node_modules/react-redux": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/react-redux": "^7.1.20",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -9972,6 +10305,15 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -10201,6 +10543,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -10374,6 +10722,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10499,6 +10862,41 @@
         "scroll-into-view-if-needed": "^3.1.0"
       }
     },
+    "node_modules/sort-asc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz",
+      "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.2.0.tgz",
+      "integrity": "sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-3.0.3.tgz",
+      "integrity": "sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bytewise": "^1.1.0",
+        "get-value": "^2.0.2",
+        "is-extendable": "^0.1.1",
+        "sort-asc": "^0.2.0",
+        "sort-desc": "^0.2.0",
+        "union-value": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -10552,6 +10950,43 @@
       "integrity": "sha512-0kGecIZNIReCSiznK3uheYB8sbstLjCZLiwcQwbmLhgHJj2gz6OnSPkVzJQCMnmEz1BQ4gPK59ylhBoEWOhGNA==",
       "license": "BDS-3-Clause"
     },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -11125,6 +11560,21 @@
         }
       }
     },
+    "node_modules/typewise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz",
+      "integrity": "sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "typewise-core": "^1.2.0"
+      }
+    },
+    "node_modules/typewise-core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/typewise-core/-/typewise-core-1.2.0.tgz",
+      "integrity": "sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg==",
+      "license": "MIT"
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -11193,6 +11643,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "license": "MIT",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -11266,6 +11731,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-memo-one": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/victory": {
       "version": "37.3.6",
       "resolved": "https://registry.npmjs.org/victory/-/victory-37.3.6.tgz",

package.json

@@ -43,14 +43,15 @@
     "notistack": "^3.0.1",
     "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#dev",
     "react": "^18.3.1",
+    "react-beautiful-dnd": "^13.1.1",
     "react-color": "^2.19.3",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^5.0.0",
     "react-full-screen": "^1.1.1",
     "react-horizontal-scrolling-menu": "^7.1.1",
-    "react-image": "^4.1.0",
     "react-infinite-scroller": "^1.2.6",
     "react-joyride": "^2.9.3",
+    "react-map-gl": "^8.0.1",
     "react-phone-input-2": "^2.15.1",
     "react-router-dom": "^6.28.0",
     "react-virtualized-auto-sizer": "^1.0.25",
@@ -63,9 +64,11 @@
     "@types/jsonexport": "^3.0.5",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.10",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-color": "^3.0.13",
     "@types/react-dom": "^18.3.0",
     "@types/react-infinite-scroller": "^1.2.5",
+    "@types/react-map-gl": "^6.1.7",
     "@vitejs/plugin-react": "^4.3.2",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",

src/bin/BinActions.tsx

@@ -12,7 +12,6 @@ import RemoveSelfIcon from "@mui/icons-material/ExitToApp";
 import MoreIcon from "@mui/icons-material/MoreVert";
 import GroupSettingsIcon from "@mui/icons-material/Settings";
 import ShareObjectIcon from "@mui/icons-material/Share";
-//import SensorIcon from "@material-ui/icons/Sensor";
 import SensorIcon from "@mui/icons-material/SettingsInputAntenna";
 import ObjectUsersIcon from "@mui/icons-material/AccountCircle";
 import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";

src/bin/BinComponents.tsx

@@ -30,7 +30,6 @@ import { Component, Device } from "models";
 import { pond } from "protobuf-ts/pond";
 import React, { useCallback, useEffect, useState } from "react";
 import { useComponentAPI, useDeviceAPI, useSnackbar } from "hooks";
-// import { Autocomplete } from "@material-ui/lab";
 import { useBinAPI } from "providers";
 import { GetComponentIcon } from "pbHelpers/ComponentType";
 import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank, Remove } from "@mui/icons-material";

src/bin/BinStorageConditions.tsx

@@ -310,10 +310,10 @@ export default function BinStorageConditions(props: Props) {
 
     binAPI
       .updateBin(bin.key(), settings)
-      .then(resp => {
+      .then(_resp => {
         openSnack("Updated bin thresholds");
       })
-      .catch(err => {
+      .catch(_err => {
         openSnack("Failed to update bin thresholds");
       });
   };
@@ -369,6 +369,7 @@ export default function BinStorageConditions(props: Props) {
 
   //this will display at all times
   const tempDisplay = () => {
+    // console.log(tempTargets)
     let sliderEdge = 40;
 
     let mark: Mark[] = [];

src/bin/BinVisualizerV2.tsx

@@ -26,7 +26,6 @@ import {
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import RefreshIcon from "@mui/icons-material/Refresh";
-// import { Skeleton, ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import HumidityIcon from "component/HumidityIcon";
 import TemperatureIcon from "component/TemperatureIcon";
 import GrainDescriber, { GrainOptions, ToGrainOption } from "grain/GrainDescriber";

src/common/DiffHistory.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-// import { createStyles, Theme, makeStyles, fade } from "@material-ui/core/styles";
 import { detailedDiff } from "deep-object-diff";
 import { 
   List, 
@@ -13,9 +12,7 @@ import {
 } from "@mui/material";
 import { Add, ChangeHistory, Remove, Face, Sync } from "@mui/icons-material";
 import { amber, red, blue, green } from "@mui/material/colors";
-// import MaterialTable from "material-table";
 import moment from "moment";
-// import { getTableIcons } from "common/ResponsiveTable";
 import { pond } from "protobuf-ts/pond";
 import { useUserAPI } from "hooks";
 import { useMobile } from "hooks";
@@ -28,7 +25,7 @@ const addedColour = alpha(green[600], 0.25);
 const deletedColour = alpha(red[600], 0.25);
 const updatedColour = alpha(blue[600], 0.25);
 const resyncedColour = alpha(amber[600], 0.25);
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles((_theme: Theme) => {
   return ({
     added: {
       backgroundColor: addedColour
@@ -270,15 +267,15 @@ export default function DiffHistory(props: Props) {
   const {
     kind,
     name,
-    headerStyle,
+    // headerStyle,
     cellStyle,
     list,
     translateKey,
     translateValue,
     showTitle,
-    noPaging,
+    // noPaging,
-    sortingEnabled,
+    // sortingEnabled,
-    filteringEnabled,
+    // filteringEnabled,
     drawer
   } = props;
   const userAPI = useUserAPI();
@@ -365,7 +362,7 @@ export default function DiffHistory(props: Props) {
               resolve({ data: data, page: page, totalCount: res.total });
             });
         })
-        .catch((err: any) => {
+        .catch((_err: any) => {
           setData([]);
           resolve({ data: [], page: 0, totalCount: 0 });
         });
@@ -487,7 +484,7 @@ export default function DiffHistory(props: Props) {
         />
       ))}
       columns={columns()}
-      total={0} 
+      total={total} 
       pageSize={0} 
       page={0} 
       setPage={setPage} 

src/common/Graph.tsx

@@ -1,9 +1,6 @@
 import React from "react";
-// import { darken, withTheme, WithTheme } from "@material-ui/core/styles";
-// import withWidth, { WithWidth } from "@material-ui/core/withWidth";
 import { Range } from "common/RangeInput";
 import moment from "moment";
-// import { RouteComponentProps, withRouter } from "react-router";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { abbreviateNum } from "utils/numbers";
 import { or } from "utils/types";
@@ -12,14 +9,12 @@ import {
   ScalePropType,
   VictoryArea,
   VictoryAxis,
-  VictoryBar,
   VictoryChart,
   VictoryLabel,
   VictoryLegend,
   VictoryLine,
   VictoryPie,
   VictoryScatter,
-  VictoryStringOrNumberCallback,
   VictoryTheme,
   VictoryTooltip,
   VictoryTooltipProps
@@ -34,9 +29,8 @@ import {
   Legend
 } from "recharts";
 import { pond } from "protobuf-ts/pond";
-import { styled, WithTheme } from "@mui/styles";
 import { getTextPrimary, getTextSecondary } from "theme/text";
-import { darken, useMediaQuery, useTheme, withTheme } from "@mui/material";
+import { darken, useTheme } from "@mui/material";
 import { useWidth } from "hooks";
 import { useNavigate } from "react-router-dom";
 const VictoryCursorVoronoiContainer: any = createContainer("cursor", "voronoi");
@@ -686,7 +680,6 @@ class Graph extends React.Component<Props, State> {
 
   render() {
     const theme = useTheme()
-    const width = useWidth()
     const { graphComponent } = this.props;
     const { interactionComponents, overlayComponents, dataComponent, updateCounter } = this.state;
 

src/common/ImgIcon.tsx

@@ -1,17 +1,20 @@
 import { Icon } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-// import Image from "material-ui-image";
-import { Img as Image } from 'react-image';
 
 const useStyles = makeStyles(() => ({
   icon: {
-    textAlign: "center",
+    display: "flex",           // Ensure flexbox for centering
+    justifyContent: "center",  // Center horizontally
+    alignItems: "center",      // Center vertically
     margin: "1px",
+    overflow: "hidden",        // Prevent image overflow
   },
   img: {
-    height: "100%",
+    maxHeight: "100%",         // Fit within container height
-    width: "auto !important"
+    maxWidth: "100%",          // Fit within container width
-  }
+    width: "auto",             // Maintain aspect ratio
+    height: "auto",            // Maintain aspect ratio
+  },
 }));
 
 interface Props {
@@ -29,8 +32,11 @@ export function ImgIcon(props: Props) {
   if (!src) return null;
 
   return (
-    <Icon className={classes.icon} style={{height: iconHeight, width: iconWidth}}>
+    <Icon
-      <Image
+      className={classes.icon}
+      style={{ height: iconHeight, width: iconWidth }}
+    >
+      <img
         alt={alt}
         className={classes.img}
         src={src}
@@ -39,4 +45,4 @@ export function ImgIcon(props: Props) {
       />
     </Icon>
   );
-}
+}

src/common/MapGL.tsx

@@ -0,0 +1,103 @@
+import { Tooltip } from "@mui/material";
+import { Beenhere } from "@mui/icons-material";
+import { useThemeType } from "hooks";
+import moment from "moment";
+import React, { useEffect, useState } from "react";
+import ReactMapGL, { Marker } from "react-map-gl";
+
+export interface Coordinate {
+  latitude: number;
+  longitude: number;
+  timestamp: string;
+}
+interface Props {
+  paths: Map<string, Coordinate[]>;
+}
+
+export default function MapGL(props: Props) {
+  const themeType = useThemeType();
+  const { paths } = props;
+  const [viewport, setViewport] = useState({
+    latitude: 52.8118612,
+    longitude: -106.2459731,
+    zoom: 12
+  });
+
+  useEffect(() => {
+    let lat = 52.8118612;
+    let long = -106.2459731;
+    if (paths.size > 0) {
+      let first = Array.from(paths.values())[0][0];
+      if (first) {
+        lat = first.latitude;
+        long = first.longitude;
+      }
+    }
+    setViewport({
+      latitude: lat,
+      longitude: long,
+      zoom: 8
+    });
+  }, [paths]);
+
+  /*
+  const changeViewport = (vp: typeof viewport) => {
+    let transition: any = vp;
+    if (!transition || transition.width === 0 || transition.height === 0) return;
+    setViewport(vp);
+  };
+  */
+
+  const markers = (): any[] => {
+    let elems: any[] = [];
+    paths.forEach((path: Coordinate[], name: string) => {
+      let num = path.length;
+      let step = 1;
+      if (num > 0) {
+        step = 1.0 / (num * 1.0);
+      }
+      path
+        .sort((a: Coordinate, b: Coordinate) => {
+          if (a.timestamp < b.timestamp) return 1;
+          else if (b.timestamp < a.timestamp) return -1;
+          return 0;
+        })
+        .forEach((coord: Coordinate, i: number) => {
+          let ts = moment(coord.timestamp);
+          let title = coord.latitude + ", " + coord.longitude;
+          if (ts.isValid()) {
+            title += " @ " + ts.format("lll");
+          }
+          elems.push(
+            <Marker key={name + i} latitude={coord.latitude} longitude={coord.longitude}>
+              <React.Fragment>
+                <Tooltip title={title}>
+                  <Beenhere style={{ opacity: step * (num - i) }} />
+                </Tooltip>
+              </React.Fragment>
+            </Marker>
+          );
+        });
+    });
+    return elems;
+  };
+
+  let style =
+    themeType === "dark" ? "mapbox://styles/mapbox/dark-v10" : "mapbox://styles/mapbox/light-v10";
+  return (
+    <ReactMapGL
+      mapStyle={style}
+      width="100%"
+      height="100%"
+      {...viewport}
+      onViewStateChange={(e) => {
+        setViewport({
+          longitude: e.viewState.longitude,
+          latitude: e.viewState.latitude,
+          zoom: e.viewState.zoom,
+        });
+      }}>
+      {markers()}
+    </ReactMapGL>
+  );
+}

src/common/NotificationButton.tsx

@@ -1,6 +1,4 @@
 import { IconButton, Tooltip } from "@mui/material";
-// import { Theme } from "@/styles/createMuiTheme";
-// import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import NotificationsEnabledIcon from "@mui/icons-material/NotificationsActive";
 import NotificationsDisabledIcon from "@mui/icons-material/NotificationsOff";
 interface Props {

src/common/OutlinedBox.tsx

@@ -1,6 +1,5 @@
 import { Box, BoxProps, Theme, InputLabel } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-// import NotchedOutline from "@material-ui/core/OutlinedInput/NotchedOutline";
 import React, { PropsWithChildren } from "react";
 
 const useStyles = makeStyles((theme: Theme) => {

src/common/RangeInput.tsx

@@ -4,8 +4,6 @@ import {
   Grid2 as Grid, 
   TextField 
 } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
-// import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import { Theme } from "@mui/material";
 import { withStyles, WithStyles } from "@mui/styles";
 import React from "react";

src/common/SearchSelect.tsx

@@ -1,7 +1,6 @@
 import { Autocomplete, Avatar, Box, CircularProgress, createFilterOptions } from "@mui/material";
 import TextField from "@mui/material/TextField";
 import { makeStyles } from "@mui/styles";
-// import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
 import { isArray } from "lodash";
 import React, { CSSProperties } from "react";
 

src/common/SmartBreadcrumb.tsx

@@ -10,10 +10,7 @@ import {
   useTheme
 } from "@mui/material";
 import { Replay } from "@mui/icons-material";
-// import Link, { LinkProps } from "@material-ui/core/Link";
-// import { Skeleton } from "@mui/l";
 import { useMobile } from "hooks";
-// import { MatchParams } from "navigation/Routes";
 import { ReactNode } from "react";
 import { useLocation } from "react-router";
 import { Link as RouterLink } from "react-router-dom";

src/common/Tour.tsx

@@ -1,4 +1,3 @@
-// import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
 import Joyride, { Step, CallBackProps, STATUS, TooltipRenderProps, Locale } from "react-joyride";
 import {
   Button,

src/common/time/DateSelect.tsx

@@ -10,7 +10,6 @@ import {
   Select,
   Theme
 } from "@mui/material";
-// import { DateRange, StaticDateRangePicker, DateRangeDelimiter } from "@material-ui/pickers";
 import moment, { Moment } from "moment";
 import React from "react";
 import ReactDOM from "react-dom";

src/common/time/TimeBar.tsx

@@ -3,7 +3,6 @@ import {
   DialogActions,
   DialogContent,
   Grid,
-  TextField,
   Theme,
   Typography
 } from "@mui/material";
@@ -11,11 +10,9 @@ import moment, { Moment } from "moment";
 import { DateRange as DateIcon } from "@mui/icons-material";
 import React, { useEffect, useState } from "react";
 import ResponsiveDialog from "common/ResponsiveDialog";
-// import { DateRange, DateRangeDelimiter, StaticDateRangePicker } from "@material-ui/pickers";
 import { DateRangePreset, GetDefaultDateRange, SetDefaultPreset } from "./DateRange";
 import { useThemeType } from "hooks";
 import { makeStyles } from "@mui/styles";
-import dayjs from "dayjs";
 
 interface Props {
   startDate: Moment;

src/component/ComponentForm.tsx

@@ -22,17 +22,14 @@ import {
   ExpandMore,
   Close as CloseIcon
 } from "@mui/icons-material";
-// import { Alert, AlertTitle } from "@material-ui/lab";
 import PeriodSelect from "common/time/PeriodSelect";
 import SearchSelect, { Option } from "common/SearchSelect";
-// import { GrainOptions } from "grain/GrainDescriber";
 import { cloneDeep } from "lodash";
 import { Component, Device } from "models";
 import {
   extension,
   getMeasurements,
   hasDimensions,
-  hasFan,
   isController,
   isMultiSensor,
   primaryMeasurement
@@ -42,16 +39,12 @@ import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
 import React, { useEffect, useState } from "react";
 import { bestUnit, milliToX } from "common/time/duration";
-// import CompModes from "component/ComponentMode.json";
-// import green from "@material-ui/core/colors/green";
-// import red from "@material-ui/core/colors/red";
-// import FanPicker from "fans/fanPicker";
 import { useGlobalState } from "providers";
 import { green, red } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { getDistanceUnit } from "utils";
 import { GrainOptions } from "grain";
-// import { getDistanceUnit } from "utils";
+import CompModes from "component/ComponentMode.json";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -168,11 +161,11 @@ export default function ComponentForm(props: Props) {
       formComponent.settings.measurementPeriodMs !== formComponent.settings.reportPeriodMs
     );
     setDataUsageWarningDismissed(localStorage.getItem("dataUsageWarningDismissed") !== null);
-    // CompModes.forEach((mode: any) => {
+    CompModes.forEach((mode: any) => {
-    //   if (formComponent.type() === mode.type && formComponent.subType() === mode.subtype) {
+      if (formComponent.type() === mode.type && formComponent.subType() === mode.subtype) {
-    //     setCompMode(mode);
+        setCompMode(mode);
-    //   }
+      }
-    // });
+    });
 
     //get the dimension values for the form and convert them to the form display values (m or ft)
     let length = formComponent.settings.containerDimensions?.lengthCm ?? 0;

src/component/ComponentOrder.tsx

@@ -15,7 +15,6 @@ import {
   Theme
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-//import DragIcon from "@material-ui/icons/DragHandle";
 import { DragHandle as DragIcon } from "@mui/icons-material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useDeviceAPI, usePrevious, useSnackbar } from "hooks";
@@ -23,11 +22,11 @@ import { cloneDeep } from "lodash";
 import { Component, Device } from "models";
 import { sortComponents } from "pbHelpers/Component";
 import { pond, quack } from "protobuf-ts/pond";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
 import { useThemeType } from "../hooks/useThemeType";
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles((_theme: Theme) => {
     const themeType = useThemeType()
     return ({
     item: {

src/component/ComponentSettings.tsx

@@ -54,10 +54,6 @@ import { or } from "utils/types";
 import { ConfigurablePin } from "pbHelpers/AddressTypes";
 import ColourPicker from "common/ColourPicker";
 import classNames from "classnames";
-// import green from "@material-ui/core/colors/green";
-// import AddIcon from "@material-ui/icons/AddCircle";
-// import RemoveIcon from "@material-ui/icons/RemoveCircle";
-// import red from "@material-ui/core/colors/red";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import ComponentForm from "./ComponentForm";
 import { green, red } from "@mui/material/colors";

src/component/ExportDataSettings.tsx

@@ -13,8 +13,6 @@ import {
   Typography,
   Theme
 } from "@mui/material"
-//import { Theme } from "@material-ui/core/styles/createMuiTheme";
-//import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import { withStyles, WithStyles } from "@mui/styles";
 
 import DateSelect from "common/time/DateSelect";
@@ -93,7 +91,7 @@ class ExportDataSettings extends React.Component<Props, State> {
   };
 
   submit = () => {
-    const { device, component, newMeasurements, user } = this.props;
+    const { device, component, user } = this.props;
     const { startDate, endDate } = this.state;
     const { sampleMeasurements, listUnitMeasurements } = this.context;
 

src/component/GPS.tsx

@@ -1,4 +1,3 @@
-//import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles";
 import { Theme } from "@mui/material"
 import { withStyles, createStyles, WithTheme, WithStyles } from "@mui/styles";
 import React from "react";

src/component/SensorLight.tsx

@@ -1,11 +1,10 @@
-//import { Box, createStyles, makeStyles, Theme } from "@material-ui/core";
 import { Box, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { Component } from "models";
 import { getMeasurementSummary } from "pbHelpers/ComponentType";
 import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { or } from "utils";
 
 interface Props {

src/component/UnitMeasurementSummary.tsx

@@ -5,7 +5,6 @@ import { convertedUnitMeasurement } from "models/UnitMeasurement";
 import moment from "moment";
 import { pond } from "protobuf-ts/pond";
 import React, { useEffect, useState } from "react";
-// import Divider from "@material-ui/core/Divider";
 import { Plenum } from "models/Plenum";
 import { Pressure } from "models/Pressure";
 import { GrainCable } from "models/GrainCable";

src/device/VersionChip.tsx

@@ -1,6 +1,4 @@
 import { Chip, Theme, Tooltip } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
-// import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import React from "react";
 import { getFirmwareVersionHelper } from "pbHelpers/FirmwareVersion";
 import { withStyles, WithStyles } from "@mui/styles";

src/fans/fanPicker.tsx

@@ -13,7 +13,6 @@ import {
   Radio,
   Box
 } from "@mui/material";
-//import { blue } from "@material-ui/core/colors";
 import { blue } from "@mui/material/colors";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import React, { useState, useEffect } from "react";

src/grain/GrainDryingCalculator.tsx

@@ -19,7 +19,6 @@ import {
   Theme,
   Typography
 } from "@mui/material";
-// import { Alert, AlertTitle, Skeleton } from "@material-ui/lab";
 import { GrainOptions, MoistureToHumidity } from "grain";
 import GrainDryingChart, { GrainDryingPoint } from "charts/GrainDryingChart";
 import SearchSelect, { Option } from "common/SearchSelect";

src/grainBag/grainBagActions.tsx

@@ -1,32 +1,31 @@
 import {
-  createStyles,
   IconButton,
   ListItemIcon,
   ListItemText,
-  makeStyles,
   Menu,
   MenuItem,
   Tooltip
-} from "@material-ui/core";
+} from "@mui/material";
-import SettingsIcon from "@material-ui/icons/Settings";
+import SettingsIcon from "@mui/icons-material/Settings";
-import MoreIcon from "@material-ui/icons/MoreVert";
+import MoreIcon from "@mui/icons-material/MoreVert";
 import React, { useState } from "react";
-import ObjectUsersIcon from "@material-ui/icons/AccountCircle";
+import ObjectUsersIcon from "@mui/icons-material/AccountCircle";
-import ObjectTeamsIcon from "@material-ui/icons/SupervisedUserCircle";
+import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
 import ObjectUsers from "user/ObjectUsers";
 import { pond } from "protobuf-ts/pond";
 import { Scope } from "models";
 import ObjectTeams from "teams/ObjectTeams";
 import RemoveSelfFromObject from "user/RemoveSelfFromObject";
 import ShareObject from "user/ShareObject";
-import { blue } from "@material-ui/core/colors";
+import { blue } from "@mui/material/colors";
-import RemoveSelfIcon from "@material-ui/icons/ExitToApp";
+import RemoveSelfIcon from "@mui/icons-material/ExitToApp";
-import { Share } from "@material-ui/icons";
+import { Share } from "@mui/icons-material";
 import { GrainBag } from "models/GrainBag";
 import GrainBagSettings from "./grainBagSettings";
+import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles(() => {
-  return createStyles({
+  return ({
     shareIcon: {
       color: blue["500"],
       "&:hover": {
@@ -87,7 +86,6 @@ export default function GrainBagActions(props: Props) {
             setOpenState({ ...openState, share: true });
             setAnchorEl(null);
           }}
-          button
           dense>
           <ListItemIcon>
             <Share className={classes.blueIcon} />
@@ -99,8 +97,7 @@ export default function GrainBagActions(props: Props) {
           onClick={() => {
             setOpenState({ ...openState, users: true });
             setAnchorEl(null);
-          }}
+          }}>
-          button>
           <ListItemIcon>
             <ObjectUsersIcon />
           </ListItemIcon>
@@ -111,8 +108,7 @@ export default function GrainBagActions(props: Props) {
           onClick={() => {
             setOpenState({ ...openState, teams: true });
             setAnchorEl(null);
-          }}
+          }}>
-          button>
           <ListItemIcon>
             <ObjectTeamsIcon />
           </ListItemIcon>
@@ -123,8 +119,7 @@ export default function GrainBagActions(props: Props) {
           onClick={() => {
             setOpenState({ ...openState, removeSelf: true });
             setAnchorEl(null);
-          }}
+          }}>
-          button>
           <ListItemIcon>
             <RemoveSelfIcon className={classes.red} />
           </ListItemIcon>

src/grainBag/grainBagInventoryGraph.tsx

@@ -1,11 +1,11 @@
-import { Box, Card, CircularProgress, Typography } from "@material-ui/core";
+import { Box, Card, CircularProgress, Typography } from "@mui/material";
 import BarGraph, { BarData } from "charts/BarGraph";
 import GrainDescriber from "grain/GrainDescriber";
 import { GrainBag } from "models/GrainBag";
 import moment, { Moment } from "moment";
 import { pond } from "protobuf-ts/pond";
 import { useGrainBagAPI, useSnackbar } from "providers";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { getGrainUnit } from "utils";
 
 interface Props {
@@ -61,7 +61,7 @@ export default function GrainBagInventoryGraph(props: Props) {
           }
           setData(barData);
         })
-        .catch(err => {
+        .catch(_err => {
           openSnack("There was a problem retrieving inventory information");
         })
         .finally(() => {

src/grainBag/grainBagVisualizer.tsx

@@ -1,16 +1,14 @@
 import {
   Box,
   Card,
-  Grid,
+  Grid2 as Grid,
   Slider,
-  makeStyles,
-  createStyles,
   Typography,
   IconButton,
   Theme,
   useTheme,
   darken
-} from "@material-ui/core";
+} from "@mui/material";
 import GrainDescriber from "grain/GrainDescriber";
 import GrainTransaction from "grain/GrainTransaction";
 import { useMobile } from "hooks";
@@ -19,10 +17,11 @@ import { round } from "lodash";
 import { GrainBag } from "models/GrainBag";
 import moment from "moment";
 import { pond } from "protobuf-ts/pond";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { getThemeType } from "theme";
 import { getGrainUnit } from "utils";
 import GrainBagSVG from "./grainBagSVG";
+import { makeStyles } from "@mui/styles";
 
 interface Props {
   grainBag: GrainBag;
@@ -36,7 +35,7 @@ enum zIndexPriority {
 }
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     grainOVerlay: {
       position: "absolute",
       height: "10%",
@@ -293,14 +292,14 @@ export default function GrainBagVisualizer(props: Props) {
 
   return (
     <Card raised className={classes.cardContent}>
-      <Grid container justify="flex-start" alignItems="stretch">
+      <Grid container justifyContent="flex-start" alignItems="stretch">
-        <Grid item xs sm md style={{ position: "relative" }}>
+        <Grid style={{ position: "relative" }}>
           {overview()}
         </Grid>
-        <Grid item style={{ position: "relative" }}>
+        <Grid style={{ position: "relative" }}>
           {visual()}
         </Grid>
-        <Grid item>{controls()}</Grid>
+        <Grid>{controls()}</Grid>
       </Grid>
       {/* dialog for grain inventory transactions */}
       <GrainTransaction

src/group/GroupSettings.tsx

@@ -24,14 +24,10 @@ import {
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import CancelSubmit from "common/CancelSubmit";
-// import { darken, lighten } from "@material-ui/core/styles/colorManipulator";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import DeleteButton from "common/DeleteButton";
 import Loader from "common/Loader";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import SearchBar from "common/SearchBar";
-// import SearchBar from "common/SearchBar";
-// import RemoveGroup from "group/RemoveGroup";
 import { useDeviceAPI, useGroupAPI, usePrevious, useSnackbar } from "hooks";
 import { Device, Group } from "models";
 import { filterDevices } from "pbHelpers/Device";

src/hooks/useThemeType.ts

@@ -1,5 +1,3 @@
-// import { useTheme, Theme } from "@material-ui/core";
-
 import { Theme, useTheme } from "@mui/material";
 
 export function useThemeType() {

src/interactions/InteractionSettings.tsx

@@ -22,7 +22,6 @@ import {
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/AddCircle";
 import RemoveIcon from "@mui/icons-material/RemoveCircle";
-// import { TimePicker } from "@material-ui/pickers";
 import classNames from "classnames";
 import DeleteButton from "common/DeleteButton";
 import ResponsiveDialog from "common/ResponsiveDialog";
@@ -557,7 +556,7 @@ export default function InteractionSettings(props: Props) {
     setInteraction(updatedInteraction);
   };
 
-  const toggleReport = (event: any) => {
+  const toggleReport = (_event: any) => {
     let updatedInteraction = Interaction.clone(interaction);
     let notifications = or(
       interaction.settings.notifications,
@@ -568,7 +567,7 @@ export default function InteractionSettings(props: Props) {
     setInteraction(updatedInteraction);
   };
 
-  const toggleNotify = (event: any) => {
+  const toggleNotify = (_event: any) => {
     let updatedInteraction = Interaction.clone(interaction);
     let notifications = or(
       updatedInteraction.settings.notifications,

src/interactions/InteractionsOverview.tsx

@@ -15,7 +15,6 @@ import {
   Typography
 } from "@mui/material";
 import { Settings } from "@mui/icons-material";
-// import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import { useInteractionsAPI, usePrevious, useSnackbar } from "hooks";
 import { cloneDeep } from "lodash";
 import { Component, Device, Interaction } from "models";
@@ -156,7 +155,7 @@ export default function InteractionsOverview(props: Props) {
                 step={measurement.step()}
                 track={false}
                 value={measurement.toDisplay(condition.value ? condition.value : 0)}
-                onChange={(event, value) =>
+                onChange={(_event, value) =>
                   updateConditionValue(source, interactionIndex, conditionIndex, value)
                 }
               />
@@ -202,14 +201,14 @@ export default function InteractionsOverview(props: Props) {
   ) => {
     interactionsAPI
       .updateInteraction(Number(deviceID), settings)
-      .then((response: any) => {
+      .then((_response: any) => {
         let updatedDirtyInteractions = cloneDeep(dirtyInteractions);
         updatedDirtyInteractions.set(index, false);
         setDirtyInteractions(updatedDirtyInteractions);
         success("Successfully updated the interaction for " + component.name());
         refreshCallback();
       })
-      .catch((err: any) => {
+      .catch((_err: any) => {
         error("Error occurred while updating the interaction for " + component.name());
       });
   };

src/navigation/SideNavigator.tsx

@@ -24,14 +24,15 @@ import { Link, useLocation } from "react-router-dom";
 import BinsIcon from "products/Bindapt/BinsIcon";
 import { useGlobalState } from "providers";
 import {
-  hasTutorialPlaylist,
+  // hasTutorialPlaylist,
-  IsAdaptiveAgriculture,
+  // IsAdaptiveAgriculture,
-  IsAdCon,
+  // IsAdCon,
-  isBXT,
+  // isBXT,
   IsMiVent,
-  IsOmniAir
+  // IsOmniAir
 } from "services/whiteLabel";
 import MiningIcon from "products/ventilation/MiningIcon";
+import { useAuth0 } from "@auth0/auth0-react";
 
 const drawerWidth = 230;
 
@@ -101,6 +102,7 @@ interface Props {
   
 export default function SideNavigator(props: Props) {
   const { open, onOpen, onClose } = props;
+  const { isAuthenticated } = useAuth0()
   const theme = useTheme();
   const width = useWidth();
   const classes = useStyles();
@@ -233,7 +235,7 @@ export default function SideNavigator(props: Props) {
       </Toolbar>
       <Divider />
       {/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */}
-     {authenticatedSideMenu()}
+      {isAuthenticated && authenticatedSideMenu()}
     </SwipeableDrawer>
   );
 }

src/objects/ObjectAlerts.tsx

@@ -29,9 +29,6 @@ import {
   Typography
 } from "@mui/material";
 import { ExpandMore, RemoveCircle as RemoveIcon, AddCircle as AddIcon } from "@mui/icons-material";
-//import RemoveIcon from "@material-ui/icons/RemoveCircle";
-//import { ExpandMore } from "@material-ui/icons";
-//import AddIcon from "@material-ui/icons/AddCircle";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { Option } from "common/SearchSelect";
 import classNames from "classnames";
@@ -47,11 +44,8 @@ import { useNotificationAPI } from "providers/pond/notificationAPI";
 import React, { useEffect, useState } from "react";
 import { capitalize, cloneDeep } from "lodash";
 import { timeOfDayDescriptor } from "pbHelpers/Interaction";
-//import { TimePicker } from "@material-ui/pickers";
 import { TimePicker } from "@mui/x-date-pickers";
-//import { getThemeType } from "theme";
 import { getThemeType } from "theme/themeType";
-//import { green, red } from "@material-ui/core/colors";
 import { green, red } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 
@@ -251,7 +245,7 @@ export default function ObjectAlerts(props: Props) {
         setRecentNotifications(resp.data.notifications);
         setTotalNotifications(resp.data.total);
       })
-      .catch(err => {})
+      .catch(_err => {})
       .finally(() => {
         setNotificationsLoading(false);
       });
@@ -303,7 +297,7 @@ export default function ObjectAlerts(props: Props) {
           setRecentNotifications([...c]);
         }
       })
-      .catch(err => {})
+      .catch(_err => {})
       .finally(() => {
         setNotificationsLoading(false);
       });
@@ -373,10 +367,10 @@ export default function ObjectAlerts(props: Props) {
     });
     interactionsAPI
       .addInteractionToComponents(compIds, newAlert)
-      .then(resp => {
+      .then(_resp => {
         openSnack("interaction added to selected components");
       })
-      .catch(err => {
+      .catch(_err => {
         openSnack("there was a problem adding the interaction to the selected components");
       });
     setNewAlertOpen(false);

src/objects/bulkEditForms/bulkBinSettings.tsx

@@ -1,5 +1,4 @@
-//import { Button, Grid, InputAdornment, TextField } from "@material-ui/core";
+import { Button, Grid2 as Grid, InputAdornment, TextField } from "@mui/material";
-import { Button, Grid, InputAdornment, TextField } from "@mui/material";
 import SearchSelect, { Option } from "common/SearchSelect";
 import { GrainOptions } from "grain";
 import { pond } from "protobuf-ts/pond";
@@ -77,7 +76,7 @@ export default function BulkBinSettings(props: Props) {
           openSnack("Successfully updated " + resp.data.successfull + " bins");
         }
       })
-      .catch(err => {
+      .catch(_err => {
         openSnack("Failed to update bins");
       });
   };
@@ -86,7 +85,7 @@ export default function BulkBinSettings(props: Props) {
     <React.Fragment>
       <Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
         {/* first row */}
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Bin Name"
@@ -96,7 +95,7 @@ export default function BulkBinSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <SearchSelect
             label="Grain Type"
             selected={grainOption}
@@ -111,7 +110,7 @@ export default function BulkBinSettings(props: Props) {
             options={GrainOptions()}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Grain Variant"
@@ -122,7 +121,7 @@ export default function BulkBinSettings(props: Props) {
           />
         </Grid>
         {/* second row */}
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Custom Grain"
@@ -132,7 +131,7 @@ export default function BulkBinSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Bushels"
@@ -143,7 +142,7 @@ export default function BulkBinSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Capacity"
@@ -155,7 +154,7 @@ export default function BulkBinSettings(props: Props) {
           />
         </Grid>
         {/* last row */}
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Bin Height"
@@ -173,7 +172,7 @@ export default function BulkBinSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Bin Diameter"
@@ -191,7 +190,7 @@ export default function BulkBinSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="High Temp Warning"
@@ -211,7 +210,7 @@ export default function BulkBinSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <TextField
             fullWidth
             label="Low Temp Warning"
@@ -231,7 +230,7 @@ export default function BulkBinSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={{ xs: gridItemWidth }}>
           <Button
             variant="contained"
             color="primary"

src/objects/bulkEditForms/bulkGrainBagSettings.tsx

@@ -1,4 +1,3 @@
-//import { Button, Grid, TextField } from "@material-ui/core";
 import { Button, Grid2 as Grid, TextField } from "@mui/material";
 import SearchSelect, { Option } from "common/SearchSelect";
 import { GrainOptions } from "grain";
@@ -68,7 +67,7 @@ export default function BulkGrainBagSettings(props: Props) {
           openSnack("Successfully updated " + resp.data.successfull + " bins");
         }
       })
-      .catch(err => {
+      .catch(_err => {
         openSnack("Failed to update bins");
       });
   };

src/pages/Bin.tsx

@@ -28,16 +28,12 @@ import {
 import BinActions from "bin/BinActions";
 import BinHistory from "bin/BinHistory";
 import { useComponentAPI, useMobile } from "hooks";
-// import { useHistory } from "react-router";
 import { Bin as IBin, binScope } from "models";
-// import { MatchParams } from "navigation/Routes";
 import { pond, quack } from "protobuf-ts/pond";
 import { useBinAPI, useGlobalState } from "providers";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-// import { useRouteMatch } from "react-router";
 import PageContainer from "./PageContainer";
 import { Component, Device, Interaction } from "models";
-// import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import BinLightIcon from "assets/products/bindapt/binLight.png";
 import BinDarkIcon from "assets/products/bindapt/binDark.png";
 import NotesIcon from "@mui/icons-material/Notes";
@@ -214,7 +210,7 @@ export default function Bin(props: Props) {
   const [binPresets, setBinPresets] = useState<DevicePreset[]>([]);
   const [missedCableReadings, setMissedCableReadings] = useState(0);
 
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_event: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue);
   };
 
@@ -482,7 +478,7 @@ export default function Bin(props: Props) {
   //   return true;
   // };
 
-  const refresh = (showSnack?: boolean) => {
+  const refresh = (_showSnack?: boolean) => {
     // binAPI.getBin(bin.key()).then(resp => {
     //   let bin = IBin.any(resp.data);
     //   setBin(bin);

src/pages/Bins.tsx

@@ -51,7 +51,6 @@ import BinUtilizationChart from "charts/BinUtilizationChart";
 import GrainDescriber, { grainName } from "grain/GrainDescriber";
 // import GrainBagList from "grainBag/grainBagList";
 // import GrainBagSettings from "grainBag/grainBagSettings";
-// import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import { useMobile, useWidth } from "hooks";
 import { Dictionary } from "lodash";
 // import { Bin, Interaction, BinYard as BinYardModel } from "models";

src/pbHelpers/ComponentType.tsx

@@ -1,5 +1,4 @@
-// import Grid2 from "@material-ui/core/Grid2";
+import {
-import Graph, {
   GraphComponent,
   GraphOrientation,
   GraphPoint,
@@ -8,7 +7,6 @@ import Graph, {
 } from "common/Graph";
 import { Range } from "common/RangeInput";
 import { Option } from "common/SearchSelect";
-import GPSMap from "component/GPS";
 import { Interaction } from "models";
 import {
   AirQuality,
@@ -48,7 +46,6 @@ import { multilineCapCableData } from "./ComponentTypes/CapacitorCable";
 import { findInteractionsAsSource } from "pbHelpers/Interaction";
 import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
-import React from "react";
 
 import { notNull, or } from "utils/types";
 import { emptyComponentId } from "./Component";
@@ -63,7 +60,6 @@ import { LineData, Point } from "charts/measurementCharts/MultiLineGraph";
 import moment, { Moment } from "moment";
 import { avg } from "utils";
 import { Airflow } from "./ComponentTypes/Airflow";
-import { Grid2 } from "@mui/material";
 
 const COMPONENT_TYPE_MAP = new Map<quack.ComponentType, Function>([
   [quack.ComponentType.COMPONENT_TYPE_INVALID, Invalid],
@@ -240,7 +236,7 @@ export function unitMeasurementSummary(
   });
   //if nodes are excluded splice them out of the val array so they are not displayed in the summary
   if (excludedNodes) {
-    vals.forEach((val, i) => {
+    vals.forEach((_val, i) => {
       if (excludedNodes.includes(i)) {
         vals.splice(i, 1);
       }

src/pbHelpers/Fan.ts

@@ -0,0 +1,110 @@
+import { pond } from "protobuf-ts/pond";
+import { getThemeType } from "theme";
+import inLineDarkIcon from "assets/components/inLineAerationDark.png";
+import inLineLightIcon from "assets/components/inLineAerationLight.png";
+import lowSpeedDark from "assets/components/lowSpeedCentrifugalFanDark.png";
+import lowSpeedLight from "assets/components/lowSpeedCentrifugalFanLight.png";
+import highSpeedDark from "assets/components/fullCentrifugalFanDark.png";
+import highSpeedLight from "assets/components/fullCentrifugalFanLight.png";
+
+interface FanSizeDescriber {
+  key: pond.FanHp;
+  label: string;
+  numerical: number;
+}
+
+const getFanSizeDescribers = (): FanSizeDescriber[] => {
+  return [
+    { key: pond.FanHp.FAN_HP_UNKNOWN, label: "Unknown", numerical: 0 },
+    { key: pond.FanHp.FAN_HP_THREE, label: "3HP", numerical: 3 },
+    { key: pond.FanHp.FAN_HP_FIVE, label: "5HP", numerical: 5 },
+    { key: pond.FanHp.FAN_HP_SEVENPOINTFIVE, label: "7HP", numerical: 7 },
+    { key: pond.FanHp.FAN_HP_SEVEN, label: "7.5HP", numerical: 7.5 },
+    { key: pond.FanHp.FAN_HP_TEN, label: "10HP", numerical: 10 },
+    { key: pond.FanHp.FAN_HP_FIFTEEN, label: "15HP", numerical: 15 },
+    { key: pond.FanHp.FAN_HP_TWENTY, label: "20HP", numerical: 20 },
+    { key: pond.FanHp.FAN_HP_TWENTYFIVE, label: "25HP", numerical: 25 },
+    { key: pond.FanHp.FAN_HP_THIRTY, label: "30HP", numerical: 30 }
+  ];
+};
+
+interface FanTypeDescriber {
+  key: pond.FanType;
+  label: string;
+  sizes: pond.FanHp[];
+}
+
+const getFanTypeDescribers = (): FanTypeDescriber[] => {
+  return [
+    { key: pond.FanType.FAN_TYPE_UNKNOWN, label: "Unknown", sizes: [] },
+    {
+      key: pond.FanType.FAN_TYPE_CENTRIFUGAL_INLINE,
+      label: "In-line Aeration",
+      sizes: [
+        pond.FanHp.FAN_HP_THREE,
+        pond.FanHp.FAN_HP_FIVE,
+        pond.FanHp.FAN_HP_SEVEN,
+        pond.FanHp.FAN_HP_TEN
+      ]
+    },
+    {
+      key: pond.FanType.FAN_TYPE_CENTRIFUGAL_HIGH_SPEED,
+      label: "High Speed Centrifugal",
+      sizes: [
+        pond.FanHp.FAN_HP_THREE,
+        pond.FanHp.FAN_HP_FIVE,
+        pond.FanHp.FAN_HP_SEVENPOINTFIVE,
+        pond.FanHp.FAN_HP_TEN
+      ]
+    },
+    {
+      key: pond.FanType.FAN_TYPE_CENTRIFUGAL_LOW_SPEED,
+      label: "Low Speed Centrifugal",
+      sizes: [
+        pond.FanHp.FAN_HP_FIVE,
+        pond.FanHp.FAN_HP_SEVENPOINTFIVE,
+        pond.FanHp.FAN_HP_TEN,
+        pond.FanHp.FAN_HP_FIFTEEN,
+        pond.FanHp.FAN_HP_TWENTY,
+        pond.FanHp.FAN_HP_TWENTYFIVE,
+        pond.FanHp.FAN_HP_THIRTY
+      ]
+    }
+  ];
+};
+
+export function GetFanTypes(): FanTypeDescriber[] {
+  return getFanTypeDescribers();
+}
+
+function getFanTypeDescriber(type: pond.FanType): FanTypeDescriber | undefined {
+  const fanTypes = getFanTypeDescribers();
+
+  return fanTypes.find(t => t.key === type);
+}
+
+export function GetFanTypeSizes(type: pond.FanType): FanSizeDescriber[] {
+  let options: FanSizeDescriber[] = [];
+  let typeDesc = getFanTypeDescriber(type);
+  if (typeDesc) {
+    let matches = typeDesc.sizes;
+    options = getFanSizeDescribers().filter(s => matches.includes(s.key));
+  }
+
+  return options;
+}
+
+export function getFanIcon(type: pond.FanType): string {
+  switch (type) {
+    case pond.FanType.FAN_TYPE_CENTRIFUGAL_INLINE:
+      if (getThemeType() === "light") return inLineLightIcon;
+      return inLineDarkIcon;
+    case pond.FanType.FAN_TYPE_CENTRIFUGAL_HIGH_SPEED:
+      if (getThemeType() === "light") return highSpeedLight;
+      return highSpeedDark;
+    case pond.FanType.FAN_TYPE_CENTRIFUGAL_LOW_SPEED:
+      if (getThemeType() === "light") return lowSpeedLight;
+      return lowSpeedDark;
+  }
+  return "";
+}

src/products/ProductTabChip.tsx

@@ -1,5 +1,3 @@
-//import { Avatar, ButtonBase, createStyles, makeStyles, Theme, Tooltip } from "@material-ui/core";
-//import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@material-ui/icons";
 import { Avatar, ButtonBase, Theme, Tooltip } from "@mui/material";
 import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@mui/icons-material";
 import { makeStyles } from "@mui/styles";

src/products/ventilation/MiningIcon.tsx

@@ -2,7 +2,6 @@ import MineDarkIcon from "assets/components/mineIconDark.png";
 import MineLightIcon from "assets/components/mineIconLight.png";
 import { ImgIcon } from "common/ImgIcon";
 import { useThemeType } from "hooks";
-import React from "react";
 
 interface Props {
   type?: "light" | "dark";

src/products/ventilation/VentilationIcon.tsx

@@ -2,7 +2,6 @@ import VentilationDarkIcon from "assets/products/ventilation/ventIconDark.png";
 import VentilationLightIcon from "assets/products/ventilation/ventIconLight.png";
 import { ImgIcon } from "common/ImgIcon";
 import { useThemeType } from "hooks";
-import React from "react";
 
 interface Props {
   type?: "light" | "dark";

src/services/google/mapHelpers.ts

@@ -1,3 +1,4 @@
+import { quack } from "protobuf-ts/quack";
 import { or } from "utils/types";
 
 function decode(encoded: string) {
@@ -10,16 +11,16 @@ function decode(encoded: string) {
   return res;
 }
 
-export function parseGPS(gps: { location: any; latitude: number; longitude: number; uncertainty: number; wifiAccessPoints: any[]; cellTower: any; }) {
+export function parseGPS(gps: { location: any; latitude: number; longitude: number; uncertainty: number; wifiAccessPoints: any[]; cellTower: any; } | quack.GPS | null | undefined) {
   gps = or(gps, {});
   let lat = 0;
   let lng = 0;
   let accuracy = 0;
   let request: { wifiAccessPoints?: any; cellTowers?: any; } | undefined = undefined;
   if (gps.location) {
-    lat = gps.latitude;
+    lat = gps.location.latitude;
-    lng = gps.longitude;
+    lng = gps.location.latitude;
-    accuracy = gps.uncertainty;
+    accuracy = gps.location.uncertainty;
   } else if (gps.wifiAccessPoints) {
     request = { wifiAccessPoints: [] };
     gps.wifiAccessPoints.forEach(function(ap) {

src/teams/ShareWithTeam.tsx

@@ -18,7 +18,6 @@ import {
   ListItemText,
   Tab,
   Tabs,
-  TextField,
   Theme,
   Tooltip,
   Typography
@@ -29,7 +28,6 @@ import {
   LinkOff,
   RemoveCircle as RemoveCircleIcon
 } from "@mui/icons-material";
-// import { MobileDateTimePicker } from "@material-ui/pickers";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { usePermissionAPI, usePrevious, useSnackbar } from "hooks";
 import { cloneDeep } from "lodash";

src/user/ObjectUsers.tsx

@@ -12,7 +12,6 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Grid,
   Grid2,
   IconButton,
   List,
@@ -27,8 +26,6 @@ import {
   Typography,
   useTheme
 } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
-// import { PaletteColor } from "@material-ui/core/styles/createPalette";
 import RemoveUserIcon from "@mui/icons-material/RemoveCircle";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import ShareIcon from "@mui/icons-material/Share";
@@ -220,7 +217,7 @@ export default function ObjectUsers(props: Props) {
     console.log(users);
     permissionAPI
       .updatePermissions(scope, users)
-      .then((response: any) => {
+      .then((_response: any) => {
         success("Users were sucessfully updated for " + label);
         close();
         refreshCallback();

src/ventilation/Editor.tsx

@@ -23,7 +23,6 @@ import CounterclockwiseIcon from "@mui/icons-material/RotateLeft";
 import { useGlobalState, useMineAPI } from "providers";
 import { Component, Device } from "models";
 import { Sensor } from "./drawable/Sensor";
-// import { ToggleButton } from "@material-ui/lab";
 import { VentTBreak } from "./drawable/VentTBreak";
 import InteractionSettings from "interactions/InteractionSettings";
 import { UnitMeasurement } from "models/UnitMeasurement";