funcionabilidad de botones componentes y arreglos

.example.txt

@@ -1 +0,0 @@
-NEXT_PUBLIC_API_URL=

app/Components/ActivosMantenimiento/Areas.tsx

@@ -2,41 +2,83 @@
 import { useState } from "react";
 
 export default function Areas() {
-  const [tiempo, setTiempo] = useState("");
+  const [area, setArea] = useState(""); // Área seleccionada
+  const [activo, setActivo] = useState(false); // Checkbox Activo
+  const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
+  const [mensaje, setMensaje] = useState(""); // Mensaje dinámico
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleActualizar = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Equipo asignado con tiempo:", tiempo);
+
+    if (!area) {
+      setMensaje("Selecciona un área antes de actualizar");
+      return;
+    }
+
+    // Crear mensaje dinámico
+    const estado = [];
+    if (activo) estado.push("Activo");
+    if (mantenimiento) estado.push("Mantenimiento");
+    const estadosSeleccionados = estado.length
+      ? estado.join(" y ")
+      : "Sin estado";
+
+    setMensaje(`Área ${area} actualizada con estado: ${estadosSeleccionados}`);
+
+    // Aquí puedes enviar los datos al backend si quieres
+    console.log({
+      area,
+      activo,
+      mantenimiento,
+    });
   };
 
   return (
-    <form className="containerForm" onSubmit={handleSubmit}>
-      <label className="label">Áreas disponibles</label>
+    <form className="containerForm" onSubmit={handleActualizar}>
+      <label className="label">Áreas disponibles:</label>
       <div className="groupInput">
-        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+        {/* Select de áreas */}
+        <select value={area} onChange={(e) => setArea(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>
+          <option value="PECERA">PECERA</option>
+          <option value="JAULA">JAULA</option>
+          <option value="HUACAL">HUACAL</option>
+          <option value="PCNET1">PCNET1</option>
+          <option value="PCNET2">PCNET2</option>
         </select>
 
-        <div className="checkbox-grid">
-          <label>
-            <input type="checkbox" />
+        {/* Checkboxes */}
+        <div className="checkbox" style={{ marginTop: "10px" }}>
+          <label style={{ marginRight: "10px" }}>
+            <input
+              type="checkbox"
+              checked={activo}
+              onChange={(e) => setActivo(e.target.checked)}
+            />
             Activo
           </label>
           <label>
-            <input type="checkbox" />
+            <input
+              type="checkbox"
+              checked={mantenimiento}
+              onChange={(e) => setMantenimiento(e.target.checked)}
+            />
             Mantenimiento
           </label>
         </div>
 
-        <button className="button buttonSearch" type="submit">
+        {/* Botón Actualizar */}
+        <button
+          className="button buttonSearch"
+          type="submit"
+          style={{ marginTop: "15px" }}
+        >
           Actualizar
         </button>
       </div>
+
+      {/* Mensaje dinámico */}
+      {mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
     </form>
   );
 }

app/Components/ActivosMantenimiento/Equipos.tsx

@@ -2,19 +2,53 @@
 import { useState } from "react";
 
 function Equipos() {
+  const [cuenta, setCuenta] = useState("");
   const [tiempo, setTiempo] = useState("");
+  const [mensaje, setMensaje] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleBuscar = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Equipo asignado con tiempo:", tiempo);
+    if (!cuenta) {
+      setMensaje("Ingresa un número de cuenta antes de buscar");
+      return;
+    }
+    setMensaje(`Buscando información del No. de cuenta: ${cuenta}`);
+  };
+
+  const handleAsignar = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!tiempo) {
+      setMensaje("Selecciona un equipo antes de asignar");
+      return;
+    }
+    setMensaje(`Equipo asignado con tiempo: ${tiempo} minutos`);
   };
 
   return (
-    <form className="containerForm" onSubmit={handleSubmit}>
-      <label className="label">Equipos disponibles</label>
-      <div className="groupInput">
+    <div className="containerForm">
+      {/* Formulario Buscar */}
+      <form onSubmit={handleBuscar} className="groupInput">
+        <label className="label">No. de cuenta:</label>
+        <input
+          type="text"
+          value={cuenta}
+          onChange={(e) => setCuenta(e.target.value)}
+          placeholder="Ingresa el número de cuenta"
+        />
+        <button className="button buttonSearch" type="submit">
+          Buscar
+        </button>
+      </form>
+
+      {/* Formulario Asignar */}
+      <form
+        onSubmit={handleAsignar}
+        className="groupInput"
+        style={{ marginTop: "20px" }}
+      >
+        <label className="label">Equipos disponibles:</label>
         <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
-          <option value="">-- Equipos disponibles --</option>
+          <option value="">-- Selecciona un equipo --</option>
           <option value="15">1</option>
           <option value="30">2</option>
           <option value="45">3</option>
@@ -25,8 +59,10 @@ function Equipos() {
         <button className="button buttonSearch" type="submit">
           Asignar
         </button>
-      </div>
-    </form>
+      </form>
+
+      {mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
+    </div>
   );
 }
 

app/Components/ActivosMantenimiento/Mesas.tsx

@@ -2,36 +2,67 @@
 import { useState } from "react";
 
 function Mesas() {
-  const [tiempo, setTiempo] = useState("");
+  const [mesa, setMesa] = useState(""); // Mesa seleccionada
+  const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
+  const [mensaje, setMensaje] = useState(""); // Mensaje dinámico
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleConfirmar = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Equipo asignado con tiempo:", tiempo);
+
+    if (!mesa) {
+      setMensaje("Selecciona una mesa antes de confirmar");
+      return;
+    }
+
+    const estado = mantenimiento ? "en mantenimiento" : "disponible";
+    setMensaje(`Mesa ${mesa} confirmada como ${estado}`);
+
+    console.log({
+      mesa,
+      mantenimiento,
+    });
   };
 
   return (
-    <form className="containerForm" onSubmit={handleSubmit}>
-      <label className="label">Mesas disponibles</label>
+    <form className="containerForm" onSubmit={handleConfirmar}>
+      <label className="label">Mesas disponibles:</label>
       <div className="groupInput">
-        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+        {/* Select de mesas */}
+        <select value={mesa} onChange={(e) => setMesa(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>
+          <option value="1">1</option>
+          <option value="4">4</option>
+          <option value="7">7</option>
+          <option value="10">10</option>
+          <option value="15">15</option>
         </select>
 
-        <div className="checkbox">
-          <input type="checkbox" />
-          <label>Mantenimiento</label>
+        {/* Checkbox Mantenimiento */}
+        <div className="checkbox" style={{ marginTop: "10px" }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={mantenimiento}
+              onChange={(e) => setMantenimiento(e.target.checked)}
+            />
+            Mantenimiento
+          </label>
         </div>
 
-        <button className="button buttonSearch" type="submit">
+        {/* Botón Confirmar */}
+        <button
+          className="button buttonSearch"
+          type="submit"
+          style={{ marginTop: "15px" }}
+        >
           Confirmar
         </button>
       </div>
+
+      {/* Mensaje dinámico */}
+      {mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
     </form>
   );
 }
+
 export default Mesas;

app/Components/ProgramSelector/ProgramSelector.tsx

@@ -1,108 +1,111 @@
-// 1. Definimos la interfaz que describe las props del componente
-export interface DatosEquipo {
-  titulo: string; // El título que aparecerá como label
-  opcion: string[]; // Lista de opciones para el select
+"use client";
+import { useState } from "react";
+
+interface DatosEquipo {
+  titulo: string;
+  opcion: string[];
 }
 
-// 2. Ya no necesitas tener "DatosOpciones" dentro de este archivo
-//    porque el componente debe ser reutilizable, no fijo.
+// Lista de programas disponibles
+const programas = [
+  "3D MAX STUDIO 2014",
+  "ADOBE CREATIVE SUITE",
+  "ARCHICAD 20",
+  "AUDACITY -win - 2.0",
+  "AUTOCAD",
+  "CODE-BLOCKS",
+  "COREL DRAW",
+  "DEV-C++",
+  "EVIEWS Enterprise",
+  "Google Earth",
+  "INTERNERT",
+  "MAPLE",
+  "MATHEMATICA",
+  "MATLAB",
+  "Maxima",
+  "miktex",
+  "NETBEANS",
+  "OFFICE 2016",
+  "PSeint",
+  "R 3.0.1",
+  "R Studio",
+  "SPPS Statiscs",
+  "STATA 13",
+  "STATGRAOHICS Centurion XVI",
+];
+
+// Mapear cada equipo a sus programas (checkboxes que deberían seleccionarse)
+const caracteristicasPorEquipo: Record<string, string[]> = {
+  "Equipo 1": ["3D MAX STUDIO 2014", "AUTOCAD", "MATLAB"],
+  "Equipo 2": ["ADOBE CREATIVE SUITE", "COREL DRAW", "R Studio"],
+  "Equipo 3": ["ARCHICAD 20", "EVIEWS Enterprise", "SPPS Statiscs"],
+  "Equipo 4": ["MATHEMATICA", "MAPLE", "Maxima"],
+  // Agrega más equipos según necesites
+};
 
-// 3. Recibimos las props como un objeto con estructura DatosEquipo
 function ProgramSelector({ titulo, opcion }: DatosEquipo) {
+  // Estado del equipo seleccionado
+  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
+  // Estado de los checkboxes (programas)
+  const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
+    programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
+  );
+
+  // Función al cambiar el select
+  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const equipo = e.target.value;
+    setEquipoSeleccionado(equipo);
+
+    // Actualizar checkboxes según características del equipo
+    const nuevosCheckboxes: Record<string, boolean> = {};
+    programas.forEach((prog) => {
+      nuevosCheckboxes[prog] =
+        caracteristicasPorEquipo[equipo]?.includes(prog) || false;
+    });
+    setCheckboxes(nuevosCheckboxes);
+  };
+
+  // Guardar cambios (ejemplo)
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Equipo:", equipoSeleccionado);
+    console.log(
+      "Programas seleccionados:",
+      Object.keys(checkboxes).filter((p) => checkboxes[p])
+    );
+  };
+
   return (
-    <div>
-      <form className="form-container">
-        {/* Label dinámico con el título que recibimos */}
-        <label>{titulo}</label>
+    <form className="form-container" onSubmit={handleSubmit}>
+      <label>{titulo}</label>
+      <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
+        <option value="">-- Selecciona un equipo --</option>
+        {opcion.map((eq, i) => (
+          <option key={i} value={eq}>
+            {eq}
+          </option>
+        ))}
+      </select>
 
-        {/* Renderizamos UN solo <select> con varias <option> */}
-        <select>
-          {opcion.map((op, index) => (
-            <option key={index} value={op}>
-              {op}
-            </option>
-          ))}
-        </select>
+      <div className="checkbox-grid">
+        {programas.map((prog) => (
+          <label key={prog}>
+            <input
+              type="checkbox"
+              checked={checkboxes[prog]}
+              onChange={() =>
+                setCheckboxes({ ...checkboxes, [prog]: !checkboxes[prog] })
+              }
+            />
+            {prog}
+          </label>
+        ))}
+      </div>
 
-        {/* Lista de checkboxes (esto lo podrías optimizar igual con .map) */}
-        <div className="checkbox-grid">
-          <label>
-            <input type="checkbox" /> 3D MAX STUDIO 2014
-          </label>
-          <label>
-            <input type="checkbox" /> ADOBE CREATIVE SUITE
-          </label>
-          <label>
-            <input type="checkbox" /> ARCHICAD 20
-          </label>
-          <label>
-            <input type="checkbox" /> AUDACITY -win - 2.0
-          </label>
-          <label>
-            <input type="checkbox" /> AUTOCAD
-          </label>
-          <label>
-            <input type="checkbox" /> CODE-BLOCKS
-          </label>
-          <label>
-            <input type="checkbox" /> COREL DRAW
-          </label>
-          <label>
-            <input type="checkbox" /> DEV-C++
-          </label>
-          <label>
-            <input type="checkbox" /> EVIEWS Enterprise
-          </label>
-          <label>
-            <input type="checkbox" /> Google Earth
-          </label>
-          <label>
-            <input type="checkbox" /> INTERNERT
-          </label>
-          <label>
-            <input type="checkbox" /> MAPLE
-          </label>
-          <label>
-            <input type="checkbox" /> MATHEMATICA
-          </label>
-          <label>
-            <input type="checkbox" /> MATLAB
-          </label>
-          <label>
-            <input type="checkbox" /> Maxima
-          </label>
-          <label>
-            <input type="checkbox" /> miktex
-          </label>
-          <label>
-            <input type="checkbox" /> NETBEANS
-          </label>
-          <label>
-            <input type="checkbox" /> OFFICE 2016
-          </label>
-          <label>
-            <input type="checkbox" /> PSeint
-          </label>
-          <label>
-            <input type="checkbox" /> R 3.0.1
-          </label>
-          <label>
-            <input type="checkbox" /> R Studio
-          </label>
-          <label>
-            <input type="checkbox" /> SPPS Statiscs
-          </label>
-          <label>
-            <input type="checkbox" /> STATA 13
-          </label>
-          <label>
-            <input type="checkbox" /> STATGRAOHICS Centurion XVI
-          </label>
-        </div>
-
-        <button className="button buttonSearch">Guardar cambios</button>
-      </form>
-    </div>
+      <button className="button buttonSearch" type="submit">
+        Guardar cambios
+      </button>
+    </form>
   );
 }