added funtionality to bottonToggle

src/components/Equipo_Computo/Pregunta1.tsx

@@ -48,7 +48,7 @@ export default function Pregunta1() {
 
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     if (!token) {
       console.error("Token no encontrado");
@@ -56,10 +56,12 @@ export default function Pregunta1() {
       return;
     }
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post<RawEntry[]>(
         `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_tipoUso`,
-        ["EN DESUSO", "EN USO"],
+        body,
         { headers: { Authorization: `Bearer ${token}` } }
       )
       .then((res) => {
@@ -87,6 +89,10 @@ export default function Pregunta1() {
       })
       .catch((err) => console.error("Error al cargar datos", err))
       .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   const renderTabla = (tablaIndex: number) => {
@@ -168,7 +174,11 @@ export default function Pregunta1() {
 
       <div className={style["pregunta-cuadro"]}>
         Número de equipos de cómputo por cada categoría y perfil de usuario.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className={style["contenedor-tablas"]}>

src/components/Equipo_Computo/Pregunta2.tsx

@@ -57,14 +57,15 @@ export default function Pregunta2() {
   const [data, setData] = useState<PlatformData | null>(null);
   const [loading, setLoading] = useState(true);
 
-  // ✔ GET AXIOS PROFESIONAL
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
+
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
     axios
       .post(
         `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_sistemasOperativos`,
-        ["EN DESUSO", "EN USO"],
+        body,
         { headers }
       )
       .then((res) => {
@@ -84,6 +85,10 @@ export default function Pregunta2() {
       .finally(() => {
         setLoading(false);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   if (loading)
@@ -94,8 +99,12 @@ export default function Pregunta2() {
         </div>
 
         <div className={styles["pregunta-cuadro_p1"]}>
-          Número de equipos de cómputo por cada categoría y perfil de usuario.
-          <ToggleButton />
+          Número de sistemas Operativos por cada categoría y perfil de usuario.
+          <ToggleButton
+            onChange={(estado) => {
+              cargarDatos(estado);
+            }}
+          />
         </div>
         <div>Cargando datos...</div>
       </div>
@@ -109,8 +118,12 @@ export default function Pregunta2() {
         </div>
 
         <div className={styles["pregunta-cuadro_p1"]}>
-          Número de equipos de cómputo por cada categoría y perfil de usuario.
-          <ToggleButton />
+          Número de sistemas Operativos por cada categoría y perfil de usuario.
+          <ToggleButton
+            onChange={(estado) => {
+              cargarDatos(estado);
+            }}
+          />
         </div>
         <div className={styles.scanView_P3}>Error al cargar los datos.</div>
       </div>
@@ -125,8 +138,12 @@ export default function Pregunta2() {
       </div>
 
       <div className={styles["pregunta-cuadro_p1"]}>
-        Número de equipos de cómputo por cada categoría y perfil de usuario.
-        <ToggleButton />
+        Número de sistemas Operativos por cada categoría y perfil de usuario.
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
       <div className={styles.scanView_P1}>
         <div className={styles["main-content_P1"]}>

src/components/Equipo_Computo/Pregunta3.tsx

@@ -119,7 +119,7 @@ export default function Pregunta3_2() {
   const [data, setData] = useState<PlatformData | null>(null);
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     if (!token) {
       console.error("Token no encontrado");
@@ -127,11 +127,13 @@ export default function Pregunta3_2() {
       return;
     }
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     const headers = { Authorization: `Bearer ${token}` };
     axios
       .post(
         `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_procesador`,
-        ["EN DESUSO", "EN USO"],
+        body,
         { headers }
       )
       .then((res) => {
@@ -153,6 +155,10 @@ export default function Pregunta3_2() {
       .finally(() => {
         setLoading(false);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   if (loading)
@@ -163,7 +169,11 @@ export default function Pregunta3_2() {
         </div>
         <div className={styles["pregunta-cuadro_P3"]}>
           Cantidad de población beneficiada por plataforma y tipo de procesador.
-          <ToggleButton />
+          <ToggleButton
+            onChange={(estado) => {
+              cargarDatos(estado);
+            }}
+          />
         </div>
         <div className={styles.scanView_P3}>Cargando datos...</div>
       </div>
@@ -177,7 +187,11 @@ export default function Pregunta3_2() {
         </div>
         <div className={styles["pregunta-cuadro_P3"]}>
           Cantidad de población beneficiada por plataforma y tipo de procesador.
-          <ToggleButton />
+          <ToggleButton
+            onChange={(estado) => {
+              cargarDatos(estado);
+            }}
+          />
         </div>
         <div className={styles.scanView_P3}>Error al cargar los datos.</div>
       </div>
@@ -193,7 +207,11 @@ export default function Pregunta3_2() {
 
       <div className={styles["pregunta-cuadro_P3"]}>
         Cantidad de población beneficiada por plataforma y tipo de procesador.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
       <div className={styles.scanView_P3}>
         <div className={styles.mainContent_P3}>

src/components/Equipo_Computo/Pregunta7.tsx

@@ -72,16 +72,15 @@ export default function Pregunta7() {
     return [pct(menores2), pct(entre2_3), pct(entre4_5), pct(mayores6)];
   };
 
-  // ------------------------------
-  // CARGA DE DATOS
-  // ------------------------------
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post<RespuestaAntiguedad>(
         `${api_url}/equipos/reporte/contar_perifericos_antiguedad`,
-        ["EN DESUSO", "EN USO"],
+        body,
         {
           headers: { Authorization: `Bearer ${token}` },
         }
@@ -99,6 +98,10 @@ export default function Pregunta7() {
       })
       .catch((err) => console.error("Error cargando datos:", err))
       .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   const calcularTotalFila = (valores: string[]) =>
@@ -112,7 +115,11 @@ export default function Pregunta7() {
 
       <div className="pregunta-cuadro">
         Antigüedad que tienen los equipos periféricos del área universitaria.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className="tabla-contenedor">

src/components/Equipo_Computo/Pregunta9.tsx

@@ -86,7 +86,7 @@ export default function Pregunta9() {
     ];
   };
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     if (!token) {
       console.error("Token no encontrado");
@@ -94,10 +94,12 @@ export default function Pregunta9() {
       return;
     }
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post<ApiResponse>(
         `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_antiguedad`,
-        ["EN DESUSO", "EN USO"],
+        body,
         {
           headers: { Authorization: `Bearer ${token}` },
         }
@@ -126,6 +128,10 @@ export default function Pregunta9() {
       .finally(() => {
         setLoading(false);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   const calcularTotalFila = (valores: string[]) =>
@@ -150,7 +156,11 @@ export default function Pregunta9() {
       {/* Pregunta 9: Antigüedad */}
       <div className="pregunta-cuadro">
         Antigüedad que tienen los equipos de cómputo del área universitaria.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className="tabla-contenedor">

src/components/Equipo_Computo/pregunta10.css

@@ -5,6 +5,7 @@
   padding: 15px;
   border-radius: 8px;
   font-size: 16px;
+  text-align: start;
 }
 
 /* === Contenedor de tabla === */

src/components/Equipo_Computo/pregunta10.tsx

@@ -15,7 +15,7 @@ export default function Pregunta10() {
 
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     if (!token) {
       console.error("Token no encontrado");
@@ -23,10 +23,12 @@ export default function Pregunta10() {
       return;
     }
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post<number[]>(
         `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/garantia`,
-        ["EN DESUSO", "EN USO"],
+        body,
         {
           headers: { Authorization: `Bearer ${token}` },
         }
@@ -47,6 +49,10 @@ export default function Pregunta10() {
       .finally(() => {
         setLoading(false);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   if (loading) {
@@ -57,7 +63,11 @@ export default function Pregunta10() {
     <>
       <div className="pregunta-cuadro">
         Equipos de cómputo que tienen garantía de proveedoro.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className="tabla-contenedor">

src/components/Equipo_Computo/pregunta2.module.scss

@@ -61,6 +61,7 @@
 
   .main-content_P1 {
     display: flex;
+    width: 100%;
   }
 
   .tabs_P1 {

src/components/Perifericos/Pregunta1EP.tsx

@@ -36,87 +36,84 @@ export default function Pregunta1EP() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
 
-    axios
-      .post(
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
+    try {
+      const res = await axios.post(
         `${api_url}/equipos/reporte/equipos_impesion_group/impresoras`,
-        ["EN DESUSO", "EN USO"],
-        {
-          headers,
+        body,
+        { headers }
+      );
+
+      const data = res.data;
+
+      const valores = {
+        inyeccionTinta: "0",
+        laserPequenaBN: "0",
+        matrizPuntos: "0",
+        laserAltoVolumenBN: "0",
+        laserPequenaColor: "0",
+        multifuncionales: "0",
+        laserAltoVolumenColor: "0",
+        impresora3D: "0",
+        plotter: "0",
+        credencial: "0",
+        termica: "0",
+      };
+
+      data.forEach((item: any) => {
+        const uso = item.periferico.toUpperCase().trim();
+        const total = item.total ?? "0";
+
+        switch (uso) {
+          case "INYECCIÓN TINTA":
+            valores.inyeccionTinta = total;
+            break;
+          case "LÁSER PEQUEÑA B/N":
+            valores.laserPequenaBN = total;
+            break;
+          case "MATRIZ DE PUNTOS":
+            valores.matrizPuntos = total;
+            break;
+          case "LÁSER DE ALTO VOLUMEN B/N":
+            valores.laserAltoVolumenBN = total;
+            break;
+          case "LÁSER PEQUEÑA COLOR":
+            valores.laserPequenaColor = total;
+            break;
+          case "MULTIFUNCIONALES":
+            valores.multifuncionales = total;
+            break;
+          case "LÁSER DE ALTO VOLUMEN COLOR":
+            valores.laserAltoVolumenColor = total;
+            break;
+          case "3D":
+            valores.impresora3D = total;
+            break;
+          case "IMPRESORA CREDENCIALES":
+            valores.credencial = total;
+            break;
+          case "IMPRESORA TÉRMICA":
+            valores.termica = total;
+            break;
+          case "PLOTTER":
+            valores.plotter = total;
+            break;
         }
-      )
-      .then((res) => {
-        const data = res.data;
-
-        const valores = {
-          inyeccionTinta: "0",
-          laserPequenaBN: "0",
-          matrizPuntos: "0",
-          laserAltoVolumenBN: "0",
-          laserPequenaColor: "0",
-          multifuncionales: "0",
-          laserAltoVolumenColor: "0",
-          impresora3D: "0",
-          plotter: "0",
-          credencial: "0",
-          termica: "0",
-        };
-
-        data.forEach((item: any) => {
-          const uso = item.periferico.toUpperCase().trim();
-          const total = item.total ?? "0";
-
-          switch (uso) {
-            case "INYECCIÓN TINTA":
-              valores.inyeccionTinta = total;
-              break;
-
-            case "LÁSER PEQUEÑA B/N":
-              valores.laserPequenaBN = total;
-              break;
-
-            case "MATRIZ DE PUNTOS":
-              valores.matrizPuntos = total;
-              break;
-
-            case "LÁSER DE ALTO VOLUMEN B/N":
-              valores.laserAltoVolumenBN = total;
-              break;
-
-            case "LÁSER PEQUEÑA COLOR":
-              valores.laserPequenaColor = total;
-              break;
-
-            case "MULTIFUNCIONALES":
-              valores.multifuncionales = total;
-              break;
-
-            case "LÁSER DE ALTO VOLUMEN COLOR":
-              valores.laserAltoVolumenColor = total;
-              break;
-            case "3D":
-              valores.impresora3D = total;
-              break;
-            case "IMPRESORA CREDENCIALES":
-              valores.credencial = total;
-              break;
-            case "IMPRESORA TÉRMICA":
-              valores.termica = total;
-              break;
-            case "PLOTTER":
-              valores.plotter = total;
-              break;
-          }
-        });
-
-        setEquipos(valores);
-      })
-      .catch((err) => {
-        console.error("Error:", err);
       });
+
+      setEquipos(valores);
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   return (
@@ -127,7 +124,11 @@ export default function Pregunta1EP() {
 
       <div className="pregunta-cuadro">
         Equipos de impresión.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className={style.grid}>

src/components/Perifericos/Pregunta2EP.tsx

@@ -26,14 +26,16 @@ export default function Pregunta2EP() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post(
         `${api_url}/equipos/reporte/contar_periferico_tipoUso/impresoras`,
-        ["EN DESUSO", "EN USO"],
+        body,
         {
           headers,
         }
@@ -97,13 +99,21 @@ export default function Pregunta2EP() {
       .catch((err) => {
         console.error("Error:", err);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   return (
     <div className={styles.container_P2}>
       <div className="pregunta-cuadro">
         Equipos de impresión de acuerdo con la población universitaria.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className={styles.row_P2}>

src/components/Perifericos/Pregunta4EP.tsx

@@ -22,13 +22,16 @@ export default function Pregunta4EP() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
+
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post(
         `${api_url}/equipos/reporte/equipos_impesion_group/dijitales`,
-        ["EN DESUSO", "EN USO"],
+        body,
         {
           headers,
         }
@@ -72,6 +75,10 @@ export default function Pregunta4EP() {
       .catch((err) => {
         console.error("Error:", err);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   return (
@@ -82,7 +89,11 @@ export default function Pregunta4EP() {
 
       <div className="pregunta-cuadro">
         Número de equipos de digitalización.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className="grid">

src/components/Perifericos/Pregunta5EP.tsx

@@ -27,14 +27,16 @@ export default function Pregunta5EP() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post(
         `${api_url}/equipos/reporte/contar_periferico_tipoUso/dijtales`,
-        ["EN DESUSO", "EN USO"],
+        body,
         {
           headers,
         }
@@ -97,6 +99,10 @@ export default function Pregunta5EP() {
       .catch((err) => {
         console.error("Error:", err);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   return (
@@ -104,7 +110,11 @@ export default function Pregunta5EP() {
       <div className="pregunta-cuadro">
         Número de equipos de digitalización de acuerdo con la población
         universitaria.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className={styles.row_P2}>

src/components/Perifericos/Pregunta7EP.tsx

@@ -20,16 +20,14 @@ export default function Pregunta7EP() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
-      .post(
-        `${api_url}/equipos/reporte/contar_laboratorio`,
-        ["EN DESUSO", "EN USO"],
-        { headers }
-      )
+      .post(`${api_url}/equipos/reporte/contar_laboratorio`, body, { headers })
       .then((res) => {
         const formato: Dato[] = res.data.map((item: any) => ({
           nombre: item.laboratorio || "SIN NOMBRE",
@@ -41,6 +39,10 @@ export default function Pregunta7EP() {
       .catch((err) => {
         console.error("Error cargando datos:", err);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   const sortedData = React.useMemo(() => {
@@ -91,7 +93,11 @@ export default function Pregunta7EP() {
       </div>
       <div className="pregunta-cuadro">
         Numero de laboratorios.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
 
       <div className="controls">

src/components/Perifericos/Pregunta8.tsx

@@ -20,14 +20,16 @@ export default function Pregunta8() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  useEffect(() => {
+  const cargarDatos = async (baja: boolean) => {
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
 
+    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
+
     axios
       .post(
         `${api_url}/equipos/reporte/contar_proyecto`,
-        ["EN DESUSO", "EN USO"],
+        body,
         { headers }
       )
       .then((res) => {
@@ -41,6 +43,10 @@ export default function Pregunta8() {
       .catch((err) => {
         console.error("Error cargando datos:", err);
       });
+  };
+
+  useEffect(() => {
+    cargarDatos(false);
   }, []);
 
   const sortedData = React.useMemo(() => {
@@ -91,7 +97,11 @@ export default function Pregunta8() {
       </div>
       <div className="pregunta-cuadro">
         Numero de proyectos.
-        <ToggleButton />
+        <ToggleButton
+          onChange={(estado) => {
+            cargarDatos(estado);
+          }}
+        />
       </div>
       <div className="controls">
         <div className="show-records">