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

package/src/v2/navigation/DashboardLayout/DashboardLayout.tsx

@@ -38,7 +38,9 @@ export interface DashboardLayoutProps {
     userId?: number
 
     userRole?: string
-    
+
+    userAvatarUrl?: string
+
     inboxCount?: number
     
     bellCount?: number
@@ -73,6 +75,9 @@ export interface DashboardLayoutProps {
 
     /** Custom navigation items for provider sidebar */
     navItems?: NavItem[]
+
+    /** Called when the Booked it logo in the top nav is clicked */
+    onLogoClick?: () => void
 }
 
 export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
@@ -91,6 +96,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
     userEmail,
     userId,
     userRole,
+    userAvatarUrl,
     inboxCount = 0,
     bellCount = 0,
     activePath = '/home',
@@ -108,6 +114,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
     showFooter = true,
     userPanelOpen = false,
     navItems,
+    onLogoClick,
 }) => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
@@ -137,13 +144,23 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
         }
     }
 
+    const handleNavigation = (path: string) => {
+        if (isMobile) {
+            setMobileMenuOpen(false)
+        }
+        onNavigation?.(path)
+    }
+
     const renderSidebar = () => {
         if (destination === 'admin') {
             return (
                 <AdminSidebar
                     expanded={sidebarExpanded}
                     activePath={activePath}
-                    onNavigation={onNavigation}
+                    onNavigation={handleNavigation}
+                    userName={userName}
+                    userRole={userRole}
+                    userAvatarUrl={userAvatarUrl}
                 />
             )
         }
@@ -156,9 +173,9 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                 providerImage={destination === 'company' ? companyImage : providerImage}
                 providerType={providerType}
                 activePath={activePath}
-                onNavigation={onNavigation}
-                showBackToAdmin={hasAdminAccess && destination !== 'admin'}
-                onBackToAdmin={() => onNavigation?.('/admin')}
+                onNavigation={handleNavigation}
+                showBackToAdmin={hasAdminAccess}
+                onBackToAdmin={() => handleNavigation('/admin')}
                 navItems={navItems}
             />
         )
@@ -189,6 +206,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                 mobileMenuOpen={mobileMenuOpen}
                 onMobileMenuToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
                 userPanelOpen={userPanelOpen}
+                onLogoClick={onLogoClick}
             />
 
             

package/src/v2/navigation/DashboardLayout/ProviderSidebar.tsx

@@ -114,7 +114,6 @@ export {
 
 // Default navigation items
 const defaultNavItems: NavItem[] = [
-    { id: 'home', label: 'Home', path: '/home', icon: <HomeIcon />, end: true },
     { id: 'flows', label: 'Flows', path: '/flows', icon: <FlowsIcon /> },
     { id: 'inventory', label: 'Inventory', path: '/inventory', icon: <InventoryIcon /> },
     { id: 'loyalty', label: 'Loyalty', path: '/loyalty', icon: <LoyaltyIcon /> },
@@ -192,11 +191,11 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
                 
                 {expanded ? (
                     <div
-                        className={`provider-sidebar__header ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
-                        onClick={() => handleNavClick('/profile')}
+                        className={`provider-sidebar__header ${activePath === '/home' || activePath === '/' ? 'provider-sidebar__link--active' : ''}`}
+                        onClick={() => handleNavClick('/home')}
                         role="button"
                         tabIndex={0}
-                        onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/profile')}
+                        onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/home')}
                         style={{ cursor: 'pointer' }}
                     >
                         <EntityHeader
@@ -211,11 +210,11 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
                 ) : (
                     <Tooltip content={providerName} side="right" sideOffset={8} delayDuration={100}>
                         <div
-                            className={`provider-sidebar__header provider-sidebar__header--collapsed ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
-                            onClick={() => handleNavClick('/profile')}
+                            className={`provider-sidebar__header provider-sidebar__header--collapsed ${activePath === '/home' || activePath === '/' ? 'provider-sidebar__link--active' : ''}`}
+                            onClick={() => handleNavClick('/home')}
                             role="button"
                             tabIndex={0}
-                            onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/profile')}
+                            onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/home')}
                             style={{ cursor: 'pointer' }}
                         >
                             <EntityHeader

package/src/v2/navigation/DashboardLayout/TopNavigation.scss

@@ -75,7 +75,22 @@
         }
     }
 
-    
+    &__logo-btn {
+        display: flex;
+        align-items: center;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        border-radius: 4px;
+
+        &:focus-visible {
+            outline: 2px solid var(--fills-main-fill-primary, #14215A);
+            outline-offset: 2px;
+        }
+    }
+
+
     &__logo-mark {
         height: 36px;
         width: 36px;

package/src/v2/navigation/DashboardLayout/TopNavigation.tsx

@@ -26,6 +26,7 @@ export interface TopNavigationProps {
     onMobileMenuToggle?: () => void
     sidebarToggleDisabled?: boolean
     userPanelOpen?: boolean
+    onLogoClick?: () => void
 }
 const SidebarOpenIcon = () => (
   <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
@@ -43,38 +44,6 @@ const SidebarCollapsedIcon = () => (
     <path d="M29 10C30.6569 10 32 11.3431 32 13V27C32 28.6569 30.6569 30 29 30H11C9.34315 30 8 28.6569 8 27V13C8 11.3431 9.34315 10 11 10H29ZM14 28H29C29.5523 28 30 27.5523 30 27V13C30 12.4477 29.5523 12 29 12H14V28ZM11 12C10.4477 12 10 12.4477 10 13V27C10 27.5523 10.4477 28 11 28H12V12H11Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
   </svg>
 )
-const InboxIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-        {(hovered && !active) && (
-            <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" fill="var(--fills-main-fill-secondary, #626A90)" fillOpacity="0.3"/>
-        )}
-        {active && (
-            <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" fill="white" fillOpacity="0.3"/>
-        )}
-        <path d="M8.02381 7.78307C8.12549 7.32553 8.5313 7 9 7H23C23.4687 7 23.8745 7.32553 23.9762 7.78307L25.9762 16.7831C25.992 16.8543 26 16.927 26 17V24C26 24.5523 25.5523 25 25 25H7C6.44772 25 6 24.5523 6 24V17C6 16.927 6.00799 16.8543 6.02381 16.7831L8.02381 7.78307ZM9.80217 9L8.24662 16H13C13 17.6569 14.3431 19 16 19C17.6569 19 19 17.6569 19 16H23.7534L22.1978 9H9.80217ZM20.584 18C19.8124 19.7659 18.0503 21 16 21C13.9497 21 12.1876 19.7659 11.416 18H8V23H24V18H20.584Z" fill={active ? 'white' : 'var(--fills-main-fill-secondary, #626A90)'}/>
-    </svg>
-)
-const NotificationIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => {
-    if (active) {
-        return (
-            <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="white" />
-            </svg>
-        )
-    }
-    if (hovered) {
-        return (
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-                <path d="M22.4874 15.5353C23.2901 12.3202 21.3346 9.06324 18.1196 8.26054C14.9045 7.45785 11.6475 9.41342 10.8448 12.6284L8.90696 20.3902L20.5496 23.297L22.4874 15.5353ZM22.3285 24.4283L22.5874 25.0426C22.6947 25.2971 22.5753 25.5903 22.3208 25.6976C22.2212 25.7396 22.1105 25.7481 22.0055 25.7219L6.48205 21.8461C6.21413 21.7792 6.05118 21.5078 6.11806 21.2399C6.14427 21.1349 6.20382 21.0413 6.28775 20.9731L6.80502 20.5525L8.9044 12.144C9.97467 7.85727 14.3173 5.24985 18.604 6.32011C22.8907 7.39038 25.4981 11.733 24.4279 16.0197L22.3285 24.4283ZM15.4569 25.1176L20.308 26.3288C19.9735 27.6683 18.6164 28.4832 17.2768 28.1487C15.9373 27.8143 15.1224 26.4572 15.4569 25.1176Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
-            </svg>
-        )
-    }
-    return (
-        <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="var(--fills-main-fill-secondary, #626A90)"/>
-        </svg>
-    )
-}
 const HelpIcon = ({ hovered }: { hovered?: boolean }) => (
     <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
         {hovered && (
@@ -135,10 +104,7 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
     userAvatarUrl,
     userId,
     userRole,
-    inboxCount = 0,
-    notificationCount = 0,
     onUserClick,
-    onInboxClick,
     onNotificationClick,
     onHelpClick,
     onProfileClick,
@@ -147,16 +113,15 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
     onMobileMenuToggle,
     sidebarToggleDisabled = false,
     userPanelOpen = false,
+    onLogoClick,
 }) => {
     const [hoveredItem, setHoveredItem] = useState<string | null>(null)
     const [isNotificationActive, setIsNotificationActive] = useState(false)
     const handleUserClick = () => {
         onUserClick?.()
     }
-    const handleNotificationClick = () => {
-        setIsNotificationActive(!isNotificationActive)
-        onNotificationClick?.()
-    }
+    // handleNotificationClick - temporarily hidden from UI
+    void isNotificationActive; void setIsNotificationActive; void onNotificationClick;
     return (
         <header className="top-navigation">
             
@@ -186,8 +151,22 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
                     </button>
                 </Tooltip>
                 
-                <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
-                <BookedLogoFull className="top-navigation__logo-full" />
+                {onLogoClick ? (
+                    <button
+                        className="top-navigation__logo-btn"
+                        onClick={onLogoClick}
+                        aria-label="Go to home"
+                        type="button"
+                    >
+                        <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
+                        <BookedLogoFull className="top-navigation__logo-full" />
+                    </button>
+                ) : (
+                    <>
+                        <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
+                        <BookedLogoFull className="top-navigation__logo-full" />
+                    </>
+                )}
             </div>
             
             <div className="top-navigation__right">

package/src/v2/navigation/FigmasAdminSideBar/FigmasAdminSideBar.tsx

@@ -8,7 +8,7 @@ export interface FigmasAdminSideBarProps {
 
 export const FigmasAdminSideBar: React.FC<FigmasAdminSideBarProps> = ({
     expanded = true,
-    onToggle,
+    onToggle: _onToggle,
 }) => {
     const homeIcon = (
         <div className="figmas-admin-sidebar__icon">

package/src/v2/navigation/FigmasSideBar/FigmasSideBar.tsx

@@ -26,9 +26,7 @@ export const FigmasSideBar: React.FC<FigmasSideBarProps> = ({
     venueName = "Sharky's Soft Play",
     venueId = "123",
     venueImage,
-    onToggle,
     navigationItems,
-    onNavigation,
     activePath,
     authCredentials,
 }) => {
@@ -38,6 +36,7 @@ export const FigmasSideBar: React.FC<FigmasSideBarProps> = ({
         : navigationItems || []
 
     const isActive = (path: string) => activePath === path
+    void accessibleItems; void isActive;
     const icon = (
         <div className="figmas-sidebar__icon">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/v2/navigation/FigmasTopHat/FigmasTopHat.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import './FigmasTopHat.scss'
-import logoDesktop1 from './assets/logo-desktop-1.svg'
-import logoDesktop2 from './assets/logo-desktop-2.svg'
-import discIcon from './assets/disc-icon.svg'
-import inboxIcon from './assets/inbox-icon.svg'
-import bellIcon from './assets/bell-icon.svg'
-import userIcon from './assets/user-icon.svg'
+import logoDesktop1 from './assets/logo-desktop-1.svg?url'
+import logoDesktop2 from './assets/logo-desktop-2.svg?url'
+import discIcon from './assets/disc-icon.svg?url'
+import inboxIcon from './assets/inbox-icon.svg?url'
+import bellIcon from './assets/bell-icon.svg?url'
+import userIcon from './assets/user-icon.svg?url'
 
 // Image assets loaded from local assets folder
 const SidebarToggleIcon = () => (

package/src/v2/navigation/Navigation/Navigation.scss

@@ -12,4 +12,4 @@
     &--collapsed {
         width: 60px; // Collapsed width for icon-only mode
     }
-}
+}

package/src/v2/navigation/Navigation/Navigation.tsx

@@ -124,4 +124,3 @@ export const Navigation: React.FC<NavigationProps> = ({
         </nav>
     )
 }
-

package/src/v2/navigation/Navigation/index.ts

@@ -1,3 +1,2 @@
 export { Navigation } from './Navigation'
 export type { NavigationProps } from './Navigation'
-

package/src/v2/navigation/SideBarToggleLarge/SideBarToggleLarge.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './SideBarToggleLarge.scss'
-import sidebarIcon from './assets/sidebar-icon.svg'
+import sidebarIcon from './assets/sidebar-icon.svg?url'
 
 export interface SideBarToggleLargeProps {
     variant?: 'default' | 'hover' | 'pressed'

package/src/v2/navigation/TopHatControlDisc/TopHatControlDisc.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './TopHatControlDisc.scss'
-import discIcon from './assets/disc-icon.svg'
+import discIcon from './assets/disc-icon.svg?url'
 
 export interface TopHatControlDiscProps {
   variant?: 'default' | 'hover' | 'pressed'

package/src/v2/navigation/config.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { NavigationItem } from '../types/navigation'
 
 // Icon components (these would be your actual icon imports)

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;