@licklist/design 0.78.5-dev.91 → 0.78.5-dev.93

package/src/v2/shadcn/_reference/DiaryView.tsx

@@ -0,0 +1,998 @@
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { supabase } from '@/integrations/supabase/client';
+import { useNotify } from '../hooks/useNotify';
+import { format, addDays, getDay } from 'date-fns';
+import { cn } from '../lib/utils';
+import { Button } from './ui/button';
+import { IconArrowLeft, IconArrowRight, IconPlus, IconDetailed, IconOverview } from '../../icons';
+import { QuickFilters } from './QuickFilters';
+import { useProvider } from '@/contexts/ProviderContext';
+import LoadingSpinner from './LoadingSpinner';
+import { QuickAddPanel } from './QuickAddPanel';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
+interface Zone {
+  id: string;
+  name: string;
+  description: string | null;
+  display_order: number;
+  availability_start: string | null;
+  availability_end: string | null;
+  use_venue_hours: boolean;
+  resources: Resource[];
+  opening_hours?: ZoneOpeningHour[];
+}
+
+interface Resource {
+  id: string;
+  name: string;
+  max_capacity: number;
+  instances: number;
+}
+
+interface Flow {
+  id: string;
+  type: 'booking' | 'enquiry';
+  reference_number: string;
+  customer_name: string;
+  activity_name: string;
+  booking_date: string;
+  booking_time_start: string;
+  booking_time_end: string | null;
+  status: string;
+  total_amount: number;
+  zone_id: string | null;
+  resource_id: string | null;
+  resource_instance: number | null;
+}
+
+interface OpeningHour {
+  day_of_week: number;
+  is_open: boolean;
+  open_time: string;
+  close_time: string;
+}
+
+interface ZoneOpeningHour {
+  zone_id: string;
+  day_of_week: number;
+  is_open: boolean;
+  open_time: string;
+  close_time: string;
+}
+
+interface DiaryViewProps {
+  providerId: string;
+  selectedDate: 'today' | 'tomorrow';
+  selectedZoneId?: string;
+  zoneFilters?: { id: string; name: string }[];
+  onZoneFilterChange?: (zoneId: string) => void;
+  onFlowClick?: (flowId: string) => void;
+}
+
+// Expand resources into individual instances with numbered names and capacity
+// Guard rail: a misconfigured resource.instances (e.g. thousands) can generate a massive DOM and freeze the app.
+const MAX_RESOURCE_INSTANCES_TO_RENDER = 50;
+
+const expandResources = (
+  resource: Resource
+): { id: string; resourceId: string; name: string; instanceNumber: number; maxCapacity: number }[] => {
+  const instances: { id: string; resourceId: string; name: string; instanceNumber: number; maxCapacity: number }[] = [];
+  const instancesToRender = Math.min(Math.max(resource.instances ?? 0, 0), MAX_RESOURCE_INSTANCES_TO_RENDER);
+
+  for (let i = 1; i <= instancesToRender; i++) {
+    instances.push({
+      id: `${resource.id}-${i}`,
+      resourceId: resource.id, // Store original resource ID
+      name: `${resource.name} ${i}`,
+      instanceNumber: i,
+      maxCapacity: resource.max_capacity,
+    });
+  }
+
+  return instances;
+};
+
+// Time slot used by the diary grid. `totalMinutes` can exceed 1440 when opening hours run past midnight.
+interface TimeSlot {
+  key: string;
+  label: string;
+  totalMinutes: number;
+}
+
+const formatSlotLabel = (totalMinutes: number): string => {
+  const normalized = ((totalMinutes % 1440) + 1440) % 1440;
+  const hour = Math.floor(normalized / 60);
+  const minute = normalized % 60;
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+// Generate 30-minute time slots from startMinutes (inclusive) to endMinutes (exclusive)
+const generateTimeSlots = (startMinutes: number, endMinutes: number): TimeSlot[] => {
+  const slots: TimeSlot[] = [];
+  const step = 30;
+
+  for (let m = startMinutes; m < endMinutes; m += step) {
+    slots.push({
+      key: String(m),
+      label: formatSlotLabel(m),
+      totalMinutes: m,
+    });
+  }
+
+  return slots;
+};
+
+// Parse time string to get hour and minute
+const parseTime = (timeStr: string): { hour: number; minute: number } => {
+  const [hour, minute] = timeStr.split(':').map(Number);
+  return { hour, minute };
+};
+
+export const DiaryView: React.FC<DiaryViewProps> = ({ providerId, selectedDate, selectedZoneId, zoneFilters, onZoneFilterChange, onFlowClick }) => {
+  const navigate = useNavigate();
+  const { showError } = useNotify();
+  const params = useParams<{ providerId?: string; companyId?: string }>();
+  const { provider } = useProvider();
+  const [zones, setZones] = useState<Zone[]>([]);
+  const [flows, setFlows] = useState<Flow[]>([]);
+  const [openingHours, setOpeningHours] = useState<OpeningHour[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [viewMode, setViewMode] = useState<'detailed' | 'overview'>('detailed');
+  const [dayOffset, setDayOffset] = useState(0);
+  
+  // Hover state removed – CSS-only hover to prevent expensive re-renders
+  
+  // V2 Quick Add Panel state
+  const [quickAddPanelOpen, setQuickAddPanelOpen] = useState(false);
+  const [quickAddData, setQuickAddData] = useState<{
+    date: string;
+    time: string;
+    zoneId?: string;
+    zoneName?: string;
+    resourceId?: string;
+    resourceName?: string;
+    resourceInstance?: number;
+  } | null>(null);
+  
+  // Refs for synchronized scrolling
+  const headerScrollRef = useRef<HTMLDivElement>(null);
+  const bodyScrollRef = useRef<HTMLDivElement>(null);
+  const isScrolling = useRef(false);
+
+  const truncatedResources = useMemo(() => {
+    const items: Array<{ zoneName: string; resourceName: string; instances: number }> = [];
+    for (const zone of zones) {
+      for (const resource of zone.resources) {
+        if (resource.instances > MAX_RESOURCE_INSTANCES_TO_RENDER) {
+          items.push({ zoneName: zone.name, resourceName: resource.name, instances: resource.instances });
+        }
+      }
+    }
+    return items;
+  }, [zones]);
+
+  // Build base path for navigation
+  const getBasePath = () => {
+    const providerType = provider?.type === 'venue' ? 'venue' : 'promoter';
+    if (params.companyId) {
+      return `/company/${params.companyId}/${providerType}/${params.providerId}`;
+    }
+    return `/${providerType}/${params.providerId}`;
+  };
+
+  // Handle quick-add cell click
+  const handleQuickAdd = (
+    date: string,
+    timeSlot: string,
+    zone?: Zone,
+    resourceName?: string,
+    resourceId?: string,
+    instanceNumber?: number
+  ) => {
+    // =====================================================
+    // V1 Quick Add - Navigate to AddFlow page (COMMENTED OUT)
+    // =====================================================
+    // const basePath = getBasePath();
+    // const searchParams = new URLSearchParams();
+    // searchParams.set('date', date);
+    // searchParams.set('time', timeSlot);
+    // if (zone) {
+    //   searchParams.set('zoneId', zone.id);
+    //   searchParams.set('zoneName', zone.name);
+    // }
+    // if (resourceId) {
+    //   searchParams.set('resourceId', resourceId);
+    // }
+    // if (resourceName) {
+    //   searchParams.set('resourceName', resourceName);
+    // }
+    // if (instanceNumber) {
+    //   searchParams.set('resourceInstance', instanceNumber.toString());
+    // }
+    // navigate(`${basePath}/flows/add?${searchParams.toString()}`);
+
+    // =====================================================
+    // V2 Quick Add - Open side panel (ACTIVE)
+    // =====================================================
+    setQuickAddData({
+      date,
+      time: timeSlot,
+      zoneId: zone?.id,
+      zoneName: zone?.name,
+      resourceId,
+      resourceName,
+      resourceInstance: instanceNumber
+    });
+    setQuickAddPanelOpen(true);
+  };
+
+  // Calculate target date based on selectedDate + dayOffset
+  const baseDate = selectedDate === 'today' ? new Date() : addDays(new Date(), 1);
+  const targetDate = addDays(baseDate, dayOffset);
+  const formattedDate = format(targetDate, 'yyyy-MM-dd');
+  const nextFormattedDate = format(addDays(targetDate, 1), 'yyyy-MM-dd');
+  const displayDate = format(targetDate, 'EEEE, d MMMM yyyy');
+  const dayOfWeek = getDay(targetDate);
+
+  // Get opening hours for this day
+  const todaysHours = openingHours.find((h) => h.day_of_week === dayOfWeek);
+
+  // Check for 24/7 mode (both open and close time are 00:00)
+  const is24_7 =
+    !!todaysHours?.is_open &&
+    todaysHours.open_time.startsWith('00:00') &&
+    todaysHours.close_time.startsWith('00:00');
+
+  const openTime = todaysHours?.is_open ? parseTime(todaysHours.open_time) : { hour: 9, minute: 0 };
+  const closeTime = todaysHours?.is_open ? parseTime(todaysHours.close_time) : { hour: 22, minute: 0 };
+
+  const openTotalMinutes = openTime.hour * 60 + openTime.minute;
+  const closeTotalMinutes = closeTime.hour * 60 + closeTime.minute;
+
+  // Venue runs into the next day when close time is earlier/equal to open time (e.g., 22:00 -> 02:00)
+  const isNextDayClose = !!todaysHours?.is_open && !is24_7 && closeTotalMinutes <= openTotalMinutes;
+
+  const startMinutes = todaysHours?.is_open ? openTotalMinutes : 9 * 60;
+  
+  // Actual closing time in minutes (used to determine "closed" slots)
+  const actualCloseMinutes = todaysHours?.is_open
+    ? is24_7
+      ? 24 * 60
+      : isNextDayClose
+        ? closeTotalMinutes + 24 * 60
+        : closeTotalMinutes
+    : 22 * 60;
+  
+  // Extend display by 1 hour past closing to show the closing time + buffer
+  const displayBufferMinutes = 60;
+  const endMinutes = actualCloseMinutes + displayBufferMinutes;
+
+  const timeSlots = useMemo(() => generateTimeSlots(startMinutes, endMinutes), [startMinutes, endMinutes]);
+
+  // For overview mode, show only hourly slots
+  const overviewSlots = useMemo(() => timeSlots.filter((slot) => slot.totalMinutes % 60 === 0), [timeSlots]);
+  const displaySlots: TimeSlot[] = viewMode === 'overview' ? overviewSlots : timeSlots;
+
+  // Pre-compute a flow lookup map: key = "resourceId-instanceNumber-slotMinutes" => Flow
+  // This replaces the O(flows) search inside every cell render
+  const flowLookup = useMemo(() => {
+    const map = new Map<string, Flow>();
+    
+    for (const flow of flows) {
+      const startTime = parseTime(flow.booking_time_start);
+      const endTime = flow.booking_time_end
+        ? parseTime(flow.booking_time_end)
+        : { hour: startTime.hour + 1, minute: startTime.minute };
+
+      let flowStartMinutes = startTime.hour * 60 + startTime.minute;
+      let flowEndMinutes = endTime.hour * 60 + endTime.minute;
+      if (flowEndMinutes <= flowStartMinutes) flowEndMinutes += 1440;
+
+      // For each slot this flow occupies, add to the map
+      for (const slot of timeSlots) {
+        let fStart = flowStartMinutes;
+        let fEnd = flowEndMinutes;
+        
+        // Handle next-day territory
+        if (slot.totalMinutes >= 1440 && fStart < startMinutes) {
+          fStart += 1440;
+          fEnd += 1440;
+        }
+
+        if (slot.totalMinutes >= fStart && slot.totalMinutes < fEnd) {
+          if (flow.resource_id && flow.resource_instance) {
+            const key = `${flow.resource_id}-${flow.resource_instance}-${slot.totalMinutes}`;
+            map.set(key, flow);
+          }
+          // Also store by zone for legacy/fallback matching
+          if (flow.zone_id) {
+            const legacyKey = `legacy-${flow.zone_id}-${flow.activity_name}-${slot.totalMinutes}`;
+            map.set(legacyKey, flow);
+          }
+        }
+      }
+    }
+    return map;
+  }, [flows, timeSlots, startMinutes]);
+
+  // Helper to find a flow at a given slot for a given instance
+  const getFlowAtSlot = useCallback((
+    instance: { resourceId: string; instanceNumber: number; name: string },
+    zone: Zone,
+    slotMinutes: number
+  ): Flow | undefined => {
+    // Direct lookup by resource + instance
+    const directKey = `${instance.resourceId}-${instance.instanceNumber}-${slotMinutes}`;
+    const direct = flowLookup.get(directKey);
+    if (direct) return direct;
+
+    // Fallback: check legacy flows that match by activity name
+    for (const flow of flows) {
+      if (flow.resource_id && flow.resource_instance) continue; // already handled above
+      
+      const matchesName = flow.activity_name.toLowerCase().includes(zone.name.toLowerCase()) ||
+        flow.activity_name.toLowerCase().includes(instance.name.split(' ')[0].toLowerCase());
+      if (!matchesName) continue;
+
+      const st = parseTime(flow.booking_time_start);
+      const et = flow.booking_time_end ? parseTime(flow.booking_time_end) : { hour: st.hour + 1, minute: st.minute };
+      let fStart = st.hour * 60 + st.minute;
+      let fEnd = et.hour * 60 + et.minute;
+      if (fEnd <= fStart) fEnd += 1440;
+      if (slotMinutes >= 1440 && fStart < startMinutes) { fStart += 1440; fEnd += 1440; }
+      if (slotMinutes >= fStart && slotMinutes < fEnd) return flow;
+    }
+    return undefined;
+  }, [flowLookup, flows, startMinutes]);
+
+  // Column sizing (must match between header + body tables)
+  const firstColWidthPx = viewMode === 'overview' ? 120 : 192; // matches w-[120px] and w-48
+  const detailedSlotWidthPx = 50;
+  const tableWidthPx = viewMode === 'detailed'
+    ? firstColWidthPx + displaySlots.length * detailedSlotWidthPx
+    : undefined;
+
+  // Current time info for "past slot" detection
+  const now = new Date();
+  const isToday = format(now, 'yyyy-MM-dd') === formattedDate;
+  const currentHour = now.getHours();
+  const currentMinute = now.getMinutes();
+  const nowTotalMinutes = currentHour * 60 + currentMinute;
+
+  // Helper: check if a slot is in the past (only matters if viewing today)
+  const isSlotInPast = (slot: TimeSlot): boolean => {
+    if (!isToday) return false;
+    return slot.totalMinutes < nowTotalMinutes;
+  };
+
+  // Helper: check if a slot is after closing time (venue closed)
+  const isSlotClosed = (slot: TimeSlot): boolean => {
+    return slot.totalMinutes >= actualCloseMinutes;
+  };
+
+  // Helper: check if a slot is closed for a specific zone (considers zone-specific hours)
+  const isSlotClosedForZone = (slot: TimeSlot, zone: Zone): boolean => {
+    // If zone uses venue hours, use the venue's closed check
+    if (zone.use_venue_hours) {
+      return isSlotClosed(slot);
+    }
+
+    // Zone has custom hours - check against zone opening hours
+    const zoneHoursForDay = zone.opening_hours?.find(h => h.day_of_week === dayOfWeek);
+    
+    // If no hours defined for this day or zone is closed, the slot is closed
+    if (!zoneHoursForDay || !zoneHoursForDay.is_open) {
+      return true;
+    }
+
+    // Parse zone hours
+    const zoneOpenTime = parseTime(zoneHoursForDay.open_time);
+    const zoneCloseTime = parseTime(zoneHoursForDay.close_time);
+    const zoneOpenMinutes = zoneOpenTime.hour * 60 + zoneOpenTime.minute;
+    const zoneCloseMinutes = zoneCloseTime.hour * 60 + zoneCloseTime.minute;
+
+    // Check if slot is outside zone availability
+    // Also check if slot is outside venue hours (can't be open when venue is closed)
+    const isOutsideZoneHours = slot.totalMinutes < zoneOpenMinutes || slot.totalMinutes >= zoneCloseMinutes;
+    const isOutsideVenueHours = isSlotClosed(slot);
+
+    return isOutsideZoneHours || isOutsideVenueHours;
+  };
+
+  // Scroll to show current time as second segment on load
+  const getNowColumnIndex = useMemo(() => {
+    if (!isToday) return null;
+    if (nowTotalMinutes < startMinutes || nowTotalMinutes >= endMinutes) return null;
+
+    const slotIndex = displaySlots.findIndex((slot, i) => {
+      const next = displaySlots[i + 1];
+      const upperBound = next ? next.totalMinutes : endMinutes;
+      return nowTotalMinutes >= slot.totalMinutes && nowTotalMinutes < upperBound;
+    });
+
+    return slotIndex >= 0 ? slotIndex : null;
+  }, [isToday, nowTotalMinutes, startMinutes, endMinutes, displaySlots]);
+
+  // Calculate "now" line position in pixels from the start of the time columns (detailed mode)
+  const nowLinePosition = useMemo(() => {
+    if (!isToday) return null;
+    if (viewMode !== 'detailed') return null;
+    if (nowTotalMinutes < startMinutes || nowTotalMinutes >= endMinutes) return null;
+
+    const minutesFromStart = nowTotalMinutes - startMinutes;
+
+    // Each 30-min slot is 50px wide
+    const pixelsPerMinute = detailedSlotWidthPx / 30;
+    return firstColWidthPx + minutesFromStart * pixelsPerMinute;
+  }, [isToday, nowTotalMinutes, startMinutes, endMinutes, viewMode, firstColWidthPx, detailedSlotWidthPx]);
+
+  // For overview mode, calculate percentage position
+  const nowLinePercentage = useMemo(() => {
+    if (!isToday || viewMode !== 'overview') return null;
+    if (nowTotalMinutes < startMinutes || nowTotalMinutes >= endMinutes) return null;
+
+    const minutesFromStart = nowTotalMinutes - startMinutes;
+    const totalMinutes = endMinutes - startMinutes;
+    if (totalMinutes <= 0) return null;
+
+    return (minutesFromStart / totalMinutes) * 100;
+  }, [isToday, nowTotalMinutes, startMinutes, endMinutes, viewMode]);
+
+  // Sync scroll position on initial load to show current time
+  useEffect(() => {
+    if (isToday && !isLoading && bodyScrollRef.current && getNowColumnIndex !== null && getNowColumnIndex > 0) {
+      const slotWidth = viewMode === 'detailed' ? 50 : 80;
+      const scrollPosition = Math.max(0, (getNowColumnIndex - 1) * slotWidth);
+      bodyScrollRef.current.scrollLeft = scrollPosition;
+      if (headerScrollRef.current) {
+        headerScrollRef.current.scrollLeft = scrollPosition;
+      }
+    }
+  }, [isLoading, isToday, getNowColumnIndex, viewMode]);
+
+  // Synchronized scroll handler
+  const handleBodyScroll = useCallback(() => {
+    if (isScrolling.current) return;
+    isScrolling.current = true;
+    if (headerScrollRef.current && bodyScrollRef.current) {
+      headerScrollRef.current.scrollLeft = bodyScrollRef.current.scrollLeft;
+    }
+    requestAnimationFrame(() => { isScrolling.current = false; });
+  }, []);
+
+  const handleHeaderScroll = useCallback(() => {
+    if (isScrolling.current) return;
+    isScrolling.current = true;
+    if (headerScrollRef.current && bodyScrollRef.current) {
+      bodyScrollRef.current.scrollLeft = headerScrollRef.current.scrollLeft;
+    }
+    requestAnimationFrame(() => { isScrolling.current = false; });
+  }, []);
+
+  // Reset day offset when selectedDate changes
+  useEffect(() => {
+    setDayOffset(0);
+  }, [selectedDate]);
+
+  useEffect(() => {
+    fetchData();
+  }, [providerId, formattedDate]);
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    try {
+      // Fetch opening hours for this provider
+      const { data: hoursData, error: hoursError } = await supabase
+        .from('provider_opening_hours')
+        .select('*')
+        .eq('provider_id', providerId);
+
+      if (hoursError) throw hoursError;
+      setOpeningHours(hoursData || []);
+
+      // Fetch zones with their resources
+      const { data: zonesData, error: zonesError } = await supabase
+        .from('zones')
+        .select('*')
+        .eq('provider_id', providerId)
+        .eq('status', 'active')
+        .order('display_order', { ascending: true });
+
+      if (zonesError) throw zonesError;
+
+      // Fetch all zone opening hours for zones that have custom hours
+      const zoneIds = (zonesData || []).filter(z => !z.use_venue_hours).map(z => z.id);
+      let zoneOpeningHoursMap: Record<string, ZoneOpeningHour[]> = {};
+      
+      if (zoneIds.length > 0) {
+        const { data: zoneHoursData, error: zoneHoursError } = await supabase
+          .from('zone_opening_hours')
+          .select('*')
+          .in('zone_id', zoneIds);
+
+        if (zoneHoursError) throw zoneHoursError;
+        
+        // Group by zone_id
+        (zoneHoursData || []).forEach(h => {
+          if (!zoneOpeningHoursMap[h.zone_id]) {
+            zoneOpeningHoursMap[h.zone_id] = [];
+          }
+          zoneOpeningHoursMap[h.zone_id].push(h);
+        });
+      }
+
+      // Fetch resources for each zone
+      const zonesWithResources: Zone[] = [];
+      for (const zone of zonesData || []) {
+        const { data: resourcesData, error: resourcesError } = await supabase
+          .from('resources')
+          .select('*')
+          .eq('zone_id', zone.id)
+          .order('display_order', { ascending: true });
+
+        if (resourcesError) throw resourcesError;
+
+        zonesWithResources.push({
+          ...zone,
+          resources: resourcesData || [],
+          opening_hours: zoneOpeningHoursMap[zone.id] || []
+        });
+      }
+
+      setZones(zonesWithResources);
+
+      // Fetch flows for the selected date
+      const { data: flowsData, error: flowsError } = await supabase
+        .from('bookings')
+        .select('*')
+        .eq('provider_id', providerId)
+        .eq('booking_date', formattedDate)
+        .order('booking_time_start');
+
+      if (flowsError) throw flowsError;
+      setFlows(flowsData || []);
+    } catch (error) {
+      console.error('Error fetching diary data:', error);
+      showError('Failed to load diary data');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Day pagination handlers
+  const handlePrevDay = () => setDayOffset(prev => prev - 1);
+  const handleNextDay = () => setDayOffset(prev => prev + 1);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <LoadingSpinner size="sm" />
+      </div>
+    );
+  }
+
+  if (zones.length === 0) {
+    return (
+      <div className="text-center py-12 text-label-tertiary">
+        <p className="text-lg font-medium mb-2">No zones configured</p>
+        <p className="text-sm">Add zones in Settings → Zones to use the diary view.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 w-full min-w-0 max-w-full overflow-hidden">
+      {/* Header with Date and Day Pagination */}
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <div className="text-label-primary text-lg font-semibold">
+            {displayDate}
+          </div>
+          {/* Day Pagination Controls - matching table pagination style */}
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handlePrevDay}
+              className="h-8 w-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover text-fill-action"
+            >
+              <IconArrowLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleNextDay}
+              className="h-8 w-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover text-fill-action"
+            >
+              <IconArrowRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Zone Quick Filters - Below Date */}
+        {zoneFilters && zoneFilters.length > 0 && onZoneFilterChange && (
+          <QuickFilters
+            filters={zoneFilters.map(zone => ({ value: zone.id, label: zone.name }))}
+            activeFilter={selectedZoneId || 'all'}
+            onFilterChange={(filter) => onZoneFilterChange(filter)}
+          />
+        )}
+
+        {truncatedResources.length > 0 && (
+          <div className="rounded-lg border border-border-primary bg-surface-secondary p-3">
+            <p className="text-sm text-label-secondary">
+              Some resources have very high instance counts and are capped to {MAX_RESOURCE_INSTANCES_TO_RENDER} instances in the diary to prevent freezing.
+            </p>
+          </div>
+        )}
+
+      </div>
+
+      {/* Diary Grid - Two-part structure for sticky header */}
+      <div className="border border-border-primary rounded-lg bg-surface-primary w-full overflow-hidden">
+        {/* Sticky Header Section */}
+        <div 
+          className="sticky top-12 z-20 bg-surface-primary border-b border-border-primary"
+        >
+          <div
+            ref={headerScrollRef}
+            onScroll={handleHeaderScroll}
+            className={cn(
+              'w-full',
+              viewMode === 'detailed' ? 'overflow-x-auto' : 'overflow-x-hidden'
+            )}
+          >
+            <div className={cn('relative', viewMode === 'detailed' ? 'min-w-max' : 'w-full')}>
+              <table
+                className="w-full table-fixed border-separate border-spacing-0"
+                style={viewMode === 'detailed' ? { width: tableWidthPx } : undefined}
+              >
+                <colgroup>
+                  <col style={{ width: firstColWidthPx }} />
+                  {displaySlots.map((slot) => (
+                    <col
+                      key={slot.key}
+                      className={viewMode === 'overview' ? 'w-auto' : ''}
+                      style={viewMode === 'detailed' ? { width: detailedSlotWidthPx } : undefined}
+                    />
+                  ))}
+                </colgroup>
+                <thead>
+                  <tr className="bg-surface-secondary">
+                    <th
+                      style={{ width: firstColWidthPx }}
+                      className="p-3 border-r border-border-primary text-left sticky left-0 bg-surface-secondary z-30"
+                    >
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => setViewMode(viewMode === 'detailed' ? 'overview' : 'detailed')}
+                          className="p-1 rounded-md bg-surface-primary text-label-secondary hover:bg-surface-primary-hover transition-colors"
+                          title={viewMode === 'detailed' ? 'Switch to Overview' : 'Switch to Detailed'}
+                        >
+                          {viewMode === 'detailed' ? (
+                            <IconOverview className="w-5 h-5" />
+                          ) : (
+                            <IconDetailed className="w-5 h-5" />
+                          )}
+                        </button>
+                        <span className="text-label-secondary text-xs font-medium uppercase tracking-wider">
+                          Zone
+                        </span>
+                      </div>
+                    </th>
+                    {displaySlots.map((slot) => {
+                      const isPast = isSlotInPast(slot);
+                      const isHourDivider = slot.totalMinutes % 60 === 0;
+                      return (
+                        <th
+                          key={slot.key}
+                          className={cn(
+                            'p-2 text-center border-r border-border-primary last:border-r-0 relative bg-surface-secondary',
+                            isHourDivider &&
+                              'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-px before:bg-border-secondary',
+                            isPast && 'opacity-60'
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              'text-xs font-medium',
+                              isPast ? 'text-label-tertiary' : 'text-label-secondary'
+                            )}
+                          >
+                            {slot.label}
+                          </span>
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* Scrollable Body Section */}
+        <div
+          ref={bodyScrollRef}
+          onScroll={handleBodyScroll}
+          className={cn(
+            'w-full relative',
+            viewMode === 'detailed' ? 'overflow-x-auto' : 'overflow-x-hidden'
+          )}
+        >
+          <div className={cn('relative', viewMode === 'detailed' ? 'min-w-max' : 'w-full')}>
+            {/* "Now" line indicator - z-[5] to render below sticky cells z-[9] */}
+            {isToday && viewMode === 'detailed' && nowLinePosition !== null && (
+              <div 
+                className="absolute top-0 bottom-0 w-0.5 bg-fill-action z-[5] pointer-events-none"
+                style={{ left: nowLinePosition }}
+              />
+            )}
+            {isToday && viewMode === 'overview' && nowLinePercentage !== null && (
+              <div 
+                className="absolute top-0 bottom-0 w-0.5 bg-fill-action z-[5] pointer-events-none"
+                style={{ left: `calc(${firstColWidthPx}px + (100% - ${firstColWidthPx}px) * ${nowLinePercentage / 100})` }}
+              />
+            )}
+            <table
+              className="w-full table-fixed border-separate border-spacing-0"
+              style={viewMode === 'detailed' ? { width: tableWidthPx } : undefined}
+            >
+              <colgroup>
+                <col style={{ width: firstColWidthPx }} />
+                {displaySlots.map((slot) => (
+                  <col
+                    key={slot.key}
+                    className={viewMode === 'overview' ? 'w-auto' : ''}
+                    style={viewMode === 'detailed' ? { width: detailedSlotWidthPx } : undefined}
+                  />
+                ))}
+              </colgroup>
+              <tbody>
+                {zones.filter(zone => !selectedZoneId || zone.id === selectedZoneId).map((zone) => {
+                  const expandedResources = zone.resources.flatMap(expandResources);
+
+                  return (
+                    <React.Fragment key={zone.id}>
+                      {/* Zone Header - solid color */}
+                      <tr className="bg-surface-tertiary">
+                        <td
+                          style={{ width: firstColWidthPx }}
+                          className="p-3 border-r border-b border-border-primary sticky left-0 bg-surface-tertiary z-[9]"
+                        >
+                          <span className="text-label-primary text-sm font-semibold">{zone.name}</span>
+                          {zone.description && (
+                            <p className="text-label-tertiary text-xs mt-0.5 truncate">{zone.description}</p>
+                          )}
+                        </td>
+                        {displaySlots.map((slot) => {
+                          const isHourDivider = slot.totalMinutes % 60 === 0;
+                          return (
+                            <td
+                              key={slot.key}
+                              className={cn(
+                                'border-r border-b border-border-primary last:border-r-0 bg-surface-tertiary relative',
+                                isHourDivider && 'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-px before:bg-border-secondary'
+                              )}
+                            />
+                          );
+                        })}
+                      </tr>
+
+                      {/* Expanded Resources (each instance as a row) */}
+                      {expandedResources.length > 0 ? (
+                        expandedResources.map((instance, instanceIndex) => {
+                          // Check if this is the last instance of the current resource
+                          const currentResourceId = instance.resourceId;
+                          const nextInstance = expandedResources[instanceIndex + 1];
+                          const isLastInstanceOfResource = !nextInstance || nextInstance.resourceId !== currentResourceId;
+                          
+                          return (
+                          <React.Fragment key={instance.id}>
+                          <tr>
+                            <td
+                              style={{ width: firstColWidthPx }}
+                              className="p-3 border-r border-b border-border-primary sticky left-0 z-[9] bg-surface-primary"
+                            >
+                              <div className="flex flex-col">
+                                <span className="text-label-primary text-sm">{instance.name}</span>
+                                <span className="text-label-secondary text-xs">Cap: {instance.maxCapacity}</span>
+                              </div>
+                            </td>
+
+                            {displaySlots.map((slot) => {
+                              const bookingAtSlot = getFlowAtSlot(instance, zone, slot.totalMinutes);
+
+                              const isPastSlot = isSlotInPast(slot);
+                              const isClosedSlot = isSlotClosedForZone(slot, zone);
+                              const isUnavailable = isPastSlot || isClosedSlot;
+                              const canQuickAdd = !bookingAtSlot && !isUnavailable;
+                              const isHourDivider = slot.totalMinutes % 60 === 0;
+
+                              return (
+                                <td
+                                  key={slot.key}
+                                  onClick={() => canQuickAdd && handleQuickAdd(
+                                    slot.totalMinutes >= 1440 ? nextFormattedDate : formattedDate,
+                                    slot.label,
+                                    zone,
+                                    instance.name,
+                                    instance.resourceId,
+                                    instance.instanceNumber
+                                  )}
+                                   className={cn(
+                                     'border-r border-b border-border-primary last:border-r-0 h-10 p-0.5 relative group',
+                                    isHourDivider && 'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-px before:bg-border-secondary',
+                                    isUnavailable && !bookingAtSlot && 'bg-surface-secondary',
+                                    bookingAtSlot && bookingAtSlot.type === 'booking' && 'bg-fill-highlight',
+                                    bookingAtSlot && bookingAtSlot.type === 'enquiry' && 'bg-fill-warning',
+                                    canQuickAdd && 'cursor-pointer hover:bg-surface-primary-hover'
+                                  )}
+                                >
+                                  {bookingAtSlot ? (
+                                    <HoverCard openDelay={200} closeDelay={100}>
+                                      <HoverCardTrigger asChild>
+                                        <div 
+                                          className="absolute inset-0 cursor-pointer"
+                                          onClick={() => onFlowClick?.(bookingAtSlot.id)}
+                                        >
+                                          {viewMode === 'detailed' && (
+                                            <div
+                                              className={cn(
+                                                'text-xs truncate px-1 pt-0.5',
+                                                bookingAtSlot.type === 'booking' ? 'text-label-white' : 'text-label-primary'
+                                              )}
+                                            >
+                                              {bookingAtSlot.customer_name.split(' ')[0]}
+                                            </div>
+                                          )}
+                                        </div>
+                                      </HoverCardTrigger>
+                                      <HoverCardContent className="w-64 p-3" side="top" align="start">
+                                        <div className="flex flex-col gap-2">
+                                          <div className="flex items-center justify-between">
+                                            <span className={cn(
+                                              'text-xs font-medium px-2 py-0.5 rounded',
+                                              bookingAtSlot.type === 'booking' 
+                                                ? 'bg-fill-highlight text-label-white' 
+                                                : 'bg-fill-warning text-label-primary'
+                                            )}>
+                                              {bookingAtSlot.type === 'booking' ? 'Booking' : 'Enquiry'}
+                                            </span>
+                                            <span className="text-xs text-label-tertiary">#{bookingAtSlot.reference_number}</span>
+                                          </div>
+                                          <div className="text-sm font-semibold text-label-primary">
+                                            {bookingAtSlot.customer_name}
+                                          </div>
+                                          <div className="text-sm text-label-secondary">
+                                            {bookingAtSlot.activity_name}
+                                          </div>
+                                          <div className="flex items-center gap-2 text-xs text-label-tertiary">
+                                            <span>{bookingAtSlot.booking_time_start.slice(0, 5)}</span>
+                                            {bookingAtSlot.booking_time_end && (
+                                              <>
+                                                <span>→</span>
+                                                <span>{bookingAtSlot.booking_time_end.slice(0, 5)}</span>
+                                              </>
+                                            )}
+                                          </div>
+                                          {bookingAtSlot.total_amount > 0 && (
+                                            <div className="text-sm font-medium text-label-primary">
+                                              £{bookingAtSlot.total_amount.toFixed(2)}
+                                            </div>
+                                          )}
+                                        </div>
+                                      </HoverCardContent>
+                                    </HoverCard>
+                                  ) : (
+                                    <>
+                                      {/* Icon overlay - uses group-hover from parent td */}
+                                      {canQuickAdd && (
+                                        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none">
+                                          <IconPlus size={32} className="text-fill-action" />
+                                        </div>
+                                      )}
+                                    </>
+                                  )}
+                                </td>
+                              );
+                            })}
+                          </tr>
+                          {/* 4px gap divider between resources (but not at end of zone) */}
+                          {isLastInstanceOfResource && nextInstance && (
+                            <tr className="h-1 bg-surface-tertiary">
+                              <td
+                                style={{ width: firstColWidthPx }}
+                                className="bg-surface-tertiary sticky left-0 z-[9]"
+                              />
+                              {displaySlots.map((slot) => (
+                                <td key={slot.key} className="bg-surface-tertiary" />
+                              ))}
+                            </tr>
+                          )}
+                          </React.Fragment>
+                          );
+                        })
+                      ) : (
+                        <tr>
+                          <td
+                            style={{ width: firstColWidthPx }}
+                            className="p-3 border-r border-b border-border-primary pl-6 sticky left-0 bg-surface-primary z-[9]"
+                          >
+                            <span className="text-label-tertiary text-sm italic">No resources</span>
+                          </td>
+                          {displaySlots.map((slot) => {
+                            const isPastSlot = isSlotInPast(slot);
+                            const isClosedSlot = isSlotClosed(slot);
+                            const isUnavailable = isPastSlot || isClosedSlot;
+                            const canQuickAdd = !isUnavailable;
+                            const isHourDivider = slot.totalMinutes % 60 === 0;
+                            return (
+                              <td
+                                key={slot.key}
+                                onClick={() => canQuickAdd && handleQuickAdd(
+                                  slot.totalMinutes >= 1440 ? nextFormattedDate : formattedDate,
+                                  slot.label,
+                                  zone
+                                )}
+                                className={cn(
+                                  'border-r border-b border-border-primary last:border-r-0 h-10 relative group',
+                                  isHourDivider && 'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-px before:bg-border-secondary',
+                                  isUnavailable && 'bg-surface-secondary',
+                                  canQuickAdd && 'cursor-pointer hover:bg-surface-primary-hover'
+                                )}
+                                title={isClosedSlot ? 'Venue closed' : undefined}
+                              >
+                                {canQuickAdd && (
+                                  <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none">
+                                    <IconPlus size={32} className="text-fill-action" />
+                                  </div>
+                                )}
+                              </td>
+                            );
+                          })}
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-6 text-sm">
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 rounded bg-fill-highlight" />
+          <span className="text-label-secondary">Booking</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 rounded bg-fill-warning" />
+          <span className="text-label-secondary">Enquiry</span>
+        </div>
+      </div>
+
+      {/* V2 Quick Add Panel */}
+      <QuickAddPanel
+        isOpen={quickAddPanelOpen}
+        onClose={() => setQuickAddPanelOpen(false)}
+        onSuccess={() => {
+          // Refresh flows after successful creation
+          fetchData();
+        }}
+        providerId={providerId}
+        providerType={provider?.type || 'venue'}
+        prefilledDate={quickAddData?.date}
+        prefilledTime={quickAddData?.time}
+        prefilledZoneId={quickAddData?.zoneId}
+        prefilledZoneName={quickAddData?.zoneName}
+        prefilledResourceId={quickAddData?.resourceId}
+        prefilledResourceName={quickAddData?.resourceName}
+        prefilledResourceInstance={quickAddData?.resourceInstance}
+      />
+    </div>
+  );
+};