feat(lst): tan stack routes added with protected routes

frontend/src/routes/ocp/$lineID.tsx

@@ -0,0 +1,17 @@
+import {createFileRoute} from "@tanstack/react-router";
+
+export const Route = createFileRoute("/ocp/$lineID")({
+    component: RouteComponent,
+    loader: async ({params}) => {
+        await new Promise((r) => setTimeout(r, 1500));
+        //throw new Error();
+        return {lineID: params.lineID};
+    },
+    pendingComponent: () => <div className="m-auto">Loading....</div>,
+    errorComponent: () => <div className="m-auto">Error....</div>,
+});
+
+function RouteComponent() {
+    const {lineID} = Route.useLoaderData();
+    return <div>Hello "/ocp/{lineID}"!</div>;
+}

frontend/src/routes/ocp/index.tsx

@@ -0,0 +1,34 @@
+import {createFileRoute, Link} from "@tanstack/react-router";
+
+export const Route = createFileRoute("/ocp/")({
+    component: RouteComponent,
+    validateSearch: (search) => {
+        return {
+            q: (search.q as string) || "",
+        };
+    },
+    loaderDeps: ({search: {q}}) => ({q}),
+    loader: async ({deps: {q}}) => {
+        return {line: q};
+    },
+});
+
+function RouteComponent() {
+    const {line} = Route.useLoaderData();
+
+    const lines = ["l", "2", "3"];
+    return (
+        <div>
+            <h2>Hello "/ocp/{line}/something"!</h2>
+            {lines.map((line) => {
+                return (
+                    <div key={line}>
+                        <Link to="/ocp/$lineID" params={{lineID: line}}>
+                            Post
+                        </Link>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

frontend/src/routes/ocp/lots.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/ocp/lots')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/ocp/lots"!</div>
+}