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

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

@@ -1,1023 +0,0 @@
-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, HeaderAction } from './tables/types';
-import { BulkActionsBar } from './tables/BulkActionsBar';
-import StatusBadge from './StatusBadge';
-import { supabase } from '@/integrations/supabase/client';
-import LoadingScreen from './LoadingScreen';
-import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from './ui/alert-dialog';
-import { Button } from './ui/button';
-import { formatDistanceToNow } from 'date-fns';
-import DeleteConfirmationDialog from './shared/DeleteConfirmationDialog';
-import { getShortUserId } from '@/lib/userUtils';
-import { useAuth } from '@/contexts/AuthContext';
-import { usePermissions } from '../hooks/usePermissions';
-import { useNotify } from '../hooks/useNotify';
-import NotificationBanner, { Notification } from './NotificationBanner';
-import IconImportUser from '@/assets/Icon_ImportUser.svg';
-import { IconAddUser } from '../../icons';
-
-interface UserRole {
-  user_id: string;
-  role: string;
-  provider_id: string | null;
-  company_id: string | null;
-}
-
-interface User {
-  id: string;
-  full_name: string | null;
-  email: string | null;
-  status: string | null;
-  created_at: string;
-  roles: string[];
-  currentLevelRole: string | null;
-  otherProviderRoleCount: number;
-  avatar_url: string | null;
-  last_seen_at: string | null;
-  user_number: number | null;
-  providers: string[];
-  companies: string[];
-}
-
-export interface UsersTableProps {
-  /** If provided, scopes users to this provider */
-  providerId?: string;
-  /** If provided alongside providerId, also includes company users */
-  companyId?: string | null;
-  /** Navigation prefix for row clicks/actions (e.g. "/company/01/venue/01") */
-  navigatePrefix?: string;
-  /** Custom header actions (overrides default admin actions) */
-  headerActions?: HeaderAction[];
-  /** Whether to show bulk actions (default: true for admin) */
-  showBulkActions?: boolean;
-  /** Whether to show delete row action (default: true for admin) */
-  showDeleteAction?: boolean;
-  /** Whether to show the "Role & Provider" column or just "Role" (default: true) */
-  showProviderColumn?: boolean;
-  /** Filter out super_admin, system_admin, customer roles (default: false) */
-  filterAdminRoles?: boolean;
-}
-
-const UsersTable: React.FC<UsersTableProps> = ({
-  providerId,
-  companyId,
-  navigatePrefix = '/admin',
-  headerActions: customHeaderActions,
-  showBulkActions = true,
-  showDeleteAction = true,
-  showProviderColumn = true,
-  filterAdminRoles = false,
-}) => {
-  const navigate = useNavigate();
-  const { showSuccess, showError } = useNotify();
-  const { user: currentUser } = useAuth();
-  const { hasPermission } = usePermissions();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [users, setUsers] = useState<User[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
-  const [notification, setNotification] = useState<Notification | null>(null);
-  const [sortKey, setSortKey] = useState<string>('name');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
-
-  useEffect(() => {
-    fetchUsers();
-  }, []);
-
-  const fetchUsers = async () => {
-    try {
-      setIsLoading(true);
-
-      let assignedUserIds: string[] | null = null;
-
-      // If scoped to a provider, fetch only assigned user IDs
-      if (providerId) {
-        const { data: userProviderAssignments, error: assignmentsError } = await supabase
-          .from('user_providers')
-          .select('user_id')
-          .eq('provider_id', providerId);
-
-        if (assignmentsError) throw assignmentsError;
-
-        assignedUserIds = userProviderAssignments?.map(up => up.user_id) || [];
-
-        // Also include company users if provider belongs to a company
-        if (companyId) {
-          const { data: companyUserAssignments, error: companyError } = await supabase
-            .from('user_companies')
-            .select('user_id')
-            .eq('company_id', companyId);
-
-          if (companyError) throw companyError;
-
-          const companyUserIds = companyUserAssignments?.map(uc => uc.user_id) || [];
-          assignedUserIds = [...new Set([...assignedUserIds, ...companyUserIds])];
-        }
-
-        if (assignedUserIds.length === 0) {
-          setUsers([]);
-          setIsLoading(false);
-          return;
-        }
-      } else if (companyId) {
-        // Company-only scope: get users from user_companies + all providers under this company
-        const { data: companyUserAssignments, error: companyError } = await supabase
-          .from('user_companies')
-          .select('user_id')
-          .eq('company_id', companyId);
-
-        if (companyError) throw companyError;
-
-        const companyUserIds = companyUserAssignments?.map(uc => uc.user_id) || [];
-
-        // Also get users assigned to any provider under this company
-        const { data: companyProviders, error: cpError } = await supabase
-          .from('providers')
-          .select('id')
-          .eq('company_id', companyId);
-
-        if (cpError) throw cpError;
-
-        const providerIds = companyProviders?.map(p => p.id) || [];
-        let providerUserIds: string[] = [];
-
-        if (providerIds.length > 0) {
-          const { data: providerUserAssignments, error: puError } = await supabase
-            .from('user_providers')
-            .select('user_id')
-            .in('provider_id', providerIds);
-
-          if (puError) throw puError;
-          providerUserIds = providerUserAssignments?.map(up => up.user_id) || [];
-        }
-
-        assignedUserIds = [...new Set([...companyUserIds, ...providerUserIds])];
-
-        if (assignedUserIds.length === 0) {
-          setUsers([]);
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      // Fetch profiles (scoped or all)
-      let profilesQuery = supabase.from('profiles').select('*');
-      if (assignedUserIds) {
-        profilesQuery = profilesQuery.in('id', assignedUserIds);
-      }
-      const { data: profiles, error: profilesError } = await profilesQuery;
-
-      if (profilesError) throw profilesError;
-
-      const userIds = profiles?.map(p => p.id) || [];
-
-      // Fetch user roles with scoping columns
-      let rolesQuery = supabase.from('user_roles').select('user_id, role, provider_id, company_id');
-      if (assignedUserIds) {
-        rolesQuery = rolesQuery.in('user_id', assignedUserIds);
-      }
-      const { data: userRoles, error: rolesError } = await rolesQuery;
-      if (rolesError) throw rolesError;
-
-      // Fetch user provider assignments
-      let providersQuery = supabase.from('user_providers').select('user_id, provider_id');
-      if (assignedUserIds) {
-        providersQuery = providersQuery.in('user_id', assignedUserIds);
-      }
-      const { data: userProviders, error: providersError } = await providersQuery;
-      if (providersError) throw providersError;
-
-      // Fetch all providers
-      const { data: providers, error: allProvidersError } = await supabase
-        .from('providers')
-        .select('id, name');
-      if (allProvidersError) throw allProvidersError;
-
-      // Fetch user company assignments
-      let companiesQuery = supabase.from('user_companies').select('user_id, company_id');
-      if (assignedUserIds) {
-        companiesQuery = companiesQuery.in('user_id', assignedUserIds);
-      }
-      const { data: userCompanies, error: companiesError } = await companiesQuery;
-      if (companiesError) throw companiesError;
-
-      // Fetch all companies
-      const { data: companies, error: allCompaniesError } = await supabase
-        .from('companies')
-        .select('id, name');
-      if (allCompaniesError) throw allCompaniesError;
-
-      // Combine profiles with roles, providers, and companies
-      let usersWithRoles = profiles?.map(profile => {
-        const allRoles = (userRoles as UserRole[] || [])
-          .filter(ur => ur.user_id === profile.id);
-        const roles = allRoles.map(ur => ur.role);
-        
-        // Determine current level role based on context
-        let currentLevelRole: string | null = null;
-        let otherProviderRoleCount = 0;
-
-        if (providerId) {
-          // Provider level: show the role scoped to this provider
-          const providerRole = allRoles.find(r => r.provider_id === providerId);
-          currentLevelRole = providerRole?.role || null;
-          
-          // If user has no provider-scoped role but is in user_providers, they have access but no explicit role
-          if (!currentLevelRole) {
-            // Check if they have a company role (company user viewing provider)
-            const companyRole = companyId ? allRoles.find(r => r.company_id === companyId && !r.provider_id) : null;
-            currentLevelRole = companyRole?.role || 'No Access';
-          }
-        } else if (companyId) {
-          // Company level: show the role scoped to this company
-          const companyRole = allRoles.find(r => r.company_id === companyId && !r.provider_id);
-          currentLevelRole = companyRole?.role || 'No Access';
-          
-          // Count all provider-level roles
-          const providerRoles = allRoles.filter(r => r.provider_id !== null);
-          otherProviderRoleCount = providerRoles.length;
-        } else {
-          // Admin level: show super_admin/system_admin or "Provider User"
-          const hasAdminRole = allRoles.find(r => r.role === 'super_admin' || r.role === 'system_admin');
-          currentLevelRole = hasAdminRole?.role || 'provider_user';
-        }
-        
-        const userProviderIds = userProviders
-          ?.filter(up => up.user_id === profile.id)
-          .map(up => up.provider_id) || [];
-        const providerNames = providers
-          ?.filter(p => userProviderIds.includes(p.id))
-          .map(p => p.name) || [];
-        
-        const userCompanyIds = userCompanies
-          ?.filter(uc => uc.user_id === profile.id)
-          .map(uc => uc.company_id) || [];
-        const companyNames = companies
-          ?.filter(c => userCompanyIds.includes(c.id))
-          .map(c => c.name) || [];
-        
-        return {
-          id: profile.id,
-          full_name: profile.full_name,
-          email: profile.email,
-          status: profile.status,
-          created_at: profile.created_at,
-          roles: roles,
-          currentLevelRole,
-          otherProviderRoleCount,
-          avatar_url: profile.avatar_url,
-          last_seen_at: profile.last_seen_at,
-          user_number: profile.user_number,
-          providers: providerNames,
-          companies: companyNames
-        };
-      }) || [];
-
-      // Filter out admin/system roles if requested
-      if (filterAdminRoles) {
-        usersWithRoles = usersWithRoles.filter(user => 
-          !user.roles.some(role => 
-            role === 'super_admin' || 
-            role === 'system_admin' || 
-            role === 'customer'
-          )
-        );
-      }
-
-      setUsers(usersWithRoles);
-    } catch (error) {
-      console.error('Error fetching users:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortKey(key);
-      setSortDirection('asc');
-    }
-  };
-
-  const filteredUsers = users.filter(user => {
-    const searchLower = searchQuery.toLowerCase();
-    const userIdString = getShortUserId(user.user_number);
-    return (
-      user.full_name?.toLowerCase().includes(searchLower) ||
-      user.email?.toLowerCase().includes(searchLower) ||
-      userIdString.toLowerCase().includes(searchLower) ||
-      user.providers.some(provider => provider.toLowerCase().includes(searchLower)) ||
-      user.companies.some(company => company.toLowerCase().includes(searchLower))
-    );
-  });
-
-  const sortedUsers = [...filteredUsers].sort((a, b) => {
-    let aValue: any;
-    let bValue: any;
-
-    switch (sortKey) {
-      case 'name':
-        aValue = a.full_name?.toLowerCase() || '';
-        bValue = b.full_name?.toLowerCase() || '';
-        break;
-      case 'created':
-        aValue = new Date(a.created_at).getTime();
-        bValue = new Date(b.created_at).getTime();
-        break;
-      case 'last_seen':
-        aValue = a.last_seen_at ? new Date(a.last_seen_at).getTime() : 0;
-        bValue = b.last_seen_at ? new Date(b.last_seen_at).getTime() : 0;
-        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 name, email, ID, company or provider',
-    value: searchQuery,
-    onChange: setSearchQuery,
-    label: 'Search Users'
-  };
-
-  // Auto-cleanup orphaned auth users on mount (one-time, admin only)
-  useEffect(() => {
-    if (providerId) return; // Skip cleanup for provider-scoped views
-    const cleanupOrphanedUsers = async () => {
-      try {
-        const { data: { session } } = await supabase.auth.getSession();
-        if (!session) return; // Skip if not authenticated
-        await supabase.functions.invoke('cleanup-orphaned-users', { body: {} });
-        console.log('Orphaned users cleanup completed');
-      } catch (error) {
-        console.error('Cleanup error:', error);
-      }
-    };
-    cleanupOrphanedUsers();
-  }, [providerId]);
-
-  const defaultActions: HeaderAction[] = [
-    {
-      label: 'Add New User',
-      mobileLabel: 'Add',
-      variant: 'ghost',
-      withIcon: true,
-      icon: <IconAddUser className="fill-current" />,
-      onClick: () => navigate(`${navigatePrefix}/users/add`)
-    },
-    {
-      label: 'Import Users',
-      mobileLabel: 'Import',
-      icon: <img src={IconImportUser} alt="" className="w-5 h-5" />,
-      onClick: () => navigate(`${navigatePrefix}/users/import`),
-      variant: 'outline'
-    }
-  ];
-
-  const actions = customHeaderActions || defaultActions;
-
-  const getInitials = (name: string | null) => {
-    if (!name) return 'U';
-    const parts = name.trim().split(' ');
-    if (parts.length === 1) return parts[0][0].toUpperCase();
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  };
-
-  const getUserIcon = (user: User) => {
-    if (user.avatar_url) {
-      return (
-        <div className="flex w-10 h-10 justify-center items-center rounded-full overflow-hidden flex-shrink-0">
-          <img src={user.avatar_url} alt={user.full_name || 'User'} className="w-full h-full object-cover" />
-        </div>
-      );
-    }
-    
-    const initials = getInitials(user.full_name);
-    
-    return (
-      <div className="w-10 h-10 relative flex items-center justify-center flex-shrink-0 overflow-hidden rounded-full">
-        <svg width="40" height="40" viewBox="0 0 32 32" fill="none" className="absolute">
-          <circle cx="16" cy="16" r="15" className="fill-fill-secondary stroke-fill-secondary" fillOpacity="0.2" strokeWidth="2" />
-        </svg>
-        <div className="text-xs font-extrabold leading-3 text-label-secondary relative">
-          {initials}
-        </div>
-      </div>
-    );
-  };
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-GB', { 
-      day: '2-digit', 
-      month: '2-digit', 
-      year: 'numeric' 
-    });
-  };
-
-  const formatRole = (user: User) => {
-    if (!user.currentLevelRole || user.currentLevelRole === 'No Access') return 'No Access';
-    if (user.currentLevelRole === 'provider_user') return 'Provider User';
-    return user.currentLevelRole.replace(/_/g, ' ');
-  };
-
-  const getCompanyProvider = (roles: string[], providers: string[], companies: string[]) => {
-    // Check if user has System Admin or Super Admin role
-    const hasAdminRole = roles.some(role => 
-      role === 'system_admin' || role === 'super_admin'
-    );
-    
-    if (hasAdminRole) {
-      return 'Booked it';
-    }
-    
-    // Combine companies and providers
-    const allAssignments = [...companies, ...providers];
-    
-    // Handle multiple assignments
-    if (allAssignments.length === 0) return 'Unassigned';
-    if (allAssignments.length === 1) return allAssignments[0];
-    return `${allAssignments[0]} +${allAssignments.length - 1}`;
-  };
-
-  const formatLastSeen = (lastSeenAt: string | null, status: string | null) => {
-    // If user is active and last seen is within 5 minutes, show "Active Now"
-    if (status === 'active' && lastSeenAt) {
-      const lastSeenDate = new Date(lastSeenAt);
-      const now = new Date();
-      const diffMinutes = (now.getTime() - lastSeenDate.getTime()) / (1000 * 60);
-      if (diffMinutes < 5) {
-        return 'Active Now';
-      }
-    }
-    
-    if (!lastSeenAt) return 'N/A';
-    try {
-      // Remove "about" from the output
-      return formatDistanceToNow(new Date(lastSeenAt), { addSuffix: true }).replace('about ', '');
-    } catch {
-      return 'N/A';
-    }
-  };
-
-  const handleDeleteClick = (user: User) => {
-    setSelectedUser(user);
-    setShowDeleteDialog(true);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!selectedUser) return;
-
-    try {
-      // Call edge function to properly delete user from auth.users
-      const { data, error } = await supabase.functions.invoke('delete-user', {
-        body: { userId: selectedUser.id }
-      });
-
-      if (error) throw error;
-      if (data?.error) throw new Error(data.error);
-
-      showSuccess(`User ${selectedUser.full_name || selectedUser.email} deleted successfully`);
-      fetchUsers(); // Refresh the list
-    } catch (error) {
-      console.error('Error deleting user:', error);
-      showError('Failed to delete user', error instanceof Error ? error.message : 'Please try again.');
-    } finally {
-      setShowDeleteDialog(false);
-      setSelectedUser(null);
-    }
-  };
-
-  const handleSuspendToggle = async (user: User) => {
-    const newStatus = user.status === 'active' ? 'suspended' : 'active';
-    
-    try {
-      const { error } = await supabase
-        .from('profiles')
-        .update({ status: newStatus })
-        .eq('id', user.id);
-
-      if (error) throw error;
-
-      fetchUsers(); // Refresh the list
-    } catch (error) {
-      console.error('Error updating user status:', error);
-    }
-  };
-
-
-  const handleResendInvitation = async (user: User) => {
-    try {
-      const { data, error } = await supabase.functions.invoke('resend-invitation', {
-        body: { 
-          userId: user.id
-        }
-      });
-
-      if (error) {
-        showError(`Failed to resend invitation to ${user.email}`, 'Please try again or contact support if the issue persists.');
-        console.error('Error resending invitation:', error);
-        return;
-      }
-
-      showSuccess(`Invitation email sent to ${user.email}`, 'The user will receive an email with instructions to set up their account.');
-      fetchUsers(); // Refresh the table
-    } catch (error) {
-      showError('Unable to send invitation email', 'An unexpected error occurred. Please try again.');
-      console.error('Error resending invitation:', error);
-    }
-  };
-
-  const handleForcePasswordReset = async (user: User) => {
-    try {
-      const { data, error } = await supabase.functions.invoke('force-password-reset', {
-        body: { 
-          userId: user.id
-        }
-      });
-
-      if (error) {
-        showError('Failed to force password reset', 'Please try again or contact support if the issue persists.');
-        console.error('Error forcing password reset:', error);
-        return;
-      }
-
-      showSuccess(`Password reset required for ${user.full_name || user.email}`, 'The user will be required to reset their password on next login.');
-      fetchUsers();
-    } catch (error) {
-      showError('Unable to force password reset', 'An unexpected error occurred. Please try again.');
-      console.error('Error forcing password reset:', error);
-    }
-  };
-
-  const handleResetToSurnamePassword = async (user: User) => {
-    try {
-      const { data, error } = await supabase.functions.invoke('reset-to-surname-password', {
-        body: { 
-          userId: user.id
-        }
-      });
-
-      if (error) {
-        showError('Failed to reset password', 'Please try again or contact support if the issue persists.');
-        console.error('Error resetting password:', error);
-        return;
-      }
-
-      showSuccess(`Password reset to surname for ${user.full_name || user.email}`, `New password: ${data.password}`);
-      fetchUsers();
-    } catch (error) {
-      showError('Unable to reset password', 'An unexpected error occurred. Please try again.');
-      console.error('Error resetting password:', error);
-    }
-  };
-
-  // Bulk action handlers
-  const handleClearSelection = () => {
-    setSelectedUsers([]);
-  };
-
-  const handleBulkResendInvite = async () => {
-    const selectedUserData = users.filter(u => 
-      selectedUsers.includes(u.id) && u.status === 'invited'
-    );
-
-    if (selectedUserData.length === 0) {
-      setNotification({
-        type: 'error',
-        title: 'No Invited Users Selected',
-        message: 'Please select users with "invited" status to resend invitations.'
-      });
-      return;
-    }
-
-    let successCount = 0;
-    let failCount = 0;
-
-    for (const user of selectedUserData) {
-      try {
-        const { error } = await supabase.functions.invoke('resend-invitation', {
-          body: { userId: user.id }
-        });
-
-        if (error) {
-          failCount++;
-        } else {
-          successCount++;
-        }
-      } catch (error) {
-        failCount++;
-      }
-    }
-
-    if (successCount > 0) {
-      setNotification({
-        type: 'success',
-        title: 'Invitations Sent',
-        message: `Successfully resent ${successCount} invitation${successCount > 1 ? 's' : ''}${failCount > 0 ? `. ${failCount} failed.` : '.'}`
-      });
-    } else {
-      setNotification({
-        type: 'error',
-        title: 'Failed to Resend Invitations',
-        message: 'All invitation attempts failed. Please try again.'
-      });
-    }
-
-    setSelectedUsers([]);
-    fetchUsers();
-  };
-
-  const handleBulkSuspend = async () => {
-    // Filter out current user to prevent self-suspension
-    const selectedUserData = users.filter(u => 
-      selectedUsers.includes(u.id) && u.status === 'active' && u.id !== currentUser?.id
-    );
-
-    if (selectedUserData.length === 0) {
-      setNotification({
-        type: 'error',
-        title: 'No Active Users Selected',
-        message: selectedUsers.includes(currentUser?.id || '') 
-          ? 'You cannot suspend your own account. Please select other users with "active" status to suspend.'
-          : 'Please select users with "active" status to suspend.'
-      });
-      return;
-    }
-
-    try {
-      const { error } = await supabase
-        .from('profiles')
-        .update({ status: 'suspended' })
-        .in('id', selectedUserData.map(u => u.id));
-
-      if (error) throw error;
-
-      setNotification({
-        type: 'success',
-        title: 'Users Suspended',
-        message: `Successfully suspended ${selectedUserData.length} user${selectedUserData.length > 1 ? 's' : ''}.`
-      });
-      setSelectedUsers([]);
-      fetchUsers();
-    } catch (error) {
-      console.error('Error suspending users:', error);
-      setNotification({
-        type: 'error',
-        title: 'Failed to Suspend Users',
-        message: 'An error occurred. Please try again.'
-      });
-    }
-  };
-
-  const handleBulkPasswordReset = async () => {
-    if (selectedUsers.length === 0) return;
-
-    let successCount = 0;
-    let failCount = 0;
-
-    for (const userId of selectedUsers) {
-      try {
-        const { error } = await supabase.functions.invoke('force-password-reset', {
-          body: { userId }
-        });
-
-        if (error) {
-          failCount++;
-        } else {
-          successCount++;
-        }
-      } catch (error) {
-        failCount++;
-      }
-    }
-
-    if (successCount > 0) {
-      setNotification({
-        type: 'success',
-        title: 'Password Resets Triggered',
-        message: `Successfully triggered password reset for ${successCount} user${successCount > 1 ? 's' : ''}${failCount > 0 ? `. ${failCount} failed.` : '.'}`
-      });
-    } else {
-      setNotification({
-        type: 'error',
-        title: 'Failed to Trigger Password Resets',
-        message: 'All attempts failed. Please try again.'
-      });
-    }
-
-    setSelectedUsers([]);
-    fetchUsers();
-  };
-
-  const handleBulkDelete = () => {
-    // Filter out current user to prevent self-deletion
-    const filteredUserIds = selectedUsers.filter(id => id !== currentUser?.id);
-    
-    if (filteredUserIds.length === 0) {
-      setNotification({
-        type: 'error',
-        title: 'Cannot Delete Your Own Account',
-        message: 'You cannot delete your own account through bulk actions.'
-      });
-      return;
-    }
-    
-    // Navigate to bulk delete page with selected user IDs
-    navigate(`${navigatePrefix}/users/bulk-delete`, {
-      state: { userIds: filteredUserIds }
-    });
-  };
-
-  const columns: ColumnConfig<User>[] = [
-    {
-      label: 'User',
-      sortKey: 'name',
-      sortable: true,
-      render: (user) => (
-        <div className="flex items-center gap-3 flex-1">
-          {getUserIcon(user)}
-          <div className="flex flex-col justify-center items-start gap-0.5 flex-1 min-w-0 relative">
-            <h3 className="text-label-primary text-sm font-semibold leading-4 truncate w-full">
-              {user.full_name || 'Unnamed User'}
-            </h3>
-            <div className="relative w-full h-4">
-              <p className="text-label-secondary text-xs font-normal leading-4 truncate w-full absolute inset-0 group-hover:opacity-0 transition-opacity">
-                {user.email || 'No email'}
-              </p>
-              <p className="text-label-secondary text-xs font-normal leading-4 truncate w-full absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity">
-                ID: {getShortUserId(user.user_number)}
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    ...(showProviderColumn ? [{
-      label: 'Role',
-      render: (user: User) => (
-        <div className="flex flex-col justify-center items-start gap-0.5">
-          <span className="text-label-primary text-sm font-normal capitalize">
-            {formatRole(user)}
-          </span>
-          {user.otherProviderRoleCount > 0 && (
-            <span className="text-label-secondary text-xs font-normal">
-              {user.otherProviderRoleCount} provider role{user.otherProviderRoleCount > 1 ? 's' : ''}
-            </span>
-          )}
-        </div>
-      ),
-      width: 'w-[180px]'
-    }] : [{
-      label: 'Role',
-      render: (user: User) => (
-        <div className="flex flex-col justify-center items-start gap-0.5">
-          <span className="text-label-primary text-sm font-normal capitalize">
-            {formatRole(user)}
-          </span>
-          {user.otherProviderRoleCount > 0 && (
-            <span className="text-label-secondary text-xs font-normal">
-              {user.otherProviderRoleCount} provider role{user.otherProviderRoleCount > 1 ? 's' : ''}
-            </span>
-          )}
-        </div>
-      ),
-      width: 'w-[180px]'
-    }]),
-    {
-      label: 'Status',
-      render: (user) => (
-        <StatusBadge status={(user.status as 'active' | 'suspended' | 'invited' | 'disabled') || 'invited'} />
-      ),
-      width: 'w-[120px]'
-    },
-    {
-      label: 'Last Seen',
-      sortKey: 'last_seen',
-      sortable: true,
-      render: (user) => (
-        <span className="text-text-secondary">
-          {formatLastSeen(user.last_seen_at, user.status)}
-        </span>
-      ),
-      width: 'w-[140px]'
-    }
-  ];
-
-  const rowActions = (user: User): RowAction<User>[] => {
-    const isCurrentUser = currentUser?.id === user.id;
-    
-    const actions: RowAction<User>[] = [
-      {
-        label: 'View User',
-        onClick: (user) => navigate(`${navigatePrefix}/users/${user.id}`),
-        variant: 'default'
-      },
-      {
-        label: 'Edit User',
-        onClick: (user) => navigate(`${navigatePrefix}/users/${user.id}/edit`),
-        variant: 'default'
-      },
-      {
-        label: 'Configure Permissions',
-        onClick: (user) => navigate(`${navigatePrefix}/users/${user.id}/permissions`),
-        variant: 'default'
-      }
-    ];
-
-    // Don't allow users to suspend or delete their own account
-    if (!isCurrentUser) {
-      // Add Resend Invitation action for invited users with proper permission check
-      if (user.status === 'invited' && hasPermission('user.resend_invitation')) {
-        actions.push({
-          label: 'Resend User Invitation',
-          onClick: handleResendInvitation,
-          variant: 'default'
-        });
-      }
-
-      // Add Force Password Reset action for active users
-      if (user.status === 'active') {
-        actions.push({
-          label: 'Trigger Password Reset',
-          onClick: handleForcePasswordReset,
-          variant: 'default'
-        });
-      }
-
-      // Add Reset to Surname Password action
-      actions.push({
-        label: 'Reset to Surname Password',
-        onClick: handleResetToSurnamePassword,
-        variant: 'default'
-      });
-
-      // Add Suspend/Activate action only for active or suspended users (not invited)
-      if (user.status === 'active' || user.status === 'suspended') {
-        actions.push({
-          label: user.status === 'active' ? 'Suspend User' : 'Activate User',
-          onClick: handleSuspendToggle,
-          variant: 'default'
-        });
-      }
-    }
-
-    return actions;
-  };
-
-  if (isLoading) {
-    return <LoadingScreen message="Loading users..." />;
-  }
-
-  // Get bulk action configuration based on selection
-  const getBulkActions = () => {
-    const selectedUserData = users.filter(u => selectedUsers.includes(u.id));
-    const hasInvited = selectedUserData.some(u => u.status === 'invited');
-    const hasActive = selectedUserData.some(u => u.status === 'active');
-    const hasSuspended = selectedUserData.some(u => u.status === 'suspended');
-
-    const actions = [];
-
-    if (hasInvited && hasPermission('user.resend_invitation')) {
-      actions.push({
-        label: 'Resend Invite',
-        onClick: handleBulkResendInvite,
-      });
-    }
-
-    if (hasActive) {
-      actions.push({
-        label: 'Suspend',
-        onClick: handleBulkSuspend,
-      });
-    }
-
-    if (hasSuspended) {
-      actions.push({
-        label: 'Activate',
-        onClick: async () => {
-          // Filter out current user to prevent self-activation (shouldn't happen but for safety)
-          const suspendedUsers = selectedUserData.filter(u => u.status === 'suspended' && u.id !== currentUser?.id);
-          
-          if (suspendedUsers.length === 0) {
-            setNotification({
-              type: 'error',
-              title: 'No Suspended Users Selected',
-              message: 'Please select users with "suspended" status to activate.'
-            });
-            return;
-          }
-
-          try {
-            const { error } = await supabase
-              .from('profiles')
-              .update({ status: 'active' })
-              .in('id', suspendedUsers.map(u => u.id));
-
-            if (error) throw error;
-
-            setNotification({
-              type: 'success',
-              title: 'Users Activated',
-              message: `Successfully activated ${suspendedUsers.length} user${suspendedUsers.length > 1 ? 's' : ''}.`
-            });
-            setSelectedUsers([]);
-            fetchUsers();
-          } catch (error) {
-            console.error('Error activating users:', error);
-            setNotification({
-              type: 'error',
-              title: 'Failed to Activate Users',
-              message: 'An error occurred. Please try again.'
-            });
-          }
-        },
-      });
-    }
-
-    actions.push({
-      label: 'Trigger Password Reset',
-      onClick: handleBulkPasswordReset,
-    });
-
-    actions.push({
-      label: 'Delete',
-      icon: 'delete' as const,
-      onClick: handleBulkDelete,
-      variant: 'destructive' as const,
-    });
-
-    return actions;
-  };
-
-  return (
-    <>
-      {notification && (
-        <div className="w-full mb-4">
-          <NotificationBanner 
-            notification={notification} 
-            onClose={() => setNotification(null)}
-            showNotificationsLink={false}
-          />
-        </div>
-      )}
-      
-      <div className="flex flex-col gap-6 w-full">
-        <TableControls
-          searchConfig={searchConfig}
-          actions={actions}
-        />
-        {showBulkActions && selectedUsers.length > 0 && (
-          <BulkActionsBar
-            selectedCount={selectedUsers.length}
-            onClearSelection={handleClearSelection}
-            actions={getBulkActions()}
-          />
-        )}
-        <DataTable
-          data={sortedUsers}
-          columns={columns}
-          keyExtractor={(user) => user.id}
-          rowActions={rowActions}
-          onRowClick={(user) => navigate(`${navigatePrefix}/users/${user.id}`)}
-          selectable={showBulkActions}
-          selectedItems={selectedUsers}
-          onSelectionChange={setSelectedUsers}
-          sortKey={sortKey}
-          sortDirection={sortDirection}
-          onSort={handleSort}
-          pagination={{
-            entityName: 'users'
-          }}
-          emptyState={
-            <div className="text-center py-12">
-              <p className="text-label-secondary">No users found</p>
-            </div>
-          }
-        />
-      </div>
-
-      {/* Delete Confirmation Dialog */}
-      <DeleteConfirmationDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        onConfirm={handleDeleteConfirm}
-        title={`Delete ${selectedUser?.full_name || 'User'}?`}
-        itemName={selectedUser?.full_name || 'this user'}
-      />
-    </>
-  );
-};
-
-export default UsersTable;