Web-Frontend/client/src/App.jsx

import 'leaflet/dist/leaflet.css';
import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
import { createContext } from "react";
import Login from "@/Login.jsx";
import Sidebar from "./components/Sidebar/Sidebar.jsx";
import DialogPopup from "@/components/Canvas/CanvasComponents/DialogPopup.jsx";
import Header from "@/components/Header/Header.jsx";
import Home from "./components/Canvas/views/Home.jsx";
import RegionalMap from "./components/Canvas/views/RegionalMap.jsx";
import Volcano from "@/components/Canvas/views/Volcano.jsx";
import GlobalMap from "./components/Canvas/views/GlobalMap.jsx";
import Admin from "./components/Canvas/views/Admin.jsx";

function AppFoundation() {
  const recipe = useRecipe({ key: "dashboard" });
  const styles = recipe();
  const dialog = useDialog();

  return (
    <>
      <DialogPopup dialog={dialog} />
      <Grid css={styles}
        templateRows="1fr 11fr"
        templateColumns="auto 1fr"
        height="100vh"
        width="100vw"
      >
        <GridItem rowSpan={1} colSpan={2}>
          <Header />
        </GridItem>
        <GridItem colSpan={1}>
          <Sidebar />
        </GridItem>
        <GridItem colSpan={1} width="100%" overflow="auto">
          <Outlet />
        </GridItem>
      </Grid>
    </>
  )
}

// function ProtectedRoute({ user, children }) {
//   if (user) return children;
//   else return <Navigate to="/login" replace />;
// }
const Placeholder = ({ name }) => (
    <Flex width="100%" height="100%" align="center" justify="center" bg="gray.50"_dark={{ bg: "gray.900" }}>
        <Heading color="gray.400" _dark={{ bg: "gray.600" }} size="md">{name} Dashboard - Coming Soon</Heading>
    </Flex>
);
function App() {
    const sidebarContext = createContext(["Home", "Global Map", "Regional Map", "Volcano", "Admin"]);
    // const [user, setUser] = useState(null);

    return (
        <Routes>
            {/*Public Routes*/}
            <Route path="/login" element={<Login />} />

            {/*Non-Public Routes*/}
            <Route element={<AppFoundation />}>

                <Route path="/home" element={<Home />}>
                    {/* We use our "pass" component to fill the Outlet until the real pages are built */}
                    <Route index element={<Placeholder name="My" />} />
                    <Route path="gas" element={<Placeholder name="Gas" />} />
                    <Route path="seismic" element={<Placeholder name="Seismic" />} />
                    <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
                    <Route path="daily" element={<Placeholder name="Daily Activity" />} />
                </Route>

                <Route path="/global-map" element={<GlobalMap />} />
                <Route path="/regional-map" element={<RegionalMap />} />
                <Route path="/volcano" element={<Volcano />} />
                <Route path="/admin" element={<Admin />} />
            </Route>

            {/*Redirect Routes*/}
            <Route path="/" element={<Navigate to="/home" replace />} />
      </Routes>
  );
}

export default App