Adiciona paginacao no ranking do frontend

frontend/src/App.jsx

@@ -9,19 +9,23 @@ function App() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [total, setTotal] = useState(0);
-  const [limite, setLimite] = useState(100);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(50);
+  const [totalPages, setTotalPages] = useState(0);
 
   useEffect(() => {
     loadRanking();
-  }, [limite]);
+  }, [page, pageSize]);
 
   const loadRanking = async () => {
     try {
       setLoading(true);
       setError(null);
-      const response = await rankingService.getRanking(limite);
+      const response = await rankingService.getRanking(page, pageSize);
       setConsultores(response.consultores);
       setTotal(response.total);
+      setTotalPages(response.total_pages || 0);
+      setPage(response.page || page);
     } catch (err) {
       console.error('Erro ao carregar ranking:', err);
       setError('Erro ao carregar ranking. Verifique se a API está rodando.');
@@ -57,7 +61,7 @@ function App() {
       <div className="controls">
         <label>
           Limite de consultores:
-          <select value={limite} onChange={(e) => setLimite(Number(e.target.value))}>
+          <select value={pageSize} onChange={(e) => { setPageSize(Number(e.target.value)); setPage(1); }}>
             <option value={10}>Top 10</option>
             <option value={50}>Top 50</option>
             <option value={100}>Top 100</option>
@@ -65,6 +69,16 @@ function App() {
             <option value={500}>Top 500</option>
           </select>
         </label>
+
+        <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>
+          <span className="page-info">
+            Página {page} de {totalPages || '?'}
+          </span>
+          <button onClick={() => setPage((p) => (totalPages ? Math.min(totalPages, p + 1) : p + 1))} disabled={totalPages && page >= totalPages}>Próxima ›</button>
+          <button onClick={() => totalPages && setPage(totalPages)} disabled={totalPages && page >= totalPages}>Última »</button>
+        </div>
       </div>
 
       <div className="ranking-list">