Booking tools

apps/frontend/src/features/booking/booking-provider.tsx

@@ -57,12 +57,14 @@ interface BookingContextValue {
   summary: BookingSummary;
   currentTime: string | null;
   selectedSlot: BookingSlotDraft | null;
+  selectedSegment: BookingTimelineSegment | null;
   isLoading: boolean;
   isError: boolean;
   errorMessage: string | null;
   isCreateBookingOpen: boolean;
   createBookingError: string | null;
   isCreatingBooking: boolean;
+  bookingToolsOpen: boolean;
   setSelectedDate: (date: string) => void;
   moveSelectedDate: (amount: number) => void;
   setSelectedSportId: (sportId: string) => void;
@@ -72,8 +74,10 @@ interface BookingContextValue {
   openCreateBooking: (draft?: Partial<BookingSlotDraft>) => void;
   closeCreateBooking: () => void;
   createBooking: (payload: CreateManualBookingPayload) => Promise<void>;
-  updateBookingStatus: (bookingId: string, status: 'CANCELLED' | 'COMPLETED') => void;
+  updateBookingStatus: (bookingId: string, status: 'CANCELLED' | 'COMPLETED' | 'NOSHOW') => void;
   exportDayReport: () => void;
+  openBookingTools: (segment?: BookingTimelineSegment) => void;
+  closeBookingTools: () => void;
 }
 
 const BookingContext = createContext<BookingContextValue | null>(null);
@@ -230,6 +234,8 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
   const [visibleTimeRange, setVisibleTimeRange] = useState(DEFAULT_TIME_RANGE);
   const [selectedSlot, setSelectedSlot] = useState<BookingSlotDraft | null>(null);
   const [isCreateBookingOpen, setIsCreateBookingOpen] = useState(false);
+  const [selectedSegment, setSelectedSegment] = useState<BookingTimelineSegment | null>(null);
+  const [bookingToolsOpen, setBookingToolsOpen] = useState(false);
 
   const courtsQuery = useQuery({
     queryKey: ['courts', complex.id],
@@ -249,7 +255,7 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
     [bookingsQuery.data?.bookings, selectedDate]
   );
 
-  const courts = useMemo(() => courtsQuery.data ?? [], [courtsQuery.data]);
+  const courts = useMemo(() => courtsQuery.data?.sort((a, b) => a.name.localeCompare(b.name)) ?? [], [courtsQuery.data]);
 
   const filteredCourts = useMemo(() => {
     if (selectedSportId === 'all') return courts;
@@ -315,7 +321,7 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
   });
 
   const updateStatusMutation = useMutation({
-    mutationFn: (payload: { bookingId: string; status: 'CANCELLED' | 'COMPLETED' }) =>
+    mutationFn: (payload: { bookingId: string; status: 'CANCELLED' | 'COMPLETED' | 'NOSHOW' }) =>
       apiClient.adminBookings.updateStatus(payload.bookingId, { status: payload.status }),
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ['admin-bookings', complex.id] });
@@ -335,6 +341,15 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
     [selectedDate]
   );
 
+  const openBookingTools = useCallback(
+    (segment?: BookingTimelineSegment) => {
+      setSelectedSegment(segment ?? null);
+      setBookingToolsOpen(true);
+      console.log(JSON.stringify(segment, null, 2))
+  }, [selectedDate]);
+
+  const closeBookingTools = () => setBookingToolsOpen(false)
+
   useEffect(() => {
     const handleOpenCreateBooking = () => {
       openCreateBooking();
@@ -361,7 +376,7 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
   );
 
   const updateBookingStatus = useCallback(
-    (bookingId: string, status: 'CANCELLED' | 'COMPLETED') => {
+    (bookingId: string, status: 'CANCELLED' | 'COMPLETED' | 'NOSHOW') => {
       updateStatusMutation.mutate({ bookingId, status });
     },
     [updateStatusMutation]
@@ -431,6 +446,10 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
       createBooking,
       updateBookingStatus,
       exportDayReport,
+      bookingToolsOpen,
+      openBookingTools,
+      closeBookingTools,
+      selectedSegment
     }),
     [
       bookings,
@@ -461,6 +480,7 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
       updateBookingStatus,
       viewMode,
       visibleTimeRange,
+      bookingToolsOpen
     ]
   );