Add Booking System

apps/hub/app/_components/BookingButton.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+import { BookingSystem } from "./BookingSystem";
+
+interface BookingButtonProps {
+	currentUser: {
+		id: string;
+		emailVerified: boolean;
+		is_banned: boolean;
+		permissions: string[];
+	};
+}
+
+export const BookingButton = ({ currentUser }: BookingButtonProps) => {
+	const [isBookingSystemOpen, setIsBookingSystemOpen] = useState(false);
+
+	// Check if user can access booking system
+	const canAccessBookingSystem = currentUser && currentUser.emailVerified && !currentUser.is_banned;
+
+	const handleOpenBookingSystem = () => {
+		setIsBookingSystemOpen(true);
+	};
+
+	const handleCloseBookingSystem = () => {
+		setIsBookingSystemOpen(false);
+	};
+
+	// Don't render the button if user doesn't have access
+	if (!canAccessBookingSystem) {
+		return null;
+	}
+
+	return (
+		<>
+			<button
+				className="btn btn-sm btn-ghost tooltip tooltip-bottom"
+				data-tip="Slot Buchung"
+				onClick={handleOpenBookingSystem}
+			>
+				<CalendarIcon size={20} />
+			</button>
+
+			<BookingSystem
+				isOpen={isBookingSystemOpen}
+				onClose={handleCloseBookingSystem}
+				currentUser={currentUser}
+			/>
+		</>
+	);
+};