get programs by machine

app/(private)/InformacionEquipo/InformacionEquipo.tsx

@@ -16,6 +16,7 @@ export default function InformacionEquipo({
   defaultKey?: string;
 }) {
   const [id, setId] = useState<number | null>(null);
+  const [ubicacion, setUbicacion] = useState<string | null>(null);
 
   return (
     <section className="containerSection">
@@ -36,10 +37,10 @@ export default function InformacionEquipo({
               <>
                 <SelectorEquipo
                   onSearch={(sala) => {
-                    setId(sala);
+                    setUbicacion(sala);
                   }}
                 />
-                <ProgramSelector />,
+                <ProgramSelector ubicacion={ubicacion} />,
               </>
             ),
           },
@@ -53,7 +54,7 @@ export default function InformacionEquipo({
                     setId(sala);
                   }}
                 />
-                <ProgramSelector />
+                <ProgramSelector id={id} />
               </>
             ),
           },

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -2,6 +2,7 @@
 import { envConfig } from "@/app/lib/config";
 import axios from "axios";
 import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 
 interface Equipos {
   id_equipo: number;
@@ -18,20 +19,23 @@ interface Programa {
   programa: string;
 }
 
-export default function ProgramSelector() {
+export default function ProgramSelector({
+  ubicacion,
+  id,
+}: {
+  ubicacion?: string | null;
+  id?: number | null;
+}) {
   const [equipoSeleccionado, setEquipoSeleccionado] = useState<number | "">("");
-  const [equipos, setEquipos] = useState<Equipos[]>([]);
   const [programas, setProgramas] = useState<Programa[]>([]);
   const [checkboxes, setCheckboxes] = useState<Record<number, boolean>>({});
 
   useEffect(() => {
     const fetchData = async () => {
-      const [equiposRes, programasRes] = await Promise.all([
-        axios.get(`${envConfig.apiUrl}/equipo`),
+      const [programasRes] = await Promise.all([
         axios.get(`${envConfig.apiUrl}/programa`),
       ]);
 
-      setEquipos(equiposRes.data);
       setProgramas(programasRes.data);
 
       const initialCheckboxes: Record<number, boolean> = {};
@@ -66,9 +70,45 @@ export default function ProgramSelector() {
     console.log("Programas seleccionados:", programasSeleccionados);
   };
 
+  useEffect(() => {
+    if (!programas.length) return;
+
+    const buildCheckboxes = async () => {
+      const baseCheckboxes: Record<number, boolean> = {};
+      programas.forEach((p) => {
+        baseCheckboxes[p.id_programa] = false;
+      });
+
+      if (ubicacion) {
+        try {
+          const res = await axios.get(
+            `${envConfig.apiUrl}/programa-equipo/${ubicacion}`,
+          );
+
+          res.data.forEach((item: any) => {
+            baseCheckboxes[item.id_programa] = true;
+          });
+        } catch (error: any) {
+          if (axios.isAxiosError(error)) {
+            if (error.response?.status === 404) {
+              toast.error("Equipo sin programas");
+            } else {
+              toast.error("Error al cargar programas del equipo");
+            }
+          } else {
+            toast.error("Error inesperado");
+          }
+        }
+      }
+
+      setCheckboxes(baseCheckboxes);
+    };
+
+    buildCheckboxes();
+  }, [programas, ubicacion]);
+
   return (
     <form className="form-container" onSubmit={handleSubmit}>
-
       <div className="checkbox-grid">
         {programas.map((prog) => (
           <label key={prog.id_programa}>

app/Components/InformacionEquipos/SelectorEquipo.tsx

@@ -11,21 +11,25 @@ interface Equipos {
   ubicacion: string;
   activo: boolean;
   ip: string;
-  areaUbicacion:{area:string}
-  plataforma:{nombre:string}
+  areaUbicacion: { area: string };
+  plataforma: { nombre: string };
 }
 
-
 interface Props {
-  onSearch: (id: number) => void;
+  onSearch: (ubicacion: string) => void;
 }
 
 export default function SelectorEquipo({ onSearch }: Props) {
   const [sala, setSala] = useState<Equipos[]>();
-  const [selected, setSelected] = useState<number>();
+  const [selected, setSelected] = useState<string>();
 
   const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelected(Number(e.target.value));
+    const value = e.target.value;
+    setSelected(value);
+
+    if (value) {
+      onSearch(value);
+    }
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -45,14 +49,15 @@ export default function SelectorEquipo({ onSearch }: Props) {
   }, []);
 
   return (
-    <form className="form-container" onSubmit={handleSubmit}>
+    <form className="form-container">
       <select value={selected} onChange={handleChangeEquipo}>
         <option value="">-- Selecciona una equipo --</option>
         {sala &&
           sala.map((eq) => (
-          <option key={eq.id_equipo} value={eq.id_equipo}>
-            {eq.ubicacion } {eq.nombre_equipo} {eq.plataforma.nombre} {eq.areaUbicacion.area}
-          </option>
+            <option key={eq.id_equipo} value={eq.ubicacion}>
+              {eq.ubicacion} {eq.nombre_equipo} {eq.plataforma.nombre}{" "}
+              {eq.areaUbicacion.area}
+            </option>
           ))}
       </select>
     </form>