Interfaz validacion Admin

frontend/package.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.1",
     "axios": "^1.7.0",
     "bootstrap": "^5.3.3",
     "chart.js": "^4.4.3",
@@ -18,6 +21,7 @@
     "react-bootstrap-pagination-control": "^1.0.5",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
+    "react-pdf": "^8.0.2",
     "react-router-dom": "^6.23.1",
     "sweetalert2": "^11.11.0"
   },

frontend/src/App.jsx

@@ -1,16 +1,16 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Nav from "./Components/Nav";
+import './Styles/App.css';
 import Login from "./Views/Login";
 import Registro from "./Views/Registro";
-import './Styles/App.css';
 
-import ProtectorDeRutas from "./Components/ProtectorDeRutas";
-import OfertaEducativa from "./Views/OfertaEducativa";
-import Inscripcion from "./Views/Inscripcion";
-import ProtectorEstudiante from "./Components/ProtectorEstudiante";
 import ProtectorAdmin from "./Components/ProtectorAdmin";
-import ValidacionAdm from "./Views/ValidacionAdm";
+import ProtectorDeRutas from "./Components/ProtectorDeRutas";
+import ProtectorEstudiante from "./Components/ProtectorEstudiante";
 import Informacion from "./Views/Informacion";
+import Inscripcion from "./Views/Inscripcion";
+import OfertaEducativa from "./Views/OfertaEducativa";
+import ValidacionAdm from "./Views/ValidacionAdm";
 
 function App() {
   return (
@@ -19,7 +19,7 @@ function App() {
       <Routes>
         <Route path="/login" element={<Login />} />
         <Route path="/registro" element={<Registro />} />
-        <Route element={<ProtectorDeRutas />}>
+          <Route element={<ProtectorDeRutas />}>
           <Route path="/home" element={<OfertaEducativa />} />
           <Route path="/info" element={<Informacion />} />
           <Route  element={<ProtectorAdmin />}>

frontend/src/Views/ValidacionAdm.jsx

@@ -1,9 +1,98 @@
-import React from 'react'
+import React, { useState } from 'react';
+
+
 
 const ValidacionAdm = () => {
-  return (
+  const [loading, setLoading] = useState(true);
-    <div>ValidacionAdm</div>
-  )
-}
 
-export default ValidacionAdm
+  const handleLoad = () => {
+    setLoading(false);
+  };
+
+  return (
+    <div className="container mt-4">
+      <h1 className="text-center mb-4">Validacion Administrativa</h1>
+
+      <div className="input-group mb-3 justify-content-center">
+        <div className="input-group-prepend">
+          <button className="btn btn-sm p-0 border-0" type="button">
+            <img src="left-arrow.png" alt="Icono de flecha izquierda" style={{ width: '20px', height: '20px' }} />
+          </button>
+        </div>
+        <input type="text" className="form-control form-control-sm text-center" style={{ maxWidth: '250px' }} placeholder="Aqui aparece la matricula" />
+        <div className="input-group-append">
+          <button className="btn btn-sm p-0 border-0" type="button">
+            <img src="right-arrow.png" alt="Icono de flecha derecha" style={{ width: '20px', height: '20px' }} />
+          </button>
+        </div>
+      </div>
+
+
+      <div className="card mb-4">
+        <div className="card-body">
+          <h2 className="card-title">Datos del Alumno</h2>
+          <div className="row">
+            <div className="col-md-6">
+              <p className="card-text"><strong>Nombre:</strong> { } </p>
+              <p className="card-text"><strong>Apellido:</strong>{ } </p>
+              <p className="card-text"><strong>Matricula:</strong> { }</p>
+              <p className="card-text"><strong>Correo:</strong>{ } </p>
+              <p className="card-text"><strong>Nacionalidad:</strong>{ } </p>
+              <p className="card-text"><strong>Tipo de sangre:</strong>{ } </p>
+              <p className="card-text"><strong>Fecha de nacimiento:</strong>{ } </p>
+              <p className="card-text"><strong>CURP:</strong>{ } </p>
+              <p className="card-text"><strong>Carrera:</strong>{ } </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card mb-4">
+        <div className="card-body">
+          <h2 className="card-title">Datos del Tutor</h2>
+          <div className="row">
+            <div className="col-md-6">
+              <p className="card-text"><strong>Nombre:</strong> { } </p>
+              <p className="card-text"><strong>Apellido:</strong>{ } </p>
+              <p className="card-text"><strong>Teléfono:</strong>{ }</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card mb-4">
+        <div className="card-body">
+          <h2 className="card-title">Documentos de Alumno</h2>
+          <div className="pdf-container mb-4">
+            <p className="card-text"><strong>Acta de Nacimiento:</strong> </p>
+            <embed src={"mapa_curri_TC.pdf"} type="application/pdf" width="100%" height="300px" onLoad={handleLoad} />
+            <div className="d-flex justify-content-center mt-3">
+              <button className="btn btn-primary btn-sm me-1">Aceptar Documentos</button>
+              <button className="btn btn-primary btn-sm ms-1">Rechazar Documentos</button>
+            </div>
+          </div>
+          <div className="pdf-container mb-4">
+            <p className="card-text"><strong>Constancia de estudios :</strong> </p>
+            <embed src={"mapa_curri_TC.pdf"} type="application/pdf" width="100%" height="300px" onLoad={handleLoad} />
+            <div className="d-flex justify-content-center mt-3">
+              <button className="btn btn-primary btn-sm me-1">Aceptar Documentos</button>
+              <button className="btn btn-primary btn-sm ms-1">Rechazar Documentos</button>
+            </div>
+          </div>
+          <div className="pdf-container mb-4">
+            <p className="card-text"><strong>Fotografia:</strong> </p>
+            <embed src={"mapa_curri_TC.pdf"} type="application/pdf" width="100%" height="300px" onLoad={handleLoad} />
+            <div className="d-flex justify-content-center mt-3">
+              <button className="btn btn-primary btn-sm me-1">Aceptar Documentos</button>
+              <button className="btn btn-primary btn-sm ms-1">Rechazar Documentos</button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  );
+};
+
+export default ValidacionAdm;