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

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

@@ -1,239 +0,0 @@
-import React, { useMemo } from 'react';
-import { ScrollArea } from './ui/scroll-area';
-
-interface ComponentUsage {
-  name: string;
-  count: number;
-  type: 'ui' | 'custom' | 'page' | 'icon';
-  locations: string[];
-}
-
-const ComponentAudit: React.FC = () => {
-  const componentUsage = useMemo(() => {
-    const usage: ComponentUsage[] = [
-      // UI Components (shadcn)
-      { name: 'Button', count: 45, type: 'ui', locations: ['Multiple pages', 'Forms', 'Tables'] },
-      { name: 'Input', count: 28, type: 'ui', locations: ['Forms', 'Settings', 'Search'] },
-      { name: 'Label', count: 22, type: 'ui', locations: ['Forms', 'Settings'] },
-      { name: 'Select', count: 8, type: 'ui', locations: ['Forms', 'Filters'] },
-      { name: 'RadioGroup', count: 4, type: 'ui', locations: ['Settings', 'Forms'] },
-      { name: 'Checkbox', count: 6, type: 'ui', locations: ['Tables', 'Forms'] },
-      { name: 'Switch', count: 5, type: 'ui', locations: ['Settings', 'Tables'] },
-      { name: 'Tabs', count: 7, type: 'ui', locations: ['Settings', 'Dashboard'] },
-      { name: 'Dialog', count: 12, type: 'ui', locations: ['Modals', 'Confirmations'] },
-      { name: 'DropdownMenu', count: 15, type: 'ui', locations: ['Navigation', 'Actions'] },
-      { name: 'Tooltip', count: 18, type: 'ui', locations: ['Icons', 'Help text'] },
-      { name: 'ScrollArea', count: 9, type: 'ui', locations: ['Tables', 'Lists'] },
-      { name: 'Separator', count: 11, type: 'ui', locations: ['Layouts', 'Forms'] },
-      { name: 'Badge', count: 14, type: 'ui', locations: ['Status', 'Labels'] },
-      { name: 'Card', count: 8, type: 'ui', locations: ['Dashboard', 'Settings'] },
-      { name: 'Table', count: 10, type: 'ui', locations: ['Data display'] },
-      { name: 'Calendar', count: 2, type: 'ui', locations: ['Date pickers'] },
-      { name: 'Popover', count: 8, type: 'ui', locations: ['Menus', 'Pickers'] },
-      { name: 'Sheet', count: 3, type: 'ui', locations: ['Sidebars', 'Panels'] },
-      
-      // Custom Components
-      { name: 'TopNavigation', count: 58, type: 'custom', locations: ['All pages'] },
-      { name: 'DashboardFooter', count: 58, type: 'custom', locations: ['All pages'] },
-      { name: 'NotificationBanner', count: 30, type: 'custom', locations: ['All pages'] },
-      { name: 'Sidebar', count: 19, type: 'custom', locations: ['Provider pages'] },
-      { name: 'AdminSidebar', count: 10, type: 'custom', locations: ['Admin pages'] },
-      { name: 'CompanySidebar', count: 8, type: 'custom', locations: ['Company pages'] },
-      { name: 'SecondaryNav', count: 15, type: 'custom', locations: ['Settings pages'] },
-      { name: 'SidebarAwareLayout', count: 45, type: 'custom', locations: ['Content layouts'] },
-      { name: 'StatusBadge', count: 12, type: 'custom', locations: ['Tables'] },
-      { name: 'TableActionMenu', count: 8, type: 'custom', locations: ['Tables'] },
-      { name: 'SortControls', count: 6, type: 'custom', locations: ['Tables'] },
-      { name: 'LoadingScreen', count: 3, type: 'custom', locations: ['Initial load'] },
-      { name: 'LoadingSpinner', count: 8, type: 'custom', locations: ['Loading states'] },
-      { name: 'UserPanel', count: 1, type: 'custom', locations: ['TopNavigation'] },
-      { name: 'NotificationPanel', count: 1, type: 'custom', locations: ['TopNavigation'] },
-      { name: 'AffiliatesTable', count: 1, type: 'custom', locations: ['Home page'] },
-      { name: 'ProvidersTable', count: 3, type: 'custom', locations: ['Admin/Company'] },
-      { name: 'GeneralSettings', count: 4, type: 'custom', locations: ['Settings pages'] },
-      { name: 'SidebarLabelCustomization', count: 1, type: 'custom', locations: ['Settings'] },
-      { name: 'ThemeProvider', count: 1, type: 'custom', locations: ['App root'] },
-      { name: 'Icon (IconSystem)', count: 1, type: 'custom', locations: ['Centralized icon system'] },
-      
-      // Consolidated Components
-      { name: 'EmptyState', count: 1, type: 'custom', locations: ['Configurable empty states'] },
-    ];
-    
-    return usage.sort((a, b) => b.count - a.count);
-  }, []);
-
-  const consolidationOpportunities = [
-    {
-      title: 'Empty State Components',
-      description: '✅ Completed: 11 separate empty state components consolidated into single EmptyState component with icon configuration.',
-      components: ['EmptyState'],
-      impact: 'Low',
-      effort: 'Low',
-      status: 'completed'
-    },
-    {
-      title: 'Toast vs NotificationBanner',
-      description: '✅ Completed: Standardized on NotificationBanner. Toast/Sonner removed from the application.',
-      components: ['NotificationBanner'],
-      impact: 'Medium',
-      effort: 'Low',
-      status: 'completed'
-    },
-    {
-      title: 'Custom Icon Components',
-      description: '✅ Completed: All custom SVG icons consolidated into IconSystem component with centralized management and documentation.',
-      components: ['Icon (IconSystem)'],
-      impact: 'Medium',
-      effort: 'Medium',
-      status: 'completed'
-    },
-    {
-      title: 'Navigation Components',
-      description: '✅ Completed: NavLink wrapper removed. All navigation now uses react-router-dom NavLink directly with className functions for active states.',
-      components: ['SecondaryNav', 'Sidebar navigation'],
-      impact: 'Low',
-      effort: 'Low',
-      status: 'completed'
-    },
-    {
-      title: 'Sidebar Components',
-      description: 'Sidebar, AdminSidebar, and CompanySidebar could be consolidated into a single component with role-based configuration.',
-      components: ['Sidebar', 'AdminSidebar', 'CompanySidebar'],
-      impact: 'High',
-      effort: 'Medium'
-    },
-    {
-      title: 'Table Components',
-      description: 'AffiliatesTable and ProvidersTable share similar patterns and could be consolidated into a reusable data table component.',
-      components: ['AffiliatesTable', 'ProvidersTable'],
-      impact: 'Medium',
-      effort: 'Medium'
-    },
-  ];
-
-  const stats = useMemo(() => {
-    const totalComponents = componentUsage.length;
-    const uiComponents = componentUsage.filter(c => c.type === 'ui').length;
-    const customComponents = componentUsage.filter(c => c.type === 'custom').length;
-    const iconComponents = componentUsage.filter(c => c.type === 'icon').length;
-    const totalUsages = componentUsage.reduce((sum, c) => sum + c.count, 0);
-
-    return { totalComponents, uiComponents, customComponents, iconComponents, totalUsages };
-  }, [componentUsage]);
-
-  return (
-    <div className="flex flex-col gap-6 py-4">
-      <div>
-        <h2 className="text-2xl font-semibold text-label-primary mb-2">Component Audit</h2>
-        <p className="text-label-secondary">
-          Overview of all components used throughout the application, their usage counts, and consolidation opportunities.
-        </p>
-      </div>
-
-      {/* Statistics */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-        <div className="p-4 rounded-lg bg-surface-secondary border border-primary">
-          <div className="text-2xl font-bold text-label-primary">{stats.totalComponents}</div>
-          <div className="text-sm text-label-secondary">Total Components</div>
-        </div>
-        <div className="p-4 rounded-lg bg-surface-secondary border border-primary">
-          <div className="text-2xl font-bold text-label-primary">{stats.uiComponents}</div>
-          <div className="text-sm text-label-secondary">UI Components</div>
-        </div>
-        <div className="p-4 rounded-lg bg-surface-secondary border border-primary">
-          <div className="text-2xl font-bold text-label-primary">{stats.customComponents}</div>
-          <div className="text-sm text-label-secondary">Custom Components</div>
-        </div>
-        <div className="p-4 rounded-lg bg-surface-secondary border border-primary">
-          <div className="text-2xl font-bold text-label-primary">{stats.iconComponents}</div>
-          <div className="text-sm text-label-secondary">Icon Components</div>
-        </div>
-        <div className="p-4 rounded-lg bg-surface-secondary border border-primary">
-          <div className="text-2xl font-bold text-label-primary">{stats.totalUsages}</div>
-          <div className="text-sm text-label-secondary">Total Usages</div>
-        </div>
-      </div>
-
-      {/* Consolidation Opportunities */}
-      <div>
-        <h3 className="text-xl font-semibold text-label-primary mb-4">Consolidation Opportunities</h3>
-        <div className="grid gap-4">
-          {consolidationOpportunities.map((opportunity, index) => (
-            <div key={index} className="p-4 rounded-lg bg-surface-secondary border border-primary">
-              <div className="flex items-start justify-between mb-2">
-                <h4 className="text-lg font-semibold text-label-primary">{opportunity.title}</h4>
-                <div className="flex gap-2">
-                  <span className={`px-2 py-1 rounded text-xs font-medium ${
-                    opportunity.status === 'completed' 
-                      ? 'bg-success-regular/10 text-success-regular border border-success-regular/20'
-                      : opportunity.impact === 'High' 
-                        ? 'bg-errors-regular/10 text-errors-regular border border-errors-regular/20'
-                        : opportunity.impact === 'Medium'
-                          ? 'bg-warning-regular/10 text-warning-regular border border-warning-regular/20'
-                          : 'bg-label-tertiary/10 text-label-tertiary border border-label-tertiary/20'
-                  }`}>
-                    {opportunity.status === 'completed' ? 'Completed' : `Impact: ${opportunity.impact}`}
-                  </span>
-                  {!opportunity.status && (
-                    <span className="px-2 py-1 rounded text-xs font-medium bg-label-tertiary/10 text-label-tertiary border border-label-tertiary/20">
-                      Effort: {opportunity.effort}
-                    </span>
-                  )}
-                </div>
-              </div>
-              <p className="text-label-secondary text-sm mb-3">{opportunity.description}</p>
-              <div className="flex flex-wrap gap-2">
-                {opportunity.components.map((component, idx) => (
-                  <span key={idx} className="px-2 py-1 rounded text-xs bg-surface-primary text-label-secondary border border-primary">
-                    {component}
-                  </span>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Component List */}
-      <div>
-        <h3 className="text-xl font-semibold text-label-primary mb-4">All Components</h3>
-        <ScrollArea className="h-[600px] rounded-lg border border-border-primary">
-          <div className="p-4">
-            <table className="w-full">
-              <thead className="sticky top-0 bg-surface-secondary z-10">
-                <tr className="border-b border-border-primary">
-                  <th className="text-left p-3 text-sm font-semibold text-label-primary">Component</th>
-                  <th className="text-left p-3 text-sm font-semibold text-label-primary">Type</th>
-                  <th className="text-right p-3 text-sm font-semibold text-label-primary">Usage Count</th>
-                  <th className="text-left p-3 text-sm font-semibold text-label-primary">Locations</th>
-                </tr>
-              </thead>
-              <tbody>
-                {componentUsage.map((component, index) => (
-                  <tr key={index} className="border-b border-border-primary hover:bg-surface-secondary-hover transition-colors">
-                    <td className="p-3 text-sm font-medium text-label-primary">{component.name}</td>
-                    <td className="p-3">
-                      <span className={`px-2 py-1 rounded text-xs font-medium ${
-                        component.type === 'ui' 
-                          ? 'bg-primary/10 text-primary border border-primary/20'
-                          : component.type === 'custom'
-                            ? 'bg-success-regular/10 text-success-regular border border-success-regular/20'
-                            : 'bg-warning-regular/10 text-warning-regular border border-warning-regular/20'
-                      }`}>
-                        {component.type}
-                      </span>
-                    </td>
-                    <td className="p-3 text-right text-sm font-semibold text-label-primary">{component.count}</td>
-                    <td className="p-3 text-sm text-label-secondary">{component.locations.join(', ')}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-};
-
-export default ComponentAudit;

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

@@ -1,95 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { cn } from '../lib/utils';
-import { IconArrowRight, IconNoEntry, IconLock } from '../../icons';
-
-interface IconComponentProps {
-  className?: string;
-  size?: number;
-}
-
-export interface ConfigureSettingsItem {
-  icon: React.FC<IconComponentProps>;
-  title: string;
-  description: string;
-  to: string;
-  locked?: boolean;
-  roleRestricted?: boolean; // Shows padlock instead of arrow, but still clickable
-  statusLabel?: string; // Optional status label like "(Disabled)"
-}
-
-export interface ConfigureSettingsGroup {
-  title: string;
-  items: ConfigureSettingsItem[];
-}
-
-interface ConfigureSettingsCardProps {
-  item: ConfigureSettingsItem;
-}
-
-const ConfigureSettingsCard: React.FC<ConfigureSettingsCardProps> = ({ item }) => {
-  const IconComponent = item.icon;
-  
-  const content = (
-    <div className={cn(
-      "group flex items-center gap-4 p-4 bg-surface-secondary rounded-xl transition-colors w-full",
-      !item.locked && "hover:bg-surface-tertiary cursor-pointer",
-      item.locked && "opacity-60 cursor-not-allowed"
-    )}>
-      <div className="flex-shrink-0">
-        <IconComponent 
-          className={item.locked ? "fill-fill-tertiary" : "fill-fill-primary"}
-          size={48}
-        />
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <h3 className="text-[15px] font-semibold text-label-primary leading-tight">{item.title}</h3>
-          {item.statusLabel && (
-            <span className="text-[13px] text-label-secondary leading-tight">({item.statusLabel})</span>
-          )}
-        </div>
-        <p className="text-[13px] text-label-secondary leading-tight mt-0.5">{item.description}</p>
-      </div>
-      <div className="flex-shrink-0 text-fill-secondary transition-transform duration-500 ease-out group-hover:translate-x-1">
-        {item.locked ? (
-          <IconNoEntry className="w-6 h-6 text-fill-tertiary" />
-        ) : item.roleRestricted ? (
-          <IconLock className="w-6 h-6" />
-        ) : (
-          <IconArrowRight className="w-6 h-6" />
-        )}
-      </div>
-    </div>
-  );
-
-  // Locked or role-restricted items should not be clickable
-  if (item.locked || item.roleRestricted) {
-    return <div className="w-full">{content}</div>;
-  }
-
-  return (
-    <Link to={item.to} className="block w-full">
-      {content}
-    </Link>
-  );
-};
-
-interface ConfigureSettingsGroupProps {
-  group: ConfigureSettingsGroup;
-}
-
-export const ConfigureSettingsGroupComponent: React.FC<ConfigureSettingsGroupProps> = ({ group }) => {
-  return (
-    <div className="flex flex-col gap-3 w-full">
-      <h2 className="text-lg font-semibold text-label-primary">{group.title}</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-2 w-full">
-        {group.items.map((item) => (
-          <ConfigureSettingsCard key={item.to} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default ConfigureSettingsCard;

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

@@ -1,155 +0,0 @@
-import React from 'react';
-import { cn } from '../lib/utils';
-import { IconExclaim } from '../../icons';
-
-interface CustomerCardProps {
-  customerName: string;
-  customerEmail: string;
-  customerId?: string;
-  age: number;
-  nextBookingDate?: string;
-  lastBookingDate?: string;
-  numberOfBookings?: number;
-  status: 'signed' | 'expired' | 'not_signed';
-  showWaiverStatus?: boolean;
-  onClick?: () => void;
-}
-
-const WaiverStatusBadge: React.FC<{ status: CustomerCardProps['status'] }> = ({ status }) => {
-  const getStatusClasses = () => {
-    switch (status) {
-      case 'signed':
-        return 'bg-surface-status-success text-label-primary border-border-status-success';
-      case 'expired':
-        return 'bg-surface-status-alert text-label-primary border-border-status-alert';
-      case 'not_signed':
-        return 'bg-surface-status-error text-label-primary border-border-status-error';
-      default:
-        return 'bg-surface-status-error text-label-primary border-border-status-error';
-    }
-  };
-
-  const getLabel = () => {
-    switch (status) {
-      case 'signed':
-        return 'Signed';
-      case 'expired':
-        return 'Expired';
-      case 'not_signed':
-        return 'Not Signed';
-      default:
-        return status;
-    }
-  };
-  
-  // Expired and Not Signed have icons so use asymmetric padding; Signed uses symmetric
-  const hasIcon = status === 'expired' || status === 'not_signed';
-  const paddingClass = hasIcon ? 'pl-1.5 pr-2' : 'px-2';
-  
-  return (
-    <div className={cn(
-      "inline-flex justify-center items-center gap-1 border py-1 rounded-3xl",
-      paddingClass,
-      getStatusClasses()
-    )}>
-      {hasIcon && (
-        <IconExclaim size={16} className="text-label-primary" />
-      )}
-      <span className="text-[10px] font-mono font-medium leading-[13px] whitespace-nowrap">
-        {getLabel()}
-      </span>
-    </div>
-  );
-};
-
-const CustomerCard: React.FC<CustomerCardProps> = ({
-  customerName,
-  customerEmail,
-  customerId,
-  age,
-  nextBookingDate,
-  lastBookingDate,
-  numberOfBookings,
-  status,
-  showWaiverStatus = true,
-  onClick,
-}) => {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        "flex flex-col rounded-lg border border-border-primary bg-surface-primary",
-        "hover:bg-surface-secondary transition-colors text-left w-full",
-        "focus:outline-none focus:ring-2 focus:ring-fill-highlight focus:ring-offset-2"
-      )}
-    >
-      {/* Header: Name, Email, and Age */}
-      <div className="w-full px-2">
-        <div className="flex items-start gap-3 px-2 pt-4 pb-3 border-b border-border-secondary">
-          <div className="flex flex-col gap-0.5 flex-1 min-w-0" style={{ flexBasis: '80%' }}>
-            <span className="text-label-primary text-[15px] font-semibold leading-5 truncate">
-              {customerName}
-            </span>
-            <span className="text-label-secondary text-[13px] font-normal leading-4 truncate">
-              {customerEmail}
-            </span>
-          </div>
-          <div className="flex flex-col gap-0.5 items-end" style={{ flexBasis: '20%' }}>
-            <span className="text-label-secondary text-[13px] font-medium leading-4">
-              Age
-            </span>
-            <span className="text-label-primary text-[13px] font-normal">
-              {age}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Details Row - Next Booking and Waiver side by side */}
-      {showWaiverStatus ? (
-        <div className="w-full px-2">
-          <div className="flex items-center justify-between px-2 py-3">
-            <div className="flex flex-col gap-0.5">
-              <span className="text-label-secondary text-[13px] font-medium leading-4">
-                Next Booking
-              </span>
-              <span className="text-label-primary text-[13px] font-normal">
-                {nextBookingDate || '—'}
-              </span>
-            </div>
-            <div className="flex flex-col items-end gap-1">
-              <span className="text-label-secondary text-[11px] font-medium leading-3">
-                Waiver
-              </span>
-              <WaiverStatusBadge status={status} />
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="w-full px-2">
-          <div className="grid grid-cols-2 gap-3 px-2 py-3">
-            <div className="flex flex-col gap-0.5">
-              <span className="text-label-secondary text-[13px] font-medium leading-4">
-                Next Booking
-              </span>
-              <span className="text-label-primary text-[13px] font-normal">
-                {nextBookingDate || '—'}
-              </span>
-            </div>
-
-            <div className="flex flex-col gap-0.5">
-              <span className="text-label-secondary text-[13px] font-medium leading-4">
-                Last Booking
-              </span>
-              <span className="text-label-primary text-[13px] font-normal">
-                {lastBookingDate || '—'}
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
-    </button>
-  );
-};
-
-export default CustomerCard;

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import { IconTrendUp, IconTrendDown } from '../../icons';
-
-interface DashboardCardProps {
-  title: string;
-  value: string;
-  change: string;
-  trend: 'up' | 'down';
-}
-
-const DashboardCard: React.FC<DashboardCardProps> = ({ title, value, change, trend }) => {
-  return (
-    <div className="bg-surface-secondary rounded-xl p-5 border border-border-primary">
-      <p className="text-label-secondary text-sm font-medium mb-2">{title}</p>
-      <p className="text-label-primary text-2xl font-semibold mb-2">{value}</p>
-      <div className="flex items-center gap-1.5">
-        {trend === 'up' ? (
-          <IconTrendUp size={16} />
-        ) : (
-          <IconTrendDown size={16} />
-        )}
-        <span className={`text-sm font-medium ${trend === 'up' ? 'text-fill-status-success' : 'text-fill-status-error'}`}>
-          {change}
-        </span>
-        <span className="text-label-tertiary text-sm">vs last month</span>
-      </div>
-    </div>
-  );
-};
-
-const DashboardCards: React.FC = () => {
-  const cards: DashboardCardProps[] = [
-    { title: 'Total Bookings', value: '1,234', change: '+12.5%', trend: 'up' },
-    { title: 'Revenue', value: '£45,678', change: '+8.2%', trend: 'up' },
-    { title: 'New Customers', value: '89', change: '-3.1%', trend: 'down' },
-    { title: 'Avg. Booking Value', value: '£37.02', change: '+5.7%', trend: 'up' },
-  ];
-
-  return (
-    <div className="mt-6">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {cards.map((card) => (
-          <DashboardCard key={card.title} {...card} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default DashboardCards;

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

@@ -1,18 +0,0 @@
-const DashboardFooter: React.FC = () => {
-  const currentYear = new Date().getFullYear();
-  
-  return (
-    <footer className="border-t border-border-primary p-4 mt-auto w-full">
-      <div className="flex items-center justify-between text-label-secondary w-full">
-        <div className="text-[10px] leading-3 font-mono">
-          Version: <span className="font-semibold">1.0.0</span>
-        </div>
-        <div className="text-[10px] leading-3 font-mono font-semibold">
-          © Booked it {currentYear}
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default DashboardFooter;