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

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

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

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

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

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