Falsche Zeitzone bei Buchungen und HTTP status codes als Fehlermeldung behoben

apps/hub/app/_components/BookingTimelineModal.tsx

@@ -7,6 +7,7 @@ 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;
@@ -75,6 +76,9 @@ export const BookingTimelineModal = ({
 			await deleteBookingAPI(bookingId);
 			queryClient.invalidateQueries({ queryKey: ["bookings"] });
 		},
+		onSuccess: () => {
+			toast.success("Buchung erfolgreich gelöscht");
+		},
 	});
 
 	// Check if user can create bookings

apps/hub/app/_components/NewBookingModal.tsx

@@ -9,6 +9,10 @@ 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";
 
 interface NewBookingFormData {
 	type: "STATION" | "LST_01" | "LST_02" | "LST_03" | "LST_04";
@@ -41,13 +45,46 @@ export const NewBookingModal = ({
 	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 {
 		register,
 		handleSubmit,
@@ -55,7 +92,9 @@ export const NewBookingModal = ({
 		setValue,
 		reset,
 		formState: { errors },
-	} = useForm<NewBookingFormData>();
+	} = useForm<NewBookingFormData>({
+		resolver: zodResolver(newBookingSchema),
+	});
 
 	const selectedType = watch("type");
 	const hasDISPOPermission = userPermissions.includes("DISPO");
@@ -81,28 +120,6 @@ export const NewBookingModal = ({
 		}
 	}, [isOpen, reset, setValue]);
 
-	const onSubmit = async (data: NewBookingFormData) => {
-		try {
-			// Validate that end time is after start time
-			if (new Date(data.endTime) <= new Date(data.startTime)) {
-				toast.error("Endzeit muss nach der Startzeit liegen");
-				return;
-			}
-
-			const response = await createBooking(data);
-
-			console.log("Booking created:", response);
-
-			toast.success("Buchung erfolgreich erstellt!");
-			onBookingCreated();
-			onClose();
-			router.refresh();
-		} catch (error) {
-			console.error("Error creating booking:", error);
-			toast.error("Fehler beim Erstellen der Buchung");
-		}
-	};
-
 	if (!isOpen) return null;
 
 	return (
@@ -120,16 +137,13 @@ export const NewBookingModal = ({
 				</div>
 
 				{/* Form */}
-				<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+				<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", { required: "Bitte wählen Sie einen Typ aus" })}
-							className="select select-bordered w-full"
-						>
+						<select {...register("type")} className="select select-bordered w-full">
 							<option value="">Typ auswählen...</option>
 							<option value="STATION">Station</option>
 							{hasDISPOPermission && (
@@ -186,19 +200,16 @@ export const NewBookingModal = ({
 									Startzeit *
 								</span>
 							</label>
-							<input
+							<DateInput
 								type="datetime-local"
-								{...register("startTime", {
-									required: "Startzeit ist erforderlich",
-									onChange: (e) => {
-										if (new Date(e.target.value) >= new Date(watch("endTime"))) {
-											const newEndTime = new Date(
-												new Date(e.target.value).getTime() + 60 * 60 * 3000,
-											);
-											setValue("endTime", newEndTime.toISOString().slice(0, 16));
-										}
-									},
-								})}
+								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 && (
@@ -215,9 +226,12 @@ export const NewBookingModal = ({
 									Endzeit *
 								</span>
 							</label>
-							<input
+							<DateInput
 								type="datetime-local"
-								{...register("endTime", { required: "Endzeit ist erforderlich" })}
+								value={new Date(watch("endTime") || Date.now())}
+								onChange={(date) => {
+									setValue("endTime", date.toISOString());
+								}}
 								className="input input-bordered w-full"
 							/>
 							{errors.endTime && (

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;