imported mining stuff, can add a mine and list them

src/navigation/Router.tsx

@@ -2,29 +2,23 @@ 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 Teams from "pages/Teams";
-// import Users from "pages/Users";
-// import TeamPage from "pages/Team";
 import Header from "app/Header";
 import Logout from "pages/Logout";
-import Devices from "pages/Devices";
-// import DevicePage from "pages/Device";
-// import GroupsPage from "pages/Groups";
-// import GroupPage from "pages/Group";
 import { ErrorBoundary } from "react-error-boundary";
-import DeviceComponent from "pages/DeviceComponent";
-import Bins from "pages/Bins";
 import { getWhitelabel } from "services/whiteLabel";
-import Bin from "pages/Bin";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 const DevicePage = lazy(() => import("pages/Device"));
+const Devices = lazy(() => import("pages/Devices"));
 const GroupsPage = lazy(() => import("pages/Groups"));
 const GroupPage = lazy(() => import("pages/Group"));
 const Teams = lazy(() => import("pages/Teams"));
 const Users = lazy(() => import("pages/Users"));
 const TeamPage = lazy(() => import("pages/Team"));
 const BinPage = lazy(() => import("pages/Bin"));
+const Bins = lazy(() => import("pages/Bins"));
+const Mines = lazy(() => import("pages/Mines"));
+const DeviceComponent = lazy(() => import("pages/DeviceComponent"));
 
 interface Props {
   toggleTheme: () => void;
@@ -48,6 +42,7 @@ export default function Router(props: Props) {
         <Route path="devices/*" element={<DevicesRoute/>} />
         <Route path="groups/*" element={<GroupsRoute/>} />
         <Route path="bins/*" element={<BinsRoute/>} />
+        <Route path="mines/*" element={<MinesRoute/>} />
       </Routes>
     )
   }
@@ -112,7 +107,7 @@ export default function Router(props: Props) {
           />
           <Route
             path="/:binID" // "/settings/basic"
-            element={<Bin />}
+            element={<BinPage />}
           />
           {/* <Route
             path="/:deviceID/components/:componentID" // "/settings/basic"
@@ -131,6 +126,36 @@ export default function Router(props: Props) {
     );
   };
 
+  const MinesRoute = () => {
+    return (
+      <div>
+        <Routes>
+          <Route
+            key="Mines page route"
+            path="" // "/settings/basic"
+            element={<Mines key={"Bins page"} />}
+          />
+          {/* <Route
+            path="/:binID" // "/settings/basic"
+            element={<Bin />}
+          /> */}
+          {/* <Route
+            path="/:deviceID/components/:componentID" // "/settings/basic"
+            element={<DeviceComponent />}
+          />
+          <Route
+            path="/:deviceID/history" // "/settings/basic"
+            element={<DeviceHistory />}
+          /> */}
+          <Route
+            path="/:binID/*" // "/settings/basic"
+            element={<RelativeRoutes />}
+          />
+        </Routes>
+      </div>
+    );
+  };
+
 
   const GroupsRoute = () => {
     return (

src/navigation/SideNavigator.tsx

@@ -1,12 +1,37 @@
 import { ChevronRight, People, Person } from "@mui/icons-material";
 import ChevronLeft from "@mui/icons-material/ChevronLeft";
-import { darken, Divider, Grid2 as Grid, IconButton, lighten, List, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, Theme, Toolbar, Tooltip, useTheme } from "@mui/material";
+import { 
+  darken, 
+  Divider, 
+  Grid2 as Grid, 
+  IconButton, 
+  lighten, 
+  List, 
+  ListItemButton, 
+  ListItemIcon, 
+  ListItemText, 
+  SwipeableDrawer, 
+  Theme, 
+  Toolbar, 
+  Tooltip, 
+  useTheme 
+} from "@mui/material";
 import classNames from "classnames";
 import { useWidth } from "../hooks/useWidth";
 import { makeStyles } from "@mui/styles";
 import BindaptIcon from "../products/Bindapt/BindaptIcon";
 import { Link, useLocation } from "react-router-dom";
 import BinsIcon from "products/Bindapt/BinsIcon";
+import { useGlobalState } from "providers";
+import {
+  hasTutorialPlaylist,
+  IsAdaptiveAgriculture,
+  IsAdCon,
+  isBXT,
+  IsMiVent,
+  IsOmniAir
+} from "services/whiteLabel";
+import MiningIcon from "products/ventilation/MiningIcon";
 
 const drawerWidth = 230;
 
@@ -80,6 +105,7 @@ export default function SideNavigator(props: Props) {
   const width = useWidth();
   const classes = useStyles();
   const location = useLocation();
+  const [{ user }] = useGlobalState()
 
   const getClasses = (page: string) => {
     if (page === "/device") {
@@ -101,7 +127,7 @@ export default function SideNavigator(props: Props) {
   }
 
   const authenticatedSideMenu = () => {
-
+    const isMiVent = IsMiVent();
     return (
       <List className={classes.list} component="nav">
         <Tooltip title="Bins" placement="right">
@@ -132,6 +158,22 @@ export default function SideNavigator(props: Props) {
             {open && <ListItemText primary="Devices" />}
           </ListItemButton>
         </Tooltip>
+        {(isMiVent || user.hasFeature("admin")) && (
+          <Tooltip title="Mines" placement="right">
+            <ListItemButton
+              id="tour-dashboard"
+              component={Link}
+              to="/mines"
+              onClick={onClose}
+              classes={getClasses("/mine")}
+              >
+              <ListItemIcon>
+                <MiningIcon />
+              </ListItemIcon>
+              {open && <ListItemText primary="Mines" />}
+            </ListItemButton>
+          </Tooltip>
+        )}
         <Tooltip title="Teams" placement="right">
           <ListItemButton
             id="tour-dashboard"