refactor(app): changed ways we get data so we can have better reasons why app no worky

frontend/src/routes/app-down.tsx

@@ -0,0 +1,51 @@
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import z from "zod";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardHeader } from "../components/ui/card";
+import { trackLstEvent } from "../lib/umami.utils";
+
+export const Route = createFileRoute("/app-down")({
+	validateSearch: z.object({
+		redirect: z.string().optional(),
+	}),
+
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const search = Route.useSearch();
+	const redirectPath = search.redirect ?? "/";
+	const router = useRouter();
+	const click = () => {
+		trackLstEvent("app_down_click", {
+			module: "app",
+			action: "click",
+			label: "redirect",
+			page: window.location.pathname,
+		});
+		router.navigate({ to: redirectPath, replace: true });
+	};
+	return (
+		<div className="flex items-center justify-center bg-background text-foreground">
+			<Card>
+				<CardHeader>
+					<p className="text-2xl">Oops, you shouldn't have done that</p>
+				</CardHeader>
+				<CardContent>
+					<p className="mt-3 text-muted-foreground">
+						Your have tried to go to a page that you are not authorized to be
+						at.
+					</p>
+				</CardContent>
+				<div className=" flex justify-center">
+					<Button
+						className="mt-5 rounded-md bg-primary px-4 py-2 text-primary-foreground"
+						onClick={click}
+					>
+						Refresh
+					</Button>
+				</div>
+			</Card>
+		</div>
+	);
+}

frontend/src/routes/forbidden.tsx

@@ -0,0 +1,41 @@
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardHeader } from "../components/ui/card";
+import { trackLstEvent } from "../lib/umami.utils";
+
+export const Route = createFileRoute("/forbidden")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const click = () => {
+		trackLstEvent("forbidden_click", {
+			module: "forbidden",
+			action: "click",
+			label: "redirect",
+			page: window.location.pathname,
+		});
+		router.navigate({ to: "/", replace: true });
+	};
+	const router = useRouter();
+	return (
+		<div className="flex items-center justify-center bg-background text-foreground">
+			<Card>
+				<CardHeader>
+					<p className="text-2xl">Oops, you shouldn't have done that</p>
+				</CardHeader>
+				<CardContent>
+					<p className="mt-3 text-muted-foreground">
+						Your have tried to go to a page that you are not authorized to be
+						at.
+					</p>
+				</CardContent>
+				<div className=" flex justify-center">
+					<Button className="w-64" onClick={click}>
+						Go Back
+					</Button>
+				</div>
+			</Card>
+		</div>
+	);
+}

frontend/src/routes/index.tsx

@@ -1,9 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import z from "zod";
-
+import { Button } from "../components/ui/button";
 import { useSession } from "../lib/auth-client";
-import { trackLstEvent } from "../lib/umami.utils";
+import { runtimeConfig, trackLstEvent } from "../lib/umami.utils";
 
 export const Route = createFileRoute("/")({
 	validateSearch: z.object({
@@ -14,7 +14,7 @@ export const Route = createFileRoute("/")({
 });
 
 function Index() {
-	const { isPending } = useSession();
+	const { data: session, isPending } = useSession();
 
 	if (isPending)
 		return <div className="flex justify-center mt-10">Loading...</div>;
@@ -38,6 +38,16 @@ function Index() {
 		});
 	};
 
+	const checkConfig = () => {
+		console.log(runtimeConfig);
+		trackLstEvent("config_click", {
+			module: "app",
+			action: "click",
+			label: "configCheck",
+			page: window.location.pathname,
+		});
+	};
+
 	return (
 		<div className="flex justify-center m-10 flex-col">
 			<h3 className="w-2xl text-3xl">Welcome Lst - V3</h3>
@@ -55,7 +65,7 @@ function Index() {
 						<strong>Click</strong>
 					</b>
 				</a>{" "}
-				<button onClick={click}>
+				<button onClick={click} type="button">
 					<a
 						href={`https://www.youtube.com/watch?v=dQw4w9WgXcQ`}
 						target="_blank"
@@ -67,6 +77,9 @@ function Index() {
 					</a>
 				</button>
 			</p>
+			{session && session.user.role === "systemAdmin" && (
+				<Button onClick={checkConfig}>Check config</Button>
+			)}
 		</div>
 	);
 }