merge

.env

@@ -1,2 +1 @@
 REACT_APP_API_URL=https://venus.acatlan.unam.mx/directorio_test
-REACT_APP_PORT=3001

src/App.css

@@ -31,7 +31,7 @@
 
 .edit-button,
 .delete-boton {
-  padding: 8px 12px;
+  padding: 4px 12px;
   margin-right: 10px;
   border: none;
   cursor: pointer;
@@ -109,6 +109,17 @@
   z-index: 1000;
 }
 
+.container-fluid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 !important;
+}
+
+.form-control {
+  border-color: #002b7a !important;
+}
+
 .form-group {
   margin-bottom: 1em;
 }
@@ -227,6 +238,24 @@ label {
   font-size: 0.9em;
 }
 
+button {
+  width: 100%;
+  padding: 0.6em;
+  font-size: 1em;
+  color: #fff;
+  background-color: #007bff;
+  border: none;
+  border-radius: 12px !important;
+  cursor: pointer;
+  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+button:hover {
+  background-color: #0056b3;
+  box-shadow: 0 6px 12px 4px rgba(0, 0, 0, 0.2);
+}
+
 .main-content {
   flex: 1;
   display: flex;
@@ -286,11 +315,44 @@ input[type="password"] {
   width: 100%;
   box-sizing: border-box;
   border-radius: 5px !important;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1),
+    0 2px 4px 1px rgba(0, 0, 0, 0.1);
   transition: box-shadow 0.3s ease;
 }
 
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+input[type="password"]:focus {
+  box-shadow: 0 0 8px 2px rgba(0, 123, 255, 0.5);
+  outline: none;
+}
+
+button[type="submit"] {
+  width: 100%;
+  padding: 0.75em;
+  border: none;
+  border-radius: 1em;
+  background-color: #002b7a;
+  color: #fff;
+  font-size: 0.9em;
+  cursor: pointer;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+button[type="submit"]:hover {
+  background-color: #0056b3;
+  box-shadow: 0 6px 12px 4px rgba(0, 0, 0, 0.2);
+}
+
+button[type="submit"]:disabled {
+  background-color: #007bff;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .delete-botones {
-  background-image: url("https://cdn.icon-icons.com/icons2/1791/PNG/512/trashcan1_114647.png");
+  background-image: url("./assets/img/trashcan.png");
   filter: invert(1);
   background-color: aqua;
   position: absolute;
@@ -334,7 +396,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: #f5f5f7;
+  min-width: 100vw;
 }
 
 h2.text-warning {

src/App.js

@@ -26,11 +26,10 @@ import Login from "./components/Login/LoginForm";
 import { PrivateRoutes, PublicRoutes } from "./models/routes";
 import Guard from "./guards/route.guard";
 import Id from "./guards/id.guard";
-import HomeView from "./pages/Home/HomeView";
 
 const UserGuardedRoute = ({ element, permissions, allowedId }) => {
   const { id_usuario } = useParams();
-  return permissions === 1 || id_usuario == allowedId ? ( //double equal is necessary
+  return permissions === 1 || id_usuario == allowedId ? (//double equal is necessary
     element
   ) : (
     <Pagina404 />
@@ -60,7 +59,7 @@ const App = () => {
             path={`${PublicRoutes.DATAPROFESOR}:id_profesor`}
             element={<PerfilProfesor />}
           />
-          <Route path={PublicRoutes.FILTER} element={<HomeView />} />
+          <Route path={PublicRoutes.FILTER} element={<FilterProfesor />} />
 
           {!permissions && ( //only when you don't have permissions, can you pass
             <Route path={PublicRoutes.LOGIN} element={<Login />} />

src/components/Card/Card.css

@@ -1,9 +1,23 @@
-
+.card {
+  max-width: 90vw;
+  width: 400px;
+  height: 170px;
+  margin: auto;
+  padding: 0.5em;
+  border-radius: 1em !important;
+  background: white !important;
+  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: row !important;
+  justify-content: left;
+  text-align: center;
+  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out ;
+}
 
 .transition{
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 }
 
 .transition.show {
@@ -15,6 +29,11 @@
   transform: translateY(0);
 }
 
+.card:hover {
+  box-shadow: 0 8px 16px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(-5px);
+}
+
 .card-content {
   width: 100%;
   display: flex;

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

@@ -29,4 +29,9 @@
     align-items: stretch;
   }
 
+  .form-control,
+  .btn {
+    width: 100%;
+    margin: 5px 0;
+  }
 }

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

@@ -16,9 +16,7 @@ function FilterProfesor() {
   const categorias = useCategoria();
   const edificios = useEdificio();
   const [filters, setFilters] = useState({});
-  const [currentPage, setCurrentPage] = useState(
-    Number(localStorage.getItem("lastPage")) || 1
-  );
+  const [currentPage, setCurrentPage] = useState(Number(localStorage.getItem("lastPage")) || 1);
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -32,10 +30,80 @@ function FilterProfesor() {
   };
 
   return (
-    <div>
+    <div className="main">
       <nav className="navbar filter" style={{ backgroundColor: "#292d2f" }}>
         <div className="container-fluid justify-content-center">
-          
+          <form
+            className="d-flex align-items-center"
+            role="search"
+            onSubmit={handleSubmit}
+          >
+            <input
+              className="form-control me-2"
+              type="search"
+              placeholder="Nombre"
+              name="nombre"
+              value={nombre}
+              onChange={(e) => setNombre(e.target.value)}
+              aria-label="Nombre"
+            />
+
+            <select
+              id="adscripcion"
+              value={adscripcion}
+              onChange={(e) => setAdscripcion(e.target.value)}
+              className="form-control me-2"
+            >
+              <option value="">Adscripción</option>
+              {adscripciones.map((adscripcion) => (
+                <option
+                  key={adscripcion.id_adscripcion}
+                  value={adscripcion.id_adscripcion}
+                >
+                  {adscripcion.adscripcion}
+                </option>
+              ))}
+            </select>
+
+            <select
+              id="categoria"
+              value={categoria}
+              onChange={(e) => setCategoria(e.target.value)}
+              className="form-control me-2"
+            >
+              <option value="">Categoría</option>
+              {categorias.map((categoria) => (
+                <option
+                  key={categoria.id_categoria}
+                  value={categoria.id_categoria}
+                >
+                  {categoria.categoria}
+                </option>
+              ))}
+            </select>
+
+            <select
+              id="edificio"
+              value={edificio}
+              onChange={(e) => setEdificio(e.target.value)}
+              className="form-control me-2"
+            >
+              <option value="">Edificio</option>
+              {edificios.map((edificio) => (
+                <option key={edificio.id_edificio} value={edificio.id_edificio}>
+                  {edificio.edificio}
+                </option>
+              ))}
+            </select>
+
+            <button
+              className="btn me-2"
+              type="submit"
+              style={{ background: "#D59F0F", color: "#fff" }}
+            >
+              Buscar
+            </button>
+          </form>
         </div>
       </nav>
       <Mapeo

src/components/Card/CardProfesores/Mapeo.js

@@ -18,7 +18,6 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
     loading: loadingData,
     error: errorData,
   } = useTeachers(currentPage, filters);
-
   const {
     profesores: profesoresActivesData,
     totalPages: totalActivePages,
@@ -63,7 +62,7 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
       });
     }
   }, [loadingData, loadingActives, profesores, currentPage]);
-
+  
   useEffect(() => {
     setTimeout(() => {
       window.scrollTo({ top: 0, behavior: "smooth" });
@@ -99,12 +98,12 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
       setCurrentPage((prevPage) => prevPage + 1);
     }
   };
-
+  
   const handlePrevPage = () => {
     if (currentPage > 1) {
       setCurrentPage((prevPage) => prevPage - 1);
     }
-  };
+  };  
 
   const renderPageNumbers = () => {
     const pageNumbers = [];
@@ -143,10 +142,10 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
   };
 
   return (
-    <div className="">
+    <div className="main-content">
       {permissions ? (
         <div className="containerButton">
-          <button className="btn btn-primary" onClick={handleRegresar}>
+          <button className="blueButton" onClick={handleRegresar}>
             Regresar
           </button>
           <button className="blueButton" onClick={handleCrear}>
@@ -154,14 +153,8 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
           </button>
         </div>
       ) : null}
-      <div className="container border">
-        <div className="row">
-          {profesores.map((profesor, index) => (
-            <div className="col-4">{profesor.nombre}</div>
-          ))}
-        </div>
-      </div>
-      {/*       <div className="profesores-container">
+
+      <div className="profesores-container">
         {profesores.map((profesor, index) => {
           const edificio = edificios.find(
             (e) => e.id_edificio === profesor.id_edificio
@@ -183,7 +176,8 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
             </div>
           );
         })}
-      </div> */}
+      </div>
+
       <nav aria-label="Page navigation example">
         <ul className="pagination justify-content-center">
           <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>

src/components/Card/CardUsuarios/MapeoUsuario.js

@@ -18,14 +18,13 @@ const MapeoUsuario = ({ filters }) => {
         setMaxPagesToShow(10);
       }
     };
-  
+
     window.addEventListener("resize", updateMaxPagesToShow);
-  
+
     updateMaxPagesToShow();
-  
+
     return () => window.removeEventListener("resize", updateMaxPagesToShow);
   }, []);
-  
 
   if (totalPages === 0) {
     return (
@@ -92,17 +91,21 @@ const MapeoUsuario = ({ filters }) => {
   return (
     <div className="main-content">
       <div className="containerButton">
-        <button className="btn btn-primary" onClick={handleRegresar}>
+        <button className="blueButton" onClick={handleRegresar}>
           Regresar
         </button>
-        <button className="btn btn-primary" onClick={handleCrear}>
+        <button className="blueButton" onClick={handleCrear}>
           Crear Usuario
         </button>
       </div>
 
-      {usuarios.map((usuario) => (
-        <CardUsuario key={usuario.id_usuario} usuario={usuario} />
-      ))}
+      <div className="profesores-container">
+        {usuarios.map((usuario) => (
+          <div className="transition show">
+            <CardUsuario key={usuario.id_usuario} usuario={usuario} />
+          </div>
+        ))}
+      </div>
 
       <nav aria-label="Navegación de páginas">
         <ul className="pagination justify-content-center">

src/components/Filter.js

@@ -1,160 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  useAdscripcion,
-  useCategoria,
-  useEdificio,
-} from "../services/auth.services";
-import { useSearchParams } from "react-router-dom";
-
-export default function Filter() {
-  const adscripciones = useAdscripcion();
-  const categorias = useCategoria();
-  const edificios = useEdificio();
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [filtro, setFiltro] = useState({
-    nombre: "",
-    adscripcion: "",
-    categoria: "",
-    edificio: "",
-  });
-
-  useEffect(() => {
-    const nombre = searchParams.get("nombre") || "";
-    const adscripcion = searchParams.get("adscripcion") || "";
-    const categoria = searchParams.get("categoria") || "";
-    const edificio = searchParams.get("edificio") || "";
-
-    setFiltro({ nombre, adscripcion, categoria, edificio });
-  }, [searchParams]);
-
-  const handleOnSubmit = (e) => {
-    e.preventDefault();
-    const queryParams = {};
-
-    if (filtro.nombre) queryParams.nombre = filtro.nombre;
-    if (filtro.adscripcion) queryParams.adscripcion = filtro.adscripcion;
-    if (filtro.categoria) queryParams.categoria = filtro.categoria;
-    if (filtro.edificio) queryParams.edificio = filtro.edificio;
-
-    // Actualizar los parámetros de la URL
-    setSearchParams(queryParams);
-  };
-
-  const handleChange = (e) => {
-    const { id, value } = e.target;
-    setFiltro({
-      ...filtro,
-      [id]: value,
-    });
-  };
-
-  const handleClear = () => {
-    // Limpiar los filtros en el estado
-    setFiltro({
-      nombre: "",
-      adscripcion: "",
-      categoria: "",
-      edificio: "",
-    });
-
-    // Limpiar los parámetros de la URL
-    setSearchParams({});
-  };
-
-  return (
-    <form
-      onSubmit={handleOnSubmit}
-      className="m-2 p-2 position-sticky"
-      style={{ top: "10px" }}
-    >
-      <p className="text-start m-0 fs-3">Filtro</p>
-
-      <div className="mb-3">
-        <label htmlFor="nombre" className="form-label mb-0">
-          Nombre
-        </label>
-        <input
-          type="text"
-          className="form-control"
-          id="nombre"
-          value={filtro.nombre}
-          onChange={handleChange}
-        />
-      </div>
-
-      <div className="mb-3">
-        <label htmlFor="adscripcion" className="form-label mb-0">
-          Adscripción
-        </label>
-        <select
-          id="adscripcion"
-          value={filtro.adscripcion}
-          onChange={handleChange}
-          className="form-control me-2"
-        >
-          <option value="">Selecciona Adscripción</option>
-          {adscripciones.map((adscripcion) => (
-            <option
-              key={adscripcion.id_adscripcion}
-              value={adscripcion.id_adscripcion}
-            >
-              {adscripcion.adscripcion}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="mb-3">
-        <label htmlFor="categoria" className="form-label mb-0">
-          Categoría
-        </label>
-        <select
-          id="categoria"
-          value={filtro.categoria}
-          onChange={handleChange}
-          className="form-control me-2"
-        >
-          <option value="">Selecciona Categoría</option>
-          {categorias.map((categoria) => (
-            <option key={categoria.id_categoria} value={categoria.id_categoria}>
-              {categoria.categoria}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="mb-3">
-        <label htmlFor="edificio" className="form-label mb-0">
-          Edificio
-        </label>
-        <select
-          id="edificio"
-          value={filtro.edificio}
-          onChange={handleChange}
-          className="form-control me-2"
-        >
-          <option value="">Selecciona Edificio</option>
-          {edificios.map((edificio) => (
-            <option key={edificio.id_edificio} value={edificio.id_edificio}>
-              {edificio.edificio}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="d-flex flex-column gap-2 justify-content-between">
-        <button type="submit" className="btn btn-primary w-45">
-          Filtrar
-        </button>
-        <button
-          type="button"
-          onClick={handleClear}
-          className="btn btn-secondary w-45"
-        >
-          Limpiar Filtro
-        </button>
-      </div>
-    </form>
-  );
-}

src/components/Footer.js

@@ -1,18 +1,108 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./style.css";
+import Sam from "../assets/img/Sam.png";
+import IO from "../assets/img/IO.png";
+
+const konamiCode = [
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+];
+
+let codePosition = 0;
 
 const Footer = () => {
+  const [showImage, setShowImage] = useState(false);
+
+  useEffect(() => {
+    const handleCodeInput = (key) => {
+      if (key === konamiCode[codePosition]) {
+        codePosition++;
+        if (codePosition === konamiCode.length) {
+          activateSecretScreen();
+          codePosition = 0;
+        }
+      } else {
+        codePosition = 0;
+      }
+    };
+
+    const handleKeyDown = (e) => handleCodeInput(e.key);
+    document.addEventListener("keydown", handleKeyDown);
+
+    let touchSequence = [];
+    let startX = 0;
+    let startY = 0;
+
+    const handleTouchStart = (e) => {
+      startX = e.touches[0].clientX;
+      startY = e.touches[0].clientY;
+    };
+
+    const handleTouchEnd = (e) => {
+      let endX = e.changedTouches[0].clientX;
+      let endY = e.changedTouches[0].clientY;
+      handleSwipe(startX, startY, endX, endY);
+    };
+
+    const handleSwipe = (startX, startY, endX, endY) => {
+      const deltaX = endX - startX;
+      const deltaY = endY - startY;
+
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        if (deltaX > 30) touchSequence.push("ArrowRight");
+        else if (deltaX < -30) touchSequence.push("ArrowLeft");
+      } else {
+        if (deltaY > 30) touchSequence.push("ArrowDown");
+        else if (deltaY < -30) touchSequence.push("ArrowUp");
+      }
+
+      if (
+        touchSequence.slice(-konamiCode.length).join("") === konamiCode.join("")
+      ) {
+        activateSecretScreen();
+        touchSequence = [];
+      } else if (touchSequence.length > konamiCode.length) {
+        touchSequence.shift();
+      }
+    };
+
+    document.addEventListener("touchstart", handleTouchStart);
+    document.addEventListener("touchend", handleTouchEnd);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("touchstart", handleTouchStart);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, []);
+
+  const activateSecretScreen = () => {
+    setShowImage(true);
+  };
+
   return (
-    <footer className="footer">
-      <div className="container">
-        <p>
-          Hecho en México. Todos los derechos reservados 2024. Esta página puede
-          ser reproducida con fines no lucrativos, siempre y cuando no se
-          mutile, se cite la fuente completa y su dirección electrónica. De otra
-          forma, requiere permiso previo por escrito de la institución.
-        </p>
-      </div>
-    </footer>
+    <>
+      {showImage && (
+        <div className="center">
+          <img className={`img S ${showImage ? 'show' : ''}`} src={Sam} alt="Sam" />
+          <img className={`img I ${showImage ? 'show' : ''}`} src={IO} alt="IO" />
+        </div>
+      )}
+      <footer className=" frow footer">
+        <div className="container">
+          <p>
+            Hecho en México. Todos los derechos reservados 2024. Esta página
+            puede ser reproducida con fines no lucrativos, siempre y cuando no
+            se mutile, se cite la fuente completa y su dirección electrónica. De
+            otra forma, requiere permiso previo por escrito de la institución.
+          </p>
+        </div>
+      </footer>
+    </>
   );
 };
 

src/components/Header.js

@@ -1,17 +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
+import logo1 from "../assets/img/escudo-b2.png";
+import logo2 from "../assets/img/logo_unam-b.png";
 
 const Header = () => {
   return (
     <header className="header">
       <a href="https://www.unam.mx/">
-        <img className="logo" alt="Logo 1" src={logo1} />
+        <img className="logo" alt="Logo 1" src={logo2} />
       </a>
       
       <a href="https://www.acatlan.unam.mx/">
-        <img className="logo" alt="Logo 2" src={logo2} />
+        <img className="logo" alt="Logo 2" src={logo1} />
       </a>
     </header>
   );

src/components/Login/LoginForm.js

@@ -20,12 +20,12 @@ const LoginForm = () => {
   };
 
   return (
-    <div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center">
+    <div className="main-content">
       <h1 className="text-warning">Bienvenido al directorio de profesores</h1>
       <h2 className="m-3">Iniciar sesión</h2>
       <form
         onSubmit={handleSubmit}
-        className="bg-white p-4 rounded shadow-sm"
+        className="login-form"
         style={{ background: "#f9f9f9", borderRadius: "1em" }}
       >
         <div className="input-group">
@@ -62,20 +62,12 @@ const LoginForm = () => {
             Mantener la sesión
           </label>
         </div>
-        <button
-          type="submit"
-          disabled={loading}
-          className="btn btn-primary w-100"
-        >
+        <button type="submit" disabled={loading}>
           Ingresar
         </button>
         {loading && <p>Cargando...</p>}
+        {error && <p style={{ color: "red" }}>{error}</p>}
       </form>
-      {error && (
-        <div className="alert alert-danger mt-3" role="alert">
-          {error}
-        </div>
-      )}
     </div>
   );
 };

src/components/Nav/Menu.css

@@ -47,6 +47,12 @@
   text-decoration: none;
 }
 
+.container {
+  border: 2px solid rgb(77, 77, 77);
+  border-radius: 8px;
+  margin: 10px;
+}
+
 .notButton {
   text-align: start;
   background: none;

src/components/Profesores.js

@@ -1,288 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useSearchParams, useNavigate } from "react-router-dom";
-import Guard from "../guards/route.guard";
-import { PrivateRoutes, PublicRoutes } from "../models/routes";
-import { useDeleteTeacher } from "../services/teacher.services";
-import "bootstrap/dist/css/bootstrap.min.css";
-
-const API_URL = process.env.REACT_APP_API_URL;
-
-export default function Profesores() {
-  const [showDialog, setShowDialog] = useState(false);
-  const [confirmText, setConfirmText] = useState("");
-  const [profesorToDelete, setProfesorToDelete] = useState(null); // Profesor que se va a eliminar
-  const { deleteTeacher } = useDeleteTeacher();
-  const permissions = Guard();
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const [profesores, setProfesores] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [totalPages, setTotalPages] = useState(1);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const fetchProfesores = async (filters) => {
-    const validFilters = Object.fromEntries(
-      Object.entries(filters).filter(([_, value]) => value)
-    );
-
-    const queryParams = new URLSearchParams(validFilters);
-    setLoading(true);
-    try {
-      const res = await (
-        await fetch(`${API_URL}/profesor/page?${queryParams}&limit=20`)
-      ).json();
-
-      setProfesores(res.profesores);
-      setTotalPages(res.totalPages);
-      setCurrentPage(Number(filters.page) || 1);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    const nombre = searchParams.get("nombre");
-    const adscripcion = searchParams.get("adscripcion");
-    const categoria = searchParams.get("categoria");
-    const edificio = searchParams.get("edificio");
-    const page = searchParams.get("page") || "1";
-
-    fetchProfesores({ nombre, adscripcion, categoria, edificio, page });
-  }, [searchParams]);
-
-  const handlePageChange = (pageNumber) => {
-    const newParams = new URLSearchParams(searchParams);
-    newParams.set("page", pageNumber);
-    navigate(`?${newParams.toString()}`);
-  };
-
-  // Lógica para controlar las 5 páginas visibles
-  const getPageNumbers = () => {
-    const maxPagesToShow = 5;
-    let startPage, endPage;
-
-    if (totalPages <= maxPagesToShow) {
-      startPage = 1;
-      endPage = totalPages;
-    } else {
-      if (currentPage <= Math.ceil(maxPagesToShow / 2)) {
-        startPage = 1;
-        endPage = maxPagesToShow;
-      } else if (currentPage + Math.floor(maxPagesToShow / 2) >= totalPages) {
-        startPage = totalPages - maxPagesToShow + 1;
-        endPage = totalPages;
-      } else {
-        startPage = currentPage - Math.floor(maxPagesToShow / 2);
-        endPage = currentPage + Math.floor(maxPagesToShow / 2);
-      }
-    }
-
-    return Array.from(
-      { length: endPage - startPage + 1 },
-      (_, index) => startPage + index
-    );
-  };
-
-  const handleEditClick = (id) => {
-    window.location.href = `${PrivateRoutes.EDITARPROFESOR}${id}`;
-  };
-
-  const handleViewProfesor = (id) => {
-    localStorage.setItem("lastPage", currentPage);
-    window.location.href = `${PublicRoutes.DATAPROFESOR}${id}`;
-  };
-
-  const handleConfirmDelete = async () => {
-    if (confirmText.toLowerCase() === "aceptar" && profesorToDelete) {
-      await deleteTeacher(profesorToDelete);
-      setShowDialog(false);
-      setConfirmText("");
-      setProfesorToDelete(null); // Resetear el profesor a eliminar
-      fetchProfesores({ page: currentPage }); // Refrescar la lista después de eliminar
-    }
-  };
-
-  const handleDeleteClick = (id) => {
-    setProfesorToDelete(id); // Guardar el profesor que se va a eliminar
-    setShowDialog(true); // Mostrar el modal
-  };
-
-  return (
-    <div className="my-2 p-2 position-sticky">
-      {loading ? (
-        <p>Cargando profesores...</p>
-      ) : (
-        <>
-          {profesores.length > 0 ? (
-            <div className="row">
-              {profesores.map((profesor, index) => (
-                <div
-                  key={index}
-                  className="col-12 col-md-6 col-xl-4 mb-4"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => handleViewProfesor(profesor.id_profesor)}
-                >
-                  <div className="card h-100 shadow-sm">
-                    <div className="card-body">
-                      <div className="d-flex">
-                        <img
-                          src={
-                            profesor.fotografia &&
-                            profesor.fotografia.startsWith("http")
-                              ? profesor.fotografia
-                              : `${API_URL}/imagenes/${profesor.fotografia}`
-                          }
-                          alt={profesor.nombre}
-                          className="img-fluid rounded"
-                          style={{
-                            width: "80px",
-                            height: "130px",
-                            objectFit: "cover",
-                          }}
-                          onError={(e) => {
-                            e.target.src = "/default-image.png"; // Imagen por defecto si no se carga
-                          }}
-                        />
-                        <div className="ms-3">
-                          <h5 className="card-title mb-1">{profesor.nombre}</h5>
-                          <strong className="text-muted">Ubicacion</strong>
-                          <p className="mb-1 text-muted text-start">
-                            {profesor.ubicacion}
-                          </p>
-                          <strong className="text-muted">Correo</strong>
-                          <p className="text-break text-muted text-start m-0">
-                            {profesor.correo_pcp}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                    {permissions && (
-                      <div className="card-footer d-flex gap-2">
-                        <button
-                          className="btn btn-primary"
-                          onClick={() => handleEditClick(profesor.id_profesor)}
-                        >
-                          Editar
-                        </button>
-                        <button
-                          className="btn btn-danger"
-                          onClick={() =>
-                            handleDeleteClick(profesor.id_profesor)
-                          }
-                        >
-                          Borrar
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p>No se encontraron profesores.</p>
-          )}
-
-          {/* Modal de confirmación */}
-          {showDialog && (
-            <div
-              className="modal fade show"
-              tabIndex="-1"
-              style={{ display: "block" }}
-              role="dialog"
-            >
-              <div className="modal-dialog" role="document">
-                <div className="modal-content">
-                  <div className="modal-header">
-                    <h5 className="modal-title">Confirmar Eliminación</h5>
-                    <button
-                      type="button"
-                      className="btn-close"
-                      onClick={() => setShowDialog(false)}
-                    ></button>
-                  </div>
-                  <div className="modal-body">
-                    <p>
-                      Para eliminar al profesor, escribe{" "}
-                      <strong>"aceptar"</strong> y confirma.
-                    </p>
-                    <input
-                      type="text"
-                      className="form-control"
-                      value={confirmText}
-                      onChange={(e) => setConfirmText(e.target.value)}
-                      placeholder="Escribe 'aceptar' para confirmar"
-                    />
-                  </div>
-                  <div className="modal-footer">
-                    <button
-                      type="button"
-                      className="btn btn-secondary"
-                      onClick={() => setShowDialog(false)}
-                    >
-                      Cancelar
-                    </button>
-                    <button
-                      type="button"
-                      className="btn btn-danger"
-                      onClick={handleConfirmDelete}
-                      disabled={confirmText.toLowerCase() !== "aceptar"}
-                    >
-                      Confirmar Eliminación
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Paginación con Bootstrap */}
-          <nav className="d-flex justify-content-center mt-3">
-            <ul className="pagination">
-              <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-                <button
-                  className="page-link"
-                  onClick={() => handlePageChange(currentPage - 1)}
-                  disabled={currentPage === 1}
-                >
-                  Anterior
-                </button>
-              </li>
-
-              {getPageNumbers().map((pageNumber) => (
-                <li
-                  key={pageNumber}
-                  className={`page-item ${
-                    pageNumber === currentPage ? "active" : ""
-                  }`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => handlePageChange(pageNumber)}
-                  >
-                    {pageNumber}
-                  </button>
-                </li>
-              ))}
-
-              <li
-                className={`page-item ${
-                  currentPage === totalPages && "disabled"
-                }`}
-              >
-                <button
-                  className="page-link"
-                  onClick={() => handlePageChange(currentPage + 1)}
-                  disabled={currentPage === totalPages}
-                >
-                  Siguiente
-                </button>
-              </li>
-            </ul>
-          </nav>
-        </>
-      )}
-    </div>
-  );
-}

src/components/Teacher/CrearProfesor/FormProfesor.js

@@ -114,17 +114,17 @@ const FormProfesor = () => {
     }
 
     if (!id_categoria) {
-      alert("Por favor, Coloque la categoria en Datos de Investigación.");
+      alert("Por favor, Coloque la categoría en Datos académicos.");
       return false;
     }
 
     if (!id_adscripcion) {
-      alert("Por favor, Coloque la adscripcion en Datos de Investigación.");
+      alert("Por favor, Coloque la adscripción en Datos académicos.");
       return false;
     }
 
     if (!id_edificio) {
-      alert("Por favor, Coloque el edificio en Datos de Investigación.");
+      alert("Por favor, Coloque el edificio en Datos académicos.");
       return false;
     }
 
@@ -225,7 +225,7 @@ const FormProfesor = () => {
   return (
     <div className="form-container">
       <div className="containerButton">
-        <button className="btn btn-primary" onClick={handleRegresar}>
+        <button className="blueButton" onClick={handleRegresar}>
           Regresar
         </button>
       </div>
@@ -408,7 +408,7 @@ const FormProfesor = () => {
 
         {page === 3 && (
           <div className="form-section">
-            <h2>Datos de Investigación</h2>
+            <h2>Datos Académicos</h2>
             <div className="form-group">
               <label>
                 Categoría <span className="required">*</span>
@@ -485,6 +485,7 @@ const FormProfesor = () => {
                   <p>
                     Arrastra y suelta la imagen aquí, o haz clic para
                     seleccionar una imagen
+                    Peso maximo de la imagen 2MB
                   </p>
                 )}
               </div>
@@ -523,7 +524,7 @@ const FormProfesor = () => {
                   />
                   <button
                     type="button"
-                    className="btn btn-danger"
+                    className="delete-botones"
                     onClick={() => deleteGrados_obtenidos(index)}
                   ></button>
                 </div>
@@ -535,19 +536,19 @@ const FormProfesor = () => {
               className="boton"
               onClick={addGrados_obtenidos}
             >
-              Agregar Grados de investigacion
+              Agregar Grados 
             </button>
           </div>
         )}
 
         {page === 5 && (
           <div className="form-section">
-            <h2>Lineas de Investigacion</h2>
+            <h2>Líneas de Investigación</h2>
             <div className="form-group">
               {lineasInvestigacion.map((linea, index) => (
                 <div key={index} className="input-with-delete">
                   <label>
-                    Linea de Investigacion {index + 1}
+                    Línea de Investigación {index + 1}
                     <span className="required">*</span>
                   </label>
                   <input

src/components/Teacher/ModificarProfesor/FormEditProfesor.js

@@ -13,6 +13,8 @@ import {
   useUpdateTeacher,
 } from "../../../services/teacher.services";
 
+const API_URL = process.env.REACT_APP_API_URL;
+
 const FormEditProfesor = () => {
   const { id_profesor } = useParams();
   const [profesor, setProfesor] = useState(null);
@@ -74,7 +76,11 @@ const FormEditProfesor = () => {
       setCorreo_per(teacher.correo_per);
       setUbicacion(teacher.ubicacion);
       setGrado_maximo(teacher.datosAcademicos[0]?.grado_maximo || "");
-      setOldFoto(teacher.fotografia);
+      if(teacher.fotografia.startsWith("http")){
+        setOldFoto(teacher.fotografia);
+      }else{
+        setOldFoto(`${API_URL}/imagenes/${teacher.fotografia}`);
+      }
     }
   }, [teacher]);
 
@@ -208,7 +214,7 @@ const FormEditProfesor = () => {
   return (
     <div className="form-container">
       <div className="containerButton">
-        <button className="btn btn-primary" onClick={handleRegresar}>
+        <button className="blueButton" onClick={handleRegresar}>
           Regresar
         </button>
       </div>
@@ -393,7 +399,7 @@ const FormEditProfesor = () => {
 
         {page === 3 && (
           <div className="form-section">
-            <h2>Datos de Investigación</h2>
+            <h2>Datos académicos</h2>
             <div className="form-group">
               <label>
                 Categoría <span className="required">*</span>
@@ -471,6 +477,7 @@ const FormEditProfesor = () => {
                   <p>
                     Arrastra y suelta la imagen aquí, o haz clic para
                     seleccionar una imagen
+                    Peso maximo de la imagen 2MB
                   </p>
                 )}
               </div>
@@ -528,26 +535,25 @@ const FormEditProfesor = () => {
                 </div>
               ))}
             </div>
-            <div className="d-flex justify-content-center">
+
             <button
               type="button"
-              className="btn btn-primary"
+              className="boton"
               onClick={addGrados_obtenidos}
-              >
-              Agregar Grados de investigacion
+            >
+              Agregar Grados
             </button>
-              </div>
           </div>
         )}
 
         {page === 5 && (
           <div className="form-section">
-            <h2>Lineas de Investigacion</h2>
+            <h2>Líneas de Investigación</h2>
             <div className="form-group">
               {lineasInvestigacion.map((linea, index) => (
                 <div key={index} className="input-with-delete">
                   <label>
-                    Lineas de Investigacion {index + 1}
+                    Líneas de Investigación {index + 1}
                     <span className="required">*</span>
                   </label>
                   <input

src/components/Teacher/PerfilProfesor/PerfilProfesor.js

@@ -95,7 +95,7 @@ const PerfilProfesor = () => {
   return (
     <div className="form-container">
       <div className="containerButton">
-        <button className="btn btn-primary" onClick={handleRegresar}>
+        <button className="blueButton" onClick={handleRegresar}>
           Regresar
         </button>
       </div>

src/components/style.css

@@ -28,4 +28,29 @@
 .footer .container {
   max-width: 90%;
   margin: 0 auto;
+}
+
+.center{
+  display: flex;
+  justify-content: center;
+}
+
+.img {
+  max-width: 100px;
+  height: auto;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0;
+  filter: drop-shadow(0 0 8px black);
+  transition: transform 1s ease-in-out, opacity 1s ease-in;
+}
+
+.S.show {
+  transform: translateY(24px);
+  opacity: 1;
+}
+
+.I.show {
+  transform: translateY(15px);
+  opacity: 1;
 }

src/pages/Home/HomeView.js

@@ -1,18 +0,0 @@
-import React from "react";
-import Filter from "../../components/Filter";
-import Profesores from "../../components/Profesores";
-
-export default function HomeView() {
-  return (
-    <div className="container-fluid">
-      <div className="row">
-        <aside className="col-12 col-lg-3">
-          <Filter />
-        </aside>
-        <main className="col-12  col-lg-9">
-          <Profesores />
-        </main>
-      </div>
-    </div>
-  );
-}