From a97a515517fb419f9d3a111c79c866cc93ee2d2c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 11 Nov 2025 18:26:58 +0000
Subject: [PATCH] =?UTF-8?q?Adicionar=20pagina=C3=A7=C3=A3o=20em=20listagem?=
 =?UTF-8?q?=20de=20agentes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementa controle de paginação na tela de Agents:
- adiciona estado itemsPerPage com valor default 9
- integra seletor de itens por página
- utiliza componente de paginação existente para Navegação Previous/Next/ellipses
- mantém busca existente funcionando com paginação

Observação: usa componente Select para escolher a quantidade por página e ajusta paginação ao mudar valor.
---
 src/pages/Agents.tsx | 44 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/pages/Agents.tsx b/src/pages/Agents.tsx
index 65797eb..b238d42 100644
--- a/src/pages/Agents.tsx
+++ b/src/pages/Agents.tsx
@@ -15,13 +15,20 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import { Plus, Search, Bot, ChevronRight } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function Agents() {
   const navigate = useNavigate();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 9;
+  const [itemsPerPage, setItemsPerPage] = useState(9);
 
   const [agents] = useState([
     {
@@ -91,15 +98,38 @@ export default function Agents() {
             className="pl-10"
           />
         </div>
-        <div className="flex items-center justify-between mt-2">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mt-2">
           <p className="text-sm text-muted-foreground">
             {filteredAgents.length} {filteredAgents.length === 1 ? 'agente encontrado' : 'agentes encontrados'}
           </p>
-          {totalPages > 1 && (
-            <p className="text-sm text-muted-foreground">
-              Página {currentPage} de {totalPages}
-            </p>
-          )}
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground whitespace-nowrap">Itens por página:</span>
+              <Select 
+                value={itemsPerPage.toString()} 
+                onValueChange={(value) => {
+                  setItemsPerPage(Number(value));
+                  setCurrentPage(1);
+                }}
+              >
+                <SelectTrigger className="w-[70px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="6">6</SelectItem>
+                  <SelectItem value="9">9</SelectItem>
+                  <SelectItem value="12">12</SelectItem>
+                  <SelectItem value="18">18</SelectItem>
+                  <SelectItem value="24">24</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {totalPages > 1 && (
+              <p className="text-sm text-muted-foreground">
+                Página {currentPage} de {totalPages}
+              </p>
+            )}
+          </div>
         </div>
       </div>