put the first components into the field page

src/navigation/Router.tsx

@@ -47,6 +47,7 @@ const Contract = lazy(() => import("pages/Contract"));
 const JohnDeere = lazy(() => import("pages/JohnDeere"));
 const CNHi = lazy(() => import("pages/CNHi"));
 const LibraCart = lazy(() => import("pages/LibraCart"));
+const FieldPage = lazy(()=>import("pages/Field"));
 
 export const appendToUrl = (appendage: number | string) => {
   const basePath = location.pathname.replace(/\/$/, ""); 
@@ -70,6 +71,7 @@ export default function Router() {
         <Route path="terminals/*" element={<TerminalGatesRoute />} />
         <Route path="jobsites/*" element={<JobsitesRoute />} />
         <Route path="heaters/*" element={<ObjectHeatersRoute />} />
+        <Route path="fields/*" element={<FieldsRoute />} />
       </Routes>
     )
   }
@@ -284,6 +286,21 @@ export default function Router() {
     );
   };
 
+  const FieldsRoute = () => {
+    return (
+      <Routes>
+        <Route
+          path=""
+          element={<Fields />}
+        />
+        <Route
+          path="/:fieldID"
+          element={<FieldPage />}
+        />
+      </Routes>
+    );
+  }
+
   if (isLoading) return null;
   // if (!isAuthenticated) {
   //   loginWithRedirect()
@@ -325,7 +342,6 @@ export default function Router() {
           {user.hasFeature("admin") &&
             <Route path="logs" element={<Logs />} />
           }
-          <Route path="fields" element={<Fields />} />
           <Route path="marketplace" element={<Marketplace />} />
           {user.hasFeature("admin") && (
             <Route path="firmware" element={<Firmware />} />