components

app/(private)/InformacionEquipo/page.tsx

@@ -1,7 +1,6 @@
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import Equipos from "@/app/Components/Equipos/equipos";
 import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";
-
 import "./informacionequipo.css";
 
 export default async function Page(props: {
@@ -16,7 +15,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-
       <h2 className="title"> INFORMACION DE EQUIPOS </h2>
 
       <Toggle
@@ -25,7 +23,7 @@ export default async function Page(props: {
           {
             key: "Equipos",
             label: "Equipos",
-            content: <Equipos />,
+            content: <Equipos />, // ✅ Aquí solo se muestran los equipos
           },
           {
             key: "Equipo",
@@ -33,7 +31,8 @@ export default async function Page(props: {
             content: (
               <ProgramSelector
                 key={1}
-                titulo="Programas de Equipo"
+                titulo="Programas por equipo"
+                tipo="equipo"
                 opcion={["", "Equipo 1", "Equipo 2", "Equipo 3", "Equipo 4"]}
               />
             ),
@@ -44,8 +43,9 @@ export default async function Page(props: {
             content: (
               <ProgramSelector
                 key={2}
-                titulo="Programas por Sala"
-                opcion={["", "PCNET1", "PCNET2", "PCNET3", "PCNET4", "PCNET4"]}
+                titulo="Programas por sala"
+                tipo="sala"
+                opcion={["", "PCNET1", "PCNET2", "PCNET3", "PCNET4"]}
               />
             ),
           },
@@ -54,4 +54,3 @@ export default async function Page(props: {
     </section>
   );
 }
-//IO

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -1,13 +1,16 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import SelectAreas from "../SelectAreas";
+import { url } from "inspector";
+import SelectEquipo from "../SelectEquipo";
+import axios from "axios";
 
 interface DatosEquipo {
   titulo: string;
   opcion: string[];
+  tipo: "equipo" | "sala"; // Nuevo prop para diferenciar
 }
 
-// Lista de programas disponibles
 const programas = [
   "3D MAX STUDIO 2014",
   "ADOBE CREATIVE SUITE",
@@ -35,42 +38,28 @@ const programas = [
   "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
-};
-
-export default function ProgramSelector({ titulo, opcion }: DatosEquipo) {
-  // Estado del equipo seleccionado
-  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
-  // Estado de los checkboxes (programas)
+export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
+  const [seleccion, setSeleccion] = useState("");
   const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
     programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
   );
 
-  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const equipo = e.target.value;
-    setEquipoSeleccionado(equipo);
+  useEffect(() => {
+    const response = axios.get(
+      "https://venus.acatlan.unam.mx/asignacionTiempo_test/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);
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSeleccion(e.target.value);
   };
 
-  // Guardar cambios (ejemplo)
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Equipo:", equipoSeleccionado);
     console.log(
-      "Programas seleccionados:",
+      tipo === "sala" ? "Sala:" : "Equipo:",
+      seleccion,
+      "\nProgramas seleccionados:",
       Object.keys(checkboxes).filter((p) => checkboxes[p])
     );
   };
@@ -79,14 +68,12 @@ export default function ProgramSelector({ titulo, opcion }: DatosEquipo) {
     <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>
+      {/* 👇 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" />
+      )}
 
       <div className="checkbox-grid">
         {programas.map((prog) => (

app/Components/SelectAreas.tsx

@@ -2,19 +2,19 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 
-export default function SelectAreas() {
+interface proms {
+  url: string;
+}
+
+export default function SelectAreas(props: proms) {
   const [areas, setAreas] = useState([]);
   const [selectedArea, setSelectedArea] = useState("");
 
   useEffect(() => {
     axios
-      .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion")
-      .then((data) => {
-        setAreas(data.data);
-      })
-      .catch((error) => {
-        console.error("Error al traer las áreas:", error);
-      });
+      .get(props.url)
+      .then((data) => setAreas(data.data))
+      .catch((error) => console.error("Error al traer las áreas:", error));
   }, []);
 
   return (

app/Components/SelectEquipo.tsx

@@ -0,0 +1,37 @@
+"use client";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+interface proms {
+  url: string;
+}
+
+export default function SelectEquipo(props: proms) {
+  const [areas, setAreas] = useState([]);
+  const [selectedArea, setSelectedArea] = useState("");
+
+  useEffect(() => {
+    axios
+      .get(props.url)
+      .then((data) => setAreas(data.data))
+      .catch((error) => console.error("Error al traer las áreas:", error));
+  }, []);
+
+  return (
+    <div>
+      <label htmlFor="areaSelect">Selecciona un equipo:</label>
+      <select
+        id="areaSelect"
+        value={selectedArea}
+        onChange={(e) => setSelectedArea(e.target.value)}
+      >
+        <option value="">-- Selecciona una opción --</option>
+        {areas.map((area: any, index) => (
+          <option key={index} value={area.nombre_equipo}>
+            {area.nombre_equipo}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}