Function TeamManagement

web/src/components/organization/team-management.tsx:77–1119

({
  organizationId,
  userRole,
  noCardWrapper,
}: TeamManagementProps)

}

export function TeamManagement({
  organizationId,
  userRole,
  noCardWrapper,
}: TeamManagementProps) {
  const [members, setMembers] = useState<Member[]>([])
  const [invitations, setInvitations] = useState<Invitation[]>([])
  const [loading, setLoading] = useState(true)
  const [hasInitiallyLoaded, setHasInitiallyLoaded] = useState(false)
  const [inviteDialogOpen, setInviteDialogOpen] = useState(false)
  const [bulkInviteDialogOpen, setBulkInviteDialogOpen] = useState(false)
  const [inviteForm, setInviteForm] = useState({
    email: '',
    role: 'member' as 'admin' | 'member',
  })
  const [bulkInviteForm, setBulkInviteForm] = useState({
    emails: '',
    role: 'member' as 'admin' | 'member',
  })
  const [inviting, setInviting] = useState(false)
  const [bulkInviting, setBulkInviting] = useState(false)
  const [resendingInvites, setResendingInvites] = useState<Set<string>>(
    new Set(),
  )
  const [_refreshing, setRefreshing] = useState(false)
  const [confirmResendDialogOpen, setConfirmResendDialogOpen] = useState(false)
  const [currentInvitationToResend, setCurrentInvitationToResend] =
    useState<Invitation | null>(null)
  const [confirmCancelDialogOpen, setConfirmCancelDialogOpen] = useState(false)
  const [currentInvitationToCancel, setCurrentInvitationToCancel] =
    useState<Invitation | null>(null)
  const [confirmRemoveDialogOpen, setConfirmRemoveDialogOpen] = useState(false)
  const [currentMemberToRemove, setCurrentMemberToRemove] = useState<{
    userId: string
    name: string
  } | null>(null)

  const canManageTeam = userRole === 'owner' || userRole === 'admin'
  const isMobile = useIsMobile()
  const hasMountedRef = useRef(false)
  const searchParams = useSearchParams() ?? new URLSearchParams()

  // Auto-open invite dialog if invite=true query param is present
  useEffect(() => {
    if (searchParams.get('invite') === 'true' && canManageTeam) {
      setBulkInviteDialogOpen(true)
    }
  }, [searchParams, canManageTeam])

  useEffect(() => {
    // Only show loading skeleton on initial mount, not on subsequent mounts
    if (!hasMountedRef.current) {
      hasMountedRef.current = true
      fetchTeamData(true) // true = initial load
    } else if (hasInitiallyLoaded) {
      // If we've loaded before, just refresh without showing skeleton
      fetchTeamData(false) // false = refresh load
    }