53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback } from "react";
|
|
import { BookingCalendar, SelectedSlot } from "@/components/bookings/booking-calendar";
|
|
import { BookingDialog } from "@/components/bookings/booking-dialog";
|
|
|
|
export default function BookingsPage() {
|
|
const [selectedSlot, setSelectedSlot] = useState<SelectedSlot | null>(null);
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
|
|
const handleSlotClick = useCallback((slot: SelectedSlot) => {
|
|
setSelectedSlot(slot);
|
|
}, []);
|
|
|
|
const handleCloseDialog = useCallback(() => {
|
|
setSelectedSlot(null);
|
|
}, []);
|
|
|
|
const handleBookingCreated = useCallback(() => {
|
|
// Refresh the calendar after booking creation
|
|
setRefreshKey((prev) => prev + 1);
|
|
}, []);
|
|
|
|
const handleBookingCancelled = useCallback(() => {
|
|
// Refresh the calendar after booking cancellation
|
|
setRefreshKey((prev) => prev + 1);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-primary-800">Bookings</h1>
|
|
<p className="mt-2 text-primary-600">
|
|
Manage court bookings. Select a time slot to create or view a booking.
|
|
</p>
|
|
</div>
|
|
|
|
<BookingCalendar key={refreshKey} onSlotClick={handleSlotClick} />
|
|
|
|
{selectedSlot && (
|
|
<BookingDialog
|
|
courtId={selectedSlot.courtId}
|
|
date={selectedSlot.date}
|
|
slot={selectedSlot}
|
|
onClose={handleCloseDialog}
|
|
onBookingCreated={handleBookingCreated}
|
|
onBookingCancelled={handleBookingCancelled}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|