Refactor making changes to home and how widgets are altered

client/src/App.jsx

@@ -1,6 +1,6 @@
 import 'leaflet/dist/leaflet.css';
 import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
-import { useRecipe, Grid, GridItem, useDialog } from "@chakra-ui/react";
+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";
@@ -44,7 +44,11 @@ function AppFoundation() {
 //   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);
@@ -56,7 +60,16 @@ function App() {
 
             {/*Non-Public Routes*/}
             <Route element={<AppFoundation />}>
-                <Route path="/home" element={<Home />} />
+
+                <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 />} />