merge into development

src/components/Card/Card.css

@@ -21,6 +21,10 @@
 }
 
 .transition.show {
+  display: flex;
+  justify-content: center;
+  width: 40vw;
+  min-width: 340px;
   opacity: 1;
   transform: translateY(0);
 }
@@ -68,4 +72,10 @@
   
   .status-label.inactive {
     background-color: red;
+  }
+
+  .profesores-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
   }

src/components/Card/CardProfesores/CardProfesor.js

@@ -5,7 +5,12 @@ import { useDeleteTeacher } from "../../../services/teacher.services";
 
 const API_URL = process.env.REACT_APP_API_URL;
 
-const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
+const CardProfesor = ({
+  profesor,
+  edificioNombre,
+  permissions,
+  currentPage,
+}) => {
   const [showDialog, setShowDialog] = useState(false);
   const [confirmText, setConfirmText] = useState("");
   const { deleteTeacher } = useDeleteTeacher();
@@ -29,6 +34,7 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
   };
 
   const handleViewProfesor = () => {
+    localStorage.setItem("lastPage", currentPage);
     window.location.href = `${PublicRoutes.DATAPROFESOR}${profesor.id_profesor}`;
   };
 
@@ -40,9 +46,11 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
     <div className="card m-1">
       <div className="image">
         <img
-          src={profesor.fotografia && profesor.fotografia.startsWith("http")
-            ? profesor.fotografia
-            : `${API_URL}/imagenes/${profesor.fotografia}`}
+          src={
+            profesor.fotografia && profesor.fotografia.startsWith("http")
+              ? profesor.fotografia
+              : `${API_URL}/imagenes/${profesor.fotografia}`
+          }
           className="imgProfe"
           alt={profesor.nombre}
           onClick={handleViewProfesor}

src/components/Card/CardProfesores/Filter/FilterProfesor.js

@@ -16,7 +16,7 @@ function FilterProfesor() {
   const categorias = useCategoria();
   const edificios = useEdificio();
   const [filters, setFilters] = useState({});
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(Number(localStorage.getItem("lastPage")) || 1);
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -106,7 +106,12 @@ function FilterProfesor() {
           </form>
         </div>
       </nav>
-      <Mapeo filters={filters} edificios={edificios} currentPage={currentPage} setCurrentPage={setCurrentPage} />
+      <Mapeo
+        filters={filters}
+        edificios={edificios}
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+      />
     </div>
   );
 }

src/components/Card/CardProfesores/Mapeo.js

@@ -29,18 +29,40 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
     ? { profesores: profesoresData, totalPages: totalDataPages }
     : { profesores: profesoresActivesData, totalPages: totalActivePages };
 
+  const [maxPagesToShow, setMaxPagesToShow] = useState(10);
+
+  useEffect(() => {
+    const updateMaxPagesToShow = () => {
+      if (window.innerWidth < 650) {
+        setMaxPagesToShow(5);
+      } else {
+        setMaxPagesToShow(10);
+      }
+    };
+
+    window.addEventListener("resize", updateMaxPagesToShow);
+    updateMaxPagesToShow();
+    return () => window.removeEventListener("resize", updateMaxPagesToShow);
+  }, []);
+
+  useEffect(() => {
+    const storedPage = localStorage.getItem("lastPage");
+    if (storedPage) {
+      localStorage.removeItem("lastPage");
+    }
+  }, [setCurrentPage]);
 
   useEffect(() => {
-    setShownCards([]);
     if (!loadingData && !loadingActives && profesores) {
+      setShownCards([]);
       profesores.forEach((_, index) => {
         setTimeout(() => {
           setShownCards((prev) => [...prev, index]);
         }, index * 120);
       });
     }
-  }, [loadingData, loadingActives, profesores]);
-
+  }, [loadingData, loadingActives, profesores, currentPage]);
+  
   useEffect(() => {
     setTimeout(() => {
       window.scrollTo({ top: 0, behavior: "smooth" });
@@ -76,16 +98,15 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
       setCurrentPage((prevPage) => prevPage + 1);
     }
   };
-
+  
   const handlePrevPage = () => {
     if (currentPage > 1) {
       setCurrentPage((prevPage) => prevPage - 1);
     }
-  };
+  };  
 
   const renderPageNumbers = () => {
     const pageNumbers = [];
-    const maxPagesToShow = 5;
     let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
     let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
 
@@ -133,21 +154,29 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
         </div>
       ) : null}
 
-      {profesores.map((profesor,index) => {
-        const edificio = edificios.find(
-          (e) => e.id_edificio === profesor.id_edificio
-        );
-        const edificioNombre = edificio ? edificio.edificio : "Desconocido";
-        return (
-          <div className={`transition ${shownCards.includes(index) ? "show" : ""}`}>
-          <CardProfesor
-            key={profesor.id_profesor}
-            profesor={profesor}
-            edificioNombre={edificioNombre}
-            permissions={permissions}
-          /></div>
-        );
-      })}
+      <div className="profesores-container">
+        {profesores.map((profesor, index) => {
+          const edificio = edificios.find(
+            (e) => e.id_edificio === profesor.id_edificio
+          );
+          const edificioNombre = edificio ? edificio.edificio : "Desconocido";
+          return (
+            <div
+              key={profesor.id_profesor}
+              className={`card-wrapper transition ${
+                shownCards.includes(index) ? "show" : ""
+              }`}
+            >
+              <CardProfesor
+                profesor={profesor}
+                edificioNombre={edificioNombre}
+                permissions={permissions}
+                currentPage={currentPage}
+              />
+            </div>
+          );
+        })}
+      </div>
 
       <nav aria-label="Page navigation example">
         <ul className="pagination justify-content-center">

src/components/Card/CardUsuarios/MapeoUsuario.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "../../../App.css";
 import CardUsuario from "./CardUsuario";
 import { PrivateRoutes } from "../../../models/routes";
@@ -8,6 +8,25 @@ const MapeoUsuario = ({ filters }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const { usuarios, totalPages } = useUsers(currentPage, filters);
 
+  const [maxPagesToShow, setMaxPagesToShow] = useState(10);
+
+  useEffect(() => {
+    const updateMaxPagesToShow = () => {
+      if (window.innerWidth < 650) {
+        setMaxPagesToShow(5);
+      } else {
+        setMaxPagesToShow(10);
+      }
+    };
+  
+    window.addEventListener("resize", updateMaxPagesToShow);
+  
+    updateMaxPagesToShow();
+  
+    return () => window.removeEventListener("resize", updateMaxPagesToShow);
+  }, []);
+  
+
   if (totalPages === 0) {
     return (
       <div className="perfil-profesor">
@@ -36,7 +55,6 @@ const MapeoUsuario = ({ filters }) => {
 
   const renderPageNumbers = () => {
     const pageNumbers = [];
-    const maxPagesToShow = 5;
     let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
     let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
 

src/components/Header.js

@@ -1,23 +1,17 @@
 import React from "react";
 import "./style.css";
+import logo1 from "../assets/img/escudo-b2.png"; // Ajusta la ruta si es necesario
+import logo2 from "../assets/img/logo_unam-b.png"; // Ajusta la ruta si es necesario
 
 const Header = () => {
   return (
     <header className="header">
       <a href="https://www.unam.mx/">
-        <img
-          className="logo"
-          alt="Logo 1"
-          src="https://www.unam.mx/sites/all/themes/unam/logo.png"
-        />
+        <img className="logo" alt="Logo 1" src={logo1} />
       </a>
       
       <a href="https://www.acatlan.unam.mx/">
-        <img
-          className="logo"
-          alt="Logo 2"
-          src="https://www.acatlan.unam.mx/img/logo_fesa.png"
-        />
+        <img className="logo" alt="Logo 2" src={logo2} />
       </a>
     </header>
   );

src/components/style.css

@@ -4,12 +4,14 @@
   align-items: center;
   background-color: #1e3c70 !important;
   padding: 10px;
+  padding-left: 40px;
+  padding-right: 40px;
   text-align: center;
 }
 
 .logo {
-  width: 300px;
-  max-width: 40vw;
+  width: 50px;
+  max-width: 10vw;
 }
 
 .footer {