new view and components

app/ActivosMantenimiento/page.tsx

@@ -2,10 +2,9 @@ import SearchUser from "../Components/SearchUser/searchUser";
 
 export default function Page() {
   return (
-    <section className='containerForm'>
+    <section className='containerSection'>
       <h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
 
-      <SearchUser/>
     </section>
 
   );

app/AgregarTiempo/page.tsx

@@ -2,7 +2,7 @@ import SearchUser from "../Components/SearchUser/searchUser";
 
 export default function Page() {
   return (
-    <section className='containerForm'>
+    <section className='containerSection'>
       <h2 className='title'> AGREGAR TIEMPO </h2>
 
       <SearchUser/>

app/Alta/page.tsx

@@ -17,7 +17,7 @@ export default function Page() {
   };
 
   return (
-    <section className="containerForm">
+    <section className="containerSection">
       <h1 className="title">ALTA</h1>
 
       <StepNavigator totalSteps={2}>

app/AsignacionEquipo/page.tsx

@@ -1,11 +1,26 @@
 import SearchUser from "../Components/SearchUser/searchUser";
+import Toggle from "../Components/Toggle/Toggle";
 
 export default function Page() {
   return (
-    <section className='containerForm'>
+    <section className='containerSection'>
       <h2 className='title'> ASIGNACION DE EQUIPOS </h2>
 
-      <SearchUser/>
+      <Toggle
+        defaultView="AsigTime"
+        options={[
+          {
+            key: "AsigTime",
+            label: "Asignar tiempo",
+            content: <SearchUser />,
+          },
+          {
+            key: "CancelTime",
+            label: "Cancelar tiempo",
+            content:<></>,
+          },
+        ]}
+      />
     </section>
 
   );

app/AsignacionMesas/page.tsx

@@ -1,37 +1,56 @@
 'use client'
 import { useState } from "react";
 import SearchUser from "../Components/SearchUser/searchUser";
+import Toggle from "../Components/Toggle/Toggle";
 
 export default function Page() {
   const [tiempo, setTiempo] = useState("");
 
   return (
-    <section className='containerForm'>
+    <section className='containerSection'>
       <h2 className='title'> ASIGNACION DE MESAS </h2>
 
-      <SearchUser />
+      <Toggle
+        defaultView="AsigTime"
+        options={[
+          {
+            key: "AsigTime",
+            label: "Asignar mesa",
+            content: <>
+              <SearchUser />
 
-      <label className="label">Tiempo</label>
-      <div className="groupInput">
-        <select
-          className="input"
-          value={tiempo}
-          onChange={(e) => setTiempo(e.target.value)}
-        >
-          <option value="">-- Selecciona un tiempo --</option>
-          <option value="15">15 minutos</option>
-          <option value="30">30 minutos</option>
-          <option value="45">45 minutos</option>
-          <option value="60">1 hora</option>
-          <option value="90">1 hora 30 minutos</option>
-          <option value="120">2 horas</option>
-        </select>
-        <button
-          className='button buttonSearch'
-          type='submit'
-        >Asignar
-        </button>
-      </div>
+              <form className="containerForm">
+                <label className="label">Tiempo</label>
+
+                <div className="groupInput">
+                  <select
+                    value={tiempo}
+                    onChange={(e) => setTiempo(e.target.value)}
+                  >
+                    <option value="">-- Selecciona un tiempo --</option>
+                    <option value="15">15 minutos</option>
+                    <option value="30">30 minutos</option>
+                    <option value="45">45 minutos</option>
+                    <option value="60">1 hora</option>
+                    <option value="90">1 hora 30 minutos</option>
+                    <option value="120">2 horas</option>
+                  </select>
+                  <button
+                    className='button buttonSearch'
+                    type='submit'
+                  >Asignar
+                  </button>
+                </div>
+              </form>
+            </>,
+          },
+          {
+            key: "Liberarmesa",
+            label: "Liberar mesa",
+            content: <></>,
+          },
+        ]}
+      />
 
     </section>
 

app/BitacoraSanciones/page.tsx

@@ -0,0 +1,13 @@
+import SearchUser from "../Components/SearchUser/searchUser";
+
+export default function Page() {
+  return (
+    <section className='containerSection'>
+      <h2 className='title'> BITACORA Y SANCIONES </h2>
+
+      <SearchUser/>
+    </section>
+
+  );
+}
+//IO

app/Components/BarNavigation/BarNavigation.tsx

@@ -81,9 +81,28 @@ function BarNavigation() {
                     </ul>
                 </li>
 
-                <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Reportes</li>
-                <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Quitar sancion</li>
-                <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Cambiar contraseña</li>
+                <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
+                    Reportes
+                    <ul>
+                        <Link href="/Recibo">
+                            <li>Recibo</li>
+                        </Link>
+                        <Link href="/Inscritos">
+                            <li>Inscritos</li>
+                        </Link>
+                        <Link href="/BitacoraSanciones">
+                            <li>Bitacora y sanciones</li>
+                        </Link>
+                    </ul>
+                </li>
+                <Link href="/QuitarSancion" className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
+                    <li>
+                        Quitar sancion
+                    </li>
+                </Link>
+                <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
+                    Cambiar contraseña
+                </li>
             </ul>
         </nav>
     );

app/Components/Impressions/Impressions.css

@@ -1,6 +0,0 @@
-.impressions {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
-}

app/Components/Impressions/impressions.tsx

@@ -1,6 +1,8 @@
 'use client'
+
 import { useState } from "react";
 import './Impressions.css'
+
 function Impressions() {
     const [pages, setPages] = useState('');
 
@@ -50,8 +52,8 @@ function Impressions() {
                 e.preventDefault();
                 // handlePayment();
             }}>
+            <div className="gap">
 
-            <div className='impressions'>
                 <div className='groupLabel'>
                     <label className='label'>Costo: $1.00</label>
                 </div>
@@ -100,4 +102,5 @@ function Impressions() {
     )
 }
 
-export default Impressions
+export default Impressions
+//IO

app/Components/Information/information.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+interface InformationProps {
+  [key: string]: string | number | undefined;
+}
+
+export default function Information(props: InformationProps) {
+  // Obtenemos las entradas (key + value) y filtramos los que sean undefined
+  const entries = Object.entries(props).filter(([_, value]) => value !== undefined);
+
+  if (entries.length === 0) return null; // no mostrar nada si no hay datos
+
+  return (
+    <div className="information">
+      <ul>
+        {entries.map(([key, value]) => (
+          <li key={key}>
+            <b>{key}: </b>{value}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

app/Components/Login/Login.css

@@ -2,6 +2,13 @@
     width: 300px;
 }
 
+.center{
+    display: grid;
+    grid-template-columns: auto 400px;
+    justify-content: center;
+    align-items: center;
+}
+
 .relative {
     position: relative;
 }
@@ -17,3 +24,9 @@
     background-size: cover;
     cursor: pointer;
 }
+
+@media(max-width:800px){
+    .center{
+        display: flex;
+    }
+}

app/Components/Login/Login.tsx

@@ -2,7 +2,7 @@ import "./Login.css";
 
 function Login() {
     return (
-        <section className='containerSection'>
+        <section className='center containerSection'>
 
             <form
                 className='login'

app/Components/Receipt/Receipt.tsx

@@ -54,71 +54,80 @@ function Receipt() {
                 // handleSaveReceipt();
             }}
         >
-            <div className='groupInput'>
-                <label className='label'>Folio:</label>
-                <input
-                    type='text'
-                    value={folio}
-                    onChange={(e) => {
-                        const value = e.target.value;
-                        if (/^\d*$/.test(value)) {
-                            setFolio(value);
-                        }
-                    }}
-                    placeholder='Numero de folio...'
-                    inputMode='numeric'
-                    pattern='[0-9]*'
-                />
-            </div>
 
-            <div className='groupInput'>
-                <label className='label'>Monto:</label>
-                <input
-                    type='text'
-                    value={amount}
-                    onChange={(e) => {
-                        const value = e.target.value;
+            <div className="gap">
 
-                        if (/^\d*\.?\d*$/.test(value)) {
-                            const numericValue = parseFloat(value);
 
-                            if (value === '' || (numericValue <= 1000)) {
-                                setAmount(value);
-                            } else {
-                                setAlert('')
-                                setError('El monto no puede superar $1000.00')
+                <div className='groupInput'>
+                    <label className='label'>Folio:</label>
+                    <input
+                        type='text'
+                        value={folio}
+                        onChange={(e) => {
+                            const value = e.target.value;
+                            if (/^\d*$/.test(value)) {
+                                setFolio(value);
                             }
-                        }
-                    }}
-                    placeholder='Monto recibido...'
-                    inputMode='numeric'
-                    pattern="^\d*\.?\d+$"
-                />
-            </div>
+                        }}
+                        placeholder='Numero de folio...'
+                        inputMode='numeric'
+                        pattern='[0-9]*'
+                    />
+                </div>
 
-            <div className='groupInput'>
-                <label className='label'>Fecha de Pago:</label>
-                <input
-                    type='date'
-                    value={date}
-                    onChange={(e) => setDate(e.target.value)}
-                    min={minFecha}
-                    max={maxFecha}
-                />
-            </div>
+                <div className='groupInput'>
+                    <label className='label'>Monto:</label>
+                    <input
+                        type='text'
+                        value={amount}
+                        onChange={(e) => {
+                            const value = e.target.value;
 
-            <div className='containerButton'>
+                            if (/^\d*\.?\d*$/.test(value)) {
+                                const numericValue = parseFloat(value);
 
-                {error &&
-                    <div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
-                        {error}
-                    </div>
-                }
-                {alert &&
-                    <div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
-                        {alert}
-                    </div>
-                }
+                                if (value === '' || (numericValue <= 1000)) {
+                                    setAmount(value);
+                                } else {
+                                    setAlert('')
+                                    setError('El monto no puede superar $1000.00')
+                                }
+                            }
+                        }}
+                        placeholder='Monto recibido...'
+                        inputMode='numeric'
+                        pattern="^\d*\.?\d+$"
+                    />
+                </div>
+
+                <div className='groupInput'>
+                    <label className='label'>Fecha de Pago:</label>
+                    <input
+                        type='date'
+                        value={date}
+                        onChange={(e) => setDate(e.target.value)}
+                        min={minFecha}
+                        max={maxFecha}
+                    />
+                </div>
+
+                <div className='containerButton'>
+                    <button
+                        className="button buttonSearch">
+                        Guardar
+                    </button>
+
+                    {error &&
+                        <div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
+                            {error}
+                        </div>
+                    }
+                    {alert &&
+                        <div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
+                            {alert}
+                        </div>
+                    }
+                </div>
             </div>
         </form>
     )

app/Components/SearchUser/searchUser.tsx

@@ -1,11 +1,12 @@
 'use client'
 import { useState } from "react";
+import Information from "../Information/information";
 
 function SearchUser() {
     const [numAccount, setNumAccount] = useState('');
     return (
         <>
-            <form>
+            <form className="containerForm">
                 <label className='label'>No.Cuenta</label>
                 <div className='groupInput'>
                     <input
@@ -28,13 +29,13 @@ function SearchUser() {
                     </button>
                 </div>
             </form>
-            
-            <div className='information'>
-                <label><b>No.Cuenta: </b>id_cuenta</label>
-                <label><b>Nombre: </b>nombre</label>
-                <label><b>Carrera: </b>carrera</label>
-                <label><b>Crédito: </b>credito</label>
-            </div>
+
+            <Information
+            NoCuenta="idcuanta"
+            Nombre="juan"
+            Carrera="carrera"
+            Credito="credito"
+            />
         </>
     )
 }

app/Components/Selection/Selection.tsx

@@ -15,10 +15,6 @@ function Selection() {
       name: "MACINTOSH",
       img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
     },
-    {
-      name: "LINUX",
-      img: "https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg",
-    },
     {
       name: "PROFESORES",
       img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",

app/Components/StepNavigator/StepNavigator.css

@@ -1,4 +1,5 @@
-.receipt {
+.stepNavigator {
+    position: relative;
     max-width: 600px;
     margin-top: 1rem;
     border: 1px solid #e5e7eb;

app/Components/StepNavigator/StepNavigator.tsx

@@ -24,10 +24,10 @@ export default function StepNavigator({ totalSteps, children, onFinish }: StepNa
     };
 
     return (
-        <div className="receipt">
+        <section className="stepNavigator">
             {children[step - 1]}
 
-            <div className="buttonContainer">
+            <div className="absoluteButton">
                 {step > 1 && (
                     <button
                         onClick={handlePrev}
@@ -36,13 +36,15 @@ export default function StepNavigator({ totalSteps, children, onFinish }: StepNa
                     </button>
                 )}
 
-                <button
-                    onClick={handleNext}
-                    className="button buttonSearch"
-                >
-                    {step === totalSteps ? "Inscribir" : "Siguiente"}
-                </button>
+                {step < totalSteps &&
+                    <button
+                        onClick={handleNext}
+                        className="button buttonSearch"
+                    >
+                        Siguiente
+                    </button>
+}
             </div>
-        </div>
+        </section>
     );
 }

app/Components/Toggle/Toggle.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState, ReactNode } from "react";
+
+interface ToggleOption {
+  key: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface ToggleProps {
+  options: ToggleOption[];
+  defaultView?: string;
+}
+
+export default function Toggle({ options, defaultView }: ToggleProps) {
+  const [view, setView] = useState(defaultView || options[0].key);
+
+  return (
+    <section className="toggleSection">
+      <div className="toggleGroup">
+        {options.map((opt) => (
+          <button
+            key={opt.key}
+            className={`toggleButton ${view === opt.key ? "active" : ""}`}
+            onClick={() => setView(opt.key)}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="padding">
+        {options.find((opt) => opt.key === view)?.content}
+      </div>
+    </section>
+  );
+}

app/Impresiones/page.tsx

@@ -1,51 +1,48 @@
-'use client'
+'use client';
 
-import { useState } from "react";
-import Receipt from "../Components/Receipt/Receipt";
 import SearchUser from "../Components/SearchUser/searchUser";
-import "@/app/globals.css"
+import Receipt from "../Components/Receipt/Receipt";
 import Impressions from "../Components/Impressions/impressions";
+import Toggle from "../Components/Toggle/Toggle";
+
+import "@/app/globals.css";
 
 export default function Page() {
-  const [view, setView] = useState('impresiones');
-
   return (
-    <section className='containerForm'>
-      <h2 className='title'> IMPRESIONES Y PLOTEO </h2>
+    <section className="containerSection">
+      <h2 className="title">IMPRESIONES Y PLOTEO</h2>
       <SearchUser />
-      <section className="toggleSection">
 
-        <div className='toggleGroup'>
-          <button
-            className={`toggleButton ${view === 'impresiones' ? 'active' : ''}`}
-            onClick={() => setView('impresiones')}
-          >
-            Impresiones
-          </button>
-          <button
-            className={`toggleButton ${view === 'recibo' ? 'active' : ''}`}
-            onClick={() => setView('recibo')}
-          >
-            Recibo
-          </button>
-        </div>
-
-        {view === 'impresiones' && (
-          <Impressions />
-        )}
-
-        {view === 'recibo' && (
-          <>
-            <Receipt />
-            <button
-              className="button buttonSearch">
-              Buscar
-            </button>
-          </>
-
-        )}
-
-      </section>
+      <Toggle
+        defaultView="1"
+        options={[
+          {
+            key: "1",
+            label: "Recibo",
+            content: <Receipt />,
+          },
+          {
+            key: "2",
+            label: "Impresiones B/N",
+            content: <Impressions />,
+          },
+          {
+            key: "3",
+            label: "Impresiones color",
+            content: <Impressions />,
+          },
+          {
+            key: "4",
+            label: "Plotter",
+            content: <Impressions />,
+          },
+          {
+            key: "5",
+            label: "Escaner",
+            content: <Impressions />,
+          },
+        ]}
+      />
     </section>
   );
 }

app/InformacionEquipo/page.tsx

@@ -1,11 +1,70 @@
 import SearchUser from "../Components/SearchUser/searchUser";
+import Toggle from "../Components/Toggle/Toggle";
 
 export default function Page() {
   return (
-    <section className='containerForm'>
+    <section className='containerSection'>
       <h2 className='title'> INFORMACION DE EQUIPOS </h2>
 
-      <SearchUser/>
+      <Toggle
+        defaultView="1"
+        options={[
+          {
+            key: "1",
+            label: "Equipos",
+            content: <div className='containerInput'>
+              <label className='label'>Ubicacion</label>
+              <input
+                type='text'
+                //value={user}
+                //onChange={(e) => setUser(e.target.value)}
+                placeholder='Coloca un número de cuenta...'
+              />
+
+              <label className='label'>Nombre</label>
+              <input
+                type='text'
+                //value={user}
+                //onChange={(e) => setUser(e.target.value)}
+                placeholder='Coloca '
+              />
+
+              <label className='label'>Plataforma</label>
+              <input
+                type='text'
+                //value={user}
+                //onChange={(e) => setUser(e.target.value)}
+                placeholder='Coloca '
+              />
+
+              <label className='label'>Area Ubicacion</label>
+              <input
+                type='text'
+                //value={user}
+                //onChange={(e) => setUser(e.target.value)}
+                placeholder='Coloca '
+              />
+
+              <button
+                className="button buttonSearch"
+              >
+                Nuevo
+              </button>
+
+              <button
+                className="button buttonSearch"
+              >
+                Editar
+              </button>
+            </div>,
+          },
+          {
+            key: "2",
+            label: "Programa por equipo",
+            content: <></>,
+          },
+        ]}
+      />
     </section>
 
   );

app/Inscripciones/page.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import Receipt from "../Components/Receipt/Receipt";
 import SearchUser from "../Components/SearchUser/searchUser";
 import Selection from "../Components/Selection/Selection";
@@ -8,7 +7,7 @@ import "./inscriptions.css"
 
 export default function Page() {
     return (
-        <section className='containerForm'>
+        <section className='containerSection'>
             <h2 className='title'> INSCRIPCION </h2>
             <SearchUser />
 

app/Inscritos/page.tsx

@@ -0,0 +1,13 @@
+import SearchUser from "../Components/SearchUser/searchUser";
+
+export default function Page() {
+  return (
+    <section className='containerSection'>
+      <h2 className='title'> INSCRITOS </h2>
+
+      <SearchUser/>
+    </section>
+
+  );
+}
+//IO

app/Mensajes/page.tsx

@@ -1,11 +1,9 @@
-import SearchUser from "../Components/SearchUser/searchUser";
 
 export default function Page() {
   return (
-    <section className='containerForm'>
+    <section className='containerSection'>
       <h2 className='title'> MENSAJES </h2>
 
-      <SearchUser/>
     </section>
 
   );

app/Monitor/Page.module.css

@@ -0,0 +1,71 @@
+.tableContainer {
+    margin-top: 10px;
+    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/Monitor/page.tsx

@@ -1,13 +1,164 @@
-import SearchUser from "../Components/SearchUser/searchUser";
+"use client";
+
+import { useState } from "react";
+import styles from "./Page.module.css"; // importamos el css
 
 export default function Page() {
+  const [machines] = useState([
+    {
+      ubicacion: "Laboratorio 1",
+      nombre: "PC-01",
+      plataforma: "Windows 10",
+      area: "Diseño",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 2",
+      nombre: "PC-15",
+      plataforma: "Linux",
+      area: "Programación",
+      disponible: false,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+    {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    }, {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    }, {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    }, {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    }, {
+      ubicacion: "Laboratorio 3",
+      nombre: "PC-23",
+      plataforma: "MacOS",
+      area: "Edición",
+      disponible: true,
+    },
+  ]);
+
   return (
-    <section className='containerForm'>
-      <h2 className='title'> MONITOR DE MAQUINAS DISPONIBLES </h2>
+    <section className='containerSection'>
+      <h2 className='title'> MONITOR DE MÁQUINAS DISPONIBLES </h2>
 
-      <SearchUser/>
+      <div className={styles.actions}>
+        <button className={styles.resetButton}>
+          Actualizar informacion
+        </button>
+      </div>
+
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Ubicación</th>
+              <th>Nombre Equipo</th>
+              <th>Plataforma</th>
+              <th>Área</th>
+              <th>Disponible</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/Programas/page.tsx

@@ -2,10 +2,9 @@ import SearchUser from "../Components/SearchUser/searchUser";
 
 export default function Page() {
   return (
-    <section className='containerForm'>
+    <section className='containerSection'>
       <h2 className='title'> PROGRAMAS </h2>
 
-      <SearchUser/>
     </section>
 
   );

app/QuitarSancion/page.tsx

@@ -0,0 +1,13 @@
+import SearchUser from "../Components/SearchUser/searchUser";
+
+export default function Page() {
+  return (
+    <section className='containerSection'>
+      <h2 className='title'> QuitarSanciones </h2>
+
+      <SearchUser/>
+    </section>
+
+  );
+}
+//IO

app/Recibo/page.tsx

@@ -0,0 +1,13 @@
+import SearchUser from "../Components/SearchUser/searchUser";
+
+export default function Page() {
+  return (
+    <section className='containerSection'>
+      <h2 className='title'> RECIBO </h2>
+
+      <SearchUser/>
+    </section>
+
+  );
+}
+//IO

app/globals.css

@@ -13,6 +13,8 @@ body {
 }
 
 header {
+  display: grid;
+  grid-template-columns: auto 1fr;
   padding: 5px 40px;
   position: relative;
   overflow: hidden;
@@ -61,8 +63,8 @@ footer {
 }
 
 .container {
-  display: grid;
-  grid-template-columns: 1fr 400px;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-items: center;
   position: relative;
@@ -81,17 +83,17 @@ footer {
 }
 
 .containerSection {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-width: 500px;
-  height: 400px;
-  border-radius: 4px;
-  padding: 1.5rem;
 }
 
+.containerForm{
+  width: 100%;
+  max-width: 450px;
+}
 
 .img {
   position: absolute;
@@ -114,23 +116,18 @@ footer {
   background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
 }
 
-input {
+input,
+select {
   flex: 1;
   min-width: 200px;
   padding: 0.5rem;
   border: 1px solid #cfcfcf;
+  background-color: #fff;
   border-radius: 4px;
   font-size: 1rem;
   color: black;
 }
 
-select {
-  padding: 0.5rem;
-  border-radius: 4px;
-  border: 1px solid #cfcfcf;
-  background-color: white;
-}
-
 .groupInput {
   display: flex;
   flex-wrap: wrap;
@@ -169,7 +166,10 @@ select {
 }
 
 
-.buttonContainer {
+.absoluteButton {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
   display: flex;
   gap: 1rem;
 }
@@ -184,7 +184,7 @@ ul {
   margin-bottom: 10px;
 }
 
-.label {
+.label{
   font-size: 1rem;
   font-weight: bold;
   display: block;
@@ -198,18 +198,14 @@ a {
   display: flex;
   flex-direction: column;
   border: 1px solid #e5e7eb;
-  padding: 1rem;
   border-radius: 4px;
   background-color: #f3f4f6;
-  margin-top: 1rem;
+  width: 100%;
+  max-width: 400px;
 }
 
-.containerForm {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+.information ul{
+  padding: 1rem;
 }
 
 .title {
@@ -227,10 +223,23 @@ form {
   display: flex;
   flex-direction: column;
   width: 100%;
+}
+
+.padding {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
+}
+
+.gap {
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
 }
 
 .toggleSection {
+  width: 100%;
   max-width: 600px;
   margin-top: 1rem;
   border: 1px solid #e5e7eb;
@@ -258,6 +267,7 @@ form {
 
 .toggleButton.active {
   background-color: #e5e7eb;
+  border-radius: 4px 4px 0 0;
 }
 
 .toggleButton.active {
@@ -266,7 +276,7 @@ form {
 
 @media(max-width:800px) {
   header {
-    padding: 7px;
+    padding: 6px 16px;
   }
 
   .container {
@@ -307,6 +317,14 @@ form {
     right: 0;
     background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
   }
+
+  .title {
+    text-align: center;
+  }
+
+  .containerSection {
+    align-items: center;
+  }
 }
 
 @media(max-height:960px) {