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

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

@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ScrollArea } from './ui/scroll-area';
+import { Button } from './ui/button';
+import { IconArrowInternalReturn, IconCross, IconPlus } from '../../icons';
+import IconNotification from '@/assets/Icon_Notification.svg';
+import IconTime from '@/assets/Icon_Time.svg';
+
+interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  timestamp: string;
+  isNew: boolean;
+  type?: 'notification' | 'reminder';
+}
+
+interface NotificationPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  latestCount: number;
+  onMarkAllRead: () => void;
+  onViewAll: () => void;
+}
+
+// Mock data - replace with real data later
+const mockNotifications: Notification[] = [
+  // Reminders (triggered)
+  { id: 'r1', title: 'Reminder', message: 'Follow up with Brad Nobbs about booking confirmation', timestamp: '5 min ago', isNew: true, type: 'reminder' },
+  { id: 'r2', title: 'Reminder', message: 'Review monthly analytics report', timestamp: '30 min ago', isNew: true, type: 'reminder' },
+  { id: 'r3', title: 'Reminder', message: 'Prepare for team meeting at 3pm', timestamp: '1 hour ago', isNew: true, type: 'reminder' },
+  // Latest notifications (9 items to make 12 total with reminders)
+  { id: '1', title: 'New affiliate signup', message: 'John Doe has signed up as an affiliate', timestamp: '2 min ago', isNew: true, type: 'notification' },
+  { id: '2', title: 'Commission earned', message: 'You earned $25.00 from a sale', timestamp: '15 min ago', isNew: true, type: 'notification' },
+  { id: '3', title: 'Payment processed', message: 'Your monthly payment of $500 has been processed', timestamp: '1 hour ago', isNew: true, type: 'notification' },
+  { id: '4', title: 'New conversion', message: 'Affiliate link #1234 generated a conversion', timestamp: '2 hours ago', isNew: true, type: 'notification' },
+  { id: '5', title: 'Profile updated', message: 'Your affiliate profile was successfully updated', timestamp: '3 hours ago', isNew: true, type: 'notification' },
+  { id: '6', title: 'Milestone reached', message: 'Congratulations! You reached 100 affiliates', timestamp: '4 hours ago', isNew: true, type: 'notification' },
+  { id: '7', title: 'New message', message: 'You have a new message from support', timestamp: '5 hours ago', isNew: true, type: 'notification' },
+  { id: '8', title: 'Report ready', message: 'Your monthly report is ready to download', timestamp: '6 hours ago', isNew: true, type: 'notification' },
+  { id: '9', title: 'Link clicked', message: 'Your affiliate link was clicked 50 times today', timestamp: '7 hours ago', isNew: true, type: 'notification' },
+  // Previous reminders
+  { id: 'r4', title: 'Reminder', message: 'Check inventory levels for weekend rush', timestamp: '2 days ago', isNew: false, type: 'reminder' },
+  // Previous notifications
+  { id: '13', title: 'Weekly summary', message: 'Your weekly performance summary is available', timestamp: '2 days ago', isNew: false, type: 'notification' },
+  { id: '14', title: 'Affiliate approved', message: 'New affiliate Sarah Smith was approved', timestamp: '3 days ago', isNew: false, type: 'notification' },
+  { id: '15', title: 'Payout scheduled', message: 'Your next payout is scheduled for May 1st', timestamp: '5 days ago', isNew: false, type: 'notification' },
+  { id: '16', title: 'Campaign ended', message: 'Spring promotion campaign has ended', timestamp: '1 week ago', isNew: false, type: 'notification' },
+  { id: '17', title: 'Terms updated', message: 'Our terms of service have been updated', timestamp: '2 weeks ago', isNew: false, type: 'notification' },
+];
+
+export const NotificationPanel: React.FC<NotificationPanelProps> = ({ 
+  isOpen, 
+  onClose, 
+  latestCount,
+  onMarkAllRead,
+  onViewAll
+}) => {
+  const navigate = useNavigate();
+  const [hoveredNotification, setHoveredNotification] = useState<string | null>(null);
+  
+  if (!isOpen) return null;
+
+  const latestNotifications = mockNotifications.filter(n => n.isNew).slice(0, latestCount);
+  const previousNotifications = mockNotifications.filter(n => !n.isNew);
+
+  const handleSetReminder = () => {
+    onClose();
+    navigate('/set-reminder');
+  };
+
+  const renderNotificationItem = (notification: Notification, isPrevious: boolean = false) => {
+    const isReminder = notification.type === 'reminder';
+    
+    if (isReminder) {
+      // Render reminder as alert-style box with orange/yellow styling
+      return (
+        <div
+          key={notification.id}
+          className="cursor-pointer rounded-lg border border-border-status-alert bg-surface-status-alert p-4 transition-colors hover:opacity-90"
+          onMouseEnter={() => setHoveredNotification(notification.id)}
+          onMouseLeave={() => setHoveredNotification(null)}
+        >
+          <div className="flex items-start gap-3">
+            <div className="w-8 h-8 rounded-full bg-alert-regular flex items-center justify-center flex-shrink-0">
+              <img src={IconTime} alt="" className="w-5 h-5 [filter:brightness(0)_invert(1)]" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-2 mb-0.5">
+                <h4 className="text-sm font-semibold text-label-status-alert">{notification.title}</h4>
+                <span className="text-xs text-label-secondary whitespace-nowrap">{notification.timestamp}</span>
+              </div>
+              <p className="text-xs text-label-primary">{notification.message}</p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // Regular notification
+    const bgClass = isPrevious 
+      ? 'bg-surface-tertiary hover:bg-surface-tertiary-hover' 
+      : 'bg-surface-secondary hover:bg-surface-secondary-hover';
+
+    return (
+      <div
+        key={notification.id}
+        className={`p-3 rounded-lg ${bgClass} transition-colors cursor-pointer`}
+        onMouseEnter={() => setHoveredNotification(notification.id)}
+        onMouseLeave={() => setHoveredNotification(null)}
+      >
+        <div className="flex items-start justify-between gap-2 mb-1">
+          <h4 className="text-sm font-medium text-label-primary">{notification.title}</h4>
+          <span className="text-xs text-label-secondary whitespace-nowrap">{notification.timestamp}</span>
+        </div>
+        <p className="text-sm text-label-secondary">{notification.message}</p>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {/* Overlay */}
+      <div 
+        className="fixed inset-0 z-40 animate-fade-in"
+        style={{ backgroundColor: 'var(--overlay-curtain)' }}
+        onClick={onClose}
+      />
+      
+      {/* Panel */}
+      <div 
+        className="fixed right-0 top-0 h-screen w-full sm:w-[420px] bg-surface-primary shadow-xl z-50 animate-slide-in-right"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border-primary">
+          <div className="flex items-center gap-2">
+            <img src={IconNotification} alt="" className="w-8 h-8" />
+            <h2 className="text-lg font-semibold text-label-primary">Notifications</h2>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleSetReminder}
+              className="gap-1.5 text-label-secondary hover:text-label-primary"
+            >
+              <IconPlus className="w-4 h-4" />
+              Set Reminder
+            </Button>
+            <button
+              onClick={() => {
+                onViewAll();
+                onClose();
+              }}
+              className="p-2 rounded-lg hover:bg-surface-primary-hover transition-colors flex items-center justify-center"
+              aria-label="View all notifications"
+            >
+              <IconArrowInternalReturn className="w-5 h-5 text-label-secondary" />
+            </button>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg hover:bg-surface-primary-hover transition-colors flex items-center justify-center"
+              aria-label="Close notifications"
+            >
+              <IconCross className="w-5 h-5 text-label-secondary" />
+            </button>
+          </div>
+        </div>
+
+        <ScrollArea className="h-[calc(100%-65px)]">
+          {/* Latest Notifications */}
+          <div className="p-4">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-sm font-semibold text-label-primary">
+                Latest Notifications ({latestCount})
+              </h3>
+              <button
+                onClick={() => {
+                  onMarkAllRead();
+                  onClose();
+                }}
+                className="text-sm font-medium text-label-action hover:text-actions-dark transition-colors"
+              >
+                Mark all as read
+              </button>
+            </div>
+            <div className="space-y-2">
+              {latestNotifications.map((notification) => renderNotificationItem(notification, false))}
+            </div>
+          </div>
+
+          {/* Previous Notifications */}
+          {previousNotifications.length > 0 && (
+            <div className="p-4 pt-0">
+              <h3 className="text-sm font-semibold text-label-primary mb-3">
+                Previous Notifications
+              </h3>
+              <div className="space-y-2">
+                {previousNotifications.map((notification) => renderNotificationItem(notification, true))}
+              </div>
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/contexts/AuthContext';
+import { IconUser } from '../../icons';
+
+interface OnlineUsersCardProps {
+  className?: string;
+}
+
+const OnlineUsersCard: React.FC<OnlineUsersCardProps> = ({ className = '' }) => {
+  const { user } = useAuth();
+  const [onlineCount, setOnlineCount] = useState(0);
+
+  useEffect(() => {
+    if (!user) return;
+
+    const channel = supabase.channel('online-users', {
+      config: {
+        presence: {
+          key: user.id,
+        },
+      },
+    });
+
+    channel
+      .on('presence', { event: 'sync' }, () => {
+        const state = channel.presenceState();
+        const count = Object.keys(state).length;
+        setOnlineCount(count);
+      })
+      .on('presence', { event: 'join' }, () => {
+        const state = channel.presenceState();
+        const count = Object.keys(state).length;
+        setOnlineCount(count);
+      })
+      .on('presence', { event: 'leave' }, () => {
+        const state = channel.presenceState();
+        const count = Object.keys(state).length;
+        setOnlineCount(count);
+      })
+      .subscribe(async (status) => {
+        if (status === 'SUBSCRIBED') {
+          await channel.track({
+            user_id: user.id,
+            online_at: new Date().toISOString(),
+          });
+        }
+      });
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [user]);
+
+  return (
+    <div 
+      className={`bg-surface-primary rounded-xl p-4 border-2 animate-pulse-glow ${className}`}
+    >
+      <div className="flex flex-col gap-3">
+        <div className="w-12 h-12 rounded-lg bg-surface-secondary flex items-center justify-center">
+          <IconUser size={28} className="text-fill-secondary" />
+        </div>
+        
+        <div>
+          <p className="text-label-secondary text-[13px] font-medium">{onlineCount === 1 ? 'User' : 'Users'} Online</p>
+          <p className="text-label-primary text-3xl font-bold">{onlineCount}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OnlineUsersCard;

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

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import LoadingScreen from './LoadingScreen';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+const isLovableEditor = window.location.hostname.includes('lovableproject.com');
+const GRACE_PERIOD_MS = 2000;
+
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const { user, isLoading } = useAuth();
+  const [graceExpired, setGraceExpired] = useState(!isLovableEditor);
+
+  useEffect(() => {
+    if (isLovableEditor && !user && !isLoading) {
+      const timer = setTimeout(() => setGraceExpired(true), GRACE_PERIOD_MS);
+      return () => clearTimeout(timer);
+    }
+    if (user) {
+      setGraceExpired(true);
+    }
+  }, [user, isLoading]);
+
+  console.log('ProtectedRoute - isLoading:', isLoading, 'user:', user, 'graceExpired:', graceExpired);
+
+  if (isLoading || (!user && !graceExpired)) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    console.log('No user found, redirecting to /auth');
+    return <Navigate to="/auth" replace />;
+  }
+
+  return <>{children}</>;
+};

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

@@ -0,0 +1,353 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { DataTable } from './tables/DataTable';
+import { TableControls } from './tables/TableControls';
+import { ColumnConfig, RowAction, SearchConfig, FilterConfig, HeaderAction } from './tables/types';
+import StatusBadge from './StatusBadge';
+import { supabase } from '@/integrations/supabase/client';
+import { format } from 'date-fns';
+import IconVenue from '@/assets/Icon_Venue.svg';
+import IconPromoter from '@/assets/Icon_Promoter.svg';
+import { IconPlusThick, IconArrowInternalReturn, IconDashboard } from '../../icons';
+import { ActionButton } from './TableActionMenu';
+import { useToast } from '../hooks/use-toast';
+import { clearProviderCache } from '@/contexts/ProviderContext';
+
+interface Provider {
+  id: string;
+  name: string;
+  type: 'venue' | 'promoter';
+  status: string;
+  created_at: string;
+  avatar_url?: string;
+  venue_id?: string;
+  company_id?: string;
+}
+
+interface ProvidersTableProps {
+  companyId?: string;
+}
+
+const ProvidersTable: React.FC<ProvidersTableProps> = ({ companyId }) => {
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeFilter, setActiveFilter] = useState<'all' | 'venues' | 'promoters'>('all');
+  const [isLoading, setIsLoading] = useState(true);
+  const [sortKey, setSortKey] = useState<string>('name');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+
+  useEffect(() => {
+    fetchProviders();
+  }, [companyId]);
+
+  const fetchProviders = async () => {
+    try {
+      setIsLoading(true);
+      let query = supabase.from('providers').select('*');
+      
+      if (companyId) {
+        query = query.eq('company_id', companyId);
+      }
+      
+      const { data, error } = await query;
+      
+      if (error) throw error;
+      setProviders(data || []);
+    } catch (error) {
+      console.error('Error fetching providers:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(key);
+      setSortDirection('asc');
+    }
+  };
+
+  const filteredProviders = providers.filter(provider => {
+    const matchesSearch = provider.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         provider.id.includes(searchQuery) ||
+                         (provider.venue_id && provider.venue_id.includes(searchQuery));
+    const matchesFilter = activeFilter === 'all' || 
+                         (activeFilter === 'venues' && provider.type === 'venue') ||
+                         (activeFilter === 'promoters' && provider.type === 'promoter');
+    return matchesSearch && matchesFilter;
+  });
+
+  const sortedProviders = [...filteredProviders].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;
+      default:
+        return 0;
+    }
+
+    if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
+    if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
+    return 0;
+  });
+
+  const searchConfig: SearchConfig = {
+    placeholder: 'Search by provider name or ID',
+    value: searchQuery,
+    onChange: setSearchQuery,
+    label: 'Search Providers'
+  };
+
+  const filters: FilterConfig[] = [
+    {
+      label: 'Venues',
+      value: 'venues',
+      isActive: activeFilter === 'venues',
+      onClick: () => setActiveFilter(activeFilter === 'venues' ? 'all' : 'venues')
+    },
+    {
+      label: 'Promoters',
+      value: 'promoters',
+      isActive: activeFilter === 'promoters',
+      onClick: () => setActiveFilter(activeFilter === 'promoters' ? 'all' : 'promoters')
+    }
+  ];
+
+  const actions: HeaderAction[] = [
+    {
+      label: 'Add New Provider',
+      mobileLabel: 'Add',
+      icon: <IconPlusThick className="fill-current" />,
+      variant: 'ghost',
+      withIcon: true,
+      onClick: () => {
+        if (companyId) {
+          navigate(`/company/${companyId}/providers/add`);
+        } else {
+          navigate('/admin/providers/add');
+        }
+      }
+    }
+  ];
+
+  const getFirstLetter = (name: string) => {
+    return name[0]?.toUpperCase() || 'P';
+  };
+
+  const getProviderIcon = (provider: Provider) => {
+    // If provider has an avatar, show it
+    if (provider.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={provider.avatar_url} 
+            alt={provider.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      );
+    }
+    
+    // Otherwise show the first letter
+    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">
+          {getFirstLetter(provider.name)}
+        </span>
+      </div>
+    );
+  };
+
+  const columns: ColumnConfig<Provider>[] = [
+    {
+      label: 'Provider & ID',
+      sortKey: 'name',
+      sortable: true,
+      render: (provider) => (
+        <div className="flex items-center gap-3 flex-1">
+          {getProviderIcon(provider)}
+          <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">
+              {provider.name}
+            </h3>
+            <p className="text-label-secondary text-xs font-normal leading-4">
+              {provider.type === 'venue' ? 'Venue' : 'Promoter'} ID: {provider.venue_id || 'N/A'}
+            </p>
+          </div>
+        </div>
+      )
+    },
+    {
+      label: 'Created',
+      sortKey: 'created',
+      sortable: true,
+      render: (provider: Provider) => (
+        <span className="text-text-secondary">{format(new Date(provider.created_at), 'dd.MM.yyyy')}</span>
+      ),
+      width: 'w-[140px]'
+    },
+    {
+      label: 'Status',
+      render: (provider) => <StatusBadge status={provider.status as 'active' | 'disabled' | 'invited' | 'suspended'} />,
+      width: 'w-[100px]',
+      className: 'flex justify-end'
+    }
+  ];
+
+  const handleDisableProvider = async (provider: Provider) => {
+    try {
+      const newStatus = provider.status === 'active' ? 'disabled' : 'active';
+      
+      const { error } = await supabase
+        .from('providers')
+        .update({ status: newStatus })
+        .eq('id', provider.id);
+      
+      if (error) throw error;
+      
+      // Clear the provider cache so navigating to this provider shows fresh status
+      clearProviderCache();
+      
+      // Refresh the providers list
+      fetchProviders();
+    } catch (error) {
+      console.error('Error updating provider status:', error);
+    }
+  };
+
+  const handleDuplicateProvider = (provider: Provider) => {
+    if (companyId) {
+      navigate(`/company/${companyId}/providers/${provider.id}/clone`);
+    } else {
+      navigate(`/admin/providers/${provider.id}/clone`);
+    }
+  };
+
+  const rowActions = (provider: Provider): RowAction<Provider>[] => [
+    {
+      label: 'Go to Dashboard',
+      onClick: () => {
+        if (!provider.venue_id) {
+          console.error('Provider missing venue_id:', provider);
+          return;
+        }
+        const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
+        navigate(`/${providerType}/${provider.venue_id}/home`);
+      }
+    },
+    {
+      label: `${provider.type === 'venue' ? 'Venue' : 'Promoter'} Details`,
+      onClick: () => navigate(`/admin/providers/${provider.id}`)
+    },
+    {
+      label: `Edit ${provider.type === 'venue' ? 'Venue' : 'Promoter'}`,
+      onClick: () => console.log('Edit provider', provider.id)
+    },
+    {
+      label: `Duplicate ${provider.type === 'venue' ? 'Venue' : 'Promoter'}`,
+      onClick: () => handleDuplicateProvider(provider)
+    },
+    {
+      label: provider.status === 'active' 
+        ? `Disable ${provider.type === 'venue' ? 'Venue' : 'Promoter'}` 
+        : `Enable ${provider.type === 'venue' ? 'Venue' : 'Promoter'}`,
+      onClick: () => handleDisableProvider(provider)
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <TableControls
+        searchConfig={searchConfig}
+        filters={filters}
+        actions={actions}
+      />
+
+      {/* Mobile card layout */}
+      <div className="flex flex-col gap-3 sm:hidden">
+        {sortedProviders.length === 0 ? (
+          <div className="flex items-center justify-center py-12">
+            <span className="text-label-secondary text-sm">No providers found</span>
+          </div>
+        ) : (
+          sortedProviders.map((provider) => (
+            <button
+              key={provider.id}
+              onClick={() => navigate(`/admin/providers/${provider.id}`)}
+              className="flex items-center gap-3 p-4 bg-surface-primary border border-border-primary rounded-lg w-full text-left"
+            >
+              {getProviderIcon(provider)}
+              <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">
+                    {provider.name}
+                  </h3>
+                  <StatusBadge status={provider.status as 'active' | 'disabled' | 'invited' | 'suspended'} />
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-label-secondary text-xs">
+                    {provider.type === 'venue' ? 'Venue' : 'Promoter'} ID: {provider.venue_id || 'N/A'}
+                  </span>
+                  <span className="text-label-tertiary text-xs">·</span>
+                  <span className="text-label-tertiary text-xs">
+                    {format(new Date(provider.created_at), 'dd MMM yyyy')}
+                  </span>
+                </div>
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+      
+      {/* Desktop table layout */}
+      <div className="hidden sm:block">
+        <DataTable
+          data={sortedProviders}
+          columns={columns}
+          keyExtractor={(provider) => provider.id}
+          rowActions={rowActions}
+          rowQuickActions={(provider) => (
+            <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={() => {
+                if (!provider.venue_id) return;
+                const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
+                navigate(`/${providerType}/${provider.venue_id}/home`);
+              }}
+            />
+          )}
+          onRowClick={(provider) => {
+            navigate(`/admin/providers/${provider.id}`);
+          }}
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onSort={handleSort}
+          pagination={{
+            entityName: 'venues'
+          }}
+          emptyState="No providers found"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProvidersTable;