add key and add request

app/(private)/InformacionEquipo/InformacionEquipo.tsx

@@ -40,7 +40,7 @@ export default function InformacionEquipo({
                     setUbicacion(sala);
                   }}
                 />
-                <ProgramSelector ubicacion={ubicacion} />,
+                <ProgramSelector key={1} ubicacion={ubicacion} />,
               </>
             ),
           },
@@ -54,7 +54,7 @@ export default function InformacionEquipo({
                     setId(sala);
                   }}
                 />
-                <ProgramSelector id={id} />
+                <ProgramSelector key={2} id={id} />
               </>
             ),
           },

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -72,6 +72,7 @@ export default function ProgramSelector({
 
   useEffect(() => {
     if (!programas.length) return;
+    if (!ubicacion && !id) return;
 
     const buildCheckboxes = async () => {
       const baseCheckboxes: Record<number, boolean> = {};
@@ -79,25 +80,31 @@ export default function ProgramSelector({
         baseCheckboxes[p.id_programa] = false;
       });
 
-      if (ubicacion) {
-        try {
-          const res = await axios.get(
+      try {
+        let res;
+
+        if (ubicacion) {
+          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");
-            }
+        if (id) {
+          res = await axios.get(`${envConfig.apiUrl}/programa-area/${id}`);
+        }
+
+        res?.data.forEach((item: any) => {
+          baseCheckboxes[item.id_programa] = true;
+        });
+      } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+          if (error.response?.status === 404) {
+            toast.error("Sin programas asignados");
           } else {
-            toast.error("Error inesperado");
+            toast.error("Error al cargar programas");
           }
+        } else {
+          toast.error("Error inesperado");
         }
       }
 
@@ -105,7 +112,7 @@ export default function ProgramSelector({
     };
 
     buildCheckboxes();
-  }, [programas, ubicacion]);
+  }, [programas, ubicacion, id]);
 
   return (
     <form className="form-container" onSubmit={handleSubmit}>

app/Components/InformacionEquipos/SelectorSala.tsx

@@ -18,7 +18,12 @@ export default function SelectorSala({ onSearch }: Props) {
   const [selected, setSelected] = useState<number>();
 
   const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelected(Number(e.target.value));
+    const value = Number(e.target.value);
+    setSelected(value);
+
+    if (value) {
+      onSearch(value);
+    }
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {