tring to fix styles problems

app/(private)/ActivosMantenimiento/page.tsx

@@ -1,7 +1,6 @@
 import Areas from "@/app/Components/ActivosMantenimiento/Areas";
-import Mesas from "@/app/Components/ActivosMantenimiento/Mesas";
-import Equipos from "@/app/Components/Equipos/equipos";
-import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
+import MesasDisponibles from "@/app/Components/ActivosMantenimiento/MesasDisponibles";
+import TableEquipos from "@/app/Components/Equipos/tableequipos";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 
 export default async function Page(props: {
@@ -26,8 +25,7 @@ export default async function Page(props: {
             label: "Equipos",
             content: (
               <>
-                <SearchUser value={numAcount} />
-                <Equipos />
+                <TableEquipos />
               </>
             ),
           },
@@ -42,10 +40,10 @@ export default async function Page(props: {
           },
           {
             key: "Mesas",
-            label: "Liberar mesa",
+            label: "Mesas",
             content: (
               <>
-                <Mesas />
+                <MesasDisponibles/>
               </>
             ),
           },

app/(private)/AgregarTiempo/page.tsx

@@ -21,7 +21,7 @@ export default async function Page(props: {
 
     if (result.error) {
       toast.error("Alumno no encontrado");
-      return
+      return;
     } else {
       student = result;
     }
@@ -29,7 +29,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-
       <h2 className="title"> AGREGAR TIEMPO </h2>
 
       <SearchUser value={numAcount} />
@@ -39,6 +38,17 @@ export default async function Page(props: {
           <Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
 
           <div className="addTime">
+            <div className="groupInput" style={{ marginBottom: "1rem" }}>
+              <label className="label">Seleccione el área</label>
+              <select>
+                <option value="0">windows</option>
+                <option value="1">ADOBE CREATIVE SUITE</option>
+                <option value="2">mmmmm</option>
+                <option value="3">mmmmm</option>
+                <option value="4">mmmmm</option>
+                <option value="5">mmmmm</option>
+              </select>
+            </div>
             <Receipt numAcount={student.id_cuenta} />
           </div>
         </>

app/(private)/AsignacionEquipo/page.tsx

@@ -52,17 +52,27 @@ export default async function Page(props: {
                     <Information
                       numerocuenta={student.id_cuenta}
                       nombre={student.nombre}
+                    />
+                    <Information
                       inscrito={"WINDOWS"}
                       tiempo={"9minutos"}
                       confirmo={"si/no"}
                     />
-                    <label>Seleccionar tiempo</label>
-                    <select name="" id=""></select>
-                    <label>Seleccione un equipo</label>
-                    <select name="" id=""></select>
-                    <button className="button buttonSearch">
-                      Asignar Equipo
-                    </button>
+                    {/* <div className="containerForm">
+                      <label style={{ marginTop: "1rem" }}>
+                        Seleccionar tiempo
+                      </label>
+                      <select></select>
+                      <label style={{ marginTop: "1rem" }}>
+                        Seleccione un equipo
+                      </label>
+                      <div className="groupInput">
+                        <select></select>
+                        <button className="button buttonSearch">
+                          Asignar Equipo
+                        </button>
+                      </div>
+                    </div> */}
                   </>
                 )}
               </>

app/(private)/AsignacionMesas/page.tsx

@@ -49,12 +49,19 @@ export default async function Page(props: {
                       cuenta={student.id_cuenta}
                       nombre={student.nombre}
                     />
-                    <AsignacionMesas />
+                  {/* <div
+                    className="containerForm"
+                    style={{ margin: "1rem 0" }}
+                  >
                     <label>Tiempo</label>
-                    <select name="" id="">
-                      <option value="1">Seleciona el tiempo </option>{" "}
-                    </select>
-                    <button className="button buttonSearch">Asignar</button>
+                    <div className="groupInput">
+                      <select name="" id="">
+                        <option value="1">Seleciona el tiempo </option>{" "}
+                      </select>
+                      <button className="button buttonSearch">Asignar</button>
+                    </div>
+                  </div> */}
+                    <AsignacionMesas />
                   </>
                 )}
               </>

app/(private)/BitacoraSanciones/page.tsx

@@ -2,6 +2,7 @@ import BitacoraAlumno from "@/app/Components/BitacoraSanciones/BitacoraAlumno";
 import BitacoraEquipo from "@/app/Components/BitacoraSanciones/BitacoraEquipo";
 import BitacoraMesas from "@/app/Components/BitacoraSanciones/BitacoraMesas";
 import Sanciones from "@/app/Components/BitacoraSanciones/Sanciones";
+import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import { GetStudent } from "@/app/lib/getStudent";
 
@@ -48,6 +49,7 @@ export default async function Page(props: {
             label: "Bitacora alumno",
             content: (
               <>
+              <SearchUser value={numAcount}/>
                 <BitacoraAlumno />
               </>
             ),

app/(private)/Inscripcion/page.tsx

@@ -29,7 +29,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-      
       {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
 
       <h2 className="title"> INSCRIPCIÓN </h2>
@@ -44,8 +43,26 @@ export default async function Page(props: {
             Carrera={student.carrera.carrera}
             Credito={student.credito}
           />
+
+          <Information
+            inscrito={"WINDOWS"}
+            tiempo={"9minutos"}
+            confirmo={"si/no"}
+          />
           <section className="inscripcion">
             <Selection />
+
+            <select
+              style={{
+                marginBottom: "1rem",
+                maxWidth: "100px",
+                minWidth: "100px",
+              }}
+            >
+              <option value="0">con pago</option>
+              <option value="1">sin pago</option>
+            </select>
+
             <Receipt numAcount={student.id_cuenta} />
           </section>
         </>

app/(private)/Mensajes/page.tsx

@@ -22,6 +22,7 @@ export default async function Page(props: {
             label: "Equipo",
             content: (
               <EnviarMensaje
+              key={1}
                 titulo="Seleccione un equipo"
                 opciones={["1", "2", "3", "4", "5", "6"]}
               />
@@ -32,6 +33,7 @@ export default async function Page(props: {
             label: "Sala",
             content: (
               <EnviarMensaje
+              key={2}
                 titulo="Seleccione una sala"
                 opciones={["PECERA", "PCNET1", "PCNET2", "PCNET3"]}
               />

app/(private)/Monitor/page.tsx

@@ -9,25 +9,50 @@ export default async function Page(props: {
   const numAcount = params?.numAcount ? params.numAcount : null;
 
   return (
-    <section className='containerSection'>
-      <h2 className='title'> MONITOR DE MÁQUINAS DISPONIBLES </h2>
+    <section className="containerSection">
+      <h2 className="title"> MONITOR DE MÁQUINAS DISPONIBLES </h2>
 
       <div className={styles.actions}>
-        <button className={styles.resetButton}>
-          Actualizar informacion
-        </button>
+        <button className={styles.resetButton}>Actualizar informacion</button>
       </div>
 
       <div className={styles.tableContainer}>
         <table className={styles.machineTable}>
           <thead>
-            <tr>
+            <tr style={{fontSize:"15px"}}>
               <th>Ubicación</th>
               <th>Nombre Equipo</th>
               <th>Plataforma</th>
               <th>Área</th>
               <th>Disponible</th>
             </tr>
+            <tr>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>pcnet1</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>mostrar todos</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>windows</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>mostrar Todo</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>si</option>
+                </select>
+              </th>
+            </tr>
           </thead>
           <tbody>
             {/* {machines.map((machine, index) => (
@@ -47,4 +72,4 @@ export default async function Page(props: {
     </section>
   );
 }
-//IO
+//IO

app/(private)/QuitarSancion/page.tsx

@@ -10,18 +10,14 @@ export default async function Page(props: {
   const numAcount = params?.numAcount ? params.numAcount : null;
 
   return (
-    <div
-      style={{
-        display: "flex",
-        gap: "1rem",
-        flexDirection: "column",
-        paddingRight: "350px",
-      }}
-    >
+    <>
       <h2 className="title"> Quitar Sanciones </h2>
-      <SearchUser value={numAcount} />
-      <QuitarSancion />
-    </div>
+      <div className="containerSection"
+      >
+        <SearchUser value={numAcount} />
+        <QuitarSancion />
+      </div>
+    </>
   );
 }
 //IO

app/(private)/Reportes/page.tsx

@@ -21,7 +21,8 @@ export default function Page() {
             content: (
               <>
                 <SearchDateBetween />
-                <PorRecibos />
+                <PorServicios />
+
               </>
             ),
           },
@@ -32,7 +33,7 @@ export default function Page() {
             content: (
               <>
                 <SearchDateBetween />
-                <PorServicios />
+                <PorRecibos />
               </>
             ),
           },

app/Components/ActivosMantenimiento/Areas.tsx

@@ -37,11 +37,10 @@ export default function Areas() {
 
   return (
     <form className="containerForm" onSubmit={handleActualizar}>
-      <label className="label">Áreas disponibles:</label>
-      <div className="groupInput" style={{display:"flex", flexDirection:"column"}}>
-        {/* Select de áreas */}
+      <label className="label">Áreas</label>
+      <div className="groupInput">
         <select value={area} onChange={(e) => setArea(e.target.value)}>
-          <option value="">-- Áreas disponibles --</option>
+          <option value="">-- Áreas --</option>
           <option value="PECERA">PECERA</option>
           <option value="JAULA">JAULA</option>
           <option value="HUACAL">HUACAL</option>

app/Components/ActivosMantenimiento/MesasDisponibles.tsx

@@ -0,0 +1,33 @@
+import styles from "./Page.module.css";
+
+export default async function MesasDisponibles() {
+  return (
+    <section className="containerSection">
+
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr style={{fontSize:"15px"}}>
+              <th>Mesa</th>
+              <th>Activo</th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* {machines.map((machine, index) => (
+              <tr key={index}>
+                <td>{machine.ubicacion}</td>
+                <td>{machine.nombre}</td>
+                <td>{machine.plataforma}</td>
+                <td>{machine.area}</td>
+                <td className={machine.disponible ? "disponible" : ""}>
+                  {machine.disponible ? "si" : "no"}
+                </td>
+              </tr>
+            ))} */}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+//IO

app/Components/ActivosMantenimiento/Page.module.css

@@ -0,0 +1,70 @@
+.tableContainer {
+    overflow-y: auto;
+    overflow-x: auto;
+    border-radius: 4px;
+    border: 1px solid #cfcfcf;
+    max-height: 430px;
+    scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+    background-color: #f9f9f9;
+    width: 100%;
+}
+
+.machineTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+}
+
+.machineTable th,
+.machineTable td {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid #cfcfcf;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.machineTable th {
+    position: sticky;
+    top: 0px;
+    background-color: rgb(1, 92, 184);
+    color: white;
+}
+
+.machineTable tr {
+    min-width: 400px;
+}
+
+.disponible {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    color: green;
+    font-weight: bold;
+}
+
+.ocupado {
+    color: red;
+    font-weight: bold;
+}
+
+
+.actions {
+    text-align: center;
+}
+
+.resetButton {
+    padding: 8px 16px;
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.resetButton:hover {
+    background-color: #cc0000;
+}

app/Components/BitacoraSanciones/BitacoraAlumno.tsx

@@ -15,7 +15,7 @@ function BitacoraAlumno() {
   return (
     <>
       <SearchDate />
-      <div className={styles.tableContainer}>
+      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
         <table className={styles.machineTable}>
           <thead>
             <tr>

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -33,7 +33,7 @@ function BitacoraEquipo() {
           </button>
         </div>
       </form>
-      <div className={styles.tableContainer}>
+      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
         <table className={styles.machineTable}>
           <thead>
             <tr>

app/Components/BitacoraSanciones/BitacoraMesas.tsx

@@ -18,7 +18,7 @@ function BitacoraMesas() {
   return (
     <>
       <SearchDate />
-      <div className={styles.tableContainer}>
+      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
         <table className={styles.machineTable}>
           <thead>
             <tr>

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -20,7 +20,7 @@ export default async function Sanciones(props: { student?: Student }) {
             Nombre={props.student.nombre}
           />
 
-        <TableSancion  />
+        <TableSancion />
         </>
       )}
     </>

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -41,8 +41,7 @@ export default function TableSancion() {
   
   return (
     <>
-      <h1>{sanciones}</h1>
-      <div className={styles.tableContainer}>
+      <div className={styles.tableContainer} style={{margin:"1rem 0"}}>
         <table className={styles.machineTable}>
           <thead>
             <tr>
@@ -65,7 +64,7 @@ export default function TableSancion() {
           </select>
         </div>
       </form>
-      <button className="button buttonSearch" onClick={handlebutton}>
+      <button className="button buttonSearch" style={{margin:"1rem 0"}} onClick={handlebutton}>
         Aplicar sanción
       </button>
     </>

app/Components/Equipos/Page.module.css

@@ -0,0 +1,70 @@
+.tableContainer {
+    overflow-y: auto;
+    overflow-x: auto;
+    border-radius: 4px;
+    border: 1px solid #cfcfcf;
+    max-height: 430px;
+    scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+    background-color: #f9f9f9;
+    width: 100%;
+}
+
+.machineTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+}
+
+.machineTable th,
+.machineTable td {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid #cfcfcf;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.machineTable th {
+    position: sticky;
+    top: 0px;
+    background-color: rgb(1, 92, 184);
+    color: white;
+}
+
+.machineTable tr {
+    min-width: 400px;
+}
+
+.disponible {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    color: green;
+    font-weight: bold;
+}
+
+.ocupado {
+    color: red;
+    font-weight: bold;
+}
+
+
+.actions {
+    text-align: center;
+}
+
+.resetButton {
+    padding: 8px 16px;
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.resetButton:hover {
+    background-color: #cc0000;
+}

app/Components/Equipos/equipos.tsx

@@ -74,7 +74,7 @@ export default function Equipos() {
             <option value="4">mmmmm</option>
             <option value="5">mmmmm</option>
           </select>
-          <div className="containerButton">
+          <div className="containerButton" style={{marginTop:"1rem"}}>
             <button className="button buttonSearch">Nuevo</button>
             <button className="button buttonSearch">Editar</button>
           </div>

app/Components/Equipos/tableequipos.tsx

@@ -0,0 +1,63 @@
+import styles from "./Page.module.css";
+
+export default async function TableEquipos() {
+  return (
+    <section className="containerSection">
+
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr style={{fontSize:"15px"}}>
+              <th>Ubicación</th>
+              <th>Nombre</th>
+              <th>Plataforma</th>
+              <th>Área</th>
+              <th>Activo</th>
+            </tr>
+            <tr>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>pcnet1</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>mostrar todos</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>windows</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>mostrar Todo</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>si</option>
+                </select>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* {machines.map((machine, index) => (
+              <tr key={index}>
+                <td>{machine.ubicacion}</td>
+                <td>{machine.nombre}</td>
+                <td>{machine.plataforma}</td>
+                <td>{machine.area}</td>
+                <td className={machine.disponible ? "disponible" : ""}>
+                  {machine.disponible ? "si" : "no"}
+                </td>
+              </tr>
+            ))} */}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+//IO

app/Components/EviarMensaje/EnviarMensaje.tsx

@@ -51,6 +51,7 @@ const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
             </option>
           ))}
         </select>
+        <input type="checkbox" style={{minWidth:"20px", width:"20px",maxWidth:"30px"}}/>
       </div>
 
       {/* Mensaje personalizado */}
@@ -62,10 +63,12 @@ const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
           onChange={(e) => setCustomMsg(e.target.value)}
           placeholder="Escribe tu mensaje..."
         />
+        <input type="checkbox" style={{minWidth:"20px", width:"20px",maxWidth:"30px"}}/>
       </div>
 
+
       {/* Botón de enviar */}
-      <button className="button buttonSearch" type="submit">
+      <button className="button buttonSearch" type="submit" style={{marginTop:"1rem"}}>
         Mandar mensaje
       </button>
     </form>

app/Components/QuitarSancion/Page.module.css

@@ -6,7 +6,6 @@
   max-height: 430px;
   scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
   background-color: #f9f9f9;
-  width: 65%;
 }
 
 .machineTable {

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -16,7 +16,7 @@ function QuitarSancion() {
   const [quitarSanciones, SetQuitarSanciones] = useState<quitarSanciones[]>([]);
   return (
     <section className="containerSection">
-      <div className={styles.tableContainer}>
+      <div className={styles.tableContainer} style={{margin:"1rem 0"}}>
         <table className={styles.machineTable}>
           <thead>
             <tr>
@@ -42,7 +42,7 @@ function QuitarSancion() {
           </tbody>
         </table>
       </div>
-      <button className="button buttonSearch">Quitar Sanción</button>
+      <button className="button buttonSearch" style={{marginTop:"1rem"}}>Quitar Sanción</button>
     </section>
   );
 }