Merge branch 'Lino' into Carlos

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -1,15 +1,7 @@
 "use client";
-import { useEffect, useState } from "react";
-import SelectAreas from "../SelectAreas";
-import { url } from "inspector";
-import SelectEquipo from "../SelectEquipo";
+import { envConfig } from "@/app/lib/config";
 import axios from "axios";
-
-interface DatosEquipo {
-  titulo: string;
-  opcion: string[];
-  tipo: "equipo" | "sala"; // Nuevo prop para diferenciar
-}
+import { useEffect, useState } from "react";
 
 const programas = [
   "3D MAX STUDIO 2014",
@@ -38,12 +30,37 @@ const programas = [
   "STATGRAOHICS Centurion XVI",
 ];
 
-export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
-  const [seleccion, setSeleccion] = useState("");
-  const [programas, setPrograma] = useState("");
+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"],
+};
+
+interface Equipos {
+  id_equipo: number;
+  id_plataforma: number;
+  id_area_ubicacion: number;
+  nombre_equipo: string;
+  ubicacion: string;
+  activo: boolean;
+  ip: string;
+}
+
+export default function ProgramSelector() {
+  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
   const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
     programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
   );
+  const [equipo, setEquipo] = useState<Equipos[]>();
+
+  useEffect(() => {
+    const getEquipos = async () => {
+      const equipos = await axios.get(`${envConfig.apiUrl}/equipo`);
+      setEquipo(equipos.data);
+    };
+    getEquipos();
+  }, []);
 
   useEffect(() => {
     const response = axios.get(
@@ -52,8 +69,12 @@ export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
     setPrograma(response)
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSeleccion(e.target.value);
+    const nuevosCheckboxes: Record<string, boolean> = {};
+    programas.forEach((prog) => {
+      nuevosCheckboxes[prog] =
+        caracteristicasPorEquipo[equipo]?.includes(prog) || false;
+    });
+    setCheckboxes(nuevosCheckboxes);
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -68,14 +89,15 @@ export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
 
   return (
     <form className="form-container" onSubmit={handleSubmit}>
-      <label>{titulo}</label>
-
-      {/* 👇 Mostrar Select diferente según el tipo */}
-      {tipo === "sala" ? (
-        <SelectAreas url="https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion" />
-      ) : (
-        <SelectEquipo url="https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo" />
-      )}
+      <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
+        <option value="">-- Selecciona un equipo --</option>
+        {equipo &&
+          equipo.map((eq, i) => (
+            <option key={i} value={eq.id_equipo}>
+              {eq.nombre_equipo}
+            </option>
+          ))}
+      </select>
 
       <div className="checkbox-grid">
         {programas.map((prog) => (