Add Booking System

apps/hub/app/_components/BookingSystem.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import { BookingTimelineModal } from "./BookingTimelineModal";
+import { NewBookingModal } from "./NewBookingModal";
+
+interface BookingSystemProps {
+	isOpen: boolean;
+	onClose: () => void;
+	currentUser: {
+		id: string;
+		emailVerified: boolean;
+		is_banned: boolean;
+		permissions: string[];
+	};
+}
+
+export const BookingSystem = ({ isOpen, onClose, currentUser }: BookingSystemProps) => {
+	const [showNewBookingModal, setShowNewBookingModal] = useState(false);
+	const [refreshTimeline, setRefreshTimeline] = useState(0);
+
+	const handleOpenNewBooking = () => {
+		setShowNewBookingModal(true);
+	};
+
+	const handleCloseNewBooking = () => {
+		setShowNewBookingModal(false);
+	};
+
+	const handleBookingCreated = () => {
+		// Trigger a refresh of the timeline
+		setRefreshTimeline((prev) => prev + 1);
+		setShowNewBookingModal(false);
+	};
+
+	const handleCloseMain = () => {
+		setShowNewBookingModal(false);
+		onClose();
+	};
+
+	return (
+		<>
+			<BookingTimelineModal
+				key={refreshTimeline}
+				isOpen={isOpen && !showNewBookingModal}
+				onClose={handleCloseMain}
+				onOpenNewBooking={handleOpenNewBooking}
+				currentUser={currentUser}
+			/>
+
+			<NewBookingModal
+				isOpen={showNewBookingModal}
+				onClose={handleCloseNewBooking}
+				onBookingCreated={handleBookingCreated}
+				userPermissions={currentUser.permissions}
+			/>
+		</>
+	);
+};