From 95a78384e8a474ca1e5dabf3b49e1692e8d8a831 Mon Sep 17 00:00:00 2001
From: TioSam77 <sammarw@gmail.com>
Date: Tue, 25 Jun 2024 15:25:37 -0600
Subject: [PATCH] Interfaz De Admin

---
 src/App.css                        |  2 +-
 src/App.js                         | 13 ++++---
 src/components/CardEditProfesor.js |  2 +-
 src/components/Formulario.css      | 13 ++++---
 src/components/InterAdmin.css      | 57 ++++++++++++++++++++++++++++++
 src/components/InterAdmin.js       | 31 ++++++++++++++++
 src/components/PerfilProfesor.css  |  1 -
 src/pages/InterAdminPage.js        | 25 +++++++++++++
 8 files changed, 129 insertions(+), 15 deletions(-)
 create mode 100644 src/components/InterAdmin.css
 create mode 100644 src/components/InterAdmin.js
 create mode 100644 src/pages/InterAdminPage.js

diff --git a/src/App.css b/src/App.css
index 17ada9b..47176d1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,7 +7,7 @@ body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
-  background-color: #f0f2f5;
+  background-color: #faefef7a;
 }
 
 .App {
diff --git a/src/App.js b/src/App.js
index 6aa9168..147d90f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,7 @@ import MDUser from './components/MDUser';
 import CardEditProfesorPage from './pages/CardEditProfesorPage';
 import FormEditProfesorPage from './pages/FormEditProfesorPage'; 
 import PerfilProfesor from "./components/PerfilProfesor";
+import InterAdmin from './components/InterAdmin';
 
 const App = () => {
   return (
@@ -21,13 +22,15 @@ const App = () => {
         <Header />
           <Routes>
             <Route path='*' element={<Directorio/>}></Route>
-            <Route path='/Formulario' element={<Directorio2/>}></Route>
+            <Route path="/profesor/perfil/:id" element={<PerfilProfesor />} />
             <Route path='/Acceso' element={<Login/>}></Route>
-            <Route path='/Modificacion y Borrado de Usuario' element={<MDUser/>}></Route>
-            <Route path='/Creacion de Usuario' element={<CrearUsuario/>}></Route>
-            <Route path="/Modificacion y Borrado de Profesor" element={<CardEditProfesorPage/>} />
+            <Route path="/Interfaz" element={<InterAdmin />} />
+            <Route path='Crear/Profesor' element={<Directorio2/>}></Route>
+            <Route path='/Creacion/Usuario' element={<CrearUsuario/>}></Route>
+
+            <Route path='/Usuario/editar/:id' element={<MDUser/>}></Route>
+            <Route path="/Editor/Profesor" element={<CardEditProfesorPage/>} />
             <Route path="/Profesor/editar/:id" element={<FormEditProfesorPage/>} />
-            <Route path="/perfil-profesor/:id" element={<PerfilProfesor />} />
             </Routes>
         <Footer />
       </Router>
diff --git a/src/components/CardEditProfesor.js b/src/components/CardEditProfesor.js
index 235c622..6ba6b2e 100644
--- a/src/components/CardEditProfesor.js
+++ b/src/components/CardEditProfesor.js
@@ -68,4 +68,4 @@ const CardEditProfesor = ({ profesor, edificioNombre, onDelete }) => {
   );
 };
 
-export default CardEditProfesor;
\ No newline at end of file
+export default CardEditProfesor;
diff --git a/src/components/Formulario.css b/src/components/Formulario.css
index 3201654..9026005 100644
--- a/src/components/Formulario.css
+++ b/src/components/Formulario.css
@@ -1,7 +1,7 @@
 .formulario-container {
   max-width: 800px;
   width: 90%;
-  margin:  20px auto;
+  margin: 20px auto;
   padding: 1.5em;
   background: #b3b1b1;
   box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
@@ -31,17 +31,16 @@ select {
 }
 
 button.small-button {
-  padding: 0.4em 1em;
-  font-size: 0.9em;
+  padding: 10px 10px !important; 
+  font-size: 1em;
   color: #fff;
   background-color: #007bff;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  justify-self: center; /* Centra horizontalmente */
-  align-self: center; /* Alinea arriba del contenedor */
-  width: 70px; /* Ancho automático */
-  margin-top: 1em; /* Espacio superior */
+  margin:auto !important; 
+  display: auto !important;
+  margin-top: auto !important;
 }
 
 button.small-button:hover {
diff --git a/src/components/InterAdmin.css b/src/components/InterAdmin.css
new file mode 100644
index 0000000..cf111ba
--- /dev/null
+++ b/src/components/InterAdmin.css
@@ -0,0 +1,57 @@
+.admin-interface {
+    display: flex;
+    align-content: center;
+    justify-content: center; /* Centrar horizontalmente */
+    flex-wrap: wrap; /* Permite que las secciones se envuelvan en varias líneas si es necesario */
+    gap: 20px; /* Espacio entre las secciones */
+    max-width: 500px; /* Ancho máximo para evitar que se extiendan demasiado */
+    margin: auto; /* Margen exterior y centrado horizontal */
+}
+
+.admin-section {
+    text-align: center;
+    margin-bottom: 20px; /* Espacio entre cada sección principal y los botones */
+    padding: 20px; /* Espaciado interno de la sección */
+    border-radius: 10px; /* Bordes redondeados */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
+    background-color: lightslategray; /* Color de fondo de las secciones */
+    flex: 1 1 calc(50% - 20px); /* Las secciones ocupan el 50% del espacio disponible menos el espacio entre ellas */
+    max-width: calc(50% - 20px); /* Ancho máximo para asegurar que no sean demasiado anchas */
+}
+
+.section-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Centrar horizontalmente */
+    justify-content: center; /* Centrar verticalmente */
+    margin-bottom: 10px; /* Espacio entre el título y la imagen */
+}
+
+.section-icon {
+    width: 150px; /* Tamaño de la imagen */
+    height: 150px;
+    margin: 0 auto; /* Centrar la imagen dentro de su contenedor */
+    display: block; /* Para asegurar que los márgenes automáticos funcionen */
+    border-radius: 50%; /* Hacer que la imagen sea circular si es necesario */
+}
+
+.admin-section h2 {
+    margin-top: 0;
+}
+
+.button-group {
+    margin-top: 10px; /* Espacio entre el título y los botones */
+}
+
+.action-button {
+    margin: 0 5px; /* Espacio entre los botones */
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.action-button:hover {
+    background-color: #0056b3;
+}
diff --git a/src/components/InterAdmin.js b/src/components/InterAdmin.js
new file mode 100644
index 0000000..89a0b94
--- /dev/null
+++ b/src/components/InterAdmin.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import './InterAdmin.css'; // Importar el archivo CSS para los estilos
+
+const InterAdmin = () => {
+    return (
+        <div className="admin-interface">
+            <div className="admin-section">
+                <div className="section-header">
+                    <h2>Usuarios</h2>
+                    <img src='https://w7.pngwing.com/pngs/1022/170/png-transparent-users-group-computer-icons-user-s-computer-website-internet-forum-thumbnail.png' alt="Usuarios" className="section-icon" />
+                </div>
+                <div className="button-group">
+                    <button className="action-button">Crear</button>
+                    <button className="action-button">Editar</button>
+                </div>
+            </div>
+            <div className="admin-section">
+                <div className="section-header">
+                    <h2>Profesores</h2>
+                    <img src= 'https://png.pngtree.com/png-clipart/20190516/original/pngtree-users-vector-icon-png-image_3725294.jpg' alt="Profesores" className="section-icon" />
+                </div>
+                <div className="button-group">
+                    <button className="action-button">Crear</button>
+                    <button className="action-button">Editar</button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default InterAdmin;
diff --git a/src/components/PerfilProfesor.css b/src/components/PerfilProfesor.css
index 5e457d3..c53e600 100644
--- a/src/components/PerfilProfesor.css
+++ b/src/components/PerfilProfesor.css
@@ -50,7 +50,6 @@
 }
 
 h3 {
-  background-color: #D59F0F;
   color: #fff;
   padding: 10px;
   border-radius: 10px;
diff --git a/src/pages/InterAdminPage.js b/src/pages/InterAdminPage.js
new file mode 100644
index 0000000..b99f26b
--- /dev/null
+++ b/src/pages/InterAdminPage.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import '../components/InterAdmin.css';
+
+const InterAdmin = () => {
+  return (
+    <div className="admin-container">
+      <div className="admin-section">
+        <h2>Encargados</h2>
+        <div className="button-group">
+          <button className="create-button">Crear</button>
+          <button className="edit-button">Editar</button>
+        </div>
+      </div>
+      <div className="admin-section">
+        <h2>Profesores</h2>
+        <div className="button-group">
+          <button className="create-button">Crear</button>
+          <button className="edit-button">Editar</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InterAdmin;