Fixed Buchungssystem

apps/hub/app/_components/NewBookingModal.tsx

@@ -13,6 +13,7 @@ import { AxiosError } from "axios";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { DateInput } from "_components/ui/DateInput";
+import { Select } from "_components/ui/Select";
 
 interface NewBookingFormData {
 	type: "STATION" | "LST_01" | "LST_02" | "LST_03" | "LST_04";
@@ -85,6 +86,9 @@ export const NewBookingModal = ({
 			}
 		});
 
+	const form = useForm<NewBookingFormData>({
+		resolver: zodResolver(newBookingSchema),
+	});
 	const {
 		register,
 		handleSubmit,
@@ -92,10 +96,7 @@ export const NewBookingModal = ({
 		setValue,
 		reset,
 		formState: { errors },
-	} = useForm<NewBookingFormData>({
-		resolver: zodResolver(newBookingSchema),
-	});
-
+	} = form;
 	const selectedType = watch("type");
 	const hasDISPOPermission = userPermissions.includes("DISPO");
 
@@ -168,20 +169,17 @@ export const NewBookingModal = ({
 							{isLoadingStations ? (
 								<div className="skeleton h-12 w-full"></div>
 							) : (
-								<select
-									{...register("stationId", {
-										required:
-											selectedType === "STATION" ? "Bitte wählen Sie eine Station aus" : false,
+								<Select
+									label="Station"
+									name="stationId"
+									form={form}
+									options={stations?.map((s) => {
+										return {
+											value: s.id,
+											label: `${s.bosCallsign} - ${s.locationState} (${s.aircraft})`,
+										};
 									})}
-									className="select select-bordered w-full"
-								>
-									<option value="">Station auswählen...</option>
-									{stations?.map((station) => (
-										<option key={station.id} value={station.id}>
-											{station.bosCallsignShort} - {station.locationState} ({station.aircraft})
-										</option>
-									))}
-								</select>
+								/>
 							)}
 							{errors.stationId && (
 								<label className="label">