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

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

@@ -0,0 +1,1023 @@
+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;