@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/components/booking/Calendar.tsx

@@ -0,0 +1,1123 @@
+'use client';
+
+import { useState, useMemo, useRef, useEffect, useCallback, memo } from 'react';
+import { createPortal } from 'react-dom';
+import { startOfWeek, addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths } from 'date-fns';
+import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
+import { enUS, fr } from 'date-fns/locale';
+import type { Availability } from '@/lib/booking-api';
+import { useTranslations, useLocale } from '@/lib/booking/i18n';
+import {
+  MINI_CALENDAR_START_MONTH,
+  MINI_CALENDAR_END_MONTH,
+  VISIBLE_RANGE_BUFFER_WEEKS,
+} from '@/lib/booking-constants';
+import { getSundayOfWeek } from '@/lib/booking/sunday-week';
+import { cn } from '@/lib/booking/utils';
+import styles from './Calendar.module.css';
+
+// ============ Types ============
+
+export interface DateAvailability {
+  date: string; // yyyy-MM-dd format
+  availabilityCount: number;
+  isSoldOut: boolean;
+  minPrice?: number;
+  hasDiscount?: boolean;
+  discountPercent?: number;
+  totalVacancies?: number; // Total available tickets across all availabilities for this date
+  startTimes?: string[]; // Array of start times for this date (e.g., ["09:00", "10:00", "14:00"])
+  soldOutTimes?: Set<string>; // Set of sold out time strings (e.g., ["09:00", "14:00"])
+  totalDiscountPercent?: number; // Total discount percentage from all negative adjustments (deals + dynamic pricing)
+  /** Per-time capacity (admin): vacancies by default; booked/total only when the slot is sold out */
+  timeCapacityMap?: Record<string, { booked: number; total: number; vacancies: number }>;
+}
+
+interface CalendarProps {
+  availabilitiesByDate: Record<string, Availability[]>;
+  selectedDate: string | null;
+  onDateSelect: (date: string) => void;
+  timezone: string;
+  earliestDate: Date | null;
+  onVisibleRangeChange?: (startDate: Date, endDate: Date) => void;
+  currency: string; // Currency code (e.g., "CAD", "USD") for discount calculations
+  /** When true (admin), show capacity on each time slot (vacancies unless sold out) */
+  showCapacity?: boolean;
+  /** When true, show loading spinner in the date dropdown (e.g. when fetching availability for a new month) */
+  isLoading?: boolean;
+  /** Controls date-cell content style: detailed times vs simple availability status */
+  displayMode?: 'times' | 'status';
+  /** Optional extra discount percent added to the day-level discount badge. */
+  extraDiscountPercent?: number;
+  /** When true, cap day discount badges to the currently selected date's discount percent. */
+  capDiscountToSelectedDate?: boolean;
+  /**
+   * When true (e.g. change-booking flow), scroll the visible grid once to the week containing
+   * `selectedDate` after the parent sets it from the current booking. Otherwise the grid stays
+   * anchored to the earliest available date.
+   */
+  syncVisibleWeekToSelectedDate?: boolean;
+}
+
+// ============ Constants ============
+
+const DAYS_OF_WEEK_KEYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const;
+const WEEKS_TO_SHOW_DESKTOP = 2;
+const WEEKS_TO_SHOW_MOBILE = 2;
+
+// Date-fns locale map
+const dateFnsLocales = {
+  en: enUS,
+  fr: fr,
+} as const;
+
+// ============ Helper Functions ============
+
+/**
+ * Get net discount percentage for a date from percentage-type adjustments.
+ * - Deals: always discounts (add to total)
+ * - Dynamic pricing discounts (negative change): add to total
+ * - Dynamic pricing surcharges (positive change): subtract from total
+ * Result: discounts minus surcharges. Only shown if net is positive (i.e. net discount).
+ * 
+ * @param availabilities All availabilities for a specific date
+ * @param currency Currency code to check changeByCurrency for dynamic pricing
+ * @returns Net discount percentage (e.g., 15 for -15% off), or undefined if net <= 0
+ */
+function calculateTotalDiscountPercent(
+  availabilities: Availability[],
+  currency: string
+): number | undefined {
+  // Get the first availability with rates
+  const avail = availabilities.find(a => a.rates && a.rates.length > 0);
+  if (!avail?.rates) return undefined;
+  
+  // Get ADULT rate adjustments
+  const adultRate = avail.rates.find(rate => rate.category === 'ADULT');
+  if (!adultRate) return undefined;
+  
+  const adjustments = adultRate.appliedAdjustments || adultRate.applied_adjustments || [];
+  
+  let totalDiscount = 0;
+  let totalSurcharge = 0;
+  const seenIds = new Set<string>();
+  
+  for (const adj of adjustments) {
+    if (seenIds.has(adj.id)) continue;
+    if (adj.adjustmentType !== 'percentage' || !adj.adjustmentValue) continue;
+    
+    seenIds.add(adj.id);
+    
+    if (adj.type === 'deal') {
+      // Deals are always discounts
+      totalDiscount += Math.abs(adj.adjustmentValue);
+    } else if (adj.type === 'dynamic') {
+      const change = adj.changeByCurrency?.[currency];
+      if (change !== undefined) {
+        if (change < 0) {
+          totalDiscount += Math.abs(adj.adjustmentValue);
+        } else {
+          totalSurcharge += Math.abs(adj.adjustmentValue);
+        }
+      }
+    }
+  }
+  
+  const net = totalDiscount - totalSurcharge;
+  return net > 0 ? Math.round(net) : undefined;
+}
+
+/**
+ * Create a Date representing noon on the given date string in the target timezone.
+ * Using noon avoids day-boundary issues when formatting across timezones.
+ */
+function dateStrToNoonInTz(dateStr: string, timezone: string): Date {
+  return fromZonedTime(parseISO(`${dateStr}T12:00:00`), timezone);
+}
+
+function parseAvailabilityDateTime(value: string): Date {
+  // If API omits timezone offset, treat it as UTC to prevent user-local shifts.
+  const hasExplicitOffset = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(value);
+  return parseISO(hasExplicitOffset ? value : `${value}Z`);
+}
+
+// ============ Date Cell Component ============
+
+interface DateCellProps {
+  date: Date;
+  dateStr: string;
+  availability: DateAvailability | null;
+  isSelected: boolean;
+  isToday: boolean;
+  showCapacity?: boolean;
+  timezone: string;
+  displayMode: 'times' | 'status';
+  onClick: () => void;
+  isMobile?: boolean;
+}
+
+const DateCell = memo(function DateCell({
+  date,
+  availability,
+  isSelected,
+  isToday,
+  showCapacity,
+  timezone,
+  displayMode,
+  onClick,
+  isMobile = false,
+}: DateCellProps) {
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const dateFnsLocale = dateFnsLocales[locale] || enUS;
+  const dayNumber = formatInTimeZone(date, timezone, 'd');
+  // When showCapacity (admin), allow selecting sold-out slots for overbooking
+  const hasAvailability = availability !== null && (!availability.isSoldOut || showCapacity);
+  const isDisabled = !hasAvailability;
+
+  // Format time for display. timeStr (e.g. "09:00") is already in company timezone (MDT).
+  // Create a Date with those components, interpret as company timezone, then format.
+  const formatTime = useCallback((timeStr: string) => {
+    try {
+      const [hours, minutes] = timeStr.split(':').map(Number);
+      const dateWithTime = new Date(2000, 0, 1, hours, minutes, 0);
+      const dateInTz = fromZonedTime(dateWithTime, timezone);
+      if (locale === 'fr') {
+        return formatInTimeZone(dateInTz, timezone, minutes === 0 ? 'HH' : 'HH:mm', { locale: dateFnsLocale });
+      }
+      return formatInTimeZone(dateInTz, timezone, minutes === 0 ? 'ha' : 'h:mma', { locale: dateFnsLocale });
+    } catch {
+      return timeStr;
+    }
+  }, [locale, timezone, dateFnsLocale]);
+
+  // Two heights: tall when >2 time slots (discount + times); otherwise short. Mobile uses compact dot+time cells.
+  // Admin capacity line under each time pill needs extra vertical room (provider dashboard only).
+  const slotCount = availability?.startTimes?.length ?? 0;
+  const needsTallerCell = !isMobile && slotCount > 2;
+  const mobileNeedsTaller = isMobile && slotCount > 2;
+  const adminCapacityTallCells =
+    Boolean(showCapacity) && !isMobile && slotCount > 0 && displayMode === 'times';
+  const buttonClassName = useMemo(() => cn(
+    styles.calendarDayCell,
+    isMobile && (mobileNeedsTaller ? styles.calendarDayCellMobileTall : styles.calendarDayCellMobile),
+    !isMobile && (
+      adminCapacityTallCells
+        ? needsTallerCell
+          ? cn('min-w-0', styles.calendarDayCellWithAdminCapacity, styles.calendarDayCellWithAdminCapacityTall)
+          : styles.calendarDayCellWithAdminCapacity
+        : needsTallerCell
+          ? 'min-w-0 min-h-[7rem]'
+          : 'min-h-[6rem]'
+    ),
+    isDisabled
+      ? styles.calendarDayCellDisabled
+      : isSelected
+      ? styles.calendarDayCellSelected
+      : styles.calendarDayCellAvailable,
+    isToday && hasAvailability && !isSelected && styles.calendarDayCellToday
+  ), [isDisabled, isSelected, isToday, hasAvailability, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
+
+  const ariaLabel = useMemo(() => {
+    const parts = [dayNumber];
+    if (availability?.isSoldOut) parts.push(' - Sold out');
+    if (availability?.hasDiscount) parts.push(` - ${availability.discountPercent}% off`);
+    return parts.join('');
+  }, [dayNumber, availability?.isSoldOut, availability?.hasDiscount, availability?.discountPercent]);
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={isDisabled}
+      className={buttonClassName}
+      aria-label={ariaLabel}
+    >
+      <div className={cn(styles.calendarDayCellInner, isMobile && styles.calendarDayCellInnerMobile)}>
+        {/* Day Number - on mobile, in a top row with discount below to avoid overlap */}
+        <div className={styles.calendarDayNumber}>
+          {dayNumber}
+        </div>
+
+        {/* Discount Tag - top-right on desktop; below day number on mobile to avoid overlap */}
+        {availability?.totalDiscountPercent && availability.totalDiscountPercent > 0 && (
+          <div className={cn(styles.calendarDiscountTag, isMobile && styles.calendarDiscountTagMobile)}>
+            <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+            </svg>
+            <span>-{availability.totalDiscountPercent}%</span>
+          </div>
+        )}
+
+        {/* Availability Indicators - Centered */}
+        {availability && (
+          <div className="flex flex-col items-center justify-center space-y-0 w-full px-0.5">
+            {/* Sold Out Badge - Centered */}
+            {availability.isSoldOut ? (
+              <div className={styles.calendarSoldOutBadge}>
+                {t('calendar.soldOut')}
+              </div>
+            ) : hasAvailability ? (
+              <>
+                {/* Mobile: green dot + time (compact). Desktop: full time pills */}
+                {displayMode === 'status' ? (
+                  <div className={styles.calendarTimePill}>
+                    {t('calendar.available')}
+                  </div>
+                ) : availability.startTimes && availability.startTimes.length > 0 ? (
+                  isMobile ? (
+                    <div className={cn(
+                      styles.calendarMobileTimeList,
+                      availability.totalDiscountPercent && availability.totalDiscountPercent > 0 && styles.calendarMobileTimeListWithDiscount
+                    )}>
+                      {availability.startTimes.slice(0, 3).map((time) => {
+                        const isTimeSoldOut = availability.soldOutTimes?.has(time) || false;
+                        const isLowAvailability = !isTimeSoldOut && availability.totalVacancies !== undefined && availability.totalVacancies < 5;
+                        const isDailyAvailability = time === '00:00';
+                        return (
+                          <div
+                            key={time}
+                            className={cn(
+                              styles.calendarMobileTimeDot,
+                              isTimeSoldOut && styles.calendarMobileTimeDotSoldOut,
+                              isLowAvailability && !isTimeSoldOut && styles.calendarMobileTimeDotLow
+                            )}
+                          >
+                            <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                            <span>{isDailyAvailability ? t('calendar.available') : formatTime(time)}</span>
+                          </div>
+                        );
+                      })}
+                      {availability.startTimes.length > 3 && (
+                        <div className={styles.calendarMobileTimeDot}>
+                          <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                          <span>+{availability.startTimes.length - 3}</span>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="flex flex-wrap gap-0.5 justify-center">
+                      {availability.startTimes.slice(0, 3).map((time) => {
+                        const isTimeSoldOut = availability.soldOutTimes?.has(time) || false;
+                        const isLowAvailability = !isTimeSoldOut && availability.totalVacancies !== undefined && availability.totalVacancies < 5;
+                        const isDailyAvailability = time === '00:00';
+                        return (
+                          <div
+                            key={time}
+                            className={cn(
+                              styles.calendarTimePill,
+                              isTimeSoldOut && styles.calendarTimePillSoldOut,
+                              isLowAvailability && !isTimeSoldOut && styles.calendarTimePillLow
+                            )}
+                          >
+                            <div>{isDailyAvailability ? t('calendar.available') : formatTime(time)}</div>
+                            {showCapacity && availability.timeCapacityMap?.[time] && (() => {
+                              const cap = availability.timeCapacityMap[time];
+                              const vac = cap.vacancies;
+                              return (
+                                <div className="text-[9px] -mt-0.5 tabular-nums opacity-90">
+                                  {isTimeSoldOut
+                                    ? `${cap.booked}/${cap.total}`
+                                    : t('calendar.spotsAvailable', { count: vac })}
+                                </div>
+                              );
+                            })()}
+                            {isTimeSoldOut ? (
+                              <div className="text-[9px] -mt-0.5">
+                                {t('calendar.soldOut')}
+                              </div>
+                            ) : isLowAvailability && !showCapacity && (
+                              <div className="flex items-center gap-0.5 text-[9px] -mt-0.5">
+                                <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                                </svg>
+                                <span>{t('calendar.left', { count: availability.totalVacancies ?? 0 })}</span>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                      {availability.startTimes.length > 3 && (
+                        <div className={styles.calendarTimePill}>
+                          +{availability.startTimes.length - 3}
+                        </div>
+                      )}
+                    </div>
+                  )
+                ) : (
+                  /* Fallback: Low Availability Badge (when no start times) */
+                  availability.totalVacancies !== undefined && availability.totalVacancies < 5 && (
+                    <div className={styles.calendarLowAvailabilityBadge}>
+                      <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                      </svg>
+                      {t('calendar.left', { count: availability.totalVacancies ?? 0 })}
+                    </div>
+                  )
+                )}
+
+                {/* Discount Badge - desktop only (mobile uses corner tag) */}
+                {!isMobile && availability.hasDiscount && availability.discountPercent && (availability.totalVacancies === undefined || availability.totalVacancies >= 5) && (
+                  <div className={styles.calendarDiscountBadge}>
+                    -{availability.discountPercent}%
+                  </div>
+                )}
+              </>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </button>
+  );
+});
+
+// ============ Main Calendar Component ============
+
+export function Calendar({
+  availabilitiesByDate,
+  selectedDate,
+  onDateSelect,
+  timezone,
+  earliestDate,
+  onVisibleRangeChange,
+  currency,
+  showCapacity = false,
+  isLoading = false,
+  displayMode = 'times',
+  extraDiscountPercent = 0,
+  capDiscountToSelectedDate = false,
+  syncVisibleWeekToSelectedDate = false,
+}: CalendarProps) {
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const dateFnsLocale = dateFnsLocales[locale] || enUS;
+  
+  // Store the Sunday (week start) as a date string in company timezone.
+  // This ensures the calendar grid is always correct regardless of user's timezone.
+  const hasInitializedRef = useRef(false);
+  const [currentStartDateStr, setCurrentStartDateStr] = useState(() => {
+    hasInitializedRef.current = true;
+    if (earliestDate) {
+      const dateStr = formatInTimeZone(earliestDate, timezone, 'yyyy-MM-dd');
+      return getSundayOfWeek(dateStr, timezone);
+    }
+    const nowStr = formatInTimeZone(new Date(), timezone, 'yyyy-MM-dd');
+    return getSundayOfWeek(nowStr, timezone);
+  });
+
+  // Only update if earliestDate changes AND we haven't initialized yet
+  useEffect(() => {
+    if (!hasInitializedRef.current && earliestDate) {
+      const dateStr = formatInTimeZone(earliestDate, timezone, 'yyyy-MM-dd');
+      setCurrentStartDateStr(getSundayOfWeek(dateStr, timezone));
+      hasInitializedRef.current = true;
+    }
+  }, [earliestDate, timezone]);
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+  
+  const WEEKS_TO_SHOW = isMobile ? WEEKS_TO_SHOW_MOBILE : WEEKS_TO_SHOW_DESKTOP;
+  
+  // Initialize picker month to match the currently visible month in the main calendar (in company timezone)
+  const [pickerMonth, setPickerMonth] = useState(() => {
+    const [y, m] = currentStartDateStr.split('-').map(Number);
+    return dateStrToNoonInTz(`${y}-${String(m).padStart(2, '0')}-01`, timezone);
+  });
+
+  // Update picker month when main calendar navigates to keep them in sync
+  useEffect(() => {
+    const [y, m] = currentStartDateStr.split('-').map(Number);
+    const currentMonth = dateStrToNoonInTz(`${y}-${String(m).padStart(2, '0')}-01`, timezone);
+    if (currentMonth.getTime() >= MINI_CALENDAR_START_MONTH.getTime() &&
+        currentMonth.getTime() <= MINI_CALENDAR_END_MONTH.getTime()) {
+      setPickerMonth(currentMonth);
+    }
+  }, [currentStartDateStr, timezone]);
+  
+  // Ensure pickerMonth stays within bounds
+  useEffect(() => {
+    const currentMonth = startOfMonth(pickerMonth);
+    if (currentMonth.getTime() < MINI_CALENDAR_START_MONTH.getTime()) {
+      setPickerMonth(MINI_CALENDAR_START_MONTH);
+    } else if (currentMonth.getTime() > MINI_CALENDAR_END_MONTH.getTime()) {
+      setPickerMonth(MINI_CALENDAR_END_MONTH);
+    }
+  }, [pickerMonth]);
+  const datePickerRef = useRef<HTMLDivElement>(null); // Ref for the popup
+  const datePickerTriggerRef = useRef<HTMLButtonElement>(null); // Ref for the trigger button
+  const [pickerPosition, setPickerPosition] = useState<{ top: number; left: number } | null>(null);
+  
+  // Capture the month when dropdown opens (already fetched from main calendar - don't show spinner for it)
+  const [initialMonthOnOpen, setInitialMonthOnOpen] = useState<Date | null>(null);
+  useEffect(() => {
+    if (isDatePickerOpen) {
+      setInitialMonthOnOpen((prev) => (prev === null ? pickerMonth : prev));
+    } else {
+      setInitialMonthOnOpen(null);
+    }
+  }, [isDatePickerOpen, pickerMonth]);
+  
+  // Only show spinner when loading a month they navigated to (not the initial month which is already fetched)
+  const [showSpinnerInDropdown, setShowSpinnerInDropdown] = useState(false);
+  const isInitialMonth = initialMonthOnOpen === null || startOfMonth(pickerMonth).getTime() === startOfMonth(initialMonthOnOpen).getTime();
+  useEffect(() => {
+    if (!isLoading || !isDatePickerOpen || isInitialMonth) {
+      setShowSpinnerInDropdown(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowSpinnerInDropdown(true), 400);
+    return () => clearTimeout(timer);
+  }, [isLoading, isDatePickerOpen, pickerMonth, isInitialMonth]);
+  
+  // Get all available dates for dropdown - use company timezone for consistent navigation worldwide
+  const availableDates = useMemo(() => {
+    return Object.keys(availabilitiesByDate)
+      .filter(dateStr => {
+        const availabilities = availabilitiesByDate[dateStr];
+        return availabilities && availabilities.length > 0 && !availabilities.every(avail => avail.vacancies === 0);
+      })
+      .sort()
+      .map(dateStr => dateStrToNoonInTz(dateStr, timezone));
+  }, [availabilitiesByDate, timezone]);
+  
+  // Check if we can navigate months in mini calendar (hardcoded to June-October 2026)
+  const canNavigatePickerMonthBack = useMemo(() => {
+    const currentMonthTime = startOfMonth(pickerMonth).getTime();
+    const startMonthTime = MINI_CALENDAR_START_MONTH.getTime();
+    return currentMonthTime > startMonthTime;
+  }, [pickerMonth]);
+
+  const canNavigatePickerMonthForward = useMemo(() => {
+    const currentMonthTime = startOfMonth(pickerMonth).getTime();
+    const endMonthTime = MINI_CALENDAR_END_MONTH.getTime();
+    return currentMonthTime < endMonthTime;
+  }, [pickerMonth]);
+
+  // Mini calendar allowed range in company timezone (June 1 - Oct 12 inclusive)
+  // Must use company TZ - constants use local TZ which breaks for users in other timezones
+  const miniCalendarBoundsInTz = useMemo(() => ({
+    start: fromZonedTime(new Date(2026, 5, 1, 0, 0, 0, 0), timezone),
+    end: fromZonedTime(new Date(2026, 9, 12, 23, 59, 59, 999), timezone),
+  }), [timezone]);
+
+  // Generate mini calendar days in company timezone (same fix as main grid - avoids wrong day-of-week for users in other TZs)
+  const miniCalendarData = useMemo(() => {
+    const yearMonth = formatInTimeZone(pickerMonth, timezone, 'yyyy-MM');
+    const [y, m] = yearMonth.split('-').map(Number);
+    const firstOfMonthStr = `${y}-${String(m).padStart(2, '0')}-01`;
+    const sundayStr = getSundayOfWeek(firstOfMonthStr, timezone);
+    const sundayDate = dateStrToNoonInTz(sundayStr, timezone);
+    const days: Date[] = [];
+    for (let i = 0; i < 42; i++) {
+      days.push(addDays(sundayDate, i));
+    }
+    const monthStart = dateStrToNoonInTz(firstOfMonthStr, timezone);
+    const lastDay = new Date(y, m, 0).getDate();
+    const monthEnd = dateStrToNoonInTz(`${y}-${String(m).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`, timezone);
+    return { days, monthStart, monthEnd };
+  }, [pickerMonth, timezone]);
+  
+  // Calculate position for date picker and close when clicking outside
+  const PICKER_MIN_WIDTH = 280;
+  const PICKER_MAX_HEIGHT = 400;
+  const MOBILE_BREAKPOINT = 640;
+  const VIEWPORT_PADDING = 16;
+  const VIEWPORT_PADDING_MOBILE = 24;
+
+  useEffect(() => {
+    if (!isDatePickerOpen) {
+      setPickerPosition(null);
+      return;
+    }
+    
+    // Calculate position from trigger button (fixed = viewport coords, no scroll offset)
+    if (datePickerTriggerRef.current) {
+      const rect = datePickerTriggerRef.current.getBoundingClientRect();
+      const padding = window.innerWidth < MOBILE_BREAKPOINT ? VIEWPORT_PADDING_MOBILE : VIEWPORT_PADDING;
+      let left: number;
+      let top = rect.bottom + 4;
+
+      // On mobile, center the dropdown for better visibility and to avoid going off-screen
+      if (window.innerWidth < MOBILE_BREAKPOINT) {
+        left = (window.innerWidth - PICKER_MIN_WIDTH) / 2;
+        left = Math.max(padding, Math.min(left, window.innerWidth - PICKER_MIN_WIDTH - padding));
+      } else {
+        left = rect.left;
+        // Keep dropdown within viewport horizontally on desktop
+        if (left + PICKER_MIN_WIDTH > window.innerWidth - padding) {
+          left = window.innerWidth - PICKER_MIN_WIDTH - padding;
+        }
+        if (left < padding) {
+          left = padding;
+        }
+      }
+
+      // Keep dropdown within viewport vertically
+      if (top + PICKER_MAX_HEIGHT > window.innerHeight - padding) {
+        top = Math.max(padding, window.innerHeight - PICKER_MAX_HEIGHT - padding);
+      }
+      if (top < padding) {
+        top = padding;
+      }
+
+      setPickerPosition({ top, left });
+    }
+    
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      // Check if click is outside both the popup and the trigger button
+      const isOutsidePopup = datePickerRef.current && !datePickerRef.current.contains(target);
+      const isOutsideTrigger = datePickerTriggerRef.current && !datePickerTriggerRef.current.contains(target);
+      
+      if (isOutsidePopup && isOutsideTrigger) {
+        setIsDatePickerOpen(false);
+        setPickerPosition(null);
+      }
+    };
+    
+    // Use a small delay to avoid immediate closure when opening
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('click', handleClickOutside, true);
+    }, 100);
+    
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [isDatePickerOpen]);
+
+  // Derive Date from stored string (for comparisons and addDays) - uses company timezone
+  const currentStartDate = useMemo(
+    () => dateStrToNoonInTz(currentStartDateStr, timezone),
+    [currentStartDateStr, timezone]
+  );
+  
+  // Check if we can navigate backwards/forwards
+  const canNavigateBack = useMemo(() => {
+    if (availableDates.length === 0) return false;
+    const firstAvailableDate = availableDates[0];
+    return firstAvailableDate < currentStartDate;
+  }, [availableDates, currentStartDate]);
+  
+  const canNavigateForward = useMemo(() => {
+    if (availableDates.length === 0) return false;
+    const lastAvailableDate = availableDates[availableDates.length - 1];
+    const currentEndDate = addDays(currentStartDate, WEEKS_TO_SHOW * 7 - 1);
+    return lastAvailableDate > currentEndDate;
+  }, [availableDates, currentStartDate]);
+
+  const lastReportedRangeRef = useRef<{ start: Date; end: Date } | null>(null);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const hasSyncedChangeFlowWeekRef = useRef(false);
+
+  const handleDateJump = useCallback((date: Date) => {
+    const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+    const weekStartStr = getSundayOfWeek(dateStr, timezone);
+    const visibleStart = dateStrToNoonInTz(weekStartStr, timezone);
+    const visibleEnd = addDays(visibleStart, WEEKS_TO_SHOW * 7 - 1);
+    const bufferStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
+    const bufferEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    
+    lastReportedRangeRef.current = { start: bufferStart, end: bufferEnd };
+    setCurrentStartDateStr(weekStartStr);
+    if (onVisibleRangeChange) {
+      onVisibleRangeChange(bufferStart, bufferEnd);
+    }
+    
+    onDateSelect(dateStr);
+  }, [timezone, onVisibleRangeChange, onDateSelect, WEEKS_TO_SHOW]);
+
+  useEffect(() => {
+    if (!syncVisibleWeekToSelectedDate || !selectedDate || hasSyncedChangeFlowWeekRef.current) {
+      return;
+    }
+    hasSyncedChangeFlowWeekRef.current = true;
+    const weekStartStr = getSundayOfWeek(selectedDate, timezone);
+    const visibleStart = dateStrToNoonInTz(weekStartStr, timezone);
+    const visibleEnd = addDays(visibleStart, WEEKS_TO_SHOW * 7 - 1);
+    const bufferStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
+    const bufferEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    lastReportedRangeRef.current = { start: bufferStart, end: bufferEnd };
+    setCurrentStartDateStr(weekStartStr);
+    if (onVisibleRangeChange) {
+      onVisibleRangeChange(bufferStart, bufferEnd);
+    }
+  }, [
+    syncVisibleWeekToSelectedDate,
+    selectedDate,
+    timezone,
+    WEEKS_TO_SHOW,
+    onVisibleRangeChange,
+  ]);
+
+  // Generate calendar days (2 weeks = 14 days)
+  const calendarDays = useMemo(() => {
+    const days: Date[] = [];
+    for (let i = 0; i < WEEKS_TO_SHOW * 7; i++) {
+      days.push(addDays(currentStartDate, i));
+    }
+    return days;
+  }, [currentStartDate]);
+
+  // Notify parent of visible date range changes (with buffer weeks before/after)
+  // When dropdown is open, expand range to include the visible month so we fetch availability for it
+  useEffect(() => {
+    if (!onVisibleRangeChange || calendarDays.length === 0) return;
+    
+    const visibleStart = calendarDays[0];
+    const visibleEnd = calendarDays[calendarDays.length - 1];
+    // Add buffer weeks before and after
+    let reportStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
+    let reportEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    
+    // When dropdown is open, expand range to include the picker month so we fetch availability for future months
+    if (isDatePickerOpen) {
+      const pickerMonthStart = startOfMonth(pickerMonth);
+      const pickerMonthEnd = endOfMonth(pickerMonth);
+      reportStart = reportStart < pickerMonthStart ? reportStart : pickerMonthStart;
+      reportEnd = reportEnd > pickerMonthEnd ? reportEnd : pickerMonthEnd;
+    }
+    
+    // Only report if range actually changed (more than a day difference)
+    const currentReported = lastReportedRangeRef.current;
+    const rangeChanged = !currentReported || 
+        Math.abs(reportStart.getTime() - currentReported.start.getTime()) > 24 * 60 * 60 * 1000 ||
+        Math.abs(reportEnd.getTime() - currentReported.end.getTime()) > 24 * 60 * 60 * 1000;
+    
+    if (rangeChanged) {
+      if (isDatePickerOpen) {
+        // Report immediately when dropdown is open - user may close before debounce fires
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+          debounceTimeoutRef.current = null;
+        }
+        lastReportedRangeRef.current = { start: reportStart, end: reportEnd };
+        onVisibleRangeChange(reportStart, reportEnd);
+      } else {
+        // Debounce when main calendar navigates
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+        }
+        debounceTimeoutRef.current = setTimeout(() => {
+          lastReportedRangeRef.current = { start: reportStart, end: reportEnd };
+          onVisibleRangeChange(reportStart, reportEnd);
+        }, 300);
+      }
+    }
+    
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, [calendarDays, onVisibleRangeChange, isDatePickerOpen, pickerMonth]);
+
+  // Calculate date availability info
+  // Use plain object instead of Map so React can detect changes properly
+  const dateAvailabilityMap = useMemo(() => {
+    const map: Record<string, DateAvailability> = {};
+    
+    Object.entries(availabilitiesByDate).forEach(([dateStr, availabilities]) => {
+      if (availabilities && availabilities.length > 0) {
+        // Calculate min price from ADULT prices only (for "from" price display)
+        // Priority: pricesByCategory.retailPrices (in cents) > rates.price (in dollars)
+        const adultPrices = availabilities.flatMap(avail => {
+          // First try pricesByCategory.retailPrices (preferred format, in cents)
+          if (avail.pricesByCategory?.retailPrices) {
+            const adultPrice = avail.pricesByCategory.retailPrices.find(p => p.category === 'ADULT');
+            return adultPrice ? [adultPrice.price / 100] : []; // Convert cents to dollars
+          }
+          // Fallback to rates.price (already in dollars)
+          if (avail.rates) {
+            const adultRate = avail.rates.find(rate => rate.category === 'ADULT');
+            return adultRate && adultRate.price !== undefined && adultRate.price !== null
+              ? [adultRate.price]
+              : [];
+          }
+          return [];
+        });
+        
+        const minPrice = adultPrices.length > 0 ? Math.min(...adultPrices) : undefined;
+        
+        // Check if sold out (all availabilities have 0 vacancies)
+        const isSoldOut = availabilities.every(avail => avail.vacancies === 0);
+        
+        // Calculate total vacancies across all availabilities for this date
+        const totalVacancies = availabilities.reduce((sum, avail) => sum + avail.vacancies, 0);
+        
+        // Extract start times from availabilities and track which are sold out
+        const timeAvailabilityMap = new Map<string, { isSoldOut: boolean; vacancies: number }>();
+        const timeCapacityMap: Record<string, { booked: number; total: number }> = {};
+        
+        availabilities.forEach(avail => {
+          let timeStr: string | null = null;
+          try {
+            // Parse ISO datetime and extract time portion
+            const dateTime = parseAvailabilityDateTime(avail.dateTime);
+            timeStr = formatInTimeZone(dateTime, timezone, 'HH:mm');
+          } catch {
+            const timeMatch = avail.dateTime.match(/T(\d{2}:\d{2})/);
+            if (timeMatch) timeStr = timeMatch[1];
+          }
+          if (timeStr) {
+            const existing = timeAvailabilityMap.get(timeStr);
+            if (existing) {
+              timeAvailabilityMap.set(timeStr, {
+                isSoldOut: existing.isSoldOut && avail.vacancies === 0,
+                vacancies: existing.vacancies + avail.vacancies
+              });
+            } else {
+              timeAvailabilityMap.set(timeStr, {
+                isSoldOut: avail.vacancies === 0,
+                vacancies: avail.vacancies
+              });
+            }
+            // Per-time capacity for admin: first availability for this time wins
+            const totalCapacity = avail.totalCapacity ?? 0;
+            if (totalCapacity > 0 && !timeCapacityMap[timeStr]) {
+              const booked = avail.bookedCapacity ?? (totalCapacity - avail.vacancies);
+              timeCapacityMap[timeStr] = { booked, total: totalCapacity };
+            }
+          }
+        });
+
+        const timeCapacityMapWithVacancies: Record<string, { booked: number; total: number; vacancies: number }> = {};
+        for (const [ts, cap] of Object.entries(timeCapacityMap)) {
+          const agg = timeAvailabilityMap.get(ts);
+          timeCapacityMapWithVacancies[ts] = {
+            booked: cap.booked,
+            total: cap.total,
+            vacancies: agg?.vacancies ?? Math.max(0, cap.total - cap.booked),
+          };
+        }
+        
+        const startTimes = Array.from(timeAvailabilityMap.keys()).sort();
+        const soldOutTimes = new Set(
+          Array.from(timeAvailabilityMap.entries())
+            .filter(([, info]) => info.isSoldOut)
+            .map(([time]) => time)
+        );
+        
+        // Calculate total discount percentage from all negative adjustments
+        const dynamicDiscountPercent = calculateTotalDiscountPercent(availabilities, currency) ?? 0;
+        const totalDiscountPercent =
+          dynamicDiscountPercent + Math.max(0, extraDiscountPercent);
+        
+        map[dateStr] = {
+          date: dateStr,
+          availabilityCount: availabilities.length,
+          isSoldOut,
+          minPrice,
+          totalVacancies,
+          startTimes: startTimes.length > 0 ? startTimes : undefined,
+          soldOutTimes: soldOutTimes.size > 0 ? soldOutTimes : undefined,
+          totalDiscountPercent: totalDiscountPercent > 0 ? totalDiscountPercent : undefined,
+          timeCapacityMap:
+            Object.keys(timeCapacityMapWithVacancies).length > 0 ? timeCapacityMapWithVacancies : undefined,
+        };
+      }
+    });
+    
+    if (capDiscountToSelectedDate && selectedDate) {
+      const selectedDiscount = map[selectedDate]?.totalDiscountPercent;
+      if (selectedDiscount != null && selectedDiscount > 0) {
+        const capped: Record<string, DateAvailability> = {};
+        for (const [dateStr, availability] of Object.entries(map)) {
+          const raw = availability.totalDiscountPercent;
+          const adjusted = raw != null ? Math.min(raw, selectedDiscount) : undefined;
+          capped[dateStr] = {
+            ...availability,
+            totalDiscountPercent: adjusted,
+          };
+        }
+        return capped;
+      }
+    }
+
+    return map;
+  }, [availabilitiesByDate, timezone, currency, extraDiscountPercent, capDiscountToSelectedDate, selectedDate]);
+
+  // Get display range for header
+  const displayRange = useMemo(() => {
+    const firstDay = calendarDays[0];
+    const lastDay = calendarDays[calendarDays.length - 1];
+    return {
+      start: formatInTimeZone(firstDay, timezone, 'MMM d', { locale: dateFnsLocale }),
+      end: formatInTimeZone(lastDay, timezone, 'MMM d, yyyy', { locale: dateFnsLocale }),
+    };
+  }, [calendarDays, timezone, dateFnsLocale]);
+
+  // Navigation handlers - add/subtract weeks in company timezone
+  const handlePrevious = () => {
+    const prevSunday = addDays(currentStartDate, -WEEKS_TO_SHOW * 7);
+    setCurrentStartDateStr(formatInTimeZone(prevSunday, timezone, 'yyyy-MM-dd'));
+  };
+
+  const handleNext = () => {
+    const nextSunday = addDays(currentStartDate, WEEKS_TO_SHOW * 7);
+    setCurrentStartDateStr(formatInTimeZone(nextSunday, timezone, 'yyyy-MM-dd'));
+  };
+
+  const handleDateClick = (date: Date) => {
+    const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+    const availability = dateAvailabilityMap[dateStr] || null;
+    
+    // Allow selection when there are availabilities; when showCapacity (admin), allow sold-out for overbooking
+    if (availability && (!availability.isSoldOut || showCapacity)) {
+      onDateSelect(dateStr);
+    }
+  };
+
+  return (
+    <div className={styles.calendar}>
+      {/* Calendar Header with Navigation */}
+      <div className={styles.calendarHeader}>
+        <button
+          onClick={handlePrevious}
+          disabled={!canNavigateBack}
+          className={styles.calendarNav}
+          aria-label={t('calendar.previousWeeks')}
+        >
+          <svg
+            className={styles.calendarNavIcon}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+        </button>
+        <div className="relative">
+          <button
+            ref={datePickerTriggerRef}
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDatePickerOpen((prev) => !prev);
+            }}
+            className={styles.calendarRangeTrigger}
+          >
+            <span>{displayRange.start} - {displayRange.end}</span>
+            <svg 
+              className={cn('w-3 h-3 transition-transform', isDatePickerOpen && 'rotate-180')}
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          {isDatePickerOpen && pickerPosition && typeof document !== 'undefined' && createPortal(
+            <div 
+              ref={datePickerRef}
+              className={styles.calendarDropdown}
+              style={{ 
+                top: `${pickerPosition.top}px`,
+                left: `${pickerPosition.left}px`,
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Mini Calendar Header - always visible so users can change months while loading */}
+              <div className={styles.calendarDropdownHeader}>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!canNavigatePickerMonthBack) return;
+                    const previousMonth = startOfMonth(subMonths(pickerMonth, 1));
+                    // Clamp to June-October 2026 range
+                    if (previousMonth.getTime() >= MINI_CALENDAR_START_MONTH.getTime()) {
+                      setPickerMonth(previousMonth);
+                    }
+                  }}
+                  disabled={!canNavigatePickerMonthBack}
+                  className={styles.calendarDropdownNav}
+                >
+                  <svg className={styles.calendarDropdownNavIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+                <div className={styles.calendarDropdownMonth}>
+                  {formatInTimeZone(pickerMonth, timezone, 'MMMM yyyy', { locale: dateFnsLocale })}
+                </div>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!canNavigatePickerMonthForward) return;
+                    const nextMonth = startOfMonth(addMonths(pickerMonth, 1));
+                    // Clamp to June-October 2026 range
+                    if (nextMonth.getTime() <= MINI_CALENDAR_END_MONTH.getTime()) {
+                      setPickerMonth(nextMonth);
+                    }
+                  }}
+                  disabled={!canNavigatePickerMonthForward}
+                  className={styles.calendarDropdownNav}
+                >
+                  <svg className={styles.calendarDropdownNavIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+              
+              {/* Grid area - overlay only covers this, not the header */}
+              <div className={styles.calendarDropdownGridWrapper}>
+                {showSpinnerInDropdown && (
+                  <div className={styles.calendarDropdownLoading} aria-hidden>
+                    <div className="booking-calendar-dropdown-spinner" />
+                  </div>
+                )}
+                {/* Mini Calendar Days of Week */}
+                <div className={styles.calendarDropdownDaysOfWeek}>
+                {DAYS_OF_WEEK_KEYS.map((dayKey) => (
+                  <div key={dayKey} className={styles.calendarDropdownDow}>
+                    {t(`calendar.days.${dayKey}`)[0]}
+                  </div>
+                ))}
+              </div>
+              
+              {/* Mini Calendar Grid */}
+              <div className={styles.calendarDropdownDays}>
+                {miniCalendarData.days.map((day) => {
+                    const dateStr = formatInTimeZone(day, timezone, 'yyyy-MM-dd');
+                    const dayNumber = formatInTimeZone(day, timezone, 'd');
+                    const availability = dateAvailabilityMap[dateStr] || null;
+                    const isSelected = selectedDate === dateStr;
+                    const isCurrentMonth = day >= miniCalendarData.monthStart && day <= miniCalendarData.monthEnd;
+                    // Check if day is within allowed range (June 1 - October 12, 2026) in company timezone
+                    const isInAllowedRange = day >= miniCalendarBoundsInTz.start && day <= miniCalendarBoundsInTz.end;
+                    
+                    // Only treat as available if we have actual availability data for this date
+                    const hasAvailabilityData = availability !== null;
+                    const isSoldOut = availability?.isSoldOut === true;
+                    // When showCapacity (admin), sold-out days are still selectable for overbooking
+                    const isAvailable = hasAvailabilityData && isInAllowedRange && (!isSoldOut || showCapacity);
+                    const isToday = isSameDay(day, new Date());
+                    
+                    const dayClass = cn(
+                      styles.calendarDropdownDay,
+                      !isCurrentMonth && styles.calendarDropdownDayMuted,
+                      isSoldOut && !showCapacity && styles.calendarDropdownDaySoldOut,
+                      isSoldOut && showCapacity && styles.calendarDropdownDaySoldOutAdmin,
+                      !isSoldOut && !isInAllowedRange && styles.calendarDropdownDayMuted,
+                      !hasAvailabilityData && isInAllowedRange && styles.calendarDropdownDayMuted,
+                      isAvailable && isSelected && styles.calendarDropdownDaySelected,
+                      isAvailable && !isSelected && styles.calendarDropdownDayAvailable,
+                      isToday && isAvailable && !isSelected && styles.calendarDropdownDayToday
+                    );
+                    
+                    return (
+                      <button
+                        key={dateStr}
+                        onClick={() => {
+                          if (isAvailable) {
+                            handleDateJump(day);
+                            setIsDatePickerOpen(false);
+                          }
+                        }}
+                        disabled={!isAvailable}
+                        className={dayClass}
+                      >
+                        {dayNumber}
+                      </button>
+                    );
+                  })}
+              </div>
+              </div>
+            </div>,
+            document.body
+          )}
+        </div>
+        <button
+          onClick={handleNext}
+          disabled={!canNavigateForward}
+          className={styles.calendarNav}
+          aria-label={t('calendar.nextWeeks')}
+        >
+          <svg
+            className={styles.calendarNavIcon}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Calendar Grid */}
+      <div className={styles.calendarGrid}>
+        <div className={styles.calendarGridInner}>
+          {/* Day Headers */}
+          <div className={cn(styles.calendarHeaderRow, 'calendar-header-grid')}>
+            {DAYS_OF_WEEK_KEYS.map((dayKey) => (
+              <div
+                key={dayKey}
+                className={styles.calendarHeaderCell}
+              >
+                {t(`calendar.days.${dayKey}`)}
+              </div>
+            ))}
+          </div>
+
+          {/* Calendar Days Grid - row height = tallest cell in row; all cells stretch to that height */}
+          <div className={cn(styles.calendarDaysGrid, 'calendar-days-grid')}>
+          {calendarDays.map((date) => {
+            const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+            const availability = dateAvailabilityMap[dateStr] || null;
+            const isSelected = selectedDate === dateStr;
+            const isToday = isSameDay(date, new Date());
+
+            // Include availability data in key to force re-render when availability changes
+            const availabilityKey = availability 
+              ? `${availability.availabilityCount}-${availability.isSoldOut}-${availability.startTimes?.join(',') || ''}`
+              : 'none';
+            return (
+              <DateCell
+                key={`${dateStr}-${availabilityKey}`}
+                date={date}
+                dateStr={dateStr}
+                availability={availability}
+                isSelected={isSelected}
+                isToday={isToday}
+                showCapacity={showCapacity}
+                timezone={timezone}
+                displayMode={displayMode}
+                onClick={() => handleDateClick(date)}
+                isMobile={isMobile}
+              />
+            );
+          })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}