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

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

@@ -1,76 +0,0 @@
-import React from 'react';
-import { cn } from '../lib/utils';
-import {
-  AnalyticsIcon,
-  BookingTypesIcon,
-  ReportsIcon,
-  DatesEventsIcon,
-  LoyaltyIcon,
-  CustomersIcon,
-  AffiliatesIcon,
-  BookingsIcon,
-  WaiversIcon,
-  InboxIcon,
-  SentIcon,
-  UsersIcon,
-  HomeIcon,
-  CompanyIcon,
-  PaymentsIcon,
-  ZonesIcon,
-} from './emptyStateIcons';
-import { MarketingIcon } from './shared/SidebarIcons';
-
-interface EmptyStateProps {
-  icon: React.ReactNode | string;
-  title: string;
-  description: string;
-  className?: string;
-}
-
-const iconMap: Record<string, React.ComponentType> = {
-  Analytics: AnalyticsIcon,
-  BookingTypes: BookingTypesIcon,
-  Reports: ReportsIcon,
-  DatesEvents: DatesEventsIcon,
-  Loyalty: LoyaltyIcon,
-  Customers: CustomersIcon,
-  Affiliate: AffiliatesIcon,
-  Affiliates: AffiliatesIcon,
-  Bookings: BookingsIcon,
-  Campaigns: MarketingIcon,
-  Waivers: WaiversIcon,
-  Inbox: InboxIcon,
-  Sent: SentIcon,
-  Users: UsersIcon,
-  Home: HomeIcon,
-  Company: CompanyIcon,
-  Payments: PaymentsIcon,
-  Zones: ZonesIcon,
-  Inventory: BookingTypesIcon,
-};
-
-const EmptyState: React.FC<EmptyStateProps> = ({ icon, title, description, className }) => {
-  const renderIcon = () => {
-    if (typeof icon === 'string') {
-      const IconComponent = iconMap[icon];
-      return IconComponent ? <IconComponent /> : null;
-    }
-    return icon;
-  };
-
-  return (
-    <div className={cn("flex flex-col items-start py-16 px-4", className)}>
-      {renderIcon()}
-      
-      <h3 className="text-label-secondary text-base font-medium leading-6 mb-1">
-        {title}
-      </h3>
-      
-      <p className="text-label-secondary text-[15px] font-normal leading-6">
-        {description}
-      </p>
-    </div>
-  );
-};
-
-export default EmptyState;

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

@@ -1,48 +0,0 @@
-import React, { ReactNode } from 'react';
-
-interface InfoItem {
-  label: string;
-  value: string | number | boolean | null | undefined;
-  capitalize?: boolean;
-}
-
-interface EntityInfoCardProps {
-  title: string;
-  items: InfoItem[];
-  footerActions?: ReactNode;
-}
-
-const EntityInfoCard: React.FC<EntityInfoCardProps> = ({ title, items, footerActions }) => {
-  const formatValue = (item: InfoItem) => {
-    const value = item.value;
-    
-    if (value === null || value === undefined) return '—';
-    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-    if (typeof value === 'number') return value.toString();
-    
-    return item.capitalize ? value.charAt(0).toUpperCase() + value.slice(1) : value;
-  };
-
-  return (
-    <div className="bg-surface-secondary rounded-lg p-6">
-      <h2 className="text-label-primary text-lg font-semibold mb-4">
-        {title}
-      </h2>
-      <div className="grid grid-cols-2 gap-4 text-sm max-sm:grid-cols-1">
-        {items.map((item, index) => (
-          <div key={index}>
-            <span className="text-label-tertiary">{item.label}:</span>
-            <span className="text-label-primary ml-2">{formatValue(item)}</span>
-          </div>
-        ))}
-      </div>
-      {footerActions && (
-        <div className="flex items-center gap-2 mt-4 pt-4 border-t border-border-primary">
-          {footerActions}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default EntityInfoCard;

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

@@ -1,131 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { supabase } from '@/integrations/supabase/client';
-
-interface Assignment {
-  id: string;
-  name: string;
-  type: 'company' | 'venue' | 'promoter';
-  avatarUrl: string | null;
-  role: string | null;
-  venueId: string | null;
-}
-
-interface ExistingUserAssignmentsProps {
-  userId: string;
-}
-
-const formatRoleDisplay = (role: string): string => {
-  return role.replace('_', ' ').replace(/\w/g, l => l.toUpperCase());
-};
-
-const ExistingUserAssignments: React.FC<ExistingUserAssignmentsProps> = ({ userId }) => {
-  const [assignments, setAssignments] = useState<Assignment[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchAssignments = async () => {
-      setIsLoading(true);
-      try {
-        const [companiesRes, providersRes, rolesRes] = await Promise.all([
-          supabase
-            .from('user_companies')
-            .select('company_id, companies:company_id(id, name, avatar_url, company_id)')
-            .eq('user_id', userId),
-          supabase
-            .from('user_providers')
-            .select('provider_id, providers:provider_id(id, name, type, avatar_url, venue_id)')
-            .eq('user_id', userId),
-          supabase
-            .from('user_roles')
-            .select('role, provider_id, company_id')
-            .eq('user_id', userId),
-        ]);
-
-        const roles = (rolesRes.data || []) as Array<{ role: string; provider_id: string | null; company_id: string | null }>;
-        const items: Assignment[] = [];
-
-        if (companiesRes.data) {
-          for (const uc of companiesRes.data) {
-            const company = uc.companies as any;
-            if (company) {
-              const companyRole = roles.find(r => r.company_id === company.id && !r.provider_id);
-              items.push({
-                id: company.id,
-                name: company.name,
-                type: 'company',
-                avatarUrl: company.avatar_url,
-                role: companyRole?.role || null,
-                venueId: company.company_id || null,
-              });
-            }
-          }
-        }
-
-        if (providersRes.data) {
-          for (const up of providersRes.data) {
-            const provider = up.providers as any;
-            if (provider) {
-              const providerRole = roles.find(r => r.provider_id === provider.id);
-              items.push({
-                id: provider.id,
-                name: provider.name,
-                type: provider.type === 'promoter' ? 'promoter' : 'venue',
-                avatarUrl: provider.avatar_url,
-                role: providerRole?.role || null,
-                venueId: provider.venue_id || null,
-              });
-            }
-          }
-        }
-
-        setAssignments(items);
-      } catch (error) {
-        console.error('Error fetching user assignments:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchAssignments();
-  }, [userId]);
-
-  if (isLoading || assignments.length === 0) return null;
-
-  return (
-    <div className="flex flex-col gap-3">
-      <span className="text-label-secondary text-xs font-semibold">Currently assigned to</span>
-      <div className="flex flex-col gap-2">
-        {assignments.map(a => (
-          <div key={a.id} className="flex items-center gap-3 p-4 bg-surface-secondary border border-border-primary rounded-lg">
-            <div className="w-10 h-10 rounded-full relative flex items-center justify-center flex-shrink-0 overflow-hidden bg-fill-secondary/20 border border-border-primary">
-              {a.avatarUrl ? (
-                <img src={a.avatarUrl} alt={a.name} className="w-full h-full object-cover" />
-              ) : (
-                <span className="text-label-secondary font-bold text-sm">
-                  {a.name.charAt(0).toUpperCase()}
-                </span>
-              )}
-            </div>
-            <div className="flex flex-col gap-0.5 flex-1">
-              <span className="text-label-primary font-medium text-sm">{a.name}</span>
-              <div className="flex justify-center items-center gap-2 bg-surface-tertiary px-2 py-1 rounded-lg w-fit">
-                <span className="text-label-secondary text-[10px] leading-3 font-mono font-semibold whitespace-nowrap">
-                  {a.type === 'company'
-                    ? `Company ID: ${a.venueId || a.id.slice(0, 8)}`
-                    : `${a.type === 'venue' ? 'Venue' : 'Promoter'} ID: ${a.venueId || a.id.slice(0, 8)}`}
-                </span>
-              </div>
-            </div>
-            {a.role && (
-              <span className="text-label-secondary text-sm font-medium whitespace-nowrap">
-                {formatRoleDisplay(a.role)}
-              </span>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default ExistingUserAssignments;

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import { Switch } from './ui/switch';
-import { IconLock } from '../../icons';
-import { cn } from '../lib/utils';
-
-interface FeatureToggleProps {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  enabled: boolean;
-  onToggle: (checked: boolean) => void;
-  isLocked?: boolean;
-  /** When true, hides the switch entirely (read-only display) */
-  readOnly?: boolean;
-  className?: string;
-}
-
-/**
- * Reusable feature toggle component with icon, title, description, and switch.
- * Used for enabling/disabling features in settings pages.
- * When isLocked is true, displays a lock icon instead of the switch.
- */
-const FeatureToggle: React.FC<FeatureToggleProps> = ({
-  icon,
-  title,
-  description,
-  enabled,
-  onToggle,
-  isLocked = false,
-  readOnly = false,
-  className,
-}) => {
-  return (
-    <div 
-      className={cn(
-        "flex items-center justify-between p-4 border border-border-primary rounded-lg bg-surface-secondary w-full",
-        className
-      )}
-    >
-      <div className="flex items-center gap-4 min-w-0 mr-4">
-        {/* Icon */}
-        <div className="flex items-center justify-center w-12 h-12 flex-shrink-0">
-          {icon}
-        </div>
-        
-        {/* Text content */}
-        <div className="flex flex-col gap-0.5">
-          <span className="text-label-primary font-medium text-base">
-            {title}
-          </span>
-          <p className="text-label-tertiary text-sm">
-            {description}
-          </p>
-        </div>
-      </div>
-      
-      {/* Switch, Lock Icon, or nothing (readOnly) */}
-      {readOnly ? null : isLocked ? (
-        <div className="pr-1">
-          <IconLock size={32} className="fill-fill-secondary" />
-        </div>
-      ) : (
-        <Switch
-          checked={enabled}
-          onCheckedChange={onToggle}
-        />
-      )}
-    </div>
-  );
-};
-
-export default FeatureToggle;

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

@@ -1,170 +0,0 @@
-import React from 'react';
-import { IconThreeDots, IconEdit, IconDelete, IconPlus } from '../../icons';
-import { Badge } from './ui/badge';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './ui/dropdown-menu';
-import { Button } from './ui/button';
-
-interface FlowCardProps {
-  id: string;
-  type: 'booking' | 'enquiry';
-  referenceNumber: string;
-  date: string;
-  customerName: string;
-  customerEmail: string;
-  totalAmount: number;
-  netAmount: number;
-  activityName: string;
-  bookingTime: string;
-  status: string;
-  tags?: string[];
-  onClick?: (id: string) => void;
-  onEdit?: (id: string) => void;
-  onDelete?: (id: string) => void;
-}
-
-const statusColors: Record<string, string> = {
-  active: 'bg-surface-status-success text-label-status-success border-border-status-success',
-  cancelled: 'bg-surface-status-error text-label-status-error border-border-status-error',
-  declined: 'bg-surface-status-error text-label-status-error border-border-status-error',
-  initial_contact: 'bg-surface-status-info text-label-status-info border-border-status-info',
-  action_required: 'bg-surface-status-warning text-label-status-warning border-border-status-warning',
-  ready_to_convert: 'bg-surface-status-success text-label-status-success border-border-status-success',
-};
-
-const formatStatus = (status: string): string => {
-  return status
-    .split('_')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-};
-
-export const FlowCard: React.FC<FlowCardProps> = ({
-  id,
-  type,
-  referenceNumber,
-  date,
-  customerName,
-  customerEmail,
-  totalAmount,
-  netAmount,
-  activityName,
-  bookingTime,
-  status,
-  tags = [],
-  onClick,
-  onEdit,
-  onDelete,
-}) => {
-  const handleCardClick = (e: React.MouseEvent) => {
-    // Don't trigger card click if clicking on dropdown menu
-    if ((e.target as HTMLElement).closest('[data-radix-collection-item]') || 
-        (e.target as HTMLElement).closest('[role="menu"]') ||
-        (e.target as HTMLElement).closest('button')) {
-      return;
-    }
-    onClick?.(id);
-  };
-
-  return (
-    <div 
-      className="flex flex-col items-start gap-3 p-4 bg-surface-primary border border-border-primary rounded-lg hover:bg-surface-secondary transition-colors cursor-pointer"
-      onClick={handleCardClick}
-    >
-      {/* Header with type badge, reference, and menu */}
-      <div className="flex items-start justify-between w-full">
-        <div className="flex flex-col gap-1">
-          <div className="flex items-center gap-2">
-            <Badge variant={type === 'booking' ? 'default' : 'secondary'} className="text-[10px] font-bold px-2 py-0.5">
-              {type === 'booking' ? 'BKG' : 'ENQ'}
-            </Badge>
-            <span className="text-label-primary text-sm font-semibold">
-              #{referenceNumber}
-            </span>
-          </div>
-          <span className="text-label-tertiary text-xs">
-            {new Date(date).toLocaleDateString('en-GB')}
-          </span>
-        </div>
-        
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <IconThreeDots className="w-4 h-4 fill-fill-primary" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onEdit?.(id)}>
-              <IconEdit className="w-4 h-4 mr-2 fill-fill-primary" />
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => onDelete?.(id)} className="text-label-danger">
-              <IconDelete className="w-4 h-4 mr-2 fill-fill-danger" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {/* Customer info */}
-      <div className="flex flex-col gap-0.5 w-full">
-        <span className="text-label-primary text-sm font-medium truncate">
-          {customerName}
-        </span>
-        <span className="text-label-tertiary text-xs truncate">
-          {customerEmail}
-        </span>
-      </div>
-
-      {/* Financial info */}
-      <div className="flex flex-col gap-0.5 w-full">
-        <div className="flex items-center justify-between">
-          <span className="text-label-tertiary text-xs">Total:</span>
-          <span className="text-label-primary text-sm font-semibold">
-            £{totalAmount.toFixed(2)}
-          </span>
-        </div>
-        <div className="flex items-center justify-between">
-          <span className="text-label-tertiary text-xs">Net:</span>
-          <span className="text-label-tertiary text-xs">
-            £{netAmount.toFixed(2)}
-          </span>
-        </div>
-      </div>
-
-      {/* Activity info */}
-      <div className="flex flex-col gap-0.5 w-full pt-2 border-t border-border-primary">
-        <span className="text-label-primary text-xs font-medium">
-          {activityName}
-        </span>
-        <span className="text-label-tertiary text-xs">
-          {bookingTime}
-        </span>
-      </div>
-
-      {/* Status badge */}
-      <Badge className={`${statusColors[status] || statusColors.active} text-xs px-2 py-1`}>
-        {formatStatus(status)}
-      </Badge>
-
-      {/* Tags */}
-      {tags.length > 0 && (
-        <div className="flex flex-wrap gap-2 w-full pt-2">
-          {tags.map((tag, index) => (
-            <Badge key={index} variant="outline" className="text-xs px-2 py-0.5">
-              {tag}
-            </Badge>
-          ))}
-          <Button variant="ghost" size="sm" className="text-label-tertiary text-xs hover:text-label-primary h-auto px-1 py-0.5 gap-1">
-            <IconPlus className="w-3 h-3 fill-fill-secondary" />
-            Add Tag
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};