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

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

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

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

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

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

@@ -0,0 +1,170 @@
+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>
+  );
+};