apps/hub/app/(app)/_components/Badges.tsx

@@ -8,11 +8,10 @@ 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
+					<Award className="h-4 w-4" /> Verdiente Abzeichen
 				</span>
 			</h2>
 			<div className="flex flex-wrap gap-2">
@@ -27,6 +26,5 @@ export const Badges: () => Promise<JSX.Element> = async () => {
 				})}
 			</div>
 		</div>
-		</div>
 	);
 };

apps/hub/app/(app)/_components/Bookings.tsx

@@ -0,0 +1,67 @@
+import { Calendar } from "lucide-react";
+import { getServerSession } from "../../api/auth/[...nextauth]/auth";
+import { Badge } from "@repo/shared-components";
+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: {
+			userId: session?.user.id,
+			startTime: {
+				gte: new Date(),
+			},
+		},
+		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>
+	);
+};

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,11 +15,16 @@ 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>
+				<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
 					<Badges />
 				</div>
+				<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
+					<Bookings />
+				</div>
+			</div>
 			<Events />
 		</div>
 	);

apps/hub/app/_components/BookingTimelineModal.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from "react";
 import { CalendarIcon, Plus, X, ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
-import { Booking, getPublicUser, PublicUser, Station, User } from "@repo/db";
+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";
 
 interface BookingTimelineModalProps {
 	isOpen: boolean;
@@ -227,18 +228,10 @@ export const BookingTimelineModal = ({
 		return sortedGroups;
 	};
 
-	const formatTimeRange = (booking: Booking) => {
-		const start = new Date(booking.startTime);
-		const end = new Date(booking.endTime);
-		return `${start.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })} - ${end.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })}`;
-	};
-
 	if (!isOpen) return null;
 
 	const groupedBookings = groupBookingsByResource();
 
-	console.log("Grouped Bookings:", groupedBookings);
-
 	return (
 		<div className="modal modal-open">
 			<div className="modal-box flex max-h-[83vh] w-11/12 max-w-7xl flex-col">
@@ -298,7 +291,7 @@ export const BookingTimelineModal = ({
 												<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>

apps/hub/app/_components/NewBookingModal.tsx

@@ -7,6 +7,8 @@ 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";
 
 interface Station {
 	id: number;
@@ -39,14 +41,12 @@ export const NewBookingModal = ({
 	onBookingCreated,
 	userPermissions,
 }: NewBookingModalProps) => {
-	const [submitting, setSubmitting] = useState(false);
-
 	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,
@@ -91,7 +91,6 @@ export const NewBookingModal = ({
 	}, [isOpen, reset, setValue]);
 
 	const onSubmit = async (data: NewBookingFormData) => {
-		setSubmitting(true);
 		try {
 			// Validate that end time is after start time
 			if (new Date(data.endTime) <= new Date(data.startTime)) {
@@ -106,11 +105,10 @@ export const NewBookingModal = ({
 			toast.success("Buchung erfolgreich erstellt!");
 			onBookingCreated();
 			onClose();
+			router.refresh();
 		} catch (error) {
 			console.error("Error creating booking:", error);
 			toast.error("Fehler beim Erstellen der Buchung");
-		} finally {
-			setSubmitting(false);
 		}
 	};
 
@@ -231,10 +229,9 @@ export const NewBookingModal = ({
 
 					{/* Actions */}
 					<div className="modal-action">
-						<button type="submit" className="btn btn-primary" disabled={submitting}>
+						<Button type="submit" className="btn btn-primary" isLoading={isCreateBookingLoading}>
-							{submitting && <span className="loading loading-spinner loading-sm"></span>}
 							Buchung erstellen
-						</button>
+						</Button>
 						<button type="button" className="btn" onClick={onClose}>
 							Abbrechen
 						</button>

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;
+};