@greatapps/common 1.1.50 → 1.1.52

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -1,22 +1,30 @@
 "use client"
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Plus, Settings, User, Users } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';
 import { Button } from '../ui/buttons/Button';
 import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/overlay/Command';
 import { Checkbox } from '../ui/form/Checkbox';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
 import { cn } from '../../infra/utils/clsx';
-import { useProjectUsers } from '../../modules/projects/hooks/project-users.hook';
+import { useListProjectUsers, LIST_PROJECT_USERS_BASE_KEY } from '../../modules/projects/hooks/list-project-users.hook';
+import { useListAvailableUsers, LIST_AVAILABLE_USERS_BASE_KEY } from '../../modules/projects/hooks/list-available-users.hook';
+import { addProjectUserAction } from '../../modules/projects/actions/add-project-user.action';
+import { removeProjectUserAction } from '../../modules/projects/actions/remove-project-user.action';
 
-export interface UserSelectorItem {
-  id: number;
-  name: string;
-  avatar: string;
-  checked: boolean;
+const DEFAULT_AVATAR = '/images/Logomark.png';
+
+export interface UsersSelectorPopoverProps {
+  projectId?: number;
+  addRoute?: string;
+  manageRoute?: string;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  align?: 'start' | 'center' | 'end';
+  contentClassName?: string;
 }
 
 function UserItemSkeleton() {
@@ -31,50 +39,94 @@ function UserItemSkeleton() {
   );
 }
 
-export interface UsersSelectorPopoverProps {
-  projectId?: number;
-  users?: UserSelectorItem[];
-  onToggleUser?: (id: number) => void;
-  addRoute?: string;
-  manageRoute?: string;
-  userCount?: number;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  align?: 'start' | 'center' | 'end';
-  contentClassName?: string;
-}
-
-interface ContentProps {
-  users: UserSelectorItem[];
-  isLoading: boolean;
-  userCount: number;
-  toggleUser: (id: number) => void;
-  addRoute: string;
-  manageRoute: string;
-  side?: UsersSelectorPopoverProps['side'];
-  align?: UsersSelectorPopoverProps['align'];
-  contentClassName?: string;
-}
-
-function UsersSelectorPopoverContent({
-  users,
-  isLoading,
-  userCount,
-  toggleUser,
-  addRoute,
-  manageRoute,
+export function UsersSelectorPopover({
+  projectId,
+  addRoute = '/my-teams?createNew=true',
+  manageRoute = '/my-teams',
   side,
   align,
   contentClassName,
-}: ContentProps) {
-  const route = useRouter();
+}: UsersSelectorPopoverProps) {
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState<number | null>(null);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+
+  const id = projectId ?? 0;
+
+  useEffect(() => {
+    const timer = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
+  const projectUsers = useListProjectUsers(id, search);
+  const availableUsers = useListAvailableUsers(id, search);
+
+  const inProject = projectUsers.data?.pages.flatMap((p) => p.data) ?? [];
+  const notInProject = availableUsers.data?.pages.flatMap((p) => p.data) ?? [];
+  const isLoading = projectUsers.isLoading || availableUsers.isLoading;
+  const isFetchingMore = projectUsers.isFetchingNextPage || availableUsers.isFetchingNextPage;
+  const totalInProject = projectUsers.data?.pages[0]?.total ?? inProject.length;
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(id) });
+    queryClient.invalidateQueries({ queryKey: LIST_AVAILABLE_USERS_BASE_KEY(id) });
+  };
+
+  const addMutation = useMutation({
+    mutationFn: (userId: number) => addProjectUserAction({ projectId: id, users: [userId] }),
+    onSuccess: invalidate,
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (userId: number) => removeProjectUserAction({ projectId: id, users: [userId] }),
+    onSuccess: invalidate,
+  });
+
+  const allUsers = [
+    ...inProject.map((u) => ({
+      id: u.id_user,
+      name: u.name,
+      avatar: u.photo ?? DEFAULT_AVATAR,
+      checked: true as const,
+      removable: u.profile !== 'owner' && u.profile !== 'admin',
+    })),
+    ...notInProject.map((u) => ({
+      id: u.id,
+      name: u.name,
+      avatar: u.photo ?? DEFAULT_AVATAR,
+      checked: false as const,
+      removable: true,
+    })),
+  ];
+
+  const toggleUser = (id: number, checked: boolean, removable: boolean) => {
+    if (checked) {
+      if (!removable) return;
+      removeMutation.mutate(id);
+    } else {
+      addMutation.mutate(id);
+    }
+  };
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
+    if (!nearBottom) return;
+    if (projectUsers.hasNextPage && !projectUsers.isFetchingNextPage) {
+      projectUsers.fetchNextPage();
+    } else if (availableUsers.hasNextPage && !availableUsers.isFetchingNextPage) {
+      availableUsers.fetchNextPage();
+    }
+  };
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger className="cursor-pointer">
         <div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
-          <span className="paragraph-small-semibold">{userCount}</span>
+          <span className="paragraph-small-semibold">{totalInProject}</span>
           <User size={16} />
         </div>
       </PopoverTrigger>
@@ -95,7 +147,7 @@ function UsersSelectorPopoverContent({
               <Button
                 variant="secondary"
                 className="h-8 paragraph-small-semibold text-gray-950"
-                onClick={() => route.push(addRoute)}
+                onClick={() => router.push(addRoute)}
               >
                 <Plus size={16} />
                 Adicionar
@@ -105,7 +157,7 @@ function UsersSelectorPopoverContent({
                   <Button
                     variant="secondary"
                     className="p-0 size-8"
-                    onClick={() => route.push(manageRoute)}
+                    onClick={() => router.push(manageRoute)}
                   >
                     <Settings size={18} />
                   </Button>
@@ -115,16 +167,23 @@ function UsersSelectorPopoverContent({
             </div>
           </div>
 
-          <Command className="gap-2" value="">
-            <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
+          <Command shouldFilter={false} className="gap-2" value="">
+            <CommandInput
+              placeholder="Busque aqui"
+              value={searchInput}
+              onValueChange={setSearchInput}
+            />
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]"
+              onScroll={handleScroll}
+            >
               {isLoading ? (
                 <>
                   <UserItemSkeleton />
                   <UserItemSkeleton />
                   <UserItemSkeleton />
                 </>
-              ) : users.length === 0 ? (
+              ) : allUsers.length === 0 ? (
                 <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
                   <Users size={28} className="text-gray-300" />
                   <span className="paragraph-small-medium text-center text-gray-500">
@@ -136,7 +195,7 @@ function UsersSelectorPopoverContent({
               ) : (
                 <>
                   <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-                  {users.map((user) => (
+                  {allUsers.map((user) => (
                     <CommandItem
                       key={user.id}
                       value={user.name}
@@ -145,8 +204,8 @@ function UsersSelectorPopoverContent({
                       onPointerLeave={() => setHoveredId(null)}
                       onFocus={() => setHoveredId(user.id)}
                       onBlur={() => setHoveredId(null)}
-                      onSelect={() => toggleUser(user.id)}
-                      className="cursor-pointer"
+                      onSelect={() => toggleUser(user.id, user.checked, user.removable)}
+                      className={user.removable ? 'cursor-pointer' : 'cursor-default'}
                     >
                       <div className="flex items-center justify-between w-full">
                         <div className="flex items-center gap-2">
@@ -159,15 +218,16 @@ function UsersSelectorPopoverContent({
                           />
                           {user.name}
                         </div>
-                        <Tooltip open={hoveredId === user.id}>
+                        <Tooltip open={user.removable && hoveredId === user.id}>
                           <TooltipTrigger
                             onClick={(e) => e.stopPropagation()}
                             onPointerDown={(e) => e.stopPropagation()}
                           >
                             <Checkbox
                               checked={user.checked}
-                              onCheckedChange={() => toggleUser(user.id)}
-                              className={hoveredId === user.id ? 'border-gray-950' : ''}
+                              disabled={!user.removable}
+                              onCheckedChange={() => toggleUser(user.id, user.checked, user.removable)}
+                              className={user.removable && hoveredId === user.id ? 'border-gray-950' : ''}
                             />
                           </TooltipTrigger>
                           <TooltipContent>
@@ -177,6 +237,12 @@ function UsersSelectorPopoverContent({
                       </div>
                     </CommandItem>
                   ))}
+                  {isFetchingMore && (
+                    <>
+                      <UserItemSkeleton />
+                      <UserItemSkeleton />
+                    </>
+                  )}
                 </>
               )}
             </CommandList>
@@ -186,76 +252,3 @@ function UsersSelectorPopoverContent({
     </Popover>
   );
 }
-
-function ConnectedUsersSelectorPopover({
-  projectId,
-  addRoute,
-  manageRoute,
-  side,
-  align,
-  contentClassName,
-}: Required<Pick<UsersSelectorPopoverProps, 'projectId'>> &
-  Pick<UsersSelectorPopoverProps, 'addRoute' | 'manageRoute' | 'side' | 'align' | 'contentClassName'>) {
-  const { users, isLoading, userCount, toggleUser } = useProjectUsers(projectId);
-  return (
-    <UsersSelectorPopoverContent
-      users={users}
-      isLoading={isLoading}
-      userCount={userCount}
-      toggleUser={toggleUser}
-      addRoute={addRoute ?? '/my-teams?createNew=true'}
-      manageRoute={manageRoute ?? '/my-teams'}
-      side={side}
-      align={align}
-      contentClassName={contentClassName}
-    />
-  );
-}
-
-function StaticUsersSelectorPopover({
-  users: externalUsers = [],
-  onToggleUser,
-  userCount = 5,
-  addRoute = '/my-teams?createNew=true',
-  manageRoute = '/my-teams',
-  side,
-  align,
-  contentClassName,
-}: Omit<UsersSelectorPopoverProps, 'projectId'>) {
-  const [internalUsers, setInternalUsers] = useState<UserSelectorItem[]>(externalUsers);
-
-  const users = externalUsers.length > 0 ? externalUsers : internalUsers;
-
-  const toggleUser = (id: number) => {
-    if (onToggleUser) {
-      onToggleUser(id);
-    } else {
-      setInternalUsers((prev) =>
-        prev.map((u) => (u.id === id ? { ...u, checked: !u.checked } : u))
-      );
-    }
-  };
-
-  return (
-    <UsersSelectorPopoverContent
-      users={users}
-      isLoading={false}
-      userCount={userCount}
-      toggleUser={toggleUser}
-      addRoute={addRoute}
-      manageRoute={manageRoute}
-      side={side}
-      align={align}
-      contentClassName={contentClassName}
-    />
-  );
-}
-
-function UsersSelectorPopover(props: UsersSelectorPopoverProps) {
-  if (props.projectId != null) {
-    return <ConnectedUsersSelectorPopover {...props} projectId={props.projectId} />;
-  }
-  return <StaticUsersSelectorPopover {...props} />;
-}
-
-export { UsersSelectorPopover };

package/src/index.ts

@@ -10,9 +10,10 @@ export * from './providers/auth.provider';
 export * from './providers/whitelabel.provider';
 
 // Hooks
-export { useProjectUsers, projectUsersQueryKey } from './modules/projects/hooks/project-users.hook';
-export type { ProjectUser, AccountUser, AddRemoveProjectUsersParams } from './modules/projects/types';
-export { useUserQuery, useUserValidateSession, useInvalidateUser, useSetUserData, USER_QUERY_KEY } from './modules/auth/hooks/useUserQuery';
+export { useListProjectUsers, LIST_PROJECT_USERS_QUERY_KEY, LIST_PROJECT_USERS_BASE_KEY } from './modules/projects/hooks/list-project-users.hook';
+export { useListAvailableUsers, LIST_AVAILABLE_USERS_QUERY_KEY, LIST_AVAILABLE_USERS_BASE_KEY } from './modules/projects/hooks/list-available-users.hook';
+export type { ProjectUser, AccountUser, AddRemoveProjectUsersParams, ListUsersParams, UsersPage } from './modules/projects/types';
+export { useUserQuery, useUserValidateSession, useInvalidateUser, useSetUserData, useTwoFactorVerify, useTwoFactorPending, USER_QUERY_KEY } from './modules/auth/hooks/useUserQuery';
 export { useSubscriptions, SUBSCRIPTIONS_QUERY_KEY } from './modules/subscriptions/hooks/list-subscriptions.hook';
 export { useActiveSubscription } from './modules/subscriptions/hooks/find-active-subscription.hook';
 export { useIaCredits } from './modules/ia-credits/hooks/ia-credits.hook';
@@ -51,7 +52,7 @@ export type { NotificationItemProps } from './components/layouts/NotificationIte
 export { NotificationsPopover } from './components/layouts/NotificationsPopover';
 export type { NotificationsPopoverProps, NotificationData } from './components/layouts/NotificationsPopover';
 export { UsersSelectorPopover } from './components/layouts/UsersSelectorPopover';
-export type { UsersSelectorPopoverProps, UserSelectorItem } from './components/layouts/UsersSelectorPopover';
+export type { UsersSelectorPopoverProps } from './components/layouts/UsersSelectorPopover';
 export { ProfilePopover } from './components/layouts/ProfilePopover';
 export type { ProfilePopoverProps, ProfileMenuItem } from './components/layouts/ProfilePopover';
 export { NavBarItem } from './components/layouts/NavBarItem';

package/src/modules/auth/actions/is-two-factor-pending.action.ts

@@ -0,0 +1,7 @@
+'use server';
+
+import { authService } from '../services/auth.service';
+
+export async function isTwoFactorPendingAction(): Promise<boolean> {
+  return authService.isTwoFactorPending();
+}

package/src/modules/auth/actions/verify-two-factor.action.ts

@@ -0,0 +1,15 @@
+'use server';
+
+import { authService } from '../services/auth.service';
+import { ApiError } from '../../../infra/api/types';
+import { getClientInfoFromRequest } from '../../../infra/utils/client-info';
+
+export async function verifyTwoFactorAction(code: number): Promise<{ success: boolean }> {
+  if (!Number.isInteger(code) || code < 0 || code > 999999) {
+    throw new ApiError('Código inválido', 'INVALID_CODE', 400);
+  }
+
+  const clientInfo = await getClientInfoFromRequest();
+  await authService.verifyTwoFactor(code, clientInfo);
+  return { success: true };
+}

package/src/modules/auth/hooks/useUserQuery.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query';
 import { User } from '../../users/schema';
 
 export const USER_QUERY_KEY = ['user'];
@@ -38,6 +38,33 @@ export function useUserValidateSession(options?: UseQueryOptions) {
   });
 }
 
+export function useTwoFactorVerify() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (code: number) => {
+      const { verifyTwoFactorAction } = await import('../actions/verify-two-factor.action');
+      return verifyTwoFactorAction(code);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+      queryClient.invalidateQueries({ queryKey: ['two-factor-pending'] });
+    },
+  });
+}
+
+export function useTwoFactorPending() {
+  return useQuery({
+    queryKey: ['two-factor-pending'],
+    queryFn: async () => {
+      const { isTwoFactorPendingAction } = await import('../actions/is-two-factor-pending.action');
+      return isTwoFactorPendingAction();
+    },
+    staleTime: 10 * 1000,
+    retry: false,
+  });
+}
+
 export function useInvalidateUser() {
   const queryClient = useQueryClient();
   return () => queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });

package/src/modules/auth/schema.ts

@@ -15,6 +15,29 @@ export interface LoginApiResponse {
   two_factor_authentication?: boolean;
 }
 
+export type LoginResponse =
+  | { twoFactorRequired: true }
+  | { twoFactorRequired?: false; user: User; accessToken: string; refreshToken: string; expiresAt: string };
+
+export interface TwoFactorRequest {
+  location: GeoLocation;
+  ip: string;
+  timezone: string;
+  agent: string;
+  cookie: string;
+  code: number;
+}
+
+export interface TwoFactorApiResponse {
+  status: 0 | 1;
+  message: string;
+  cookie?: string;
+}
+
+export interface TwoFactorResponse {
+  success: boolean;
+}
+
 export interface GeoLocation {
   continent: string;
   country: string;
@@ -37,13 +60,6 @@ export interface LoginRequest {
   rememberMe?: boolean;
 }
 
-export interface LoginResponse {
-  user: User;
-  accessToken: string;
-  refreshToken: string;
-  expiresAt: string;
-}
-
 export interface RegisterRequest {
   accountName: string;
   businessType: number;

package/src/modules/auth/services/auth.service.ts

@@ -25,34 +25,34 @@ import {
   ResetPasswordResponse,
   SessionKeepRequest,
   SessionKeepResponse,
+  TwoFactorApiResponse,
+  TwoFactorRequest,
+  TwoFactorResponse,
   VerifyEmailRequest,
   VerifyEmailResponse,
 } from '../schema';
 
 const AUTH_COOKIE_NAME = 'greatapps';
+const PENDING_2FA_COOKIE_NAME = 'greatapps_2fa_pending';
 const COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
+const PENDING_2FA_MAX_AGE = 60 * 10; // 10 minutos para completar o 2FA
+
+const COOKIE_OPTIONS = {
+  httpOnly: true,
+  secure: process.env.NODE_ENV === 'production',
+  sameSite: 'lax' as const,
+  path: '/',
+  domain: process.env.DOMAIN_COOKIE,
+};
 
 async function setAuthCookie(token: string): Promise<void> {
   const cookieStore = await cookies();
-  cookieStore.set(AUTH_COOKIE_NAME, token, {
-    httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    sameSite: 'lax',
-    maxAge: COOKIE_MAX_AGE,
-    path: '/',
-    domain: process.env.DOMAIN_COOKIE
-  });
+  cookieStore.set(AUTH_COOKIE_NAME, token, { ...COOKIE_OPTIONS, maxAge: COOKIE_MAX_AGE });
 }
 
 async function removeAuthCookie(): Promise<void> {
   const cookieStore = await cookies();
-  cookieStore.delete({
-    name: AUTH_COOKIE_NAME,
-    path: "/",
-    secure: process.env.NODE_ENV === 'production',
-    sameSite: 'lax',
-    domain: process.env.DOMAIN_COOKIE,
-  });
+  cookieStore.delete({ name: AUTH_COOKIE_NAME, ...COOKIE_OPTIONS });
 }
 
 async function getAuthCookie(): Promise<string | undefined> {
@@ -61,6 +61,21 @@ async function getAuthCookie(): Promise<string | undefined> {
   return cookieStore.get(AUTH_COOKIE_NAME)?.value;
 }
 
+async function setPending2FACookie(token: string): Promise<void> {
+  const cookieStore = await cookies();
+  cookieStore.set(PENDING_2FA_COOKIE_NAME, token, { ...COOKIE_OPTIONS, maxAge: PENDING_2FA_MAX_AGE });
+}
+
+async function removePending2FACookie(): Promise<void> {
+  const cookieStore = await cookies();
+  cookieStore.delete({ name: PENDING_2FA_COOKIE_NAME, ...COOKIE_OPTIONS });
+}
+
+async function getPending2FACookie(): Promise<string | undefined> {
+  const cookieStore = await cookies();
+  return cookieStore.get(PENDING_2FA_COOKIE_NAME)?.value;
+}
+
 class AuthService {
   async login(credentials: LoginRequest, clientInfo: ClientInfo): Promise<LoginResponse> {
     const response = await apiClient.post<LoginApiResponse>('/auth/login', {
@@ -80,17 +95,59 @@ class AuthService {
       throw new ApiError('Resposta de autenticação inválida', 'INVALID_RESPONSE', 500);
     }
 
+    if (response.two_factor_authentication) {
+      // Armazena o cookie temporariamente até o 2FA ser concluído.
+      // O cookie principal NÃO é setado aqui para evitar falso positivo em isAuthenticated().
+      await setPending2FACookie(response.cookie);
+      return { twoFactorRequired: true };
+    }
+
     await setAuthCookie(response.cookie);
 
-    // O usuário completo será carregado pelo AuthProvider via getUserDataAction
     return {
-      user: {} as User, // Placeholder, será preenchido pelo AuthProvider
+      user: {} as User,
       accessToken: response.cookie,
       refreshToken: '',
       expiresAt: new Date(Date.now() + COOKIE_MAX_AGE * 1000).toISOString(),
     };
   }
 
+  async verifyTwoFactor(code: number, clientInfo: ClientInfo): Promise<TwoFactorResponse> {
+    const pendingCookie = await getPending2FACookie();
+
+    if (!pendingCookie) {
+      throw new ApiError('Nenhuma autenticação 2FA pendente', 'NO_PENDING_2FA', 400);
+    }
+
+    const payload: TwoFactorRequest = {
+      location: clientInfo.location,
+      ip: clientInfo.ip,
+      timezone: clientInfo.timezone,
+      agent: clientInfo.agent,
+      cookie: pendingCookie,
+      code,
+    };
+
+    const response = await apiClient.post<TwoFactorApiResponse>('/auth/code', payload);
+
+    if (response.status === 0) {
+      throw new ApiError(response.message || 'Código 2FA inválido', 'TWO_FACTOR_FAILED', 401);
+    }
+
+    if (!response.cookie) {
+      throw new ApiError('Resposta de autenticação inválida após 2FA', 'INVALID_RESPONSE', 500);
+    }
+
+    await Promise.all([setAuthCookie(response.cookie), removePending2FACookie()]);
+
+    return { success: true };
+  }
+
+  async isTwoFactorPending(): Promise<boolean> {
+    const pending = await getPending2FACookie();
+    return !!pending;
+  }
+
   async register(data: RegisterRequest): Promise<RegisterResponse> {
     const today = new Date();
     const trialEndDate = new Date(today);
@@ -170,8 +227,7 @@ class AuthService {
         throw new ApiError(response.message || 'Erro ao realizar logout', 'LOGOUT_FAILED', 400);
       }
     } finally {
-      console.log('[AuthService] Logout - removendo cookie localmente');
-      await removeAuthCookie();
+      await Promise.all([removeAuthCookie(), removePending2FACookie()]);
     }
 
     return {

package/src/modules/projects/actions/list-available-users.action.ts

@@ -1,8 +1,8 @@
 'use server';
 
 import { projectUsersService } from '../services/project-users.service';
-import type { AccountUser } from '../types';
+import type { AccountUser, ListUsersParams, UsersPage } from '../types';
 
-export async function listAvailableUsersAction(id_project: number): Promise<AccountUser[]> {
-  return projectUsersService.listNotInProject(id_project);
+export async function listAvailableUsersAction(projectId: number, params: ListUsersParams = {}): Promise<UsersPage<AccountUser>> {
+  return projectUsersService.listNotInProject(projectId, params);
 }

package/src/modules/projects/actions/list-project-users.action.ts

@@ -1,8 +1,8 @@
 'use server';
 
 import { projectUsersService } from '../services/project-users.service';
-import type { ProjectUser } from '../types';
+import type { ListUsersParams, ProjectUser, UsersPage } from '../types';
 
-export async function listProjectUsersAction(id_project: number): Promise<ProjectUser[]> {
-  return projectUsersService.listInProject(id_project);
+export async function listProjectUsersAction(projectId: number, params: ListUsersParams = {}): Promise<UsersPage<ProjectUser>> {
+  return projectUsersService.listInProject(projectId, params);
 }

package/src/modules/projects/hooks/list-available-users.hook.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { listAvailableUsersAction } from '../actions/list-available-users.action';
+
+const PAGE_SIZE = 20;
+
+export const LIST_AVAILABLE_USERS_BASE_KEY = (projectId: number) => ['project-users', projectId, 'out'];
+export const LIST_AVAILABLE_USERS_QUERY_KEY = (projectId: number, search: string = '') => [
+  ...LIST_AVAILABLE_USERS_BASE_KEY(projectId),
+  search,
+];
+
+export function useListAvailableUsers(projectId: number, search: string = '') {
+  return useInfiniteQuery({
+    queryKey: LIST_AVAILABLE_USERS_QUERY_KEY(projectId, search),
+    queryFn: ({ pageParam }) =>
+      listAvailableUsersAction(projectId, { search: search || undefined, page: pageParam as number, limit: PAGE_SIZE }),
+    getNextPageParam: (lastPage, allPages) => {
+      const loaded = allPages.reduce((sum, p) => sum + p.data.length, 0);
+      return loaded < lastPage.total ? allPages.length + 1 : undefined;
+    },
+    initialPageParam: 1,
+    enabled: !!projectId,
+  });
+}