Booking Panel auf Dashboard

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>