Changed error boundary to cover both full hub and disaptch app

apps/dispatch/app/_components/Error.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+export const Error = ({ statusCode, title }: { statusCode: number; title: string }) => {
+	return (
+		<div className="flex-1 flex items-center justify-center h-full">
+			<div className="rounded-2xl bg-base-300 p-8 text-center max-w-md w-full">
+				<h1 className="text-6xl font-bold text-red-500">{statusCode}</h1>
+				<p className="text-xl font-semibold mt-4">Oh nein! Ein Fehler ist aufgetreten.</p>
+				<p className="text-gray-600 mt-2">{title || "Ein unerwarteter Fehler ist aufgetreten."}</p>
+				<button onClick={() => window.location.reload()} className="btn btn-dash my-2">
+					Refresh Page
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export const ErrorFallback = ({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) => {
+	useEffect(() => {
+		// Log the error to an error reporting service
+		console.error(error);
+	}, [error]);
+
+	return (
+		<div>
+			<h2>Something went wrong!</h2>
+			<button
+				onClick={
+					// Attempt to recover by trying to re-render the segment
+					() => reset()
+				}
+			>
+				Try again
+			</button>
+		</div>
+	);
+};

apps/dispatch/app/_components/ErrorBoundary.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ErrorBoundary } from "react-error-boundary";
+import { Error as ErrorComp } from "./Error";
+
+export const CustomErrorBoundary = ({ children }: { children?: React.ReactNode }) => {
+	return (
+		<ErrorBoundary
+			fallbackRender={({ error }) => {
+				console.log(error);
+				let errorTest;
+				let errorCode = 500;
+				if ("statusCode" in error) {
+					errorCode = (error as any).statusCode;
+				}
+				if ("message" in error || error instanceof Error) {
+					errorTest = (error as any).message;
+				} else if (typeof error === "string") {
+					errorTest = error;
+				} else {
+					errorTest = "Ein unerwarteter Fehler ist aufgetreten.";
+				}
+				return <ErrorComp title={errorTest} statusCode={errorCode} />;
+			}}
+		>
+			{children}
+		</ErrorBoundary>
+	);
+};

apps/dispatch/app/_components/map/Map.tsx

@@ -14,7 +14,6 @@ import { Map as TMap } from "leaflet";
 const Map = () => {
 	const ref = useRef<TMap | null>(null);
 	const { map, setMap } = useMapStore();
-
 	useEffect(() => {
 		// Sync map zoom and center with the map store
 		if (ref.current) {

apps/dispatch/app/api/auth/[...nextauth]/auth.ts

@@ -70,9 +70,25 @@ export const options: AuthOptions = {
 			return token;
 		},
 		session: async ({ session, user, token }) => {
+			const dbUser = await prisma.user.findUnique({
+				where: {
+					id: token?.sub,
+				},
+			});
+			if (!dbUser) {
+				return {
+					...session,
+					user: {
+						name: null,
+						email: null,
+						image: null,
+					},
+					expires: new Date().toISOString(),
+				};
+			}
 			return {
 				...session,
-				user: token,
+				user: dbUser,
 			};
 		},
 	},

apps/dispatch/app/dispatch/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Navbar from "./_components/navbar/Navbar";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
+import { Error } from "_components/Error";
 
 export const metadata: Metadata = {
 	title: "VAR v2: Disponent",
@@ -14,9 +15,12 @@ export default async function RootLayout({
 	children: React.ReactNode;
 }>) {
 	const session = await getServerSession();
+
 	if (!session) {
 		redirect("/login");
 	}
+	if (!session.user.permissions.includes("DISPO"))
+		return <Error title="Zugriff verweigert" statusCode={403} />;
 	return (
 		<>
 			<Navbar />

apps/dispatch/app/layout.tsx

@@ -5,6 +5,9 @@ import { NextAuthSessionProvider } from "./_components/AuthSessionProvider";
 import { getServerSession } from "./api/auth/[...nextauth]/auth";
 import { Toaster } from "react-hot-toast";
 import { QueryProvider } from "_components/QueryProvider";
+import { Error as ErrorComp } from "_components/Error";
+import { ErrorBoundary } from "react-error-boundary";
+import { CustomErrorBoundary } from "_components/ErrorBoundary";
 
 const geistSans = localFont({
 	src: "./fonts/GeistVF.woff",
@@ -47,9 +50,7 @@ export default async function RootLayout({
 					reverseOrder={false}
 				/>
 				<QueryProvider>
-					<NextAuthSessionProvider session={session}>
-						{children}
-					</NextAuthSessionProvider>
+					<NextAuthSessionProvider session={session}>{children}</NextAuthSessionProvider>
 				</QueryProvider>
 			</body>
 		</html>

apps/dispatch/app/pilot/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Navbar from "./_components/navbar/Navbar";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
+import { Error } from "_components/Error";
 
 export const metadata: Metadata = {
 	title: "VAR v2: Pilot",
@@ -14,9 +15,12 @@ export default async function RootLayout({
 	children: React.ReactNode;
 }>) {
 	const session = await getServerSession();
+
 	if (!session) {
 		redirect("/login");
 	}
+	if (!session.user.permissions.includes("PILOT"))
+		return <Error title="Zugriff verweigert" statusCode={403} />;
 	return (
 		<>
 			<Navbar />

apps/dispatch/package.json

@@ -36,6 +36,7 @@
 		"postcss": "^8.5.1",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
+		"react-error-boundary": "^5.0.0",
 		"react-hook-form": "^7.54.2",
 		"react-hot-toast": "^2.5.2",
 		"react-leaflet": "^5.0.0-rc.2",