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

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

@@ -0,0 +1,1057 @@
+import React, { useState, useEffect } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { ScrollArea } from './ui/scroll-area';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { IconCross, IconLocation } from '../../icons';
+import { useNotify } from '../hooks/useNotify';
+import { isAvailableAtDateTime, parseAvailabilityRules, type AvailabilityRule } from '@/lib/availabilityUtils';
+
+interface Zone {
+  id: string;
+  name: string;
+  resources: Resource[];
+}
+
+interface Resource {
+  id: string;
+  name: string;
+  instances: number;
+}
+
+interface ResourceInstance {
+  resourceId: string;
+  resourceName: string;
+  instanceNumber: number;
+  displayName: string;
+  uniqueKey: string;
+}
+
+interface PriceTier {
+  name: string;
+  price: number;
+}
+
+interface Activity {
+  id: string;
+  name: string;
+  price: number | null;
+  duration: number | null;
+  zone_id: string | null;
+  resource_id: string | null;
+  price_tiers: PriceTier[] | null;
+}
+
+interface TierQuantity {
+  tierName: string;
+  tierPrice: number;
+  quantity: number;
+}
+
+interface QuickAddPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  providerId: string;
+  providerType: 'venue' | 'promoter';
+  // Pre-filled data from diary cell click
+  prefilledDate?: string;
+  prefilledTime?: string;
+  prefilledZoneId?: string;
+  prefilledZoneName?: string;
+  prefilledResourceId?: string;
+  prefilledResourceName?: string;
+  prefilledResourceInstance?: number;
+}
+
+export const QuickAddPanel: React.FC<QuickAddPanelProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+  providerId,
+  providerType,
+  prefilledDate,
+  prefilledTime,
+  prefilledZoneId,
+  prefilledZoneName,
+  prefilledResourceId,
+  prefilledResourceInstance,
+}) => {
+  const { showSuccess, showError } = useNotify();
+  // Step state
+  const [step, setStep] = useState<'details' | 'payment'>('details');
+
+  // Form state
+  const [flowType, setFlowType] = useState<'booking' | 'enquiry'>('booking');
+  const [customerFirstName, setCustomerFirstName] = useState('');
+  const [customerLastName, setCustomerLastName] = useState('');
+  const [customerEmail, setCustomerEmail] = useState('');
+  const [customerPhone, setCustomerPhone] = useState('');
+  const [bookingDate, setBookingDate] = useState(prefilledDate || '');
+  const [bookingTimeStart, setBookingTimeStart] = useState(prefilledTime || '');
+  const [bookingTimeEnd, setBookingTimeEnd] = useState('');
+  const [totalAmount, setTotalAmount] = useState('');
+  const [selectedZoneId, setSelectedZoneId] = useState(prefilledZoneId || '');
+  const [selectedResourceKey, setSelectedResourceKey] = useState(
+    prefilledResourceId && prefilledResourceInstance 
+      ? `${prefilledResourceId}-${prefilledResourceInstance}` 
+      : ''
+  );
+  const [quantity, setQuantity] = useState(1);
+  const [zoneName, setZoneName] = useState(prefilledZoneName || '');
+
+  // Payment state
+  const [paymentMethod, setPaymentMethod] = useState<'cash' | 'card' | 'payment_link'>('cash');
+  const [paymentLinkEmail, setPaymentLinkEmail] = useState('');
+
+  // Data state
+  const [zones, setZones] = useState<Zone[]>([]);
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const [selectedActivityId, setSelectedActivityId] = useState<string>('');
+  const [activityName, setActivityName] = useState('');
+  const [tierQuantities, setTierQuantities] = useState<TierQuantity[]>([]);
+  const [showEndTime, setShowEndTime] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isEditingResource, setIsEditingResource] = useState(false);
+
+  // Reset form when panel opens with new data
+  useEffect(() => {
+    if (isOpen) {
+      setStep('details');
+      setFlowType('booking');
+      setCustomerFirstName('');
+      setCustomerLastName('');
+      setCustomerEmail('');
+      setCustomerPhone('');
+      setBookingDate(prefilledDate || '');
+      setBookingTimeStart(prefilledTime || '');
+      setBookingTimeEnd('');
+      setTotalAmount('');
+      setSelectedZoneId(prefilledZoneId || '');
+      setSelectedResourceKey(
+        prefilledResourceId && prefilledResourceInstance 
+          ? `${prefilledResourceId}-${prefilledResourceInstance}` 
+          : ''
+      );
+      setQuantity(1);
+      setZoneName(prefilledZoneName || '');
+      setPaymentMethod('cash');
+      setPaymentLinkEmail('');
+      setSelectedActivityId('');
+      setActivityName('');
+      setActivities([]);
+      setTierQuantities([]);
+      setShowEndTime(false);
+      setIsEditingResource(!prefilledResourceId); // Start in edit mode if no prefilled resource
+    }
+  }, [isOpen, prefilledDate, prefilledTime, prefilledZoneId, prefilledZoneName, prefilledResourceId, prefilledResourceInstance]);
+
+  // Fetch zones and resources
+  useEffect(() => {
+    if (isOpen && providerId) {
+      fetchZones();
+    }
+  }, [isOpen, providerId]);
+
+  // Fetch activities when zone, resource, date, or time changes
+  useEffect(() => {
+    if (isOpen && providerId && selectedZoneId) {
+      fetchActivities();
+    } else {
+      setActivities([]);
+      setSelectedActivityId('');
+    }
+  }, [isOpen, providerId, selectedZoneId, selectedResourceKey, bookingDate, bookingTimeStart]);
+
+  const fetchActivities = async () => {
+    try {
+      // Parse the selected resource key to get resource_id (UUID-safe)
+      const resourceId = (() => {
+        if (!selectedResourceKey) return null;
+        const lastDash = selectedResourceKey.lastIndexOf('-');
+        if (lastDash <= 0) return null;
+        return selectedResourceKey.slice(0, lastDash);
+      })();
+      
+      // Build query - get products for this provider that match the zone
+      const [productsRes, itemsRes] = await Promise.all([
+        supabase
+          .from('products')
+          .select('id, name, price, duration, zone_id, resource_id, price_tiers')
+          .eq('provider_id', providerId)
+          .eq('status', 'active')
+          .eq('zone_id', selectedZoneId)
+          .order('name'),
+        supabase
+          .from('product_items')
+          .select('product_id, availability_rules')
+          .eq('provider_id', providerId)
+          .eq('status', 'active'),
+      ]);
+
+      if (productsRes.error) throw productsRes.error;
+      
+      // Filter by resource: include products with matching resource_id OR zone-wide products (no resource_id)
+      const filteredData = resourceId 
+        ? (productsRes.data || []).filter(product => !product.resource_id || product.resource_id === resourceId)
+        : productsRes.data || [];
+      
+      // Build a map of product_id -> availability rules from product_items
+      const productAvailability = new Map<string, AvailabilityRule[][]>();
+      if (itemsRes.data) {
+        for (const item of itemsRes.data) {
+          const rules = parseAvailabilityRules(item.availability_rules);
+          if (!productAvailability.has(item.product_id)) {
+            productAvailability.set(item.product_id, []);
+          }
+          productAvailability.get(item.product_id)!.push(rules);
+        }
+      }
+
+      // Filter out products where ALL items are unavailable for the selected date/time
+      const bookingDateObj = bookingDate ? new Date(bookingDate + 'T00:00:00') : null;
+      const availableProducts = filteredData.filter(product => {
+        const itemRules = productAvailability.get(product.id);
+        // No product items → product is available (no restrictions)
+        if (!itemRules || itemRules.length === 0) return true;
+        // At least one item must be available
+        return itemRules.some(rules => {
+          if (!bookingDateObj) return true;
+          return isAvailableAtDateTime(rules, bookingDateObj, bookingTimeStart || undefined);
+        });
+      });
+      
+      // Map data to include price_tiers properly typed
+      const activitiesData: Activity[] = availableProducts.map(item => ({
+        ...item,
+        price_tiers: Array.isArray(item.price_tiers) ? item.price_tiers as unknown as PriceTier[] : null
+      }));
+      setActivities(activitiesData);
+    } catch (error) {
+      console.error('Error fetching activities:', error);
+      setActivities([]);
+    }
+  };
+
+  const fetchZones = async () => {
+    setIsLoading(true);
+    try {
+      const { data: zonesData, error: zonesError } = await supabase
+        .from('zones')
+        .select('id, name')
+        .eq('provider_id', providerId)
+        .eq('status', 'active')
+        .order('display_order');
+
+      if (zonesError) throw zonesError;
+
+      const zonesWithResources: Zone[] = [];
+      for (const zone of zonesData || []) {
+        const { data: resourcesData, error: resourcesError } = await supabase
+          .from('resources')
+          .select('id, name, instances')
+          .eq('zone_id', zone.id)
+          .order('display_order', { ascending: true });
+
+        if (resourcesError) throw resourcesError;
+
+        zonesWithResources.push({
+          ...zone,
+          resources: resourcesData || []
+        });
+      }
+
+      setZones(zonesWithResources);
+    } catch (error) {
+      console.error('Error fetching zones:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const generateReferenceNumber = () => {
+    const prefix = flowType === 'booking' ? 'BKG' : 'ENQ';
+    const timestamp = Date.now().toString(36).toUpperCase();
+    const random = Math.random().toString(36).substring(2, 6).toUpperCase();
+    return `${prefix}-${timestamp}${random}`;
+  };
+
+  // Get all resource instances for the selected zone
+  const getResourceInstances = (): ResourceInstance[] => {
+    const selectedZone = zones.find(z => z.id === selectedZoneId);
+    if (!selectedZone) return [];
+
+    const instances: ResourceInstance[] = [];
+    for (const resource of selectedZone.resources) {
+      for (let i = 1; i <= resource.instances; i++) {
+        instances.push({
+          resourceId: resource.id,
+          resourceName: resource.name,
+          instanceNumber: i,
+          displayName: resource.instances > 1 ? `${resource.name} ${i}` : resource.name,
+          uniqueKey: `${resource.id}-${i}`
+        });
+      }
+    }
+    return instances;
+  };
+
+  // Calculate end time based on activity duration and quantity
+  const getCalculatedEndTime = (): string => {
+    if (bookingTimeEnd) return bookingTimeEnd; // Use manual end time if set
+    
+    const selectedActivity = activities.find(a => a.id === selectedActivityId);
+    const duration = selectedActivity?.duration;
+    
+    if (!duration || !bookingTimeStart) return '';
+    
+    const [hours, minutes] = bookingTimeStart.split(':').map(Number);
+    const startMinutes = hours * 60 + minutes;
+    // Multiply duration by quantity for per-person activities
+    const totalDuration = duration * quantity;
+    const endMinutes = startMinutes + totalDuration;
+    const endHours = Math.floor(endMinutes / 60) % 24;
+    const endMins = endMinutes % 60;
+    return `${endHours.toString().padStart(2, '0')}:${endMins.toString().padStart(2, '0')}`;
+  };
+
+  // Handle activity selection
+  const handleActivitySelect = (activityId: string) => {
+    setSelectedActivityId(activityId);
+    const activity = activities.find(a => a.id === activityId);
+    if (activity) {
+      setActivityName(activity.name);
+      
+      // Initialize tier quantities based on activity's price tiers
+      const tiers = activity.price_tiers;
+      if (tiers && tiers.length > 0) {
+        // Has multiple tiers - set up tier quantities (all start at 0 except first at 1)
+        const initialTiers: TierQuantity[] = tiers.map((tier, index) => ({
+          tierName: tier.name || `Tier ${index + 1}`,
+          tierPrice: tier.price,
+          quantity: index === 0 ? 1 : 0
+        }));
+        setTierQuantities(initialTiers);
+        setQuantity(1);
+        // Calculate initial total
+        setTotalAmount(initialTiers[0].tierPrice.toString());
+      } else {
+        // Single price - use simple quantity
+        setTierQuantities([]);
+        setQuantity(1);
+        if (activity.price !== null) {
+          setTotalAmount(activity.price.toString());
+        }
+      }
+    }
+  };
+
+  // Update tier quantity
+  const handleTierQuantityChange = (tierIndex: number, newQty: number) => {
+    const clampedQty = Math.max(0, newQty);
+    const newTiers = [...tierQuantities];
+    newTiers[tierIndex] = { ...newTiers[tierIndex], quantity: clampedQty };
+    setTierQuantities(newTiers);
+    
+    // Calculate total from all tiers
+    const total = newTiers.reduce((sum, tier) => sum + (tier.tierPrice * tier.quantity), 0);
+    setTotalAmount(total.toString());
+    
+    // Update main quantity (total of all tier quantities)
+    const totalQty = newTiers.reduce((sum, tier) => sum + tier.quantity, 0);
+    setQuantity(Math.max(1, totalQty));
+  };
+
+  // Update price when quantity changes (for single-price activities)
+  const handleQuantityChange = (newQty: number) => {
+    const clampedQty = Math.max(1, newQty);
+    setQuantity(clampedQty);
+    
+    // Update total amount if activity has a price (and no tiers)
+    if (tierQuantities.length === 0) {
+      const selectedActivity = activities.find(a => a.id === selectedActivityId);
+      if (selectedActivity?.price !== null && selectedActivity?.price !== undefined) {
+        setTotalAmount((selectedActivity.price * clampedQty).toString());
+      }
+    }
+  };
+
+  // Get total quantity from tiers
+  const getTotalQuantity = (): number => {
+    if (tierQuantities.length > 0) {
+      return tierQuantities.reduce((sum, tier) => sum + tier.quantity, 0);
+    }
+    return quantity;
+  };
+
+  const handleNext = () => {
+    if (!bookingDate) {
+      showError('Booking date is required.');
+      return;
+    }
+
+    if (!bookingTimeStart) {
+      showError('Start time is required.');
+      return;
+    }
+
+    if (!selectedResourceKey) {
+      showError('Please select a resource.');
+      return;
+    }
+
+    setStep('payment');
+  };
+
+  const handleBack = () => {
+    setStep('details');
+  };
+
+  const handleSubmit = async () => {
+    if (paymentMethod === 'payment_link' && !paymentLinkEmail.trim()) {
+      showError('Email is required for payment link.');
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const referenceNumber = generateReferenceNumber();
+      const amount = parseFloat(totalAmount) || 0;
+      const fullName = [customerFirstName.trim(), customerLastName.trim()].filter(Boolean).join(' ') || 'Walk-in Customer';
+
+      // Determine status based on payment method
+      let status: 'active' | 'initial_contact' = 'active';
+      if (paymentMethod === 'payment_link') {
+        status = 'initial_contact';
+      }
+
+      // Get selected resource details
+      const resourceInstances = getResourceInstances();
+      const selectedInstance = resourceInstances.find(r => r.uniqueKey === selectedResourceKey);
+      // Use selected activity name, custom activity name, zone name, or resource name as fallback
+      const activityNameForFlow = activityName.trim() || zoneName || selectedInstance?.resourceName || 'Booking';
+
+      const { error } = await supabase
+        .from('bookings')
+        .insert({
+          provider_id: providerId,
+          reference_number: referenceNumber,
+          type: flowType,
+          customer_name: fullName,
+          customer_email: paymentMethod === 'payment_link' ? paymentLinkEmail.trim() : (customerEmail.trim() || null),
+          customer_phone: customerPhone.trim() || null,
+          activity_name: activityNameForFlow,
+          booking_date: bookingDate,
+          booking_time_start: bookingTimeStart,
+          booking_time_end: getCalculatedEndTime() || null,
+          total_amount: amount,
+          net_amount: amount * 0.9,
+          status: status,
+          zone_id: selectedZoneId || null,
+          resource_id: selectedInstance?.resourceId || null,
+          resource_instance: selectedInstance?.instanceNumber || null
+        });
+
+      if (error) throw error;
+
+      const successMessage = paymentMethod === 'payment_link' 
+        ? `Payment link sent to ${paymentLinkEmail}. Booking pending payment.`
+        : paymentMethod === 'card'
+        ? 'Payment sent to PDQ machine. Booking confirmed.'
+        : 'Cash payment recorded. Booking confirmed.';
+
+      showSuccess(`${flowType === 'booking' ? 'Booking' : 'Enquiry'} #${referenceNumber} created`, successMessage);
+
+      onSuccess();
+      onClose();
+    } catch (error) {
+      console.error('Error creating flow:', error);
+      showError('Failed to create flow. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const selectedZone = zones.find(z => z.id === selectedZoneId);
+  const resourceInstances = getResourceInstances();
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Overlay */}
+      <div 
+        className="fixed inset-0 z-40 animate-fade-in"
+        style={{ backgroundColor: 'var(--overlay-curtain)' }}
+        onClick={onClose}
+      />
+      
+      {/* Panel */}
+      <div 
+        className="fixed right-0 top-0 h-screen w-full sm:w-[480px] bg-surface-primary shadow-xl z-50 animate-slide-in-right flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between p-4 border-b border-border-primary shrink-0">
+          <div className="flex flex-col gap-1">
+            <h2 className="text-lg font-semibold text-label-primary">
+              {step === 'details' ? 'Quick Add' : 'Payment'}
+            </h2>
+            {zoneName && (
+              <div className="flex items-center gap-1.5">
+                <IconLocation className="w-4 h-4 text-fill-secondary" />
+                <span className="text-sm text-label-secondary">{zoneName}</span>
+              </div>
+            )}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            aria-label="Close panel"
+          >
+            <IconCross className="w-5 h-5 text-label-secondary" />
+          </Button>
+        </div>
+
+        <ScrollArea className="flex-1">
+          <div className="p-4">
+            {step === 'details' ? (
+              <div className="flex flex-col gap-6">
+                {/* Flow Type */}
+                <div className="flex flex-col gap-3">
+                  <Label className="text-label-primary font-semibold">Flow Type</Label>
+                  <RadioGroup
+                    value={flowType}
+                    onValueChange={(value) => setFlowType(value as 'booking' | 'enquiry')}
+                    className="flex gap-4"
+                  >
+                    <div className="flex items-center gap-2">
+                      <RadioGroupItem value="booking" id="panel-booking" />
+                      <Label htmlFor="panel-booking" className="text-label-secondary cursor-pointer">Booking</Label>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <RadioGroupItem value="enquiry" id="panel-enquiry" />
+                      <Label htmlFor="panel-enquiry" className="text-label-secondary cursor-pointer">Enquiry</Label>
+                    </div>
+                  </RadioGroup>
+                </div>
+
+                {/* Booking Details */}
+                <div className="flex flex-col gap-4">
+                  <h3 className="text-label-primary font-semibold">Booking Details</h3>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="panel-bookingDate" className="text-label-primary">Date</Label>
+                      <Input
+                        id="panel-bookingDate"
+                        type="date"
+                        value={bookingDate}
+                        onChange={(e) => setBookingDate(e.target.value)}
+                      />
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="panel-bookingTimeStart" className="text-label-primary">Start Time</Label>
+                      <Input
+                        id="panel-bookingTimeStart"
+                        type="time"
+                        value={bookingTimeStart}
+                        onChange={(e) => setBookingTimeStart(e.target.value)}
+                      />
+                    </div>
+                  </div>
+
+                  {/* End Time - conditional */}
+                  {showEndTime ? (
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="panel-bookingTimeEnd" className="text-label-primary">End Time</Label>
+                      <Input
+                        id="panel-bookingTimeEnd"
+                        type="time"
+                        value={bookingTimeEnd}
+                        onChange={(e) => setBookingTimeEnd(e.target.value)}
+                      />
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="link"
+                        onClick={() => setShowEndTime(true)}
+                        className="text-sm h-auto p-0"
+                      >
+                        + Add end time
+                      </Button>
+                      {getCalculatedEndTime() && (
+                        <span className="text-xs text-label-tertiary">
+                          (Auto: {getCalculatedEndTime()})
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {/* Resource Selection - Inline with edit */}
+                {selectedZone && resourceInstances.length > 0 && (
+                  <div className="flex flex-col gap-3">
+                    <h3 className="text-label-primary font-semibold">Resource</h3>
+                    
+                    {selectedResourceKey && !isEditingResource ? (
+                      // Compact view with edit button
+                      <div className="flex items-center justify-between p-3 bg-surface-secondary rounded-lg border border-border-primary">
+                        <span className="text-label-primary">
+                          {resourceInstances.find(r => r.uniqueKey === selectedResourceKey)?.displayName}
+                        </span>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setIsEditingResource(true)}
+                          className="text-label-action hover:text-label-action-hover"
+                        >
+                          Edit
+                        </Button>
+                      </div>
+                    ) : (
+                      // Full selection view
+                      <div className="flex flex-col gap-2">
+                        <RadioGroup
+                          value={selectedResourceKey}
+                          onValueChange={(value) => {
+                            setSelectedResourceKey(value);
+                            setIsEditingResource(false);
+                          }}
+                          className="grid grid-cols-2 gap-2"
+                        >
+                          {resourceInstances.map((instance) => (
+                            <div
+                              key={instance.uniqueKey}
+                              className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                                selectedResourceKey === instance.uniqueKey
+                                  ? 'border-border-action bg-surface-action-soft'
+                                  : 'border-border-primary hover:border-border-secondary'
+                              }`}
+                              onClick={() => {
+                                setSelectedResourceKey(instance.uniqueKey);
+                                setIsEditingResource(false);
+                              }}
+                            >
+                              <RadioGroupItem value={instance.uniqueKey} id={`panel-${instance.uniqueKey}`} />
+                              <Label htmlFor={`panel-${instance.uniqueKey}`} className="text-label-primary cursor-pointer flex-1 text-sm">
+                                {instance.displayName}
+                              </Label>
+                            </div>
+                          ))}
+                        </RadioGroup>
+                        {selectedResourceKey && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setIsEditingResource(false)}
+                            className="self-start text-label-secondary"
+                          >
+                            Cancel
+                          </Button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Activity Selection - Show when zone is selected */}
+                {selectedZoneId && (
+                  <div className="flex flex-col gap-4">
+                    <h3 className="text-label-primary font-semibold">Activity</h3>
+                    
+                    {activities.length > 0 ? (
+                      <>
+                        <Select value={selectedActivityId} onValueChange={handleActivitySelect}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Select an activity" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {activities.map((activity) => (
+                              <SelectItem key={activity.id} value={activity.id}>
+                                <div className="flex items-center justify-between w-full gap-4">
+                                  <span>{activity.name}</span>
+                                  <span className="text-label-tertiary text-xs">
+                                    {activity.price !== null && `£${activity.price.toFixed(2)}`}
+                                    {activity.duration !== null && ` • ${activity.duration} mins`}
+                                  </span>
+                                </div>
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+
+                        {/* Tier quantities - show when activity has multiple tiers */}
+                        {tierQuantities.length > 0 && (
+                          <div className="flex flex-col gap-3 p-3 bg-surface-secondary rounded-lg border border-border-primary">
+                            <Label className="text-label-secondary text-sm">Quantity per tier</Label>
+                            {tierQuantities.map((tier, index) => (
+                              <div key={index} className="flex items-center justify-between gap-3">
+                                <div className="flex-1">
+                                  <span className="text-label-primary text-sm">{tier.tierName}</span>
+                                  <span className="text-label-tertiary text-xs ml-2">£{tier.tierPrice.toFixed(2)}</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                  <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="icon"
+                                    className="h-8 w-8 shrink-0"
+                                    onClick={() => handleTierQuantityChange(index, tier.quantity - 1)}
+                                    disabled={tier.quantity <= 0}
+                                  >
+                                    <span className="text-sm">−</span>
+                                  </Button>
+                                  <Input
+                                    type="number"
+                                    min="0"
+                                    value={tier.quantity}
+                                    onChange={(e) => handleTierQuantityChange(index, parseInt(e.target.value) || 0)}
+                                    className="text-center w-14 h-8"
+                                  />
+                                  <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="icon"
+                                    className="h-8 w-8 shrink-0"
+                                    onClick={() => handleTierQuantityChange(index, tier.quantity + 1)}
+                                  >
+                                    <span className="text-sm">+</span>
+                                  </Button>
+                                </div>
+                              </div>
+                            ))}
+                            <div className="flex justify-between pt-2 border-t border-border-primary">
+                              <span className="text-label-secondary text-sm">Total</span>
+                              <span className="text-label-primary font-semibold">
+                                {getTotalQuantity()} × £{parseFloat(totalAmount || '0').toFixed(2)}
+                              </span>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Simple qty picker - show when activity has no tiers */}
+                        {selectedActivityId && tierQuantities.length === 0 && (
+                          <div className="flex flex-col gap-2">
+                            <Label className="text-label-primary">Quantity</Label>
+                            <div className="flex items-center gap-1 w-fit">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                className="h-10 w-10 shrink-0"
+                                onClick={() => handleQuantityChange(quantity - 1)}
+                                disabled={quantity <= 1}
+                              >
+                                <span className="text-lg">−</span>
+                              </Button>
+                              <Input
+                                type="text"
+                                inputMode="numeric"
+                                pattern="[0-9]*"
+                                value={quantity}
+                                onChange={(e) => handleQuantityChange(parseInt(e.target.value) || 1)}
+                                className="text-center w-16 [appearance:textfield]"
+                              />
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                className="h-10 w-10 shrink-0"
+                                onClick={() => handleQuantityChange(quantity + 1)}
+                              >
+                                <span className="text-lg">+</span>
+                              </Button>
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    ) : (
+                      // No activities - show custom input with qty
+                      <>
+                        <div className="flex flex-col gap-2">
+                          <Label htmlFor="panel-activityName" className="text-label-primary">Activity Name</Label>
+                          <Input
+                            id="panel-activityName"
+                            value={activityName}
+                            onChange={(e) => setActivityName(e.target.value)}
+                            
+                          />
+                        </div>
+                        
+                        {/* Simple qty picker for custom activities */}
+                        <div className="flex flex-col gap-2">
+                          <Label className="text-label-primary">Quantity</Label>
+                          <div className="flex items-center gap-1 w-fit">
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="icon"
+                              className="h-10 w-10 shrink-0"
+                              onClick={() => handleQuantityChange(quantity - 1)}
+                              disabled={quantity <= 1}
+                            >
+                              <span className="text-lg">−</span>
+                            </Button>
+                            <Input
+                              type="text"
+                              inputMode="numeric"
+                              pattern="[0-9]*"
+                              value={quantity}
+                              onChange={(e) => handleQuantityChange(parseInt(e.target.value) || 1)}
+                              className="text-center w-16 [appearance:textfield]"
+                            />
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="icon"
+                              className="h-10 w-10 shrink-0"
+                              onClick={() => handleQuantityChange(quantity + 1)}
+                            >
+                              <span className="text-lg">+</span>
+                            </Button>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                )}
+
+
+                <div className="flex flex-col gap-4">
+                  <h3 className="text-label-primary font-semibold">Financials</h3>
+
+                  <div className="flex flex-col gap-2">
+                    <Label htmlFor="panel-totalAmount" className="text-label-primary">Total Amount (£)</Label>
+                    <Input
+                      id="panel-totalAmount"
+                      type="number"
+                      step="0.01"
+                      min="0"
+                      value={totalAmount}
+                      onChange={(e) => setTotalAmount(e.target.value)}
+                      
+                      className="max-w-[200px]"
+                    />
+                  </div>
+                </div>
+
+                {/* Customer Details - Optional */}
+                <div className="flex flex-col gap-4">
+                  <h3 className="text-label-primary font-semibold">Customer Details (Optional)</h3>
+                  
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="panel-customerFirstName" className="text-label-primary">First Name</Label>
+                      <Input
+                        id="panel-customerFirstName"
+                        value={customerFirstName}
+                        onChange={(e) => setCustomerFirstName(e.target.value)}
+                        
+                      />
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="panel-customerLastName" className="text-label-primary">Last Name</Label>
+                      <Input
+                        id="panel-customerLastName"
+                        value={customerLastName}
+                        onChange={(e) => setCustomerLastName(e.target.value)}
+                        
+                      />
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="panel-customerEmail" className="text-label-primary">Email</Label>
+                      <Input
+                        id="panel-customerEmail"
+                        type="email"
+                        value={customerEmail}
+                        onChange={(e) => setCustomerEmail(e.target.value)}
+                         
+                      />
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="panel-customerPhone" className="text-label-primary">Phone</Label>
+                      <Input
+                        id="panel-customerPhone"
+                        type="tel"
+                        value={customerPhone}
+                        onChange={(e) => setCustomerPhone(e.target.value)}
+                        
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-6">
+                {/* Payment Method Selection */}
+                <div className="flex flex-col gap-4">
+                  <h3 className="text-label-primary font-semibold">Payment Method</h3>
+                  <RadioGroup
+                    value={paymentMethod}
+                    onValueChange={(value) => setPaymentMethod(value as 'cash' | 'card' | 'payment_link')}
+                    className="flex flex-col gap-2"
+                  >
+                    <div
+                      className={`flex items-center gap-3 p-4 rounded-lg border cursor-pointer transition-colors ${
+                        paymentMethod === 'cash'
+                          ? 'border-border-action bg-surface-action-soft'
+                          : 'border-border-primary hover:border-border-secondary'
+                      }`}
+                      onClick={() => setPaymentMethod('cash')}
+                    >
+                      <RadioGroupItem value="cash" id="panel-cash" />
+                      <div className="flex flex-col flex-1">
+                        <Label htmlFor="panel-cash" className="text-label-primary cursor-pointer font-medium">
+                          Cash
+                        </Label>
+                        <span className="text-label-secondary text-sm">
+                          Complete booking and add to till manually
+                        </span>
+                      </div>
+                    </div>
+
+                    <div
+                      className={`flex items-center gap-3 p-4 rounded-lg border cursor-pointer transition-colors ${
+                        paymentMethod === 'card'
+                          ? 'border-border-action bg-surface-action-soft'
+                          : 'border-border-primary hover:border-border-secondary'
+                      }`}
+                      onClick={() => setPaymentMethod('card')}
+                    >
+                      <RadioGroupItem value="card" id="panel-card" />
+                      <div className="flex flex-col flex-1">
+                        <Label htmlFor="panel-card" className="text-label-primary cursor-pointer font-medium">
+                          Card
+                        </Label>
+                        <span className="text-label-secondary text-sm">
+                          Send payment to PDQ machine
+                        </span>
+                      </div>
+                    </div>
+
+                    <div
+                      className={`flex items-center gap-3 p-4 rounded-lg border cursor-pointer transition-colors ${
+                        paymentMethod === 'payment_link'
+                          ? 'border-border-action bg-surface-action-soft'
+                          : 'border-border-primary hover:border-border-secondary'
+                      }`}
+                      onClick={() => setPaymentMethod('payment_link')}
+                    >
+                      <RadioGroupItem value="payment_link" id="panel-payment_link" />
+                      <div className="flex flex-col flex-1">
+                        <Label htmlFor="panel-payment_link" className="text-label-primary cursor-pointer font-medium">
+                          Payment Link
+                        </Label>
+                        <span className="text-label-secondary text-sm">
+                          Send payment link via email - booking pending until paid
+                        </span>
+                      </div>
+                    </div>
+                  </RadioGroup>
+                </div>
+
+                {/* Payment Link Email Field */}
+                {paymentMethod === 'payment_link' && (
+                  <div className="flex flex-col gap-2">
+                    <Label htmlFor="panel-paymentLinkEmail" className="text-label-primary">
+                      Email Address *
+                    </Label>
+                    <Input
+                      id="panel-paymentLinkEmail"
+                      type="email"
+                      value={paymentLinkEmail}
+                      onChange={(e) => setPaymentLinkEmail(e.target.value)}
+                      
+                    />
+                    <p className="text-label-secondary text-sm">
+                      Payment link will be sent to this email address
+                    </p>
+                  </div>
+                )}
+
+                {/* Summary */}
+                <div className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-lg border border-border-primary">
+                  <h3 className="text-label-primary font-semibold">Summary</h3>
+                  {zoneName && (
+                    <div className="flex justify-between text-sm">
+                      <span className="text-label-secondary">Zone</span>
+                      <span className="text-label-primary">{zoneName}</span>
+                    </div>
+                  )}
+                  {selectedResourceKey && (
+                    <div className="flex justify-between text-sm">
+                      <span className="text-label-secondary">Resource</span>
+                      <span className="text-label-primary">{resourceInstances.find(r => r.uniqueKey === selectedResourceKey)?.displayName}</span>
+                    </div>
+                  )}
+                  {activityName && (
+                    <div className="flex justify-between text-sm">
+                      <span className="text-label-secondary">Activity</span>
+                      <span className="text-label-primary">{activityName}</span>
+                    </div>
+                  )}
+                  <div className="flex justify-between text-sm">
+                    <span className="text-label-secondary">Date & Time</span>
+                    <span className="text-label-primary">
+                      {bookingDate} at {bookingTimeStart}
+                      {getCalculatedEndTime() && ` - ${getCalculatedEndTime()}`}
+                    </span>
+                  </div>
+                  {quantity > 1 && (
+                    <div className="flex justify-between text-sm">
+                      <span className="text-label-secondary">Quantity</span>
+                      <span className="text-label-primary">{quantity}</span>
+                    </div>
+                  )}
+                  {totalAmount && (
+                    <div className="flex justify-between text-sm">
+                      <span className="text-label-secondary">Total</span>
+                      <span className="text-label-primary font-semibold">£{parseFloat(totalAmount).toFixed(2)}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Footer with buttons */}
+        <div className="p-4 border-t border-border-primary shrink-0">
+          {step === 'details' ? (
+            <div className="flex gap-3">
+              <Button onClick={handleNext} className="flex-1">
+                Next
+              </Button>
+              <Button variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+            </div>
+          ) : (
+            <div className="flex gap-3">
+              <Button onClick={handleSubmit} disabled={isSaving} className="flex-1">
+                {isSaving ? 'Saving...' : 'Save & Add'}
+              </Button>
+              <Button variant="outline" onClick={handleBack}>
+                Back
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};