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

package/src/v2/shadcn/_reference/products/BookingTypeConfigOptions.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Checkbox } from '../ui/checkbox';
+import { Label } from '../ui/label';
+
+interface ConfigOption {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+interface BookingTypeConfigOptionsProps {
+  options: ConfigOption[];
+}
+
+/**
+ * Configuration checkbox options for Booking Type products
+ * Extracted to keep the main form component manageable
+ */
+const BookingTypeConfigOptions: React.FC<BookingTypeConfigOptionsProps> = ({ options }) => {
+  return (
+    <div className="flex flex-col gap-3">
+      {options.map((option) => (
+        <div key={option.id} className="flex items-start gap-2">
+          <Checkbox
+            id={option.id}
+            checked={option.checked}
+            onCheckedChange={(checked) => option.onChange(checked === true)}
+            className="mt-0.5"
+          />
+          <Label htmlFor={option.id} className="font-normal cursor-pointer leading-tight">
+            {option.label}
+          </Label>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BookingTypeConfigOptions;

package/src/v2/shadcn/_reference/products/CapacityPeriodsSection.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Checkbox } from '../ui/checkbox';
+import { Switch } from '../ui/switch';
+import { IconPlus, IconDelete, IconTime } from '../../../icons';
+
+export interface CapacityPeriod {
+  days: string[];
+  is_24_hours: boolean;
+  start_time?: string;
+  end_time?: string;
+  max_capacity: number;
+  min_capacity: number | null;
+}
+
+const DAY_OPTIONS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+/** Returns an error message if any capacity periods have overlapping day+time combinations, or null if valid. */
+export function validateCapacityPeriods(periods: CapacityPeriod[]): string | null {
+  if (periods.length < 2) return null;
+
+  const timeToMinutes = (t: string): number => {
+    const [h, m] = t.split(':').map(Number);
+    return h * 60 + m;
+  };
+
+  const timesOverlap = (a: CapacityPeriod, b: CapacityPeriod): boolean => {
+    // If either covers all hours, they overlap on any shared day
+    if (a.is_24_hours || b.is_24_hours) return true;
+    const aStart = timeToMinutes(a.start_time || '00:00');
+    const aEnd = timeToMinutes(a.end_time || '23:59');
+    const bStart = timeToMinutes(b.start_time || '00:00');
+    const bEnd = timeToMinutes(b.end_time || '23:59');
+    return aStart < bEnd && bStart < aEnd;
+  };
+
+  for (let i = 0; i < periods.length; i++) {
+    for (let j = i + 1; j < periods.length; j++) {
+      const a = periods[i];
+      const b = periods[j];
+      const sharedDays = (a.days || []).filter(d => (b.days || []).includes(d));
+      if (sharedDays.length > 0 && timesOverlap(a, b)) {
+        return `Capacity periods ${i + 1} and ${j + 1} overlap on ${sharedDays.join(', ')}. Please adjust the days or times so they don't conflict.`;
+      }
+    }
+  }
+  return null;
+}
+
+interface CapacityPeriodsSectionProps {
+  periods: CapacityPeriod[];
+  onChange: (periods: CapacityPeriod[]) => void;
+}
+
+const CapacityPeriodsSection: React.FC<CapacityPeriodsSectionProps> = ({ periods, onChange }) => {
+  const sameCapacityEveryDay = periods.length === 0;
+
+  const handleToggleSameCapacity = (checked: boolean) => {
+    if (checked) {
+      // "Same capacity every day" = clear all periods
+      onChange([]);
+    } else {
+      // Add a default period
+      onChange([{ days: [], is_24_hours: true, max_capacity: 1, min_capacity: null }]);
+    }
+  };
+
+  const addPeriod = () => {
+    onChange([...periods, { days: [], is_24_hours: true, max_capacity: 1, min_capacity: null }]);
+  };
+
+  const updatePeriod = (index: number, updates: Partial<CapacityPeriod>) => {
+    onChange(periods.map((p, i) => i === index ? { ...p, ...updates } : p));
+  };
+
+  const removePeriod = (index: number) => {
+    onChange(periods.filter((_, i) => i !== index));
+  };
+
+  const toggleDay = (periodIndex: number, day: string) => {
+    const period = periods[periodIndex];
+    const days = period.days || [];
+    const updated = days.includes(day) ? days.filter(d => d !== day) : [...days, day];
+    updatePeriod(periodIndex, { days: updated });
+  };
+
+  const toggle24Hours = (index: number, checked: boolean) => {
+    if (checked) {
+      updatePeriod(index, { is_24_hours: true, start_time: undefined, end_time: undefined });
+    } else {
+      updatePeriod(index, { is_24_hours: false, start_time: '09:00', end_time: '17:00' });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <h2 className="text-label-primary text-base font-semibold">Capacity Overrides</h2>
+        <p className="text-label-secondary text-xs">
+          Override capacity on specific days and times. Base values apply when no period matches.
+        </p>
+        <p className="text-label-secondary text-xs">
+          Default capacities apply when no overrides set.
+        </p>
+      </div>
+
+      {/* Same capacity toggle */}
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={sameCapacityEveryDay}
+          onCheckedChange={handleToggleSameCapacity}
+        />
+        <Label className="cursor-pointer text-sm">Same capacity every day</Label>
+      </div>
+
+      {/* Period cards - only when toggle is off */}
+      {!sameCapacityEveryDay && (
+        <div className="flex flex-col gap-4">
+          {periods.map((period, index) => (
+            <div key={index} className="flex flex-col gap-4 p-4 rounded-lg bg-surface-secondary">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <IconTime className="w-5 h-5 fill-fill-secondary" />
+                  <span className="text-label-secondary text-xs border border-border-primary rounded-full px-2.5 py-0.5">
+                    Capacity Period
+                  </span>
+                </div>
+                <Button variant="ghost" size="icon" onClick={() => removePeriod(index)} className="h-8 w-8 bg-surface-danger-soft border-transparent hover:!bg-surface-danger-soft-hover [&_path]:fill-fill-danger">
+                  <IconDelete className="w-4 h-4" />
+                </Button>
+              </div>
+
+              {/* Capacity Override */}
+              <div className="flex flex-col gap-3">
+                <Label className="text-sm font-semibold">Capacity Override</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="flex flex-col gap-2">
+                    <div className="flex items-center justify-between">
+                      <Label>Min Capacity</Label>
+                      <span className="text-label-secondary text-xs">(optional)</span>
+                    </div>
+                    <Input
+                      type="number"
+                      min={0}
+                      value={period.min_capacity === null ? '' : period.min_capacity === 0 ? '' : period.min_capacity}
+                      onChange={(e) => updatePeriod(index, { min_capacity: e.target.value === '' ? null : (parseInt(e.target.value) || 0) })}
+                    />
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <Label>Max Capacity</Label>
+                    <Input
+                      type="number"
+                      min={1}
+                      value={period.max_capacity === 0 ? '' : period.max_capacity}
+                      onChange={(e) => updatePeriod(index, { max_capacity: e.target.value === '' ? 0 : (parseInt(e.target.value) || 0) })}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Day selection */}
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm font-semibold">Days</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex flex-col gap-2">
+                    {DAY_OPTIONS.slice(0, 4).map(day => (
+                      <label key={day} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={period.days?.includes(day) || false}
+                          onCheckedChange={() => toggleDay(index, day)}
+                        />
+                        <span className="text-label-primary text-sm">{day}</span>
+                      </label>
+                    ))}
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    {DAY_OPTIONS.slice(4).map(day => (
+                      <label key={day} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={period.days?.includes(day) || false}
+                          onCheckedChange={() => toggleDay(index, day)}
+                        />
+                        <span className="text-label-primary text-sm">{day}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Time section */}
+              <div className="flex flex-col gap-3">
+                <Label className="text-sm font-semibold">Time</Label>
+                <div className="flex items-center gap-2">
+                  <Switch
+                    checked={period.is_24_hours ?? true}
+                    onCheckedChange={(checked) => toggle24Hours(index, checked)}
+                  />
+                  <Label className="cursor-pointer">Align with Opening Hours</Label>
+                </div>
+
+                {!period.is_24_hours && (
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label>Start Time</Label>
+                      <Input
+                        type="time"
+                        value={period.start_time || '09:00'}
+                        onChange={(e) => updatePeriod(index, { start_time: e.target.value })}
+                      />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label>End Time</Label>
+                      <Input
+                        type="time"
+                        value={period.end_time || '17:00'}
+                        onChange={(e) => updatePeriod(index, { end_time: e.target.value })}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {/* Add Period button below cards */}
+          <Button variant="ghost" onClick={addPeriod} withIcon className="w-fit">
+            <IconPlus className="w-4 h-4 fill-fill-primary" />
+            Add Period
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CapacityPeriodsSection;

package/src/v2/shadcn/_reference/products/DynamicPricingTiersSection.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { supabase } from '@/integrations/supabase/client';
+import getRuleSummary from '../pricing/getRuleSummary';
+import type { DynamicPricingRule } from '../pricing/DynamicPricingRulesEditor';
+
+export interface DynamicTierEntry {
+  tier_id: string;
+  name: string;
+  adjustment: number;
+  direction: 'increase' | 'decrease';
+  rules: DynamicPricingRule[];
+}
+
+interface DynamicPricingTiersSectionProps {
+  providerId?: string;
+  tiers: DynamicTierEntry[];
+  onTiersChange: (tiers: DynamicTierEntry[]) => void;
+}
+
+const DynamicPricingTiersSection: React.FC<DynamicPricingTiersSectionProps> = ({
+  providerId,
+  tiers,
+  onTiersChange,
+}) => {
+  // Fetch dynamic tiers from DB on mount
+  useEffect(() => {
+    if (!providerId || tiers.length > 0) return;
+
+    const fetchTiers = async () => {
+      const { data } = await supabase
+        .from('dynamic_pricing_tiers' as any)
+        .select('id, name, rules')
+        .eq('provider_id', providerId)
+        .eq('status', 'active')
+        .eq('is_active', true)
+        .order('display_order', { ascending: true });
+
+      if (data && data.length > 0) {
+        const entries: DynamicTierEntry[] = (data as any[]).map(t => ({
+          tier_id: t.id,
+          name: t.name,
+          adjustment: 0,
+          direction: 'increase' as const,
+          rules: Array.isArray(t.rules) ? t.rules : [],
+        }));
+        onTiersChange(entries);
+      }
+    };
+
+    fetchTiers();
+  }, [providerId]);
+
+  if (tiers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4 pt-4 border-t border-border-primary">
+      <div className="flex flex-col gap-1">
+        <h2 className="text-label-primary text-xl font-semibold">Dynamic Pricing Tiers</h2>
+        <p className="text-label-secondary text-sm">Adjust the base price by a +/- amount for each tier.</p>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {tiers.map((tier, index) => (
+          <div key={tier.tier_id} className="flex items-start gap-4 p-4 border border-border-primary rounded-lg">
+            <div className="flex flex-col gap-1 flex-1 min-w-0">
+              <p className="text-label-primary text-sm font-medium">{tier.name}</p>
+              {tier.rules && tier.rules.length > 0 && (
+                <div className="flex flex-wrap gap-1">
+                  {tier.rules.map((rule: DynamicPricingRule, i: number) => (
+                    <span
+                      key={i}
+                      className="inline-flex items-center px-2 py-0.5 rounded-md bg-surface-secondary text-label-secondary text-xs"
+                    >
+                      {getRuleSummary(rule)}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="flex items-center gap-1 flex-shrink-0">
+              <span className="text-label-secondary text-sm">£</span>
+              <Input
+                type="text"
+                inputMode="decimal"
+                defaultValue={tier.adjustment === 0 ? '' : tier.adjustment.toFixed(2)}
+                key={`${tier.tier_id}-${tier.adjustment}`}
+                onBlur={(e) => {
+                  const raw = e.target.value.trim();
+                  const absVal = raw === '' ? 0 : parseFloat(parseFloat(raw).toFixed(2));
+                  const newVal = isNaN(absVal) ? 0 : absVal;
+                  onTiersChange(tiers.map((t, i) => i === index ? { ...t, adjustment: newVal } : t));
+                  if (raw !== '') {
+                    e.target.value = newVal.toFixed(2);
+                  }
+                }}
+                className="w-24"
+              />
+              <Select
+                value={tier.direction}
+                onValueChange={(val: string) => {
+                  onTiersChange(tiers.map((t, i) => i === index ? { ...t, direction: val as 'increase' | 'decrease' } : t));
+                }}
+              >
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="increase">Increase</SelectItem>
+                  <SelectItem value="decrease">Decrease</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DynamicPricingTiersSection;

package/src/v2/shadcn/_reference/products/GiftCardOrdersTab.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { supabase } from '@/integrations/supabase/client';
+import { DataTable } from '../tables/DataTable';
+import { ColumnConfig, RowAction } from '../tables/types';
+import { TableControls } from '../tables/TableControls';
+import { SearchConfig, FilterConfig } from '../tables/types';
+import StatusBadge from '../StatusBadge';
+import EmptyState from '../EmptyState';
+import LoadingSpinner from '../LoadingSpinner';
+import { format } from 'date-fns';
+import { useNotify } from '../../hooks/useNotify';
+
+interface GiftCardSale {
+  id: string;
+  code: string;
+  denomination: number;
+  balance: number;
+  status: string;
+  currency: string;
+  purchaser_name: string | null;
+  purchaser_email: string | null;
+  recipient_name: string | null;
+  recipient_email: string | null;
+  is_gift: boolean;
+  purchased_at: string;
+  expires_at: string | null;
+  denomination_image_url: string | null;
+}
+
+interface GiftCardOrdersTabProps {
+  productId: string;
+}
+
+const GiftCardOrdersTab: React.FC<GiftCardOrdersTabProps> = ({ productId }) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [activeFilter, setActiveFilter] = React.useState<string>('all');
+  const { showSuccess } = useNotify();
+
+  const { data: sales = [], isLoading } = useQuery({
+    queryKey: ['gift-card-sales', productId],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from('gift_card_sales')
+        .select('*')
+        .eq('product_id', productId)
+        .order('purchased_at', { ascending: false });
+      if (error) throw error;
+      return (data || []) as GiftCardSale[];
+    },
+    enabled: !!productId,
+  });
+
+  const filteredSales = sales.filter(sale => {
+    if (!sale || !sale.code) return false;
+    const query = searchQuery.toLowerCase();
+    const matchesSearch =
+      sale.code.toLowerCase().includes(query) ||
+      (sale.purchaser_name && sale.purchaser_name.toLowerCase().includes(query)) ||
+      (sale.purchaser_email && sale.purchaser_email.toLowerCase().includes(query)) ||
+      (sale.recipient_name && sale.recipient_name.toLowerCase().includes(query));
+    const matchesFilter = activeFilter === 'all' || sale.status === activeFilter;
+    return matchesSearch && matchesFilter;
+  });
+
+  const searchConfig: SearchConfig = {
+    placeholder: 'Search by code, name or email',
+    value: searchQuery,
+    onChange: setSearchQuery,
+    label: 'Search Orders',
+  };
+
+  const statusCounts = sales.reduce((acc, s) => {
+    if (!s) return acc;
+    acc[s.status] = (acc[s.status] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  const filters: FilterConfig[] = Object.keys(statusCounts).map(status => ({
+    label: `${status.charAt(0).toUpperCase() + status.slice(1)} (${statusCounts[status]})`,
+    value: status,
+    isActive: activeFilter === status,
+    onClick: () => setActiveFilter(activeFilter === status ? 'all' : status),
+  }));
+
+  const rowActions = (sale: GiftCardSale): RowAction<GiftCardSale>[] => [
+    {
+      label: 'Copy Code',
+      onClick: (sale) => {
+        navigator.clipboard.writeText(sale.code);
+        showSuccess(`Code ${sale.code} copied to clipboard`);
+      },
+    },
+    {
+      label: 'View Details',
+      onClick: () => { /* TODO */ },
+    },
+    {
+      label: 'Disable Card',
+      onClick: () => { /* TODO */ },
+      variant: 'danger',
+    },
+  ];
+
+  const columns: ColumnConfig<GiftCardSale>[] = [
+    {
+      label: 'Customer',
+      render: (sale) => (
+        <div className="flex flex-col justify-center items-start gap-0.5 min-w-0">
+          <span className="text-label-primary text-[13px] font-normal truncate w-full">
+            {sale.is_gift ? sale.recipient_name || 'Gift' : sale.purchaser_name || '—'}
+          </span>
+          <span className="text-label-secondary text-xs font-normal truncate w-full">
+            {sale.is_gift ? sale.recipient_email || sale.purchaser_email || '' : sale.purchaser_email || ''}
+          </span>
+        </div>
+      ),
+    },
+    {
+      label: 'Value / Balance',
+      render: (sale) => (
+        <div className="flex flex-col justify-center items-start gap-0.5">
+          <span className="text-label-primary text-[13px] font-normal">£{Number(sale.denomination).toFixed(2)}</span>
+          <span className="text-label-secondary text-xs font-normal">Bal: £{Number(sale.balance).toFixed(2)}</span>
+        </div>
+      ),
+      width: 'w-[130px]',
+      labelClassName: 'hidden sm:flex',
+      className: 'hidden sm:flex',
+    },
+    {
+      label: 'Purchased / Expires',
+      render: (sale) => (
+        <div className="flex flex-col justify-center items-start gap-0.5">
+          <span className="text-label-primary text-[13px] font-normal">
+            {format(new Date(sale.purchased_at), 'd MMM yyyy')}
+          </span>
+          <span className="text-label-secondary text-xs font-normal">
+            {sale.expires_at ? format(new Date(sale.expires_at), 'd MMM yyyy') : 'No expiry'}
+          </span>
+        </div>
+      ),
+      width: 'w-[150px]',
+      labelClassName: 'hidden md:flex',
+      className: 'hidden md:flex',
+    },
+    {
+      label: 'Status',
+      render: (sale) => (
+        <StatusBadge status={sale.status as 'active' | 'disabled'} />
+      ),
+      width: 'w-[100px]',
+    },
+  ];
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <LoadingSpinner size="sm" />
+      </div>
+    );
+  }
+
+  if (sales.length === 0) {
+    return (
+      <EmptyState
+        icon="Inventory"
+        title="No Orders Yet"
+        description="Gift card purchases will appear here."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <TableControls searchConfig={searchConfig} filters={filters} />
+      <DataTable
+        data={filteredSales}
+        columns={columns}
+        keyExtractor={(sale) => sale.id}
+        rowActions={rowActions}
+        emptyState={
+          <div className="px-4 py-8 text-center">
+            <p className="text-label-secondary">No orders match your search.</p>
+          </div>
+        }
+      />
+    </div>
+  );
+};
+
+export default GiftCardOrdersTab;