selector room and machine work only left save

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -48,10 +48,6 @@ export default function ProgramSelector({
     fetchData();
   }, []);
 
-  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setEquipoSeleccionado(Number(e.target.value));
-  };
-
   const handleTogglePrograma = (id: number) => {
     setCheckboxes((prev) => ({
       ...prev,
@@ -72,7 +68,7 @@ export default function ProgramSelector({
 
   useEffect(() => {
     if (!programas.length) return;
-    if (!ubicacion && !id) return;
+    if (ubicacion === null && id === null) return;
 
     const buildCheckboxes = async () => {
       const baseCheckboxes: Record<number, boolean> = {};
@@ -83,14 +79,16 @@ export default function ProgramSelector({
       try {
         let res;
 
-        if (ubicacion) {
+        if (ubicacion && ubicacion !== "0") {
           res = await axios.get(
             `${envConfig.apiUrl}/programa-equipo/${ubicacion}`,
           );
         }
 
         if (id) {
-          res = await axios.get(`${envConfig.apiUrl}/area-ubicacion/programs/${id}`);
+          res = await axios.get(
+            `${envConfig.apiUrl}/area-ubicacion/programs/${id}`,
+          );
         }
 
         res?.data.forEach((item: any) => {
@@ -135,3 +133,4 @@ export default function ProgramSelector({
     </form>
   );
 }
+//IO

app/Components/InformacionEquipos/SelectorEquipo.tsx

@@ -1,7 +1,8 @@
 "use client";
 import { envConfig } from "@/app/lib/config";
-import axios from "axios";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
+import axios from "axios";
 
 interface Equipos {
   id_equipo: number;
@@ -21,21 +22,34 @@ interface Props {
 
 export default function SelectorEquipo({ onSearch }: Props) {
   const [sala, setSala] = useState<Equipos[]>();
-  const [selected, setSelected] = useState<string>();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const paramSala = Number(searchParams.get("equipo")) || 0;
+  const [selected, setSelected] = useState<number>(paramSala);
 
   const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
-    setSelected(value);
+    const numberValue = Number(e.target.value);
 
-    if (value) {
+    setSelected(numberValue);
+
+    if (numberValue === 0) {
+      onSearch('');
+    } else {
       onSearch(value);
     }
-  };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (!selected) return;
-    onSearch(selected);
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (numberValue === 0) {
+      params.delete("equipo");
+    } else {
+      params.set("equipo", value);
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
   };
 
   useEffect(() => {
@@ -52,7 +66,7 @@ export default function SelectorEquipo({ onSearch }: Props) {
     <form className="form-container">
       <label>Ubicacion de equipo</label>
       <select value={selected} onChange={handleChangeEquipo}>
-        <option value="">-- Selecciona una equipo --</option>
+        <option value={0}>-- Selecciona una equipo --</option>
         {sala &&
           sala.map((eq) => (
             <option key={eq.id_equipo} value={eq.ubicacion}>
@@ -64,3 +78,4 @@ export default function SelectorEquipo({ onSearch }: Props) {
     </form>
   );
 }
+//IO

app/Components/InformacionEquipos/SelectorSala.tsx

@@ -1,7 +1,8 @@
 "use client";
 import { envConfig } from "@/app/lib/config";
-import axios from "axios";
 import { useEffect, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import axios from "axios";
 
 interface Area {
   id_area_ubicacion: number;
@@ -14,28 +15,38 @@ interface Props {
 }
 
 export default function SelectorSala({ onSearch }: Props) {
-  const [sala, setSala] = useState<Area[]>();
-  const [selected, setSelected] = useState<number>();
+  const [sala, setSala] = useState<Area[]>([]);
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const paramSala = Number(searchParams.get("sala")) || 0;
+  const [selected, setSelected] = useState<number>(paramSala);
+
+  useEffect(() => {
+    setSelected(paramSala);
+    onSearch(paramSala);
+  }, [paramSala]);
 
   const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = Number(e.target.value);
     setSelected(value);
+    onSearch(value);
 
-    if (value) {
-      onSearch(value);
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (value === 0) {
+      params.delete("sala");
+    } else {
+      params.set("sala", String(value));
     }
-  };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (!selected) return;
-    onSearch(selected);
+    router.push(`${pathname}?${params.toString()}`);
   };
 
   useEffect(() => {
     const fetchData = async () => {
       const response = await axios.get(`${envConfig.apiUrl}/area-ubicacion`);
-
       setSala(response.data);
     };
 
@@ -43,17 +54,17 @@ export default function SelectorSala({ onSearch }: Props) {
   }, []);
 
   return (
-    <form className="form-container" onSubmit={handleSubmit}>
+    <form className="form-container">
       <label>Salas</label>
       <select value={selected} onChange={handleChangeEquipo}>
-        <option value="">-- Selecciona una sala --</option>
-        {sala &&
-          sala.map((sala) => (
-            <option key={sala.id_area_ubicacion} value={sala.id_area_ubicacion}>
-              {sala.area}
-            </option>
-          ))}
+        <option value={0}>-- Selecciona una sala --</option>
+        {sala.map((s) => (
+          <option key={s.id_area_ubicacion} value={s.id_area_ubicacion}>
+            {s.area}
+          </option>
+        ))}
       </select>
     </form>
   );
 }
+//IO