From b97eb9c8a45503c250389e5c487c1567bbd3e1bb Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Tue, 5 May 2026 18:40:41 -0300
Subject: [PATCH] Minor changes

---
 apps/frontend/src/components/ui/calendar.tsx  |  2 ++
 .../src/features/booking/booking-provider.tsx | 22 +++++++++++++------
 .../booking/components/booking-timeline.tsx   |  8 +++++--
 .../booking/components/booking-toolbar.tsx    |  2 +-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/components/ui/calendar.tsx b/apps/frontend/src/components/ui/calendar.tsx
index 5f8ad29..fb6ac8b 100644
--- a/apps/frontend/src/components/ui/calendar.tsx
+++ b/apps/frontend/src/components/ui/calendar.tsx
@@ -4,12 +4,14 @@ import { DayPicker } from 'react-day-picker';
 
 import { buttonVariants } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { es } from 'date-fns/locale';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
+      locale={es}
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
diff --git a/apps/frontend/src/features/booking/booking-provider.tsx b/apps/frontend/src/features/booking/booking-provider.tsx
index 32b6e61..0250121 100644
--- a/apps/frontend/src/features/booking/booking-provider.tsx
+++ b/apps/frontend/src/features/booking/booking-provider.tsx
@@ -277,17 +277,25 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
   const summary = useMemo(() => getSummary(schedules), [schedules]);
   const timelineHours = useMemo(() => makeTimelineHours(visibleTimeRange), [visibleTimeRange]);
 
-  const currentTime = useMemo(() => {
-    if (!isTodayIso(selectedDate)) return null;
+  const [now, setNow] = useState(() => getNowTime());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(getNowTime());
+    }, 10 * 1000);
 
-    const now = getNowTime();
+    return () => clearInterval(interval);
+  }, []);
+
+  const currentTime = useMemo(() => {
+
+    if (!isTodayIso(selectedDate)) return null;
     const nowMinutes = timeToMinutes(now);
     const start = timeToMinutes(visibleTimeRange.start);
     const end = timeToMinutes(visibleTimeRange.end);
 
     if (nowMinutes < start || nowMinutes > end) return null;
     return now;
-  }, [selectedDate, visibleTimeRange]);
+  }, [selectedDate, visibleTimeRange, now]);
 
   const createBookingMutation = useMutation({
     mutationFn: (payload: CreateManualBookingPayload) =>
@@ -403,9 +411,9 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
       errorMessage:
         courtsQuery.isError || bookingsQuery.isError
           ? extractMessage(
-              courtsQuery.error ?? bookingsQuery.error,
-              'No pudimos cargar el panel de reservas.'
-            )
+            courtsQuery.error ?? bookingsQuery.error,
+            'No pudimos cargar el panel de reservas.'
+          )
           : null,
       isCreateBookingOpen,
       createBookingError: createBookingMutation.isError
diff --git a/apps/frontend/src/features/booking/components/booking-timeline.tsx b/apps/frontend/src/features/booking/components/booking-timeline.tsx
index e200a83..ec0a98c 100644
--- a/apps/frontend/src/features/booking/components/booking-timeline.tsx
+++ b/apps/frontend/src/features/booking/components/booking-timeline.tsx
@@ -105,7 +105,7 @@ interface TimelineHeaderProps {
 function TimelineHeader({ timelineMarks, courtInfoWidth, gridWidth }: TimelineHeaderProps) {
   return (
     <div
-      className="sticky top-0 z-20 grid border-b bg-card/95"
+      className="sticky top-0 z-20 grid border-b bg-card/95 z-auto"
       style={{ gridTemplateColumns: `${courtInfoWidth}px ${gridWidth}px` }}
     >
       <div className="sticky left-0 z-30 border-r bg-card/95 px-4 py-3 shadow-[8px_0_18px_-18px_oklch(0_0_0/0.45)]" />
@@ -238,6 +238,9 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
             startTime: segment.startTime,
             sportId: schedule.court.sportId,
           });
+        } else {
+          //console.log(JSON.stringify(segment, null, 2));
+          setPopoverOpen(true);
         }
       }}
       onDoubleClick={() => {
@@ -265,6 +268,7 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
             <Users className="size-3" />
             {segment.booking?.customerName ?? 'Mantenimiento'}
           </span>
+          
         </>
       )}
     </button>
@@ -289,7 +293,7 @@ function CurrentTimeIndicator({
   const left = courtInfoWidth + ((timeToMinutes(time) - rangeStart) / totalMinutes) * gridWidth;
 
   return (
-    <div className="pointer-events-none absolute bottom-0 top-12 z-20" style={{ left }}>
+    <div className="pointer-events-none absolute bottom-0 top-12 z-[5]" style={{ left }}>
       <div className="absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground shadow-sm">
         {time}
       </div>
diff --git a/apps/frontend/src/features/booking/components/booking-toolbar.tsx b/apps/frontend/src/features/booking/components/booking-toolbar.tsx
index 8569554..d63893c 100644
--- a/apps/frontend/src/features/booking/components/booking-toolbar.tsx
+++ b/apps/frontend/src/features/booking/components/booking-toolbar.tsx
@@ -12,7 +12,7 @@ import { ChevronLeft, ChevronRight, Clock, SlidersHorizontal } from 'lucide-reac
 import { useBooking } from '../booking-provider';
 import type { BookingStatusFilter } from '../booking.types';
 import { fromIsoDateLocal, toIsoDateLocal } from '../lib/booking-time';
-
+ 
 const timeRangeOptions = [
   { label: '08:00 - 22:00', start: '08:00', end: '22:00' },
   { label: '06:00 - 00:00', start: '06:00', end: '23:59' },