Release v2.0.4

2025-12-08 19:48:53 +01:00
parent 6081c1e38d 483b5eba46
commit dde52bde39
71 changed files with 2414 additions and 328 deletions
--- a/apps/core-server/modules/chron.ts
+++ b/apps/core-server/modules/chron.ts
@@ -98,13 +98,25 @@ const removeClosedMissions = async () => {

 		if (!lastAlertTime) return;

+		const lastStatus1or6Log = (mission.missionLog as unknown as MissionLog[])
+			.filter((l) => {
+				return (
+					l.type === "station-log" && (l.data?.newFMSstatus === "1" || l.data?.newFMSstatus === "6")
+				);
+			})
+			.sort((a, b) => new Date(b.timeStamp).getTime() - new Date(a.timeStamp).getTime())[0];
+
 		// Case 1: Forgotten Mission, last alert more than 3 Hours ago
 		const now = new Date();
 		if (now.getTime() - lastAlertTime.getTime() > 1000 * 60 * 180)
 			return removeMission(mission.id, "inaktivität");

-		// Case 2: All stations in mission changed from status 4 to 1/6 or from status 8 to 1/6
-		if (allStationsInMissionChangedFromStatus4to1Or8to1)
+		// Case 2: All stations in mission changed from status 4 to 1/6 or from status 8 to 1/6, Status 1/6 change less more 5 minutes ago
+		if (
+			allStationsInMissionChangedFromStatus4to1Or8to1 &&
+			lastStatus1or6Log &&
+			now.getTime() - new Date(lastStatus1or6Log.timeStamp).getTime() > 1000 * 60 * 5
+		)
 			return removeMission(mission.id, "dem freimelden aller Stationen");
 	});
 };
--- a/apps/dispatch-server/.env.example
+++ b/apps/dispatch-server/.env.example
@@ -1,7 +1,8 @@
 DISPATCH_SERVER_PORT=3002
 REDIS_HOST=localhost
 REDIS_PORT=6379
-CORE_SERVER_URL=http://core-server
+CORE_SERVER_URL=http://localhost:3005
 DISPATCH_APP_TOKEN=dispatch
 LIVEKIT_API_KEY=APIAnsGdtdYp2Ho
 LIVEKIT_API_SECRET=tdPjVsYUx8ddC7K9NvdmVAeLRF9GeADD6Fedm1x63fWC
+AUTH_HUB_SECRET=var
--- a/apps/dispatch-server/index.ts
+++ b/apps/dispatch-server/index.ts
@@ -18,7 +18,10 @@ const app = express();
 const server = createServer(app);

 export const io = new Server(server, {
-	adapter: createAdapter(pubClient, subClient),
+	adapter:
+		process.env.REDIS_HOST && process.env.REDIS_PORT
+			? createAdapter(pubClient, subClient)
+			: undefined,
 	cors: {},
 });
 io.use(jwtMiddleware);
--- a/apps/dispatch-server/modules/mission.ts
+++ b/apps/dispatch-server/modules/mission.ts
@@ -6,8 +6,10 @@ export const sendAlert = async (
 	id: number,
 	{
 		stationId,
+		desktopOnly,
 	}: {
 		stationId?: number;
+		desktopOnly?: boolean;
 	},
 	user: User | "HPG",
 ): Promise<{
@@ -46,10 +48,13 @@ export const sendAlert = async (
 		});

 		for (const aircraft of connectedAircrafts) {
-			io.to(`station:${aircraft.stationId}`).emit("mission-alert", {
-				...mission,
-				Stations,
-			});
+			if (!desktopOnly) {
+				io.to(`station:${aircraft.stationId}`).emit("mission-alert", {
+					...mission,
+					Stations,
+				});
+			}
+
 			io.to(`desktop:${aircraft.userId}`).emit("mission-alert", {
 				missionId: mission.id,
 			});
--- a/apps/dispatch-server/modules/redis.ts
+++ b/apps/dispatch-server/modules/redis.ts
@@ -1,13 +1,17 @@
 import { createClient, RedisClientType } from "redis";

 export const pubClient: RedisClientType = createClient({
-	url: `redis://${process.env.REDIS_HOST}:${process.env.REDIS_PORT}`,
+	url: `redis://${process.env.REDIS_HOST || "localhost"}:${process.env.REDIS_PORT || 6379}`,
 });
 export const subClient: RedisClientType = pubClient.duplicate();

-Promise.all([pubClient.connect(), subClient.connect()]).then(() => {
-	console.log("Redis connected");
-});
+if (!process.env.REDIS_HOST || !process.env.REDIS_PORT) {
+	console.warn("REDIS_HOST or REDIS_PORT not set, skipping Redis connection");
+} else {
+	Promise.all([pubClient.connect(), subClient.connect()]).then(() => {
+		console.log("Redis connected");
+	});
+}

 pubClient.on("error", (err) => console.log("Redis Client Error", err));
 subClient.on("error", (err) => console.log("Redis Client Error", err));
--- a/apps/dispatch-server/routes/mission.ts
+++ b/apps/dispatch-server/routes/mission.ts
@@ -87,6 +87,29 @@ router.patch("/:id", async (req, res) => {
 			data: req.body,
 		});
 		io.to("dispatchers").emit("update-mission", { updatedMission });
+		if (req.body.state === "finished") {
+			const missionUsers = await prisma.missionOnStationUsers.findMany({
+				where: {
+					missionId: updatedMission.id,
+				},
+				select: {
+					userId: true,
+				},
+			});
+			console.log("Notifying users about mission closure:", missionUsers);
+			missionUsers?.forEach(({ userId }) => {
+				io.to(`user:${userId}`).emit("notification", {
+					type: "mission-closed",
+					status: "closed",
+					message: `Einsatz ${updatedMission.publicId} wurde beendet`,
+					data: {
+						missionId: updatedMission.id,
+						publicMissionId: updatedMission.publicId,
+					},
+				} as NotificationPayload);
+			});
+		}
+
 		res.json(updatedMission);
 	} catch (error) {
 		console.error(error);
@@ -113,9 +136,10 @@ router.delete("/:id", async (req, res) => {

 router.post("/:id/send-alert", async (req, res) => {
 	const { id } = req.params;
-	const { stationId, vehicleName } = req.body as {
+	const { stationId, vehicleName, desktopOnly } = req.body as {
 		stationId?: number;
 		vehicleName?: "RTW" | "POL" | "FW";
+		desktopOnly?: boolean;
 	};

 	if (!req.user) {
@@ -180,7 +204,11 @@ router.post("/:id/send-alert", async (req, res) => {
 			return;
 		}

-		const { connectedAircrafts, mission } = await sendAlert(Number(id), { stationId }, req.user);
+		const { connectedAircrafts, mission } = await sendAlert(
+			Number(id),
+			{ stationId, desktopOnly },
+			req.user,
+		);

 		io.to("dispatchers").emit("update-mission", mission);
 		res.status(200).json({
@@ -189,11 +217,9 @@ router.post("/:id/send-alert", async (req, res) => {
 		return;
 	} catch (error) {
 		console.error(error);
-		res
-			.status(500)
-			.json({
-				error: `Ein Fehler ist aufgetreten. Bitte melde den Fehler als Bug (${(error as Error).message})`,
-			});
+		res.status(500).json({
+			error: `Ein Fehler ist aufgetreten. Bitte melde den Fehler als Bug (${(error as Error).message})`,
+		});
 		return;
 	}
 });
--- a/apps/dispatch-server/routes/settings.ts
+++ b/apps/dispatch-server/routes/settings.ts
--- a/apps/dispatch-server/socket-events/connect-pilot.ts
+++ b/apps/dispatch-server/socket-events/connect-pilot.ts
@@ -96,6 +96,8 @@ export const handleConnectPilot =
 					lastHeartbeat: debug ? nowPlus2h.toISOString() : undefined,
 					posLat: randomPos?.lat,
 					posLng: randomPos?.lng,
+					posXplanePluginActive: debug ? true : undefined,
+					posH145active: debug ? true : undefined,
 				},
 			});

--- a/apps/dispatch/app/(app)/dispatch/_components/navbar/_components/Settings.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/navbar/_components/Settings.tsx
@@ -3,16 +3,17 @@ import { useEffect, useRef, useState } from "react";
 import { GearIcon } from "@radix-ui/react-icons";
 import { SettingsIcon, Volume2 } from "lucide-react";
 import MicVolumeBar from "_components/MicVolumeIndication";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { editUserAPI, getUserAPI } from "_querys/user";
 import { useSession } from "next-auth/react";
 import { useAudioStore } from "_store/audioStore";
 import toast from "react-hot-toast";
 import { useMapStore } from "_store/mapStore";
-import { set } from "date-fns";
+import { Button } from "@repo/shared-components";

 export const SettingsBtn = () => {
 	const session = useSession();
+	const queryClient = useQueryClient();

 	const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
 	const { data: user } = useQuery({
@@ -23,6 +24,10 @@ export const SettingsBtn = () => {

 	const editUserMutation = useMutation({
 		mutationFn: editUserAPI,
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: ["user", session.data?.user.id] });
+		},
+		
 	});

 	useEffect(() => {
@@ -40,6 +45,7 @@ export const SettingsBtn = () => {
 		micVolume: user?.settingsMicVolume || 1,
 		radioVolume: user?.settingsRadioVolume || 0.8,
 		autoCloseMapPopup: user?.settingsAutoCloseMapPopup || false,
+		useHPGAsDispatcher: user?.settingsUseHPGAsDispatcher || false,
 	});

 	const { setSettings: setAudioSettings } = useAudioStore((state) => state);
@@ -57,7 +63,8 @@ export const SettingsBtn = () => {
 				micDeviceId: user.settingsMicDevice,
 				micVolume: user.settingsMicVolume || 1,
 				radioVolume: user.settingsRadioVolume || 0.8,
-				autoCloseMapPopup: user.settingsAutoCloseMapPopup || false,
+				autoCloseMapPopup: user.settingsAutoCloseMapPopup,
+				useHPGAsDispatcher: user.settingsUseHPGAsDispatcher,
 			});
 			setUserSettings({
 				settingsAutoCloseMapPopup: user.settingsAutoCloseMapPopup || false,
@@ -198,6 +205,17 @@ export const SettingsBtn = () => {
 						/>
 						Popups automatisch schließen
 					</div>
+					<div className="mt-2 flex w-full items-center gap-2">
+						<input
+							type="checkbox"
+							className="toggle"
+							checked={settings.useHPGAsDispatcher}
+							onChange={(e) => {
+								setSettingsPartial({ useHPGAsDispatcher: e.target.checked });
+							}}
+						/>
+						HPG als Disponent verwenden
+					</div>

 					<div className="modal-action flex justify-between">
 						<button
@@ -211,7 +229,7 @@ export const SettingsBtn = () => {
 						>
 							Schließen
 						</button>
-						<button
+						<Button
 							className="btn btn-soft btn-success"
 							type="submit"
 							onSubmit={() => false}
@@ -224,6 +242,7 @@ export const SettingsBtn = () => {
 										settingsMicVolume: settings.micVolume,
 										settingsRadioVolume: settings.radioVolume,
 										settingsAutoCloseMapPopup: settings.autoCloseMapPopup,
+										settingsUseHPGAsDispatcher: settings.useHPGAsDispatcher,
 									},
 								});
 								setAudioSettings({
@@ -239,7 +258,7 @@ export const SettingsBtn = () => {
 							}}
 						>
 							Speichern
-						</button>
+						</Button>
 					</div>
 				</div>
 			</dialog>
--- a/apps/dispatch/app/(app)/dispatch/_components/pannel/MissionForm.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/pannel/MissionForm.tsx
@@ -28,8 +28,11 @@ import { selectRandomHPGMissionSzenery } from "_helpers/selectRandomHPGMission";
 import { AxiosError } from "axios";
 import { cn } from "@repo/shared-components";
 import { StationsSelect } from "(app)/dispatch/_components/StationSelect";
+import { getUserAPI } from "_querys/user";

 export const MissionForm = () => {
+	const session = useSession();
+
 	const { editingMissionId, setEditingMission } = usePannelStore();
 	const queryClient = useQueryClient();
 	const { setSearchElements, searchElements, setContextMenu } = useMapStore((s) => s);
@@ -44,6 +47,10 @@ export const MissionForm = () => {
 		queryFn: () => getConnectedAircraftsAPI(),
 		refetchInterval: 10000,
 	});
+	const { data: user } = useQuery({
+		queryKey: ["user", session.data?.user.id],
+		queryFn: () => getUserAPI(session.data!.user.id),
+	});

 	const createMissionMutation = useMutation({
 		mutationFn: createMissionAPI,
@@ -81,7 +88,6 @@ export const MissionForm = () => {
 		},
 	});

-	const session = useSession();
 	const defaultFormValues = React.useMemo(
 		() =>
 			({
@@ -108,6 +114,7 @@ export const MissionForm = () => {
 				hpgSelectedMissionString: null,
 				hpg: null,
 				missionLog: [],
+				xPlaneObjects: [],
 			}) as MissionOptionalDefaults,
 		[session.data?.user.id],
 	);
@@ -116,13 +123,16 @@ export const MissionForm = () => {
 		resolver: zodResolver(MissionOptionalDefaultsSchema),
 		defaultValues: defaultFormValues,
 	});
-	const { missionFormValues, setOpen } = usePannelStore((state) => state);
+	const { missionFormValues, setOpen, setMissionFormValues } = usePannelStore((state) => state);

-	const validationRequired = HPGValidationRequired(
-		form.watch("missionStationIds"),
-		aircrafts,
-		form.watch("hpgMissionString"),
-	);
+	const validationRequired =
+		HPGValidationRequired(
+			form.watch("missionStationIds"),
+			aircrafts,
+			form.watch("hpgMissionString"),
+		) &&
+		!form.watch("hpgMissionString")?.startsWith("kein Szenario") &&
+		user?.settingsUseHPGAsDispatcher;

 	useEffect(() => {
 		if (session.data?.user.id) {
@@ -144,6 +154,7 @@ export const MissionForm = () => {
 				return;
 			}
 			for (const key in missionFormValues) {
+				console.debug(key, missionFormValues[key as keyof MissionOptionalDefaults]);
 				if (key === "addressOSMways") continue; // Skip addressOSMways as it is handled separately
 				form.setValue(
 					key as keyof MissionOptionalDefaults,
@@ -153,6 +164,22 @@ export const MissionForm = () => {
 		}
 	}, [missionFormValues, form, defaultFormValues]);

+	// Sync form state to store (avoid infinity loops by using watch)
+	useEffect(() => {
+		const subscription = form.watch((values) => {
+			// Only update store if values actually changed to prevent loops
+			const currentStoreValues = JSON.stringify(missionFormValues);
+			const newFormValues = JSON.stringify(values);
+
+			if (currentStoreValues !== newFormValues) {
+				console.debug("Updating store missionFormValues", values);
+				setMissionFormValues(values as MissionOptionalDefaults);
+			}
+		});
+
+		return () => subscription.unsubscribe();
+	}, [form, setMissionFormValues, missionFormValues]);
+
 	const saveMission = async (
 		mission: MissionOptionalDefaults,
 		{ alertWhenValid = false, createNewMission = false } = {},
@@ -369,6 +396,7 @@ export const MissionForm = () => {
 						<option disabled value="please_select">
 							Einsatz Szenario auswählen...
 						</option>
+						<option value={"kein Szenario:3_1_1_1-4_1"}>Kein Szenario</option>
 						{keywords &&
 							keywords
 								.find((k) => k.name === form.watch("missionKeywordName"))
@@ -415,6 +443,21 @@ export const MissionForm = () => {
 				In diesem Einsatz gibt es {form.watch("addressOSMways").length} Gebäude
 			</p>

+			<div className="flex items-center justify-between">
+				<p
+					className={cn("text-sm text-gray-500", form.watch("xPlaneObjects").length && "text-info")}
+				>
+					In diesem Einsatz gibt es {form.watch("xPlaneObjects").length} Objekte
+				</p>
+				<button
+					disabled={!(form.watch("xPlaneObjects")?.length > 0)}
+					className="btn btn-xs btn-error mt-2"
+					onClick={() => form.setValue("xPlaneObjects", [])}
+				>
+					löschen
+				</button>
+			</div>
+
 			<div className="form-control min-h-[140px]">
 				<div className="flex gap-2">
 					<button
@@ -430,7 +473,11 @@ export const MissionForm = () => {
 								setSearchElements([]); // Reset search elements
 								setEditingMission(null);
 								setContextMenu(null);
-								toast.success(`Einsatz ${newMission.publicId} erstellt`);
+								if (editingMissionId) {
+									toast.success(`${newMission.publicId} bearbeitet`);
+								} else {
+									toast.success(`${newMission.publicId} erstellt`);
+								}
 								form.reset();
 								setOpen(false);
 							} catch (error) {
@@ -455,7 +502,11 @@ export const MissionForm = () => {

 								setSearchElements([]); // Reset search elements
 								setContextMenu(null);
-								toast.success(`Einsatz ${newMission.publicId} erstellt`);
+								if (editingMissionId) {
+									toast.success(`${newMission.publicId} bearbeitet`);
+								} else {
+									toast.success(`${newMission.publicId} erstellt`);
+								}
 								form.reset();
 								setOpen(false);
 							} catch (error) {
--- a/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx
@@ -6,9 +6,10 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { getStationsAPI } from "_querys/stations";
 import { editConnectedAircraftAPI, getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { Prisma } from "@repo/db";
-import { Button, getNextDateWithTime } from "@repo/shared-components";
+import { Button, cn, getNextDateWithTime } from "@repo/shared-components";
 import { Select } from "_components/Select";
-import { Radio } from "lucide-react";
+import { Calendar, Radio } from "lucide-react";
+import { getBookingsAPI } from "_querys/bookings";

 export const ConnectionBtn = () => {
 	const modalRef = useRef<HTMLDialogElement>(null);
@@ -27,6 +28,19 @@ export const ConnectionBtn = () => {
 		queryKey: ["stations"],
 		queryFn: () => getStationsAPI(),
 	});
+	const { data: bookings } = useQuery({
+		queryKey: ["bookings"],
+		queryFn: () =>
+			getBookingsAPI({
+				startTime: {
+					lte: new Date(Date.now() + 8 * 60 * 60 * 1000),
+				},
+				endTime: {
+					gte: new Date(),
+				},
+			}),
+	});
+
 	const aircraftMutation = useMutation({
 		mutationFn: ({
 			change,
@@ -62,6 +76,7 @@ export const ConnectionBtn = () => {
 	const session = useSession();
 	const uid = session.data?.user?.id;
 	if (!uid) return null;
+	console.log(bookings);
 	return (
 		<div className="rounded-box bg-base-200 flex items-center justify-center gap-2 p-1">
 			{connection.message.length > 0 && (
@@ -117,20 +132,39 @@ export const ConnectionBtn = () => {
 									(option as { component: React.ReactNode }).component
 								}
 								options={
-									stations?.map((station) => ({
-										value: station.id.toString(),
-										label: station.bosCallsign,
-										component: (
-											<div>
-												<span className="flex items-center gap-2">
-													{connectedAircrafts?.find((a) => a.stationId == station.id) && (
-														<Radio className="text-warning" size={15} />
-													)}
-													{station.bosCallsign}
-												</span>
-											</div>
-										),
-									})) ?? []
+									stations?.map((station) => {
+										const booking = bookings?.find((b) => b.stationId == station.id);
+										return {
+											value: station.id.toString(),
+											label: station.bosCallsign,
+											component: (
+												<div>
+													<span className="flex items-center gap-2">
+														{connectedAircrafts?.find((a) => a.stationId == station.id) && (
+															<Radio className="text-warning" size={15} />
+														)}
+														{booking && (
+															<div
+																className="tooltip tooltip-right"
+																data-tip={`${new Date(booking.startTime).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} - ${new Date(booking.endTime).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} Uhr gebucht von ${booking.userId == session.data?.user?.id ? "dir" : booking.User.fullName}`}
+															>
+																<Calendar
+																	className={
+																		cn(
+																			"text-warning",
+																			booking?.userId === session.data?.user?.id,
+																		) && "text-success"
+																	}
+																	size={15}
+																/>
+															</div>
+														)}
+														{station.bosCallsign}
+													</span>
+												</div>
+											),
+										};
+									}) ?? []
 								}
 							/>
 						</div>
--- a/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Settings.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Settings.tsx
@@ -3,15 +3,17 @@ import { useEffect, useRef, useState } from "react";
 import { GearIcon } from "@radix-ui/react-icons";
 import { Bell, SettingsIcon, Volume2 } from "lucide-react";
 import MicVolumeBar from "_components/MicVolumeIndication";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { editUserAPI, getUserAPI } from "_querys/user";
 import { useSession } from "next-auth/react";
 import { useAudioStore } from "_store/audioStore";
 import toast from "react-hot-toast";
 import Link from "next/link";
+import { Button } from "@repo/shared-components";

 export const SettingsBtn = () => {
 	const session = useSession();
+	const queryClient = useQueryClient();

 	const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
 	const { data: user } = useQuery({
@@ -22,6 +24,10 @@ export const SettingsBtn = () => {

 	const editUserMutation = useMutation({
 		mutationFn: editUserAPI,
+		mutationKey: ["user", session.data?.user.id],
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: ["user", session.data?.user.id] });
+		},
 	});

 	useEffect(() => {
@@ -248,7 +254,7 @@ export const SettingsBtn = () => {
 						>
 							Schließen
 						</button>
-						<button
+						<Button
 							className="btn btn-soft btn-success"
 							type="submit"
 							onSubmit={() => false}
@@ -275,7 +281,7 @@ export const SettingsBtn = () => {
 							}}
 						>
 							Speichern
-						</button>
+						</Button>
 					</div>
 				</div>
 			</dialog>
--- a/apps/dispatch/app/(app)/pilot/page.tsx
+++ b/apps/dispatch/app/(app)/pilot/page.tsx
@@ -6,26 +6,63 @@ 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";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { usePilotConnectionStore } from "_store/pilot/connectionStore";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
-import { checkSimulatorConnected } from "@repo/shared-components";
+import { Button, checkSimulatorConnected, useDebounce } from "@repo/shared-components";
 import { SimConnectionAlert } from "(app)/pilot/_components/SimConnectionAlert";
 import { SettingsBoard } from "_components/left/SettingsBoard";
 import { BugReport } from "_components/left/BugReport";
+import { useEffect, useState } from "react";
+import { useDmeStore } from "_store/pilot/dmeStore";
+import { sendMissionAPI } from "_querys/missions";
+import toast from "react-hot-toast";

 const Map = dynamic(() => import("_components/map/Map"), {
 	ssr: false,
 });

 const PilotPage = () => {
-	const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
+	const { connectedAircraft, status,  } = usePilotConnectionStore((state) => state);
+	const { latestMission } = useDmeStore((state) => state);
 	// Query will be cached anyway, due to this, displayed Markers are in sync with own Aircraft connection-warning
 	const { data: aircrafts } = useQuery({
 		queryKey: ["aircrafts"],
 		queryFn: () => getConnectedAircraftsAPI(),
 		refetchInterval: 10_000,
 	});
+	const sendAlertMutation = useMutation({
+		mutationKey: ["missions"],
+		mutationFn: (params: {
+			id: number;
+			stationId?: number | undefined;
+			vehicleName?: "RTW" | "POL" | "FW" | undefined;
+			desktopOnly?: boolean | undefined;
+		}) => sendMissionAPI(params.id, params),
+		onError: (error) => {
+			console.error(error);
+			toast.error("Fehler beim Alarmieren");
+		},
+		onSuccess: (data) => {
+			toast.success(data.message);
+		},
+	});
+	const [shortlyConnected, setShortlyConnected] = useState(false);
+	useDebounce(
+		() => {
+			if (status === "connected") {
+				setShortlyConnected(false);
+			}
+		},
+		30_000,
+		[status],
+	);
+
+	useEffect(() => {
+		if (status === "connected") {
+			setShortlyConnected(true);
+		}
+	}, [status]);

 	const ownAircraft = aircrafts?.find((aircraft) => aircraft.id === connectedAircraft?.id);
 	const simulatorConnected = ownAircraft ? checkSimulatorConnected(ownAircraft) : false;
@@ -47,16 +84,39 @@ const PilotPage = () => {
 						</div>
 						<Map />
 						<div className="absolute right-10 top-5 z-20 space-y-2">
-							{!simulatorConnected && status === "connected" && (
-								<SimConnectionAlert lastUpdated={ownAircraft?.lastHeartbeat} />
-							)}
+							{!simulatorConnected &&
+								status === "connected" &&
+								connectedAircraft &&
+								!shortlyConnected && (
+									<SimConnectionAlert lastUpdated={ownAircraft?.lastHeartbeat} />
+								)}
 							<ConnectedDispatcher />
 						</div>
 					</div>
 				</div>
 				<div className="flex h-full w-1/3">
 					<div className="bg-base-300 flex h-full w-full flex-col p-4">
-						<h2 className="card-title mb-2">MRT & DME</h2>
+						<div className="flex justify-between">
+							<h2 className="card-title mb-2">MRT & DME</h2>
+							<div
+								className="tooltip tooltip-left mb-4"
+								data-tip="Dadurch wird der Einsatz erneut an den Desktop-Client gesendet."
+							>
+								<Button
+									className="btn btn-xs btn-outline"
+									disabled={!latestMission}
+									onClick={async () => {
+										if (!latestMission) return;
+										await sendAlertMutation.mutateAsync({
+											id: latestMission.id,
+											desktopOnly: false,
+										});
+									}}
+								>
+									Erneut senden
+								</Button>
+							</div>
+						</div>
 						<div className="card bg-base-200 mb-4 shadow-xl">
 							<div className="card-body flex h-full w-full items-center justify-center">
 								<div className="max-w-150">
--- a/apps/dispatch/app/(auth)/logout/page.tsx
+++ b/apps/dispatch/app/(auth)/logout/page.tsx
@@ -10,7 +10,7 @@ export default () => {
 	}, []);
 	return (
 		<div className="card-body">
-			<h1 className="text-5xl">logging out...</h1>
+			<h1 className="text-5xl">ausloggen...</h1>
 		</div>
 	);
 };
--- a/apps/dispatch/app/_components/QueryProvider.tsx
+++ b/apps/dispatch/app/_components/QueryProvider.tsx
@@ -3,7 +3,7 @@

 import { toast } from "react-hot-toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { dispatchSocket } from "(app)/dispatch/socket";
 import { NotificationPayload } from "@repo/db";
 import { HPGnotificationToast } from "_components/customToasts/HPGnotification";
@@ -15,6 +15,7 @@ import { MissionAutoCloseToast } from "_components/customToasts/MissionAutoClose

 export function QueryProvider({ children }: { children: ReactNode }) {
 	const mapStore = useMapStore((s) => s);
+	const notificationSound = useRef<HTMLAudioElement | null>(null);

 	const [queryClient] = useState(
 		() =>
@@ -22,7 +23,7 @@ export function QueryProvider({ children }: { children: ReactNode }) {
 				defaultOptions: {
 					mutations: {
 						onError: (error) => {
-							toast.error("An error occurred: " + (error as Error).message, {
+							toast.error("Ein Fehler ist aufgetreten: " + (error as Error).message, {
 								position: "top-right",
 							});
 						},
@@ -30,6 +31,9 @@ export function QueryProvider({ children }: { children: ReactNode }) {
 				},
 			}),
 	);
+	useEffect(() => {
+		notificationSound.current = new Audio("/sounds/notification.mp3");
+	}, []);
 	useEffect(() => {
 		const invalidateMission = () => {
 			queryClient.invalidateQueries({
@@ -59,8 +63,18 @@ export function QueryProvider({ children }: { children: ReactNode }) {
 		};

 		const handleNotification = (notification: NotificationPayload) => {
+			const playNotificationSound = () => {
+				if (notificationSound.current) {
+				notificationSound.current.currentTime = 0;
+				notificationSound.current
+					.play()
+					.catch((e) => console.error("Notification sound error:", e));
+			}
+			}
+
 			switch (notification.type) {
 				case "hpg-validation":
+					playNotificationSound();
 					toast.custom(
 						(t) => <HPGnotificationToast event={notification} mapStore={mapStore} t={t} />,
 						{
@@ -70,6 +84,7 @@ export function QueryProvider({ children }: { children: ReactNode }) {

 					break;
 				case "admin-message":
+					playNotificationSound();
 					toast.custom((t) => <AdminMessageToast event={notification} t={t} />, {
 						duration: 999999,
 					});
@@ -81,12 +96,17 @@ export function QueryProvider({ children }: { children: ReactNode }) {
 					});
 					break;
 				case "mission-auto-close":
+					playNotificationSound();
 					toast.custom(
 						(t) => <MissionAutoCloseToast event={notification} t={t} mapStore={mapStore} />,
 						{
 							duration: 60000,
 						},
 					);
+					break;
+				case "mission-closed":
+					toast("Dein aktueller Einsatz wurde geschlossen.");
+					
 					break;
 				default:
 					toast("unbekanntes Notification-Event");
--- a/apps/dispatch/app/_components/customToasts/HPGnotValidated.tsx
+++ b/apps/dispatch/app/_components/customToasts/HPGnotValidated.tsx
@@ -0,0 +1,24 @@
+import { BaseNotification } from "_components/customToasts/BaseNotification"
+import { TriangleAlert } from "lucide-react"
+import toast, { Toast } from "react-hot-toast"
+
+
+export const HPGnotValidatedToast = ({_toast}: {_toast: Toast}) => {
+    return <BaseNotification icon={<TriangleAlert />} className="flex flex-row">
+				<div className="flex-1">
+					<h1 className="font-bold text-red-600">Einsatz nicht HPG-validiert</h1>
+					<p className="text-sm">Vergleiche die Position des Einsatzes mit der HPG-Position in Hubschrauber</p>
+				</div>
+				<div className="ml-11">
+					<button className="btn" onClick={() => toast.dismiss(_toast.id)}>
+						schließen
+					</button>
+				</div>
+			</BaseNotification>
+}
+
+export const showToast = () => {
+    toast.custom((t) => {
+        return (<HPGnotValidatedToast _toast={t} />);
+    }, {duration: 1000 * 60 * 10}); // 10 minutes
+}
--- a/apps/dispatch/app/_components/map/ContextMenu.tsx
+++ b/apps/dispatch/app/_components/map/ContextMenu.tsx
@@ -3,15 +3,22 @@ import { OSMWay } from "@repo/db";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 import { useMapStore } from "_store/mapStore";
 import { usePannelStore } from "_store/pannelStore";
-import { MapPin, MapPinned, Radius, Ruler, Search, RulerDimensionLine, Scan } from "lucide-react";
+import { MapPin, MapPinned, Search, Car, Ambulance, Siren, Flame } from "lucide-react";
 import { getOsmAddress } from "_querys/osm";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { Popup, useMap } from "react-leaflet";
 import { findClosestPolygon } from "_helpers/findClosestPolygon";
+import { xPlaneObjectsAvailable } from "_helpers/xPlaneObjectsAvailable";
+import { useQuery } from "@tanstack/react-query";
+import { getConnectedAircraftsAPI } from "_querys/aircrafts";

 export const ContextMenu = () => {
 	const map = useMap();
+	const { data: aircrafts } = useQuery({
+		queryKey: ["connectedAircrafts"],
+		queryFn: getConnectedAircraftsAPI,
+	});
 	const {
 		contextMenu,
 		searchElements,
@@ -26,15 +33,16 @@ export const ContextMenu = () => {
 		setOpen,
 		isOpen: isPannelOpen,
 	} = usePannelStore((state) => state);
-	const [showRulerOptions, setShowRulerOptions] = useState(false);
+	const [showObjectOptions, setShowObjectOptions] = useState(false);
 	const [rulerHover, setRulerHover] = useState(false);
 	const [rulerOptionsHover, setRulerOptionsHover] = useState(false);

 	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";

 	useEffect(() => {
-		setShowRulerOptions(rulerHover || rulerOptionsHover);
-	}, [rulerHover, rulerOptionsHover]);
+		const showObjectOptions = rulerHover || rulerOptionsHover;
+		setShowObjectOptions(showObjectOptions);
+	}, [isPannelOpen, rulerHover, rulerOptionsHover, setOpen]);

 	useEffect(() => {
 		const handleContextMenu = (e: any) => {
@@ -150,9 +158,12 @@ export const ContextMenu = () => {
 						style={{ transform: "translateY(-50%)" }}
 						onMouseEnter={() => setRulerHover(true)}
 						onMouseLeave={() => setRulerHover(false)}
-						disabled
+						disabled={
+							!isPannelOpen ||
+							!xPlaneObjectsAvailable(missionFormValues?.missionStationIds, aircrafts)
+						}
 					>
-						<Ruler size={20} />
+						<Car size={20} />
 					</button>
 					{/* Bottom Button */}
 					<button
@@ -178,64 +189,75 @@ export const ContextMenu = () => {
 					>
 						<Search size={20} />
 					</button>
-					{/* Ruler Options - shown when Ruler button is hovered or options are hovered */}
-					{showRulerOptions && (
+					{/* XPlane Object Options - shown when Ruler button is hovered or options are hovered */}
+					{showObjectOptions && (
 						<div
-							className="pointer-events-auto absolute flex flex-col items-center"
-							style={{
-								left: "-100px", // position to the right of the left button
-								top: "50%",
-								transform: "translateY(-50%)",
-								zIndex: 10,
-								width: "120px", // Make the hover area wider
-								height: "200px", // Make the hover area taller
-								padding: "20px 0", // Add vertical padding
-								display: "flex",
-								justifyContent: "center",
-								pointerEvents: "auto",
-							}}
+							className="pointer-events-auto absolute -left-[100px] top-1/2 z-10 flex h-[200px] w-[120px] -translate-y-1/2 flex-col items-center justify-center py-5"
 							onMouseEnter={() => setRulerOptionsHover(true)}
 							onMouseLeave={() => setRulerOptionsHover(false)}
 						>
-							<div
-								style={{
-									display: "flex",
-									flexDirection: "column",
-									width: "100%",
-								}}
-							>
+							<div className="flex w-full flex-col">
 								<button
-									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent mb-2 h-10 w-10 opacity-80"
-									data-tip="Strecke Messen"
-									style={{
-										transform: "translateX(100%)",
-									}}
+									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent mb-2 ml-[30px] h-10 w-10 opacity-80"
+									data-tip="Rettungswagen platzieren"
 									onClick={() => {
-										/* ... */
+										setMissionFormValues({
+											...missionFormValues,
+											xPlaneObjects: [
+												...(missionFormValues?.xPlaneObjects ?? []),
+												{
+													objectName: "ambulance",
+													alt: 0,
+													lat: contextMenu.lat,
+													lon: contextMenu.lng,
+												},
+											],
+										});
 									}}
 								>
-									<RulerDimensionLine size={20} />
+									<Ambulance size={20} />
 								</button>
 								<button
 									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent mb-2 h-10 w-10 opacity-80"
-									data-tip="Radius Messen"
+									data-tip="LF platzieren"
 									onClick={() => {
-										/* ... */
+										console.log("Add fire engine");
+										setMissionFormValues({
+											...missionFormValues,
+											xPlaneObjects: [
+												...(missionFormValues?.xPlaneObjects ?? []),
+												{
+													objectName: "fire_engine",
+													alt: 0,
+													lat: contextMenu.lat,
+													lon: contextMenu.lng,
+												},
+											],
+										});
 									}}
 								>
-									<Radius size={20} />
+									<Flame size={20} />
 								</button>
 								<button
-									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent h-10 w-10 opacity-80"
-									data-tip="Fläche Messen"
-									style={{
-										transform: "translateX(100%)",
-									}}
+									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent ml-[30px] h-10 w-10 opacity-80"
+									data-tip="Streifenwagen platzieren"
 									onClick={() => {
-										/* ... */
+										console.log("Add police");
+										setMissionFormValues({
+											...missionFormValues,
+											xPlaneObjects: [
+												...(missionFormValues?.xPlaneObjects ?? []),
+												{
+													objectName: "police",
+													alt: 0,
+													lat: contextMenu.lat,
+													lon: contextMenu.lng,
+												},
+											],
+										});
 									}}
 								>
-									<Scan size={20} />
+									<Siren size={20} />
 								</button>
 							</div>
 						</div>
--- a/apps/dispatch/app/_components/map/MapAdditionals.tsx
+++ b/apps/dispatch/app/_components/map/MapAdditionals.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { usePannelStore } from "_store/pannelStore";
-import { Marker } from "react-leaflet";
+import { Marker, useMap } from "react-leaflet";
 import L from "leaflet";
 import { useQuery } from "@tanstack/react-query";
 import { getMissionsAPI } from "_querys/missions";
@@ -8,10 +8,13 @@ import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { useMapStore } from "_store/mapStore";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
+import { XplaneObject } from "@repo/db";
+import { useEffect, useState } from "react";

 export const MapAdditionals = () => {
-	const { isOpen, missionFormValues } = usePannelStore((state) => state);
+	const { isOpen, missionFormValues, setMissionFormValues } = usePannelStore((state) => state);
 	const dispatcherConnectionState = useDispatchConnectionStore((state) => state.status);
+	const { openMissionMarker } = useMapStore((state) => state);

 	const { data: missions = [] } = useQuery({
 		queryKey: ["missions"],
@@ -21,13 +24,28 @@ export const MapAdditionals = () => {
 			}),
 		refetchInterval: 10_000,
 	});
-	const mapStore = useMapStore((state) => state);
+	const { setOpenMissionMarker } = useMapStore((state) => state);
+	const [showDetailedAdditionals, setShowDetailedAdditionals] = useState(false);

 	const { data: aircrafts } = useQuery({
 		queryKey: ["aircrafts"],
 		queryFn: () => getConnectedAircraftsAPI(),
 		refetchInterval: 10000,
 	});
+	const leafletMap = useMap();
+
+	useEffect(() => {
+		const handleZoomEnd = () => {
+			const currentZoom = leafletMap.getZoom();
+			setShowDetailedAdditionals(currentZoom > 10);
+		};
+
+		leafletMap.on("zoomend", handleZoomEnd);
+
+		return () => {
+			leafletMap.off("zoomend", handleZoomEnd);
+		};
+	}, [leafletMap]);

 	const markersNeedingAttention = missions.filter(
 		(m) =>
@@ -37,7 +55,7 @@ export const MapAdditionals = () => {
 			m.hpgLocationLat &&
 			dispatcherConnectionState === "connected" &&
 			m.hpgLocationLng &&
-			mapStore.openMissionMarker.find((openMission) => openMission.id === m.id),
+			openMissionMarker.find((openMission) => openMission.id === m.id),
 	);

 	return (
@@ -50,9 +68,78 @@ export const MapAdditionals = () => {
 						iconSize: [40, 40],
 						iconAnchor: [20, 35],
 					})}
-					interactive={false}
+					draggable={true}
+					eventHandlers={{
+						dragend: (e) => {
+							const marker = e.target;
+							const position = marker.getLatLng();
+							setMissionFormValues({
+								...missionFormValues,
+								addressLat: position.lat,
+								addressLng: position.lng,
+							});
+						},
+					}}
 				/>
 			)}
+			{showDetailedAdditionals &&
+				openMissionMarker.map((mission) => {
+					if (missionFormValues?.id === mission.id) return null;
+					const missionData = missions.find((m) => m.id === mission.id);
+					if (!missionData?.addressLat || !missionData?.addressLng) return null;
+					return (missionData.xPlaneObjects as unknown as XplaneObject[]).map((obj, index) => (
+						<Marker
+							key={`${mission.id}-additional-${index}`}
+							position={[obj.lat, obj.lon]}
+							icon={L.icon({
+								iconUrl: `/icons/${obj.objectName}.png`,
+								iconSize: [40, 40],
+								iconAnchor: [20, 35],
+							})}
+							interactive={false}
+						/>
+					));
+				})}
+			{isOpen &&
+				missionFormValues?.xPlaneObjects &&
+				(missionFormValues.xPlaneObjects as unknown as XplaneObject[]).map((obj, index) => (
+					<Marker
+						key={index}
+						position={[obj.lat, obj.lon]}
+						icon={L.icon({
+							iconUrl: `/icons/${obj.objectName}.png`,
+							iconSize: [40, 40],
+							iconAnchor: [20, 35],
+						})}
+						draggable={true}
+						eventHandlers={{
+							dragend: (e) => {
+								const marker = e.target;
+								const position = marker.getLatLng();
+								console.log("Marker dragged to:", position);
+								setMissionFormValues({
+									...missionFormValues,
+									xPlaneObjects: (missionFormValues.xPlaneObjects as unknown as XplaneObject[]).map(
+										(obj, objIndex) =>
+											objIndex === index ? { ...obj, lat: position.lat, lon: position.lng } : obj,
+									),
+								});
+							},
+
+							contextmenu: (e) => {
+								e.originalEvent.preventDefault();
+								const updatedObjects = (
+									missionFormValues.xPlaneObjects as unknown as XplaneObject[]
+								).filter((_, objIndex) => objIndex !== index);
+								setMissionFormValues({
+									...missionFormValues,
+									// eslint-disable-next-line @typescript-eslint/no-explicit-any
+									xPlaneObjects: updatedObjects as unknown as any[],
+								});
+							},
+						}}
+					/>
+				))}
 			{markersNeedingAttention.map((mission) => (
 				<Marker
 					key={mission.id}
@@ -64,7 +151,7 @@ export const MapAdditionals = () => {
 					})}
 					eventHandlers={{
 						click: () =>
-							mapStore.setOpenMissionMarker({
+							setOpenMissionMarker({
 								open: [
 									{
 										id: mission.id,
--- a/apps/dispatch/app/_components/map/XPlaneObject.tsx
+++ b/apps/dispatch/app/_components/map/XPlaneObject.tsx
@@ -0,0 +1,3 @@
+export const XPlaneObjects = () => {
+	return <div>XPlaneObjects</div>;
+};
--- a/apps/dispatch/app/_components/map/_components/AircraftMarkerTabs.tsx
+++ b/apps/dispatch/app/_components/map/_components/AircraftMarkerTabs.tsx
@@ -296,6 +296,12 @@ const StationTab = ({ aircraft }: { aircraft: ConnectedAircraft & { Station: Sta
 						{aircraft.posH145active ? "H145 Aktiv" : "H145 Inaktiv"}
 					</span>
 				</span>
+				<span className="flex items-center gap-2">
+					<Lollipop size={16} />{" "}
+					<span className={cn(aircraft.posXplanePluginActive && "text-green-500")}>
+						{aircraft.posXplanePluginActive ? "X-Plane Plugin Aktiv" : "X-Plane Plugin Inaktiv"}
+					</span>
+				</span>
 			</div>
 		</div>
 	);
--- a/apps/dispatch/app/_components/navbar/AdminPanel.tsx
+++ b/apps/dispatch/app/_components/navbar/AdminPanel.tsx
@@ -7,6 +7,7 @@ import { getConnectedDispatcherAPI, kickDispatcherAPI } from "_querys/dispatcher
 import { getLivekitRooms, kickLivekitParticipant } from "_querys/livekit";
 import { ParticipantInfo } from "livekit-server-sdk";
 import {
+	Dot,
 	LockKeyhole,
 	Plane,
 	RedoDot,
@@ -144,7 +145,12 @@ export default function AdminPanel() {
 														{!livekitParticipant ? (
 															<span className="text-error">Nicht verbunden</span>
 														) : (
-															<span className="text-success">{livekitParticipant.room}</span>
+															<span className="text-success inline-flex items-center">
+																{livekitParticipant.room}{" "}
+																{livekitParticipant?.participant.tracks.some((t) => !t.muted) && (
+																	<Dot className="text-warning ml-2" />
+																)}
+															</span>
 														)}
 													</td>
 													<td className="flex gap-2">
@@ -209,7 +215,12 @@ export default function AdminPanel() {
 														{!livekitParticipant ? (
 															<span className="text-error">Nicht verbunden</span>
 														) : (
-															<span className="text-success">{livekitParticipant.room}</span>
+															<span className="text-success inline-flex items-center">
+																{livekitParticipant.room}{" "}
+																{livekitParticipant?.participant.tracks.some((t) => !t.muted) && (
+																	<Dot className="text-warning ml-2" />
+																)}
+															</span>
 														)}
 													</td>
 													<td className="flex gap-2">
@@ -274,8 +285,13 @@ export default function AdminPanel() {
 													<td>
 														<span className="text-error">Nicht verbunden</span>
 													</td>
-													<td>
-														<span className="text-success">{p.room}</span>
+													<td className="flex">
+														<span className="text-success inline-flex items-center">
+															{p.room}
+															{p.participant.tracks.some((t) => !t.muted) && (
+																<Dot className="text-warning ml-2" />
+															)}
+														</span>
 													</td>
 													<td className="flex gap-2">
 														<button
--- a/apps/dispatch/app/_helpers/radioEffect.ts
+++ b/apps/dispatch/app/_helpers/radioEffect.ts
@@ -1,5 +1,5 @@
 // Helper function for distortion curve generation
-function createDistortionCurve(amount: number): Float32Array {
+function createDistortionCurve(amount: number): Float32Array<ArrayBuffer> {
 	const k = typeof amount === "number" ? amount : 50;
 	const nSamples = 44100;
 	const curve = new Float32Array(nSamples);
--- a/apps/dispatch/app/_helpers/xPlaneObjectsAvailable.ts
+++ b/apps/dispatch/app/_helpers/xPlaneObjectsAvailable.ts
@@ -0,0 +1,11 @@
+import { ConnectedAircraft } from "@repo/db";
+
+export const xPlaneObjectsAvailable = (
+	missionStationIds?: number[],
+	aircrafts?: ConnectedAircraft[],
+) => {
+	return missionStationIds?.some((id) => {
+		const aircraft = aircrafts?.find((a) => a.stationId === id);
+		return aircraft?.posXplanePluginActive;
+	});
+};
--- a/apps/dispatch/app/_querys/bookings.ts
+++ b/apps/dispatch/app/_querys/bookings.ts
@@ -0,0 +1,36 @@
+import { Booking, Prisma, PublicUser, Station } from "@repo/db";
+import axios from "axios";
+
+export const getBookingsAPI = async (filter: Prisma.BookingWhereInput) => {
+	const res = await axios.get<
+		(Booking & {
+			Station: Station;
+			User: PublicUser;
+		})[]
+	>("/api/bookings", {
+		params: {
+			filter: JSON.stringify(filter),
+		},
+	});
+	if (res.status !== 200) {
+		throw new Error("Failed to fetch stations");
+	}
+	return res.data;
+};
+
+export const createBookingAPI = async (booking: Omit<Prisma.BookingCreateInput, "User">) => {
+	const response = await axios.post("/api/bookings", booking);
+	if (response.status !== 201) {
+		console.error("Error creating booking:", response);
+		throw new Error("Failed to create booking");
+	}
+	return response.data;
+};
+
+export const deleteBookingAPI = async (bookingId: string) => {
+	const response = await axios.delete(`/api/bookings/${bookingId}`);
+	if (!response.status.toString().startsWith("2")) {
+		throw new Error("Failed to delete booking");
+	}
+	return bookingId;
+};
--- a/apps/dispatch/app/_querys/dispatcher.ts
+++ b/apps/dispatch/app/_querys/dispatcher.ts
@@ -14,11 +14,14 @@ export const changeDispatcherAPI = async (
 };

 export const getConnectedDispatcherAPI = async (filter?: Prisma.ConnectedDispatcherWhereInput) => {
-	const res = await axios.get<ConnectedDispatcher[]>("/api/dispatcher", {
-		params: {
-			filter: JSON.stringify(filter),
+	const res = await axios.get<(ConnectedDispatcher & { settingsUseHPGAsDispatcher: boolean })[]>(
+		"/api/dispatcher",
+		{
+			params: {
+				filter: JSON.stringify(filter),
+			},
 		},
-	});
+	);
 	if (res.status !== 200) {
 		throw new Error("Failed to fetch Connected Dispatcher");
 	}
--- a/apps/dispatch/app/_querys/missions.ts
+++ b/apps/dispatch/app/_querys/missions.ts
@@ -55,9 +55,11 @@ export const sendMissionAPI = async (
 	{
 		stationId,
 		vehicleName,
+		desktopOnly,
 	}: {
 		stationId?: number;
 		vehicleName?: "RTW" | "POL" | "FW";
+		desktopOnly?: boolean;
 	},
 ) => {
 	const respone = await serverApi.post<{
@@ -65,6 +67,7 @@ export const sendMissionAPI = async (
 	}>(`/mission/${id}/send-alert`, {
 		stationId,
 		vehicleName,
+		desktopOnly,
 	});
 	return respone.data;
 };
--- a/apps/dispatch/app/_store/pilot/connectionStore.ts
+++ b/apps/dispatch/app/_store/pilot/connectionStore.ts
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { dispatchSocket } from "../../(app)/dispatch/socket";
 import { ConnectedAircraft, Mission, MissionSdsLog, Station, User } from "@repo/db";
+import { showToast } from "../../_components/customToasts/HPGnotValidated";
 import { pilotSocket } from "(app)/pilot/socket";
 import { useDmeStore } from "_store/pilot/dmeStore";
 import { useMrtStore } from "_store/pilot/MrtStore";
@@ -132,6 +133,12 @@ pilotSocket.on("mission-alert", (data: Mission & { Stations: Station[] }) => {
 	useDmeStore.getState().setPage({
 		page: "new-mission",
 	});
+	if (
+		data.hpgValidationState === "NOT_VALIDATED" &&
+		usePilotConnectionStore.getState().connectedAircraft?.posH145active
+	) {
+		showToast();
+	}
 });

 pilotSocket.on("sds-message", (sdsMessage: MissionSdsLog) => {
--- a/apps/dispatch/app/_store/pilot/dmeStore.ts
+++ b/apps/dispatch/app/_store/pilot/dmeStore.ts
@@ -36,7 +36,7 @@ type SetPageParams =

 interface MrtStore {
 	page: SetPageParams["page"];
-
+	latestMission: Mission | null;
 	lines: DisplayLineProps[];

 	setPage: (pageData: SetPageParams) => void;
@@ -65,6 +65,7 @@ export const useDmeStore = create<MrtStore>(
 				},
 			],
 			setLines: (lines) => set({ lines }),
+			latestMission: null,
 			setPage: (pageData) => {
 				if (interval) clearInterval(interval);
 				switch (pageData.page) {
@@ -122,6 +123,7 @@ export const useDmeStore = create<MrtStore>(
 					}
 					case "mission": {
 						set({
+							latestMission: pageData.mission,
 							page: "mission",
 							lines: [
 								{
--- a/apps/dispatch/app/api/bookings/route.ts
+++ b/apps/dispatch/app/api/bookings/route.ts
@@ -0,0 +1,42 @@
+import { getPublicUser, prisma } from "@repo/db";
+import { getServerSession } from "api/auth/[...nextauth]/auth";
+import { NextRequest, NextResponse } from "next/server";
+
+export const GET = async (req: NextRequest) => {
+	try {
+		const session = await getServerSession();
+		if (!session?.user) {
+			return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+		}
+
+		const { searchParams } = req.nextUrl;
+		const filter = JSON.parse(searchParams.get("filter") || "{}");
+
+		const bookings = await prisma.booking.findMany({
+			where: filter,
+			include: {
+				User: true,
+				Station: {
+					select: {
+						id: true,
+						bosCallsign: true,
+						bosCallsignShort: true,
+					},
+				},
+			},
+			orderBy: {
+				startTime: "asc",
+			},
+		});
+
+		return NextResponse.json(
+			bookings.map((b) => ({
+				...b,
+				User: b.User ? getPublicUser(b.User) : null,
+			})),
+		);
+	} catch (error) {
+		console.error("Error fetching bookings:", error);
+		return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+	}
+};
--- a/apps/dispatch/app/api/dispatcher/route.ts
+++ b/apps/dispatch/app/api/dispatcher/route.ts
@@ -24,6 +24,7 @@ export async function GET(request: Request): Promise<NextResponse> {
 					...d,
 					user: undefined,
 					publicUser: getPublicUser(d.user),
+					settingsUseHPGAsDispatcher: d.user.settingsUseHPGAsDispatcher,
 				};
 			}),
 			{
--- a/apps/dispatch/app/api/position-log/route.ts
+++ b/apps/dispatch/app/api/position-log/route.ts
@@ -21,9 +21,10 @@ export const PUT = async (req: Request) => {
 		if (!session && !payload) return Response.json({ message: "Unauthorized" }, { status: 401 });

 		const userId = session?.user.id || payload.id;
-		const { position, h145 } = (await req.json()) as {
+		const { position, h145, xPlanePluginActive } = (await req.json()) as {
 			position: PositionLog;
 			h145: boolean;
+			xPlanePluginActive: boolean;
 		};
 		if (!position) {
 			return Response.json({ message: "Missing id or position" });
@@ -61,6 +62,7 @@ export const PUT = async (req: Request) => {
 				posHeading: position.heading,
 				posSpeed: position.speed,
 				posH145active: h145,
+				posXplanePluginActive: xPlanePluginActive,
 			},
 		});

--- a/apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx
+++ b/apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx
@@ -78,6 +78,15 @@ export const ConnectedDispatcher = () => {
 										<div>{asPublicUser(d.publicUser).fullName}</div>
 										<div className="text-xs font-semibold uppercase opacity-60">{d.zone}</div>
 									</div>
+									<div className="mr-2 flex flex-col justify-center">
+										{d.settingsUseHPGAsDispatcher ? (
+											<span className="badge badge-sm badge-success badge-outline">HPG aktiv</span>
+										) : (
+											<span className="badge badge-sm badge-info badge-outline">
+												HPG deaktiviert
+											</span>
+										)}
+									</div>
 									<div>
 										{(() => {
 											const badges = (d.publicUser as unknown as PublicUser).badges
--- a/apps/dispatch/package.json
+++ b/apps/dispatch/package.json
@@ -44,7 +44,7 @@
 		"livekit-client": "^2.15.3",
 		"livekit-server-sdk": "^2.13.1",
 		"lucide-react": "^0.525.0",
-		"next": "^15.4.2",
+		"next": "^15.4.8",
 		"next-auth": "^4.24.11",
 		"npm": "^11.4.2",
 		"postcss": "^8.5.6",
--- a/apps/dispatch/public/icons/ambulance.png
+++ b/apps/dispatch/public/icons/ambulance.png
--- a/apps/dispatch/public/icons/fire_engine.png
+++ b/apps/dispatch/public/icons/fire_engine.png
--- a/apps/dispatch/public/icons/police.png
+++ b/apps/dispatch/public/icons/police.png
--- a/apps/dispatch/public/sounds/notification.mp3
+++ b/apps/dispatch/public/sounds/notification.mp3
--- a/apps/hub/app/(app)/_components/Badges.tsx
+++ b/apps/hub/app/(app)/_components/Badges.tsx
@@ -8,24 +8,22 @@ export const Badges: () => Promise<JSX.Element> = async () => {
 	if (!session) return <div />;

 	return (
-		<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
-			<div className="card-body">
-				<h2 className="card-title justify-between">
-					<span className="card-title">
-						<Award className="w-4 h-4" /> Verdiente Abzeichen
+		<div className="card-body">
+			<h2 className="card-title justify-between">
+				<span className="card-title">
+					<Award className="h-4 w-4" /> Verdiente Abzeichen
+				</span>
+			</h2>
+			<div className="flex flex-wrap gap-2">
+				{session.user.badges.length === 0 && (
+					<span className="text-sm text-gray-500">
+						Noch ziemlich leer hier. Du kannst dir Abzeichen erarbeiten indem du an Events
+						teilnimmst.
 					</span>
-				</h2>
-				<div className="flex flex-wrap gap-2">
-					{session.user.badges.length === 0 && (
-						<span className="text-sm text-gray-500">
-							Noch ziemlich leer hier. Du kannst dir Abzeichen erarbeiten indem du an Events
-							teilnimmst.
-						</span>
-					)}
-					{session.user.badges.map((badge, i) => {
-						return <Badge badge={badge} key={`${badge} - ${i}`} />;
-					})}
-				</div>
+				)}
+				{session.user.badges.map((badge, i) => {
+					return <Badge badge={badge} key={`${badge} - ${i}`} />;
+				})}
 			</div>
 		</div>
 	);
--- a/apps/hub/app/(app)/_components/Bookings.tsx
+++ b/apps/hub/app/(app)/_components/Bookings.tsx
@@ -0,0 +1,66 @@
+import { Calendar } from "lucide-react";
+import { getServerSession } from "../../api/auth/[...nextauth]/auth";
+import { JSX } from "react";
+import { getPublicUser, prisma } from "@repo/db";
+import { formatTimeRange } from "../../../helper/timerange";
+
+export const Bookings: () => Promise<JSX.Element> = async () => {
+	const session = await getServerSession();
+	const futureBookings = await prisma.booking.findMany({
+		where: {
+			startTime: {
+				gte: new Date(),
+				lte: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+			},
+		},
+		orderBy: {
+			startTime: "asc",
+		},
+		include: {
+			User: true,
+			Station: true,
+		},
+	});
+	if (!session) return <div />;
+
+	return (
+		<div className="card-body">
+			<h2 className="card-title justify-between">
+				<span className="card-title">
+					<Calendar className="h-4 w-4" /> Zukünftige Buchungen
+				</span>
+			</h2>
+			<div className="flex flex-wrap gap-2">
+				{futureBookings.length === 0 && (
+					<span className="text-sm text-gray-500">
+						Keine zukünftigen Buchungen. Du kannst dir welche im Buchungssystem erstellen.
+					</span>
+				)}
+				{futureBookings.map((booking) => {
+					return (
+						<div
+							key={booking.id}
+							className={`alert alert-horizontal ${booking.type.startsWith("LST_") ? "alert-success" : "alert-info"} alert-soft px-3 py-2`}
+						>
+							<div className="flex items-center gap-3">
+								<span className="badge badge-outline text-xs">
+									{booking.type.startsWith("LST_")
+										? "LST"
+										: booking.Station?.bosCallsignShort || booking.Station?.bosCallsign}
+								</span>
+								<span className="text-sm font-medium">{getPublicUser(booking.User).fullName}</span>
+							</div>
+							<div className="flex items-center gap-2">
+								<div className="text-right">
+									<p className="text-xs font-medium">
+										{formatTimeRange(booking, { includeDate: true })}
+									</p>
+								</div>
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
--- a/apps/hub/app/(app)/_querys/bookings.ts
+++ b/apps/hub/app/(app)/_querys/bookings.ts
@@ -0,0 +1,38 @@
+import { Booking, Prisma, PublicUser, Station } from "@repo/db";
+import axios from "axios";
+
+export const getBookingsAPI = async (filter: Prisma.BookingWhereInput) => {
+	const res = await axios.get<
+		(Booking & {
+			Station: Station;
+			User: PublicUser;
+		})[]
+	>("/api/bookings", {
+		params: {
+			filter: JSON.stringify(filter),
+		},
+	});
+	if (res.status !== 200) {
+		throw new Error("Failed to fetch stations");
+	}
+	return res.data;
+};
+
+export const createBookingAPI = async (booking: Omit<Prisma.BookingCreateInput, "User">) => {
+	const response = await axios.post("/api/bookings", booking);
+	console.log("Response from createBookingAPI:", response);
+	if (response.status !== 201) {
+		console.error("Error creating booking:", response);
+		throw new Error("Failed to create booking");
+	}
+	console.log("Booking created:", response.data);
+	return response.data;
+};
+
+export const deleteBookingAPI = async (bookingId: string) => {
+	const response = await axios.delete(`/api/bookings/${bookingId}`);
+	if (!response.status.toString().startsWith("2")) {
+		throw new Error("Failed to delete booking");
+	}
+	return bookingId;
+};
--- a/apps/hub/app/(app)/_querys/stations.ts
+++ b/apps/hub/app/(app)/_querys/stations.ts
@@ -0,0 +1,14 @@
+import { Prisma, Station } from "@repo/db";
+import axios from "axios";
+
+export const getStationsAPI = async (filter: Prisma.StationWhereInput) => {
+	const res = await axios.get<Station[]>("/api/stations", {
+		params: {
+			filter: JSON.stringify(filter),
+		},
+	});
+	if (res.status !== 200) {
+		throw new Error("Failed to fetch stations");
+	}
+	return res.data;
+};
--- a/apps/hub/app/(app)/page.tsx
+++ b/apps/hub/app/(app)/page.tsx
@@ -2,6 +2,7 @@ import Events from "./_components/FeaturedEvents";
 import { Stats } from "./_components/Stats";
 import { Badges } from "./_components/Badges";
 import { RecentFlights } from "(app)/_components/RecentFlights";
+import { Bookings } from "(app)/_components/Bookings";

 export default async function Home({
 	searchParams,
@@ -14,10 +15,15 @@ export default async function Home({
 		<div>
 			<Stats stats={view} />
 			<div className="grid grid-cols-6 gap-4">
-				<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+				<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
 					<RecentFlights />
 				</div>
-				<Badges />
+				<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
+					<Bookings />
+				</div>
+				<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
+					<Badges />
+				</div>
 			</div>
 			<Events />
 		</div>
--- a/apps/hub/app/(auth)/logout/page.tsx
+++ b/apps/hub/app/(auth)/logout/page.tsx
@@ -1,16 +1,16 @@
-'use client';
-import { signOut } from 'next-auth/react';
-import { useEffect } from 'react';
+"use client";
+import { signOut } from "next-auth/react";
+import { useEffect } from "react";

 export default () => {
-  useEffect(() => {
-    signOut({
-      callbackUrl: '/login',
-    });
-  }, []);
-  return (
-    <div className="card-body">
-      <h1 className="text-5xl">logging out...</h1>
-    </div>
-  );
+	useEffect(() => {
+		signOut({
+			callbackUrl: "/login",
+		});
+	}, []);
+	return (
+		<div className="card-body">
+			<h1 className="text-5xl">ausloggen...</h1>
+		</div>
+	);
 };
--- a/apps/hub/app/_components/BookingButton.tsx
+++ b/apps/hub/app/_components/BookingButton.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+import { BookingSystem } from "./BookingSystem";
+import { User } from "@repo/db";
+
+interface BookingButtonProps {
+	currentUser: User;
+}
+
+export const BookingButton = ({ currentUser }: BookingButtonProps) => {
+	const [isBookingSystemOpen, setIsBookingSystemOpen] = useState(false);
+
+	// Check if user can access booking system
+	const canAccessBookingSystem = currentUser && currentUser.emailVerified && !currentUser.isBanned;
+
+	// Don't render the button if user doesn't have access
+	if (!canAccessBookingSystem) {
+		return null;
+	}
+
+	return (
+		<>
+			<button
+				className="btn btn-sm btn-ghost tooltip tooltip-bottom"
+				data-tip="Slot Buchung"
+				onClick={() => setIsBookingSystemOpen(true)}
+			>
+				<CalendarIcon size={20} />
+			</button>
+
+			<BookingSystem
+				isOpen={isBookingSystemOpen}
+				onClose={() => setIsBookingSystemOpen(false)}
+				currentUser={currentUser}
+			/>
+		</>
+	);
+};
--- a/apps/hub/app/_components/BookingSystem.tsx
+++ b/apps/hub/app/_components/BookingSystem.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { BookingTimelineModal } from "./BookingTimelineModal";
+import { NewBookingModal } from "./NewBookingModal";
+import { User } from "@repo/db";
+
+interface BookingSystemProps {
+	isOpen: boolean;
+	onClose: () => void;
+	currentUser: User;
+}
+
+export const BookingSystem = ({ isOpen, onClose, currentUser }: BookingSystemProps) => {
+	const [showNewBookingModal, setShowNewBookingModal] = useState(false);
+	const [refreshTimeline, setRefreshTimeline] = useState(0);
+
+	const handleOpenNewBooking = () => {
+		setShowNewBookingModal(true);
+	};
+
+	const handleCloseNewBooking = () => {
+		setShowNewBookingModal(false);
+	};
+
+	const handleBookingCreated = () => {
+		// Trigger a refresh of the timeline
+		setRefreshTimeline((prev) => prev + 1);
+		setShowNewBookingModal(false);
+	};
+
+	const handleCloseMain = () => {
+		setShowNewBookingModal(false);
+		onClose();
+	};
+
+	return (
+		<>
+			<BookingTimelineModal
+				key={refreshTimeline}
+				isOpen={isOpen && !showNewBookingModal}
+				onClose={handleCloseMain}
+				onOpenNewBooking={handleOpenNewBooking}
+				currentUser={currentUser}
+			/>
+
+			<NewBookingModal
+				isOpen={showNewBookingModal}
+				onClose={handleCloseNewBooking}
+				onBookingCreated={handleBookingCreated}
+				userPermissions={currentUser.permissions}
+			/>
+		</>
+	);
+};
--- a/apps/hub/app/_components/BookingTimelineModal.tsx
+++ b/apps/hub/app/_components/BookingTimelineModal.tsx
@@ -0,0 +1,350 @@
+"use client";
+
+import { useState } from "react";
+import { CalendarIcon, Plus, X, ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
+import { Booking, PublicUser, Station, User } from "@repo/db";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { deleteBookingAPI, getBookingsAPI } from "(app)/_querys/bookings";
+import { Button } from "@repo/shared-components";
+import { formatTimeRange } from "../../helper/timerange";
+import toast from "react-hot-toast";
+
+interface BookingTimelineModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	onOpenNewBooking: () => void;
+	currentUser: User;
+}
+
+type ViewMode = "day" | "week" | "month";
+
+export const BookingTimelineModal = ({
+	isOpen,
+	onClose,
+	onOpenNewBooking,
+	currentUser,
+}: BookingTimelineModalProps) => {
+	const queryClient = useQueryClient();
+	const [currentDate, setCurrentDate] = useState(new Date());
+	const [viewMode, setViewMode] = useState<ViewMode>("day");
+	const getTimeRange = () => {
+		const start = new Date(currentDate);
+		const end = new Date(currentDate);
+
+		switch (viewMode) {
+			case "day":
+				start.setHours(0, 0, 0, 0);
+				end.setHours(23, 59, 59, 999);
+				break;
+			case "week": {
+				const dayOfWeek = start.getDay();
+				const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+				start.setDate(start.getDate() + mondayOffset);
+				start.setHours(0, 0, 0, 0);
+				end.setDate(start.getDate() + 6);
+				end.setHours(23, 59, 59, 999);
+				break;
+			}
+			case "month":
+				start.setDate(1);
+				start.setHours(0, 0, 0, 0);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				end.setHours(23, 59, 59, 999);
+				break;
+		}
+
+		return { start, end };
+	};
+
+	const { data: bookings, isLoading: isBookingsLoading } = useQuery({
+		queryKey: ["bookings", getTimeRange().start, getTimeRange().end],
+		queryFn: () =>
+			getBookingsAPI({
+				startTime: {
+					gte: getTimeRange().start,
+				},
+				endTime: {
+					lte: getTimeRange().end,
+				},
+			}),
+	});
+
+	const { mutate: deleteBooking } = useMutation({
+		mutationKey: ["deleteBooking"],
+		mutationFn: async (bookingId: string) => {
+			await deleteBookingAPI(bookingId);
+			queryClient.invalidateQueries({ queryKey: ["bookings"] });
+		},
+		onSuccess: () => {
+			toast.success("Buchung erfolgreich gelöscht");
+		},
+	});
+
+	// Check if user can create bookings
+	const canCreateBookings =
+		currentUser &&
+		currentUser.emailVerified &&
+		!currentUser.isBanned &&
+		(currentUser.permissions.includes("PILOT") || currentUser.permissions.includes("DISPO"));
+
+	// Check if user can delete a booking
+	const canDeleteBooking = (bookingUserPublicId: string) => {
+		if (!currentUser) return false;
+		if (currentUser.permissions.includes("ADMIN_BOOKING")) return true;
+
+		// User can delete their own bookings if they meet basic requirements
+		if (bookingUserPublicId === currentUser.publicId) {
+			return true;
+		}
+
+		// Admins can delete any booking
+		return false;
+	};
+
+	const navigate = (direction: "prev" | "next") => {
+		const newDate = new Date(currentDate);
+
+		switch (viewMode) {
+			case "day":
+				newDate.setDate(newDate.getDate() + (direction === "next" ? 1 : -1));
+				break;
+			case "week":
+				newDate.setDate(newDate.getDate() + (direction === "next" ? 7 : -7));
+				break;
+			case "month":
+				newDate.setMonth(newDate.getMonth() + (direction === "next" ? 1 : -1));
+				break;
+		}
+
+		setCurrentDate(newDate);
+	};
+
+	const formatDateRange = () => {
+		const { start, end } = getTimeRange();
+		const options: Intl.DateTimeFormatOptions = {
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric",
+		};
+
+		switch (viewMode) {
+			case "day":
+				return start.toLocaleDateString("de-DE", options);
+			case "week":
+				return `${start.toLocaleDateString("de-DE", options)} - ${end.toLocaleDateString("de-DE", options)}`;
+			case "month":
+				return start.toLocaleDateString("de-DE", { month: "long", year: "numeric" });
+		}
+	};
+
+	const groupBookingsByResource = () => {
+		if (!bookings) return {};
+		// For day view, group by resource (station/type)
+		if (viewMode === "day") {
+			const groups: Record<string, (Booking & { Station: Station; User: PublicUser })[]> = {};
+
+			bookings.forEach((booking) => {
+				let key: string = booking.type;
+				if (booking.Station) {
+					key = `${booking.Station.bosCallsign}`;
+				}
+
+				if (!groups[key]) {
+					groups[key] = [];
+				}
+				groups[key]!.push(booking);
+			});
+
+			// Sort bookings within each group, LST_ types first, then alphanumerical
+			Object.keys(groups).forEach((key) => {
+				groups[key] = groups[key]!.sort((a, b) => {
+					const aIsLST = a.type.startsWith("LST_");
+					const bIsLST = b.type.startsWith("LST_");
+					if (aIsLST && !bIsLST) return -1;
+					if (!aIsLST && bIsLST) return 1;
+					// Within same category (both LST_ or both non-LST_), sort alphanumerically by type
+					return a.type.localeCompare(b.type);
+				});
+			});
+
+			// Sort the groups themselves - LST_ types first, then alphabetical
+			const sortedGroups: Record<string, (Booking & { Station: Station; User: PublicUser })[]> = {};
+			Object.keys(groups)
+				.sort((a, b) => {
+					// Check if groups contain LST_ types
+					const aHasLST = groups[a]?.some((booking) => booking.type.startsWith("LST_"));
+					const bHasLST = groups[b]?.some((booking) => booking.type.startsWith("LST_"));
+					if (aHasLST && !bHasLST) return -1;
+					if (!aHasLST && bHasLST) return 1;
+					// Within same category, sort alphabetically by group name
+					return a.localeCompare(b);
+				})
+				.forEach((key) => {
+					sortedGroups[key] = groups[key]!;
+				});
+
+			return sortedGroups;
+		}
+
+		// For week and month views, group by date
+		const groups: Record<string, (Booking & { Station: Station; User: PublicUser })[]> = {};
+
+		bookings.forEach((booking) => {
+			const dateKey = new Date(booking.startTime).toLocaleDateString("de-DE", {
+				weekday: "long",
+				day: "2-digit",
+				month: "2-digit",
+				year: "numeric",
+			});
+
+			if (!groups[dateKey]) {
+				groups[dateKey] = [];
+			}
+			groups[dateKey]!.push(booking);
+		});
+
+		// Sort groups by date for week/month view and sort bookings within each group
+		const sortedGroups: Record<string, (Booking & { Station: Station; User: PublicUser })[]> = {};
+		Object.keys(groups)
+			.sort((a, b) => {
+				// Extract date from the formatted string and compare
+				const dateA = groups[a]?.[0]?.startTime;
+				const dateB = groups[b]?.[0]?.startTime;
+				if (!dateA || !dateB) return 0;
+				return new Date(dateA).getTime() - new Date(dateB).getTime();
+			})
+			.forEach((key) => {
+				const bookingsForKey = groups[key];
+				if (bookingsForKey) {
+					// Sort bookings within each date group, LST_ types first, then alphanumerical
+					sortedGroups[key] = bookingsForKey.sort((a, b) => {
+						const aIsLST = a.type.startsWith("LST_");
+						const bIsLST = b.type.startsWith("LST_");
+						if (aIsLST && !bIsLST) return -1;
+						if (!aIsLST && bIsLST) return 1;
+						// Within same category (both LST_ or both non-LST_), sort alphanumerically by type
+						return a.type.localeCompare(b.type);
+					});
+				}
+			});
+
+		return sortedGroups;
+	};
+
+	if (!isOpen) return null;
+
+	const groupedBookings = groupBookingsByResource();
+
+	return (
+		<div className="modal modal-open">
+			<div className="modal-box flex max-h-[83vh] w-11/12 max-w-7xl flex-col">
+				<div className="mb-4 flex items-center justify-between">
+					<h3 className="flex items-center gap-2 text-lg font-bold">
+						<CalendarIcon size={24} />
+						Slot Buchung
+					</h3>
+					<button className="btn btn-sm btn-circle btn-ghost" onClick={onClose}>
+						<X size={20} />
+					</button>
+				</div>
+
+				{/* Controls */}
+				<div className="mb-6 flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						<button className="btn btn-sm btn-ghost" onClick={() => navigate("prev")}>
+							<ChevronLeft size={16} />
+						</button>
+						<span className="min-w-[200px] text-center font-medium">{formatDateRange()}</span>
+						<button className="btn btn-sm btn-ghost" onClick={() => navigate("next")}>
+							<ChevronRight size={16} />
+						</button>
+					</div>
+
+					<div className="join">
+						{(["day", "week", "month"] as ViewMode[]).map((mode) => (
+							<button
+								key={mode}
+								className={`btn btn-sm join-item ${viewMode === mode ? "btn-active" : ""}`}
+								onClick={() => setViewMode(mode)}
+							>
+								{mode === "day" ? "Tag" : mode === "week" ? "Woche" : "Monat"}
+							</button>
+						))}
+					</div>
+				</div>
+
+				{isBookingsLoading ? (
+					<div className="flex justify-center py-8">
+						<span className="loading loading-spinner loading-lg"></span>
+					</div>
+				) : (
+					<div className="grid max-h-[calc(83vh-200px)] grid-cols-1 gap-3 overflow-y-auto md:grid-cols-2">
+						{Object.entries(groupedBookings).map(([groupName, resourceBookings]) => (
+							<div key={groupName} className="card bg-base-200 shadow-sm">
+								<div className="card-body p-3">
+									<h4 className="mb-2 text-sm font-medium opacity-70">
+										{viewMode === "day" ? groupName : groupName}
+									</h4>
+									<div className="space-y-1">
+										{resourceBookings.map((booking) => (
+											<div
+												key={booking.id}
+												className={`alert alert-horizontal ${booking.type.startsWith("LST_") ? "alert-success" : "alert-info"} alert-soft px-3 py-2`}
+											>
+												<div className="flex items-center gap-3">
+													<span className="badge badge-outline text-xs">
+														{booking.type.startsWith("LST_")
+															? "LST"
+															: booking.Station.bosCallsignShort || booking.Station.bosCallsign}
+													</span>
+													<span className="text-sm font-medium">{booking.User.fullName}</span>
+												</div>
+												<div className="flex items-center gap-2">
+													<div className="text-right">
+														<p className="text-xs font-medium">{formatTimeRange(booking)}</p>
+													</div>
+													{canDeleteBooking(booking.User.publicId) && (
+														<Button
+															onClick={() => deleteBooking(booking.id)}
+															className={`btn btn-xs ${
+																currentUser?.permissions.includes("ADMIN_EVENT") &&
+																booking.User.publicId !== currentUser.publicId
+																	? "btn-error"
+																	: "btn-neutral"
+															}`}
+															title="Buchung löschen"
+														>
+															<Trash2 size={12} />
+														</Button>
+													)}
+												</div>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						))}
+						{Object.keys(groupedBookings).length === 0 && !isBookingsLoading && (
+							<div className="col-span-full py-8 text-center opacity-70">
+								Keine Buchungen im aktuellen Zeitraum gefunden
+							</div>
+						)}
+					</div>
+				)}
+
+				<div className="modal-action">
+					{canCreateBookings && (
+						<button className="btn btn-primary" onClick={onOpenNewBooking}>
+							<Plus size={20} />
+							Neue Buchung
+						</button>
+					)}
+					<button className="btn" onClick={onClose}>
+						Schließen
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};
--- a/apps/hub/app/_components/Nav.tsx
+++ b/apps/hub/app/_components/Nav.tsx
@@ -13,6 +13,7 @@ import { getServerSession } from "api/auth/[...nextauth]/auth";
 import { Error } from "./Error";
 import Image from "next/image";
 import { Plane, Radar, Workflow } from "lucide-react";
+import { BookingButton } from "./BookingButton";

 export const VerticalNav = async () => {
 	const session = await getServerSession();
@@ -134,6 +135,9 @@ export const HorizontalNav = async () => {
 			</div>
 			<div className="ml-auto flex items-center">
 				<ul className="flex items-center space-x-2 px-1">
+					<li>
+						<BookingButton currentUser={session?.user} />
+					</li>
 					<li>
 						<a
 							href={process.env.NEXT_PUBLIC_DISPATCH_URL + "/tracker"}
--- a/apps/hub/app/_components/NewBookingModal.tsx
+++ b/apps/hub/app/_components/NewBookingModal.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { X, CalendarIcon, Clock } from "lucide-react";
+import toast from "react-hot-toast";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getStationsAPI } from "(app)/_querys/stations";
+import { createBookingAPI } from "(app)/_querys/bookings";
+import { Button } from "@repo/shared-components";
+import { useRouter } from "next/navigation";
+import { AxiosError } from "axios";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { DateInput } from "_components/ui/DateInput";
+import { Select } from "_components/ui/Select";
+
+interface NewBookingFormData {
+	type: "STATION" | "LST_01" | "LST_02" | "LST_03" | "LST_04";
+	stationId?: number;
+	startTime: string;
+	endTime: string;
+	title?: string;
+	description?: string;
+}
+
+interface NewBookingModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	onBookingCreated: () => void;
+	userPermissions: string[];
+}
+
+export const NewBookingModal = ({
+	isOpen,
+	onClose,
+	onBookingCreated,
+	userPermissions,
+}: NewBookingModalProps) => {
+	const queryClient = useQueryClient();
+	const { data: stations, isLoading: isLoadingStations } = useQuery({
+		queryKey: ["stations"],
+		queryFn: () => getStationsAPI({}),
+	});
+	const router = useRouter();
+	const { mutate: createBooking, isPending: isCreateBookingLoading } = useMutation({
+		mutationKey: ["createBooking"],
+		mutationFn: createBookingAPI,
+		onMutate() {
+			// Optionally show a loading toast or indicator
+			toast.loading("Buchung wird erstellt...", { id: "createBooking" });
+		},
+		onError(error: AxiosError) {
+			const errorData = error.response?.data as { error?: string };
+			toast.error(errorData?.error || "Fehler beim Erstellen der Buchung", { id: "createBooking" });
+		},
+		onSuccess: () => {
+			toast.success("Buchung erfolgreich erstellt", { id: "createBooking" });
+			queryClient.invalidateQueries({ queryKey: ["bookings"] });
+			onBookingCreated();
+			onClose();
+			router.refresh();
+		},
+	});
+
+	const newBookingSchema = z
+		.object({
+			type: z.enum(["STATION", "LST_01", "LST_02", "LST_03", "LST_04"], {
+				message: "Bitte wähle einen Typ aus",
+			}),
+			stationId: z.number().optional(),
+			startTime: z.string(),
+			endTime: z.string(),
+			title: z.string().optional(),
+			description: z.string().optional(),
+		})
+		.superRefine((data, ctx) => {
+			const start = new Date(data.startTime);
+			const end = new Date(data.endTime);
+			if (end <= start) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					message: "Endzeit muss nach der Startzeit liegen",
+					path: ["endTime"],
+				});
+			}
+		});
+
+	const form = useForm<NewBookingFormData>({
+		resolver: zodResolver(newBookingSchema),
+	});
+	const {
+		register,
+		handleSubmit,
+		watch,
+		setValue,
+		reset,
+		formState: { errors },
+	} = form;
+	const selectedType = watch("type");
+	const hasDISPOPermission = userPermissions.includes("DISPO");
+
+	// Reset form when modal opens
+	useEffect(() => {
+		if (isOpen) {
+			reset();
+			// Set default datetime to current hour
+			const now = new Date();
+			const currentHour = new Date(
+				now.getFullYear(),
+				now.getMonth(),
+				now.getDate(),
+				now.getHours(),
+				0,
+				0,
+			);
+			const nextHour = new Date(currentHour.getTime() + 60 * 60 * 1000);
+
+			setValue("startTime", currentHour.toISOString().slice(0, 16));
+			setValue("endTime", nextHour.toISOString().slice(0, 16));
+		}
+	}, [isOpen, reset, setValue]);
+
+	if (!isOpen) return null;
+
+	return (
+		<div className="modal modal-open">
+			<div className="modal-box max-w-2xl">
+				{/* Header */}
+				<div className="mb-6 flex items-center justify-between">
+					<h3 className="flex items-center gap-2 text-lg font-bold">
+						<CalendarIcon size={24} />
+						Neue Buchung erstellen
+					</h3>
+					<button className="btn btn-sm btn-circle btn-ghost" onClick={onClose}>
+						<X size={20} />
+					</button>
+				</div>
+
+				{/* Form */}
+				<form onSubmit={handleSubmit((data) => createBooking(data))} className="space-y-6">
+					{/* Resource Type Selection */}
+					<div className="form-control">
+						<label className="label">
+							<span className="label-text font-semibold">Station *</span>
+						</label>
+						<select {...register("type")} className="select select-bordered w-full">
+							<option value="">Typ auswählen...</option>
+							<option value="STATION">Station</option>
+							{hasDISPOPermission && (
+								<>
+									<option value="LST_01">Leitstelle</option>
+								</>
+							)}
+						</select>
+						{errors.type && (
+							<label className="label">
+								<span className="label-text-alt text-error">{errors.type.message}</span>
+							</label>
+						)}
+					</div>
+
+					{/* Station Selection (only if STATION type is selected) */}
+					{selectedType === "STATION" && (
+						<div className="form-control">
+							<label className="label">
+								<span className="label-text font-semibold">Station *</span>
+							</label>
+							{isLoadingStations ? (
+								<div className="skeleton h-12 w-full"></div>
+							) : (
+								<Select
+									label="Station"
+									name="stationId"
+									form={form}
+									options={stations?.map((s) => {
+										return {
+											value: s.id,
+											label: `${s.bosCallsign} - ${s.locationState} (${s.aircraft})`,
+										};
+									})}
+								/>
+							)}
+							{errors.stationId && (
+								<label className="label">
+									<span className="label-text-alt text-error">{errors.stationId.message}</span>
+								</label>
+							)}
+						</div>
+					)}
+
+					{/* Time Selection */}
+					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div className="form-control">
+							<label className="label">
+								<span className="label-text flex items-center gap-1 font-semibold">
+									<Clock size={16} />
+									Startzeit *
+								</span>
+							</label>
+							<DateInput
+								type="datetime-local"
+								value={new Date(watch("startTime") || Date.now())}
+								onChange={(date) => {
+									setValue("startTime", date.toISOString());
+									if (new Date(date) >= new Date(watch("endTime"))) {
+										const newEndTime = new Date(new Date(date).getTime() + 60 * 60 * 3000);
+										setValue("endTime", newEndTime.toISOString().slice(0, 16));
+									}
+								}}
+								className="input input-bordered w-full"
+							/>
+							{errors.startTime && (
+								<label className="label">
+									<span className="label-text-alt text-error">{errors.startTime.message}</span>
+								</label>
+							)}
+						</div>
+
+						<div className="form-control">
+							<label className="label">
+								<span className="label-text flex items-center gap-1 font-semibold">
+									<Clock size={16} />
+									Endzeit *
+								</span>
+							</label>
+							<DateInput
+								type="datetime-local"
+								value={new Date(watch("endTime") || Date.now())}
+								onChange={(date) => {
+									setValue("endTime", date.toISOString());
+								}}
+								className="input input-bordered w-full"
+							/>
+							{errors.endTime && (
+								<label className="label">
+									<span className="label-text-alt text-error">{errors.endTime.message}</span>
+								</label>
+							)}
+						</div>
+					</div>
+
+					{/* Actions */}
+					<div className="modal-action">
+						<Button type="submit" className="btn btn-primary" isLoading={isCreateBookingLoading}>
+							Buchung erstellen
+						</Button>
+						<button type="button" className="btn" onClick={onClose}>
+							Abbrechen
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+};
--- a/apps/hub/app/_components/timeline.css
+++ b/apps/hub/app/_components/timeline.css
@@ -0,0 +1,151 @@
+/* Timeline Custom Styles for Dark/Light Mode */
+
+/* Light Mode (default) */
+.react-calendar-timeline {
+	background-color: oklch(var(--b1));
+	color: oklch(var(--bc));
+}
+
+.react-calendar-timeline .rct-cursor-line {
+	background-color: oklch(var(--p));
+}
+
+.react-calendar-timeline .rct-sidebar {
+	background-color: oklch(var(--b2));
+	border-right: 1px solid oklch(var(--b3));
+}
+
+.react-calendar-timeline .rct-sidebar-row {
+	border-bottom: 1px solid oklch(var(--b3));
+	color: oklch(var(--bc));
+}
+
+.react-calendar-timeline .rct-header {
+	background-color: oklch(var(--b2)) !important;
+	border-bottom: 1px solid oklch(var(--b3));
+}
+
+.react-calendar-timeline .rct-header-root {
+	background-color: oklch(var(--b2)) !important;
+	border-bottom: 1px solid oklch(var(--b3));
+}
+
+.react-calendar-timeline .rct-dateHeader {
+	color: oklch(var(--bc)) !important;
+	background-color: oklch(var(--b2)) !important;
+	border-right: 1px solid oklch(var(--b3));
+}
+
+.react-calendar-timeline .rct-dateHeader-primary {
+	background-color: oklch(var(--b2)) !important;
+	color: oklch(var(--bc)) !important;
+	border-bottom: 1px solid oklch(var(--b3));
+}
+
+/* Fix for any nested date header elements */
+.react-calendar-timeline .rct-dateHeader * {
+	color: oklch(var(--bc)) !important;
+	background-color: transparent !important;
+}
+
+.react-calendar-timeline .rct-scroll {
+	background-color: oklch(var(--b1));
+}
+
+.react-calendar-timeline .rct-items {
+	background-color: oklch(var(--b1));
+}
+
+.react-calendar-timeline .rct-item {
+	background-color: oklch(var(--p));
+	color: oklch(var(--pc));
+	border: 1px solid oklch(var(--pf));
+	border-radius: 4px;
+}
+
+.react-calendar-timeline .rct-item.selected {
+	background-color: oklch(var(--s));
+	color: oklch(var(--sc));
+	border-color: oklch(var(--sf));
+}
+
+/* Timeline item type specific colors */
+.timeline-item.station {
+	background-color: oklch(var(--p)) !important;
+	border-color: oklch(var(--pf)) !important;
+}
+
+.timeline-item.lst_01 {
+	background-color: oklch(var(--s)) !important;
+	border-color: oklch(var(--sf)) !important;
+}
+
+.timeline-item.lst_02 {
+	background-color: oklch(var(--a)) !important;
+	border-color: oklch(var(--af)) !important;
+}
+
+.timeline-item.lst_03 {
+	background-color: oklch(var(--n)) !important;
+	border-color: oklch(var(--nf)) !important;
+}
+
+.timeline-item.lst_04 {
+	background-color: oklch(var(--in)) !important;
+	border-color: oklch(var(--inf)) !important;
+}
+
+/* Station booking colors - dynamic colors for different stations */
+.timeline-item.station {
+	background-color: oklch(var(--p)) !important;
+	border-color: oklch(var(--pf)) !important;
+}
+
+/* Additional station colors for variety when multiple stations are booked */
+.timeline-item.station:nth-child(odd) {
+	background-color: oklch(var(--p)) !important;
+	border-color: oklch(var(--pf)) !important;
+}
+
+.timeline-item.station:nth-child(even) {
+	background-color: oklch(var(--s)) !important;
+	border-color: oklch(var(--sf)) !important;
+}
+
+/* Vertical lines */
+.react-calendar-timeline .rct-vertical-line {
+	border-left: 1px solid oklch(var(--b3));
+}
+
+.react-calendar-timeline .rct-horizontal-line {
+	border-bottom: 1px solid oklch(var(--b3));
+}
+
+/* Today line */
+.react-calendar-timeline .rct-today {
+	background-color: oklch(var(--er) / 0.2);
+}
+
+/* Hover effects */
+.react-calendar-timeline .rct-item:hover {
+	filter: brightness(1.1);
+}
+
+/* Scrollbar styling for dark mode compatibility */
+.react-calendar-timeline ::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+.react-calendar-timeline ::-webkit-scrollbar-track {
+	background: oklch(var(--b2));
+}
+
+.react-calendar-timeline ::-webkit-scrollbar-thumb {
+	background: oklch(var(--b3));
+	border-radius: 4px;
+}
+
+.react-calendar-timeline ::-webkit-scrollbar-thumb:hover {
+	background: oklch(var(--bc) / 0.3);
+}
--- a/apps/hub/app/_components/ui/DateInput.tsx
+++ b/apps/hub/app/_components/ui/DateInput.tsx
@@ -12,7 +12,7 @@ export const DateInput = ({
 		<input
 			type="datetime-local"
 			className="input"
-			value={formatDate(value || new Date(), "yyyy-MM-dd hh:mm")}
+			value={formatDate(value || new Date(), "yyyy-MM-dd HH:mm")}
 			onChange={(e) => {
 				const date = e.target.value ? new Date(e.target.value) : null;
 				if (!date) return;
--- a/apps/hub/app/api/bookings/[id]/route.ts
+++ b/apps/hub/app/api/bookings/[id]/route.ts
@@ -0,0 +1,136 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@repo/db";
+import { getServerSession } from "../../auth/[...nextauth]/auth";
+
+// DELETE /api/booking/[id] - Delete a booking
+export const DELETE = async (req: NextRequest, { params }: { params: { id: string } }) => {
+	try {
+		console.log(params);
+		const session = await getServerSession();
+		if (!session?.user) {
+			return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+		}
+
+		const bookingId = params.id;
+
+		// Find the booking
+		const booking = await prisma.booking.findUnique({
+			where: { id: bookingId },
+		});
+
+		if (!booking) {
+			return NextResponse.json({ error: "Booking not found" }, { status: 404 });
+		}
+
+		// Check if user owns the booking or has admin permissions
+		if (booking.userId !== session.user.id && !session.user.permissions.includes("ADMIN_KICK")) {
+			return NextResponse.json({ error: "Insufficient permissions" }, { status: 403 });
+		}
+
+		// Delete the booking
+		await prisma.booking.delete({
+			where: { id: bookingId },
+		});
+
+		return NextResponse.json({ success: true });
+	} catch (error) {
+		console.error("Error deleting booking:", error);
+		return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+	}
+};
+
+// PUT /api/booking/[id] - Update a booking
+export const PUT = async (req: NextRequest, { params }: { params: { id: string } }) => {
+	try {
+		const session = await getServerSession();
+		if (!session?.user) {
+			return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+		}
+
+		const bookingId = params.id;
+		const body = await req.json();
+		const { type, stationId, startTime, endTime } = body;
+
+		// Find the booking
+		const existingBooking = await prisma.booking.findUnique({
+			where: { id: bookingId },
+		});
+
+		if (!existingBooking) {
+			return NextResponse.json({ error: "Booking not found" }, { status: 404 });
+		}
+
+		// Check if user owns the booking or has admin permissions
+		if (
+			existingBooking.userId !== session.user.id &&
+			!session.user.permissions.includes("ADMIN_KICK")
+		) {
+			return NextResponse.json({ error: "Insufficient permissions" }, { status: 403 });
+		}
+
+		// Validate permissions for LST bookings
+		const lstTypes = ["LST_01", "LST_02", "LST_03", "LST_04"];
+		if (lstTypes.includes(type)) {
+			if (!session.user.permissions.includes("DISPO")) {
+				return NextResponse.json(
+					{ error: "Insufficient permissions for LST booking" },
+					{ status: 403 },
+				);
+			}
+		}
+
+		// Check for conflicts (excluding current booking)
+		const conflictWhere = {
+			id: { not: bookingId },
+			type,
+			OR: [
+				{
+					startTime: {
+						lt: new Date(endTime),
+					},
+					endTime: {
+						gt: new Date(startTime),
+					},
+				},
+			],
+			...(type === "STATION" && stationId ? { stationId } : {}),
+		};
+
+		const conflictingBooking = await prisma.booking.findFirst({
+			where: conflictWhere,
+		});
+
+		if (conflictingBooking) {
+			const resourceName = type === "STATION" ? `Station` : type;
+			return NextResponse.json(
+				{ error: `Konflikt erkannt: ${resourceName} ist bereits für diesen Zeitraum gebucht.` },
+				{ status: 409 },
+			);
+		}
+
+		// Update the booking
+		const updatedBooking = await prisma.booking.update({
+			where: { id: bookingId },
+			data: {
+				type,
+				stationId: type === "STATION" ? stationId : null,
+				startTime: new Date(startTime),
+				endTime: new Date(endTime),
+			},
+			include: {
+				User: true,
+				Station: {
+					select: {
+						id: true,
+						bosCallsignShort: true,
+					},
+				},
+			},
+		});
+
+		return NextResponse.json({ booking: updatedBooking });
+	} catch (error) {
+		console.error("Error updating booking:", error);
+		return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+	}
+};
--- a/apps/hub/app/api/bookings/route.ts
+++ b/apps/hub/app/api/bookings/route.ts
@@ -0,0 +1,151 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getPublicUser, prisma } from "@repo/db";
+import { getServerSession } from "../auth/[...nextauth]/auth";
+
+// GET /api/booking - Get all bookings for the timeline
+export const GET = async (req: NextRequest) => {
+	try {
+		const session = await getServerSession();
+		if (!session?.user) {
+			return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+		}
+
+		const { searchParams } = req.nextUrl;
+		const filter = JSON.parse(searchParams.get("filter") || "{}");
+
+		const bookings = await prisma.booking.findMany({
+			where: filter,
+			include: {
+				User: true,
+				Station: {
+					select: {
+						id: true,
+						bosCallsign: true,
+						bosCallsignShort: true,
+					},
+				},
+			},
+			orderBy: {
+				startTime: "asc",
+			},
+		});
+
+		return NextResponse.json(
+			bookings.map((b) => ({
+				...b,
+				User: b.User ? getPublicUser(b.User) : null,
+			})),
+		);
+	} catch (error) {
+		console.error("Error fetching bookings:", error);
+		return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+	}
+};
+
+// POST /api/booking - Create a new booking
+export const POST = async (req: NextRequest) => {
+	try {
+		const session = await getServerSession();
+		if (!session?.user) {
+			return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+		}
+
+		const body = await req.json();
+		const { type, stationId, startTime, endTime } = body;
+
+		// Convert stationId to integer if provided
+		const parsedStationId = stationId ? parseInt(stationId, 10) : null;
+
+		// Validate required fields
+		if (!type || !startTime || !endTime) {
+			return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
+		}
+
+		// Validate permissions for LST bookings
+		const lstTypes = ["LST_01", "LST_02", "LST_03", "LST_04"];
+		if (lstTypes.includes(type)) {
+			if (!session.user.permissions.includes("DISPO")) {
+				return NextResponse.json(
+					{ error: "Insufficient permissions for LST booking" },
+					{ status: 403 },
+				);
+			}
+		}
+
+		// Validate station requirement for STATION type
+		if (type === "STATION" && !parsedStationId) {
+			return NextResponse.json(
+				{ error: "Station ID required for station booking" },
+				{ status: 400 },
+			);
+		}
+
+		// Validate that stationId is a valid integer when provided
+		if (stationId && (isNaN(parsedStationId!) || parsedStationId! <= 0)) {
+			return NextResponse.json({ error: "Invalid station ID" }, { status: 400 });
+		}
+
+		// Check for conflicts
+		const conflictWhere: Record<string, unknown> = {
+			type,
+			OR: [
+				{
+					startTime: {
+						lt: new Date(endTime),
+					},
+					endTime: {
+						gt: new Date(startTime),
+					},
+				},
+			],
+		};
+
+		if (type === "STATION" && parsedStationId) {
+			conflictWhere.stationId = parsedStationId;
+		}
+
+		const existingBooking = await prisma.booking.findFirst({
+			where: conflictWhere,
+		});
+
+		if (existingBooking) {
+			const resourceName = type === "STATION" ? `Station` : type;
+			return NextResponse.json(
+				{ error: `Konflikt erkannt: ${resourceName} ist bereits für diesen Zeitraum gebucht.` },
+				{ status: 409 },
+			);
+		}
+
+		// Create the booking
+		const booking = await prisma.booking.create({
+			data: {
+				userId: session.user.id,
+				type,
+				stationId: type === "STATION" ? parsedStationId : null,
+				startTime: new Date(startTime),
+				endTime: new Date(endTime),
+			},
+			include: {
+				User: {
+					select: {
+						id: true,
+						firstname: true,
+						lastname: true,
+					},
+				},
+				Station: {
+					select: {
+						id: true,
+						bosCallsign: true,
+						bosCallsignShort: true,
+					},
+				},
+			},
+		});
+
+		return NextResponse.json(booking, { status: 201 });
+	} catch (error) {
+		console.error("Error creating booking:", error);
+		return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+	}
+};
--- a/apps/hub/app/api/stations/route.ts
+++ b/apps/hub/app/api/stations/route.ts
@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@repo/db";
+import { getServerSession } from "../auth/[...nextauth]/auth";
+
+// GET /api/station - Get all stations for booking selection
+export const GET = async () => {
+	try {
+		const session = await getServerSession();
+		if (!session?.user) {
+			return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+		}
+
+		const stations = await prisma.station.findMany({
+			select: {
+				id: true,
+				bosCallsign: true,
+				bosCallsignShort: true,
+				locationState: true,
+				operator: true,
+				aircraft: true,
+			},
+			orderBy: {
+				bosCallsignShort: "asc",
+			},
+		});
+
+		return NextResponse.json(stations);
+	} catch (error) {
+		console.error("Error fetching stations:", error);
+		return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+	}
+};
--- a/apps/hub/helper/timerange.ts
+++ b/apps/hub/helper/timerange.ts
@@ -0,0 +1,11 @@
+import { Booking } from "@repo/db";
+
+export const formatTimeRange = (booking: Booking, options?: { includeDate?: boolean }) => {
+	const start = new Date(booking.startTime);
+	const end = new Date(booking.endTime);
+	const timeRange = `${start.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })} - ${end.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })}`;
+	if (options?.includeDate) {
+		return `${start.toLocaleDateString("de-DE")} ${timeRange}`;
+	}
+	return timeRange;
+};
--- a/apps/hub/package.json
+++ b/apps/hub/package.json
@@ -36,12 +36,14 @@
 		"jsonwebtoken": "^9.0.2",
 		"lodash": "^4.17.21",
 		"lucide-react": "^0.525.0",
-		"next": "^15.4.2",
+		"moment": "^2.30.1",
+		"next": "^15.4.8",
 		"next-auth": "^4.24.11",
 		"next-remove-imports": "^1.0.12",
 		"npm": "^11.4.2",
 		"postcss": "^8.5.6",
 		"react": "^19.1.0",
+		"react-calendar-timeline": "0.30.0-beta.3",
 		"react-datepicker": "^8.4.0",
 		"react-day-picker": "^9.8.0",
 		"react-dom": "^19.1.0",
@@ -56,6 +58,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.31.0",
+		"@types/react-calendar-timeline": "^0.28.6",
 		"eslint": "^9.31.0",
 		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.37.0"
--- a/packages/database/prisma/json/MissionXplaneObjects.ts
+++ b/packages/database/prisma/json/MissionXplaneObjects.ts
@@ -0,0 +1,7 @@
+export interface XplaneObject {
+	objectName: string;
+	lat: number;
+	lon: number;
+	heading: number;
+	alt: number;
+}
--- a/packages/database/prisma/json/SocketEvents.ts
+++ b/packages/database/prisma/json/SocketEvents.ts
@@ -50,9 +50,20 @@ export type MissionAutoClose = {
 	};
 };

+export type MissionClosed = {
+	type: "mission-closed";
+	status: "closed";
+	message: string;
+	data: {
+		missionId: number;
+		publicMissionId: string;
+	};
+};
+
 export type NotificationPayload =
 	| ValidationFailed
 	| ValidationSuccess
 	| AdminMessage
 	| StationStatus
-	| MissionAutoClose;
+	| MissionAutoClose
+	| MissionClosed;
--- a/packages/database/prisma/json/index.ts
+++ b/packages/database/prisma/json/index.ts
@@ -3,3 +3,4 @@ export * from "./MissionVehicleLog";
 export * from "./User";
 export * from "./OSMway";
 export * from "./SocketEvents";
+export * from "./MissionXplaneObjects";
--- a/packages/database/prisma/schema/booking.prisma
+++ b/packages/database/prisma/schema/booking.prisma
@@ -0,0 +1,26 @@
+enum BOOKING_TYPE {
+    STATION
+    LST_01
+    LST_02
+    LST_03
+    LST_04
+}
+
+model Booking {
+    id        String       @id @default(uuid())
+    userId    String       @map(name: "user_id")
+    type      BOOKING_TYPE
+    stationId Int?         @map(name: "station_id")
+    startTime DateTime     @map(name: "start_time")
+    endTime   DateTime     @map(name: "end_time")
+    createdAt DateTime     @default(now()) @map(name: "created_at")
+    updatedAt DateTime     @updatedAt @map(name: "updated_at")
+
+    // Relations
+    User    User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+    Station Station? @relation(fields: [stationId], references: [id], onDelete: Cascade)
+
+    @@index([startTime, endTime])
+    @@index([type, startTime, endTime])
+    @@map(name: "bookings")
+}
--- a/packages/database/prisma/schema/connectedAircraft.prisma
+++ b/packages/database/prisma/schema/connectedAircraft.prisma
@@ -1,21 +1,22 @@
 model ConnectedAircraft {
-    id                 Int       @id @default(autoincrement())
-    userId             String
-    publicUser         Json
-    lastHeartbeat      DateTime  @default(now())
-    fmsStatus          String    @default("6")
+    id                    Int       @id @default(autoincrement())
+    userId                String
+    publicUser            Json
+    lastHeartbeat         DateTime  @default(now())
+    fmsStatus             String    @default("6")
    // position:
-    posLat             Float?
-    posLng             Float?
-    posAlt             Int?
-    posSpeed           Int?
-    posHeading         Int?
-    simulator          String?
-    posH145active      Boolean   @default(false)
-    stationId          Int
-    loginTime          DateTime  @default(now())
-    esimatedLogoutTime DateTime?
-    logoutTime         DateTime?
+    posLat                Float?
+    posLng                Float?
+    posAlt                Int?
+    posSpeed              Int?
+    posHeading            Int?
+    simulator             String?
+    posH145active         Boolean   @default(false)
+    posXplanePluginActive Boolean   @default(false)
+    stationId             Int
+    loginTime             DateTime  @default(now())
+    esimatedLogoutTime    DateTime?
+    logoutTime            DateTime?

    // relations:
    User        User          @relation(fields: [userId], references: [id], onDelete: Cascade)
--- a/packages/database/prisma/schema/migrations/20250918174836_bookings/migration.sql
+++ b/packages/database/prisma/schema/migrations/20250918174836_bookings/migration.sql
@@ -0,0 +1,28 @@
+-- CreateEnum
+CREATE TYPE "BOOKING_TYPE" AS ENUM ('STATION', 'LST_01', 'LST_02', 'LST_03', 'LST_04');
+
+-- CreateTable
+CREATE TABLE "bookings" (
+    "id" TEXT NOT NULL,
+    "user_id" TEXT NOT NULL,
+    "type" "BOOKING_TYPE" NOT NULL,
+    "station_id" INTEGER,
+    "start_time" TIMESTAMP(3) NOT NULL,
+    "end_time" TIMESTAMP(3) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "bookings_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "bookings_start_time_end_time_idx" ON "bookings"("start_time", "end_time");
+
+-- CreateIndex
+CREATE INDEX "bookings_type_start_time_end_time_idx" ON "bookings"("type", "start_time", "end_time");
+
+-- AddForeignKey
+ALTER TABLE "bookings" ADD CONSTRAINT "bookings_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "bookings" ADD CONSTRAINT "bookings_station_id_fkey" FOREIGN KEY ("station_id") REFERENCES "Station"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/packages/database/prisma/schema/migrations/20250920195433_admin_booking_permission/migration.sql
+++ b/packages/database/prisma/schema/migrations/20250920195433_admin_booking_permission/migration.sql
@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "PERMISSION" ADD VALUE 'ADMIN_BOOKING';
--- a/packages/database/prisma/schema/migrations/20251004191000_add_xplane_plugin_parameter/migration.sql
+++ b/packages/database/prisma/schema/migrations/20251004191000_add_xplane_plugin_parameter/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "ConnectedAircraft" ADD COLUMN     "posXplanePluginActive" BOOLEAN NOT NULL DEFAULT false;
--- a/packages/database/prisma/schema/migrations/20251006212136_xplane_objects/migration.sql
+++ b/packages/database/prisma/schema/migrations/20251006212136_xplane_objects/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Mission" ADD COLUMN     "xPlaneObjects" JSONB[] DEFAULT ARRAY[]::JSONB[];
--- a/packages/database/prisma/schema/migrations/20251118221802_hpg_settings_as_dispatcher/migration.sql
+++ b/packages/database/prisma/schema/migrations/20251118221802_hpg_settings_as_dispatcher/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "settings_use_hpg_as_dispatcher" BOOLEAN NOT NULL DEFAULT false;
--- a/packages/database/prisma/schema/migrations/20251118222421_rename_hpg_settings/migration.sql
+++ b/packages/database/prisma/schema/migrations/20251118222421_rename_hpg_settings/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ALTER COLUMN "settings_use_hpg_as_dispatcher" SET DEFAULT true;
--- a/packages/database/prisma/schema/mission.prisma
+++ b/packages/database/prisma/schema/mission.prisma
@@ -19,6 +19,7 @@ model Mission {
    missionStationIds          Int[]              @default([])
    missionStationUserIds      String[]           @default([])
    missionLog                 Json[]             @default([])
+    xPlaneObjects              Json[]             @default([])
    hpgMissionString           String?
    hpgSelectedMissionString   String?
    hpgAmbulanceState          HpgState?          @default(NOT_REQUESTED)
--- a/packages/database/prisma/schema/station.prisma
+++ b/packages/database/prisma/schema/station.prisma
@@ -41,4 +41,5 @@ model Station {
    MissionsOnStations    MissionsOnStations[]
    MissionOnStationUsers MissionOnStationUsers[]
    ConnectedAircraft     ConnectedAircraft[]
+    Bookings              Booking[]
 }
--- a/packages/database/prisma/schema/user.prisma
+++ b/packages/database/prisma/schema/user.prisma
@@ -19,6 +19,7 @@ enum PERMISSION {
    ADMIN_KICK
    ADMIN_HELIPORT
    ADMIN_CHANGELOG
+    ADMIN_BOOKING
    AUDIO
    PILOT
    DISPO
@@ -37,15 +38,16 @@ model User {
    changelogAck Boolean @default(false)

    // Settings:
-    pathSelected              Boolean @default(false)
-    migratedFromV1            Boolean @default(false)
-    settingsNtfyRoom          String? @map(name: "settings_ntfy_room")
-    settingsMicDevice         String? @map(name: "settings_mic_device")
-    settingsMicVolume         Float?  @map(name: "settings_mic_volume")
-    settingsDmeVolume         Float?  @map(name: "settings_dme_volume")
-    settingsRadioVolume       Float?  @map(name: "settings_funk_volume")
-    settingsHideLastname      Boolean @default(false) @map(name: "settings_hide_lastname")
-    settingsAutoCloseMapPopup Boolean @default(false) @map(name: "settings_auto_close_map_popup")
+    pathSelected               Boolean @default(false)
+    migratedFromV1             Boolean @default(false)
+    settingsNtfyRoom           String? @map(name: "settings_ntfy_room")
+    settingsMicDevice          String? @map(name: "settings_mic_device")
+    settingsMicVolume          Float?  @map(name: "settings_mic_volume")
+    settingsDmeVolume          Float?  @map(name: "settings_dme_volume")
+    settingsRadioVolume        Float?  @map(name: "settings_funk_volume")
+    settingsHideLastname       Boolean @default(false) @map(name: "settings_hide_lastname")
+    settingsAutoCloseMapPopup  Boolean @default(false) @map(name: "settings_auto_close_map_popup")
+    settingsUseHPGAsDispatcher Boolean @default(true) @map(name: "settings_use_hpg_as_dispatcher")

    // email Verification:
    emailVerificationToken     String?   @map(name: "email_verification_token")
@@ -76,6 +78,7 @@ model User {
    PositionLog           PositionLog[]
    Penaltys              Penalty[]
    CreatedPenalties      Penalty[]               @relation("CreatedPenalties")
+    Bookings              Booking[]

    @@map(name: "users")
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,11 +1,28 @@
 packages:
  - apps/*
  - packages/*
+
 onlyBuiltDependencies:
-  - "@prisma/client"
-  - "@prisma/engines"
-  - "@tailwindcss/oxide"
+  - '@prisma/client'
+  - '@prisma/engines'
+  - '@tailwindcss/oxide'
  - esbuild
  - prisma
  - sharp
  - unrs-resolver
+
+overrides:
+  '@eslint/plugin-kit@<0.3.4': '>=0.3.4'
+  axios@>=1.0.0 <1.12.0: '>=1.12.0'
+  body-parser@>=2.2.0 <2.2.1: '>=2.2.1'
+  form-data@>=4.0.0 <4.0.4: '>=4.0.4'
+  js-yaml@>=4.0.0 <4.1.1: '>=4.1.1'
+  jws@<3.2.3: '>=3.2.3'
+  mdast-util-to-hast@>=13.0.0 <13.2.1: '>=13.2.1'
+  next-auth@<4.24.12: '>=4.24.12'
+  next@>=15.0.0 <=15.4.4: '>=15.4.5'
+  next@>=15.0.0-canary.0 <15.4.7: '>=15.4.7'
+  next@>=15.4.0-canary.0 <15.4.8: '>=15.4.8'
+  nodemailer@<7.0.7: '>=7.0.7'
+  nodemailer@<=7.0.10: '>=7.0.11'
+  playwright@<1.55.1: '>=1.55.1'