Busca por nome com destaque e navegação para página

frontend/src/App.jsx

@@ -12,6 +12,9 @@ function App() {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(50);
   const [totalPages, setTotalPages] = useState(0);
+  const [highlightId, setHighlightId] = useState(null);
+  const [busca, setBusca] = useState('');
+  const [buscando, setBuscando] = useState(false);
 
   useEffect(() => {
     loadRanking();
@@ -34,6 +37,27 @@ function App() {
     }
   };
 
+  const handleBuscar = async () => {
+    if (busca.trim().length < 3) return;
+    try {
+      setBuscando(true);
+      const resultados = await rankingService.searchConsultor(busca.trim(), 5);
+      if (resultados && resultados.length > 0) {
+        const alvo = resultados[0];
+        const pos = alvo.posicao || 1;
+        const pagina = Math.ceil(pos / pageSize);
+        setHighlightId(alvo.id_pessoa);
+        setPage(pagina);
+      } else {
+        alert('Nenhum consultor encontrado.');
+      }
+    } catch (err) {
+      alert('Erro ao buscar consultor.');
+    } finally {
+      setBuscando(false);
+    }
+  };
+
   if (loading) {
     return (
       <div className="container">
@@ -70,6 +94,18 @@ function App() {
           </select>
         </label>
 
+        <div className="search-box">
+          <input
+            type="text"
+            placeholder="Digite o nome para localizar"
+            value={busca}
+            onChange={(e) => setBusca(e.target.value)}
+          />
+          <button onClick={handleBuscar} disabled={buscando || busca.length < 3}>
+            {buscando ? 'Buscando...' : 'Buscar'}
+          </button>
+        </div>
+
         <div className="pagination">
           <button onClick={() => setPage(1)} disabled={page <= 1}>« Primeira</button>
           <button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>‹ Anterior</button>
@@ -83,7 +119,11 @@ function App() {
 
       <div className="ranking-list">
         {consultores.map((consultor) => (
-          <ConsultorCard key={consultor.id_pessoa} consultor={consultor} />
+          <ConsultorCard
+            key={consultor.id_pessoa}
+            consultor={consultor}
+            highlight={consultor.id_pessoa === highlightId}
+          />
         ))}
       </div>