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

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { IconTelephone, IconMail } from '../../icons';
+
+interface AccountManagerCardProps {
+  fullName: string;
+  email: string;
+  avatarUrl: string | null;
+  companyPhone: string | null;
+}
+
+const AccountManagerCard: React.FC<AccountManagerCardProps> = ({
+  fullName,
+  email,
+  avatarUrl,
+  companyPhone,
+}) => {
+  return (
+    <div className="flex items-center gap-4 p-4 bg-surface-secondary border border-border-primary rounded-lg">
+      <div className="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-surface-tertiary border border-border-primary">
+        {avatarUrl ? (
+          <img src={avatarUrl} alt={fullName} className="w-full h-full object-cover" />
+        ) : (
+          <span className="text-label-secondary font-bold text-sm">
+            {fullName[0]?.toUpperCase() || '?'}
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col gap-1 flex-1 min-w-0">
+        <span className="text-label-primary text-sm font-semibold">{fullName}</span>
+        <div className="flex items-center gap-1.5">
+          <IconMail size={14} className="fill-fill-secondary flex-shrink-0" />
+          <span className="text-label-secondary text-xs truncate">{email}</span>
+        </div>
+        {companyPhone && (
+          <div className="flex items-center gap-1.5">
+            <IconTelephone size={14} className="fill-fill-secondary flex-shrink-0" />
+            <span className="text-label-secondary text-xs">{companyPhone}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AccountManagerCard;

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

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { DataTable } from './tables/DataTable';
+import { ColumnConfig, RowAction } from './tables/types';
+import StatusBadge from './StatusBadge';
+import DeleteConfirmationDialog from './shared/DeleteConfirmationDialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './ui/tooltip';
+
+export interface Affiliate {
+  id: string;
+  name: string;
+  views: number;
+  lastSeen: string;
+  status: 'active' | 'disabled';
+  destinationUrl: string;
+  affiliateCode: string;
+}
+
+interface AffiliatesTableProps {
+  affiliates: Affiliate[];
+  onDelete: (id: string) => void;
+  onToggleStatus: (id: string) => void;
+}
+
+const AffiliatesTable: React.FC<AffiliatesTableProps> = ({ affiliates, onDelete, onToggleStatus }) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedAffiliate, setSelectedAffiliate] = useState<Affiliate | null>(null);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const handleDeleteClick = (affiliate: Affiliate) => {
+    setSelectedAffiliate(affiliate);
+    setShowDeleteDialog(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (selectedAffiliate) {
+      onDelete(selectedAffiliate.id);
+    }
+    setShowDeleteDialog(false);
+    setSelectedAffiliate(null);
+  };
+
+  const handleCopyLink = async (affiliate: Affiliate) => {
+    const affiliateLink = `${window.location.origin}/r/${affiliate.affiliateCode}`;
+    await navigator.clipboard.writeText(affiliateLink);
+    setCopiedId(affiliate.id);
+    setTimeout(() => setCopiedId(null), 1000);
+  };
+
+  const columns: ColumnConfig<Affiliate>[] = [
+    {
+      label: 'Affiliate',
+      render: (affiliate) => (
+        <div className="flex items-center gap-2 flex-1">
+          {/* Icon */}
+          <div className="flex w-8 h-8 justify-center items-center gap-2 rounded bg-surface-secondary flex-shrink-0">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M16.2424 14.1213L15.1818 13.0606L16.2424 12C17.414 10.8284 17.414 8.92892 16.2424 7.75734C15.0708 6.58577 13.1713 6.58577 11.9997 7.75734L10.9391 8.81801L9.87842 7.75734L10.9391 6.69668C12.6964 4.93932 15.5457 4.93932 17.3031 6.69668C19.0604 8.45405 19.0604 11.3033 17.3031 13.0606L16.2424 14.1213ZM14.121 16.2427L13.0604 17.3033C11.3031 19.0606 8.45379 19.0606 6.69644 17.3033C4.93908 15.5459 4.93908 12.6967 6.69644 10.9393L7.7571 9.87866L8.81775 10.9393L7.7571 12C6.58552 13.1716 6.58552 15.0711 7.7571 16.2427C8.92867 17.4142 10.8282 17.4142 11.9997 16.2427L13.0604 15.1819L14.121 16.2427ZM14.121 8.81801L15.1818 9.87866L9.87842 15.1819L8.81775 14.1213L14.121 8.81801Z" className="fill-label-secondary" />
+            </svg>
+          </div>
+
+          {/* Name */}
+          <div className="flex flex-col justify-center items-start gap-0.5 flex-1 min-w-0">
+            <h3 className="text-label-primary text-sm font-semibold leading-4 truncate w-full">
+              {affiliate.name}
+            </h3>
+          </div>
+        </div>
+      )
+    },
+    {
+      label: 'Views',
+      accessor: (affiliate) => affiliate.views.toLocaleString(),
+      width: 'w-[160px]'
+    },
+    {
+      label: 'Last Seen',
+      accessor: 'lastSeen',
+      width: 'w-[140px]'
+    },
+    {
+      label: 'Status',
+      render: (affiliate) => (
+        <div className="flex items-center gap-2">
+          <StatusBadge status={affiliate.status} />
+          
+          {/* Copy Button */}
+          <TooltipProvider delayDuration={200}>
+            <Tooltip open={copiedId === affiliate.id ? true : undefined}>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCopyLink(affiliate);
+                  }}
+                  className="w-8 h-8 relative flex items-center justify-center rounded-full hover:opacity-80 transition-all flex-shrink-0"
+                  aria-label="Copy link"
+                >
+                  <div className="absolute inset-0 w-8 h-8 rounded-full bg-surface-secondary"></div>
+                  <div className="relative z-10 transition-opacity duration-300">
+                    {copiedId === affiliate.id ? (
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="animate-fade-in">
+                        <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-secondary" />
+                      </svg>
+                    ) : (
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="animate-fade-in">
+                        <path d="M7 6V3C7 2.44772 7.44772 2 8 2H20C20.5523 2 21 2.44772 21 3V17C21 17.5523 20.5523 18 20 18H17V21C17 21.5523 16.5523 22 16 22H4C3.44772 22 3 21.5523 3 21V7C3 6.44772 3.44772 6 4 6H7ZM5 8V20H15V8H5ZM9 6H17V16H19V4H9V6Z" className="fill-fill-secondary" />
+                      </svg>
+                    )}
+                  </div>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{copiedId === affiliate.id ? 'Copied!' : 'Copy affiliate link'}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      ),
+      width: 'w-[150px]',
+      className: 'flex justify-end'
+    }
+  ];
+
+  const rowActions = (affiliate: Affiliate): RowAction<Affiliate>[] => [
+    {
+      label: 'Edit Affiliate',
+      onClick: () => {
+        window.location.href = `/marketing/affiliates/edit/${affiliate.id}`;
+      }
+    },
+    {
+      label: affiliate.status === 'active' ? 'Disable' : 'Enable',
+      onClick: () => {
+        onToggleStatus(affiliate.id);
+      }
+    },
+    {
+      label: 'Copy Link',
+      onClick: () => {
+        handleCopyLink(affiliate);
+      }
+    },
+    {
+      label: 'Delete',
+      onClick: () => {
+        handleDeleteClick(affiliate);
+      },
+      variant: 'danger'
+    }
+  ];
+
+  return (
+    <>
+      <DataTable
+        data={affiliates}
+        columns={columns}
+        keyExtractor={(affiliate) => affiliate.id}
+        rowActions={rowActions}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmationDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        onConfirm={handleDeleteConfirm}
+        title={`Delete ${selectedAffiliate?.name}?`}
+        itemName={selectedAffiliate?.name}
+      />
+    </>
+  );
+};
+
+export default AffiliatesTable;

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

@@ -0,0 +1,165 @@
+import React from 'react';
+
+interface AuditRecord {
+  id: number;
+  name: string;
+  date: string;
+  status: 'complete' | 'in-progress' | 'failed';
+  issuesFound: number;
+  issuesResolved: number;
+  description: string;
+}
+
+const auditHistory: AuditRecord[] = [
+  {
+    id: 1,
+    name: 'Hex Value Linter',
+    date: new Date('2025-11-12T14:30:00').toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    }),
+    status: 'complete',
+    issuesFound: 5,
+    issuesResolved: 5,
+    description: 'Scanned for hardcoded hex color values and replaced with design system tokens'
+  },
+  {
+    id: 2,
+    name: 'Code Clean Up',
+    date: new Date('2025-11-12T15:45:00').toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    }),
+    status: 'in-progress',
+    issuesFound: 193,
+    issuesResolved: 0,
+    description: 'Identified Shadcn and Tailwind default tokens that should be replaced with design system tokens'
+  }
+];
+
+interface AuditArchiveProps {
+  onSelectAudit: (auditId: number) => void;
+}
+
+const AuditArchive: React.FC<AuditArchiveProps> = ({ onSelectAudit }) => {
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 bg-surface-secondary rounded-lg">
+        <div>
+          <div className="text-label-primary font-semibold text-lg">
+            Audit Archive
+          </div>
+          <div className="text-label-secondary text-sm mt-1">
+            Complete history of all code audits and linters run on this project
+          </div>
+        </div>
+      </div>
+
+      {/* Stats Overview */}
+      <div className="grid grid-cols-3 gap-4 max-sm:grid-cols-1">
+        <div className="p-4 bg-surface-secondary rounded-lg">
+          <div className="text-label-secondary text-xs font-semibold uppercase tracking-wide">Total Audits</div>
+          <div className="text-label-primary text-3xl font-bold mt-2">{auditHistory.length}</div>
+        </div>
+        <div className="p-4 bg-surface-secondary rounded-lg">
+          <div className="text-label-secondary text-xs font-semibold uppercase tracking-wide">Issues Found</div>
+          <div className="text-label-primary text-3xl font-bold mt-2">
+            {auditHistory.reduce((sum, audit) => sum + audit.issuesFound, 0)}
+          </div>
+        </div>
+        <div className="p-4 bg-surface-secondary rounded-lg">
+          <div className="text-label-secondary text-xs font-semibold uppercase tracking-wide">Issues Resolved</div>
+          <div className="text-label-primary text-3xl font-bold mt-2">
+            {auditHistory.reduce((sum, audit) => sum + audit.issuesResolved, 0)}
+          </div>
+        </div>
+      </div>
+
+      {/* Audit List */}
+      <div className="flex flex-col gap-3">
+        {auditHistory.map((audit) => {
+          const completionRate = (audit.issuesResolved / audit.issuesFound) * 100;
+          const isComplete = audit.status === 'complete';
+          
+          return (
+            <div 
+              key={audit.id} 
+              onClick={() => onSelectAudit(audit.id)}
+              className="p-4 bg-surface-secondary rounded-lg border border-primary hover:bg-surface-secondary-hover transition-colors cursor-pointer"
+            >
+              <div className="flex items-start justify-between gap-4 max-sm:flex-col">
+                {/* Left Side - Info */}
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h3 className="text-label-primary font-semibold text-base">
+                      Audit #{audit.id}: {audit.name}
+                    </h3>
+                    {isComplete && (
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                        <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+                      </svg>
+                    )}
+                  </div>
+                  <div className="text-label-secondary text-xs mb-2">{audit.date}</div>
+                  <div className="text-label-secondary text-sm">{audit.description}</div>
+                </div>
+
+                {/* Right Side - Status */}
+                <div className="flex flex-col items-end gap-2 min-w-[180px] max-sm:w-full max-sm:items-start">
+                  <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                    audit.status === 'complete' 
+                      ? 'bg-surface-status-success text-label-status-success'
+                      : audit.status === 'in-progress'
+                      ? 'bg-surface-status-info text-label-status-info'
+                      : 'bg-surface-status-error text-label-status-error'
+                  }`}>
+                    {audit.status === 'complete' ? '✓ Complete' : audit.status === 'in-progress' ? 'In Progress' : 'Failed'}
+                  </span>
+                  
+                  <div className="text-right max-sm:text-left">
+                    <div className="text-label-primary text-sm font-semibold">
+                      {audit.issuesResolved} / {audit.issuesFound} resolved
+                    </div>
+                    <div className="text-label-secondary text-xs">
+                      {completionRate.toFixed(0)}% completion
+                    </div>
+                  </div>
+
+                  {/* Progress Bar */}
+                  <div className="w-full bg-surface-primary rounded-full h-2 overflow-hidden">
+                    <div 
+                      className={`h-full transition-all ${
+                        completionRate === 100 ? 'bg-fill-status-success' : 'bg-fill-highlight'
+                      }`}
+                      style={{ width: `${completionRate}%` }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Empty State (if no audits) */}
+      {auditHistory.length === 0 && (
+        <div className="p-12 bg-surface-secondary rounded-lg text-center">
+          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" className="mx-auto mb-4 opacity-30">
+            <path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM5 19V5H19V19H5ZM7 7H17V9H7V7ZM7 11H17V13H7V11ZM7 15H13V17H7V15Z" className="fill-label-secondary" />
+          </svg>
+          <div className="text-label-primary font-semibold mb-2">No Audits Yet</div>
+          <div className="text-label-secondary text-sm">Run your first audit to see results here</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AuditArchive;

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

@@ -0,0 +1,270 @@
+import React from 'react';
+
+const AuditContent: React.FC = () => {
+  const auditDate = new Date('2025-11-12T14:30:00').toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+
+  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">
+              Hex Value Linter
+            </div>
+            <span className="px-2 py-1 bg-surface-highlight-soft text-label-highlight text-xs font-semibold rounded">
+              Audit #1
+            </span>
+          </div>
+          <div className="text-label-secondary text-sm mt-1">
+            {auditDate}
+          </div>
+          <div className="text-label-secondary text-xs mt-1">
+            Hardcoded color values detected in codebase (excluding token definitions)
+          </div>
+        </div>
+      </div>
+
+      {/* TopNavigation Logo SVG */}
+      <div className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-lg">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-label-primary font-semibold text-sm">
+              TopNavigation - Logo Gradient
+            </h3>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+            </svg>
+          </div>
+          <span className="px-2 py-0.5 bg-surface-status-success text-label-status-success text-xs font-semibold rounded">
+            ✓ Fixed
+          </span>
+        </div>
+        
+        <div className="flex items-start gap-4">
+          <div className="flex-1">
+            <div className="text-label-secondary text-xs mb-2">Visual Example:</div>
+            <svg width="124" height="32" viewBox="0 0 124 32" fill="none">
+              <defs>
+                <linearGradient id="audit-logo-gradient" x1="26.5719" y1="12.16" x2="5.61239" y2="21.5777" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#6200EE" />
+                  <stop offset="0.5" stopColor="#5D5BF4" />
+                  <stop offset="1" stopColor="#0E8CE2" />
+                </linearGradient>
+              </defs>
+              <path d="M9.52346 6.23156C11.6315 4.06988 12.6154 3.51108 13.7982 3.14345C14.981 2.77582 16.1906 2.77582 17.3734 3.14345C18.5562 3.51108 19.5401 4.06988 21.6481 6.23156L25.0946 9.7658C27.2026 11.9275 27.7475 12.9364 28.106 14.1493C28.4645 15.3623 28.4645 16.6027 28.106 17.8156C27.7475 19.0285 27.2026 20.0375 25.0946 22.1992L21.6481 25.7334C19.5401 27.8951 18.5562 28.4539 17.3734 28.8215C16.1906 29.1891 14.981 29.1891 13.7982 28.8215C12.6154 28.4539 11.6315 27.8951 9.52346 25.7334L6.07697 22.1992C3.96897 20.0375 3.42404 19.0285 3.06554 17.8156C2.70703 16.6027 2.70703 15.3623 3.06554 14.1493C3.42404 12.9364 3.96897 11.9275 6.07697 9.7658L9.52346 6.23156Z" fill="url(#audit-logo-gradient)" />
+            </svg>
+          </div>
+          <div className="flex-1">
+            <div className="text-label-secondary text-xs mb-2">Issues Found:</div>
+            <div className="flex flex-col gap-2 text-xs">
+              <div className="p-2 bg-surface-primary rounded border border-border-primary">
+                <code className="text-label-status-error font-mono">#6200EE</code>
+                <span className="text-label-secondary ml-2">Line 51</span>
+              </div>
+              <div className="p-2 bg-surface-primary rounded border border-border-primary">
+                <code className="text-label-status-error font-mono">#5D5BF4</code>
+                <span className="text-label-secondary ml-2">Line 52</span>
+              </div>
+              <div className="p-2 bg-surface-primary rounded border border-border-primary">
+                <code className="text-label-status-error font-mono">#0E8CE2</code>
+                <span className="text-label-secondary ml-2">Line 53</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="text-xs text-label-secondary mt-2 p-3 bg-surface-status-success rounded">
+          <strong>✓ Fixed:</strong> Now using CSS variables var(--gradient-stop1), var(--gradient-stop2), var(--gradient-stop3)
+        </div>
+      </div>
+
+      {/* Notification Bell Icon */}
+      <div className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-lg">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-label-primary font-semibold text-sm">
+              TopNavigation - Notification Icon
+            </h3>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+            </svg>
+          </div>
+          <span className="px-2 py-0.5 bg-surface-status-success text-label-status-success text-xs font-semibold rounded">
+            ✓ Fixed
+          </span>
+        </div>
+        
+        <div className="flex items-start gap-4">
+          <div className="flex-1">
+            <div className="text-label-secondary text-xs mb-2">Visual Example:</div>
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+              <path d="M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z" fill="#FFFFFF" />
+            </svg>
+          </div>
+          <div className="flex-1">
+            <div className="text-label-secondary text-xs mb-2">Issue Found:</div>
+            <div className="p-2 bg-surface-primary rounded border border-border-primary text-xs">
+              <code className="text-label-status-error font-mono">fill="#FFFFFF"</code>
+              <span className="text-label-secondary ml-2">Line 148</span>
+            </div>
+          </div>
+        </div>
+        <div className="text-xs text-label-secondary mt-2 p-3 bg-surface-status-success rounded">
+          <strong>✓ Fixed:</strong> Now using fill-fill-primary class with proper theme support
+        </div>
+      </div>
+
+      {/* Affiliates Table Icon */}
+      <div className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-lg">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-label-primary font-semibold text-sm">
+              AffiliatesTable - Options Icon
+            </h3>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+            </svg>
+          </div>
+          <span className="px-2 py-0.5 bg-surface-status-success text-label-status-success text-xs font-semibold rounded">
+            ✓ Fixed
+          </span>
+        </div>
+        
+        <div className="flex items-start gap-4">
+          <div className="flex-1">
+            <div className="text-label-secondary text-xs mb-2">Visual Example:</div>
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+              <circle cx="16" cy="16" r="16" fill="#EFE6FD" />
+              <path d="M2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0ZM9 0C10.1046 0 11 0.895431 11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2C7 0.895431 7.89543 0 9 0ZM16 0C17.1046 0 18 0.895431 18 2C18 3.10457 17.1046 4 16 4C14.8954 4 14 3.10457 14 2C14 0.895431 14.8954 0 16 0Z" fill="#6200EE" transform="translate(7, 14)" />
+            </svg>
+          </div>
+          <div className="flex-1">
+            <div className="text-label-secondary text-xs mb-2">Issues Found:</div>
+            <div className="flex flex-col gap-2 text-xs">
+              <div className="p-2 bg-surface-primary rounded border border-border-primary">
+                <code className="text-label-status-error font-mono">#EFE6FD</code>
+                <span className="text-label-secondary ml-2">Line 186</span>
+              </div>
+              <div className="p-2 bg-surface-primary rounded border border-border-primary">
+                <code className="text-label-status-error font-mono">#6200EE</code>
+                <span className="text-label-secondary ml-2">Line 189</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="text-xs text-label-secondary mt-2 p-3 bg-surface-status-success rounded">
+          <strong>✓ Fixed:</strong> Now using fill-surface-action-soft and fill-fill-action classes
+        </div>
+      </div>
+
+      {/* UI Component Overlays */}
+      <div className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-lg">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-label-primary font-semibold text-sm">
+              Shadcn UI Components - Overlays
+            </h3>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+            </svg>
+          </div>
+          <span className="px-2 py-0.5 bg-surface-status-success text-label-status-success text-xs font-semibold rounded">
+            ✓ Fixed
+          </span>
+        </div>
+        
+        <div className="flex flex-col gap-2">
+          <div className="text-label-secondary text-xs mb-2">Components updated with bg-shade-darker/60:</div>
+          <div className="grid grid-cols-2 gap-2 text-xs">
+            <div className="p-2 bg-surface-primary rounded border border-border-primary">
+              <code className="text-label-secondary font-mono">alert-dialog.tsx</code>
+              <span className="text-label-secondary block text-[10px] mt-1">Line 19</span>
+            </div>
+            <div className="p-2 bg-surface-primary rounded border border-border-primary">
+              <code className="text-label-secondary font-mono">dialog.tsx</code>
+              <span className="text-label-secondary block text-[10px] mt-1">Line 22</span>
+            </div>
+            <div className="p-2 bg-surface-primary rounded border border-border-primary">
+              <code className="text-label-secondary font-mono">drawer.tsx</code>
+              <span className="text-label-secondary block text-[10px] mt-1">Line 21</span>
+            </div>
+            <div className="p-2 bg-surface-primary rounded border border-border-primary">
+              <code className="text-label-secondary font-mono">sheet.tsx</code>
+              <span className="text-label-secondary block text-[10px] mt-1">Line 22</span>
+            </div>
+          </div>
+        </div>
+        <div className="text-xs text-label-secondary mt-2 p-3 bg-surface-status-success rounded">
+          <strong>✓ Fixed:</strong> All overlay components now use bg-shade-darker/60 for consistent theme support
+        </div>
+      </div>
+
+      {/* Chart Component */}
+      <div className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-lg">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-label-primary font-semibold text-sm">
+              Chart Component - Recharts Styling
+            </h3>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+            </svg>
+          </div>
+          <span className="px-2 py-0.5 bg-surface-status-success text-label-status-success text-xs font-semibold rounded">
+            ✓ Fixed
+          </span>
+        </div>
+        
+        <div className="flex flex-col gap-2">
+          <div className="text-label-secondary text-xs">Previously hardcoded stroke values: #ccc, #fff</div>
+          <div className="p-2 bg-surface-primary rounded border border-border-primary text-xs">
+            <code className="text-label-secondary font-mono">src/components/ui/chart.tsx</code>
+            <span className="text-label-secondary block text-[10px] mt-1">Line 48 - Multiple stroke selectors</span>
+          </div>
+        </div>
+        <div className="text-xs text-label-secondary mt-2 p-3 bg-surface-status-success rounded">
+          <strong>✓ Fixed:</strong> All hardcoded stroke values replaced with border-primary for consistent theme support
+        </div>
+      </div>
+
+      {/* Summary */}
+      <div className="p-4 bg-surface-status-success border border-border-status-success rounded-lg">
+        <h3 className="text-label-status-success font-semibold mb-2 flex items-center gap-2">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+          </svg>
+          Audit #1 Complete - All Issues Resolved
+        </h3>
+        <div className="space-y-3 text-sm mt-3">
+          <div className="flex items-start gap-2">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="flex-shrink-0 mt-0.5">
+              <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-status-success" />
+            </svg>
+            <div>
+              <strong className="text-label-primary">5 issues resolved:</strong>
+              <ul className="list-disc list-inside text-label-secondary ml-2 mt-1">
+                <li>TopNavigation logo gradient (3 hex values → CSS variables)</li>
+                <li>Notification icon fill (1 hex value → fill-primary)</li>
+                <li>AffiliatesTable options icon (2 hex values → semantic tokens)</li>
+                <li>Chart component strokes (multiple #ccc, #fff → border-primary)</li>
+                <li>Shadcn overlay backdrops (4 components: bg-black/80 → bg-shade-darker/60)</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div className="p-3 bg-surface-primary rounded mt-3">
+            <div className="text-label-primary text-sm font-semibold">✓ 100% Success Rate</div>
+            <div className="text-label-secondary text-xs mt-1">All hardcoded color values have been replaced with design system tokens</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuditContent;