modificacion en paginacion de usuarios

Colours/src/app/prueba/components/componentes-usuarios/Pagination.jsx

@@ -1,3 +1,4 @@
+// Pagination component
 import { ChevronRight } from "lucide-react";
 
 const Pagination = ({ totalPages, currentPage, setCurrentPage }) => {

Colours/src/app/prueba/components/componentes-usuarios/UsersTable.jsx

@@ -1,8 +1,10 @@
+// UsersTable component
 import { Edit, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import Pagination from "./Pagination"; // Asegúrate de que la ruta sea correcta
 
 export default function UsersTable({
-  currentItems,
+  users = [],
   selectedUsers,
   toggleUserSelection,
   toggleSelectAll,
@@ -11,6 +13,13 @@ export default function UsersTable({
   isCurrentUser,
 }) {
   const [activeTab, setActiveTab] = useState("administradores");
+  const [currentPage, setCurrentPage] = useState({
+    administradores: 1,
+    vendedores: 1,
+    graduados: 1,
+  });
+
+  const itemsPerPage = 10;
 
   const roleDisplayMap = {
     admin: "Administrador",
@@ -27,28 +36,51 @@ export default function UsersTable({
   };
 
   // Split users by role
-  const administradores = currentItems.filter(
-    (user) => user.rol.toLowerCase() === "admin"
+  const administradores = users.filter(
+    (user) => user?.rol?.toLowerCase() === "admin"
   );
-  const vendedores = currentItems.filter(
-    (user) => user.rol.toLowerCase() === "vendor"
+  const vendedores = users.filter(
+    (user) => user?.rol?.toLowerCase() === "vendor"
   );
-  const graduados = currentItems.filter(
-    (user) => user.rol.toLowerCase() === "graduado"
+  const graduados = users.filter(
+    (user) => user?.rol?.toLowerCase() === "graduado"
   );
 
-  const renderTable = (users) => (
+  // Get the list for the active tab
+  let roleList = [];
+  if (activeTab === "administradores") roleList = administradores;
+  else if (activeTab === "vendedores") roleList = vendedores;
+  else if (activeTab === "graduados") roleList = graduados;
+
+  const totalPages = Math.ceil(roleList.length / itemsPerPage);
+  const currentItems = roleList.slice(
+    (currentPage[activeTab] - 1) * itemsPerPage,
+    currentPage[activeTab] * itemsPerPage
+  );
+
+  // Efecto para resetear la página actual si es inválida después de cambios en la lista
+  useEffect(() => {
+    const newTotalPages = Math.ceil(roleList.length / itemsPerPage);
+    if (currentPage[activeTab] > newTotalPages) {
+      setCurrentPage((prev) => ({
+        ...prev,
+        [activeTab]: Math.max(1, newTotalPages),
+      }));
+    }
+  }, [roleList.length, activeTab, itemsPerPage]);
+
+  const renderTable = (items) => (
     <table className="min-w-full bg-gray-800 rounded-lg overflow-hidden">
       <thead className="bg-gray-900">
         <tr>
           <th className="w-6 px-2 py-2 text-left">
             <input
               type="checkbox"
               checked={
-                users.length > 0 &&
-                users.every((user) => selectedUsers.includes(user.id))
+                items.length > 0 &&
+                items.every((user) => selectedUsers.includes(user.id))
               }
-              onChange={() => toggleSelectAll(users)}
+              onChange={() => toggleSelectAll(items)}
               className="w-3 h-3 bg-gray-700 border-gray-600 rounded"
               style={{ accentColor: "#BF8D6B" }}
             />
@@ -74,8 +106,8 @@ export default function UsersTable({
         </tr>
       </thead>
       <tbody className="divide-y divide-gray-700">
-        {users.length > 0 ? (
-          users.map((user, index) => {
+        {items.length > 0 ? (
+          items.map((user, index) => {
             const isActive = user.isActive ?? true;
             const userId = user.id || user._id;
 
@@ -219,9 +251,14 @@ export default function UsersTable({
           Graduados ({graduados.length})
         </button>
       </div>
-      {activeTab === "administradores" && renderTable(administradores)}
-      {activeTab === "vendedores" && renderTable(vendedores)}
-      {activeTab === "graduados" && renderTable(graduados)}
+      {renderTable(currentItems)}
+      <Pagination
+        totalPages={totalPages}
+        currentPage={currentPage[activeTab]}
+        setCurrentPage={(page) =>
+          setCurrentPage((prev) => ({ ...prev, [activeTab]: page }))
+        }
+      />
     </div>
   );
 }

Colours/src/app/prueba/usuarios/hook/useUserActions.jsx

@@ -1,3 +1,4 @@
+// useUserActions hook
 import Swal from "sweetalert2";
 
 export const useUserActions = (

Colours/src/app/prueba/usuarios/hook/useUserSelection.jsx

@@ -1,3 +1,4 @@
+// useUserSelection hook
 import { useState } from "react";
 
 export const useUserSelection = () => {

Colours/src/app/prueba/usuarios/hook/useUsers.jsx

@@ -1,3 +1,4 @@
+// useUsers hook
 import { useState, useEffect } from "react";
 
 export const useUsers = (API_URL, filterMode, isClient) => {

Colours/src/app/prueba/usuarios/page.jsx

@@ -1,3 +1,4 @@
+// Usuarios component
 "use client";
 
 import { useState, useEffect, useContext } from "react";
@@ -16,7 +17,6 @@ import FilterButtons from "../components/componentes-usuarios/FilterButtons";
 import ActionButtons from "../components/componentes-usuarios/ActionButtons";
 import UsersTable from "../components/componentes-usuarios/UsersTable";
 import MobileUsersList from "../components/componentes-usuarios/MobileUsersList";
-import Pagination from "../components/componentes-usuarios/Pagination";
 
 // Hooks personalizados
 import { useUsers } from "./hook/useUsers";
@@ -43,7 +43,6 @@ export default function Usuarios() {
   const [busqueda, setBusqueda] = useState("");
   const [expandedUser, setExpandedUser] = useState(null);
   const [showFilters, setShowFilters] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
 
   // Hooks personalizados
   const { usuarios, loading, error, fetchUsuarios } = useUsers(
@@ -97,7 +96,7 @@ export default function Usuarios() {
   };
 
   // Filtrado de usuarios
-  const usuariosFiltrados = usuarios.filter((usuario) => {
+  const usuariosFiltrados = (usuarios || []).filter((usuario) => {
     const searchText = removeAccents(busqueda.toLowerCase());
     const matchesSearch =
       (usuario.usuario &&
@@ -123,13 +122,6 @@ export default function Usuarios() {
     return matchesSearch && matchesStatus;
   });
 
-  const itemsPerPage = 10;
-  const totalPages = Math.ceil(usuariosFiltrados.length / itemsPerPage);
-  const currentItems = usuariosFiltrados.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
-
   if (!isClient) return null;
 
   return (
@@ -159,7 +151,7 @@ export default function Usuarios() {
         <div className="overflow-x-auto">
           <div className="hidden md:block">
             <UsersTable
-              currentItems={currentItems}
+              users={usuariosFiltrados}
               selectedUsers={selectedUsers}
               toggleUserSelection={toggleUserSelection}
               toggleSelectAll={toggleSelectAll}
@@ -171,7 +163,7 @@ export default function Usuarios() {
 
           <div className="md:hidden">
             <MobileUsersList
-              currentItems={currentItems}
+              currentItems={usuariosFiltrados}
               selectedUsers={selectedUsers}
               toggleUserSelection={toggleUserSelection}
               expandedUser={expandedUser}
@@ -188,14 +180,6 @@ export default function Usuarios() {
           </div>
         )}
 
-        {totalPages > 1 && (
-          <Pagination
-            totalPages={totalPages}
-            currentPage={currentPage}
-            setCurrentPage={setCurrentPage}
-          />
-        )}
-
         {showModal && (
           <UsuarioModal
             onClose={() => setShowModal(false)}

Colours/src/app/prueba/usuarios/utils/stringUtils.jsx

@@ -1,3 +1,4 @@
+// removeAccents function
 export const removeAccents = (str) => {
   return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 };