Funcion ver datos profe

src/App.css

@@ -109,17 +109,6 @@
   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;
 }
@@ -238,24 +227,6 @@ 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;
@@ -315,42 +286,9 @@ 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");
   filter: invert(1);
@@ -396,7 +334,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  min-width: 100vw;
+  background-color: #f5f5f7;
 }
 
 h2.text-warning {

src/App.js

@@ -26,10 +26,11 @@ 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 />
@@ -59,7 +60,7 @@ const App = () => {
             path={`${PublicRoutes.DATAPROFESOR}:id_profesor`}
             element={<PerfilProfesor />}
           />
-          <Route path={PublicRoutes.FILTER} element={<FilterProfesor />} />
+          <Route path={PublicRoutes.FILTER} element={<HomeView />} />
 
           {!permissions && ( //only when you don't have permissions, can you pass
             <Route path={PublicRoutes.LOGIN} element={<Login />} />

src/components/Card/Card.css

@@ -1,18 +1,4 @@
-.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;
@@ -29,11 +15,6 @@
   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,9 +29,4 @@
     align-items: stretch;
   }
 
-  .form-control,
-  .btn {
-    width: 100%;
-    margin: 5px 0;
-  }
 }

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

@@ -16,7 +16,9 @@ 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();
@@ -30,80 +32,10 @@ function FilterProfesor() {
   };
 
   return (
-    <div className="main">
+    <div>
       <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="">Adscripcion</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="">Categoria</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,6 +18,7 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
     loading: loadingData,
     error: errorData,
   } = useTeachers(currentPage, filters);
+
   const {
     profesores: profesoresActivesData,
     totalPages: totalActivePages,
@@ -62,7 +63,7 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
       });
     }
   }, [loadingData, loadingActives, profesores, currentPage]);
-  
+
   useEffect(() => {
     setTimeout(() => {
       window.scrollTo({ top: 0, behavior: "smooth" });
@@ -98,12 +99,12 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
       setCurrentPage((prevPage) => prevPage + 1);
     }
   };
-  
+
   const handlePrevPage = () => {
     if (currentPage > 1) {
       setCurrentPage((prevPage) => prevPage - 1);
     }
-  };  
+  };
 
   const renderPageNumbers = () => {
     const pageNumbers = [];
@@ -142,10 +143,10 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
   };
 
   return (
-    <div className="main-content">
+    <div className="">
       {permissions ? (
         <div className="containerButton">
-          <button className="blueButton" onClick={handleRegresar}>
+          <button className="btn btn-primary" onClick={handleRegresar}>
             Regresar
           </button>
           <button className="blueButton" onClick={handleCrear}>
@@ -153,8 +154,14 @@ const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => {
           </button>
         </div>
       ) : null}
-
-      <div className="profesores-container">
+      <div className="container border">
+        <div className="row">
+          {profesores.map((profesor, index) => (
+            <div className="col-4">{profesor.nombre}</div>
+          ))}
+        </div>
+      </div>
+      {/*       <div className="profesores-container">
         {profesores.map((profesor, index) => {
           const edificio = edificios.find(
             (e) => e.id_edificio === profesor.id_edificio
@@ -176,8 +183,7 @@ 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

@@ -92,10 +92,10 @@ const MapeoUsuario = ({ filters }) => {
   return (
     <div className="main-content">
       <div className="containerButton">
-        <button className="blueButton" onClick={handleRegresar}>
+        <button className="btn btn-primary" onClick={handleRegresar}>
           Regresar
         </button>
-        <button className="blueButton" onClick={handleCrear}>
+        <button className="btn btn-primary" onClick={handleCrear}>
           Crear Usuario
         </button>
       </div>

src/components/Filter.js

@@ -0,0 +1,160 @@
+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/Login/LoginForm.js

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

@@ -0,0 +1,288 @@
+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

@@ -225,7 +225,7 @@ const FormProfesor = () => {
   return (
     <div className="form-container">
       <div className="containerButton">
-        <button className="blueButton" onClick={handleRegresar}>
+        <button className="btn btn-primary" onClick={handleRegresar}>
           Regresar
         </button>
       </div>
@@ -523,7 +523,7 @@ const FormProfesor = () => {
                   />
                   <button
                     type="button"
-                    className="delete-botones"
+                    className="btn btn-danger"
                     onClick={() => deleteGrados_obtenidos(index)}
                   ></button>
                 </div>

src/components/Teacher/ModificarProfesor/FormEditProfesor.js

@@ -208,7 +208,7 @@ const FormEditProfesor = () => {
   return (
     <div className="form-container">
       <div className="containerButton">
-        <button className="blueButton" onClick={handleRegresar}>
+        <button className="btn btn-primary" onClick={handleRegresar}>
           Regresar
         </button>
       </div>
@@ -528,14 +528,15 @@ const FormEditProfesor = () => {
                 </div>
               ))}
             </div>
-
+            <div className="d-flex justify-content-center">
             <button
               type="button"
-              className="boton"
+              className="btn btn-primary"
               onClick={addGrados_obtenidos}
-            >
+              >
               Agregar Grados de investigacion
             </button>
+              </div>
           </div>
         )}
 

src/components/Teacher/PerfilProfesor/PerfilProfesor.js

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

src/pages/Home/HomeView.js

@@ -0,0 +1,18 @@
+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>
+  );
+}