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

package/src/v2/shadcn/_reference/pricing/PricingCalendar.tsx

@@ -1,810 +0,0 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { startOfWeek, endOfWeek, eachDayOfInterval, format, isToday, addWeeks, subWeeks, isWithinInterval, getDay } from 'date-fns';
-import { supabase } from '@/integrations/supabase/client';
-import { useProvider } from '@/contexts/ProviderContext';
-
-import { IconArrowLeft, IconArrowRight } from '../../../icons';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
-import { useSearchParams } from 'react-router-dom';
-import { isAvailableOnDate, parseAvailabilityRules, type AvailabilityRule } from '@/lib/availabilityUtils';
-import { QuickFilters } from '../QuickFilters';
-
-interface OpeningHour {
-  day_of_week: number;
-  is_open: boolean;
-  open_time: string;
-  close_time: string;
-}
-
-interface PricingPeriodRule {
-  type: 'range' | 'date_time';
-  start_date?: string;
-  end_date?: string;
-  days?: string[];
-  is_24_hours?: boolean;
-  start_time?: string;
-  end_time?: string;
-}
-
-interface PricingPeriod {
-  id: string;
-  name: string;
-  colour: string;
-  priority: number;
-  is_active: boolean;
-  rules: PricingPeriodRule[];
-}
-
-interface PeriodPricing {
-  name: string;
-  price: number;
-  colour?: string;
-  id?: string;
-}
-
-interface DynamicTierAdjustment {
-  tier_id: string;
-  adjustment: number;
-}
-
-interface DynamicTier {
-  id: string;
-  name: string;
-  display_order: number;
-}
-
-interface ProductItem {
-  id: string;
-  product_id: string;
-  title: string;
-  capacity: number;
-  duration_minutes: number;
-  period_pricing: PeriodPricing[] | null;
-  availability_rules: AvailabilityRule[];
-  dynamic_tier_pricing: DynamicTierAdjustment[] | null;
-}
-
-interface Product {
-  id: string;
-  name: string;
-  type: string;
-  product_group_id: string | null;
-  items: ProductItem[];
-}
-
-interface ProductGroup {
-  id: string;
-  name: string;
-  products: Product[];
-}
-
-/** Represents a time segment within a day with its matching period */
-interface TimeSegment {
-  period: PricingPeriod | null;
-  startTime: string | null; // HH:mm or null for all-day
-  endTime: string | null;
-  label?: string;
-}
-
-const DAY_MAP: Record<string, number> = {
-  'Monday': 1, 'Tuesday': 2, 'Wednesday': 3, 'Thursday': 4,
-  'Friday': 5, 'Saturday': 6, 'Sunday': 0,
-};
-
-/**
- * Get all matching periods for a given date, considering time-based rules.
- * Returns time segments showing which period applies at which time.
- */
-const getTimeSegments = (date: Date, periods: PricingPeriod[], openingHours?: OpeningHour[]): TimeSegment[] => {
-  const dateStr = format(date, 'yyyy-MM-dd');
-  const dayOfWeek = date.getDay();
-
-  // Determine opening window for this day
-  const dayHours = openingHours?.find(h => h.day_of_week === dayOfWeek);
-  const hasOpeningHours = !!dayHours;
-  const openTime = dayHours?.open_time || '00:00';
-  const closeTime = (dayHours?.close_time && dayHours.close_time !== '00:00') ? dayHours.close_time : '23:59';
-
-  // Collect all period matches with their time constraints
-  const matches: { period: PricingPeriod; startTime: string | null; endTime: string | null }[] = [];
-
-  for (const period of periods) {
-    if (!period.is_active) continue;
-    
-    for (const rule of period.rules) {
-      if (rule.type === 'range') {
-        if (rule.start_date && rule.end_date && dateStr >= rule.start_date && dateStr <= rule.end_date) {
-          matches.push({ period, startTime: null, endTime: null }); // all-day
-        }
-      } else if (rule.type === 'date_time') {
-        const matchingDays = (rule.days || []).map(d => DAY_MAP[d]);
-        if (matchingDays.includes(dayOfWeek)) {
-          if (rule.is_24_hours) {
-            matches.push({ period, startTime: null, endTime: null });
-          } else if (rule.start_time && rule.end_time) {
-            matches.push({ period, startTime: rule.start_time, endTime: rule.end_time });
-          }
-        }
-      }
-    }
-  }
-
-  if (matches.length === 0) {
-    return [{ period: null, startTime: null, endTime: null }];
-  }
-
-  // Check if any match has time constraints
-  const hasTimeConstraints = matches.some(m => m.startTime !== null);
-  
-  if (!hasTimeConstraints) {
-    // All matches are all-day — return the highest priority (first in sorted list)
-    return [{ period: matches[0].period, startTime: null, endTime: null }];
-  }
-
-  // We have time-based periods. Build time segments bounded by opening hours.
-  const timedMatches = matches.filter(m => m.startTime !== null);
-  const allDayMatches = matches.filter(m => m.startTime === null);
-  
-  // The fallback period is the highest-priority all-day match, or null
-  const fallbackPeriod = allDayMatches.length > 0 ? allDayMatches[0].period : null;
-
-  // Sort timed matches by priority (lower number = higher priority)
-  // Then resolve overlaps: higher-priority periods carve out their time from lower ones
-  const resolvedTimedMatches: { period: PricingPeriod; startTime: string; endTime: string }[] = [];
-  
-  // Sort by priority ascending (highest priority first)
-  const sortedTimed = [...timedMatches].sort((a, b) => a.period.priority - b.period.priority);
-  
-  for (const match of sortedTimed) {
-    const mStart = match.startTime!;
-    const mEnd = match.endTime!;
-    
-    // Split this match around any already-resolved higher-priority segments
-    let remainingSlots = [{ start: mStart, end: mEnd }];
-    
-    for (const existing of resolvedTimedMatches) {
-      const newSlots: { start: string; end: string }[] = [];
-      for (const slot of remainingSlots) {
-        // No overlap
-        if (slot.end <= existing.startTime || slot.start >= existing.endTime) {
-          newSlots.push(slot);
-        } else {
-          // Overlap — carve out the existing segment
-          if (slot.start < existing.startTime) {
-            newSlots.push({ start: slot.start, end: existing.startTime });
-          }
-          if (slot.end > existing.endTime) {
-            newSlots.push({ start: existing.endTime, end: slot.end });
-          }
-        }
-      }
-      remainingSlots = newSlots;
-    }
-    
-    for (const slot of remainingSlots) {
-      if (slot.start < slot.end) {
-        resolvedTimedMatches.push({ period: match.period, startTime: slot.start, endTime: slot.end });
-      }
-    }
-  }
-  
-  // Sort resolved matches by start time
-  resolvedTimedMatches.sort((a, b) => a.startTime.localeCompare(b.startTime));
-
-  // If no opening hours configured, don't fill gaps — just show timed periods directly
-  if (!hasOpeningHours) {
-    if (resolvedTimedMatches.length === 0) {
-      return [{ period: fallbackPeriod, startTime: null, endTime: null }];
-    }
-    
-    const segments: TimeSegment[] = resolvedTimedMatches.map(m => ({
-      period: m.period,
-      startTime: m.startTime,
-      endTime: m.endTime,
-      label: m.period.name,
-    }));
-
-    // If we also have an all-day fallback and timed matches, combine them
-    if (fallbackPeriod && segments.length > 0) {
-      // Return the highest-priority all-day match since we can't meaningfully split without hours
-      return [{ period: fallbackPeriod, startTime: null, endTime: null }];
-    }
-
-    return segments.length > 0 ? segments : [{ period: fallbackPeriod, startTime: null, endTime: null }];
-  }
-
-  // Clamp timed matches to opening hours
-  const clampedMatches = resolvedTimedMatches
-    .map(m => ({
-      ...m,
-      startTime: m.startTime < openTime ? openTime : m.startTime,
-      endTime: m.endTime > closeTime ? closeTime : m.endTime,
-    }))
-    .filter(m => m.startTime < m.endTime);
-
-  const segments: TimeSegment[] = [];
-  let cursor = openTime;
-
-  for (const match of clampedMatches) {
-    if (match.startTime > cursor) {
-      segments.push({
-        period: fallbackPeriod,
-        startTime: cursor,
-        endTime: match.startTime,
-        label: fallbackPeriod ? fallbackPeriod.name : 'Standard',
-      });
-    }
-
-    segments.push({
-      period: match.period,
-      startTime: match.startTime,
-      endTime: match.endTime,
-      label: match.period.name,
-    });
-
-    cursor = match.endTime;
-  }
-
-  if (cursor < closeTime) {
-    segments.push({
-      period: fallbackPeriod,
-      startTime: cursor,
-      endTime: closeTime,
-      label: fallbackPeriod ? fallbackPeriod.name : 'Standard',
-    });
-  }
-
-  // Merge adjacent segments with the same effective period
-  const merged: TimeSegment[] = [];
-  for (const seg of segments) {
-    const prev = merged[merged.length - 1];
-    const segPeriodId = seg.period?.id ?? '_standard';
-    const prevPeriodId = prev?.period?.id ?? '_standard';
-    if (prev && segPeriodId === prevPeriodId) {
-      prev.endTime = seg.endTime;
-    } else {
-      merged.push({ ...seg });
-    }
-  }
-
-  // If all segments merged into one covering the full opening window, simplify
-  if (merged.length === 1) {
-    return [{ period: merged[0].period, startTime: null, endTime: null }];
-  }
-
-  return merged.length > 0 ? merged : [{ period: null, startTime: null, endTime: null }];
-};
-
-/**
- * Legacy helper — returns the single highest-priority matching period for a date.
- */
-const getMatchingPeriod = (date: Date, periods: PricingPeriod[]): PricingPeriod | null => {
-  const segments = getTimeSegments(date, periods);
-  if (segments.length === 1) return segments[0].period;
-  // If multiple segments, return the first timed period (for backward compat)
-  const timed = segments.find(s => s.period !== null && s.startTime !== null);
-  return timed?.period || segments[0].period;
-};
-
-/**
- * Get the price for an item under a specific period.
- * Returns { price, isPeriodPrice } to distinguish period vs standard fallback.
- */
-const getPriceForPeriod = (item: ProductItem, period: PricingPeriod | null): { price: number | null; isPeriodPrice: boolean } => {
-  if (!item.period_pricing || item.period_pricing.length === 0) return { price: null, isPeriodPrice: false };
-
-  const standard = item.period_pricing.find(pp => pp.id === 'standard' || pp.name === 'Standard' || pp.name === 'standard');
-  const standardPrice = (standard && standard.price > 0) ? standard.price : null;
-
-  if (period) {
-    const match = item.period_pricing.find(pp => pp.id === period.id || pp.name === period.name);
-    if (match && match.price != null && match.price > 0) {
-      return { price: match.price, isPeriodPrice: true };
-    }
-    return { price: standardPrice, isPeriodPrice: false };
-  }
-
-  return { price: standardPrice, isPeriodPrice: false };
-};
-
-/**
- * Apply a dynamic tier adjustment to a base price.
- */
-const applyTierAdjustment = (basePrice: number | null, item: ProductItem, tierId: string | null): number | null => {
-  if (basePrice === null || !tierId) return basePrice;
-  const tierPricing = item.dynamic_tier_pricing;
-  if (!tierPricing || !Array.isArray(tierPricing)) return basePrice;
-  const tier = tierPricing.find(t => t.tier_id === tierId);
-  if (!tier) return basePrice;
-  const adjusted = basePrice + tier.adjustment;
-  return Math.max(0, adjusted); // Don't go below 0
-};
-
-const PricingCalendar: React.FC = () => {
-  const { provider } = useProvider();
-  const [searchParams] = useSearchParams();
-  const highlightProductId = searchParams.get('product');
-  
-  const dateInputRef = useRef<HTMLInputElement>(null);
-  const [currentDate, setCurrentDate] = useState(new Date());
-  const [periods, setPeriods] = useState<PricingPeriod[]>([]);
-  const [groups, setGroups] = useState<ProductGroup[]>([]);
-  const [openingHours, setOpeningHours] = useState<OpeningHour[]>([]);
-  const [dynamicTiers, setDynamicTiers] = useState<DynamicTier[]>([]);
-  const [selectedTier, setSelectedTier] = useState<string>('base');
-  const [isLoading, setIsLoading] = useState(true);
-
-  const variablePricingEnabled = provider?.variable_pricing_enabled ?? false;
-  const dynamicPricingEnabled = provider?.dynamic_pricing_enabled ?? false;
-
-  // Fetch pricing periods and products
-  useEffect(() => {
-    if (!provider?.id) return;
-
-    const fetchData = async () => {
-      setIsLoading(true);
-      
-      const [periodsRes, productsRes, itemsRes, groupsRes, hoursRes] = await Promise.all([
-        supabase.from('pricing_periods').select('*').eq('provider_id', provider.id).eq('status', 'active').order('priority', { ascending: true }),
-        supabase.from('products').select('*').eq('provider_id', provider.id).eq('status', 'active').order('display_order'),
-        supabase.from('product_items').select('*').eq('provider_id', provider.id).eq('status', 'active').order('display_order'),
-        supabase.from('product_groups').select('*').eq('provider_id', provider.id).eq('status', 'active').order('display_order'),
-        supabase.from('provider_opening_hours').select('*').eq('provider_id', provider.id).order('day_of_week'),
-      ]);
-
-      // Fetch dynamic pricing tiers separately (uses 'as any' cast)
-      let tiersRes: any = null;
-      if (dynamicPricingEnabled) {
-        tiersRes = await supabase.from('dynamic_pricing_tiers' as any).select('id, name, display_order').eq('provider_id', provider.id).eq('status', 'active').eq('is_active', true).order('display_order', { ascending: true });
-      }
-
-      if (periodsRes.data) {
-        setPeriods(periodsRes.data.map((p: any) => ({
-          ...p,
-          rules: (Array.isArray(p.rules) ? p.rules : []) as unknown as PricingPeriodRule[],
-        })));
-      }
-
-      if (groupsRes.data && productsRes.data && itemsRes.data) {
-        const productItems = itemsRes.data.map((item: any) => ({
-          ...item,
-          period_pricing: (Array.isArray(item.period_pricing) ? item.period_pricing : []) as unknown as PeriodPricing[],
-          availability_rules: parseAvailabilityRules(item.availability_rules),
-          dynamic_tier_pricing: (Array.isArray(item.dynamic_tier_pricing) ? item.dynamic_tier_pricing : []) as DynamicTierAdjustment[],
-        }));
-
-        const products = productsRes.data.map((prod: any) => ({
-          id: prod.id,
-          name: prod.name,
-          type: prod.type,
-          product_group_id: prod.product_group_id,
-          items: productItems.filter((item: any) => item.product_id === prod.id),
-        }));
-
-        const groupedData: ProductGroup[] = groupsRes.data.map((g: any) => ({
-          id: g.id,
-          name: g.name,
-          products: products.filter((p: any) => p.product_group_id === g.id),
-        }));
-
-        // Add ungrouped products
-        const ungroupedProducts = products.filter((p: any) => !p.product_group_id);
-        if (ungroupedProducts.length > 0) {
-          groupedData.push({ id: '_ungrouped', name: 'Ungrouped', products: ungroupedProducts });
-        }
-
-        setGroups(groupedData);
-      }
-
-      if (hoursRes.data) {
-        setOpeningHours(hoursRes.data as OpeningHour[]);
-      }
-
-      if (dynamicPricingEnabled && tiersRes?.data) {
-        setDynamicTiers(tiersRes.data as DynamicTier[]);
-      }
-
-      setIsLoading(false);
-    };
-
-    fetchData();
-  }, [provider?.id, dynamicPricingEnabled]);
-
-  const days = useMemo(() => {
-    const start = startOfWeek(currentDate, { weekStartsOn: 1 });
-    return eachDayOfInterval({ start, end: endOfWeek(currentDate, { weekStartsOn: 1 }) });
-  }, [currentDate]);
-
-  const navigateBack = () => {
-    setCurrentDate(prev => subWeeks(prev, 1));
-  };
-
-  const navigateForward = () => {
-    setCurrentDate(prev => addWeeks(prev, 1));
-  };
-
-  const goToToday = () => setCurrentDate(new Date());
-
-  // Build pricing quick filters (tiers only — base is the default when none selected)
-  const pricingFilters = useMemo(() => {
-    if (!dynamicPricingEnabled || dynamicTiers.length === 0) return [];
-    return dynamicTiers.map(t => ({ value: t.id, label: t.name }));
-  }, [dynamicPricingEnabled, dynamicTiers]);
-
-  const activeTierId = selectedTier === 'base' ? null : selectedTier;
-
-  if (isLoading) {
-    return <p className="text-label-secondary text-sm py-8 text-center">Loading pricing calendar...</p>;
-  }
-
-  const hasProducts = groups.some(g => g.products.some(p => p.items.length > 0));
-  if (!hasProducts) {
-    return (
-      <p className="text-label-tertiary text-sm py-8 text-left">
-        No booking types with product items found. Add products with pricing to see the calendar view.
-      </p>
-    );
-  }
-
-  const headerTitle = `${format(days[0], 'd MMM')} – ${format(days[days.length - 1], 'd MMM yyyy')}`;
-
-  return (
-    <div className="flex flex-col gap-4 w-full min-w-0 overflow-hidden">
-      {/* Controls */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1">
-            <button
-              onClick={navigateBack}
-              className="w-8 h-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover flex items-center justify-center transition-colors"
-            >
-              <IconArrowLeft className="w-4 h-4 text-fill-action" size={16} />
-            </button>
-            <button
-              onClick={navigateForward}
-              className="w-8 h-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover flex items-center justify-center transition-colors"
-            >
-              <IconArrowRight className="w-4 h-4 text-fill-action" size={16} />
-            </button>
-          </div>
-          <div className="flex flex-col h-10 justify-center">
-            <div className="relative">
-              <input
-                ref={dateInputRef}
-                type="date"
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                value={format(currentDate, 'yyyy-MM-dd')}
-                onChange={(e) => {
-                  if (e.target.value) {
-                    setCurrentDate(new Date(e.target.value + 'T00:00:00'));
-                  }
-                }}
-              />
-              <span className="text-label-primary font-semibold text-sm hover:text-label-action transition-colors cursor-pointer text-left">
-                {headerTitle}
-              </span>
-            </div>
-            {!isWithinInterval(new Date(), { start: days[0], end: days[days.length - 1] }) && (
-              <button onClick={goToToday} className="text-label-action text-xs font-medium hover:underline transition-colors text-left leading-tight">
-                Back to this week
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Period Legend */}
-      {variablePricingEnabled && periods.length > 0 && (
-        <div className="flex items-center gap-3 flex-wrap">
-          <span className="text-label-secondary text-xs">Periods:</span>
-          {periods.filter(p => p.is_active).map(period => (
-            <div key={period.id} className="flex items-center gap-1.5">
-              <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: period.colour }} />
-              <span className="text-label-secondary text-xs">{period.name}</span>
-            </div>
-          ))}
-          <div className="flex items-center gap-1.5">
-            <span className="w-2.5 h-2.5 rounded-full flex-shrink-0 bg-surface-secondary border border-border-primary" />
-            <span className="text-label-secondary text-xs">Standard</span>
-          </div>
-        </div>
-      )}
-
-      {/* Dynamic Pricing Tier Quick Filter */}
-      {pricingFilters.length > 0 && (
-        <QuickFilters
-          label="Dynamic Prices:"
-          filters={pricingFilters}
-          activeFilter={selectedTier}
-          onFilterChange={setSelectedTier}
-          allFilterValue="base"
-        />
-      )}
-
-      {/* Calendar Grid */}
-      <div className="border border-border-primary rounded-lg overflow-x-auto bg-surface-primary">
-        <div className="min-w-[700px]">
-        {/* Day Headers */}
-        <div className="grid border-b border-border-primary" style={{ gridTemplateColumns: `180px repeat(7, 1fr)` }}>
-          <div className="p-2 text-label-secondary text-xs font-medium border-r border-border-primary bg-surface-secondary">
-            Activity
-          </div>
-          {days.map((day, i) => (
-            <div
-              key={i}
-              className={`p-2 text-center text-xs font-medium border-r border-border-primary last:border-r-0 bg-surface-secondary ${isToday(day) ? 'text-brand-primary' : 'text-label-secondary'}`}
-            >
-              <div className="flex flex-col">
-                <span>{format(day, 'EEE')}</span>
-                <span className={`text-sm font-semibold ${isToday(day) ? 'text-brand-primary' : 'text-label-primary'}`}>{format(day, 'd')}</span>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Data Rows */}
-        <WeekView
-          groups={groups}
-          days={days}
-          periods={variablePricingEnabled ? periods : []}
-          highlightProductId={highlightProductId}
-          openingHours={openingHours}
-          activeTierId={activeTierId}
-        />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// === Week View ===
-const WeekView: React.FC<{
-  groups: ProductGroup[];
-  days: Date[];
-  periods: PricingPeriod[];
-  highlightProductId: string | null;
-  openingHours: OpeningHour[];
-  activeTierId: string | null;
-}> = ({ groups, days, periods, highlightProductId, openingHours, activeTierId }) => (
-  <>
-    {groups.map((group, groupIdx) => (
-      <React.Fragment key={group.id}>
-        {/* Gap between groups */}
-        {groupIdx > 0 && <div className="h-2 bg-surface-secondary border-b border-border-primary" />}
-
-        {/* Product Group Header */}
-        <div
-          className="grid border-b border-border-primary"
-          style={{ gridTemplateColumns: `180px repeat(7, 1fr)` }}
-        >
-          <div className="px-4 py-2 flex items-center border-r border-border-primary bg-surface-tertiary">
-            <span className="text-label-primary text-xs font-semibold truncate">{group.name}</span>
-          </div>
-          <div className="col-span-7 bg-surface-tertiary" />
-        </div>
-
-        {/* Products (Activities) within group */}
-        {group.products.map(product => (
-          <React.Fragment key={product.id}>
-            {/* Activity Section Header */}
-            <div
-              className="grid border-b border-border-primary bg-surface-secondary"
-              style={{ gridTemplateColumns: `180px repeat(7, 1fr)` }}
-            >
-              <div className="px-4 py-1.5 border-r border-border-primary flex items-center">
-                <span className="text-label-secondary text-[11px] font-medium truncate">{product.name}</span>
-              </div>
-              <div className="col-span-7" />
-            </div>
-
-            {/* Product Items */}
-            {product.items.map(item => (
-              <div
-                key={item.id}
-                className={`grid border-b border-border-primary last:border-b-0 ${highlightProductId === product.id ? 'bg-brand-primary/5' : ''}`}
-                style={{ gridTemplateColumns: `180px repeat(7, 1fr)` }}
-              >
-                <div className="px-4 py-2 border-r border-border-primary flex items-center h-16">
-                  <span className="text-label-primary text-xs line-clamp-2 block">{item.title}</span>
-                </div>
-                {days.map((day, i) => {
-                  const available = isAvailableOnDate(item.availability_rules, day);
-                  
-                  // If not available, render a greyed-out cell
-                  if (!available) {
-                    return (
-                      <UnavailableCell key={i} isLast={i === days.length - 1} />
-                    );
-                  }
-                  
-                  const segments = getTimeSegments(day, periods, openingHours);
-                  
-                  // Check if multiple segments actually produce different prices for this item
-                  if (segments.length > 1) {
-                    const prices = segments.map(seg => {
-                      const result = getPriceForPeriod(item, seg.period);
-                      return {
-                        ...result,
-                        price: applyTierAdjustment(result.price, item, activeTierId),
-                      };
-                    });
-                    const allSamePrice = prices.every(p => p.price === prices[0].price && p.isPeriodPrice === prices[0].isPeriodPrice);
-                    
-                    if (!allSamePrice) {
-                      return (
-                        <MultiSegmentCell
-                          key={i}
-                          item={item}
-                          segments={segments}
-                          isLast={i === days.length - 1}
-                          activeTierId={activeTierId}
-                        />
-                      );
-                    }
-                  }
-                  
-                  // Single segment or all segments produce the same price — render single cell
-                  const period = segments[0].period;
-                  const result = getPriceForPeriod(item, period);
-                  const adjustedPrice = applyTierAdjustment(result.price, item, activeTierId);
-                  return (
-                    <PriceCell
-                      key={i}
-                      price={adjustedPrice}
-                      period={result.isPeriodPrice ? period : null}
-                      isLast={i === days.length - 1}
-                      isAdjusted={activeTierId !== null && adjustedPrice !== result.price}
-                    />
-                  );
-                })}
-              </div>
-            ))}
-          </React.Fragment>
-        ))}
-      </React.Fragment>
-    ))}
-  </>
-);
-
-// === Multi-Segment Cell (time-split day) ===
-const MultiSegmentCell: React.FC<{
-  item: ProductItem;
-  segments: TimeSegment[];
-  isLast: boolean;
-  activeTierId: string | null;
-}> = ({ item, segments, isLast, activeTierId }) => {
-  return (
-    <div className={`border-r border-border-primary flex flex-col h-16 ${isLast ? 'border-r-0' : ''}`}>
-      {segments.map((segment, idx) => {
-        const result = getPriceForPeriod(item, segment.period);
-        const basePrice = result.price;
-        const adjustedPrice = applyTierAdjustment(basePrice, item, activeTierId);
-        const colour = segment.period?.colour;
-        const hasPeriodColour = colour && result.isPeriodPrice;
-        const bgStyle = hasPeriodColour
-          ? { backgroundColor: `${colour}15`, '--hover-bg': `${colour}25` } as React.CSSProperties
-          : {};
-        
-        const timeLabel = segment.startTime && segment.endTime
-          ? `${segment.startTime}–${segment.endTime}`
-          : segment.startTime
-            ? `${segment.startTime}+`
-            : segment.endTime
-              ? `Until ${segment.endTime}`
-              : '';
-
-        const isAdjusted = activeTierId !== null && adjustedPrice !== basePrice;
-
-        return (
-          <Tooltip key={idx}>
-            <TooltipTrigger asChild>
-              <div
-                className={`px-4 py-1 flex flex-col items-center justify-center flex-1 min-h-[32px] cursor-default transition-colors ${idx < segments.length - 1 ? 'border-b border-border-secondary' : ''} ${hasPeriodColour ? '' : 'hover:bg-surface-primary-hover'}`}
-                style={bgStyle}
-                onMouseEnter={(e) => {
-                  if (hasPeriodColour) e.currentTarget.style.backgroundColor = `${colour}25`;
-                }}
-                onMouseLeave={(e) => {
-                  if (hasPeriodColour) e.currentTarget.style.backgroundColor = `${colour}15`;
-                }}
-              >
-                {adjustedPrice !== null ? (
-                  <span className="text-[10px] font-medium leading-tight text-label-primary">
-                    £{adjustedPrice.toFixed(2)}
-                  </span>
-                ) : (
-                  <span className="text-label-quaternary text-[9px]">—</span>
-                )}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              {segment.period && (
-                <div className="flex items-center gap-1.5">
-                  {colour && <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: colour }} />}
-                  <span className="text-xs">{segment.period.name}</span>
-                </div>
-              )}
-              {timeLabel && <p className="text-xs text-label-secondary">{timeLabel}</p>}
-              {isAdjusted && basePrice !== null && (
-                <p className="text-xs text-label-secondary line-through">£{basePrice.toFixed(2)}</p>
-              )}
-              {adjustedPrice !== null && <p className="text-xs font-semibold">£{adjustedPrice.toFixed(2)}</p>}
-            </TooltipContent>
-          </Tooltip>
-        );
-      })}
-    </div>
-  );
-};
-
-
-// === Unavailable Cell (greyed out) ===
-const UnavailableCell: React.FC<{ isLast: boolean }> = ({ isLast }) => (
-  <div
-    className={`p-1.5 border-r border-border-primary flex flex-col items-center justify-center h-16 bg-surface-secondary/50 ${isLast ? 'border-r-0' : ''}`}
-  >
-    <span className="text-label-quaternary text-[10px]">—</span>
-  </div>
-);
-
-// === Price Cell ===
-const PriceCell: React.FC<{
-  price: number | null;
-  period: PricingPeriod | null;
-  isLast: boolean;
-  outsideMonth?: boolean;
-  dayNumber?: string;
-  showDayNumber?: boolean;
-  isAdjusted?: boolean;
-}> = ({ price, period, isLast, outsideMonth, dayNumber, showDayNumber, isAdjusted }) => {
-  const colour = period?.colour;
-  const bgStyle = period
-    ? { backgroundColor: `${colour}15` }
-    : {};
-
-  const content = (
-    <div
-      className={`p-1.5 border-r border-border-primary flex flex-col items-center justify-center h-16 transition-colors cursor-default ${isLast ? 'border-r-0' : ''} ${outsideMonth ? 'opacity-40' : ''} ${period ? '' : 'hover:bg-surface-primary-hover'}`}
-      style={bgStyle}
-      onMouseEnter={(e) => {
-        if (period && colour) e.currentTarget.style.backgroundColor = `${colour}25`;
-      }}
-      onMouseLeave={(e) => {
-        if (period && colour) e.currentTarget.style.backgroundColor = `${colour}15`;
-      }}
-    >
-      {showDayNumber && <span className="text-[9px] text-label-tertiary">{dayNumber}</span>}
-      {price !== null ? (
-        <>
-          <span className="text-[11px] font-medium text-label-primary">£{price.toFixed(2)}</span>
-          {period && (
-            <span className="text-[8px] font-medium truncate max-w-full" style={{ color: period.colour }}>
-              {period.name}
-            </span>
-          )}
-        </>
-      ) : (
-        <span className="text-label-quaternary text-[10px]">—</span>
-      )}
-    </div>
-  );
-
-  if (period) {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{content}</TooltipTrigger>
-        <TooltipContent>
-          <div className="flex items-center gap-1.5">
-            {colour && <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: colour }} />}
-            <span className="text-xs">{period.name}</span>
-          </div>
-          {price !== null && <p className="text-xs font-semibold">£{price.toFixed(2)}</p>}
-        </TooltipContent>
-      </Tooltip>
-    );
-  }
-
-  return content;
-};
-
-export default PricingCalendar;