new view and components

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