@licklist/design 0.78.5-dev.106 → 0.78.5-dev.107

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

@@ -1,998 +0,0 @@
-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>
-  );
-};