Dispatch Router-Struktur; AddPenalty Layout gefixed

2025-06-27 15:52:28 -07:00
parent 782ba7669d
commit 91ed14ac08
47 changed files with 168 additions and 179 deletions
--- a/apps/dispatch/app/(app)/dispatch/_components/navbar/Navbar.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/navbar/Navbar.tsx
@@ -0,0 +1,49 @@
+import { Connection } from "./_components/Connection";
+/* import { ThemeSwap } from "./_components/ThemeSwap"; */
+import { Audio } from "../../../../_components/Audio/Audio";
+/* import { useState } from "react"; */
+import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { Settings } from "_components/navbar/Settings";
+import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
+import AdminPanel from "_components/navbar/AdminPanel";
+import { getServerSession } from "api/auth/[...nextauth]/auth";
+
+export default async function Navbar() {
+	const session = await getServerSession();
+
+	return (
+		<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
+			<div className="flex items-center gap-2">
+				<ModeSwitchDropdown />
+				{session?.user.permissions.includes("ADMIN_KICK") && <AdminPanel />}
+			</div>
+			<div className="flex items-center gap-5">
+				<div className="flex items-center gap-2">
+					<Audio />
+				</div>
+				<div className="flex items-center">
+					<Connection />
+				</div>
+				{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
+				<div className="flex items-center">
+					<Settings />
+					<Link
+						href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<button className="btn btn-ghost">
+							<ExternalLinkIcon className="w-4 h-4" /> HUB
+						</button>
+					</Link>
+					<Link href={"/logout"}>
+						<button className="btn btn-ghost">
+							<ExitIcon className="w-4 h-4" />
+						</button>
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/dispatch/app/(app)/dispatch/_components/navbar/_components/Connection.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/navbar/_components/Connection.tsx
@@ -0,0 +1,162 @@
+"use client";
+import { useSession } from "next-auth/react";
+import { useDispatchConnectionStore } from "../../../../../_store/dispatch/connectionStore";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-hot-toast";
+import { useMutation } from "@tanstack/react-query";
+import { Prisma } from "@repo/db";
+import { changeDispatcherAPI } from "_querys/dispatcher";
+
+export const ConnectionBtn = () => {
+	const modalRef = useRef<HTMLDialogElement>(null);
+	const connection = useDispatchConnectionStore((state) => state);
+	const [form, setForm] = useState({
+		logoffTime: "",
+		selectedZone: "LST_01",
+	});
+	const changeDispatcherMutation = useMutation({
+		mutationFn: ({ id, data }: { id: number; data: Prisma.ConnectedDispatcherUpdateInput }) =>
+			changeDispatcherAPI(id, data),
+	});
+	const [logoffDebounce, setLogoffDebounce] = useState<NodeJS.Timeout | null>(null);
+	const session = useSession();
+	const uid = session.data?.user?.id;
+	if (!uid) return null;
+
+	// useEffect für die Logoff-Zeit
+	useEffect(() => {
+		if (logoffDebounce) clearTimeout(logoffDebounce);
+
+		const timeout = setTimeout(async () => {
+			if (!form.logoffTime || !connection.connectedDispatcher) return;
+			await changeDispatcherMutation.mutateAsync({
+				id: connection.connectedDispatcher?.id,
+				data: {
+					esimatedLogoutTime: new Date(
+						new Date().toDateString() + " " + form.logoffTime,
+					).toISOString(),
+				},
+			});
+			toast.success("Änderung gespeichert!");
+			modalRef.current?.close();
+		}, 2000);
+
+		setLogoffDebounce(timeout);
+
+		// Cleanup function
+		return () => {
+			if (logoffDebounce) clearTimeout(logoffDebounce);
+		};
+	}, [form.logoffTime, connection.connectedDispatcher]);
+
+	useEffect(() => {
+		// Disconnect the socket when the component unmounts
+		return () => {
+			connection.disconnect();
+		};
+	}, [connection.disconnect]);
+
+	return (
+		<div className="rounded-box bg-base-200 flex justify-center items-center gap-2 p-1">
+			{connection.message.length > 0 && (
+				<span className="mx-2 text-error">{connection.message}</span>
+			)}
+
+			{connection.status == "connected" ? (
+				<button
+					className="btn btn-sm btn-soft btn-success"
+					type="submit"
+					onSubmit={() => false}
+					onClick={() => {
+						modalRef.current?.showModal();
+					}}
+				>
+					Verbunden
+				</button>
+			) : (
+				<button
+					type="submit"
+					onSubmit={() => false}
+					onClick={() => {
+						modalRef.current?.showModal();
+					}}
+					className="btn btn-sm btn-soft btn-info"
+				>
+					{connection.status == "disconnected" ? "Verbinden" : connection.status}
+				</button>
+			)}
+
+			<dialog ref={modalRef} className="modal">
+				<div className="modal-box flex flex-col items-center justify-center">
+					{connection.status == "connected" ? (
+						<h3 className="text-lg font-bold mb-5">
+							Verbunden als <span className="text-info">&lt;{connection.selectedZone}&gt;</span>
+						</h3>
+					) : (
+						<h3 className="text-lg font-bold mb-5">Als Disponent anmelden</h3>
+					)}
+					<fieldset className="fieldset w-full">
+						<label className="floating-label w-full text-base">
+							<span>Logoff Zeit (UTC+1)</span>
+							<input
+								onChange={(e) => {
+									const value = e.target.value;
+									setForm({
+										...form,
+										logoffTime: value,
+									});
+								}}
+								value={form.logoffTime}
+								type="time"
+								className="input w-full"
+							/>
+						</label>
+						{connection.status == "disconnected" && (
+							<p className="fieldset-label">Du kannst diese Zeit später noch anpassen.</p>
+						)}
+					</fieldset>
+					<div className="modal-action flex justify-between w-full">
+						<form method="dialog" className="w-full flex justify-between">
+							<button className="btn btn-soft">Zurück</button>
+							{connection.status == "connected" ? (
+								<button
+									className="btn btn-soft btn-error"
+									type="submit"
+									onSubmit={() => false}
+									onClick={() => {
+										connection.disconnect();
+									}}
+								>
+									Verbindung Trennen
+								</button>
+							) : (
+								<button
+									type="submit"
+									onSubmit={() => false}
+									onClick={() => {
+										connection.connect(uid, form.selectedZone, form.logoffTime);
+									}}
+									className="btn btn-soft btn-info"
+								>
+									{connection.status == "disconnected" ||
+									// eslint-disable-next-line @typescript-eslint/no-explicit-any
+									(connection.status as any) === ""
+										? "Verbinden"
+										: connection.status}
+								</button>
+							)}
+						</form>
+					</div>
+				</div>
+			</dialog>
+		</div>
+	);
+};
+
+export const Connection = () => {
+	return (
+		<div>
+			<ConnectionBtn />
+		</div>
+	);
+};
--- a/apps/dispatch/app/(app)/dispatch/_components/navbar/_components/ThemeSwap.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/navbar/_components/ThemeSwap.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+
+interface ThemeSwapProps {
+	isDark: boolean;
+	toggleTheme: () => void;
+}
+
+export const ThemeSwap: React.FC<ThemeSwapProps> = ({
+	isDark,
+	toggleTheme,
+}) => {
+	return (
+		<label className="swap swap-rotate">
+			<input
+				type="checkbox"
+				className="theme-controller"
+				checked={isDark}
+				onChange={toggleTheme}
+			/>
+			<MoonIcon className="swap-off h-5 w-5 fill-current" />
+			<SunIcon className="swap-on h-5 w-5 fill-current" />
+		</label>
+	);
+};
--- a/apps/dispatch/app/(app)/dispatch/_components/pannel/MissionForm.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/pannel/MissionForm.tsx
@@ -0,0 +1,522 @@
+"use client";
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { BellRing, BookmarkPlus, Radio } from "lucide-react";
+import { Select } from "_components/Select";
+import { KEYWORD_CATEGORY, Mission, missionType, Prisma } from "@repo/db";
+import {
+	JsonValueType,
+	MissionOptionalDefaults,
+	MissionOptionalDefaultsSchema,
+} from "@repo/db/zod";
+import { usePannelStore } from "_store/pannelStore";
+import { useSession } from "next-auth/react";
+import { toast } from "react-hot-toast";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	createMissionAPI,
+	editMissionAPI,
+	sendMissionAPI,
+	startHpgValidation,
+} from "_querys/missions";
+import { getKeywordsAPI } from "_querys/keywords";
+import { getStationsAPI } from "_querys/stations";
+import { useMapStore } from "_store/mapStore";
+import { getConnectedAircraftsAPI } from "_querys/aircrafts";
+import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
+import { selectRandomHPGMissionSzenery } from "_helpers/selectRandomHPGMission";
+import { AxiosError } from "axios";
+import { cn } from "@repo/shared-components";
+
+export const MissionForm = () => {
+	const { editingMissionId, setEditingMission } = usePannelStore();
+	const queryClient = useQueryClient();
+	const { setSearchElements, searchElements, setContextMenu } = useMapStore((s) => s);
+
+	const { data: keywords } = useQuery({
+		queryKey: ["keywords"],
+		queryFn: () => getKeywordsAPI(),
+	});
+
+	const { data: aircrafts } = useQuery({
+		queryKey: ["aircrafts"],
+		queryFn: getConnectedAircraftsAPI,
+		refetchInterval: 10000,
+	});
+
+	const { data: stations } = useQuery({
+		queryKey: ["stations"],
+		queryFn: () => getStationsAPI(),
+	});
+
+	const createMissionMutation = useMutation({
+		mutationFn: createMissionAPI,
+		mutationKey: ["missions"],
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: ["missions"],
+			});
+		},
+	});
+
+	const editMissionMutation = useMutation({
+		mutationFn: ({ id, mission }: { id: number; mission: Partial<Prisma.MissionUpdateInput> }) =>
+			editMissionAPI(id, mission),
+		mutationKey: ["missions"],
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: ["missions"],
+			});
+		},
+	});
+
+	const sendAlertMutation = useMutation({
+		mutationKey: ["missions"],
+		mutationFn: (id: number) => sendMissionAPI(id, {}),
+		onError: (error) => {
+			console.error(error);
+			toast.error("Fehler beim Alarmieren");
+		},
+		onSuccess: (data) => {
+			toast.success(data.message);
+			queryClient.invalidateQueries({
+				queryKey: ["missions"],
+			});
+		},
+	});
+
+	const session = useSession();
+	const defaultFormValues = React.useMemo(
+		() =>
+			({
+				createdUserId: session.data?.user.id,
+				type: "primär",
+				addressOSMways: [],
+				missionKeywordAbbreviation: null as any,
+				missionKeywordCategory: null as any,
+				missionKeywordName: null as any,
+				hpgAmbulanceState: "NOT_REQUESTED",
+				hpgFireEngineState: "NOT_REQUESTED",
+				hpgPoliceState: "NOT_REQUESTED",
+				hpgMissionString: null,
+				hpgSelectedMissionString: null,
+				hpg: null,
+				missionLog: [],
+			}) as Partial<MissionOptionalDefaults>,
+		[session.data?.user.id],
+	);
+
+	const form = useForm<MissionOptionalDefaults>({
+		resolver: zodResolver(MissionOptionalDefaultsSchema),
+		defaultValues: defaultFormValues,
+	});
+	const { missionFormValues, setOpen } = usePannelStore((state) => state);
+
+	const validationRequired = HPGValidationRequired(
+		form.watch("missionStationIds"),
+		aircrafts,
+		form.watch("hpgMissionString"),
+	);
+
+	useEffect(() => {
+		if (session.data?.user.id) {
+			form.setValue("createdUserId", session.data.user.id);
+		}
+	}, [session.data?.user.id, form]);
+
+	useEffect(() => {
+		form.setValue(
+			"addressOSMways",
+			searchElements.filter((e) => e.isSelected) as unknown as JsonValueType[],
+		);
+	}, [searchElements, form, missionFormValues]);
+
+	useEffect(() => {
+		if (missionFormValues) {
+			if (Object.keys(missionFormValues).length === 0) {
+				form.reset();
+				return;
+			}
+			for (const key in missionFormValues) {
+				if (key === "addressOSMways") continue; // Skip addressOSMways as it is handled separately
+				form.setValue(
+					key as keyof MissionOptionalDefaults,
+					missionFormValues[key as keyof MissionOptionalDefaults],
+				);
+			}
+		}
+	}, [missionFormValues, form, defaultFormValues]);
+
+	const saveMission = async (
+		mission: MissionOptionalDefaults,
+		{ alertWhenValid = false, createNewMission = false } = {},
+	) => {
+		const [hpgSzenario, hpgSzenarioCode] = mission.hpgMissionString?.split(":") || [];
+		const szenarioCode = selectRandomHPGMissionSzenery(hpgSzenarioCode || "");
+		let newMission: Mission;
+		if (createNewMission) {
+			newMission = await createMissionMutation.mutateAsync({
+				...(mission as unknown as Prisma.MissionCreateInput),
+				missionAdditionalInfo:
+					!mission.missionAdditionalInfo.length && hpgSzenario
+						? `HPG-Szenario: ${hpgSzenario}`
+						: mission.missionAdditionalInfo,
+				hpgSelectedMissionString: szenarioCode,
+			});
+			if (validationRequired) {
+				await startHpgValidation(newMission.id, {
+					alertWhenValid,
+				}).catch((error) => {
+					toast.error(`Fehler beim Starten der HPG-Validierung: ${error.message}`);
+				});
+			} else if (alertWhenValid) {
+				await sendAlertMutation.mutateAsync(newMission.id);
+			}
+			return newMission;
+		} else {
+			newMission = await editMissionMutation.mutateAsync({
+				id: Number(editingMissionId),
+				mission: {
+					...(mission as unknown as Prisma.MissionCreateInput),
+					state: undefined, // state should not be updated
+					missionAdditionalInfo:
+						!mission.missionAdditionalInfo.length && hpgSzenario
+							? `HPG-Szenario: ${hpgSzenario}`
+							: mission.missionAdditionalInfo,
+					hpgSelectedMissionString: szenarioCode,
+				},
+			});
+		}
+		if (validationRequired) {
+			await startHpgValidation(newMission.id, {}).catch((error) => {
+				toast.error(`Fehler beim Starten der HPG-Validierung: ${error.message}`);
+			});
+		}
+		return newMission;
+	};
+
+	return (
+		<form className="space-y-4">
+			{/* Koorinaten Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Koordinaten</h2>
+				<div className="grid grid-cols-2 gap-4">
+					<input
+						type="text"
+						{...form.register("addressLat")}
+						className="input input-sm input-neutral input-bordered w-full"
+						disabled
+					/>
+					<input
+						type="text"
+						{...form.register("addressLng")}
+						className="input input-sm input-neutral input-bordered w-full"
+						disabled
+					/>
+				</div>
+				{(form.formState.errors.addressLat || form.formState.errors.addressLng) && (
+					<p className="text-error">
+						Bitte wähle eine Postion übder das Context-Menu über der Karte aus.
+					</p>
+				)}
+			</div>
+
+			{/* Adresse Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Adresse</h2>
+				<input
+					type="text"
+					{...form.register("addressStreet")}
+					placeholder="Straße"
+					className="input input-primary input-bordered w-full mb-4"
+				/>
+				<div className="grid grid-cols-2 gap-4">
+					<input
+						type="text"
+						{...form.register("addressCity")}
+						placeholder="Stadt"
+						className="input input-primary input-bordered w-full"
+					/>
+					<input
+						type="text"
+						{...form.register("addressZip")}
+						placeholder="PLZ"
+						className="input input-primary input-bordered w-full"
+					/>
+				</div>
+				<input
+					type="text"
+					{...form.register("addressAdditionalInfo")}
+					placeholder="Zusätzliche Adressinformationen"
+					className="input input-primary input-bordered w-full mt-4"
+				/>
+			</div>
+
+			{/* Rettungsmittel Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Rettungsmittel</h2>
+				<Select
+					name="missionStationIds"
+					label={""}
+					placeholder="Wähle ein oder mehrere Rettungsmittel aus"
+					isMulti
+					form={form}
+					options={stations
+						?.sort((a, b) => {
+							const aHasAircraft = aircrafts?.some((ac) => ac.stationId === a.id) ? 0 : 1;
+							const bHasAircraft = aircrafts?.some((ac) => ac.stationId === b.id) ? 0 : 1;
+							return aHasAircraft - bHasAircraft;
+						})
+						.map((s) => ({
+							label: (
+								<span className="flex items-center gap-2">
+									{aircrafts?.some((a) => a.stationId === s.id) && (
+										<Radio className="text-success" size={15} />
+									)}
+									{s.bosCallsign}
+								</span>
+							),
+							value: s.id,
+						}))}
+				/>
+			</div>
+
+			{/* Einsatzdaten Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Einsatzdaten</h2>
+				<select
+					{...form.register("type")}
+					className="select select-primary select-bordered w-full mb-4"
+					onChange={(e) => {
+						form.setValue("type", e.target.value as missionType);
+						if (e.target.value === "sekundär") {
+							form.setValue("missionKeywordName", KEYWORD_CATEGORY.Z_SONSTIGES);
+							form.setValue("missionKeywordAbbreviation", "VL_S");
+							form.setValue("hpgMissionString", "Verlegung:4_1_1_1-4_1");
+						} else {
+							form.setValue("missionKeywordAbbreviation", null as any);
+							form.setValue("hpgMissionString", null);
+						}
+					}}
+				>
+					<option value="primär">PRIMÄR</option>
+					<option value="sekundär">SEKUNDÄR</option>
+				</select>
+				{form.watch("type") === "primär" && (
+					<>
+						<select
+							{...form.register("missionKeywordCategory")}
+							className="select select-primary select-bordered w-full mb-4"
+							onChange={(e) => {
+								form.setValue("missionKeywordCategory", e.target.value as string);
+								form.setValue("missionKeywordName", null as any);
+								form.setValue("missionKeywordAbbreviation", null as any);
+								form.setValue("hpgMissionString", "");
+							}}
+							value={form.watch("missionKeywordCategory") || "please_select"}
+						>
+							<option disabled value="please_select">
+								Einsatz Kategorie auswählen...
+							</option>
+							{Object.keys(KEYWORD_CATEGORY).map((use) => (
+								<option key={use} value={use}>
+									{use}
+								</option>
+							))}
+						</select>
+						{form.formState.errors.missionKeywordCategory && (
+							<p className="text-error text-sm mb-4">Bitte wähle eine Kategorie aus.</p>
+						)}
+						<select
+							{...form.register("missionKeywordAbbreviation")}
+							className="select select-primary select-bordered w-full mb-4"
+							onChange={(e) => {
+								const keyword = keywords?.find((k) => k.abreviation === e.target.value);
+								form.setValue("missionKeywordName", keyword?.name || (null as any));
+								form.setValue("missionKeywordAbbreviation", keyword?.abreviation || (null as any));
+								form.setValue("hpgMissionString", null);
+							}}
+							value={form.watch("missionKeywordAbbreviation") || "please_select"}
+						>
+							<option disabled value={"please_select"}>
+								Einsatzstichwort auswählen...
+							</option>
+							{keywords &&
+								keywords
+									.filter((k) => k.category === form.watch("missionKeywordCategory"))
+									.map((keyword) => (
+										<option key={keyword.id} value={keyword.abreviation}>
+											{keyword.name}
+										</option>
+									))}
+						</select>
+						{form.formState.errors.missionKeywordAbbreviation && (
+							<p className="text-error text-sm mb-4">Bitte wähle ein Stichwort aus.</p>
+						)}
+						<div className="mb-4">
+							<select
+								{...form.register("hpgMissionString")}
+								onChange={(e) => {
+									form.setValue("hpgMissionString", e.target.value);
+									const [name] = e.target.value.split(":");
+									const allHpgMissionTypes = keywords?.map((k) => k.hpgMissionTypes).flat();
+									if (
+										!form.watch("missionAdditionalInfo") ||
+										allHpgMissionTypes?.find((t) => {
+											const [hpgName] = t.split(":");
+											return hpgName === form.watch("missionAdditionalInfo");
+										})
+									) {
+										form.setValue("missionAdditionalInfo", name || "");
+									}
+								}}
+								className="select select-primary select-bordered w-full mb-2"
+								value={form.watch("hpgMissionString") || "please_select"}
+							>
+								<option disabled value="please_select">
+									Einsatz Szenario auswählen...
+								</option>
+								{keywords &&
+									keywords
+										.find((k) => k.name === form.watch("missionKeywordName"))
+										?.hpgMissionTypes?.map((missionString) => {
+											const [name] = missionString.split(":");
+											return (
+												<option key={missionString} value={missionString}>
+													{name}
+												</option>
+											);
+										})}
+							</select>
+							{validationRequired && (
+								<p className="text-sm text-warning">Szenario wird vor Alarmierung HPG-Validiert.</p>
+							)}
+						</div>
+					</>
+				)}
+				<textarea
+					{...form.register("missionAdditionalInfo")}
+					placeholder="Einsatzinformationen"
+					className="textarea textarea-primary textarea-bordered w-full mb-4"
+				/>
+				{form.watch("type") === "sekundär" && (
+					<input
+						{...form.register("addressMissionDestination")}
+						type="text"
+						placeholder="Zielkrankenhaus"
+						className="input input-primary input-bordered w-full"
+					/>
+				)}
+			</div>
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Patienteninformationen</h2>
+				<textarea
+					{...form.register("missionPatientInfo")}
+					placeholder="Patienteninformationen"
+					className="textarea textarea-primary textarea-bordered w-full"
+				/>
+			</div>
+
+			<p
+				className={cn("text-sm text-gray-500", form.watch("addressOSMways").length && "text-info")}
+			>
+				In diesem Einsatz gibt es {form.watch("addressOSMways").length} Gebäude
+			</p>
+
+			<div className="form-control min-h-[140px]">
+				<div className="flex gap-2">
+					{editingMissionId ? (
+						<button
+							type="button"
+							className="btn btn-primary flex-1"
+							onClick={form.handleSubmit(async (mission: MissionOptionalDefaults) => {
+								try {
+									console.log("Saving mission", mission.addressOSMways);
+									const newMission = await saveMission(mission);
+									toast.success(`Einsatz ${newMission.id} erfolgreich aktualisiert`);
+									setSearchElements([]); // Reset search elements
+									setEditingMission(null); // Reset editing state
+									form.reset(); // Reset the form
+									setOpen(false);
+								} catch (error) {
+									if (error instanceof AxiosError) {
+										toast.error(
+											`Fehler beim Erstellen des Einsatzes: ${error.response?.data.error}`,
+										);
+									} else {
+										toast.error(`Fehler beim Erstellen des Einsatzes: ${(error as Error).message}`);
+									}
+								}
+							})}
+						>
+							Änderungen speichern
+						</button>
+					) : (
+						<>
+							<button
+								type="submit"
+								className="btn btn-warning"
+								onClick={form.handleSubmit(async (mission: MissionOptionalDefaults) => {
+									try {
+										const newMission = await saveMission(mission, {
+											createNewMission: true,
+											alertWhenValid: true,
+										});
+
+										setSearchElements([]); // Reset search elements
+										setContextMenu(null);
+										toast.success(`Einsatz ${newMission.publicId} erstellt`);
+										form.reset();
+										setOpen(false);
+									} catch (error) {
+										if (error instanceof AxiosError) {
+											toast.error(
+												`Fehler beim Erstellen des Einsatzes: ${error.response?.data.error}`,
+											);
+										} else {
+											toast.error(
+												`Fehler beim Erstellen des Einsatzes: ${(error as Error).message}`,
+											);
+										}
+									}
+								})}
+							>
+								<BellRing className="h-4 w-4" /> Alarmieren
+							</button>
+							<button
+								type="submit"
+								className="btn btn-primary flex-1"
+								onClick={form.handleSubmit(async (mission: MissionOptionalDefaults) => {
+									try {
+										const newMission = await saveMission(mission, {
+											createNewMission: true,
+										});
+
+										setSearchElements([]); // Reset search elements
+										setContextMenu(null);
+										toast.success(`Einsatz ${newMission.publicId} erstellt`);
+										form.reset();
+										setOpen(false);
+									} catch (error) {
+										if (error instanceof AxiosError) {
+											toast.error(
+												`Fehler beim Erstellen des Einsatzes: ${error.response?.data.error}`,
+											);
+										} else {
+											toast.error(
+												`Fehler beim Erstellen des Einsatzes: ${(error as Error).message}`,
+											);
+										}
+									}
+								})}
+							>
+								<BookmarkPlus className="h-5 w-5" /> Einsatz vorbereiten
+							</button>
+						</>
+					)}
+				</div>
+			</div>
+		</form>
+	);
+};
--- a/apps/dispatch/app/(app)/dispatch/_components/pannel/Pannel.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/pannel/Pannel.tsx
@@ -0,0 +1,67 @@
+import { usePannelStore } from "_store/pannelStore";
+import { cn } from "@repo/shared-components";
+import { MissionForm } from "./MissionForm";
+import { Rss, Trash2Icon } from "lucide-react";
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getMissionsAPI } from "_querys/missions";
+
+export const Pannel = () => {
+	const { setOpen, setMissionFormValues } = usePannelStore();
+	const { editingMissionId, setEditingMission, missionFormValues } = usePannelStore();
+	const missions = useQuery({
+		queryKey: ["missions"],
+		queryFn: () =>
+			getMissionsAPI({
+				OR: [{ state: "draft" }, { state: "running" }],
+			}),
+	});
+
+	useEffect(() => {
+		if (editingMissionId && missionFormValues) {
+			const mission = missions.data?.find((mission) => mission.id === missionFormValues.id);
+			if (!mission) {
+				setEditingMission(null);
+				setMissionFormValues({});
+				setOpen(false);
+			}
+		}
+	}, [missions, setMissionFormValues, setEditingMission, setOpen, missionFormValues]);
+
+	return (
+		<div className={cn("flex-1 max-w-[600px] z-9999999")}>
+			<div className="bg-base-100 min-h-screen h-full max-h-screen w-full overflow-auto">
+				<div className="flex flex-row justify-between items-center p-4">
+					<h1 className="text-xl font-bold flex items-center gap-2">
+						<Rss /> {editingMissionId ? "Einsatz bearbeiten" : "Neuer Einsatz"}
+					</h1>
+					<div>
+						<button
+							className="btn btn-ghost btn-sm mr-2 btn-warning"
+							onClick={() => {
+								setMissionFormValues({});
+								setEditingMission(null);
+							}}
+						>
+							<Trash2Icon size={18} />
+						</button>
+						<button
+							className="btn"
+							onClick={() => {
+								setOpen(false);
+								setEditingMission(null);
+								setMissionFormValues({});
+							}}
+						>
+							Abbrechen
+						</button>
+					</div>
+				</div>
+				<div className="divider m-0" />
+				<div className="p-4">
+					<MissionForm />
+				</div>
+			</div>
+		</div>
+	);
+};
--- a/apps/dispatch/app/(app)/dispatch/layout.tsx
+++ b/apps/dispatch/app/(app)/dispatch/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import Navbar from "./_components/navbar/Navbar";
+import { getServerSession } from "api/auth/[...nextauth]/auth";
+import { Error } from "_components/Error";
+
+export const metadata: Metadata = {
+	title: "VAR: Disponent",
+	description: "Die neue VAR Leitstelle.",
+};
+
+export default async function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	const session = await getServerSession();
+
+	if (!session?.user.permissions.includes("DISPO"))
+		return <Error title="Zugriff verweigert" statusCode={403} />;
+
+	return (
+		<>
+			<Navbar />
+			{children}
+		</>
+	);
+}
--- a/apps/dispatch/app/(app)/dispatch/page.tsx
+++ b/apps/dispatch/app/(app)/dispatch/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { Pannel } from "(app)/dispatch/_components/pannel/Pannel";
+import { usePannelStore } from "_store/pannelStore";
+import { cn } from "@repo/shared-components";
+import dynamic from "next/dynamic";
+import { Chat } from "../../_components/left/Chat";
+import { Report } from "../../_components/left/Report";
+import { SituationBoard } from "_components/left/SituationBoard";
+
+const Map = dynamic(() => import("../../_components/map/Map"), { ssr: false });
+
+const DispatchPage = () => {
+	const { isOpen } = usePannelStore();
+	/* return null; */
+	return (
+		<div className="relative flex-1 flex transition-all duration-500 ease w-full">
+			{/* <MapToastCard2 /> */}
+			<div className="flex flex-1 relative">
+				<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
+					<Chat />
+					<div className="mt-2">
+						<Report />
+					</div>
+				</div>
+				<div className="absolute left-0 top-19/20 transform -translate-y-1/2 pl-4 z-999999">
+					<div className="flex items-center justify-between gap-4">
+						<SituationBoard />
+					</div>
+				</div>
+				<Map />
+			</div>
+			<div
+				className={cn(
+					"absolute right-0 w-[500px] z-999 transition-transform",
+					isOpen ? "translate-x-0" : "translate-x-full",
+				)}
+			>
+				<Pannel />
+			</div>
+		</div>
+	);
+};
+
+DispatchPage.displayName = "DispatchPage";
+
+export default DispatchPage;
--- a/apps/dispatch/app/(app)/dispatch/socket.ts
+++ b/apps/dispatch/app/(app)/dispatch/socket.ts
@@ -0,0 +1,7 @@
+"use client";
+import { io, Socket } from "socket.io-client";
+
+export const dispatchSocket: Socket = io(process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL, {
+	autoConnect: false,
+	transports: ["websocket"],
+});
--- a/apps/dispatch/app/(app)/layout.tsx
+++ b/apps/dispatch/app/(app)/layout.tsx
@@ -0,0 +1,57 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { getServerSession } from "api/auth/[...nextauth]/auth";
+import { Error } from "_components/Error";
+import { prisma } from "@repo/db";
+
+export const metadata: Metadata = {
+	title: "VAR: Pilot",
+	description: "Die neue VAR Leitstelle.",
+};
+
+export default async function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	const session = await getServerSession();
+	const openPenaltys = await prisma.penalty.findMany({
+		where: {
+			userId: session?.user.id,
+			until: {
+				gte: new Date(),
+			},
+			suspended: false,
+			type: { in: ["TIME_BAN", "BAN"] },
+		},
+	});
+
+	if (!session) {
+		console.log(session);
+		return redirect("/logout");
+	}
+
+	if (openPenaltys[0]) {
+		if (openPenaltys[0].type === "BAN") {
+			return (
+				<Error
+					title="Du wurdest permanent ausgeschlossen"
+					statusCode={403}
+					description={`Dein Fehlverhalten war so schwerwiegend, dass du dauerhaft von VirtualAirRescue ausgeschlossen wurdest. Du kannst im Hub weitere Informationen finden.`}
+				/>
+			);
+		}
+		return (
+			<Error
+				title="Du hast eine aktive Strafe"
+				statusCode={403}
+				description={`Du bist bis zum ${new Date(openPenaltys[0].until!).toLocaleString()} gesperrt. Du kannst im Hub weitere Informationen finden.`}
+			/>
+		);
+	}
+
+	if (!session.user.emailVerified) {
+		return <Error title="E-Mail-Adresse nicht verifiziert" statusCode={403} />;
+	}
+	return <>{children}</>;
+}
--- a/apps/dispatch/app/(app)/pilot/_components/dme/Dme.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/dme/Dme.tsx
@@ -0,0 +1,132 @@
+import { CSSProperties } from "react";
+import sQuadImageNoReflections from "./Melder_NoReflections.png";
+import sQuadReflection from "./reflektion.png";
+import { useButtons } from "./useButtons";
+import { useSounds } from "./useSounds";
+import Image from "next/image";
+import { useDmeStore } from "_store/pilot/dmeStore";
+
+const DME_BUTTON_STYLES: CSSProperties = {
+	cursor: "pointer",
+	zIndex: "9999",
+	backgroundColor: "transparent",
+	border: "none",
+};
+
+export interface DisplayLineProps {
+	style?: CSSProperties;
+	textLeft?: string;
+	textMid?: string;
+	textRight?: string;
+}
+
+const DisplayLine = ({
+	style = {},
+	textLeft,
+	textMid,
+	textRight,
+}: DisplayLineProps) => {
+	const INNER_TEXT_PARTS: CSSProperties = {
+		fontFamily: "Melder",
+		flex: "1",
+		flexBasis: "auto",
+		overflowWrap: "break-word",
+	};
+
+	return (
+		<div
+			style={{
+				fontFamily: "Famirids",
+				display: "flex",
+				flexWrap: "wrap",
+				...style,
+			}}
+		>
+			<span style={INNER_TEXT_PARTS}>{textLeft}</span>
+			<span style={{ textAlign: "center", ...INNER_TEXT_PARTS }}>
+				{textMid}
+			</span>
+			<span style={{ textAlign: "end", ...INNER_TEXT_PARTS }}>{textRight}</span>
+		</div>
+	);
+};
+
+export const Dme = () => {
+	useSounds();
+	const { handleButton } = useButtons();
+	const lines = useDmeStore((state) => state.lines);
+
+	return (
+		<div
+			style={{
+				display: "grid",
+				aspectRatio: "1037 / 800",
+				color: "black",
+				height: "auto",
+				width: "auto",
+				maxHeight: "100%",
+				maxWidth: "100%",
+				overflow: "hidden",
+				gridTemplateColumns:
+					"25.84% 6.08% 10.99% 11.57% 11.28% 10.90% 18.71% 4.63%",
+				gridTemplateRows: "2.66% 9.3% 8.9% 7.2% 45.05% 27%",
+			}}
+		>
+			<Image
+				src={sQuadImageNoReflections}
+				alt="sQuadImage"
+				style={{
+					zIndex: 0,
+					height: "100%",
+					width: "100%",
+					gridArea: "1 / 1 / 10 / 10",
+				}}
+			/>
+			<button
+				onClick={handleButton("main")}
+				style={{ gridArea: "2 / 7 / 4 / 8", ...DME_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("menu")}
+				style={{ gridArea: "3 / 2 / 4 / 3", ...DME_BUTTON_STYLES }}
+			/>
+			{/* <button
+                    onClick={handleButton('left')}
+                    style={{ gridArea: '3 / 4 / 4 / 5', ...DME_BUTTON_STYLES }}
+                />
+                <button
+                    onClick={handleButton('right')}
+                    style={{ gridArea: '3 / 5 / 4 / 6', ...DME_BUTTON_STYLES }}
+                /> */}
+			<Image
+				src={sQuadReflection}
+				alt="sQuadImage"
+				style={{
+					zIndex: 1,
+					height: "100%",
+					width: "100%",
+					gridArea: "1 / 1 / 10 / 10",
+				}}
+			/>
+			<div
+				id="display"
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "space-between",
+					zIndex: "2",
+					gridArea: "5 / 2 / 6 / 6",
+					paddingTop: "10px",
+					paddingLeft: "2px",
+					paddingRight: "2px",
+					overflowX: "hidden",
+					overflowY: "auto",
+				}}
+			>
+				{lines.map((l, i) => {
+					return <DisplayLine key={`line-${i}`} {...l} />;
+				})}
+			</div>
+		</div>
+	);
+};
--- a/apps/dispatch/app/(app)/pilot/_components/dme/Melder_NoReflections.png
+++ b/apps/dispatch/app/(app)/pilot/_components/dme/Melder_NoReflections.png
--- a/apps/dispatch/app/(app)/pilot/_components/dme/reflektion.png
+++ b/apps/dispatch/app/(app)/pilot/_components/dme/reflektion.png
--- a/apps/dispatch/app/(app)/pilot/_components/dme/squad-x15.jpg
+++ b/apps/dispatch/app/(app)/pilot/_components/dme/squad-x15.jpg
--- a/apps/dispatch/app/(app)/pilot/_components/dme/useButtons.ts
+++ b/apps/dispatch/app/(app)/pilot/_components/dme/useButtons.ts
@@ -0,0 +1,37 @@
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { useDmeStore } from "_store/pilot/dmeStore";
+
+import { useSession } from "next-auth/react";
+export const useButtons = () => {
+	const { page, setPage } = useDmeStore((state) => state);
+	const user = useSession().data?.user;
+	const station = usePilotConnectionStore((state) => state.selectedStation);
+
+	const handleButton = (button: "main" | "menu" | "left" | "right") => () => {
+		switch (button) {
+			case "main":
+				if (page === "mission" || page === "new-mission") {
+					setPage({ page: "acknowledge" });
+				}
+				break;
+			case "menu":
+				if (page === "mission" || page === "new-mission") {
+					setPage({ page: "acknowledge" });
+					if (station && user) setPage({ page: "home", station, user });
+					break;
+				}
+				if (station && user) {
+					setPage({ page: "home", station, user });
+				} else {
+					setPage({ page: "error", error: "No station or user found" });
+				}
+				break;
+			default:
+				setPage({ page: "error", error: "Button now allowed" });
+
+				break;
+		}
+	};
+
+	return { handleButton };
+};
--- a/apps/dispatch/app/(app)/pilot/_components/dme/useSounds.ts
+++ b/apps/dispatch/app/(app)/pilot/_components/dme/useSounds.ts
@@ -0,0 +1,64 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { getUserAPI } from "_querys/user";
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { useDmeStore } from "_store/pilot/dmeStore";
+import { useSession } from "next-auth/react";
+import { useEffect, useRef } from "react";
+
+export const useSounds = () => {
+	const session = useSession();
+	const { data: user } = useQuery({
+		queryKey: ["user", session.data?.user.id],
+		queryFn: () => getUserAPI(session.data!.user.id),
+	});
+
+	const { page, setPage } = useDmeStore((state) => state);
+	const mission = usePilotConnectionStore((state) => state.activeMission);
+
+	const newMissionSound = useRef<HTMLAudioElement | null>(null);
+
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			newMissionSound.current = new Audio("/sounds/Melder3.wav");
+		}
+	}, []);
+
+	useEffect(() => {
+		if (user?.settingsDmeVolume) {
+			if (newMissionSound.current) {
+				newMissionSound.current.volume = user.settingsDmeVolume;
+			}
+		} else if (newMissionSound.current) {
+			newMissionSound.current.volume = 0.8; // Default volume
+		}
+	}, [user?.settingsDmeVolume]);
+
+	useEffect(() => {
+		const timeouts: NodeJS.Timeout[] = [];
+
+		if (page === "new-mission" && newMissionSound.current) {
+			console.log("new-mission", mission);
+			newMissionSound.current.currentTime = 0;
+			newMissionSound.current.volume = 0.3;
+			newMissionSound.current.play();
+			if (mission) {
+				timeouts.push(setTimeout(() => setPage({ page: "mission", mission }), 500));
+			}
+		} else if (page === "acknowledge") {
+			newMissionSound.current?.pause();
+			if (mission) {
+				timeouts.push(setTimeout(() => setPage({ page: "mission", mission }), 500));
+			} else {
+				timeouts.push(
+					setTimeout(() => setPage({ page: "error", error: "Einsatz nicht gebunden" }), 500),
+				);
+			}
+		}
+		return () => {
+			timeouts.forEach((t) => {
+				clearTimeout(t);
+			});
+		};
+	}, [page, setPage, mission]);
+};
--- a/apps/dispatch/app/(app)/pilot/_components/mrt/MRT.png
+++ b/apps/dispatch/app/(app)/pilot/_components/mrt/MRT.png
--- a/apps/dispatch/app/(app)/pilot/_components/mrt/MRT_MESSAGE.png
+++ b/apps/dispatch/app/(app)/pilot/_components/mrt/MRT_MESSAGE.png
--- a/apps/dispatch/app/(app)/pilot/_components/mrt/Mrt.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/mrt/Mrt.tsx
@@ -0,0 +1,227 @@
+import { CSSProperties } from "react";
+import MrtImage from "./MRT.png";
+import MrtMessageImage from "./MRT_MESSAGE.png";
+import { useButtons } from "./useButtons";
+import { useSounds } from "./useSounds";
+import "./mrt.css";
+import Image from "next/image";
+import { useMrtStore } from "_store/pilot/MrtStore";
+
+const MRT_BUTTON_STYLES: CSSProperties = {
+	cursor: "pointer",
+	zIndex: "9999",
+	backgroundColor: "transparent",
+	border: "none",
+};
+const MRT_DISPLAYLINE_STYLES: CSSProperties = {
+	color: "white",
+	zIndex: 1,
+};
+
+export interface DisplayLineProps {
+	lineStyle?: CSSProperties;
+	style?: CSSProperties;
+	textLeft?: string;
+	textMid?: string;
+	textRight?: string;
+	textSize: "1" | "2" | "3" | "4";
+}
+
+const DisplayLine = ({
+	style = {},
+	textLeft,
+	textMid,
+	textRight,
+	textSize,
+	lineStyle,
+}: DisplayLineProps) => {
+	const INNER_TEXT_PARTS: CSSProperties = {
+		fontFamily: "Melder",
+		flex: "1",
+		flexBasis: "auto",
+		overflowWrap: "break-word",
+		...lineStyle,
+	};
+
+	return (
+		<div
+			className={`text-${textSize}`}
+			style={{
+				fontFamily: "Famirids",
+				display: "flex",
+				flexWrap: "wrap",
+
+				...style,
+			}}
+		>
+			<span style={INNER_TEXT_PARTS}>{textLeft}</span>
+			<span style={{ textAlign: "center", ...INNER_TEXT_PARTS }}>{textMid}</span>
+			<span style={{ textAlign: "end", ...INNER_TEXT_PARTS }}>{textRight}</span>
+		</div>
+	);
+};
+
+export const Mrt = () => {
+	useSounds();
+	const { handleButton } = useButtons();
+	const { lines, page } = useMrtStore((state) => state);
+
+	return (
+		<div
+			id="mrt-container"
+			style={{
+				containerName: "mrtContainer",
+				display: "grid",
+				aspectRatio: "1466 / 760",
+				height: "auto",
+				width: "auto",
+				maxHeight: "100%",
+				maxWidth: "100%",
+				color: "white",
+				gridTemplateColumns: "21.83% 4.43% 24.42% 18.08% 5.93% 1.98% 6.00% 1.69% 6.00% 9.35%",
+				gridTemplateRows: "21.58% 11.87% 3.55% 5.00% 6.84% 0.53% 3.03% 11.84% 3.55% 11.84% 20.39%",
+			}}
+		>
+			{page !== "sds" && (
+				<Image
+					src={MrtImage}
+					alt="MrtImage"
+					style={{
+						zIndex: 0,
+						height: "100%",
+						width: "100%",
+						gridArea: "1 / 1 / 13 / 13",
+					}}
+				/>
+			)}
+			{page === "sds" && (
+				<Image
+					src={MrtMessageImage}
+					alt="MrtImage-Message"
+					style={{
+						zIndex: 0,
+						height: "100%",
+						width: "100%",
+						gridArea: "1 / 1 / 13 / 13",
+					}}
+				/>
+			)}
+
+			<button
+				onClick={handleButton("home")}
+				style={{ gridArea: "2 / 4 / 3 / 5", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("1")}
+				style={{ gridArea: "2 / 5 / 3 / 6", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("2")}
+				style={{ gridArea: "2 / 7 / 3 / 7", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("3")}
+				style={{ gridArea: "2 / 9 / 3 / 10", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("4")}
+				style={{ gridArea: "4 / 5 / 6 / 6", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("5")}
+				style={{ gridArea: "4 / 7 / 6 / 7", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("6")}
+				style={{ gridArea: "4 / 9 / 6 / 10", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("7")}
+				style={{ gridArea: "8 / 5 / 9 / 6", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("8")}
+				style={{ gridArea: "8 / 7 / 9 / 7", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("9")}
+				style={{ gridArea: "8 / 9 / 9 / 10", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("0")}
+				style={{ gridArea: "10 / 7 / 11 / 8", ...MRT_BUTTON_STYLES }}
+			/>
+
+			{lines[0] && (
+				<DisplayLine
+					{...lines[0]}
+					style={
+						page === "sds"
+							? {
+									gridArea: "2 / 3 / 3 / 4",
+									marginLeft: "9px",
+									marginTop: "auto",
+
+									...MRT_DISPLAYLINE_STYLES,
+									...lines[0]?.style,
+								}
+							: {
+									gridArea: "4 / 3 / 5 / 4",
+									marginLeft: "9px",
+									marginTop: "auto",
+									...MRT_DISPLAYLINE_STYLES,
+									...lines[0]?.style,
+								}
+					}
+				/>
+			)}
+			{lines[1] && (
+				<DisplayLine
+					lineStyle={{
+						overflowX: "hidden",
+						maxHeight: "100%",
+						overflowY: "auto",
+					}}
+					{...lines[1]}
+					style={
+						page === "sds"
+							? {
+									gridArea: "4 / 2 / 10 / 4",
+									marginLeft: "3px",
+									...MRT_DISPLAYLINE_STYLES,
+									...lines[1].style,
+								}
+							: {
+									gridArea: "5 / 3 / 7 / 4",
+									marginLeft: "3px",
+									marginTop: "auto",
+									...MRT_DISPLAYLINE_STYLES,
+									...lines[1].style,
+								}
+					}
+				/>
+			)}
+			{lines[2] && (
+				<DisplayLine
+					{...lines[2]}
+					style={{
+						gridArea: "8 / 2 / 9 / 4",
+						...MRT_DISPLAYLINE_STYLES,
+						...lines[2]?.style,
+					}}
+				/>
+			)}
+			{lines[3] && (
+				<DisplayLine
+					{...lines[3]}
+					style={{
+						gridArea: "9 / 2 / 10 / 4",
+						marginRight: "10px",
+						...MRT_DISPLAYLINE_STYLES,
+						...lines[3]?.style,
+					}}
+				/>
+			)}
+		</div>
+	);
+};
--- a/apps/dispatch/app/(app)/pilot/_components/mrt/mrt.css
+++ b/apps/dispatch/app/(app)/pilot/_components/mrt/mrt.css
@@ -0,0 +1,32 @@
+#mrt-container {
+    container-name: mrtContainer;
+}
+
+@container mrtContainer (inline-size < 600px) {
+    #mrt-container .text-1 {
+        font-size: 12px;
+        color: red;
+    }
+    #mrt-container .text-2 {
+        font-size: 99px;
+    }
+    #mrt-container .text-3 {
+        font-size: 25px;
+    }
+    #mrt-container .text-4 {
+        font-size: 45px;
+    }
+}
+
+#mrt-container .text-1 {
+    font-size: 10px;
+}
+#mrt-container .text-2 {
+    font-size: 12px;
+}
+#mrt-container .text-3 {
+    font-size: 15px;
+}
+#mrt-container .text-4 {
+    font-size: 25px;
+}
--- a/apps/dispatch/app/(app)/pilot/_components/mrt/useButtons.ts
+++ b/apps/dispatch/app/(app)/pilot/_components/mrt/useButtons.ts
@@ -0,0 +1,76 @@
+import { ConnectedAircraft, Prisma } from "@repo/db";
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { useMrtStore } from "_store/pilot/MrtStore";
+import { pilotSocket } from "(app)/pilot/socket";
+import { editConnectedAircraftAPI } from "_querys/aircrafts";
+import { useEffect } from "react";
+import { useMutation } from "@tanstack/react-query";
+
+export const useButtons = () => {
+	const station = usePilotConnectionStore((state) => state.selectedStation);
+	const connectedAircraft = usePilotConnectionStore((state) => state.connectedAircraft);
+	const connectionStatus = usePilotConnectionStore((state) => state.status);
+	const updateAircraftMutation = useMutation({
+		mutationKey: ["edit-pilot-connected-aircraft"],
+		mutationFn: ({
+			aircraftId,
+			data,
+		}: {
+			aircraftId: number;
+			data: Prisma.ConnectedAircraftUpdateInput;
+		}) => editConnectedAircraftAPI(aircraftId, data),
+	});
+
+	const { page, setPage } = useMrtStore((state) => state);
+
+	const handleButton =
+		(button: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "home") => () => {
+			if (connectionStatus !== "connected") return;
+			if (!station) return;
+			if (!connectedAircraft?.id) return;
+			if (
+				button === "1" ||
+				button === "2" ||
+				button === "3" ||
+				button === "4" ||
+				button === "5" ||
+				button === "6" ||
+				button === "7" ||
+				button === "8" ||
+				button === "9" ||
+				button === "0"
+			) {
+				setPage({ page: "sending-status", station });
+
+				setTimeout(async () => {
+					await updateAircraftMutation.mutateAsync({
+						aircraftId: connectedAircraft.id,
+						data: {
+							fmsStatus: button,
+						},
+					});
+					setPage({
+						page: "home",
+						station,
+						fmsStatus: button,
+					});
+				}, 1000);
+			} else {
+				setPage({ page: "home", fmsStatus: connectedAircraft.fmsStatus || "6", station });
+			}
+		};
+
+	useEffect(() => {
+		pilotSocket.on("connect", () => {
+			if (!station) return;
+			setPage({ page: "home", fmsStatus: "6", station });
+		});
+
+		pilotSocket.on("aircraft-update", () => {
+			if (!station) return;
+			setPage({ page: "new-status", station });
+		});
+	}, [setPage, station]);
+
+	return { handleButton };
+};
--- a/apps/dispatch/app/(app)/pilot/_components/mrt/useSounds.ts
+++ b/apps/dispatch/app/(app)/pilot/_components/mrt/useSounds.ts
@@ -0,0 +1,52 @@
+"use client";
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { useMrtStore } from "_store/pilot/MrtStore";
+import { useEffect, useRef } from "react";
+
+export const useSounds = () => {
+	const mrtState = useMrtStore((state) => state);
+	const { connectedAircraft, selectedStation } = usePilotConnectionStore((state) => state);
+
+	const setPage = useMrtStore((state) => state.setPage);
+	const MRTstatusSoundRef = useRef<HTMLAudioElement>(null);
+	const MrtMessageReceivedSoundRef = useRef<HTMLAudioElement>(null);
+
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			MRTstatusSoundRef.current = new Audio("/sounds/MRT-status.mp3");
+			MrtMessageReceivedSoundRef.current = new Audio("/sounds/MRT-message-received.mp3");
+			MRTstatusSoundRef.current.onended = () => {
+				if (!selectedStation || !connectedAircraft?.fmsStatus) return;
+				setPage({
+					page: "home",
+					station: selectedStation,
+					fmsStatus: connectedAircraft?.fmsStatus,
+				});
+			};
+			MrtMessageReceivedSoundRef.current.onended = () => {
+				if (!selectedStation || !connectedAircraft?.fmsStatus) return;
+				if (mrtState.page === "sds") return;
+				setPage({
+					page: "home",
+					station: selectedStation,
+					fmsStatus: connectedAircraft?.fmsStatus,
+				});
+			};
+		}
+	}, [connectedAircraft?.fmsStatus, selectedStation, setPage, mrtState.page]);
+
+	const fmsStatus = connectedAircraft?.fmsStatus || "NaN";
+
+	useEffect(() => {
+		if (!connectedAircraft) return;
+		if (mrtState.page === "new-status") {
+			if (fmsStatus === "J" || fmsStatus === "c") {
+				MrtMessageReceivedSoundRef.current?.play();
+			} else {
+				MRTstatusSoundRef.current?.play();
+			}
+		} else if (mrtState.page === "sds") {
+			MrtMessageReceivedSoundRef.current?.play();
+		}
+	}, [mrtState, fmsStatus, connectedAircraft, selectedStation]);
+};
--- a/apps/dispatch/app/(app)/pilot/_components/navbar/Navbar.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/navbar/Navbar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { Connection } from "./_components/Connection";
+import { Audio } from "_components/Audio/Audio";
+import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { Settings } from "_components/navbar/Settings";
+import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
+
+export default function Navbar() {
+	/* const [isDark, setIsDark] = useState(false);
+
+	const toggleTheme = () => {
+		const newTheme = !isDark;
+		setIsDark(newTheme);
+		document.documentElement.setAttribute(
+			"data-theme",
+			newTheme ? "nord" : "dark",
+		);
+	}; */
+
+	return (
+		<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
+			<ModeSwitchDropdown />
+			<div className="flex items-center gap-5">
+				<div className="flex items-center gap-2">
+					<Audio />
+				</div>
+				<div className="flex items-center">
+					<Connection />
+				</div>
+				{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
+				<div className="flex items-center">
+					<Settings />
+					<Link
+						href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<button className="btn btn-ghost">
+							<ExternalLinkIcon className="w-4 h-4" /> HUB
+						</button>
+					</Link>
+					<Link href={"/logout"}>
+						<button className="btn btn-ghost">
+							<ExitIcon className="w-4 h-4" />
+						</button>
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx
@@ -0,0 +1,220 @@
+"use client";
+import { useSession } from "next-auth/react";
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { useEffect, useRef, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { getStationsAPI } from "_querys/stations";
+import toast from "react-hot-toast";
+import { editConnectedAircraftAPI } from "_querys/aircrafts";
+import { Prisma } from "@repo/db";
+
+export const ConnectionBtn = () => {
+	const modalRef = useRef<HTMLDialogElement>(null);
+	const connection = usePilotConnectionStore((state) => state);
+	const [form, setForm] = useState<{
+		logoffTime: string | null;
+		selectedStationId: number | null;
+	}>({
+		logoffTime: null,
+		selectedStationId: null,
+	});
+	const [logoffDebounce, setLogoffDebounce] = useState<NodeJS.Timeout | null>(null);
+
+	const { data: stations } = useQuery({
+		queryKey: ["stations"],
+		queryFn: () => getStationsAPI(),
+	});
+	const aircraftMutation = useMutation({
+		mutationFn: ({
+			change,
+			sessionId,
+		}: {
+			sessionId: number;
+			change: Prisma.ConnectedAircraftUpdateInput;
+		}) => editConnectedAircraftAPI(sessionId, change),
+	});
+
+	useEffect(() => {
+		if (stations && stations.length > 0 && form.selectedStationId === null) {
+			setForm((prevForm) => ({
+				...prevForm,
+				selectedStationId: stations[0]?.id ?? null,
+			}));
+		}
+	}, [stations, form.selectedStationId]);
+
+	useEffect(() => {
+		// Disconnect the socket when the component unmounts
+		return () => {
+			connection.disconnect();
+		};
+	}, [connection.disconnect]);
+
+	const logoffTime = form.logoffTime;
+
+	useEffect(() => {
+		if (!logoffTime || !connection.connectedAircraft) return;
+
+		if (logoffDebounce) clearTimeout(logoffDebounce);
+
+		const timeout = setTimeout(async () => {
+			if (!connection.connectedAircraft?.id) return;
+			await aircraftMutation.mutateAsync({
+				sessionId: connection.connectedAircraft.id,
+				change: {
+					esimatedLogoutTime: logoffTime
+						? new Date(new Date().toDateString() + " " + logoffTime).toISOString()
+						: null,
+				},
+			});
+			modalRef.current?.close();
+			toast.success("Änderung gespeichert!");
+		}, 2000);
+
+		setLogoffDebounce(timeout);
+
+		// Cleanup function to clear timeout
+		return () => {
+			if (logoffDebounce) clearTimeout(logoffDebounce);
+		};
+	}, [logoffTime, connection.connectedAircraft]);
+
+	const session = useSession();
+	const uid = session.data?.user?.id;
+	if (!uid) return null;
+	return (
+		<div className="rounded-box bg-base-200 flex justify-center items-center gap-2 p-1">
+			{connection.message.length > 0 && (
+				<span className="mx-2 text-error">{connection.message}</span>
+			)}
+
+			{connection.status == "connected" ? (
+				<button
+					className="btn btn-sm btn-soft btn-success"
+					type="submit"
+					onSubmit={() => false}
+					onClick={() => {
+						modalRef.current?.showModal();
+					}}
+				>
+					Verbunden
+				</button>
+			) : (
+				<button
+					type="submit"
+					onSubmit={() => false}
+					onClick={() => {
+						modalRef.current?.showModal();
+					}}
+					className="btn btn-sm btn-soft btn-info"
+				>
+					{connection.status == "disconnected" ? "Verbinden" : connection.status}
+				</button>
+			)}
+
+			<dialog ref={modalRef} className="modal">
+				<div className="modal-box flex flex-col items-center justify-center">
+					{connection.status == "connected" ? (
+						<h3 className="text-lg font-bold mb-5">
+							Verbunden als{" "}
+							<span className="text-info">&lt;{connection.selectedStation?.bosCallsign}&gt;</span>
+						</h3>
+					) : (
+						<h3 className="text-lg font-bold mb-5">Als Pilot anmelden</h3>
+					)}
+					{connection.status !== "connected" && (
+						<fieldset className="fieldset w-full">
+							<label className="floating-label w-full text-base">
+								<span>Station</span>
+								<select
+									onChange={(e) =>
+										setForm({
+											...form,
+											selectedStationId: parseInt(e.target.value),
+										})
+									}
+									value={form.selectedStationId ?? ""}
+									className="input w-full"
+								>
+									{stations?.map((station) => (
+										<option key={station.id} value={station.id}>
+											{station.bosCallsign}
+										</option>
+									))}
+								</select>
+							</label>
+						</fieldset>
+					)}
+					<fieldset className="fieldset w-full mt-2">
+						<label className="floating-label w-full text-base">
+							<span>Logoff Zeit (LCL)</span>
+							<input
+								onChange={(e) => {
+									const value = e.target.value;
+									setForm({
+										...form,
+										logoffTime: value,
+									});
+								}}
+								value={form.logoffTime ?? ""}
+								type="time"
+								className="input w-full"
+							/>
+						</label>
+						{connection.status == "disconnected" && (
+							<p className="fieldset-label">Du kannst diese Zeit später noch anpassen.</p>
+						)}
+					</fieldset>
+					<div className="modal-action flex justify-between w-full">
+						<form method="dialog" className="w-full flex justify-between">
+							<button className="btn btn-soft">Zurück</button>
+							{connection.status == "connected" ? (
+								<button
+									className="btn btn-soft btn-error"
+									type="submit"
+									onSubmit={() => false}
+									onClick={() => {
+										connection.disconnect();
+									}}
+								>
+									Verbindung Trennen
+								</button>
+							) : (
+								<button
+									type="submit"
+									onSubmit={() => false}
+									onClick={() => {
+										const selectedStation = stations?.find(
+											(station) =>
+												station.id === parseInt(form.selectedStationId?.toString() || ""),
+										);
+										if (selectedStation) {
+											connection.connect(
+												uid,
+												form.selectedStationId?.toString() || "",
+												form.logoffTime || "",
+												selectedStation,
+												session.data!.user,
+											);
+										}
+									}}
+									className="btn btn-soft btn-info"
+								>
+									{connection.status == "disconnected" ? "Verbinden" : connection.status}
+								</button>
+							)}
+						</form>
+					</div>
+				</div>
+			</dialog>
+		</div>
+	);
+};
+
+export const Connection = () => {
+	return (
+		<div>
+			<ConnectionBtn />
+		</div>
+	);
+};
--- a/apps/dispatch/app/(app)/pilot/_components/navbar/_components/ThemeSwap.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/navbar/_components/ThemeSwap.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+
+interface ThemeSwapProps {
+	isDark: boolean;
+	toggleTheme: () => void;
+}
+
+export const ThemeSwap: React.FC<ThemeSwapProps> = ({
+	isDark,
+	toggleTheme,
+}) => {
+	return (
+		<label className="swap swap-rotate">
+			<input
+				type="checkbox"
+				className="theme-controller"
+				checked={isDark}
+				onChange={toggleTheme}
+			/>
+			<MoonIcon className="swap-off h-5 w-5 fill-current" />
+			<SunIcon className="swap-on h-5 w-5 fill-current" />
+		</label>
+	);
+};
--- a/apps/dispatch/app/(app)/pilot/layout.tsx
+++ b/apps/dispatch/app/(app)/pilot/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import Navbar from "./_components/navbar/Navbar";
+import { getServerSession } from "api/auth/[...nextauth]/auth";
+import { Error } from "_components/Error";
+
+export const metadata: Metadata = {
+	title: "VAR: Pilot",
+	description: "Die neue VAR Leitstelle.",
+};
+
+export default async function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	const session = await getServerSession();
+
+	if (!session?.user.permissions.includes("PILOT"))
+		return <Error title="Zugriff verweigert" statusCode={403} />;
+
+	return (
+		<>
+			<Navbar />
+			{children}
+		</>
+	);
+}
--- a/apps/dispatch/app/(app)/pilot/page.tsx
+++ b/apps/dispatch/app/(app)/pilot/page.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Mrt } from "(app)/pilot/_components/mrt/Mrt";
+import { Chat } from "../../_components/left/Chat";
+import { Report } from "../../_components/left/Report";
+import { Dme } from "(app)/pilot/_components/dme/Dme";
+import dynamic from "next/dynamic";
+import { ConnectedDispatcher } from "tracker/_components/ConnectedDispatcher";
+
+const Map = dynamic(() => import("_components/map/Map"), {
+	ssr: false,
+});
+
+const DispatchPage = () => {
+	return (
+		<div className="relative flex-1 flex transition-all duration-500 ease w-full h-screen overflow-hidden">
+			{/* <MapToastCard2 /> */}
+			<div className="flex flex-1 relative w-full h-full">
+				<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
+					<Chat />
+					<div className="mt-2">
+						<Report />
+					</div>
+				</div>
+				<div className="flex w-2/3 h-full">
+					<div className="relative flex flex-1 h-full">
+						<Map />
+						<div className="absolute top-5 right-10 z-99999">
+							<ConnectedDispatcher />
+						</div>
+					</div>
+				</div>
+				<div className="flex w-1/3 h-full">
+					<div className="flex flex-col w-full h-full p-4 bg-base-300">
+						<h2 className="card-title mb-2">MRT & DME</h2>
+						<div className="card bg-base-200 shadow-xl mb-4">
+							<div className="card-body w-full h-full flex items-center justify-center">
+								<div className=" max-w-150">
+									<Mrt />
+								</div>
+							</div>
+						</div>
+						<div className="card bg-base-200 shadow-xl h-1/2 flex">
+							<div className="card-body w-full h-full p-4 mb-0 flex items-center justify-center">
+								<div className=" max-w-140">
+									<Dme />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+DispatchPage.displayName = "DispatchPage";
+
+export default DispatchPage;
--- a/apps/dispatch/app/(app)/pilot/socket.ts
+++ b/apps/dispatch/app/(app)/pilot/socket.ts
@@ -0,0 +1,7 @@
+"use client";
+import { io, Socket } from "socket.io-client";
+
+export const pilotSocket: Socket = io(process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL, {
+	autoConnect: false,
+	transports: ["websocket"],
+});