Merge branch 'Axel_branch' of https://github.com/IO420/Nexus into Lino

app/Components/ActivosMantenimiento/Areas.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useState } from "react";
+
+function Areas() {
+  const [tiempo, setTiempo] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Equipo asignado con tiempo:", tiempo);
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Áreas disponibles</label>
+      <div className="groupInput">
+        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+          <option value="">-- Áreas disponibles --</option>
+          <option value="15">PECERA</option>
+          <option value="30">JAULA</option>
+          <option value="45">HUACAL</option>
+          <option value="60">PCNET1</option>
+          <option value="90">PCNET2</option>
+        </select>
+
+        <div className="checkbox-grid">
+          <label>
+            <input type="checkbox" />
+            Activo
+          </label>
+          <label>
+            <input type="checkbox" />
+            Mantenimiento
+          </label>
+        </div>
+
+        <button className="button buttonSearch" type="submit">
+          Actualizar
+        </button>
+      </div>
+    </form>
+  );
+}
+export default Areas;

app/Components/ActivosMantenimiento/Equipos.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { useState } from "react";
+
+function Equipos() {
+  const [tiempo, setTiempo] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Equipo asignado con tiempo:", tiempo);
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Equipos disponibles</label>
+      <div className="groupInput">
+        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+          <option value="">-- Equipos disponibles --</option>
+          <option value="15">1</option>
+          <option value="30">2</option>
+          <option value="45">3</option>
+          <option value="60">4</option>
+          <option value="90">5</option>
+          <option value="120">6</option>
+        </select>
+        <button className="button buttonSearch" type="submit">
+          Asignar
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default Equipos;

app/Components/ActivosMantenimiento/Mesas.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { useState } from "react";
+
+function Mesas() {
+  const [tiempo, setTiempo] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Equipo asignado con tiempo:", tiempo);
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Mesas disponibles</label>
+      <div className="groupInput">
+        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+          <option value="">-- Mesas disponibles --</option>
+          <option value="15">1</option>
+          <option value="30">4</option>
+          <option value="45">7</option>
+          <option value="60">10</option>
+          <option value="90">15</option>
+        </select>
+
+        <div className="checkbox">
+          <input type="checkbox" />
+          <label>Mantenimiento</label>
+        </div>
+
+        <button className="button buttonSearch" type="submit">
+          Confirmar
+        </button>
+      </div>
+    </form>
+  );
+}
+export default Mesas;

app/Components/QuitarSancion/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: 65%;
+}
+
+.machineTable {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  margin-bottom: 1rem;
+}
+
+.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/QuitarSancion/QuitarSancion.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { useState } from "react";
+import styles from "./Page.module.css";
+
+interface sancion {
+  id: number;
+  nombre: string;
+  motivo: string;
+  duracion: number;
+  fecha_sancion: string;
+  utilizar_equipo: number;
+}
+
+function QuitarSancion() {
+  const [sanciones, setSanciones] = useState<sancion[]>([]);
+  return (
+    <section className="containerSection">
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>id</th>
+              <th>Nombre</th>
+              <th>Motivo Sancion</th>
+              <th>Duracion (semanas) </th>
+              <th>Fecha Sancion</th>
+              <th>Podria utilizar el servicio hasta</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sanciones.map((sancion, index) => (
+              <tr key={index}>
+                <td>{sancion.id}</td>
+                <td>{sancion.nombre}</td>
+                <td>{sancion.motivo}</td>
+                <td>{sancion.duracion}</td>
+                <td>{sancion.fecha_sancion}</td>
+                <td>{sancion.utilizar_equipo}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <button className="button buttonSearch">Quitar Sancion</button>
+    </section>
+  );
+}
+
+export default QuitarSancion;