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
     ]
   );
 

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

@@ -5,6 +5,7 @@ import { BookingDaySummary, BookingQuickActions } from './components/booking-day
 import { BookingHeader } from './components/booking-header';
 import { BookingTimeline } from './components/booking-timeline';
 import { BookingToolbar } from './components/booking-toolbar';
+import { BookingToolsDialog } from './components/booking-tools-dialog';
 
 interface BookingProps {
   complex: ComplexWithRole;
@@ -23,6 +24,7 @@ export function Booking({ complex }: BookingProps) {
         </div>
       </div>
       <BookingCreateDialog />
+      <BookingToolsDialog />
     </BookingProvider>
   );
 }

apps/frontend/src/features/booking/components/booking-timeline.tsx

@@ -210,7 +210,7 @@ interface BookingSlotBlockProps {
 }
 
 function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: BookingSlotBlockProps) {
-  const { openCreateBooking, updateBookingStatus } = useBooking();
+  const { openCreateBooking, updateBookingStatus, openBookingTools } = useBooking();
   const left = ((segment.startMinutes - rangeStart) / totalMinutes) * 100;
   const width = ((segment.endMinutes - segment.startMinutes) / totalMinutes) * 100;
   const isFree = segment.status === 'free';
@@ -225,13 +225,16 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
         segment.status === 'reserved' &&
           'border-reserved/70 bg-reserved/80 text-reserved-foreground',
         segment.status === 'maintenance' &&
-          'border-maintenance/80 bg-maintenance/75 text-maintenance-foreground'
+          'border-maintenance/80 bg-maintenance/75 text-maintenance-foreground',
+        segment.booking?.status === 'COMPLETED' &&
+          'border-reserved/70 bg-reserved/25 dark:text-reserved-foreground text-gray-600 line-through',
+
       )}
       style={{
         left: `calc(${left}% + 4px)`,
         width: `calc(${width}% - 8px)`,
       }}
-      onClick={() => {
+      onClick={(event) => {
         if (isFree) {
           openCreateBooking({
             courtId: schedule.court.id,
@@ -239,13 +242,11 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
             sportId: schedule.court.sportId,
           });
         } else {
-          //console.log(JSON.stringify(segment, null, 2));
+          if(event.shiftKey && segment.booking?.status === 'CONFIRMED') {
-          setPopoverOpen(true);
+            updateBookingStatus(segment.booking.id, 'COMPLETED');
-        }
+          } else {
-      }}
+          openBookingTools(segment);
-      onDoubleClick={() => {
+          }
-        if (segment.booking?.status === 'CONFIRMED') {
-          updateBookingStatus(segment.booking.id, 'COMPLETED');
         }
       }}
       title={

apps/frontend/src/features/booking/components/booking-tools-dialog.tsx

@@ -0,0 +1,303 @@
+import { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle } from "@/components/ui/responsive-dialog";
+import { useBooking } from "../booking-provider";
+import { Button } from "@/components/ui/button";
+import {
+    CheckCircle2,
+    Clock,
+    MapPin,
+    MessageCircle,
+    Phone,
+    User,
+    XCircle,
+    AlertTriangle,
+    BadgeCheck,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+function formatDate(date: string | undefined) {
+    if (!date) return "";
+
+    const formatted = new Intl.DateTimeFormat("es-AR", {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+    }).format(new Date(`${date}T00:00:00`));
+
+    return formatted
+        .split(" ")
+        .map((word, index) => {
+            if (index === 0 || index === 3) {
+                return word.charAt(0).toUpperCase() + word.slice(1);
+            }
+            return word;
+        })
+        .join(" ");
+}
+
+const statusConfig: Record<string, { label: string; className: string }> = {
+
+    CONFIRMED: {
+        label: "Reservada",
+        className: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
+    },
+    COMPLETED: {
+        label: "Completada",
+        className: "bg-sky-500/15 text-sky-400 border-sky-500/30",
+    },
+    CANCELLED: {
+        label: "Cancelada",
+        className: "bg-red-500/15 text-red-400 border-red-500/30",
+    },
+    NOSHOW: {
+        label: "No show",
+        className: "bg-amber-500/15 text-amber-400 border-amber-500/30",
+    },
+
+};
+
+export function BookingToolsDialog() {
+    const {
+        selectedSegment,
+        bookingToolsOpen,
+        closeBookingTools,
+        updateBookingStatus,
+    } = useBooking();
+
+
+    const status = statusConfig[selectedSegment?.booking?.status ?? "CONFIRMED"] ?? {
+        label: selectedSegment?.booking?.status,
+        className: "bg-slate-500/15 text-slate-300 border-slate-500/30",
+    };
+
+    const sendWhatsappReminder = () => {
+        const phone = selectedSegment?.booking?.customerPhone;
+        const message = `
+        Hola ${selectedSegment?.booking?.customerName}. \nTe recordamos que tenés una reserva para el día *${formatDate(selectedSegment?.booking?.date)} de ${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime} en la cancha ${selectedSegment?.booking?.courtName} (${selectedSegment?.booking?.sport?.name})*. ¡Te esperamos! \nSi no vas a poder asistir, por favor avisanos para que otros clientes puedan reservar. Gracias.\n\n*Equipo de ${selectedSegment?.booking?.complexName}*`;
+        
+        const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
+        window.open(url, '_blank');
+    }
+
+    return (
+        <ResponsiveDialog
+            open={bookingToolsOpen}
+            onOpenChange={(open) => !open && closeBookingTools()}
+        >
+            <ResponsiveDialogContent
+                className="data-[variant=dialog]:max-w-5xl"
+                onOpenAutoFocus={(event) => event.preventDefault()}
+            >
+                <ResponsiveDialogHeader>
+                    <ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
+                    <ResponsiveDialogDescription>
+                        Administra la reserva y su estado.
+                    </ResponsiveDialogDescription>
+                </ResponsiveDialogHeader>
+
+                <section className="-mx-6 px-6 pt-3 pb-5">
+                    <div className="grid grid-cols-1 sm:grid-cols-3">
+                        <DetailItem
+                            icon={<MapPin className="h-5 w-5" />}
+                            label="Cancha"
+                            value={selectedSegment?.booking?.courtName ?? "-"}
+                            helper={selectedSegment?.booking?.sport?.name}
+                            withDivider
+                        />
+
+                        <DetailItem
+                            icon={<BadgeCheck className="h-5 w-5" />}
+                            label="Estado actual"
+                            value={status.label}
+                            valueClassName="text-emerald-400 uppercase dark:text-emerald-500"
+                            withDivider
+                        />
+
+                        <DetailItem
+                            icon={<User className="h-5 w-5" />}
+                            label="Cliente"
+                            value={selectedSegment?.booking?.customerName ?? "-"}
+                        />
+
+                        <DetailItem
+                            icon={<Clock className="h-5 w-5" />}
+                            label="Fecha"
+                            value={`${formatDate(selectedSegment?.booking?.date)}`}
+                            withDivider
+                            className="pt-10"
+                        />
+
+                        <DetailItem
+                            icon={<Clock className="h-5 w-5" />}
+                            label="Hora"
+                            value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
+                            withDivider
+                            className="pt-10"
+                        />
+
+                        <DetailItem
+                            icon={<Phone className="h-5 w-5" />}
+                            label="Teléfono"
+                            value={selectedSegment?.booking?.customerPhone ?? "-"}
+                            className="pt-10"
+                        />
+
+                    </div>
+
+                </section>
+
+                <Separator className="dark:bg-slate-800 bg-slate-300" />
+
+                <section className="space-y-3">
+                    <div>
+                        <h3 className="font-medium text-slate-100">Acciones disponibles</h3>
+                        <p className="text-sm text-slate-400">
+                            Elegí qué hacer según lo que ocurrió con el cliente.
+                        </p>
+                    </div>
+                    <div className="grid gap-3 sm:grid-cols-2">
+                        <ActionButton
+                            icon={<CheckCircle2 className="h-5 w-5" />}
+                            title="Completar reserva"
+                            description="El cliente se presentó para usar la cancha."
+                            className="border-emerald-500/40 bg-emerald-500/10 text-emerald-600 text-lg hover:bg-emerald-500/15 hover:text-esmerald-800"
+                            onClick={() => updateBookingStatus(selectedSegment?.booking?.id!, 'COMPLETED')}
+                        />
+
+                        <ActionButton
+                            icon={<XCircle className="h-5 w-5" />}
+                            title="Cancelar reserva"
+                            description="El cliente avisó que no va a venir. La cancha vuelve a estar disponible."
+                            className="border-red-500/40 bg-red-500/10 text-red-600 text-lg hover:bg-red-500/15 hover:text-red-800"
+                            onClick={() => updateBookingStatus(selectedSegment?.booking?.id!, 'CANCELLED')}
+                        />
+
+                        <ActionButton
+                            icon={<MessageCircle className="h-5 w-5" />}
+                            title="Enviar recordatorio"
+                            description="Enviar un mensaje por WhatsApp al cliente."
+                            className="border-sky-500/40 bg-sky-500/10 text-sky-600 text-lg hover:bg-sky-500/15 hover:text-sky-800"
+                            onClick={sendWhatsappReminder}
+                        />
+
+                        <ActionButton
+                            icon={<AlertTriangle className="h-5 w-5" />}
+                            title="Marcar como No Show"
+                            description="El cliente no vino y no canceló."
+                            className="border-amber-500/40 bg-amber-500/10 text-amber-600 text-lg hover:bg-amber-500/15 hover:text-amber-800"
+                            onClick={() => updateBookingStatus(selectedSegment?.booking?.id!, 'NOSHOW')}
+                        />
+                    </div>
+                </section>
+
+                <ResponsiveDialogFooter>
+                    <ResponsiveDialogClose asChild>
+                        <Button variant="outline">Cerrar</Button>
+                    </ResponsiveDialogClose>
+                </ResponsiveDialogFooter>
+            </ResponsiveDialogContent>
+        </ResponsiveDialog>
+    );
+}
+
+function DetailItem({
+    icon,
+    label,
+    value,
+    helper,
+    valueClassName,
+    withDivider,
+    className,
+}: {
+    icon: React.ReactNode;
+    label: string;
+    value: string;
+    helper?: string;
+    valueClassName?: string;
+    withDivider?: boolean;
+    className?: string;
+}) {
+
+    return (
+        <div
+            className={cn(
+                "relative flex items-start gap-4 px-5 py-1",
+                className
+            )}
+        >
+            {withDivider && (
+                <div
+                    className="
+                        absolute
+                        right-0
+                        top-1/2
+                        hidden
+                        h-16
+                        w-px
+                        -translate-y-1/2
+                        dark:bg-slate-800
+                        bg-slate-300
+                        sm:block
+                        "
+                />
+            )}
+
+            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full dark:bg-slate-800/80 bg-slate-300/80 dark:text-slate-300 text-slate-800">
+                {icon}
+            </div>
+            <div className="min-w-0">
+                <p className="text-sm text-slate-400">
+                    {label}
+                </p>
+                <p
+                    className={cn(
+                        "mt-1 text-[22px] leading-none font-semibold tracking-tight text-gray-600 dark:text-white",
+                        valueClassName
+                    )}
+                >
+                    {value}
+                </p>
+                {helper && (
+                    <p className="mt-1 text-sm text-slate-500">
+                        {helper}
+                    </p>
+                )}
+            </div>
+        </div>
+
+    );
+}
+
+function ActionButton({
+    icon,
+    title,
+    description,
+    className,
+    onClick
+}: {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    className: string;
+    onClick?: () => void;
+}) {
+    return (
+        <Button
+            type="button"
+            variant="outline"
+            className={`h-auto justify-start rounded-2xl p-4 text-left ${className}`}
+            onClick={onClick}
+        >
+            <div className="flex gap-3">
+                <div className="mt-0.5">{icon}</div>
+                <div>
+                    <p className="font-semibold">{title}</p>
+                    <p className="mt-1 whitespace-normal text-sm font-normal leading-relaxed dark:text-slate-200 text-slate-500">
+                        {description}
+                    </p>
+                </div>
+            </div>
+        </Button>
+    );
+
+}

packages/api-contract/src/admin-booking.ts

@@ -55,7 +55,7 @@ export const createAdminBookingSchema = z.object({
 })
 
 export const updateAdminBookingStatusSchema = z.object({
-  status: z.enum(['CANCELLED', 'COMPLETED']),
+  status: z.enum(['CANCELLED', 'COMPLETED', 'NOSHOW']),
 })
 
 export type BookingStatus = z.infer<typeof bookingStatusSchema>