adjust all routes to new routing except /resources

app/components/device/new/new-device-stepper.tsx

@@ -176,27 +176,31 @@ export const Stepper = defineStepper(
     label: "General Info",
     info: "Provide a unique name for your device, select its operating environment (outdoor, indoor, mobile, or unknown), and add relevant tags (optional).",
     schema: generalInfoSchema,
+    index: 0
   },
   {
     id: "location",
     label: "Location",
     info: "Select the device's location by clicking on the map or entering latitude and longitude coordinates manually. Drag the marker on the map to adjust the location if needed.",
     schema: locationSchema,
+    index: 1
   },
   {
     id: "device-selection",
     label: "Device Selection",
     info: "Select a device model from the available options",
     schema: deviceSchema,
+    index: 2
   },
   {
     id: "sensor-selection",
     label: "Sensor Selection",
     info: "Select sensors for your device by choosing from predefined groups or individual sensors based on your device model. If using a custom device, configure sensors manually.",
     schema: sensorsSchema,
+    index: 3
   },
-  { id: "advanced", label: "Advanced", info: null, schema: advancedSchema },
-  { id: "summary", label: "Summary", info: null, schema: z.object({}) },
+  { id: "advanced", label: "Advanced", info: null, schema: advancedSchema, index: 4 },
+  { id: "summary", label: "Summary", info: null, schema: z.object({}), index: 5 },
 );
 
 type GeneralInfoData = z.infer<typeof generalInfoSchema>;
@@ -283,7 +287,7 @@ export default function NewDeviceStepper() {
                           onClick={() => stepper.goTo(step.id)}
                           className={`
                               ${
-                                stepper.current.index === index
+                                stepper.current.index === step.index
                                   ? "font-bold text-black"
                                   : "text-gray-500 cursor-pointer hover:text-black"
                               }

app/routes/_index.tsx

@@ -1,6 +1,5 @@
 import type { LoaderFunctionArgs } from "react-router";
-import { data } from "react-router";
-import { Link, useLoaderData } from "react-router";
+import { data, Link, useLoaderData } from "react-router";
 import { motion } from "framer-motion";
 import Features from "~/components/landing/sections/features";
 import Footer from "~/components/landing/footer";

app/routes/explore/forgot.tsx → app/routes/explore.forgot.tsx

@@ -1,6 +1,5 @@
 import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "react-router";
-import { data, redirect } from "react-router";
-import { Form, Link, useActionData, useNavigation, useSearchParams } from "react-router";
+import { data, redirect, Form, Link, useActionData, useNavigation, useSearchParams } from "react-router";
 import * as React from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";

app/routes/explore/login.tsx → app/routes/explore.login.tsx

@@ -1,6 +1,5 @@
 import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "react-router";
-import { data, redirect } from "react-router";
-import { Form, Link, useActionData, useNavigation, useSearchParams } from "react-router";
+import { data, redirect, Form, Link, useActionData, useNavigation, useSearchParams } from "react-router";
 import * as React from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";

app/routes/settings+/_settings.tsx → app/routes/settings.tsx

@@ -1,10 +1,9 @@
-import { Outlet, useLocation, useNavigate } from "react-router";
+import { Link, Outlet, useLocation } from "react-router";
 import { NavBar } from "~/components/nav-bar";
 import ErrorMessage from "~/components/error-message";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
 export default function SettingsLayoutPage() {
-  const navigate = useNavigate();
   const location = useLocation();
   // get current tab from the URL
   const currentTab = location.pathname.split("/")[2];
@@ -17,34 +16,31 @@ export default function SettingsLayoutPage() {
             className="w-full"
             defaultValue="account"
             value={currentTab || "account"}
-            onValueChange={(value) => {
-              navigate(`/settings/${value}`);
-            }}
           >
             <TabsList className="w-full justify-evenly">
               <TabsTrigger
                 className="data-[state=active]:text-light-green"
                 value="profile"
               >
-                Public Profile
+                <Link to={`/settings/profile`}>Public Profile</Link>
               </TabsTrigger>
               <TabsTrigger
                 className="data-[state=active]:text-light-green"
                 value="account"
               >
-                Account Information
+                <Link to={`/settings/account`}>Account</Link>
               </TabsTrigger>
               <TabsTrigger
                 className="data-[state=active]:text-light-green"
                 value="password"
               >
-                Password
+                <Link to={`/settings/password`}>Password</Link>
               </TabsTrigger>
               <TabsTrigger
                 className="data-[state=active]:text-light-green"
                 value="delete"
               >
-                Delete Account
+                <Link to={`/settings/delete`}>Delete Account</Link>
               </TabsTrigger>
             </TabsList>
             <TabsContent className="mt-6" value={currentTab || "profile"}>