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

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

@@ -0,0 +1,274 @@
+import React from 'react';
+
+const CodeCleanUpAudit: React.FC = () => {
+  const auditDate = new Date('2025-11-12T15:45:00').toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+
+  const findings = [
+    {
+      category: 'Muted Colors',
+      count: 46,
+      files: 24,
+      tokens: ['muted', 'muted-foreground'],
+      recommendation: 'Replace with design system tokens like label-secondary, fill-secondary, or surface-secondary',
+      components: [
+        'button.tsx - hover states',
+        'dropdown-menu.tsx - disabled items',
+        'command.tsx - placeholder text',
+        'calendar.tsx - disabled dates',
+        'select.tsx - disabled options',
+        'chart.tsx - grid lines',
+        'table.tsx - header backgrounds',
+        'slider.tsx - track backgrounds'
+      ],
+      visual: (
+        <div className="flex gap-2 items-center flex-wrap">
+          <div className="flex items-center gap-2 p-2 bg-muted rounded border border-border-primary">
+            <div className="w-6 h-6 bg-muted border border-border-primary rounded"></div>
+            <span className="text-muted-foreground text-xs">muted</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-muted rounded border border-border-primary">
+            <span className="text-muted-foreground text-xs font-semibold">Text on muted</span>
+          </div>
+        </div>
+      )
+    },
+    {
+      category: 'Accent Colors',
+      count: 74,
+      files: 11,
+      tokens: ['accent', 'accent-foreground'],
+      recommendation: 'Replace with design system tokens like fill-highlight, surface-highlight-soft, or label-highlight',
+      components: [
+        'context-menu.tsx - menu items',
+        'menubar.tsx - menu items',
+        'navigation-menu.tsx - active items',
+        'dropdown-menu.tsx - hover states',
+        'command.tsx - selected items',
+        'calendar.tsx - today indicator',
+        'select.tsx - selected option'
+      ],
+      visual: (
+        <div className="flex gap-2 items-center flex-wrap">
+          <div className="flex items-center gap-2 p-2 bg-accent rounded border border-border-primary">
+            <div className="w-6 h-6 bg-accent border border-border-primary rounded"></div>
+            <span className="text-accent-foreground text-xs">accent</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-accent rounded border border-border-primary">
+            <span className="text-accent-foreground text-xs font-semibold">Text on accent</span>
+          </div>
+        </div>
+      )
+    },
+    {
+      category: 'Card Colors',
+      count: 3,
+      files: 2,
+      tokens: ['card', 'card-foreground'],
+      recommendation: 'Replace with surface-primary and label-primary',
+      components: [
+        'card.tsx - card backgrounds',
+        'card.tsx - card text'
+      ],
+      visual: (
+        <div className="flex gap-2 items-center flex-wrap">
+          <div className="flex items-center gap-2 p-2 bg-card rounded border border-border-primary">
+            <div className="w-6 h-6 bg-card border border-border-primary rounded"></div>
+            <span className="text-card-foreground text-xs">card</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-card rounded border border-border-primary">
+            <span className="text-card-foreground text-xs font-semibold">Text on card</span>
+          </div>
+        </div>
+      )
+    },
+    {
+      category: 'Popover Colors',
+      count: 22,
+      files: 8,
+      tokens: ['popover', 'popover-foreground'],
+      recommendation: 'Replace with surface-primary and label-primary',
+      components: [
+        'popover.tsx - popover backgrounds',
+        'hover-card.tsx - card backgrounds',
+        'dropdown-menu.tsx - menu backgrounds',
+        'command.tsx - command palette',
+        'select.tsx - dropdown backgrounds',
+        'calendar.tsx - calendar popup',
+        'tooltip.tsx - tooltip backgrounds'
+      ],
+      visual: (
+        <div className="flex gap-2 items-center flex-wrap">
+          <div className="flex items-center gap-2 p-2 bg-popover rounded border border-border-primary">
+            <div className="w-6 h-6 bg-popover border border-border-primary rounded"></div>
+            <span className="text-popover-foreground text-xs">popover</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-popover rounded border border-border-primary">
+            <span className="text-popover-foreground text-xs font-semibold">Text on popover</span>
+          </div>
+        </div>
+      )
+    },
+    {
+      category: 'Ring Offset',
+      count: 32,
+      files: 16,
+      tokens: ['ring-offset-background'],
+      recommendation: 'Replace with surface-primary or remove if not needed',
+      components: [
+        'input.tsx - focus rings',
+        'checkbox.tsx - focus rings',
+        'radio-group.tsx - focus rings',
+        'switch.tsx - focus rings',
+        'button.tsx - focus rings',
+        'select.tsx - focus rings',
+        'textarea.tsx - focus rings',
+        'slider.tsx - focus rings'
+      ],
+      visual: (
+        <div className="flex gap-2 items-center flex-wrap">
+          <div className="p-3 rounded border border-border-primary bg-surface-primary">
+            <div className="w-20 h-8 bg-surface-secondary rounded ring-2 ring-primary ring-offset-2 ring-offset-background flex items-center justify-center">
+              <span className="text-[10px] text-label-secondary">ring offset</span>
+            </div>
+          </div>
+        </div>
+      )
+    },
+    {
+      category: 'Destructive Colors',
+      count: 16,
+      files: 6,
+      tokens: ['destructive', 'destructive-foreground'],
+      recommendation: 'Replace with fill-danger, surface-danger-soft, or label-danger',
+      components: [
+        'button.tsx - destructive variant',
+        'alert.tsx - destructive variant',
+        'badge.tsx - destructive variant',
+        'alert-dialog.tsx - destructive actions',
+        'form.tsx - error messages',
+        'toast.tsx - error toasts'
+      ],
+      visual: (
+        <div className="flex gap-2 items-center flex-wrap">
+          <div className="flex items-center gap-2 p-2 bg-destructive rounded border border-border-primary">
+            <div className="w-6 h-6 bg-destructive border border-border-primary rounded"></div>
+            <span className="text-destructive-foreground text-xs">destructive</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-destructive rounded border border-border-primary">
+            <span className="text-destructive-foreground text-xs font-semibold">Text on destructive</span>
+          </div>
+        </div>
+      )
+    }
+  ];
+
+  const totalIssues = findings.reduce((sum, f) => sum + f.count, 0);
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <div className="flex items-center justify-between p-4 bg-surface-secondary rounded-lg">
+        <div>
+          <div className="flex items-center gap-3">
+            <div className="text-label-primary font-semibold text-lg">
+              Code Clean Up
+            </div>
+            <span className="px-2 py-1 bg-surface-status-alert text-label-status-alert text-xs font-semibold rounded">
+              Audit #2
+            </span>
+          </div>
+          <div className="text-label-secondary text-sm mt-1">
+            {auditDate}
+          </div>
+          <div className="text-label-secondary text-xs mt-1">
+            Shadcn and Tailwind default tokens detected in codebase
+          </div>
+        </div>
+      </div>
+
+      {/* Overview Stats */}
+      <div className="grid grid-cols-3 gap-4 max-sm:grid-cols-1">
+        <div className="p-4 bg-surface-status-alert rounded-lg border border-border-status-alert">
+          <div className="text-label-status-alert text-xs font-semibold uppercase tracking-wide">Total Instances</div>
+          <div className="text-label-primary text-3xl font-bold mt-2">{totalIssues}</div>
+        </div>
+        <div className="p-4 bg-surface-status-alert rounded-lg border border-border-status-alert">
+          <div className="text-label-status-alert text-xs font-semibold uppercase tracking-wide">Categories</div>
+          <div className="text-label-primary text-3xl font-bold mt-2">{findings.length}</div>
+        </div>
+        <div className="p-4 bg-surface-status-alert rounded-lg border border-border-status-alert">
+          <div className="text-label-status-alert text-xs font-semibold uppercase tracking-wide">Files Affected</div>
+          <div className="text-label-primary text-3xl font-bold mt-2">{Math.max(...findings.map(f => f.files))}</div>
+        </div>
+      </div>
+
+      {/* Detailed Findings */}
+      {findings.map((finding, index) => (
+        <div key={index} className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-lg">
+          <div className="flex items-center justify-between">
+            <h3 className="text-label-primary font-semibold text-sm">
+              {finding.category}
+            </h3>
+            <span className="px-2 py-0.5 bg-surface-status-alert text-label-status-alert text-xs font-semibold rounded">
+              {finding.count} instances in {finding.files} files
+            </span>
+          </div>
+          
+          <div className="flex flex-col gap-2">
+            <div className="text-label-secondary text-xs mb-2">Visual example:</div>
+            {finding.visual}
+          </div>
+          
+          <div className="flex flex-col gap-2">
+            <div className="text-label-secondary text-xs mb-2">Shadcn/Tailwind tokens found:</div>
+            <div className="flex flex-wrap gap-2">
+              {finding.tokens.map((token, i) => (
+                <div key={i} className="p-2 bg-surface-primary rounded border border-border-primary text-xs">
+                  <code className="text-label-status-error font-mono">{token}</code>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-label-secondary text-xs mb-2">Components affected:</div>
+            <div className="p-3 bg-surface-primary rounded border border-border-primary">
+              <div className="text-label-secondary text-[11px] space-y-1">
+                {finding.components.map((component, i) => (
+                  <div key={i}>• {component}</div>
+                ))}
+              </div>
+            </div>
+          </div>
+          
+          <div className="text-xs text-label-secondary mt-2 p-3 bg-surface-highlight-soft rounded">
+            <strong>Recommendation:</strong> {finding.recommendation}
+          </div>
+        </div>
+      ))}
+
+      {/* Summary */}
+      <div className="p-4 bg-surface-status-info border border-border-status-info rounded-lg">
+        <h3 className="text-label-status-info font-semibold mb-2">Impact Summary</h3>
+        <div className="space-y-2 text-sm">
+          <div className="text-label-secondary">
+            <strong className="text-label-primary">Scope:</strong> This audit identified {totalIssues} instances of Shadcn/Tailwind default tokens across {Math.max(...findings.map(f => f.files))} component files.
+          </div>
+          <div className="text-label-secondary">
+            <strong className="text-label-primary">Priority:</strong> These tokens should be replaced with design system tokens to ensure consistent theming, proper dark mode support, and maintainability.
+          </div>
+          <div className="text-label-secondary">
+            <strong className="text-label-primary">Next Steps:</strong> Replace Shadcn defaults systematically by category, starting with the most frequently used tokens (accent, muted) to maximize impact.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CodeCleanUpAudit;

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

@@ -0,0 +1,387 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '@/integrations/supabase/client';
+import { DataTable } from './tables/DataTable';
+import { TableControls } from './tables/TableControls';
+import { ColumnConfig, RowAction, HeaderAction } from './tables/types';
+import { Button } from './ui/button';
+import EmptyState from './EmptyState';
+import { IconPlusThick, IconArrowInternalReturn, IconDashboard } from '../../icons';
+import { ActionButton } from './TableActionMenu';
+import LoadingScreen from './LoadingScreen';
+import { useToast } from '../hooks/use-toast';
+import StatusBadge from './StatusBadge';
+import { format } from 'date-fns';
+
+interface Company {
+  id: string;
+  name: string;
+  status: string;
+  avatar_url?: string;
+  created_at: string;
+  company_id?: string;
+  provider_count?: number;
+}
+
+const CompaniesTable: React.FC = () => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { t } = useTranslation(['Design']);
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [filteredCompanies, setFilteredCompanies] = useState<Company[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortKey, setSortKey] = useState<string>('name');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+
+  const fetchCompanies = async () => {
+    try {
+      // Fetch companies - no ordering here, we'll sort after combining data
+      const { data: companiesData, error } = await supabase
+        .from('companies' as any)
+        .select('*') as any;
+
+      if (error) throw error;
+
+      // Fetch provider counts for each company
+      const companiesWithCounts = await Promise.all(
+        (companiesData || []).map(async (company: Company) => {
+          const { count } = await supabase
+            .from('providers')
+            .select('*', { count: 'exact', head: true })
+            .eq('company_id', company.id);
+          
+          return {
+            ...company,
+            provider_count: count || 0
+          };
+        })
+      );
+
+      setCompanies(companiesWithCounts);
+      setFilteredCompanies(companiesWithCounts);
+    } catch (error) {
+      console.error('Error fetching companies:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to load companies',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCompanies();
+  }, []);
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(key);
+      setSortDirection('asc');
+    }
+  };
+
+  useEffect(() => {
+    if (searchQuery.trim()) {
+      const filtered = companies.filter(company =>
+        company.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (company.company_id && company.company_id.includes(searchQuery))
+      );
+      setFilteredCompanies(filtered);
+    } else {
+      setFilteredCompanies(companies);
+    }
+  }, [searchQuery, companies]);
+
+  const sortedCompanies = [...filteredCompanies].sort((a, b) => {
+    let aValue: any;
+    let bValue: any;
+
+    switch (sortKey) {
+      case 'name':
+        aValue = a.name.toLowerCase();
+        bValue = b.name.toLowerCase();
+        break;
+      case 'created':
+        aValue = new Date(a.created_at).getTime();
+        bValue = new Date(b.created_at).getTime();
+        break;
+      case 'provider_count':
+        aValue = a.provider_count || 0;
+        bValue = b.provider_count || 0;
+        break;
+      default:
+        return 0;
+    }
+
+    if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
+    if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
+    return 0;
+  });
+
+  const handleAddCompany = () => {
+    navigate('/admin/companies/add');
+  };
+
+  const handleEdit = (company: Company) => {
+    navigate(`/admin/companies/${company.id}/edit`);
+  };
+
+  const handleView = (company: Company) => {
+    navigate(`/company/${company.id}`);
+  };
+
+  const handleToggleStatus = async (company: Company) => {
+    try {
+      const newStatus = company.status === 'active' ? 'disabled' : 'active';
+      
+      const { error } = await supabase
+        .from('companies' as any)
+        .update({ status: newStatus })
+        .eq('id', company.id) as any;
+
+      if (error) throw error;
+
+      toast({
+        title: 'Success',
+        description: `Company ${newStatus === 'active' ? 'enabled' : 'disabled'}`,
+      });
+
+      await fetchCompanies();
+    } catch (error) {
+      console.error('Error toggling company status:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to update company status',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const getInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map(word => word[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  const getCompanyIcon = (company: Company) => {
+    if (company.avatar_url) {
+      return (
+        <div className="flex w-10 h-10 justify-center items-center rounded-full overflow-hidden bg-surface-tertiary flex-shrink-0">
+          <img 
+            src={company.avatar_url} 
+            alt={company.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      );
+    }
+    
+    return (
+      <div className="flex w-10 h-10 justify-center items-center rounded-full bg-surface-tertiary flex-shrink-0">
+        <span className="text-label-secondary text-sm font-semibold">
+          {getInitials(company.name)}
+        </span>
+      </div>
+    );
+  };
+
+  const columns: ColumnConfig<Company>[] = [
+    {
+      label: t('companyAndId'),
+      sortKey: 'name',
+      sortable: true,
+      render: (company: Company) => (
+        <div className="flex items-center gap-3 flex-1">
+          {getCompanyIcon(company)}
+          <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+            <h3 className="text-label-primary text-sm font-semibold leading-4 truncate">
+              {company.name}
+            </h3>
+            <p className="text-label-secondary text-xs font-normal leading-4">
+              Company ID: {company.company_id || 'N/A'}
+            </p>
+          </div>
+        </div>
+      ),
+    },
+    {
+      label: t('numberOfProviders'),
+      sortKey: 'provider_count',
+      sortable: true,
+      render: (company: Company) => (
+        <span className="text-text-secondary">{company.provider_count || 0}</span>
+      ),
+      width: 'w-[120px]'
+    },
+    {
+      label: t('dateOfCreation'),
+      sortKey: 'created',
+      sortable: true,
+      render: (company: Company) => (
+        <span className="text-text-secondary">{format(new Date(company.created_at), 'dd.MM.yyyy')}</span>
+      ),
+      width: 'w-[140px]'
+    },
+    {
+      label: t('status'),
+      render: (company: Company) => <StatusBadge status={company.status as 'active' | 'disabled' | 'invited' | 'suspended'} />,
+      width: 'w-[100px]',
+      className: 'flex justify-end'
+    },
+  ];
+
+  const handleDuplicate = (company: Company) => {
+    navigate(`/admin/companies/${company.id}/clone`);
+  };
+
+  const getRowActions = (company: Company) => [
+    {
+      label: t('goToDashboard'),
+      onClick: () => handleView(company),
+    },
+    {
+      label: t('companyDetails'),
+      onClick: () => navigate(`/admin/companies/${company.id}`),
+    },
+    {
+      label: t('editCompany'),
+      onClick: () => handleEdit(company),
+    },
+    {
+      label: t('duplicateCompany'),
+      onClick: () => handleDuplicate(company),
+    },
+    {
+      label: company.status === 'active' ? t('disableCompany') : t('enableCompany'),
+      onClick: () => handleToggleStatus(company),
+    },
+  ];
+
+  const searchConfig = {
+    value: searchQuery,
+    onChange: setSearchQuery,
+    placeholder: t('searchByCompanyNameOrId'),
+    label: t('searchCompanies')
+  };
+
+  const headerActions: HeaderAction[] = [
+    {
+      label: t('addNewCompany'),
+      mobileLabel: t('add'),
+      onClick: handleAddCompany,
+      icon: <IconPlusThick className="fill-current" />,
+      variant: 'ghost',
+      withIcon: true,
+    },
+  ];
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (companies.length === 0) {
+    return (
+      <>
+        <TableControls
+          searchConfig={searchConfig}
+          actions={headerActions}
+        />
+        <EmptyState
+          icon="Company"
+          title={t('noCompaniesYet')}
+          description={t('addFirstCompanyDescription')}
+        />
+      </>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <TableControls
+        searchConfig={searchConfig}
+        actions={headerActions}
+      />
+
+      {/* Mobile card layout */}
+      <div className="flex flex-col gap-3 sm:hidden">
+        {sortedCompanies.length === 0 ? (
+          <div className="flex items-center justify-center py-12">
+            <span className="text-label-secondary text-sm">{t('noCompaniesFound')}</span>
+          </div>
+        ) : (
+          sortedCompanies.map((company) => (
+            <button
+              key={company.id}
+              onClick={() => navigate(`/admin/companies/${company.id}`)}
+              className="flex items-center gap-3 p-4 bg-surface-primary border border-border-primary rounded-lg w-full text-left"
+            >
+              {getCompanyIcon(company)}
+              <div className="flex flex-col gap-1 flex-1 min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <h3 className="text-label-primary text-sm font-semibold leading-4 truncate">
+                    {company.name}
+                  </h3>
+                  <StatusBadge status={company.status as 'active' | 'disabled' | 'invited' | 'suspended'} />
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-label-secondary text-xs">
+                    ID: {company.company_id || 'N/A'}
+                  </span>
+                  <span className="text-label-tertiary text-xs">·</span>
+                  <span className="text-label-tertiary text-xs">
+                    {company.provider_count || 0} provider{(company.provider_count || 0) !== 1 ? 's' : ''}
+                  </span>
+                  <span className="text-label-tertiary text-xs">·</span>
+                  <span className="text-label-tertiary text-xs">
+                    {format(new Date(company.created_at), 'dd MMM yyyy')}
+                  </span>
+                </div>
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+
+      {/* Desktop table layout */}
+      <div className="hidden sm:block">
+        <DataTable
+          columns={columns}
+          data={sortedCompanies}
+          keyExtractor={(company) => company.id}
+          rowActions={getRowActions}
+          rowQuickActions={(company) => (
+            <ActionButton
+              icon={
+                <div className="relative w-[18px] h-[18px]">
+                  <IconDashboard size={18} className="absolute inset-0 group-hover/dashboard-action:opacity-0 transition-opacity" />
+                  <IconArrowInternalReturn size={18} className="absolute inset-0 opacity-0 group-hover/dashboard-action:opacity-100 transition-opacity" />
+                </div>
+              }
+              className="group/dashboard-action"
+              onClick={() => handleView(company)}
+            />
+          )}
+          onRowClick={(company) => navigate(`/admin/companies/${company.id}`)}
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onSort={handleSort}
+          pagination={{
+            entityName: 'companies'
+          }}
+          emptyState={t('noCompaniesFound')}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CompaniesTable;