Booking Panel auf Dashboard

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