Add custom error screen

apps/dashboard/src/components/layouts/error-screen.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@quickhub/ui/components/button";
+import { type ErrorComponentProps, useRouter } from "@tanstack/react-router";
+import { AlertCircleIcon, RefreshCwIcon } from "lucide-react";
+
+export function ErrorScreen({ reset }: ErrorComponentProps) {
+	const router = useRouter();
+
+	return (
+		<div className="flex min-h-dvh items-center justify-center px-6 py-16">
+			<div className="mx-auto flex w-full max-w-md flex-col items-center gap-6 text-center">
+				<div className="flex size-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive">
+					<AlertCircleIcon size={24} strokeWidth={1.75} />
+				</div>
+
+				<div className="flex flex-col gap-1.5">
+					<h1 className="text-lg font-semibold tracking-tight">
+						Something went wrong
+					</h1>
+					<p className="text-sm text-muted-foreground text-balance">
+						An unexpected error occurred. Please try again or refresh the page.
+					</p>
+				</div>
+
+				<div className="flex items-center gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						iconLeft={<RefreshCwIcon />}
+						onClick={() => {
+							reset();
+							router.invalidate();
+						}}
+					>
+						Try again
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/dashboard/src/routes/__root.tsx

@@ -9,6 +9,7 @@ import {
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { Agentation } from "agentation";
 import { ThemeProvider } from "next-themes";
+import { ErrorScreen } from "#/components/layouts/error-screen";
 
 import appCss from "../styles.css?url";
 
@@ -24,6 +25,7 @@ export const Route = createRootRouteWithContext<{
 		links: [{ rel: "stylesheet", href: appCss }],
 	}),
 	component: RootComponent,
+	errorComponent: ErrorScreen,
 	shellComponent: RootDocument,
 });
 

apps/dashboard/src/routes/_protected.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { DashboardLayout } from "#/components/layouts/dashboard-layout";
+import { ErrorScreen } from "#/components/layouts/error-screen";
 import { getSession } from "#/lib/auth.functions";
 
 export const Route = createFileRoute("/_protected")({
@@ -14,4 +15,5 @@ export const Route = createFileRoute("/_protected")({
 		return { user: session.user, session: session.session };
 	},
 	component: DashboardLayout,
+	errorComponent: ErrorScreen,
 });