Cambios front 1 6/9/24

.env

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

src/App.css

@@ -423,7 +423,7 @@ p .text-center .mt-3 {
   justify-content: space-evenly;
   width: 400px;
   max-width: 90vw;
-  margin: 10px;
+  margin: 10px auto;
 }
 
 .cargando {

src/components/Card/Card.css

@@ -1,7 +1,7 @@
 .card {
   max-width: 90vw;
   width: 400px;
-  height: 175px;
+  height: 170px;
   margin: auto;
   padding: 0.5em;
   border-radius: 1em !important;
@@ -11,7 +11,22 @@
   flex-direction: row !important;
   justify-content: left;
   text-align: center;
-  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  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.show {
+  display: flex;
+  justify-content: center;
+  width: 40vw;
+  min-width: 340px;
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .card:hover {
@@ -37,6 +52,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  max-width: 130px;
 }
 
 
@@ -56,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

@@ -3,13 +3,19 @@ import "../Card.css";
 import { PrivateRoutes, PublicRoutes } from "../../../models/routes";
 import { useDeleteTeacher } from "../../../services/teacher.services";
 
-const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
+const API_URL = process.env.REACT_APP_API_URL;
+
+const CardProfesor = ({
+  profesor,
+  edificioNombre,
+  permissions,
+  currentPage,
+}) => {
   const [showDialog, setShowDialog] = useState(false);
   const [confirmText, setConfirmText] = useState("");
   const { deleteTeacher } = useDeleteTeacher();
   const defaultImage =
     "https://static.vecteezy.com/system/resources/thumbnails/020/765/399/small_2x/default-profile-account-unknown-icon-black-silhouette-free-vector.jpg";
-  const fotoProfesor = profesor.fotografia || defaultImage;
 
   const handleDeleteClick = () => {
     setShowDialog(true);
@@ -28,20 +34,28 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
   };
 
   const handleViewProfesor = () => {
+    localStorage.setItem("lastPage", currentPage);
     window.location.href = `${PublicRoutes.DATAPROFESOR}${profesor.id_profesor}`;
   };
 
+  const handleImageError = (e) => {
+    e.target.src = defaultImage;
+  };
+
   return (
     <div className="card m-1">
       <div className="image">
-        {fotoProfesor && fotoProfesor.startsWith("http") ? (
+        <img
-          <img
+          src={
-            src={fotoProfesor}
+            profesor.fotografia && profesor.fotografia.startsWith("http")
-            className="imgProfe"
+              ? profesor.fotografia
-            alt={profesor.nombre}
+              : `${API_URL}/imagenes/${profesor.fotografia}`
-            onClick={handleViewProfesor}
+          }
-          />
+          className="imgProfe"
-        ) : null}
+          alt={profesor.nombre}
+          onClick={handleViewProfesor}
+          onError={handleImageError}
+        />
 
         {permissions ? (
           <div

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

@@ -16,6 +16,7 @@ function FilterProfesor() {
   const categorias = useCategoria();
   const edificios = useEdificio();
   const [filters, setFilters] = useState({});
+  const [currentPage, setCurrentPage] = useState(Number(localStorage.getItem("lastPage")) || 1);
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -25,6 +26,7 @@ function FilterProfesor() {
       categoria,
       edificio,
     });
+    setCurrentPage(1);
   };
 
   return (
@@ -52,7 +54,7 @@ function FilterProfesor() {
               onChange={(e) => setAdscripcion(e.target.value)}
               className="form-control me-2"
             >
-              <option value="">Adscripcion</option>
+              <option value="">Adscripción</option>
               {adscripciones.map((adscripcion) => (
                 <option
                   key={adscripcion.id_adscripcion}
@@ -69,7 +71,7 @@ function FilterProfesor() {
               onChange={(e) => setCategoria(e.target.value)}
               className="form-control me-2"
             >
-              <option value="">Categoria</option>
+              <option value="">Categoría</option>
               {categorias.map((categoria) => (
                 <option
                   key={categoria.id_categoria}
@@ -97,14 +99,19 @@ function FilterProfesor() {
             <button
               className="btn me-2"
               type="submit"
-              style={{ background: "#1e3c70", color: "#fff" }}
+              style={{ background: "#D59F0F", color: "#fff" }}
             >
               Buscar
             </button>
           </form>
         </div>
       </nav>
-      <Mapeo filters={filters} edificios={edificios} />
+      <Mapeo
+        filters={filters}
+        edificios={edificios}
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+      />
     </div>
   );
 }

src/components/Card/CardProfesores/Mapeo.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "../../../App.css";
 import CardProfesor from "./CardProfesor";
 import Guard from "../../../guards/route.guard";
@@ -8,8 +8,8 @@ import {
 } from "../../../services/teacher.services";
 import { PrivateRoutes } from "../../../models/routes";
 
-const Mapeo = ({ filters, edificios }) => {
+const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [shownCards, setShownCards] = useState([]);
   const permissions = Guard();
 
   const {
@@ -25,6 +25,50 @@ const Mapeo = ({ filters, edificios }) => {
     error: errorActives,
   } = useTeachersActives(currentPage, filters);
 
+  const { profesores, totalPages } = permissions
+    ? { 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(() => {
+    if (!loadingData && !loadingActives && profesores) {
+      setShownCards([]);
+      profesores.forEach((_, index) => {
+        setTimeout(() => {
+          setShownCards((prev) => [...prev, index]);
+        }, index * 120);
+      });
+    }
+  }, [loadingData, loadingActives, profesores, currentPage]);
+  
+  useEffect(() => {
+    setTimeout(() => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }, 100);
+  }, [currentPage]);
+
   if (loadingData || loadingActives) {
     return (
       <div className="perfil-profesor">
@@ -49,25 +93,20 @@ const Mapeo = ({ filters, edificios }) => {
     );
   }
 
-  const { profesores, totalPages } = permissions
-    ? { profesores: profesoresData, totalPages: totalDataPages }
-    : { profesores: profesoresActivesData, totalPages: totalActivePages };
-
   const handleNextPage = () => {
     if (currentPage < totalPages) {
       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);
 
@@ -115,20 +154,29 @@ const Mapeo = ({ filters, edificios }) => {
         </div>
       ) : null}
 
-      {profesores.map((profesor) => {
+      <div className="profesores-container">
-        const edificio = edificios.find(
+        {profesores.map((profesor, index) => {
-          (e) => e.id_edificio === profesor.id_edificio
+          const edificio = edificios.find(
-        );
+            (e) => e.id_edificio === profesor.id_edificio
-        const edificioNombre = edificio ? edificio.edificio : "Desconocido";
+          );
-        return (
+          const edificioNombre = edificio ? edificio.edificio : "Desconocido";
-          <CardProfesor
+          return (
-            key={profesor.id_profesor}
+            <div
-            profesor={profesor}
+              key={profesor.id_profesor}
-            edificioNombre={edificioNombre}
+              className={`card-wrapper transition ${
-            permissions={permissions}
+                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/Card/CardUsuarios/NavUsuario.js

@@ -46,7 +46,7 @@ function NavUsuario() {
             <button
               className="btn me-2"
               type="submit"
-              style={{ background: "#1e3c70", color: "#fff" }}
+              style={{ background: "#D59F0F", color: "#fff" }}
             >
               Buscar
             </button>

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
+        <img className="logo" alt="Logo 1" src={logo1} />
-          className="logo"
-          alt="Logo 1"
-          src="https://www.unam.mx/sites/all/themes/unam/logo.png"
-        />
       </a>
       
       <a href="https://www.acatlan.unam.mx/">
-        <img
+        <img className="logo" alt="Logo 2" src={logo2} />
-          className="logo"
-          alt="Logo 2"
-          src="https://www.acatlan.unam.mx/img/logo_fesa.png"
-        />
       </a>
     </header>
   );

src/components/Nav/Menu.css

@@ -1,5 +1,4 @@
-.nav-link .bg-warning {
+.nav-link {
-  background-color: #002b7a !important;
   color: #212529 !important;
 }
 
@@ -42,14 +41,27 @@
   margin-left: auto;
 }
 
-.red{
+.red {
   background-color: rgb(193, 17, 17);
   color: white;
   text-decoration: none;
 }
 
-.container{
+.container {
   border: 2px solid rgb(77, 77, 77);
   border-radius: 8px;
   margin: 10px;
-}
+}
+
+.notButton {
+  text-align: start;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.notButton:hover{
+  background: none;
+  border: none;
+  box-shadow: none;
+}

src/components/Nav/Menu.js

@@ -92,47 +92,47 @@ const Menu = () => {
 
               <div className="container">
                 <li className="nav-item">
-                  <a
+                  <button
-                    className="nav-link"
+                    className="nav-link notButton"
                     onClick={() =>
                       (window.location.href = PrivateRoutes.CREARPROFESOR)
                     }
                   >
                     Crear Profesor
-                  </a>
+                  </button>
                 </li>
 
                 <li className="nav-item">
-                  <a
+                  <button
-                    className="nav-link"
+                    className="nav-link  notButton"
                     onClick={() => (window.location.href = PublicRoutes.FILTER)}
                   >
                     Editar Profesor
-                  </a>
+                  </button>
                 </li>
               </div>
 
               {permissions === 1 && (
                 <div className="container">
                   <li className="nav-item">
-                    <a
+                    <button
-                      className="nav-link"
+                      className="nav-link  notButton"
                       onClick={() =>
                         (window.location.href = PrivateRoutes.CREARUSUARIO)
                       }
                     >
                       Crear Usuario
-                    </a>
+                    </button>
                   </li>
                   <li className="nav-item">
-                    <a
+                    <button
-                      className="nav-link"
+                      className="nav-link  notButton"
                       onClick={() =>
                         (window.location.href = PrivateRoutes.FILTERUSUARIO)
                       }
                     >
                       Editar Usuario
-                    </a>
+                    </button>
                   </li>
                 </div>
               )}

src/components/Teacher/CrearProfesor/FormProfesor.js

@@ -7,7 +7,8 @@ import {
   useEdificio,
   useUploadImage,
 } from "../../../services/auth.services";
-import { useRegisterTeacher } from "../../../services/teacher.services";
+import { useRegisterTeacher, useUpdateTeacherImage } from "../../../services/teacher.services";
+import { PublicRoutes } from "../../../models/routes";
 
 const FormProfesor = () => {
   const [page, setPage] = useState(1);
@@ -24,6 +25,7 @@ const FormProfesor = () => {
   const [fotoBase64, setFotoBase64] = useState("");
   const [lineasInvestigacion, setLineasInvestigacion] = useState([]);
   const [proyectosAcademicos, setProyectosAcademicos] = useState([]);
+  const [datosAcademicos,setDatosAcademicos] = useState([]);
   const [id_usuario] = useState("1");
   const [num_trabajador, setNum_trabajador] = useState("");
   const [rfc, setRfc] = useState("");
@@ -37,15 +39,21 @@ const FormProfesor = () => {
   const [mostrar, setMostrar] = useState(true);
   const [nombre, setNombre] = useState("");
   const [grado_maximo, setGrado_maximo] = useState("");
-  const [grados_obtenidos, setGrados_obtenidos] = useState("");
 
   const { registerTeacher } = useRegisterTeacher();
+  const { updateTeacherImage } = useUpdateTeacherImage();
   const { uploadImage } = useUploadImage();
 
   const handlePageChange = (newPage) => {
     setPage(newPage);
   };
 
+  const handleGrados_obtenidosChange = (index, value) => {
+    const newGrados = [...datosAcademicos];
+    newGrados[index].grados_obtenidos = value;
+    setDatosAcademicos(newGrados);
+  };
+
   const handleLineaInvestigacionChange = (index, value) => {
     const newLineas = [...lineasInvestigacion];
     newLineas[index].lineas_inv_html = value;
@@ -58,6 +66,10 @@ const FormProfesor = () => {
     setProyectosAcademicos(newProyectos);
   };
 
+  const addGrados_obtenidos = () => {
+    setDatosAcademicos([...datosAcademicos, { grados_obtenidos: "" }]);
+  };
+
   const addLineaInvestigacion = () => {
     setLineasInvestigacion([...lineasInvestigacion, { lineas_inv_html: "" }]);
   };
@@ -66,6 +78,11 @@ const FormProfesor = () => {
     setProyectosAcademicos([...proyectosAcademicos, { proyecto_html: "" }]);
   };
 
+  const deleteGrados_obtenidos = (index) => {
+    const newGrados = datosAcademicos.filter((_, i) => i !== index);
+    setDatosAcademicos(newGrados);
+  };
+
   const deleteLineaInvestigacion = (index) => {
     const newLineas = lineasInvestigacion.filter((_, i) => i !== index);
     setLineasInvestigacion(newLineas);
@@ -89,7 +106,7 @@ const FormProfesor = () => {
       return false;
     }
 
-    if (!grado_maximo || !grados_obtenidos || !correo_pcp) {
+    if (!grado_maximo || !correo_pcp) {
       alert(
         "Por favor, complete todos los campos requeridos en Datos Académicos."
       );
@@ -97,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;
     }
 
@@ -116,19 +133,15 @@ const FormProfesor = () => {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-
+  
     if (!validateForm()) {
       return;
     }
-
+  
     try {
       let imageUrl = "";
 
-      if (fotoBase64) {
+      const id_profesor = await registerTeacher({
-        imageUrl = await uploadImage(fotoBase64, nombre);
-      }
-
-      const data = {
         nombre,
         id_usuario,
         num_trabajador,
@@ -147,16 +160,23 @@ const FormProfesor = () => {
         activo,
         lineasInvestigacion,
         proyectosAcademicos,
-        datosAcademicos: [
+        datosAcademicos: datosAcademicos.map(dato => ({
-          {
+          ...dato,
-            grado_maximo,
+          grado_maximo: grado_maximo || dato.grado_maximo
-            grados_obtenidos,
+        })),
-          },
-        ],
         fotografia: imageUrl,
-      };
+      });
-
+  
-      registerTeacher(data);
+      if (fotoBase64) {
+        imageUrl = await uploadImage(fotoBase64, id_profesor);
+      }
+  
+      if (imageUrl) {
+        await updateTeacherImage(id_profesor, imageUrl);
+      }
+  
+      window.location.href = PublicRoutes.FILTER;
+  
     } catch (error) {
       if (error.response && error.response.status === 403) {
         if (error.response.data.message === "RFC already exists") {
@@ -178,6 +198,7 @@ const FormProfesor = () => {
       }
     }
   };
+  
 
   const onDrop = useCallback((acceptedFiles) => {
     const file = acceptedFiles[0];
@@ -305,19 +326,6 @@ const FormProfesor = () => {
               />
             </div>
 
-            <div className="form-group">
-              <label>
-                Grados Obtenidos <span className="required">*</span>
-              </label>
-              <input
-                type="text"
-                name="grados_obtenidos"
-                required
-                value={grados_obtenidos}
-                onChange={(e) => setGrados_obtenidos(e.target.value)}
-              />
-            </div>
-
             <div className="form-group">
               <label>
                 Correo Pcpuma <span className="required">*</span>
@@ -400,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>
@@ -497,18 +505,55 @@ const FormProfesor = () => {
 
         {page === 4 && (
           <div className="form-section">
-            <h2>Lineas de Investigacion</h2>
+            <h2>Grados obtenidos</h2>
+            <div className="form-group">
+              {datosAcademicos.map((grado, index) => (
+                <div key={index} className="input-with-delete">
+                  <label>
+                    Grado obtenido {index + 1}
+                    <span className="required">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    name={`grados_obtenidos_${index}`}
+                    value={grado.grados_obtenidos}
+                    onChange={(e) =>
+                      handleGrados_obtenidosChange(index, e.target.value)
+                    }
+                  />
+                  <button
+                    type="button"
+                    className="delete-botones"
+                    onClick={() => deleteGrados_obtenidos(index)}
+                  ></button>
+                </div>
+              ))}
+            </div>
+
+            <button
+              type="button"
+              className="boton"
+              onClick={addGrados_obtenidos}
+            >
+              Agregar Grados 
+            </button>
+          </div>
+        )}
+
+        {page === 5 && (
+          <div className="form-section">
+            <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ínea de Investigación {index + 1}
                     <span className="required">*</span>
                   </label>
                   <input
                     type="text"
                     name={`lineas_inv_${index}`}
-                    value={linea.lineas_inv}
+                    value={linea.lineas_inv_html}
                     onChange={(e) =>
                       handleLineaInvestigacionChange(index, e.target.value)
                     }
@@ -532,7 +577,7 @@ const FormProfesor = () => {
           </div>
         )}
 
-        {page === 5 && (
+        {page === 6 && (
           <div className="form-section">
             <h2>Proyectos Académicos</h2>
             <div className="form-group">
@@ -545,7 +590,7 @@ const FormProfesor = () => {
                   <input
                     type="text"
                     name={`proyecto_${index}`}
-                    value={proyecto.proyecto}
+                    value={proyecto.proyecto_html}
                     onChange={(e) =>
                       handleProyectoAcademicoChange(index, e.target.value)
                     }
@@ -570,7 +615,7 @@ const FormProfesor = () => {
         )}
 
         <div className="button-container">
-          {page === 5 && (
+          {page === 6 && (
             <button type="submit" className="small-button">
               Registrar
             </button>
@@ -628,7 +673,15 @@ const FormProfesor = () => {
               5
             </button>
           </li>
-          <li className={`page-item ${page === 5 ? "disabled" : ""}`}>
+          <li className={`page-item ${page === 6 ? "active" : ""}`}>
+            <button
+              className="page-link buttons"
+              onClick={() => handlePageChange(6)}
+            >
+              6
+            </button>
+          </li>
+          <li className={`page-item ${page === 6 ? "disabled" : ""}`}>
             <button
               className="page-link nextButtons"
               onClick={() => handlePageChange(page + 1)}
@@ -642,4 +695,4 @@ const FormProfesor = () => {
   );
 };
 
-export default FormProfesor;
+export default FormProfesor;

src/components/Teacher/ModificarProfesor/FormEditProfesor.js

@@ -30,7 +30,7 @@ const FormEditProfesor = () => {
   const [fotoBase64, setFotoBase64] = useState("");
   const [lineasInvestigacion, setLineasInvestigacion] = useState([]);
   const [proyectosAcademicos, setProyectosAcademicos] = useState([]);
-
+  const [datosAcademicos, setDatosAcademicos] = useState([]);
   const [num_trabajador, setNum_trabajador] = useState("");
   const [rfc, setRfc] = useState("");
   const [homoclave, setHomoclave] = useState("");
@@ -44,8 +44,6 @@ const FormEditProfesor = () => {
   const [nombre, setNombre] = useState("");
 
   const [grado_maximo, setGrado_maximo] = useState("");
-  const [grados_obtenidos, setGrados_obtenidos] = useState("");
-
   const [errorMessage, setErrorMessage] = useState("");
   const { teacher } = useTeacher(id_profesor);
   const { updateTeacher } = useUpdateTeacher();
@@ -65,6 +63,7 @@ const FormEditProfesor = () => {
       setActivo(teacher.activo);
       setLineasInvestigacion(teacher.lineasInvestigacion);
       setProyectosAcademicos(teacher.proyectosAcademicos);
+      setDatosAcademicos(teacher.datosAcademicos);
       setNum_trabajador(teacher.num_trabajador);
       setRfc(teacher.rfc);
       setHomoclave(teacher.homoclave);
@@ -75,11 +74,16 @@ const FormEditProfesor = () => {
       setCorreo_per(teacher.correo_per);
       setUbicacion(teacher.ubicacion);
       setGrado_maximo(teacher.datosAcademicos[0]?.grado_maximo || "");
-      setGrados_obtenidos(teacher.datosAcademicos[0]?.grados_obtenidos || "");
       setOldFoto(teacher.fotografia);
     }
   }, [teacher]);
 
+  const handleGrados_obtenidosChange = (index, value) => {
+    const newGrados = [...datosAcademicos];
+    newGrados[index].grados_obtenidos = value;
+    setDatosAcademicos(newGrados);
+  };
+
   const handleLineaInvestigacionChange = (index, value) => {
     const newLineas = [...lineasInvestigacion];
     newLineas[index].lineas_inv_html = value;
@@ -92,6 +96,10 @@ const FormEditProfesor = () => {
     setProyectosAcademicos(newProyectos);
   };
 
+  const addGrados_obtenidos = () => {
+    setDatosAcademicos([...datosAcademicos, { grados_obtenidos: "" }]);
+  };
+
   const addLineaInvestigacion = () => {
     setLineasInvestigacion([...lineasInvestigacion, { lineas_inv_html: "" }]);
   };
@@ -100,6 +108,11 @@ const FormEditProfesor = () => {
     setProyectosAcademicos([...proyectosAcademicos, { proyecto_html: "" }]);
   };
 
+  const deleteGrados_obtenidos = (index) => {
+    const newGrados = datosAcademicos.filter((_, i) => i !== index);
+    setDatosAcademicos(newGrados);
+  };
+
   const deleteLineaInvestigacion = (index) => {
     const newLineas = lineasInvestigacion.filter((_, i) => i !== index);
     setLineasInvestigacion(newLineas);
@@ -123,9 +136,14 @@ const FormEditProfesor = () => {
 
     try {
       if (fotoBase64) {
-        imageUrl = await updateImage(fotoBase64, nombre);
+        imageUrl = await updateImage(fotoBase64, id_profesor);
       }
 
+      const updatedDatosAcademicos = datosAcademicos.map((dato) => ({
+        ...dato,
+        grado_maximo: grado_maximo || dato.grado_maximo,
+      }));
+
       const profesorData = {
         ...profesor,
         nombre,
@@ -145,12 +163,7 @@ const FormEditProfesor = () => {
         activo,
         lineasInvestigacion,
         proyectosAcademicos,
-        datosAcademicos: [
+        datosAcademicos: updatedDatosAcademicos,
-          {
-            grado_maximo,
-            grados_obtenidos,
-          },
-        ],
         fotografia: imageUrl || profesor.fotografia,
       };
 
@@ -284,27 +297,21 @@ const FormEditProfesor = () => {
           <div className="form-section">
             <h2>Datos Académicos</h2>
             <div className="form-group">
-              <label>
+              {datosAcademicos.length > 0 && datosAcademicos[0].grado_maximo ? ( // Verifica que haya al menos un dato y que tenga grado_maximo
-                Grado Maximo <span className="required">*</span>
+                <div>
-              </label>
+                  <label>
-              <input
+                    Grado Máximo <span className="required">*</span>
-                type="text"
+                  </label>
-                name="grado_maximo"
+                  <input
-                value={grado_maximo}
+                    type="text"
-                onChange={(e) => setGrado_maximo(e.target.value)}
+                    name="grado_maximo"
-              />
+                    value={datosAcademicos[0].grado_maximo}
-            </div>
+                    onChange={(e) => setGrado_maximo(e.target.value)}
-
+                  />
-            <div className="form-group">
+                </div>
-              <label>
+              ) : (
-                Grados Obtenidos <span className="required">*</span>
+                <div>No hay grado máximo registrado.</div>
-              </label>
+              )}
-              <input
-                type="text"
-                name="grados_obtenidos"
-                value={grados_obtenidos}
-                onChange={(e) => setGrados_obtenidos(e.target.value)}
-              />
             </div>
 
             <div className="form-group">
@@ -386,7 +393,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>
@@ -497,12 +504,49 @@ const FormEditProfesor = () => {
 
         {page === 4 && (
           <div className="form-section">
-            <h2>Lineas de Investigacion</h2>
+            <h2>Grados obtenidos</h2>
+            <div className="form-group">
+              {datosAcademicos.map((grado, index) => (
+                <div key={index} className="input-with-delete">
+                  <label>
+                    Grado obtenido {index + 1}
+                    <span className="required">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    name={`grados_obtenidos_${index}`}
+                    value={grado.grados_obtenidos}
+                    onChange={(e) =>
+                      handleGrados_obtenidosChange(index, e.target.value)
+                    }
+                  />
+                  <button
+                    type="button"
+                    className="delete-botones"
+                    onClick={() => deleteGrados_obtenidos(index)}
+                  ></button>
+                </div>
+              ))}
+            </div>
+
+            <button
+              type="button"
+              className="boton"
+              onClick={addGrados_obtenidos}
+            >
+              Agregar Grados
+            </button>
+          </div>
+        )}
+
+        {page === 5 && (
+          <div className="form-section">
+            <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
@@ -532,7 +576,7 @@ const FormEditProfesor = () => {
           </div>
         )}
 
-        {page === 5 && (
+        {page === 6 && (
           <div className="form-section">
             <h2>Proyectos Académicos</h2>
             <div className="form-group">
@@ -572,69 +616,76 @@ const FormEditProfesor = () => {
         <button type="submit" className="btn btn-primary boton">
           Guardar modificacion
         </button>
-
       </form>
 
       <nav aria-label="Page navigation example">
-          <ul className="pagination justify-content-center">
+        <ul className="pagination justify-content-center">
-            <li className={`page-item ${page === 1 ? "disabled" : ""}`}>
+          <li className={`page-item ${page === 1 ? "disabled" : ""}`}>
-              <button
+            <button
-                className="page-link prevButtons"
+              className="page-link prevButtons"
-                onClick={() => handlePageChange(page - 1)}
+              onClick={() => handlePageChange(page - 1)}
-              >
+            >
-                Anterior
+              Anterior
-              </button>
+            </button>
-            </li>
+          </li>
-            <li className={`page-item ${page === 1 ? "active" : ""}`}>
+          <li className={`page-item ${page === 1 ? "active" : ""}`}>
-              <button
+            <button
-                className="page-link buttons"
+              className="page-link buttons"
-                onClick={() => handlePageChange(1)}
+              onClick={() => handlePageChange(1)}
-              >
+            >
-                1
+              1
-              </button>
+            </button>
-            </li>
+          </li>
-            <li className={`page-item ${page === 2 ? "active" : ""}`}>
+          <li className={`page-item ${page === 2 ? "active" : ""}`}>
-              <button
+            <button
-                className="page-link buttons"
+              className="page-link buttons"
-                onClick={() => handlePageChange(2)}
+              onClick={() => handlePageChange(2)}
-              >
+            >
-                2
+              2
-              </button>
+            </button>
-            </li>
+          </li>
-            <li className={`page-item ${page === 3 ? "active" : ""}`}>
+          <li className={`page-item ${page === 3 ? "active" : ""}`}>
-              <button
+            <button
-                className="page-link buttons"
+              className="page-link buttons"
-                onClick={() => handlePageChange(3)}
+              onClick={() => handlePageChange(3)}
-              >
+            >
-                3
+              3
-              </button>
+            </button>
-            </li>
+          </li>
-            <li className={`page-item ${page === 4 ? "active" : ""}`}>
+          <li className={`page-item ${page === 4 ? "active" : ""}`}>
-              <button
+            <button
-                className="page-link buttons"
+              className="page-link buttons"
-                onClick={() => handlePageChange(4)}
+              onClick={() => handlePageChange(4)}
-              >
+            >
-                4
+              4
-              </button>
+            </button>
-            </li>
+          </li>
-            <li className={`page-item ${page === 5 ? "active" : ""}`}>
+          <li className={`page-item ${page === 5 ? "active" : ""}`}>
-              <button
+            <button
-                className="page-link buttons"
+              className="page-link buttons"
-                onClick={() => handlePageChange(5)}
+              onClick={() => handlePageChange(5)}
-              >
+            >
-                5
+              5
-              </button>
+            </button>
-            </li>
+          </li>
-            <li className={`page-item ${page === 5 ? "disabled" : ""}`}>
+          <li className={`page-item ${page === 6 ? "active" : ""}`}>
-              <button
+            <button
-                className="page-link nextButtons"
+              className="page-link buttons"
-                onClick={() => handlePageChange(page + 1)}
+              onClick={() => handlePageChange(6)}
-              >
+            >
-                Siguiente
+              6
-              </button>
+            </button>
-            </li>
+          </li>
-          </ul>
+          <li className={`page-item ${page === 6 ? "disabled" : ""}`}>
-        </nav>
+            <button
+              className="page-link nextButtons"
+              onClick={() => handlePageChange(page + 1)}
+            >
+              Siguiente
+            </button>
+          </li>
+        </ul>
+      </nav>
     </div>
   );
 };

src/components/Teacher/PerfilProfesor/PerfilProfesor.css

@@ -3,13 +3,14 @@
   align-items: center;
   justify-content: space-evenly;
   margin-bottom: 20px;
+  gap: 20px;
 }
 
 .foto {
   width: auto;
   max-width: 40vw;
   height: 250px;
-  max-height: 25vh;
+  max-height: 50vh;
   border-radius: 1em;
   object-fit: cover;
 }
@@ -27,7 +28,7 @@
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: white;
-  margin: 20px auto;
+  margin: 10px auto;
   width: 800px;
   max-width: 90vw;
 }
@@ -38,6 +39,11 @@
   align-items: start;
 }
 
+.list{
+  margin-left: 20px;
+  list-style: circle;
+}
+
 
 .datos-academicos,
 .lineas-investigacion,

src/components/Teacher/PerfilProfesor/PerfilProfesor.js

@@ -13,6 +13,8 @@ import {
   useTeacher,
 } from "../../../services/teacher.services";
 
+const API_URL = process.env.REACT_APP_API_URL;
+
 const defaultImage =
   "https://static.vecteezy.com/system/resources/thumbnails/020/765/399/small_2x/default-profile-account-unknown-icon-black-silhouette-free-vector.jpg";
 
@@ -73,6 +75,23 @@ const PerfilProfesor = () => {
     window.history.back();
   };
 
+  const splitTextToListItems = (text) => {
+    const parts = text.split(".").filter((part) => part.trim() !== "");
+
+    return parts.map((part, index) => {
+      const formattedPart = part.trim() + (index < parts.length - 1 ? "." : "");
+      return (
+        <li key={index} className="list">
+          {formattedPart}
+        </li>
+      );
+    });
+  };
+
+  const handleImageError = (e) => {
+    e.target.src = defaultImage;
+  };
+
   return (
     <div className="form-container">
       <div className="containerButton">
@@ -83,8 +102,20 @@ const PerfilProfesor = () => {
       <div className="perfil-profesor">
         <div className="foto-nombre">
           {fotoProfesor && fotoProfesor.startsWith("http") ? (
-            <img src={fotoProfesor} alt={profesor.nombre} className="foto" />
+            <img
-          ) : null}
+              src={fotoProfesor}
+              alt={profesor.nombre}
+              className="foto"
+              onError={handleImageError}
+            />
+          ) : (
+            <img
+              src={`${API_URL}/imagenes/${profesor.fotografia}`}
+              alt={profesor.nombre}
+              className="foto"
+              onError={handleImageError}
+            />
+          )}
 
           <div className="info">
             <div className="nombre">
@@ -120,22 +151,34 @@ const PerfilProfesor = () => {
             <h4>Datos académicos</h4>
           </div>
           <ul>
-            {profesor.datosAcademicos.map((datosAcademicos, index) => (
+            <li>
-              <React.Fragment key={index}>
+              <strong>Grado Máximo:</strong>
-                <li key={`grado_maximo_${index}`}>
+              {profesor.datosAcademicos.length > 0 ? (
-                  <strong>Grado Máximo:</strong>
+                profesor.datosAcademicos[0].grado_maximo ? (
-                  {datosAcademicos.grado_maximo
+                  <>{profesor.datosAcademicos[0].grado_maximo}</>
-                    ? datosAcademicos.grado_maximo
+                ) : (
-                    : "NO encontrado"}
+                  <>No hay Grado Máximo registrado.</>
-                </li>
+                )
-                <li key={`grados_obtenidos_${index}`}>
+              ) : (
-                  <strong>Grados Obtenidos:</strong>
+                <li>No hay Datos Académicos registrados.</li>
-                  {datosAcademicos.grados_obtenidos
+              )}
-                    ? datosAcademicos.grados_obtenidos
+            </li>
-                    : "NO encontrado"}
+
-                </li>
+            <strong>Grados Obtenidos:</strong>
-              </React.Fragment>
+            <ul>
-            ))}
+              {profesor.datosAcademicos.length > 0 ? (
+                profesor.datosAcademicos.map((item, index) =>
+                  item.grados_obtenidos ? (
+                    <li key={`grado_obtenido_${index}`}>
+                      {splitTextToListItems(item.grados_obtenidos)}
+                    </li>
+                  ) : null
+                )
+              ) : (
+                <li>No hay Grados registrados.</li>
+              )}
+            </ul>
+
             <li>
               <strong>Categoría:</strong>
               {categoriaProfesor ? categoriaProfesor.categoria : "No ubicado"}
@@ -154,12 +197,16 @@ const PerfilProfesor = () => {
             <h4>Líneas de investigación</h4>
           </div>
           <ul>
+            <strong>Investigaciones:</strong>
             {profesor.lineasInvestigacion.length > 0 ? (
               profesor.lineasInvestigacion.map((linea, index) => (
-                <li key={index}>
+                <div key={index}>
-                  <strong>Investigacion {index + 1}:</strong>
+                  <ul>
-                  {linea.lineas_inv_html ? linea.lineas_inv_html : "NO encontrado"}
+                    {linea.lineas_inv_html
-                </li>
+                      ? splitTextToListItems(linea.lineas_inv_html)
+                      : null}
+                  </ul>
+                </div>
               ))
             ) : (
               <li>No hay líneas de investigación registradas.</li>
@@ -172,12 +219,16 @@ const PerfilProfesor = () => {
             <h4>Proyectos académicos</h4>
           </div>
           <ul>
+            <strong>Proyectos:</strong>
             {profesor.proyectosAcademicos.length > 0 ? (
               profesor.proyectosAcademicos.map((proyecto, index) => (
-                <li key={index}>
+                <div key={index}>
-                  <strong>Proyecto {index + 1}:</strong>
+                  <ul>
-                  {proyecto.proyecto_html ? proyecto.proyecto_html : "NO encontrado"}
+                    {proyecto.proyecto_html
-                </li>
+                      ? splitTextToListItems(proyecto.proyecto_html)
+                      : null}
+                  </ul>
+                </div>
               ))
             ) : (
               <li>No hay proyectos académicos registrados.</li>
@@ -207,7 +258,7 @@ const PerfilProfesor = () => {
         </div>
 
         {showDialog && (
-          <div className="dialog">
+          <div className="dialog" style={{ position: "fixed" }}>
             <p>
               ¿Deseas eliminar al profesor <strong>{profesor.nombre}</strong>?
             </p>

src/components/User/ModificarUsuario/MDUser.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import "../../../App.css";
-import { PrivateRoutes } from "../../../models/routes";
 import { useUser, useUpdateUser } from "../../../services/user.services";
 
 const MDUser = () => {

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;
+  width: 50px;
-  max-width: 40vw;
+  max-width: 10vw;
 }
 
 .footer {
@@ -20,9 +22,10 @@
   text-align: center;
   bottom: 0;
   margin-top: auto;
+  padding: 10px;
 }
 
 .footer .container {
-  max-width: 1200px;
+  max-width: 90%;
   margin: 0 auto;
 }

src/guards/id.guard.js

@@ -7,7 +7,6 @@ const Id = () => {
     const jwtPermissions = () => {
       const jwtToken = localStorage.getItem("Token");
       if (!jwtToken) {
-        console.error("No se encontró el token en localStorage");
         return;
       }
 

src/guards/route.guard.js

@@ -7,7 +7,6 @@ const Guard = () => {
     const jwtPermissions = () => {
       const jwtToken = localStorage.getItem("Token");
       if (!jwtToken) {
-        console.error("No se encontró el token en localStorage");
         return;
       }
 

src/index.css

@@ -11,3 +11,6 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+*{
+  scrollbar-width: none;
+}

src/services/auth.services.js

@@ -77,7 +77,7 @@ export const useUploadImage = () => {
       }
 
       const result = await response.json();
-      return `${API_URL}${result.imageUrl}`;
+      return result.imageUrl;
     } catch (error) {
       throw error;
     }
@@ -112,7 +112,7 @@ export const useUpdateImage = () => {
       }
 
       const result = await response.json();
-      return `${API_URL}${result.imageUrl}`;
+      return result.imageUrl;
     } catch (error) {
       throw error;
     }

src/services/teacher.services.js

@@ -117,34 +117,37 @@ export const useTeachers = (currentPage, filters) => {
 export const useRegisterTeacher = () => {
   const token = useToken();
 
-  const registerTeacher = (teacherData) => {
+  const registerTeacher = async (teacherData) => {
-    return fetch(`${API_URL}/profesor`, {
+    try {
-      method: "POST",
+      const response = await fetch(`${API_URL}/profesor`, {
-      headers: {
+        method: "POST",
-        "Content-Type": "application/json",
+        headers: {
-        Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
-      },
+          Authorization: `Bearer ${token}`,
-      body: JSON.stringify(teacherData),
+        },
-    })
+        body: JSON.stringify(teacherData),
-      .then((response) => {
-        if (!response.ok) {
-          console.error("Error:");
-        }
-        return response.json();
-      })
-      .then((data) => {
-        console.log("Success:", data);
-        window.location.href = PublicRoutes.FILTER;
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-        throw error;
       });
+
+      if (!response.ok) {
+        console.error("Error:");
+        throw new Error("Error registering teacher");
+      }
+
+      const data = await response.json();
+      console.log("Success:", data);
+
+      return data.id_profesor;
+
+    } catch (error) {
+      console.error("Error:", error);
+      throw error;
+    }
   };
 
   return { registerTeacher };
 };
 
+
 export const useTeacher = (id_profesor) => {
   const [teacher, setTeacher] = useState(null);
 
@@ -196,3 +199,32 @@ export const useUpdateTeacher = () => {
 
   return { updateTeacher };
 };
+
+export const useUpdateTeacherImage = () => {
+  const token = useToken();
+
+  const updateTeacherImage = async (id_profesor, imageUrl) => {
+    try {
+      const response = await fetch(`${API_URL}/profesor/${id_profesor}/image`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ fotografia: imageUrl }),
+      });
+
+      if (!response.ok) {
+        console.error("Error updating teacher image");
+        throw new Error("Error updating teacher image");
+      }
+
+      console.log("Image URL updated successfully");
+    } catch (error) {
+      console.error("Error:", error);
+      throw error;
+    }
+  };
+
+  return { updateTeacherImage };
+};