get equipos

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -1,13 +1,13 @@
 "use client";
-import { useState } from "react";
-import SelectAreas from "../SelectAreas";
+import { envConfig } from "@/app/lib/config";
+import axios from "axios";
+import { useEffect, useState } from "react";
 
 interface DatosEquipo {
   titulo: string;
   opcion: string[];
 }
 
-// Lista de programas disponibles
 const programas = [
   "3D MAX STUDIO 2014",
   "ADOBE CREATIVE SUITE",
@@ -35,28 +35,42 @@ 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
 };
 
+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({ 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 }), {})
   );
+  const [equipo, setEquipo] = useState<Equipos[]>();
+
+  useEffect(() => {
+    const getEquipos = async () => {
+      const equipos = await axios.get(`${envConfig.apiUrl}/equipo`);
+      setEquipo(equipos.data);
+    };
+    getEquipos();
+  }, []);
 
   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] =
@@ -65,7 +79,6 @@ export default function ProgramSelector({ titulo, opcion }: DatosEquipo) {
     setCheckboxes(nuevosCheckboxes);
   };
 
-  // Guardar cambios (ejemplo)
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     console.log("Equipo:", equipoSeleccionado);
@@ -77,17 +90,14 @@ export default function ProgramSelector({ titulo, opcion }: DatosEquipo) {
 
   return (
     <form className="form-container" onSubmit={handleSubmit}>
-      <label>{titulo}</label>
-
-      <SelectAreas />
-
       <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
         <option value="">-- Selecciona un equipo --</option>
-        {opcion.map((eq, i) => (
-          <option key={i} value={eq}>
-            {eq}
-          </option>
-        ))}
+        {equipo &&
+          equipo.map((eq, i) => (
+            <option key={i} value={eq.id_equipo}>
+              {eq.nombre_equipo}
+            </option>
+          ))}
       </select>
 
       <div className="checkbox-grid">

app/Components/SelectAreas.tsx

@@ -13,7 +13,7 @@ export default function SelectAreas() {
 
   useEffect(() => {
     axios
-      .get(`${envConfig.apiUrl}/asignacionTiempo_test/area-ubicacion`)
+      .get(`${envConfig.apiUrl}/area-ubicacion`)
       .then((data) => {
         setAreas(data.data);
       })