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

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

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

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

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

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

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