Buchungen werden in Connect Modal angezeigt (Pilot), new Booking form improvement

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>