@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

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

@@ -0,0 +1,810 @@
+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;