feat(admin): implement user search functionality in admin portal

apps/frontend/src/features/admin/users-page.tsx

@@ -21,10 +21,11 @@ import {
   LogIn,
   Monitor,
   RefreshCw,
+  Search,
   ShieldAlert,
   Users,
 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 function SessionsDialog({
   user,
@@ -284,10 +285,17 @@ export function UsersPage() {
   const [blockingUser, setBlockingUser] = useState<AdminUser | null>(null);
   const [unblockingUser, setUnblockingUser] = useState<AdminUser | null>(null);
   const [sessionsUser, setSessionsUser] = useState<AdminUser | null>(null);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(timer);
+  }, [searchInput]);
 
   const { data, isLoading } = useQuery({
-    queryKey: ['admin-users'],
-    queryFn: () => apiClient.admin.listUsers(),
+    queryKey: ['admin-users', search],
+    queryFn: () => apiClient.admin.listUsers(search || undefined),
   });
 
   return (
@@ -300,14 +308,25 @@ export function UsersPage() {
           </p>
         </div>
 
-        <Button
-          variant="outline"
-          size="icon"
-          className="rounded-xl"
-          onClick={() => queryClient.invalidateQueries({ queryKey: ['admin-users'] })}
-        >
-          <RefreshCw className="size-4" />
-        </Button>
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              placeholder="Buscar por nombre o email..."
+              className="h-9 w-56 rounded-xl pl-9 text-sm"
+            />
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="rounded-xl"
+            onClick={() => queryClient.invalidateQueries({ queryKey: ['admin-users'] })}
+          >
+            <RefreshCw className="size-4" />
+          </Button>
+        </div>
       </div>
 
       {blockingUser && <BlockDialog user={blockingUser} onClose={() => setBlockingUser(null)} />}