Minor changes

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={{

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) =>

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>