Booking Panel auf Dashboard

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}>
-							{submitting && <span className="loading loading-spinner loading-sm"></span>}
+						<Button type="submit" className="btn btn-primary" isLoading={isCreateBookingLoading}>
 							Buchung erstellen
-						</button>
+						</Button>
 						<button type="button" className="btn" onClick={onClose}>
 							Abbrechen
 						</button>